@@ -22,71 +22,33 @@ The `SwapDefault` component is a simplified version of the `Swap` component, des
22
22
If you'd like more customization, follow the implementation guide for our ` Swap ` component below.
23
23
24
24
``` tsx twoslash
25
- import { Avatar , Name } from ' @coinbase/onchainkit/identity' ;
26
25
import { SwapDefault } from ' @coinbase/onchainkit/swap' ; // [!code focus]
27
- import { Wallet , ConnectWallet } from ' @coinbase/onchainkit/wallet' ;
28
- import { useAccount } from ' wagmi' ;
29
26
import type { Token } from ' @coinbase/onchainkit/token' ;
30
27
31
- export default function SwapComponents() {
32
- const { address } = useAccount ();
33
-
34
- const degenToken: Token = {
35
- name: ' DEGEN' ,
36
- address: ' 0x4ed4e862860bed51a9570b96d89af5e1b0efefed' ,
37
- symbol: ' DEGEN' ,
38
- decimals: 18 ,
39
- image:
40
- ' https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/3b/bf/3bbf118b5e6dc2f9e7fc607a6e7526647b4ba8f0bea87125f971446d57b296d2-MDNmNjY0MmEtNGFiZi00N2I0LWIwMTItMDUyMzg2ZDZhMWNm' ,
41
- chainId: 8453 ,
42
- };
43
-
44
- const ethToken: Token = {
45
- name: ' ETH' ,
46
- address: ' ' ,
47
- symbol: ' ETH' ,
48
- decimals: 18 ,
49
- image:
50
- ' https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png' ,
51
- chainId: 8453 ,
52
- };
53
-
54
- const usdcToken: Token = {
55
- name: ' USDC' ,
56
- address: ' 0x833589fcd6edb6e08f4c7c32d4f71b54bda02913' ,
57
- symbol: ' USDC' ,
58
- decimals: 6 ,
59
- image:
60
- ' https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2' ,
61
- chainId: 8453 ,
62
- };
63
-
64
- const wethToken: Token = {
65
- name: ' Wrapped Ether' ,
66
- address: ' 0x4200000000000000000000000000000000000006' ,
67
- symbol: ' WETH' ,
68
- decimals: 6 ,
69
- image:
70
- ' https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/47/bc/47bc3593c2dec7c846b66b7ba5f6fa6bd69ec34f8ebb931f2a43072e5aaac7a8-YmUwNmRjZDUtMjczYy00NDFiLWJhZDUtMzgwNjFmYWM0Njkx' ,
71
- chainId: 8453 ,
72
- };
73
- // ---cut-before---
74
- // omitted for brevity
75
-
76
- // the first token in array will be initially selected token // [!code focus]
77
- const swappableFromTokens: Token [] = [wethToken , usdcToken , ethToken , degenToken ]; // [!code focus]
78
- const swappableToTokens: Token [] = [degenToken , ethToken , usdcToken , wethToken ] // [!code focus]
79
-
80
- return ( // [!code focus]
81
- <SwapDefault // [!code focus]
82
- from = { swappableFromTokens } // [!code focus]
83
- to = { swappableToTokens } // [!code focus]
84
- /> // [!code focus]
85
- ); // [!code focus]
86
- // ---cut-after---
87
- }
88
-
89
-
28
+ const eth: Token = {
29
+ name: ' ETH' ,
30
+ address: ' ' ,
31
+ symbol: ' ETH' ,
32
+ decimals: 18 ,
33
+ image:
34
+ ' https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png' ,
35
+ chainId: 8453 ,
36
+ };
37
+
38
+ const usdc: Token = {
39
+ name: ' USDC' ,
40
+ address: ' 0x833589fcd6edb6e08f4c7c32d4f71b54bda02913' ,
41
+ symbol: ' USDC' ,
42
+ decimals: 6 ,
43
+ image:
44
+ ' https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2' ,
45
+ chainId: 8453 ,
46
+ };
47
+
48
+ <SwapDefault // [!code focus]
49
+ from = { [eth ]} // [!code focus]
50
+ to = { [usdc ]} // [!code focus]
51
+ /> // [!code focus]
90
52
```
91
53
92
54
<App >
0 commit comments