Merge pull request #20 from status-im/develop

nadeemb53 · web-flow · commit 6d9acc46e820 · 2025-02-10T22:21:28.000+05:30
feat: seo optimisations, analytics and add network to wallet button
diff --git a/docs/general-info/add-status-network.md b/docs/general-info/add-status-network.md
@@ -1,8 +1,21 @@
+---
+title: Add Status Network
+description: Step-by-step guide on how to add Status Network to MetaMask and other wallets. Learn how to configure network settings for both desktop and mobile wallets.
+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:
 
diff --git a/docs/general-info/bridge/bridging-testnet.md b/docs/general-info/bridge/bridging-testnet.md
@@ -1,3 +1,9 @@
+---
+title: Bridging to Status Network Testnet
+description: Learn how to bridge tokens between Sepolia and Status Network testnet using the official Status Network bridge. Complete guide with prerequisites and step-by-step instructions.
+keywords: [Status Network bridge, token bridge, cross-chain bridge, Sepolia bridge, L2 bridge, testnet bridge, blockchain bridge]
+---
+
 # Bridging to Status Network Testnet
 
 The Status Network bridge allows you to transfer tokens between Sepolia and Status Network testnet. The bridge is deployed at [bridge.status.network](https://bridge.status.network).
diff --git a/docs/general-info/contract-addresses/testnet-contracts.md b/docs/general-info/contract-addresses/testnet-contracts.md
@@ -1,3 +1,9 @@
+---
+title: Testnet Contracts
+description: Comprehensive list of Status Network testnet contract addresses, including bridge contracts, core infrastructure, and L2 contracts with their purposes and links to block explorers.
+keywords: [Status Network contracts, testnet addresses, smart contracts, bridge contracts, L1 contracts, L2 contracts, blockchain infrastructure]
+---
+
 # Testnet Contracts
 
 This page lists all the important contract addresses for the Status Network testnet infrastructure.
diff --git a/docs/general-info/contract-addresses/tokens.md b/docs/general-info/contract-addresses/tokens.md
@@ -1,3 +1,9 @@
+---
+title: Tokens
+description: Official list of supported tokens and their contract addresses on Status Network, including both L1 and L2 token addresses and bridge mappings.
+keywords: [Status Network tokens, token list, supported tokens, token addresses, L2 tokens, bridge tokens]
+---
+
 # Tokens
 
 For the most up-to-date list of supported tokens and their contract addresses on Status Network, please refer to our official [Status Network Token List repository](https://github.com/status-im/status-network-token-list).
diff --git a/docs/general-info/network-details.md b/docs/general-info/network-details.md
@@ -1,3 +1,12 @@
+---
+id: network-details
+title: Status Network Details & Configuration
+description: Official network details for Status Network testnet including RPC endpoints, Chain ID, and configuration information for wallets and development environments.
+keywords: [Status Network, network details, RPC endpoint, Chain ID, testnet configuration, blockchain network, MetaMask setup]
+---
+
+import AddToMetaMask from '@site/src/components/AddToMetaMask';
+
 # Network Details
 
 ## Status Testnet
@@ -11,6 +20,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
diff --git a/docs/index.md b/docs/index.md
@@ -1,6 +1,8 @@
 ---
 id: index
 title: Welcome to Status Network
+description: Status Network is a gasless Layer 2 blockchain network enabling seamless, fee-free decentralized applications. Start building with easy wallet setup, faucets, and deployment tools.
+keywords: [Status Network, Layer 2, gasless blockchain, ethereum scaling, web3 development, dapp development, blockchain development]
 slug: /
 sidebar_position: 1
 ---
diff --git a/docs/introduction/quick-start.md b/docs/introduction/quick-start.md
@@ -1,3 +1,9 @@
+---
+title: Quick Start
+description: Get started with Status Network in under 10 minutes. Learn how to deploy your first smart contract using Remix IDE, get test ETH, and interact with the network.
+keywords: [Status Network tutorial, quick start, smart contract deployment, Remix IDE, blockchain development, testnet setup, MetaMask configuration]
+---
+
 # Quick Start
 
 In this section, we'll get you deploying a sample contract on **Status Network Testnet** in less than 10 minutes.
diff --git a/docs/other/official-links.md b/docs/other/official-links.md
@@ -1,3 +1,9 @@
+---
+title: Official Links
+description: Complete directory of official Status Network resources, including main website, tools, development resources, and community links.
+keywords: [Status Network links, official resources, network tools, development resources, community links, blockchain explorer, bridge, faucet]
+---
+
 # Official Links
 
 This page contains all the official links for the Status Network ecosystem.
diff --git a/docs/tools/block-explorers.md b/docs/tools/block-explorers.md
@@ -1,3 +1,9 @@
+---
+title: Status Network Block Explorer
+description: Learn how to use the Status Network block explorer to track transactions, verify smart contracts, and monitor network activity. Complete guide to explorer features and contract verification.
+keywords: [Status Network explorer, blockchain explorer, smart contract verification, transaction tracking, block explorer, network monitoring]
+---
+
 # Status Network Testnet Explorer
 
 The Status Network block explorer is available at [sepoliascan.status.network](https://sepoliascan.status.network).
diff --git a/docs/tools/bridge.md b/docs/tools/bridge.md
@@ -1,3 +1,9 @@
+---
+title: Status Network Bridge
+description: Complete guide to using the Status Network bridge for transferring tokens between Sepolia and Status Network testnet. Learn about supported tokens, bridging process, and monitoring transactions.
+keywords: [Status Network bridge, token bridge, cross-chain transfer, L1 L2 bridge, token bridging, Sepolia bridge]
+---
+
 # Status Network Testnet Bridge
 
 The Status Network Testnet Bridge allows users to transfer tokens between Sepolia (Layer 1) and Status Network testnet (Layer 2). The bridge interface is available at [bridge.status.network](https://bridge.status.network).
diff --git a/docs/tools/rpc.md b/docs/tools/rpc.md
@@ -1,3 +1,9 @@
+---
+title: RPC Endpoints
+description: Official RPC endpoints for Status Network, including configuration guides for MetaMask and Web3 libraries. Learn about available methods, rate limits, and best practices.
+keywords: [Status Network RPC, JSON-RPC, blockchain API, web3 configuration, MetaMask setup, blockchain development]
+---
+
 # RPC Endpoints
 
 The Status Network provides public RPC (Remote Procedure Call) endpoints that allow you to interact with the network.
diff --git a/docs/tools/testnet-faucets.md b/docs/tools/testnet-faucets.md
@@ -1,3 +1,9 @@
+---
+title: Testnet Faucets
+description: Get testnet ETH for Status Network development. Complete guide to obtaining test tokens through Status Network faucet and Sepolia faucets for bridging.
+keywords: [Status Network faucet, testnet ETH, test tokens, Sepolia faucet, blockchain testing, development tokens]
+---
+
 # Testnet Faucets
 
 To get started on Status Network testnet, you'll need both Sepolia ETH and Status Network testnet ETH.
diff --git a/docs/tutorials/deploying-contracts/using-foundry.md b/docs/tutorials/deploying-contracts/using-foundry.md
@@ -1,3 +1,9 @@
+---
+title: Using Foundry with Status Network
+description: Comprehensive guide to deploying and testing smart contracts on Status Network using Foundry. Learn about project setup, deployment scripts, testing, and contract interaction using Cast.
+keywords: [Foundry tutorial, smart contract deployment, Status Network development, blockchain testing, Solidity development, web3 development, Foundry testing]
+---
+
 # Using Foundry to Deploy Smart Contracts
 
 This tutorial will guide you through the process of deploying a smart contract on Status Network testnet using Foundry.
diff --git a/docs/tutorials/deploying-contracts/using-hardhat.md b/docs/tutorials/deploying-contracts/using-hardhat.md
@@ -1,3 +1,9 @@
+---
+title: Using Hardhat with Status Network
+description: Step-by-step tutorial for deploying smart contracts on Status Network using Hardhat and TypeScript. Learn about project setup, configuration, and contract deployment.
+keywords: [Hardhat tutorial, smart contract deployment, Status Network development, TypeScript, blockchain development, web3 development]
+---
+
 # Using Hardhat to Deploy Smart Contracts
 
 This tutorial will guide you through the process of deploying a smart contract on Status Network testnet using Hardhat, Hardhat Ignition, and TypeScript.
diff --git a/docs/tutorials/deploying-contracts/using-remix.md b/docs/tutorials/deploying-contracts/using-remix.md
@@ -1,3 +1,9 @@
+---
+title: Using Remix with Status Network
+description: Learn how to deploy smart contracts on Status Network using Remix IDE. Beginner-friendly guide with step-by-step instructions for contract deployment and interaction.
+keywords: [Remix IDE, smart contract deployment, Status Network development, blockchain tutorial, web3 development, solidity]
+---
+
 # Using Remix to Deploy Smart Contracts
 
 This tutorial will guide you through deploying a smart contract on Status Network testnet using the Remix IDE. Remix is a browser-based IDE that's perfect for quick development and testing.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -39,24 +39,31 @@ const config: Config = {
       {
         docs: {
           sidebarPath: './sidebars.ts',
-          editUrl: 'https://github.com/status-im/status-network-docs/tree/main/',
+          editUrl: 'https://github.com/status-im/docs.status.network',
           routeBasePath: '/',
+          showLastUpdateTime: true,
         },
         blog: false,
         pages: false,
         theme: {
           customCss: './src/css/custom.css',
         },
+        sitemap: {
+          changefreq: 'weekly',
+          priority: 0.5,
+          ignorePatterns: ['/tags/**'],
+          filename: 'sitemap.xml',
+        },
+        gtag: {
+          trackingID: 'G-4GHNHQDPG2',
+          anonymizeIP: true,
+        },
       } satisfies Preset.Options,
     ],
   ],
 
   themeConfig: {
-    image: 'https://docs.status.network/img/sn_logo.svg',
-    colorMode: {
-      defaultMode: 'dark',
-      respectPrefersColorScheme: true,
-    },
+    image: 'img/sn-social-card.png',
     navbar: {
       title: 'Status Network Docs',
       logo: {
@@ -69,14 +76,78 @@ const config: Config = {
           position: 'right',
           className: 'language-dropdown',
         },
-        // {
-        //   href: 'https://hub.status.network',
-        //   label: 'Hub',
-        //   position: 'right',
-        //   className: 'hub-button',
-        // },
       ],
     },
+
+    metadata: [
+      // General SEO
+      {
+        name: 'description',
+        content: 'Documentation for Status Network - The gasless network with sustainable funding for app builders. Launch and scale your social apps and games with truly free transactions.',
+      },
+      {
+        name: 'keywords',
+        content: 'status network, blockchain, web3, documentation, gasless transactions, social network, cryptocurrency',
+      },
+      {
+        name: 'author',
+        content: 'Status Network',
+      },
+      
+      // OpenGraph tags
+      {
+        property: 'og:title',
+        content: 'Status Network Documentation',
+      },
+      {
+        property: 'og:description',
+        content: 'Documentation for Status Network - The gasless network with sustainable funding for app builders. Launch and scale your social apps and games with truly free transactions.',
+      },
+      {
+        property: 'og:image',
+        content: 'https://docs.status.network/img/sn-social-card.png',
+      },
+      {
+        property: 'og:url',
+        content: 'https://docs.status.network',
+      },
+      {
+        property: 'og:type',
+        content: 'website',
+      },
+      {
+        property: 'og:site_name',
+        content: 'Status Network Documentation',
+      },
+      
+      // Twitter Card tags
+      {
+        name: 'twitter:card',
+        content: 'summary_large_image',
+      },
+      {
+        name: 'twitter:site',
+        content: '@statusL2',
+      },
+      {
+        name: 'twitter:title',
+        content: 'Status Network Documentation',
+      },
+      {
+        name: 'twitter:description',
+        content: 'Documentation for Status Network - The gasless network with sustainable funding for app builders. Launch and scale your social apps and games with truly free transactions.',
+      },
+      {
+        name: 'twitter:image',
+        content: 'https://docs.status.network/img/sn-social-card.png',
+      },
+    ],
+
+    colorMode: {
+      defaultMode: 'dark',
+      respectPrefersColorScheme: true,
+    },
+
     footer: {
       links: [
         {
@@ -95,7 +166,6 @@ const config: Config = {
       ],
     },
     algolia: {
-      // it is safe to commit these
       appId: 'M7J93TRPJ9',
       apiKey: '17befa84094fd9acddd40cbb64012976',
       indexName: 'status',
diff --git a/src/components/AddToMetaMask.tsx b/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://docs.status.network/img/metamask.svg"
+        alt="MetaMask Fox"
+        style={{ 
+          width: '20px', 
+          height: '20px',
+          marginRight: '8px',
+          verticalAlign: 'middle'
+        }} 
+      />
+      Add Status Network Testnet
+    </button>
+  );
+} 
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -0,0 +1,8 @@
+interface Window {
+  ethereum?: {
+    request: (args: {
+      method: string;
+      params: any[];
+    }) => Promise<any>;
+  };
+} 
diff --git a/static/img/metamask.svg b/static/img/metamask.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 507.83 470.86"><defs><style>.a{fill:#e2761b;stroke:#e2761b;}.a,.b,.c,.d,.e,.f,.g,.h,.i,.j{stroke-linecap:round;stroke-linejoin:round;}.b{fill:#e4761b;stroke:#e4761b;}.c{fill:#d7c1b3;stroke:#d7c1b3;}.d{fill:#233447;stroke:#233447;}.e{fill:#cd6116;stroke:#cd6116;}.f{fill:#e4751f;stroke:#e4751f;}.g{fill:#f6851b;stroke:#f6851b;}.h{fill:#c0ad9e;stroke:#c0ad9e;}.i{fill:#161616;stroke:#161616;}.j{fill:#763d16;stroke:#763d16;}</style></defs><title>metamask</title><polygon class="a" points="482.09 0.5 284.32 147.38 320.9 60.72 482.09 0.5"/><polygon class="b" points="25.54 0.5 221.72 148.77 186.93 60.72 25.54 0.5"/><polygon class="b" points="410.93 340.97 358.26 421.67 470.96 452.67 503.36 342.76 410.93 340.97"/><polygon class="b" points="4.67 342.76 36.87 452.67 149.57 421.67 96.9 340.97 4.67 342.76"/><polygon class="b" points="143.21 204.62 111.8 252.13 223.7 257.1 219.73 136.85 143.21 204.62"/><polygon class="b" points="364.42 204.62 286.91 135.46 284.32 257.1 396.03 252.13 364.42 204.62"/><polygon class="b" points="149.57 421.67 216.75 388.87 158.71 343.55 149.57 421.67"/><polygon class="b" points="290.88 388.87 358.26 421.67 348.92 343.55 290.88 388.87"/><polygon class="c" points="358.26 421.67 290.88 388.87 296.25 432.8 295.65 451.28 358.26 421.67"/><polygon class="c" points="149.57 421.67 212.18 451.28 211.78 432.8 216.75 388.87 149.57 421.67"/><polygon class="d" points="213.17 314.54 157.12 298.04 196.67 279.95 213.17 314.54"/><polygon class="d" points="294.46 314.54 310.96 279.95 350.71 298.04 294.46 314.54"/><polygon class="e" points="149.57 421.67 159.11 340.97 96.9 342.76 149.57 421.67"/><polygon class="e" points="348.72 340.97 358.26 421.67 410.93 342.76 348.72 340.97"/><polygon class="e" points="396.03 252.13 284.32 257.1 294.66 314.54 311.16 279.95 350.91 298.04 396.03 252.13"/><polygon class="e" points="157.12 298.04 196.87 279.95 213.17 314.54 223.7 257.1 111.8 252.13 157.12 298.04"/><polygon class="f" points="111.8 252.13 158.71 343.55 157.12 298.04 111.8 252.13"/><polygon class="f" points="350.91 298.04 348.92 343.55 396.03 252.13 350.91 298.04"/><polygon class="f" points="223.7 257.1 213.17 314.54 226.29 382.31 229.27 293.07 223.7 257.1"/><polygon class="f" points="284.32 257.1 278.96 292.87 281.34 382.31 294.66 314.54 284.32 257.1"/><polygon class="g" points="294.66 314.54 281.34 382.31 290.88 388.87 348.92 343.55 350.91 298.04 294.66 314.54"/><polygon class="g" points="157.12 298.04 158.71 343.55 216.75 388.87 226.29 382.31 213.17 314.54 157.12 298.04"/><polygon class="h" points="295.65 451.28 296.25 432.8 291.28 428.42 216.35 428.42 211.78 432.8 212.18 451.28 149.57 421.67 171.43 439.55 215.75 470.36 291.88 470.36 336.4 439.55 358.26 421.67 295.65 451.28"/><polygon class="i" points="290.88 388.87 281.34 382.31 226.29 382.31 216.75 388.87 211.78 432.8 216.35 428.42 291.28 428.42 296.25 432.8 290.88 388.87"/><polygon class="j" points="490.44 156.92 507.33 75.83 482.09 0.5 290.88 142.41 364.42 204.62 468.37 235.03 491.43 208.2 481.49 201.05 497.39 186.54 485.07 177 500.97 164.87 490.44 156.92"/><polygon class="j" points="0.5 75.83 17.39 156.92 6.66 164.87 22.56 177 10.44 186.54 26.34 201.05 16.4 208.2 39.26 235.03 143.21 204.62 216.75 142.41 25.54 0.5 0.5 75.83"/><polygon class="g" points="468.37 235.03 364.42 204.62 396.03 252.13 348.92 343.55 410.93 342.76 503.36 342.76 468.37 235.03"/><polygon class="g" points="143.21 204.62 39.26 235.03 4.67 342.76 96.9 342.76 158.71 343.55 111.8 252.13 143.21 204.62"/><polygon class="g" points="284.32 257.1 290.88 142.41 321.1 60.72 186.93 60.72 216.75 142.41 223.7 257.1 226.09 293.27 226.29 382.31 281.34 382.31 281.74 293.27 284.32 257.1"/></svg>
diff --git a/static/img/sn-social-card.png b/static/img/sn-social-card.png
