diff --git a/packages/website/components/Button/AddTokenButton.tsx b/packages/website/components/Button/AddTokenButton.tsx index 85af5bbde41..6ba56d8222e 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 (