Skip to content

Commit d5c806f

Browse files
update components
1 parent 4ae8823 commit d5c806f

7 files changed

+217
-204
lines changed
+28-30
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,37 @@
1-
import { useAccount } from 'wagmi';
2-
import { TokenImage, type Token } from '../../token';
3-
import { base } from 'viem/chains';
1+
import { TokenImage } from '../../token';
42
import { background, cn, color } from '../../styles/theme';
3+
import { useFundSwapContext } from './FundSwapProvider';
4+
import { SwapUnit } from '../types';
5+
import { useCallback } from 'react';
6+
7+
function TokenItem({ swapUnit }: { swapUnit: SwapUnit }) {
8+
const { handleSubmit } = useFundSwapContext();
9+
10+
if (!swapUnit?.token) {
11+
return null;
12+
}
13+
14+
const handleClick = useCallback(() => {
15+
handleSubmit(swapUnit);
16+
}, [handleSubmit]);
517

6-
function TokenItem({ token }: { token: Token }) {
718
return (
8-
<div className="flex">
9-
<TokenImage token={token} />
10-
<div className="flex flex-col">{token.name}</div>
19+
<div className="flex gap-2 items-center" onClick={handleClick}>
20+
<TokenImage token={swapUnit.token} size={36} />
21+
<div className="flex flex-col">
22+
<div>
23+
{swapUnit.amount} {swapUnit.token.name}
24+
</div>
25+
<div
26+
className={cn('text-xs', color.foregroundMuted)}
27+
>{`Balance: ${swapUnit.balance}`}</div>
28+
</div>
1129
</div>
1230
);
1331
}
1432

1533
export function FundSwapDropdown() {
16-
const { chainId } = useAccount();
17-
18-
const ethToken: Token = {
19-
name: 'ETH',
20-
address: '',
21-
symbol: 'ETH',
22-
decimals: 18,
23-
image:
24-
'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png',
25-
chainId: chainId || base.id,
26-
};
27-
28-
const usdcToken: Token = {
29-
name: 'USDC',
30-
address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
31-
symbol: 'USDC',
32-
decimals: 6,
33-
image:
34-
'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2',
35-
chainId: chainId || base.id,
36-
};
34+
const { fromETH, fromUSDC } = useFundSwapContext();
3735

3836
return (
3937
<div
@@ -45,8 +43,8 @@ export function FundSwapDropdown() {
4543
)}
4644
>
4745
<div>Buy with</div>
48-
<TokenItem token={ethToken} />
49-
<TokenItem token={usdcToken} />
46+
<TokenItem swapUnit={fromETH} />
47+
<TokenItem swapUnit={fromUSDC} />
5048
</div>
5149
);
5250
}

src/swap/components/FundSwapInput.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function FundSwapInput() {
1111

1212
const handleChange = useCallback(
1313
(amount: string) => {
14-
handleAmountChange('to', amount);
14+
handleAmountChange(amount);
1515
},
1616
[handleAmountChange],
1717
);

0 commit comments

Comments
 (0)