1
- import { useAccount } from 'wagmi' ;
2
- import { TokenImage , type Token } from '../../token' ;
3
- import { base } from 'viem/chains' ;
1
+ import { TokenImage } from '../../token' ;
4
2
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 ] ) ;
5
17
6
- function TokenItem ( { token } : { token : Token } ) {
7
18
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 >
11
29
</ div >
12
30
) ;
13
31
}
14
32
15
33
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 ( ) ;
37
35
38
36
return (
39
37
< div
@@ -45,8 +43,8 @@ export function FundSwapDropdown() {
45
43
) }
46
44
>
47
45
< div > Buy with</ div >
48
- < TokenItem token = { ethToken } />
49
- < TokenItem token = { usdcToken } />
46
+ < TokenItem swapUnit = { fromETH } />
47
+ < TokenItem swapUnit = { fromUSDC } />
50
48
</ div >
51
49
) ;
52
50
}
0 commit comments