Skip to content

Commit 79cce64

Browse files
yutingzhao1991tingzhao.ytz
yutingzhao1991
and
tingzhao.ytz
authored
docs: add CryptoInput and PayPanel show case (#981)
Co-authored-by: tingzhao.ytz <[email protected]>
1 parent 1c7fcf5 commit 79cce64

File tree

9 files changed

+172
-72
lines changed

9 files changed

+172
-72
lines changed

‎.dumi/theme/builtins/HomePage/components/ShowCase/Address.tsx

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎.dumi/theme/builtins/HomePage/components/ShowCase/Connect.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default () => {
3939
}}
4040
>
4141
<div className={classNames(styles.cardBg, styles.connectModalCardBg)}>
42-
<span className={styles.title}>Connect Wallet</span>
42+
<span className={styles.title}>Connect Modal</span>
4343
<div className={classNames(styles.connectContainer, styles.connectModalContainer)}>
4444
<ConnectModal.ModalPanel
4545
locale={{

‎.dumi/theme/builtins/HomePage/components/ShowCase/ConnectButton.tsx

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎.dumi/theme/builtins/HomePage/components/ShowCase/CryptoInput.tsx

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { useState } from 'react';
2+
import { SwapOutlined } from '@ant-design/icons';
3+
import { CryptoInput, type CryptoInputProps, type Token } from '@ant-design/web3';
4+
import { ETH, USDT } from '@ant-design/web3-assets/tokens';
5+
import { Button, Card, Flex } from 'antd';
6+
import Decimal from 'decimal.js';
7+
8+
import styles from './index.module.less';
9+
10+
const App: React.FC = () => {
11+
const [cryptoPair, setCryptoPair] = useState<CryptoInputProps['value'][]>([]);
12+
13+
const [tokenBalances, setTokenBalances] = useState<CryptoInputProps['balance'][]>([]);
14+
15+
const handleQueryCrypto = async (crptoIndex: number, token?: Token) => {
16+
const newTokenBalances = [...tokenBalances];
17+
if (!token) {
18+
newTokenBalances[crptoIndex] = undefined;
19+
20+
return setTokenBalances(newTokenBalances);
21+
}
22+
23+
// mock query token balance
24+
console.log('Decimal.pow(10, token.decimal)', Decimal.pow(10, token.decimal).toFixed());
25+
26+
setTimeout(() => {
27+
newTokenBalances[crptoIndex] = {
28+
amount: BigInt(new Decimal(1000).times(Decimal.pow(10, token.decimal)).toFixed()),
29+
unit: '$',
30+
price: token.name.includes('USD') ? 0.99 : 3984.57,
31+
};
32+
33+
setTokenBalances(newTokenBalances);
34+
}, 500);
35+
};
36+
37+
return (
38+
<div className={styles.cardBg}>
39+
<span className={styles.title}>Crypto Input</span>
40+
<Card>
41+
<Flex vertical align="center" style={{ width: 400 }} gap={16}>
42+
<CryptoInput
43+
header={'Sell'}
44+
value={cryptoPair[0]}
45+
balance={tokenBalances[0]}
46+
onChange={(crypto) => {
47+
setCryptoPair([crypto, cryptoPair[1]]);
48+
49+
if (crypto?.token?.symbol !== cryptoPair?.[0]?.token?.symbol) {
50+
handleQueryCrypto(0, crypto?.token);
51+
}
52+
}}
53+
tokenList={[ETH, USDT]}
54+
/>
55+
<span
56+
style={{
57+
width: 30,
58+
height: 30,
59+
background: '#fff',
60+
border: '1px solid #d9d9d9',
61+
borderRadius: 8,
62+
marginBlock: -24,
63+
zIndex: 2,
64+
textAlign: 'center',
65+
cursor: 'pointer',
66+
boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.1)',
67+
}}
68+
onClick={() => {
69+
setCryptoPair([cryptoPair[1], cryptoPair[0]]);
70+
71+
setTokenBalances([tokenBalances[1], tokenBalances[0]]);
72+
}}
73+
>
74+
<SwapOutlined
75+
style={{
76+
fontSize: 18,
77+
transform: 'rotate(90deg)',
78+
marginBlockStart: 6,
79+
}}
80+
/>
81+
</span>
82+
<CryptoInput
83+
header={'Buy'}
84+
value={cryptoPair[1]}
85+
balance={tokenBalances[1]}
86+
onChange={(crypto) => {
87+
setCryptoPair([cryptoPair[0], crypto]);
88+
89+
if (crypto?.token?.symbol !== cryptoPair?.[1]?.token?.symbol) {
90+
handleQueryCrypto(1, crypto?.token);
91+
}
92+
}}
93+
tokenList={[ETH, USDT]}
94+
/>
95+
<Button
96+
type="primary"
97+
size="large"
98+
style={{ width: '100%' }}
99+
onClick={() => {
100+
console.log('current crypto pair:', cryptoPair);
101+
}}
102+
>
103+
Swap
104+
</Button>
105+
</Flex>
106+
</Card>
107+
</div>
108+
);
109+
};
110+
111+
export default App;

‎.dumi/theme/builtins/HomePage/components/ShowCase/PayPanel.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { PayPanel } from '@ant-design/web3';
2+
import {
3+
BSC,
4+
Mainnet,
5+
metadata_imToken,
6+
metadata_MetaMask,
7+
metadata_TokenPocket,
8+
USDT,
9+
} from '@ant-design/web3-assets';
10+
import { Card } from 'antd';
11+
import { parseUnits } from 'viem';
12+
13+
import styles from './index.module.less';
14+
15+
const GasRender: React.FC = () => {
16+
const supportedChains = [
17+
{ chain: Mainnet, extra: <>GAS≈0.003 ETH ($37.02)</> },
18+
{ chain: BSC, extra: <>GAS≈0.003 ETH ($37.02)</> },
19+
];
20+
return (
21+
<div className={styles.cardBg}>
22+
<span className={styles.title}>Pay Panel</span>
23+
<Card style={{ width: 400 }}>
24+
<PayPanel
25+
target={{
26+
[Mainnet.id]: '0x35ceCD3d51Fe9E5AD14ea001475668C5A5e5ea76',
27+
[BSC.id]: '0x35ceCD3d51Fe9E5AD14ea001475668C5A5e5ea76',
28+
}}
29+
supportedChains={supportedChains}
30+
token={USDT}
31+
amount={parseUnits('1', USDT.decimal)}
32+
wallets={[metadata_MetaMask, metadata_imToken, metadata_TokenPocket]}
33+
onFinish={() => {
34+
console.log('complete');
35+
}}
36+
/>
37+
</Card>
38+
</div>
39+
);
40+
};
41+
export default GasRender;

‎.dumi/theme/builtins/HomePage/components/ShowCase/index.module.less

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,15 @@
1919
margin-top: 67px;
2020
&.pc {
2121
display: flex;
22+
@media only screen and (max-width: 1920px) {
23+
transform: scale(0.8);
24+
transform-origin: center top;
25+
}
26+
27+
@media only screen and (max-width: 1580px) {
28+
transform: scale(0.7);
29+
transform-origin: center top;
30+
}
2231
}
2332
&.mobile {
2433
display: none;

‎.dumi/theme/builtins/HomePage/components/ShowCase/index.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@ import { Carousel } from 'antd';
22
import classNames from 'classnames';
33
import { useIntl } from 'dumi';
44

5-
import Address from './Address';
65
import Connect from './Connect';
7-
import ConnectButton from './ConnectButton';
6+
import CryptoInput from './CryptoInput';
87
import styles from './index.module.less';
98
import NFTCard from './NFTCard';
9+
import PayPanel from './PayPanel';
1010

1111
export const ShowCase: React.FC = () => {
1212
const intl = useIntl();
1313

1414
const caseList = (
1515
<>
16-
<ConnectButton />
17-
<Address />
18-
<NFTCard />
1916
<Connect />
17+
<NFTCard />
18+
<PayPanel />
19+
<CryptoInput />
2020
</>
2121
);
2222

@@ -29,10 +29,7 @@ export const ShowCase: React.FC = () => {
2929
<div className={classNames(styles.componentList, styles.pc)}>{caseList}</div>
3030
<div className={classNames(styles.componentList, styles.mobile)}>
3131
<Carousel dots={{ className: styles.carouselDot }} dotPosition="top" adaptiveHeight>
32-
<ConnectButton />
33-
<Address />
34-
<NFTCard />
35-
<Connect />
32+
{caseList}
3633
</Carousel>
3734
</div>
3835
</div>

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
"babel-plugin-inline-react-svg": "^2.0.2",
8181
"babel-plugin-react-inline-svg-unique-id": "^1.4.0",
8282
"classnames": "^2.5.1",
83+
"decimal.js": "^10.4.3",
8384
"dumi": "^2.3.8",
8485
"dumi-theme-antd-web3": "0.4.1",
8586
"eslint": "^8.57.0",

‎pnpm-lock.yaml

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)