feat(docs-site): enhance the setup wallet page

packages/docs-site/astro.config.ts

@@ -59,6 +59,7 @@ export default defineConfig({
           label: "Start Here",
           items: [
             { label: "Getting started", link: "/start-here/getting-started/" },
+            { label: "Set up your wallet", link: "/start-here/set-up-your-wallet/", },
             { label: "Contributing", link: "/start-here/contributing/" },
             { label: "Getting support", link: "/start-here/getting-support" },
           ],
@@ -110,10 +111,6 @@ export default defineConfig({
               label: "App Developers",
               collapsed: true,
               items: [
-                {
-                  label: "Set up your wallet",
-                  link: "/guides/app-developers/set-up-your-wallet/",
-                },
                 {
                   label: "Receive tokens",
                   link: "/guides/app-developers/receive-tokens/",

packages/docs-site/src/assets/custom-icons.ts

@@ -0,0 +1,68 @@
+export const customIcons = {
+  custom: {
+    icons: {
+      'metamask-logo': {
+        body: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 204.8 192.4" style="enable-background:new 0 0 204.8 192.4;" xml:space="preserve">
+     <style type="text/css">
+       .st0{display:none;}
+       .st1{fill:#F5841F;}
+       .st2{fill:#E27625;}
+       .st3{fill:#D7C1B3;}
+       .st4{fill:#2F343B;}
+       .st5{fill:#CC6228;}
+       .st6{fill:#C0AD9E;}
+       .st7{fill:#763E1A;}
+     </style>
+     <g id="bg_x28_do_not_export_x29_" class="st0">
+     </g>
+     <g id="MM_Head_background__x28_Do_not_edit_x29_">
+       <g>
+         <path class="st1" d="M167.4,96.1l6.9-8.1l-3-2.2l4.8-4.4l-3.7-2.8l4.8-3.6l-3.1-2.4l5-24.4l-7.6-22.6 M171.5,25.6l-48.8,18.1l0,0
+           l0,0H82l0,0L33.2,25.6l0.3,0.2l-0.3-0.2l-7.6,22.6l5.1,24.4L27.5,75l4.9,3.6l-3.7,2.8l4.8,4.4l-3,2.2l6.9,8.1l-10.5,32.4h0l0,0
+           l9.7,33.1l34.1-9.4l0-0.1l0,0.1l0,0l0,0l0,0v0l0,0l0,0l0,0l6.6,5.4l13.5,9.2h23.1l13.5-9.2l6.6-5.4l0,0v0l0,0l0,0l34.2,9.4
+           l9.8-33.1l0,0h0l-10.6-32.4 M70.7,152.1L70.7,152.1L70.7,152.1"/>
+       </g>
+     </g>
+     <g id="Logos">
+       <g>
+         <polygon class="st2" points="171.5,25.6 111.6,69.7 122.7,43.7 		"/>
+         <polygon class="st2" points="33.2,25.6 92.6,70.1 82,43.7 		"/>
+         <polygon class="st2" points="150,127.9 134,152.1 168.2,161.5 178,128.4 		"/>
+         <polygon class="st2" points="26.9,128.4 36.6,161.5 70.7,152.1 54.8,127.9 		"/>
+         <polygon class="st2" points="68.9,86.9 59.4,101.2 93.2,102.7 92.1,66.5 		"/>
+         <polygon class="st2" points="135.9,86.9 112.3,66.1 111.6,102.7 145.4,101.2 		"/>
+         <polygon class="st2" points="70.7,152.1 91.2,142.3 73.5,128.7 		"/>
+         <polygon class="st2" points="113.6,142.3 134,152.1 131.2,128.7 		"/>
+         <polygon class="st3" points="134,152.1 113.6,142.3 115.3,155.5 115.1,161.1 		"/>
+         <polygon class="st3" points="70.7,152.1 89.7,161.1 89.6,155.5 91.2,142.3 		"/>
+         <polygon class="st4" points="90,119.9 73.1,115 85.1,109.5 		"/>
+         <polygon class="st4" points="114.7,119.9 119.7,109.5 131.7,115 		"/>
+         <polygon class="st5" points="70.7,152.1 73.7,127.9 54.8,128.4 		"/>
+         <polygon class="st5" points="131.1,127.9 134,152.1 150,128.4 		"/>
+         <polygon class="st5" points="145.4,101.2 111.6,102.7 114.7,119.9 119.7,109.5 131.7,115 		"/>
+         <polygon class="st5" points="73.1,115 85.1,109.5 90,119.9 93.2,102.7 59.4,101.2 		"/>
+         <polygon class="st2" points="59.4,101.2 73.5,128.7 73.1,115 		"/>
+         <polygon class="st2" points="131.7,115 131.2,128.7 145.4,101.2 		"/>
+         <polygon class="st2" points="93.2,102.7 90,119.9 94,140.3 94.9,113.5 		"/>
+         <polygon class="st2" points="111.6,102.7 109.9,113.4 110.7,140.3 114.7,119.9 		"/>
+         <polygon class="st1" points="114.7,119.9 110.7,140.3 113.6,142.3 131.2,128.7 131.7,115 		"/>
+         <polygon class="st1" points="73.1,115 73.5,128.7 91.2,142.3 94,140.3 90,119.9 		"/>
+         <polygon class="st6" points="115.1,161.1 115.3,155.5 113.7,154.2 91,154.2 89.6,155.5 89.7,161.1 70.7,152.1 77.3,157.5
+           90.8,166.8 113.9,166.8 127.4,157.5 134,152.1 		"/>
+         <polygon class="st4" points="113.6,142.3 110.7,140.3 94,140.3 91.2,142.3 89.6,155.5 91,154.2 113.7,154.2 115.3,155.5 		"/>
+         <polygon class="st7" points="174.1,72.6 179.1,48.2 171.5,25.6 113.6,68.2 135.9,86.9 167.4,96.1 174.3,88 171.3,85.8 176.1,81.5
+           172.4,78.6 177.2,75 		"/>
+         <polygon class="st7" points="25.6,48.2 30.7,72.6 27.5,75 32.3,78.7 28.6,81.5 33.4,85.8 30.4,88 37.4,96.1 68.9,86.9 91.2,68.2
+           33.2,25.6 		"/>
+         <polygon class="st1" points="167.4,96.1 135.9,86.9 145.4,101.2 131.2,128.7 150,128.4 178,128.4 		"/>
+         <polygon class="st1" points="68.9,86.9 37.4,96.1 26.9,128.4 54.8,128.4 73.5,128.7 59.4,101.2 		"/>
+         <polygon class="st1" points="111.6,102.7 113.6,68.2 122.7,43.7 82,43.7 91.2,68.2 93.2,102.7 94,113.5 94,140.3 110.7,140.3
+           110.8,113.5 		"/>
+       </g>
+     </g>
+     </svg>`,
+      },
+    },
+  },
+};

packages/docs-site/src/components/NetworkAdder.astro

@@ -0,0 +1,160 @@
+---
+import { customIcons } from '../assets/custom-icons';
+
+interface Props {
+  network: 'mainnet' | 'testnet';
+}
+
+const { network } = Astro.props;
+const chainName = network === 'mainnet' ? 'Taiko Alethia' : 'Taiko Hekla';
+const metamaskIcon = customIcons.custom.icons['metamask-logo'].body;
+---
+
+<button
+  type="button"
+  class={`network-button ${network === 'mainnet' ? 'mainnet' : 'testnet'}`}
+  data-network={network}
+>
+  <span class="metamask-icon" set:html={metamaskIcon} />
+  <span class="button-text">Add {chainName}</span>
+</button>
+
+<style>
+  .network-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem 1.5rem;
+    border-radius: 3rem;
+    font-size: 1.125rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    min-width: 250px;
+    justify-content: center;
+    border: none;
+    margin: 0.5rem;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  }
+
+  .mainnet {
+    background-color: #bc007a;
+    color: white;
+  }
+
+  .testnet {
+    background-color: transparent;
+    color: #bc007a;
+    border: 2px solid #bc007a;
+  }
+
+  .network-button:hover {
+    transform: translateY(-1px);
+  }
+
+  .mainnet:hover {
+    background-color: #d4008a;
+  }
+
+  .testnet:hover {
+    background-color: rgba(188, 0, 122, 0.1);
+  }
+
+  .metamask-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .metamask-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .metamask-icon :global(svg path.st2),
+  .metamask-icon :global(svg path.st5) {
+    fill: currentColor;
+  }
+
+  .button-text {
+    margin-left: 0.25rem;
+  }
+
+  /* Dark mode adjustments */
+  :global(.dark) .testnet {
+    color: #f3b3d0;
+    border-color: #f3b3d0;
+  }
+
+  :global(.dark) .testnet:hover {
+    background-color: rgba(243, 179, 208, 0.1);
+  }
+</style>
+
+<script>
+  declare global {
+    interface Window {
+      ethereum: any;
+    }
+  }
+
+  const config = {
+    mainnet: {
+      chainId: '0x28c58',
+      chainName: 'Taiko Alethia',
+      rpcUrls: ['https://rpc.taiko.xyz'],
+      blockExplorerUrls: ['https://taikoscan.io/'],
+    },
+    testnet: {
+      chainId: '0x28c61',
+      chainName: 'Taiko Hekla',
+      rpcUrls: ['https://rpc.hekla.taiko.xyz'],
+      blockExplorerUrls: ['https://hekla.taikoscan.io/'],
+    }
+  };
+
+  function initializeNetworkButtons() {
+    const buttons = document.querySelectorAll('.network-button');
+
+    buttons.forEach(button => {
+      button.addEventListener('click', async () => {
+        const network = button.getAttribute('data-network') as 'mainnet' | 'testnet';
+        const networkConfig = config[network];
+
+        if (typeof window.ethereum === 'undefined') {
+          alert('No Ethereum wallet detected. Please install MetaMask or another Ethereum wallet.');
+          return;
+        }
+
+        try {
+          await window.ethereum.request({
+            method: 'wallet_addEthereumChain',
+            params: [{
+              chainId: networkConfig.chainId,
+              chainName: networkConfig.chainName,
+              nativeCurrency: {
+                name: 'Ethereum',
+                symbol: 'ETH',
+                decimals: 18,
+              },
+              rpcUrls: networkConfig.rpcUrls,
+              blockExplorerUrls: networkConfig.blockExplorerUrls,
+            }],
+          });
+        } catch (error) {
+          console.error('Failed to add network:', error);
+          alert('Failed to add network. Please check your wallet and try again.');
+        }
+      });
+    });
+  }
+
+  // Initialize when the DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeNetworkButtons);
+  } else {
+    initializeNetworkButtons();
+  }
+</script>

packages/docs-site/src/content/docs/guides/app-developers/deploy-a-contract.mdx

@@ -207,7 +207,7 @@ Hardhat is an Ethereum development environment for deploying smart contracts, ru
     For setup details, see our [Hardhat Deployment](/guides/app-developers/deploy-a-contract/#deploy-a-contract-using-hardhat) guide on taiko.
 
     <Aside>
-    Before proceeding further, it is required for you to set up your wallet. For guidance on this, please refer to the section [Set up your wallet](/guides/app-developers/set-up-your-wallet/).
+    Before proceeding further, it is required for you to set up your wallet. For guidance on this, please refer to the section [Set up your wallet](/start-here/set-up-your-wallet/).
     </Aside>
 
 2. Deploying with Thirdweb
@@ -498,7 +498,7 @@ Hardhat is an Ethereum development environment for deploying smart contracts, ru
     For setup details, see our [Hardhat Deployment](/guides/app-developers/deploy-a-contract/#deploy-a-contract-using-hardhat-1) guide on taiko.
 
     <Aside>
-    Before proceeding further, it is required for you to set up your wallet. For guidance on this, please refer to the section [Set up your wallet](/guides/app-developers/set-up-your-wallet/).
+    Before proceeding further, it is required for you to set up your wallet. For guidance on this, please refer to the section [Set up your wallet](/start-here/set-up-your-wallet/).
     </Aside>
 
 2. Deploying with Thirdweb

packages/docs-site/src/content/docs/start-here/set-up-your-wallet.mdx

@@ -0,0 +1,45 @@
+---
+title: Add Taiko to your wallet
+description: Step-by-step guide to connect your wallet to Taiko Alethia and Taiko Hekla networks.
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import NetworkAdder from '../../../components/NetworkAdder.astro';
+
+
+<Aside>
+We **recommend you choose a Taiko Labs maintained RPC** which ends in `.taiko.xyz` (e.g., `https://rpc.mainnet.taiko.xyz`).
+</Aside>
+
+You can add Taiko networks to your wallet using the buttons below:
+
+<div style="display: flex; gap: 1rem; margin: 2rem 0;">
+  <NetworkAdder network="mainnet" />
+  <NetworkAdder network="testnet" />
+</div>
+
+If you are using a different in-browser wallet, the buttons above may also work for them.
+
+## Manually add Taiko
+
+To manually add Taiko as a custom network in your wallet, follow these steps:
+
+1. Find the "Add Network" option in your wallet (in MetaMask, you can find this in the networks dropdown)
+2. Click on "Add Network" and "Add network manually"
+3. Fill in the following details for the Taiko network environments:
+
+### Mainnet network details
+
+- Network Name: Taiko Alethia
+- RPC URL: https://rpc.taiko.xyz
+- Chain ID: 167000
+- Currency Symbol: ETH
+- Block Explorer URL: https://taikoscan.io/
+
+### Testnet network details
+
+- Network Name: Taiko Hekla
+- RPC URL: https://rpc.hekla.taiko.xyz
+- Chain ID: 167009
+- Currency Symbol: ETH
+- Block Explorer URL: https://hekla.taikoscan.io/