From 212098bfab130f1696e07538bf4630f096df886f Mon Sep 17 00:00:00 2001 From: MarcusWentz Date: Wed, 28 Jun 2023 11:31:30 -0400 Subject: [PATCH] RPC Metamask buttons --- .../ConnectToSepolia.tsx | 36 +++++++++++ .../ConnectToTaikoAlpha3.tsx | 60 +++++++++++++++++++ .../website/components/NetworkButton1.tsx | 53 ---------------- .../docs/reference/rpc-configuration.mdx | 8 ++- 4 files changed, 102 insertions(+), 55 deletions(-) create mode 100644 packages/website/components/MetamaskNetworkButton/ConnectToSepolia.tsx create mode 100644 packages/website/components/MetamaskNetworkButton/ConnectToTaikoAlpha3.tsx delete mode 100644 packages/website/components/NetworkButton1.tsx diff --git a/packages/website/components/MetamaskNetworkButton/ConnectToSepolia.tsx b/packages/website/components/MetamaskNetworkButton/ConnectToSepolia.tsx new file mode 100644 index 00000000000..615db83f99e --- /dev/null +++ b/packages/website/components/MetamaskNetworkButton/ConnectToSepolia.tsx @@ -0,0 +1,36 @@ +async function ConnectToSepolia() { + if (!window.ethereum) { + alert("Metamask not detected! Install Metamask then try again.") + return; + } + if (window.ethereum.networkVersion == 11155111) { + alert("You are already connected to Sepolia (chainId 11155111).", ) + return; + } + try{ + await (window as any).ethereum.request({ + method: "wallet_switchEthereumChain", + params: [{ + chainId: "0xaa36a7" + }] + }); + } 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) + } +} + +type Props = { + buttonText: string; +}; + +export default function ConnectToSepoliaComponent(props: Props) { + return ( +
ConnectToSepolia()} + className="hover:cursor-pointer text-neutral-900 bg-neutral-100 hover:bg-neutral-200 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 dark:focus:ring-neutral-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700" + > + {props.buttonText} + Click to Connect to Sepolia +
+ ); +} \ No newline at end of file diff --git a/packages/website/components/MetamaskNetworkButton/ConnectToTaikoAlpha3.tsx b/packages/website/components/MetamaskNetworkButton/ConnectToTaikoAlpha3.tsx new file mode 100644 index 00000000000..b2ff5bf591b --- /dev/null +++ b/packages/website/components/MetamaskNetworkButton/ConnectToTaikoAlpha3.tsx @@ -0,0 +1,60 @@ +async function ConnectToTaikoAlpha3() { + 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. + } + + const taikoParams: 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: [], + }; + + if (!window.ethereum) { + alert("Metamask not detected! Install Metamask then try again.") + return; + } + if (window.ethereum.networkVersion == 167005) { + alert("You are already connected to Taiko Alpha 3 (chainId 167005).", ) + return; + } + try{ + await (window as any).ethereum.request({ + method: "wallet_addEthereumChain", + params: [taikoParams], + }); + } 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) + } +} + +type Props = { + buttonText: string; +}; + +export default function ConnectToTaikoAlpha3Button(props: Props) { + return ( +
ConnectToTaikoAlpha3()} + className="hover:cursor-pointer text-neutral-900 bg-neutral-100 hover:bg-neutral-200 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 dark:focus:ring-neutral-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700" + > + {props.buttonText} + Click to Connect to Taiko Alpha 3 +
+ ); +} \ No newline at end of file diff --git a/packages/website/components/NetworkButton1.tsx b/packages/website/components/NetworkButton1.tsx deleted file mode 100644 index cac45a4a677..00000000000 --- a/packages/website/components/NetworkButton1.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, {useState} from 'react'; -function NetworkButton1() { - // const chainId = '0xaa36a7'; - // const rpcURL = 'https://sepolia.infura.io/v3/'; - // const networkName = 'Sepolia'; - // const currencyName = 'Ether'; - // const currencySymbol = 'ETH'; - // const explorerURL = 'https://sepolia.etherscan.io/'; - - const addNetwork = async () => { - if (!window.ethereum) { - alert("Metamask not detected! Install Metamask then try again.") - return; - } - if (window.ethereum.networkVersion == 11155111) { - alert("You are already connected to Sepolia (chainId 11155111).", ) - return; - } - try{ - await window.ethereum.request({ - // method: 'wallet_addEthereumChain', - // params: [ - // { - // chainId: chainId, - // chainName: networkName, - // rpcUrls: [rpcURL], - // blockExplorerUrls: [explorerURL], - // nativeCurrency: { - // name: currencyName, - // symbol: currencySymbol, // 2-6 characters long - // decimals: 18, - // }, - // }, - // ], - // }); - method: "wallet_switchEthereumChain", - params: [{ - chainId: "0xaa36a7" - }] - }); - } 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) - } - - }; - - return ( - - ); - -} - -export default NetworkButton1; \ No newline at end of file diff --git a/packages/website/pages/docs/reference/rpc-configuration.mdx b/packages/website/pages/docs/reference/rpc-configuration.mdx index 7a11a3f5e24..c273379915d 100644 --- a/packages/website/pages/docs/reference/rpc-configuration.mdx +++ b/packages/website/pages/docs/reference/rpc-configuration.mdx @@ -2,9 +2,9 @@ ## Sepolia -import NetworkButton1 from 'components/NetworkButton1'; +import ConnectToSepolia from 'components/MetamaskNetworkButton/ConnectToSepolia'; - + | Name | Value | | ------------------ | ---------------------------- | @@ -15,6 +15,10 @@ import NetworkButton1 from 'components/NetworkButton1'; ## Taiko +import ConnectToTaikoAlpha3 from 'components/MetamaskNetworkButton/ConnectToTaikoAlpha3'; + + + | Name | Value | | ------------------ | ------------------------------- | | Chain ID | 167005 |