diff --git a/packages/website/components/ConnectToMetamaskButton.tsx b/packages/website/components/ConnectToMetamaskButton.tsx new file mode 100644 index 00000000000..44c98f145ef --- /dev/null +++ b/packages/website/components/ConnectToMetamaskButton.tsx @@ -0,0 +1,50 @@ +import { taikoChainConfig } from "../constants/taikoChainConfig"; + +type ConnectButtonProps = { + network: "Sepolia" | "Taiko"; +}; + +async function ConnectToMetamask(network: ConnectButtonProps["network"]) { + if (!(window as any).ethereum) { + alert("Metamask not detected! Install Metamask then try again."); + } + if ( + (window as any).ethereum.networkVersion == + (network === "Sepolia" ? 11155111 : 167005) + ) { + alert(`You are already connected to ${network}.`); + } + try { + if (network === "Sepolia") { + await (window as any).ethereum.request({ + method: "wallet_switchEthereumChain", + params: [ + { + chainId: "0xaa36a7", + }, + ], + }); + } else { + await (window as any).ethereum.request({ + method: "wallet_addEthereumChain", + params: [taikoChainConfig], + }); + } + } 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 + ); + } +} + +export default 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" + > + Connect to {props.network} +
+ ); +} diff --git a/packages/website/constants/taikoChainConfig.ts b/packages/website/constants/taikoChainConfig.ts new file mode 100644 index 00000000000..c6a813a3ef7 --- /dev/null +++ b/packages/website/constants/taikoChainConfig.ts @@ -0,0 +1,25 @@ +interface AddEthereumChainParameter { + chainId: string; // A 0x-prefixed hexadecimal string + chainName: string; + nativeCurrency: { + name: string; + symbol: string; // 2-6 characters long + decimals: 18; + }; + rpcUrls: string[]; + blockExplorerUrls?: string[]; + iconUrls?: string[]; // Currently ignored. +} + +export const taikoChainConfig: AddEthereumChainParameter = { + chainId: "0x28c5d", + chainName: "Taiko (Alpha-3 Testnet)", + nativeCurrency: { + name: "ETH", + symbol: "ETH", + decimals: 18, + }, + rpcUrls: ["https://rpc.test.taiko.xyz"], + blockExplorerUrls: ["https://explorer.test.taiko.xyz/"], + iconUrls: [], +}; diff --git a/packages/website/pages/docs/guides/configure-your-wallet.mdx b/packages/website/pages/docs/guides/configure-your-wallet.mdx index 18afb46f43f..15d5211c19f 100644 --- a/packages/website/pages/docs/guides/configure-your-wallet.mdx +++ b/packages/website/pages/docs/guides/configure-your-wallet.mdx @@ -17,10 +17,14 @@ This guide help you connect your wallet to Taiko (Alpha-3 testnet). There are tw Visit [https://chainlist.org/](https://chainlist.org/) and check the box for "Include Testnets". ### Add the Sepolia testnet - Search for "Sepolia", and click the "Add Chain" button. + Search for "Sepolia", and click the "Add Chain" button. + + You can also connect to Sepolia at [Sepolia RPC configuration](../reference/rpc-configuration#sepolia). ### Add the Taiko testnet Search for "Taiko", and click the "Add Chain" button for Taiko (Alpha-3 testnet). + + You can also connect to Taiko at [Taiko RPC configuration](../reference/rpc-configuration#taiko). ### 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) with these [contract addresses](/docs/reference/contract-addresses#erc-20-token-contracts) (HORSE, BLL, and TTKO). diff --git a/packages/website/pages/docs/reference/rpc-configuration.md b/packages/website/pages/docs/reference/rpc-configuration.mdx similarity index 81% rename from packages/website/pages/docs/reference/rpc-configuration.md rename to packages/website/pages/docs/reference/rpc-configuration.mdx index 2339dc555cd..8f7afd10c8b 100644 --- a/packages/website/pages/docs/reference/rpc-configuration.md +++ b/packages/website/pages/docs/reference/rpc-configuration.mdx @@ -1,6 +1,10 @@ +import ConnectToMetamaskButton from 'components/ConnectToMetamaskButton'; + # RPC configuration ## Sepolia +
+ | Name | Value | | ------------------ | ---------------------------- | @@ -10,6 +14,8 @@ | Block Explorer URL | https://sepolia.etherscan.io | ## Taiko +
+ | Name | Value | | ------------------ | ------------------------------- |