diff --git a/.changeset/large-drinks-provide.md b/.changeset/large-drinks-provide.md
new file mode 100644
index 000000000..f43059160
--- /dev/null
+++ b/.changeset/large-drinks-provide.md
@@ -0,0 +1,7 @@
+---
+'@ant-design/web3-assets': major
+'@ant-design/web3-icons': minor
+'@ant-design/web3-wagmi': minor
+---
+
+feat: add TokenPocket wallet icon and metadata
diff --git a/.dumi/theme/builtins/IconSearch/fields.ts b/.dumi/theme/builtins/IconSearch/fields.ts
index cde0ae4d1..84b67d382 100644
--- a/.dumi/theme/builtins/IconSearch/fields.ts
+++ b/.dumi/theme/builtins/IconSearch/fields.ts
@@ -18,7 +18,7 @@ const chain = [
'Avalanche',
];
-const tool = ['CoinbaseWallet', 'Etherscan', 'MetaMask', 'WalletConnect'];
+const tool = ['CoinbaseWallet', 'Etherscan', 'MetaMask', 'WalletConnect', 'TokenPocket'];
const datum = [...chain, ...tool];
diff --git a/packages/assets/src/wallets/index.ts b/packages/assets/src/wallets/index.ts
index 401770072..e131aaff6 100644
--- a/packages/assets/src/wallets/index.ts
+++ b/packages/assets/src/wallets/index.ts
@@ -1,3 +1,4 @@
export * from './meta-mask';
export * from './wallet-connect';
export * from './coinbase-wallet';
+export * from './token-pocket';
diff --git a/packages/assets/src/wallets/token-pocket.tsx b/packages/assets/src/wallets/token-pocket.tsx
new file mode 100644
index 000000000..671033aee
--- /dev/null
+++ b/packages/assets/src/wallets/token-pocket.tsx
@@ -0,0 +1,20 @@
+import type { WalletMetadata } from '@ant-design/web3-common';
+import { TokenPocketColorful, ChromeCircleColorful } from '@ant-design/web3-icons';
+
+export const metadata_TokenPocket: WalletMetadata = {
+ icon: ,
+ name: 'TokenPocket',
+ remark: 'TokenPocket',
+ app: {
+ link: 'https://www.tokenpocket.pro/en/download/app',
+ },
+ extensions: [
+ {
+ key: 'Chrome',
+ browserIcon: ,
+ browserName: 'Chrome',
+ link: 'https://chromewebstore.google.com/detail/mfgccjchihfkkindfppnaooecgfneiii',
+ description: 'Access your wallet right from your favorite web browser.',
+ },
+ ],
+};
diff --git a/packages/icons/src/__tests__/__snapshots__/index.test.tsx.snap b/packages/icons/src/__tests__/__snapshots__/index.test.tsx.snap
index bbd3792cc..2121f3248 100644
--- a/packages/icons/src/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/icons/src/__tests__/__snapshots__/index.test.tsx.snap
@@ -326,6 +326,110 @@ exports[`Test Icons > should render all icons 8`] = `
`;
exports[`Test Icons > should render all icons 9`] = `
+
+
+
+`;
+
+exports[`Test Icons > should render all icons 10`] = `
should render all icons 9`] = `
`;
-exports[`Test Icons > should render all icons 10`] = `
+exports[`Test Icons > should render all icons 11`] = `
should render all icons 10`] = `
`;
-exports[`Test Icons > should render all icons 11`] = `
+exports[`Test Icons > should render all icons 12`] = `
should render all icons 11`] = `
`;
-exports[`Test Icons > should render all icons 12`] = `
+exports[`Test Icons > should render all icons 13`] = `
should render all icons 12`] = `
`;
-exports[`Test Icons > should render all icons 13`] = `
+exports[`Test Icons > should render all icons 14`] = `
should render all icons 13`] = `
`;
-exports[`Test Icons > should render all icons 14`] = `
+exports[`Test Icons > should render all icons 15`] = `
should render all icons 14`] = `
`;
-exports[`Test Icons > should render all icons 15`] = `
+exports[`Test Icons > should render all icons 16`] = `
should render all icons 15`] = `
`;
-exports[`Test Icons > should render all icons 16`] = `
+exports[`Test Icons > should render all icons 17`] = `
should render all icons 16`] = `
-
-
-
-
-
+
should render all icons 16`] = `
`;
-exports[`Test Icons > should render all icons 17`] = `
+exports[`Test Icons > should render all icons 18`] = `
should render all icons 17`] = `
`;
-exports[`Test Icons > should render all icons 18`] = `
+exports[`Test Icons > should render all icons 19`] = `
should render all icons 18`] = `
`;
-exports[`Test Icons > should render all icons 19`] = `
+exports[`Test Icons > should render all icons 20`] = `
should render all icons 19`] = `
`;
-exports[`Test Icons > should render all icons 20`] = `
+exports[`Test Icons > should render all icons 21`] = `
should render all icons 20`] = `
`;
-exports[`Test Icons > should render all icons 21`] = `
+exports[`Test Icons > should render all icons 22`] = `
should render all icons 21`] = `
-
-
-
-
-
+
should render all icons 21`] = `
`;
-exports[`Test Icons > should render all icons 22`] = `
+exports[`Test Icons > should render all icons 23`] = `
should render all icons 22`] = `
`;
-exports[`Test Icons > should render all icons 23`] = `
+exports[`Test Icons > should render all icons 24`] = `
should render all icons 23`] = `
`;
-exports[`Test Icons > should render all icons 24`] = `
+exports[`Test Icons > should render all icons 25`] = `
should render all icons 24`] = `
`;
-exports[`Test Icons > should render all icons 25`] = `
+exports[`Test Icons > should render all icons 26`] = `
should render all icons 25`] = `
`;
-exports[`Test Icons > should render all icons 26`] = `
+exports[`Test Icons > should render all icons 27`] = `
should render all icons 26`] = `
`;
-exports[`Test Icons > should render all icons 27`] = `
+exports[`Test Icons > should render all icons 28`] = `
should render all icons 27`] = `
`;
-exports[`Test Icons > should render all icons 28`] = `
+exports[`Test Icons > should render all icons 29`] = `
should render all icons 28`] = `
`;
-exports[`Test Icons > should render all icons 29`] = `
+exports[`Test Icons > should render all icons 30`] = `
should render all icons 29`] = `
`;
-exports[`Test Icons > should render all icons 30`] = `
+exports[`Test Icons > should render all icons 31`] = `
should render all icons 30`] = `
`;
-exports[`Test Icons > should render all icons 31`] = `
+exports[`Test Icons > should render all icons 32`] = `
should render all icons 31`] = `
id="Protocol=Arbitrum-One,-Effect=None-Clipped"
transform="translate(1307, 5728)"
>
-
-
-
-
{
it('icon path referenced id should start with `ant-web3-icon-`', async () => {
const comps = await getComponents('components');
+ const relIdRegex = /url\(#[a-zA-Z0-9-]+\)/g;
+
comps.forEach((Comp) => {
const { container } = render();
- const pathWithFill = container.querySelectorAll('path[fill^="url(#"]');
+ const htmlText = container.innerHTML;
+
+ // find all `url(#id)` in the html text
+ const matches = htmlText.match(relIdRegex);
- // The `id` referenced by the `fill` attr of the `path` element
- // must start with `ant-web3-icon-`
- pathWithFill.forEach((path) => {
- expect(path.getAttribute('fill')).toMatch(/^url\(#ant-web3-icon-/);
+ matches?.forEach((match) => {
+ expect(
+ match,
+ `${Comp.displayName} reference id: ${match} is not start with ant-web3-icon-`,
+ ).toMatch(/^url\(#ant-web3-icon-/);
});
});
});
diff --git a/packages/icons/src/components/tokenpocket-colorful.tsx b/packages/icons/src/components/tokenpocket-colorful.tsx
new file mode 100644
index 000000000..4e185550a
--- /dev/null
+++ b/packages/icons/src/components/tokenpocket-colorful.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import AntdIcon from '@ant-design/icons';
+import SVGComponent from '../svgs/tokenpocket-colorful.svg';
+import { type IconBaseProps } from '@ant-design/icons/lib/components/Icon';
+import classnames from 'classnames';
+import { ConfigProvider } from 'antd';
+
+export const TokenPocketColorful = React.forwardRef(
+ (props, ref) => {
+ const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
+ const prefixCls = getPrefixCls('web3-icon-tokenpocket-colorful');
+ return (
+
+ );
+ },
+);
+TokenPocketColorful.displayName = 'TokenPocketColorful';
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index 98dcffa06..3ad023150 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -36,3 +36,5 @@ export * from './components/polygon-circle-colorful';
export * from './components/fantom-circle-colorful';
export * from './components/chrome-circle-colorful';
+
+export * from './components/tokenpocket-colorful';
diff --git a/packages/icons/src/svgs/arbitrum-circle-colorful.svg b/packages/icons/src/svgs/arbitrum-circle-colorful.svg
index d8b0899a0..3c844e132 100644
--- a/packages/icons/src/svgs/arbitrum-circle-colorful.svg
+++ b/packages/icons/src/svgs/arbitrum-circle-colorful.svg
@@ -6,11 +6,7 @@
-
-
-
-
-
+
@@ -24,4 +20,4 @@
-
\ No newline at end of file
+
diff --git a/packages/icons/src/svgs/ethereum-circle-colorful.svg b/packages/icons/src/svgs/ethereum-circle-colorful.svg
index a3e8f5f0f..661d3d617 100644
--- a/packages/icons/src/svgs/ethereum-circle-colorful.svg
+++ b/packages/icons/src/svgs/ethereum-circle-colorful.svg
@@ -7,11 +7,7 @@
-
-
-
-
-
+
@@ -24,4 +20,4 @@
-
\ No newline at end of file
+
diff --git a/packages/icons/src/svgs/fantom-circle-colorful.svg b/packages/icons/src/svgs/fantom-circle-colorful.svg
index e91f6bd64..1eefdee27 100644
--- a/packages/icons/src/svgs/fantom-circle-colorful.svg
+++ b/packages/icons/src/svgs/fantom-circle-colorful.svg
@@ -8,11 +8,7 @@
-
-
-
-
-
+
@@ -22,4 +18,4 @@
-
\ No newline at end of file
+
diff --git a/packages/icons/src/svgs/tokenpocket-colorful.svg b/packages/icons/src/svgs/tokenpocket-colorful.svg
new file mode 100644
index 000000000..099b18395
--- /dev/null
+++ b/packages/icons/src/svgs/tokenpocket-colorful.svg
@@ -0,0 +1,29 @@
+
+
diff --git a/packages/wagmi/src/wallets/index.ts b/packages/wagmi/src/wallets/index.ts
index 401770072..e131aaff6 100644
--- a/packages/wagmi/src/wallets/index.ts
+++ b/packages/wagmi/src/wallets/index.ts
@@ -1,3 +1,4 @@
export * from './meta-mask';
export * from './wallet-connect';
export * from './coinbase-wallet';
+export * from './token-pocket';
diff --git a/packages/wagmi/src/wallets/token-pocket.test.tsx b/packages/wagmi/src/wallets/token-pocket.test.tsx
new file mode 100644
index 000000000..ad727bfe6
--- /dev/null
+++ b/packages/wagmi/src/wallets/token-pocket.test.tsx
@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { TokenPocket } from '@ant-design/web3-wagmi';
+
+describe('TokenPocket', () => {
+ const wallet = TokenPocket.create();
+ it('name', async () => {
+ expect(wallet.name).toBe('TokenPocket');
+ });
+
+ it('always return true for hasWalletReady', async () => {
+ const install = await wallet.hasWalletReady?.();
+ expect(install).toBe(true);
+ });
+
+ it('should create a wallet with the correct properties', () => {
+ for (const key in wallet) {
+ expect(wallet).toHaveProperty(key);
+ }
+ });
+});
diff --git a/packages/wagmi/src/wallets/token-pocket.tsx b/packages/wagmi/src/wallets/token-pocket.tsx
new file mode 100644
index 000000000..78527738d
--- /dev/null
+++ b/packages/wagmi/src/wallets/token-pocket.tsx
@@ -0,0 +1,15 @@
+import { type Wallet } from '@ant-design/web3-common';
+import { metadata_TokenPocket } from '@ant-design/web3-assets';
+import type { WalletFactory } from '../interface';
+
+export const TokenPocket: WalletFactory = {
+ name: 'TokenPocket',
+ create: (): Wallet => {
+ return {
+ ...metadata_TokenPocket,
+ hasWalletReady: async () => {
+ return true;
+ },
+ };
+ },
+};