diff --git a/packages/branding/testnet-token-images/bull_32x32.svg b/packages/branding/testnet-token-images/bull.svg similarity index 100% rename from packages/branding/testnet-token-images/bull_32x32.svg rename to packages/branding/testnet-token-images/bull.svg diff --git a/packages/website/components/Button/AddTokenButton.tsx b/packages/website/components/Button/AddTokensButton.tsx similarity index 55% rename from packages/website/components/Button/AddTokenButton.tsx rename to packages/website/components/Button/AddTokensButton.tsx index 6ba56d8222e..5eb7732a4b2 100644 --- a/packages/website/components/Button/AddTokenButton.tsx +++ b/packages/website/components/Button/AddTokensButton.tsx @@ -1,9 +1,12 @@ import { ELDFELL_ADD_ETHEREUM_CHAIN, + ELDFELL_ADD_TOKENS, ELDFELL_CONFIG, GRIMSVOTN_ADD_ETHEREUM_CHAIN, + GRIMSVOTN_ADD_TOKENS, GRIMSVOTN_CONFIG, SEPOLIA_ADD_ETHEREUM_CHAIN, + SEPOLIA_ADD_TOKENS, SEPOLIA_CONFIG, } from "../../domain/chain"; @@ -28,40 +31,42 @@ const configMap = { Sepolia: SEPOLIA_ADD_ETHEREUM_CHAIN, }; -interface AddTokenButtonProps { - address: string; - symbol: string; - decimals: number; - image: string; +const tokenConfigMap = { + Grimsvotn: GRIMSVOTN_ADD_TOKENS, + Sepolia: SEPOLIA_ADD_TOKENS, + Eldfell: ELDFELL_ADD_TOKENS, +}; + +interface AddTokensButtonProps { network: ConnectButtonProps["network"]; } -const addTokenToWallet = async (token: AddTokenButtonProps) => { +const addTokensToWallet = async ({ network }: AddTokensButtonProps) => { const { ethereum } = window as any; - - if (ethereum.chainId != chainMap[token.network]) { - await ethereumRequest("wallet_addEthereumChain", [configMap[token.network]]); + if (ethereum.chainId != chainMap[network]) { + await ethereumRequest("wallet_addEthereumChain", [configMap[network]]); + } + for (const token of tokenConfigMap[network]) { + const params = { + options: { + address: token.address, + symbol: token.symbol, + decimals: token.decimals, + image: token.image, + }, + type: "ERC20", + }; + await ethereumRequest("wallet_watchAsset", params); } - - 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({ - address, - symbol, - decimals, - image, - network, -}: AddTokenButtonProps) { +export function AddTokensButton({ network }: AddTokensButtonProps) { return (
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" + onClick={() => addTokensToWallet({ 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 m-1 w-48 justify-center" > - Add {symbol} ({network}) + Add {network} tokens
); } diff --git a/packages/website/components/Button/ConnectToMetamaskButton.tsx b/packages/website/components/Button/ConnectToMetamaskButton.tsx index 770b99acd96..813cbaf7f28 100644 --- a/packages/website/components/Button/ConnectToMetamaskButton.tsx +++ b/packages/website/components/Button/ConnectToMetamaskButton.tsx @@ -1,17 +1,18 @@ import { - SEPOLIA_CONFIG, - GRIMSVOTN_CONFIG, + ELDFELL_ADD_ETHEREUM_CHAIN, ELDFELL_CONFIG, GRIMSVOTN_ADD_ETHEREUM_CHAIN, - ELDFELL_ADD_ETHEREUM_CHAIN, + GRIMSVOTN_CONFIG, + 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; + | typeof SEPOLIA_CONFIG.names.shortName + | typeof ELDFELL_CONFIG.names.shortName + | typeof GRIMSVOTN_CONFIG.names.shortName; }; const chainMap = { @@ -52,7 +53,7 @@ async function ConnectToMetamask(network: ConnectButtonProps["network"]) { } catch (error) { alert( "Failed to add the network with wallet_addEthereumChain request. Add the network with https://chainlist.org/ or do it manually. Error log: " + - error.message + error.message ); } } @@ -61,7 +62,7 @@ export function ConnectToMetamaskButton(props: ConnectButtonProps) { return (
ConnectToMetamask(props.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" + 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 m-1 w-48 justify-center" > Connect to {props.network}
diff --git a/packages/website/domain/chain/baseTypes.ts b/packages/website/domain/chain/baseTypes.ts index b9c10da3297..01f64320431 100644 --- a/packages/website/domain/chain/baseTypes.ts +++ b/packages/website/domain/chain/baseTypes.ts @@ -54,6 +54,15 @@ interface AddEthereumChainParameter { rpcUrls: string[]; } +// Interface from EIP-747: https://eips.ethereum.org/EIPS/eip-747 +interface AddTokenParameter { + address: string; + symbol: string; + decimals: number; + image: string; +} + + // Taiko network types interface BasedContracts { addressManager: Contract; @@ -107,6 +116,7 @@ type TaikoL2Alpha4 = TaikoL2Alpha3; export type { AddEthereumChainParameter, + AddTokenParameter, TaikoL1Alpha3, TaikoL1Alpha4, TaikoL2Alpha3, diff --git a/packages/website/domain/chain/eldfell/addTokens.ts b/packages/website/domain/chain/eldfell/addTokens.ts new file mode 100644 index 00000000000..5a64d5ffab1 --- /dev/null +++ b/packages/website/domain/chain/eldfell/addTokens.ts @@ -0,0 +1,31 @@ +import { AddTokenParameter } from "../baseTypes"; +import { ELDFELL_CONFIG } from "./config"; + +export const ELDFELL_ADD_TTKO: AddTokenParameter = { + address: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.address.impl, + symbol: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.symbol, + decimals: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.decimals, + image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/ttko.svg" +}; + +export const ELDFELL_ADD_BLL: AddTokenParameter = { + address: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.address.impl, + symbol: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.symbol, + decimals: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.decimals, + image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/bull.svg" +}; + +export const ELDFELL_ADD_HORSE: AddTokenParameter = { + address: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.address.impl, + symbol: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.symbol, + decimals: ELDFELL_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.decimals, + image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/horse.svg" +}; + +export const ELDFELL_ADD_TOKENS = [ + ELDFELL_ADD_TTKO, + ELDFELL_ADD_BLL, + ELDFELL_ADD_HORSE +] + + diff --git a/packages/website/domain/chain/grimsvotn/addTokens.ts b/packages/website/domain/chain/grimsvotn/addTokens.ts new file mode 100644 index 00000000000..c0681a9a699 --- /dev/null +++ b/packages/website/domain/chain/grimsvotn/addTokens.ts @@ -0,0 +1,39 @@ +import { AddTokenParameter } from "../baseTypes"; +import { GRIMSVOTN_CONFIG } from "./config"; + +export const GRIMSVOTN_ADD_TTKO: AddTokenParameter = { + address: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.address.impl, + symbol: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.symbol, + decimals: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedTaikoToken.decimals, + image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/ttko.svg" +}; + +export const GRIMSVOTN_ADD_TTKOE: AddTokenParameter = { + address: GRIMSVOTN_CONFIG.basedContracts.erc20Contracts.taikoToken.address.proxy, + symbol: GRIMSVOTN_CONFIG.basedContracts.erc20Contracts.taikoToken.symbol, + decimals: GRIMSVOTN_CONFIG.basedContracts.erc20Contracts.taikoToken.decimals, + image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/ttko.svg" +}; + +export const GRIMSVOTN_ADD_BLL: AddTokenParameter = { + address: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.address.impl, + symbol: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.symbol, + decimals: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedBullToken.decimals, + image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/bull.svg" +}; + +export const GRIMSVOTN_ADD_HORSE: AddTokenParameter = { + address: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.address.impl, + symbol: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.symbol, + decimals: GRIMSVOTN_CONFIG.rollupContracts.erc20Contracts.bridgedHorseToken.decimals, + image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/horse.svg" +}; + +export const GRIMSVOTN_ADD_TOKENS = [ + GRIMSVOTN_ADD_TTKO, + GRIMSVOTN_ADD_TTKOE, + GRIMSVOTN_ADD_BLL, + GRIMSVOTN_ADD_HORSE +] + + diff --git a/packages/website/domain/chain/index.ts b/packages/website/domain/chain/index.ts index 756b57ae76a..8919afaa22f 100644 --- a/packages/website/domain/chain/index.ts +++ b/packages/website/domain/chain/index.ts @@ -7,3 +7,7 @@ export { ELDFELL_CONFIG } from "./eldfell/config"; export { SEPOLIA_ADD_ETHEREUM_CHAIN } from "./sepolia/addEthereumChain"; export { GRIMSVOTN_ADD_ETHEREUM_CHAIN } from "./grimsvotn/addEthereumChain"; export { ELDFELL_ADD_ETHEREUM_CHAIN } from "./eldfell/addEthereumChain"; + +export { SEPOLIA_ADD_TOKENS } from "./sepolia/addTokens"; +export { GRIMSVOTN_ADD_TOKENS } from "./grimsvotn/addTokens"; +export { ELDFELL_ADD_TOKENS } from "./eldfell/addTokens"; diff --git a/packages/website/domain/chain/sepolia/addTokens.ts b/packages/website/domain/chain/sepolia/addTokens.ts new file mode 100644 index 00000000000..a2c17d2b517 --- /dev/null +++ b/packages/website/domain/chain/sepolia/addTokens.ts @@ -0,0 +1,33 @@ +import { AddTokenParameter } from "../baseTypes"; +import { SEPOLIA_CONFIG } from "./config"; + +export const SEPOLIA_ADD_TTKO: AddTokenParameter = { + address: SEPOLIA_CONFIG.basedContracts.erc20Contracts.taikoToken.address.proxy, + symbol: SEPOLIA_CONFIG.basedContracts.erc20Contracts.taikoToken.symbol, + decimals: SEPOLIA_CONFIG.basedContracts.erc20Contracts.taikoToken.decimals, + image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/ttko.svg" +}; + +export const SEPOLIA_ADD_BLL: AddTokenParameter = { + address: SEPOLIA_CONFIG.basedContracts.erc20Contracts.bullToken.address.impl, + symbol: SEPOLIA_CONFIG.basedContracts.erc20Contracts.bullToken.symbol, + decimals: SEPOLIA_CONFIG.basedContracts.erc20Contracts.bullToken.decimals, + image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/bull.svg" +}; + + +export const SEPOLIA_ADD_HORSE: AddTokenParameter = { + address: SEPOLIA_CONFIG.basedContracts.erc20Contracts.horseToken.address.impl, + symbol: SEPOLIA_CONFIG.basedContracts.erc20Contracts.horseToken.symbol, + decimals: SEPOLIA_CONFIG.basedContracts.erc20Contracts.horseToken.decimals, + image: "https://raw.githubusercontent.com/taikoxyz/taiko-mono/main/packages/branding/testnet-token-images/horse.svg" +}; + +export const SEPOLIA_ADD_TOKENS = [ + SEPOLIA_ADD_TTKO, + SEPOLIA_ADD_BLL, + SEPOLIA_ADD_HORSE +] + + + 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 fc56b32a6e8..fab7ad32dc1 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,5 +1,5 @@ import { Steps } from "nextra-theme-docs"; -import { AddTokenButton } from "components/Button/AddTokenButton"; +import { AddTokensButton } from "components/Button/AddTokensButton"; import { ConnectToMetamaskButton } from "components/Button/ConnectToMetamaskButton"; import { ELDFELL_CONFIG, GRIMSVOTN_CONFIG, SEPOLIA_CONFIG } from "domain/chain"; @@ -23,37 +23,14 @@ This guide helps you connect your wallet to Taiko's networks. ### Add tokens to your wallet - - - +
- - - + +
+