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 |
| ------------------ | ------------------------------- |