refactor: integrate "Add to MetaMask" buttons for zkSync networks (#1004

)

Co-authored-by: hsyndeniz <huseyin.deniz1@hotmail.com>
Co-authored-by: 吕大卫 <dawei.lv@matrixport.com>
Co-authored-by: Antonio <tonioufa@gmail.com>

docs/.vuepress/components/NetworkAdder.vue

@@ -0,0 +1,56 @@
+<template>
+  <button type="button" class="add-network" @click="addNetwork">
+    <img width="18" src="/images/metamask_logo.svg" alt="Metamask">
+    Add {{ chainName }}
+  </button>
+</template>
+
+<script setup>
+const props = defineProps(['network'])
+const {network} = props
+const chainName = props.network === 'mainnet' ? 'zkSync Era Mainnet' : 'zkSync Era Sepolia Testnet'
+
+function addNetwork() {
+  const config = {
+    mainnet: {
+      chainId: '0x144',
+      rpcUrls: ['https://mainnet.era.zksync.io'],
+      blockExplorerUrls: ['https://explorer.zksync.io/'],
+    },
+    testnet: {
+      chainId: '0x12c',
+      rpcUrls: ['https://sepolia.era.zksync.dev'],
+      blockExplorerUrls: ['https://sepolia.explorer.zksync.dev/'],
+    },
+  }[network];
+
+  window.ethereum.request({
+    method: 'wallet_addEthereumChain',
+    params: [
+      {
+        chainId: config.chainId,
+        chainName: chainName,
+        nativeCurrency: {name: 'Ethereum', symbol: 'ETH', decimals: 18},
+        iconUrls: ['https://docs.zksync.io/favicon-32x32.png'],
+        rpcUrls: config.rpcUrls,
+        blockExplorerUrls: config.blockExplorerUrls,
+      },
+    ],
+  });
+}
+</script>
+
+<style scoped>
+.add-network {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 8px;
+  gap: 4px;
+  cursor: pointer;
+}
+
+img[src*="/images/metamask_logo.svg"] {
+  content: url("/images/metamask_logo.svg");
+}
+</style>

docs/build/quick-start/add-zksync-to-metamask.md

@@ -18,6 +18,12 @@ Fill in the following details for the zkSync network:
 
 ## Mainnet network info
 
+Add zkSync Era Mainnet automatically using the button below:
+
+<network-adder network="mainnet"></network-adder>
+
+**Network details:**
+
 - Network Name: `zkSync Era Mainnet`
 - RPC URL: `https://mainnet.era.zksync.io`
 - Chain ID: `324`
@@ -27,6 +33,12 @@ Fill in the following details for the zkSync network:
 
 ## Sepolia testnet network info
 
+Add zkSync Era testnet automatically using the button below:
+
+<network-adder network="testnet"></network-adder>
+
+**Network details:**
+
 - Network Name: `zkSync Era Sepolia Testnet`
 - RPC URL: `https://sepolia.era.zksync.dev`
 - Chain ID: `300`