Skip to content

Commit 9321e7d

Browse files
Likang0122Likang0122
authored
feat: PayPanel component develop (#876)
* fix: eslent err * fix: missing unit tests * fix: update chanin type * fix: add unit tests * fix: tesr ci * fix: add unit tests * fix: add unit tests * fix: update test units * fix: update test * fix: update showCode * fix: update unit tests * fix: update tests * fix: add more mockWallet * fix: Solve a few minor problems * fix: change type * fix: style * fix: eslint error * fix: add ts-ignore * fix: fix eslint error * fix: update test * fix: add Provider props * fix: update readme * fix: target supported promise * fix: lint error * fix: add render for gas info * fix: fix error * fix: change name * fix: Try to work it out * fix: Increase test coverage
1 parent 555ea4f commit 9321e7d

28 files changed

+981
-5
lines changed

‎.changeset/tender-clouds-applaud.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@ant-design/web3-assets': minor
3+
'@ant-design/web3-common': patch
4+
'@ant-design/web3': minor
5+
---
6+
7+
feat: add payPanel component

‎packages/assets/src/chains/ethereum.tsx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChainIds, createGetBrowserLink, type Chain } from '@ant-design/web3-common';
1+
import { ChainIds, ChainType, createGetBrowserLink, type Chain } from '@ant-design/web3-common';
22
import {
33
ArbitrumCircleColorful,
44
AvalancheCircleColorful,
@@ -17,6 +17,7 @@ import {
1717
export const Mainnet: Chain = {
1818
id: ChainIds.Mainnet,
1919
name: 'Ethereum',
20+
type: ChainType.EVM,
2021
icon: <EthereumCircleColorful />,
2122
browser: {
2223
icon: <EtherscanCircleColorful />,
@@ -31,6 +32,7 @@ export const Mainnet: Chain = {
3132
export const Goerli: Chain = {
3233
id: ChainIds.Goerli,
3334
name: 'Goerli',
35+
type: ChainType.EVM,
3436
icon: <EthereumCircleColorful />,
3537
browser: {
3638
icon: <EthereumCircleColorful />,
@@ -42,6 +44,7 @@ export const Goerli: Chain = {
4244
export const Sepolia: Chain = {
4345
id: ChainIds.Sepolia,
4446
name: 'Sepolia',
47+
type: ChainType.EVM,
4548
icon: <EthereumCircleColorful />,
4649
browser: {
4750
icon: <EthereumCircleColorful />,
@@ -53,6 +56,7 @@ export const Sepolia: Chain = {
5356
export const Holesky: Chain = {
5457
id: ChainIds.Holesky,
5558
name: 'Holesky',
59+
type: ChainType.EVM,
5660
icon: <EthereumCircleColorful />,
5761
browser: {
5862
icon: <EthereumCircleColorful />,
@@ -64,6 +68,7 @@ export const Holesky: Chain = {
6468
export const Polygon: Chain = {
6569
id: ChainIds.Polygon,
6670
name: 'Polygon',
71+
type: ChainType.EVM,
6772
icon: <PolygonCircleColorful />,
6873
browser: {
6974
icon: <PolygonCircleColorful />,
@@ -75,6 +80,7 @@ export const Polygon: Chain = {
7580
export const BSC: Chain = {
7681
id: ChainIds.BSC,
7782
name: 'BNB Smart Chain',
83+
type: ChainType.EVM,
7884
icon: <BSCCircleColorful />,
7985
browser: {
8086
icon: <BSCCircleColorful />,
@@ -86,6 +92,7 @@ export const BSC: Chain = {
8692
export const Arbitrum: Chain = {
8793
id: ChainIds.Arbitrum,
8894
name: 'Arbitrum One',
95+
type: ChainType.EVM,
8996
icon: <ArbitrumCircleColorful />,
9097
browser: {
9198
icon: <ArbitrumCircleColorful />,
@@ -97,6 +104,7 @@ export const Arbitrum: Chain = {
97104
export const Optimism: Chain = {
98105
id: ChainIds.Optimism,
99106
name: 'OP Mainnet',
107+
type: ChainType.EVM,
100108
icon: <OptimismCircleColorful />,
101109
browser: {
102110
icon: <OptimismCircleColorful />,
@@ -108,6 +116,7 @@ export const Optimism: Chain = {
108116
export const Avalanche: Chain = {
109117
id: ChainIds.Avalanche,
110118
name: 'Avalanche',
119+
type: ChainType.EVM,
111120
icon: <AvalancheCircleColorful />,
112121
browser: {
113122
icon: <AvalancheCircleColorful />,
@@ -120,6 +129,7 @@ export const Avalanche: Chain = {
120129
export const X1Testnet: Chain = {
121130
id: ChainIds.X1Testnet,
122131
name: 'X1 testnet',
132+
type: ChainType.EVM,
123133
icon: <OkxWalletColorful />,
124134
browser: {
125135
icon: <OkxWalletColorful />,
@@ -131,6 +141,7 @@ export const X1Testnet: Chain = {
131141
export const Scroll: Chain = {
132142
id: ChainIds.Scroll,
133143
name: 'Scroll',
144+
type: ChainType.EVM,
134145
icon: <ScrollColorful />,
135146
browser: {
136147
icon: <ScrollColorful />,
@@ -142,6 +153,7 @@ export const Scroll: Chain = {
142153
export const ScrollSepolia: Chain = {
143154
id: ChainIds.ScrollSepolia,
144155
name: 'Scroll Sepolia Testnet',
156+
type: ChainType.EVM,
145157
icon: <ScrollColorful />,
146158
browser: {
147159
icon: <ScrollColorful />,
@@ -153,13 +165,15 @@ export const ScrollSepolia: Chain = {
153165
export const Hardhat: Chain = {
154166
id: ChainIds.Hardhat,
155167
name: 'Hardhat',
168+
type: ChainType.EVM,
156169
icon: <HardhatColorful />,
157170
nativeCurrency: { icon: <EthereumFilled />, name: 'Ether', symbol: 'ETH', decimals: 18 },
158171
};
159172

160173
export const Localhost: Chain = {
161174
id: ChainIds.Localhost,
162175
name: 'Localhost',
176+
type: ChainType.EVM,
163177
icon: <EthereumColorful />,
164178
nativeCurrency: { icon: <EthereumFilled />, name: 'Ether', symbol: 'ETH', decimals: 18 },
165179
};

‎packages/assets/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './wallets';
22
export * from './chains/ethereum';
3+
export * from './tokens';

‎packages/assets/src/wallets/_tests_/im-token.test.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { describe, expect, it } from 'vitest';
2+
3+
import { metadata_imToken } from '../im-token';
4+
5+
describe('transferQRCodeFormatter', () => {
6+
const formatterFunc = metadata_imToken.transferQRCodeFormatter!;
7+
8+
const commonParams = {
9+
toAddress: '0x35ceCD3d51Fe9E5AD14ea001475668C5A5e5ea76',
10+
chainId: 1, // Mainnet
11+
amount: 1000000,
12+
decimal: 6,
13+
};
14+
15+
it('returns the correct URL with token address', () => {
16+
const paramsWithTokenAddress = {
17+
...commonParams,
18+
tokenAddress: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
19+
};
20+
const result = formatterFunc(paramsWithTokenAddress);
21+
expect(result).toBe(
22+
`ethereum:${commonParams.toAddress}@${commonParams.chainId}?contractAddress=${paramsWithTokenAddress.tokenAddress}&decimal=${commonParams.decimal}&value=${commonParams.amount}`,
23+
);
24+
});
25+
26+
it('returns the correct URL without token address', () => {
27+
const paramsWithoutTokenAddress = { ...commonParams, tokenAddress: '' };
28+
const result = formatterFunc(paramsWithoutTokenAddress);
29+
expect(result).toBe(
30+
`ethereum:${commonParams.toAddress}@${commonParams.chainId}?decimal=18&value=${commonParams.amount}`,
31+
);
32+
});
33+
});

‎packages/assets/src/wallets/_tests_/meta-mask.test.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { describe, expect, it } from 'vitest';
2+
3+
import { metadata_MetaMask } from '../meta-mask';
4+
5+
describe('transferQRCodeFormatter', () => {
6+
const formatterFunc = metadata_MetaMask.transferQRCodeFormatter!;
7+
8+
const commonParams = {
9+
toAddress: '0x35ceCD3d51Fe9E5AD14ea001475668C5A5e5ea76',
10+
chainId: 1, // Mainnet
11+
amount: 1000000,
12+
decimal: 6,
13+
};
14+
15+
it('returns the correct URL with token address', () => {
16+
const paramsWithTokenAddress = {
17+
...commonParams,
18+
tokenAddress: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
19+
};
20+
const result = formatterFunc(paramsWithTokenAddress);
21+
const expectedValue = `ethereum:${paramsWithTokenAddress.tokenAddress}@${
22+
commonParams.chainId
23+
}/transfer?address=${commonParams.toAddress}&uint256=${
24+
paramsWithTokenAddress.amount * Math.pow(10, 18 - commonParams.decimal)
25+
}`;
26+
expect(result).toBe(expectedValue);
27+
});
28+
29+
it('returns the correct URL without token address', () => {
30+
const paramsWithoutTokenAddress = {
31+
...commonParams,
32+
tokenAddress: '',
33+
};
34+
const result = formatterFunc(paramsWithoutTokenAddress);
35+
const expectedValue = `ethereum:${commonParams.toAddress}@${commonParams.chainId}?value=${paramsWithoutTokenAddress.amount}`;
36+
expect(result).toBe(expectedValue);
37+
});
38+
});

‎packages/assets/src/wallets/im-token.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { WalletMetadata } from '@ant-design/web3-common';
1+
import { ChainType, type WalletMetadata } from '@ant-design/web3-common';
22
import { ImTokenColorful } from '@ant-design/web3-icons';
33

44
export const metadata_imToken: WalletMetadata = {
@@ -8,4 +8,13 @@ export const metadata_imToken: WalletMetadata = {
88
app: {
99
link: 'https://token.im/download',
1010
},
11+
transferQRCodeFormatter: (params) => {
12+
const { toAddress, chainId, amount, tokenAddress = '', decimal } = params;
13+
if (tokenAddress) {
14+
return `ethereum:${toAddress}@${chainId}?contractAddress=${tokenAddress}&decimal=${decimal}&value=${amount}`;
15+
} else {
16+
return `ethereum:${toAddress}@${chainId}?decimal=18&value=${amount}`;
17+
}
18+
},
19+
supportChainTypes: [ChainType.EVM],
1120
};

‎packages/assets/src/wallets/meta-mask.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { WalletMetadata } from '@ant-design/web3-common';
1+
import { ChainType, type WalletMetadata } from '@ant-design/web3-common';
22
import { ChromeCircleColorful, MetaMaskColorful } from '@ant-design/web3-icons';
33

44
export const metadata_MetaMask: WalletMetadata = {
@@ -18,4 +18,15 @@ export const metadata_MetaMask: WalletMetadata = {
1818
},
1919
],
2020
group: 'Popular',
21+
transferQRCodeFormatter: (params) => {
22+
const { toAddress, chainId, amount, tokenAddress = '', decimal } = params;
23+
if (tokenAddress) {
24+
return `ethereum:${tokenAddress}@${chainId}/transfer?address=${toAddress}&uint256=${
25+
Number(amount) * Math.pow(10, 18 - decimal)
26+
}`;
27+
} else {
28+
return `ethereum:${toAddress}@${chainId}?value=${amount}`;
29+
}
30+
},
31+
supportChainTypes: [ChainType.EVM],
2132
};

‎packages/assets/src/wallets/token-pocket.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { WalletMetadata } from '@ant-design/web3-common';
1+
import { ChainType, type WalletMetadata } from '@ant-design/web3-common';
22
import { ChromeCircleColorful, TokenPocketColorful } from '@ant-design/web3-icons';
33

44
export const metadata_TokenPocket: WalletMetadata = {
@@ -17,4 +17,5 @@ export const metadata_TokenPocket: WalletMetadata = {
1717
description: 'Access your wallet right from your favorite web browser.',
1818
},
1919
],
20+
supportChainTypes: [ChainType.EVM],
2021
};

‎packages/common/src/locale/en_US.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ const localeValues: RequiredLocale = {
6262
placeholder: 'Please enter amount',
6363
maxButtonText: 'Max',
6464
},
65+
PayPanel: {
66+
tips: 'Please scan the QR code or copy the address',
67+
},
6568
};
6669

6770
export default localeValues;

‎packages/common/src/locale/zh_CN.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,9 @@ const localeValues: RequiredLocale = {
5959
placeholder: '请输入代币数量',
6060
maxButtonText: '最大',
6161
},
62+
PayPanel: {
63+
tips: '请扫描二维码或复制地址',
64+
},
6265
};
6366

6467
export default localeValues;

0 commit comments

Comments
 (0)