Create Swap.tsx

Swap.tsx

@@ -0,0 +1,63 @@
+import { Avatar, Name } from '@coinbase/onchainkit/identity';
+import { 
+ Swap, 
+ SwapAmountInput, 
+ SwapToggleButton, 
+ SwapButton, 
+ SwapMessage, 
+} from '@coinbase/onchainkit/swap'; 
+import { Wallet, ConnectWallet } from '@coinbase/onchainkit/wallet';
+import { useAccount } from 'wagmi';
+import type { Token } from '@coinbase/onchainkit/token';
+ 
+export default function SwapComponents() {
+ const { address } = useAccount();
+ 
+ const ETHToken: Token = {
+ address: "",
+ chainId: 8453,
+ decimals: 18,
+ name: "Ethereum",
+ symbol: "ETH",
+ image: "https://dynamic-assets.coinbase.com/dbb4b4983bde81309ddab83eb598358eb44375b930b94687ebe38bc22e52c3b2125258ffb8477a5ef22e33d6bd72e32a506c391caa13af64c00e46613c3e5806/asset_icons/4113b082d21cc5fab17fc8f2d19fb996165bcce635e6900f7fc2d57c4ef33ae9.png",
+ };
+ 
+ const USDCToken: Token = {
+ address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+ chainId: 8453,
+ decimals: 6,
+ name: "USDC",
+ symbol: "USDC",
+ image: "https://dynamic-assets.coinbase.com/3c15df5e2ac7d4abbe9499ed9335041f00c620f28e8de2f93474a9f432058742cdf4674bd43f309e69778a26969372310135be97eb183d91c492154176d455b8/asset_icons/9d67b728b6c8f457717154b3a35f9ddc702eae7e76c4684ee39302c4d7fd0bb8.png",
+ };
+ 
+ // add other tokens here to display them as options in the swap
+ const swappableTokens: Token[] = [ETHToken, USDCToken];
+ 
+ return address ? (
+ <Swap>
+ <SwapAmountInput
+ label="Sell"
+ swappableTokens={swappableTokens}
+ token={ETHToken}
+ type="from"
+ />
+ <SwapToggleButton />
+ <SwapAmountInput
+ label="Buy"
+ swappableTokens={swappableTokens}
+ token={USDCToken}
+ type="to"
+ />
+ <SwapButton />
+ <SwapMessage />
+ </Swap> 
+ ) : (
+ <Wallet>
+ <ConnectWallet>
+ <Avatar className="h-6 w-6" />
+ <Name />
+ </ConnectWallet>
+ </Wallet>
+ );
+}