feat: add USDT/ETH token assets; improve CryptoInput docs; refactor d…

…emos with Token assets
ant-design · May 31, 2024 · ca59ac5 · ca59ac5
1 parent 171b613
commit ca59ac5
Show file tree

Hide file tree

Showing 18 changed files with 197 additions and 185 deletions.
diff --git a/packages/assets/src/index.ts b/packages/assets/src/index.ts
@@ -1,2 +1,3 @@
 export * from './wallets';
 export * from './chains/ethereum';
+export * from './token';
diff --git a/packages/assets/src/token/ethereum.tsx b/packages/assets/src/token/ethereum.tsx
@@ -0,0 +1,45 @@
+import { ChainIds, type Token } from '@ant-design/web3-common';
+import { EthereumColorful } from '@ant-design/web3-icons';
+
+export const ETH: Token = {
+  name: 'Ethereum',
+  symbol: 'ETH',
+  decimal: 18,
+  icon: <EthereumColorful />,
+  availableChains: [
+    {
+      chain: {
+        name: 'Ethereum',
+        id: ChainIds.Mainnet,
+      },
+    },
+    {
+      chain: {
+        name: 'Polygon',
+        id: ChainIds.Polygon,
+      },
+      contract: '0x7ceB23fD6bC0adD59E62ac25578270cFf1b9f619',
+    },
+    {
+      chain: {
+        name: 'BSC',
+        id: ChainIds.BSC,
+      },
+      contract: '0x2170Ed0880ac9A755fd29B2688956BD959F933F8',
+    },
+    {
+      chain: {
+        name: 'Arbitrum',
+        id: ChainIds.Arbitrum,
+      },
+      contract: '0x82af49447d8a07e3bd95bd0d56f35241523fbab1',
+    },
+    {
+      chain: {
+        name: 'Optimism',
+        id: ChainIds.Optimism,
+      },
+      contract: '0x4200000000000000000000000000000000000006',
+    },
+  ],
+};
diff --git a/packages/assets/src/token/index.ts b/packages/assets/src/token/index.ts
@@ -0,0 +1,2 @@
+export * from './ethereum';
+export * from './usdt';
diff --git a/packages/assets/src/token/usdt.tsx b/packages/assets/src/token/usdt.tsx
@@ -0,0 +1,46 @@
+import { ChainIds, type Token } from '@ant-design/web3-common';
+import { USDTColorful } from '@ant-design/web3-icons';
+
+export const USDT: Token = {
+  name: 'Tether USD',
+  symbol: 'USDT',
+  decimal: 6,
+  icon: <USDTColorful />,
+  availableChains: [
+    {
+      chain: {
+        name: 'Ethereum',
+        id: ChainIds.Mainnet,
+      },
+      contract: '0xdac17f958d2ee523a2206206994597c13d831ec7',
+    },
+    {
+      chain: {
+        name: 'Polygon',
+        id: ChainIds.Polygon,
+      },
+      contract: '0x3813e82e6f7098b9583FC0F33a962D02018B6803',
+    },
+    {
+      chain: {
+        name: 'BSC',
+        id: ChainIds.BSC,
+      },
+      contract: '0x55d398326f99059fF775485246999027B3197955',
+    },
+    {
+      chain: {
+        name: 'Arbitrum',
+        id: ChainIds.Arbitrum,
+      },
+      contract: '0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9',
+    },
+    {
+      chain: {
+        name: 'Optimism',
+        id: ChainIds.Optimism,
+      },
+      contract: '0x7f5c764cbc14f9669b88837ca1490cca17c31607',
+    },
+  ],
+};
diff --git a/packages/web3/src/crypto-input/__tests__/index.test.tsx b/packages/web3/src/crypto-input/__tests__/index.test.tsx
@@ -1,28 +1,13 @@
 import React, { useState } from 'react';
+import { ETH, USDT } from '@ant-design/web3-assets';
 import { fireEvent, render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
 import type { CryptoInputProps } from '..';
 import { CryptoInput } from '..';
-import { type Token } from '../..';
 
 // Mock tokens
-const mockTokens = [
-  {
-    symbol: 'ETH',
-    name: 'Ethereum',
-    icon: '🟢',
-    decimal: 18,
-    availableChains: [{ contract: '0x123' }],
-  },
-  {
-    symbol: 'BTC',
-    name: 'Bitcoin',
-    icon: '🟡',
-    decimal: 18,
-    availableChains: [{ contract: '0x456' }],
-  },
-] as Token[];
+const mockTokens = [ETH, USDT];
 
 describe('CryptoInput component', () => {
   it('should render the component with placeholder text', () => {
@@ -48,8 +33,8 @@ describe('CryptoInput component', () => {
     );
 
     expect(baseElement.querySelectorAll('.ant-space-item').length).toBe(3);
-    expect(baseElement.querySelector('.custom-header')).not.toBeNull();
-    expect(baseElement.querySelector('.custom-header')?.textContent).toBe('Custom header');
+    expect(baseElement.querySelector('header')).not.toBeNull();
+    expect(baseElement.querySelector('header')?.textContent).toBe('Custom header');
   });
 
   it('should display correct footer', () => {
@@ -84,8 +69,8 @@ describe('CryptoInput component', () => {
 
     expect(selectOptions.length).toBe(2);
 
-    expect(selectOptions[0].textContent).toBe('🟢Ethereum');
-    expect(selectOptions[1].textContent).toBe('🟡Bitcoin');
+    expect(selectOptions[0].textContent).includes('Ethereum');
+    expect(selectOptions[1].textContent).includes('Tether USD');
   });
 
   it('should call onChange with selected token and amount input', () => {
@@ -125,7 +110,7 @@ describe('CryptoInput component', () => {
   });
 
   it('should calculate correct total price', () => {
-    const TestComponent = () => {
+    const TestComponent = (props: CryptoInputProps) => {
       const [crypto, setCrypto] = useState<CryptoInputProps['value']>();
 
       return (
@@ -134,6 +119,7 @@ describe('CryptoInput component', () => {
           value={crypto}
           onChange={setCrypto}
           balance={{ amount: '100', unitPrice: '100' }}
+          {...props}
         />
       );
     };
@@ -160,5 +146,9 @@ describe('CryptoInput component', () => {
     });
 
     expect(baseElement.querySelector('.total-price')?.textContent).toBe('-');
+
+    // change token unit price to undefined
+    render(<TestComponent balance={{ amount: '100', unitPrice: undefined }} />);
+    expect(baseElement.querySelector('.total-price')?.textContent).toBe('-');
   });
 });
diff --git a/packages/web3/src/crypto-input/demos/basic.tsx b/packages/web3/src/crypto-input/demos/basic.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
-import type { CryptoInputProps, Token } from '@ant-design/web3';
-import { ChainIds, CryptoInput } from '@ant-design/web3';
-import { EthereumColorful } from '@ant-design/web3-icons';
+import { CryptoInput, type CryptoInputProps, type Token } from '@ant-design/web3';
+import { ETH, USDT } from '@ant-design/web3-assets';
 
 const App: React.FC = () => {
   const [crypto, setCrypto] = useState<CryptoInputProps['value']>();
@@ -36,23 +35,7 @@ const App: React.FC = () => {
           handleQueryCrypto(value?.token);
         }
       }}
-      tokenList={[
-        {
-          name: 'Ethereum',
-          symbol: 'ETH',
-          icon: <EthereumColorful />,
-          decimal: 18,
-          availableChains: [
-            {
-              chain: {
-                id: ChainIds.Mainnet,
-                name: 'Ethereum',
-              },
-              contract: '0x',
-            },
-          ],
-        },
-      ]}
+      tokenList={[ETH, USDT]}
     />
   );
 };

diff --git a/packages/web3/src/crypto-input/demos/customFooter.tsx b/packages/web3/src/crypto-input/demos/customFooter.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import type { CryptoInputProps } from '@ant-design/web3';
-import { ChainIds, CryptoInput } from '@ant-design/web3';
-import { EthereumColorful } from '@ant-design/web3-icons';
+import { CryptoInput } from '@ant-design/web3';
+import { ETH, USDT } from '@ant-design/web3-assets';
 
 const App: React.FC = () => {
   const [crypto, setCrypto] = useState<CryptoInputProps['value']>();
@@ -11,23 +11,7 @@ const App: React.FC = () => {
       footer={() => 'Custom Footer'}
       value={crypto}
       onChange={setCrypto}
-      tokenList={[
-        {
-          name: 'Ethereum',
-          symbol: 'ETH',
-          icon: <EthereumColorful />,
-          decimal: 18,
-          availableChains: [
-            {
-              chain: {
-                id: ChainIds.Mainnet,
-                name: 'Ethereum',
-              },
-              contract: '0x',
-            },
-          ],
-        },
-      ]}
+      tokenList={[ETH, USDT]}
     />
   );
 };

diff --git a/packages/web3/src/crypto-input/demos/customHeader.tsx b/packages/web3/src/crypto-input/demos/customHeader.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
-import type { CryptoInputProps } from '@ant-design/web3';
-import { ChainIds, CryptoInput } from '@ant-design/web3';
-import { EthereumColorful } from '@ant-design/web3-icons';
+import { CryptoInput, type CryptoInputProps } from '@ant-design/web3';
+import { ETH, USDT } from '@ant-design/web3-assets';
 
 const App: React.FC = () => {
   const [crypto, setCrypto] = useState<CryptoInputProps['value']>();
@@ -11,22 +10,7 @@ const App: React.FC = () => {
       value={crypto}
       onChange={setCrypto}
       header={() => 'Crypto Input Header'}
-      tokenList={[
-        {
-          name: 'Ethereum',
-          symbol: 'ETH',
-          icon: <EthereumColorful />,
-          decimal: 18,
-          availableChains: [
-            {
-              chain: {
-                id: ChainIds.Mainnet,
-                name: 'Ethereum',
-              },
-            },
-          ],
-        },
-      ]}
+      tokenList={[ETH, USDT]}
     />
   );
 };

diff --git a/packages/web3/src/crypto-input/demos/noFooter.tsx b/packages/web3/src/crypto-input/demos/noFooter.tsx
@@ -1,35 +1,11 @@
 import { useState } from 'react';
-import type { CryptoInputProps } from '@ant-design/web3';
-import { ChainIds, CryptoInput } from '@ant-design/web3';
-import { EthereumColorful } from '@ant-design/web3-icons';
+import { CryptoInput, type CryptoInputProps } from '@ant-design/web3';
+import { ETH, USDT } from '@ant-design/web3-assets';
 
 const App: React.FC = () => {
   const [crypto, setCrypto] = useState<CryptoInputProps['value']>();
 
-  return (
-    <CryptoInput
-      value={crypto}
-      footer={false}
-      onChange={setCrypto}
-      tokenList={[
-        {
-          name: 'Ethereum',
-          symbol: 'ETH',
-          icon: <EthereumColorful />,
-          decimal: 18,
-          availableChains: [
-            {
-              chain: {
-                id: ChainIds.Mainnet,
-                name: 'Ethereum',
-              },
-              contract: '0x',
-            },
-          ],
-        },
-      ]}
-    />
-  );
+  return <CryptoInput value={crypto} footer={false} onChange={setCrypto} tokenList={[ETH, USDT]} />;
 };
 
 export default App;
diff --git a/packages/web3/src/crypto-input/demos/withSearch.tsx b/packages/web3/src/crypto-input/demos/withSearch.tsx
@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { CryptoInput, type CryptoInputProps, type Token } from '@ant-design/web3';
+import { ETH, USDT } from '@ant-design/web3-assets';
+
+const App: React.FC = () => {
+  const [crypto, setCrypto] = useState<CryptoInputProps['value']>();
+
+  const [tokenBalance, setTokenBalance] = useState<{
+    amount: string;
+    unitPrice: string;
+  }>();
+
+  const handleQueryCrypto = async (token?: Token) => {
+    if (!token) {
+      return setTokenBalance(undefined);
+    }
+
+    // mock query token balance
+    setTimeout(() => {
+      setTokenBalance({
+        amount: '100',
+        unitPrice: '100',
+      });
+    }, 500);
+  };
+
+  return (
+    <CryptoInput
+      value={crypto}
+      balance={tokenBalance}
+      onChange={(value) => {
+        setCrypto(value);
+
+        if (value?.token?.symbol !== crypto?.token?.symbol) {
+          handleQueryCrypto(value?.token);
+        }
+      }}
+      tokenList={[ETH, USDT]}
+    />
+  );
+};
+
+export default App;
diff --git a/packages/web3/src/crypto-input/index.md b/packages/web3/src/crypto-input/index.md
@@ -13,6 +13,10 @@ group:
 
 <code src="./demos/basic.tsx"></code>
 
+### With Search
+
+<code src="./demos/basic.tsx"></code>
+
 ### No default footer
 
 <code src="./demos/noFooter.tsx"></code>
@@ -35,7 +39,7 @@ group:
 | balance | selected token balance, includes amount and unit price | `{ amount: string; unitPrice: string }` | - | - |
 | header | custom render for header | (value?: [CryptoInputValue](#cryptoInputValue)) => React.ReactNode | - | - |
 | footer | custom render for footer | (value?: [CryptoInputValue](#cryptoInputValue)) => React.ReactNode | - | - |
-| ...props | Other props please ref Ant Design `Select` 组件 | [Select Props](https://ant-design.antgroup.com/components/select-cn#select-props) | - | - |
+| ...props | Others please ref `TokenSelect` | [TokenSelect](/components/token-select#api) | - | - |
 
 ### CryptoInputValue