diff --git a/packages/website/components/Button/AddTokenButton.tsx b/packages/website/components/Button/AddTokenButton.tsx index 85af5bbde4..6ba56d8222 100644 --- a/packages/website/components/Button/AddTokenButton.tsx +++ b/packages/website/components/Button/AddTokenButton.tsx @@ -1,15 +1,52 @@ +import { + ELDFELL_ADD_ETHEREUM_CHAIN, + ELDFELL_CONFIG, + GRIMSVOTN_ADD_ETHEREUM_CHAIN, + GRIMSVOTN_CONFIG, + SEPOLIA_ADD_ETHEREUM_CHAIN, + SEPOLIA_CONFIG, +} from "../../domain/chain"; + import { ethereumRequest } from "../../utils/ethereumRequest"; +type ConnectButtonProps = { + network: + | typeof SEPOLIA_CONFIG.names.shortName + | typeof ELDFELL_CONFIG.names.shortName + | typeof GRIMSVOTN_CONFIG.names.shortName; +}; + +const chainMap = { + Eldfell: ELDFELL_CONFIG.chainId.hex, // 167005 + Grimsvotn: GRIMSVOTN_CONFIG.chainId.hex, // 167005 + Sepolia: SEPOLIA_CONFIG.chainId.hex, // 11155111 +}; + +const configMap = { + Eldfell: ELDFELL_ADD_ETHEREUM_CHAIN, + Grimsvotn: GRIMSVOTN_ADD_ETHEREUM_CHAIN, + Sepolia: SEPOLIA_ADD_ETHEREUM_CHAIN, +}; + interface AddTokenButtonProps { address: string; symbol: string; decimals: number; image: string; + network: ConnectButtonProps["network"]; } const addTokenToWallet = async (token: AddTokenButtonProps) => { - const options = { ...token, type: "ERC20" }; - await ethereumRequest("wallet_watchAsset", options); + const { ethereum } = window as any; + + if (ethereum.chainId != chainMap[token.network]) { + await ethereumRequest("wallet_addEthereumChain", [configMap[token.network]]); + } + + const params = { options: { address: token.address, symbol: token.symbol, decimals: token.decimals, image: token.image }, type: "ERC20" }; + + await ethereumRequest("wallet_watchAsset", params); + }; export function AddTokenButton({ @@ -17,13 +54,14 @@ export function AddTokenButton({ symbol, decimals, image, + network, }: AddTokenButtonProps) { return (
addTokenToWallet({ address, symbol, decimals, image })} + onClick={() => addTokenToWallet({ address, symbol, decimals, image, network })} className="hover:cursor-pointer text-neutral-100 bg-[#E81899] hover:bg-[#d1168a] border-solid border-neutral-200 focus:ring-4 focus:outline-none focus:ring-neutral-100 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center" > - Add {symbol} to wallet + Add {symbol} ({network})
); } diff --git a/packages/website/pages/docs/guides/build-on-taiko/setup-your-wallet.mdx b/packages/website/pages/docs/guides/build-on-taiko/setup-your-wallet.mdx index 330d18b4bb..4b4a65fdac 100644 --- a/packages/website/pages/docs/guides/build-on-taiko/setup-your-wallet.mdx +++ b/packages/website/pages/docs/guides/build-on-taiko/setup-your-wallet.mdx @@ -1,4 +1,12 @@ import { Steps } from "nextra-theme-docs"; +import { AddTokenButton } from "components/Button/AddTokenButton"; +import { ConnectToMetamaskButton } from "components/Button/ConnectToMetamaskButton"; + +import { + ELDFELL_CONFIG, + GRIMSVOTN_CONFIG, + SEPOLIA_CONFIG, +} from "domain/chain"; # Setup your wallet @@ -11,11 +19,45 @@ This guide helps you connect your wallet to Taiko's networks. ## Steps - ### Visit RPC configuration - Visit the [RPC configuration page](/docs/reference/rpc-configuration) and click the buttons to add the networks. Or, add them manually in your wallet with the provided configuration. + ### Add chains to your wallet + +
+ +
+ ### Add tokens to your wallet - Use your wallet (e.g., Metamask) to [import the tokens](https://support.ledger.com/hc/en-us/articles/6375103346077-Add-custom-tokens-to-MetaMask?docs=true). You can find all deployed tokens contract addresses [here](/docs/reference/contract-addresses). + + + +
+ + +