feat: added 'add network to wallet' button

Author: nadeemb53

docs/general-info/add-status-network.md

@@ -4,11 +4,18 @@ description: Step-by-step guide on how to add Status Network to MetaMask and oth
 keywords: [Status Network, MetaMask setup, add network, wallet configuration, RPC settings, Chain ID, blockchain network setup]
 ---
 
+import AddToMetaMask from '@site/src/components/AddToMetaMask';
+
 # Add Status Network
 
 This guide shows how to add the **Status Network** to your wallet.
 
-## Testnet
+You can add Status Network Testnet directly by clicking on the button below:
+
+<AddToMetaMask />
+
+
+## Manual Configuration
 
 To add **Status Network Testnet** as a custom network to MetaMask:
 

docs/general-info/network-details.md

@@ -1,3 +1,5 @@
+import AddToMetaMask from '@site/src/components/AddToMetaMask';
+
 # Network Details
 
 ## Status Testnet
@@ -11,6 +13,9 @@
 | **Block Explorer**  | https://sepoliascan.status.network       |
 | **Bridge**          | https://bridge.status.network            |
 
+<AddToMetaMask />
+<div style={{height: '2rem'}} />
+
 These are the official network details for the Status Network testnet. You can use these details to:
 - Add the network to your wallet
 - Configure development environments

src/components/AddToMetaMask.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+export default function AddToMetaMask(): JSX.Element {
+  const addStatusNetwork = async () => {
+    if (typeof window === 'undefined' || !window.ethereum) {
+      alert('MetaMask is not installed. Please install MetaMask first.');
+      return;
+    }
+
+    try {
+      await window.ethereum.request({
+        method: 'wallet_addEthereumChain',
+        params: [{
+          chainId: '0x6300B5EA',
+          chainName: 'Status Network Testnet',
+          nativeCurrency: {
+            name: 'ETH',
+            symbol: 'ETH',
+            decimals: 18
+          },
+          rpcUrls: ['https://public.sepolia.rpc.status.network'],
+          blockExplorerUrls: ['https://sepoliascan.status.network']
+        }]
+      });
+    } catch (error) {
+      console.error(error);
+      alert('Failed to add the network to MetaMask. Please try again.');
+    }
+  };
+
+  return (
+    <button 
+      className="button button--primary" 
+      onClick={addStatusNetwork}
+    >
+      <img 
+        src="https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg"
+        alt="MetaMask Fox"
+        style={{ 
+          width: '20px', 
+          height: '20px',
+          marginRight: '8px',
+          verticalAlign: 'middle'
+        }} 
+      />
+      Add Status Network Testnet
+    </button>
+  );
+} 

src/types/global.d.ts

@@ -0,0 +1,8 @@
+interface Window {
+  ethereum?: {
+    request: (args: {
+      method: string;
+      params: any[];
+    }) => Promise<any>;
+  };
+}