feat: add one-click 'Add to MetaMask' button and styling

docs/components/AddToMetaMask.css

@@ -0,0 +1,61 @@
+/* Styling for the one-click "Add to MetaMask" buttons.
+   Uses only Vocs theme variables so it tracks the light/dark toggle and the
+   sharp-corner design language (borderRadius zeroed in vocs.config.ts). */
+
+.a2mm {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin: 1rem 0;
+}
+
+.a2mm__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.a2mm__btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.55rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--vocs-color_backgroundAccentText);
+  background: var(--vocs-color_backgroundAccent);
+  border: 1px solid var(--vocs-color_backgroundAccent);
+  border-radius: var(--vocs-borderRadius_8);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.a2mm__btn:hover {
+  background: var(--vocs-color_backgroundAccentHover);
+  border-color: var(--vocs-color_backgroundAccentHover);
+}
+
+.a2mm__btn:disabled {
+  opacity: 0.6;
+  cursor: progress;
+}
+
+.a2mm__status {
+  font-size: 0.8125rem;
+  color: var(--vocs-color_text3);
+}
+
+.a2mm__status--success {
+  color: var(--vocs-color_successText);
+}
+
+.a2mm__status--error,
+.a2mm__status--no-wallet {
+  color: var(--vocs-color_dangerText);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .a2mm__btn {
+    transition: none;
+  }
+}

docs/components/AddToMetaMask.tsx

@@ -0,0 +1,119 @@
+import { useState } from 'react'
+import './AddToMetaMask.css'
+
+/* One-click "Add Stable to MetaMask" button.
+
+   USDT0 is Stable's native gas token, so a single EIP-3085
+   `wallet_addEthereumChain` call is all that's needed — once the network is
+   added, MetaMask shows the native USDT0 balance automatically (no
+   `wallet_watchAsset` for a separate ERC-20 is required).
+
+   Network params mirror reference/connect.mdx — keep them in sync. */
+
+type NetworkKey = 'mainnet' | 'testnet'
+
+type ChainParams = {
+  label: string
+  chainId: string // hex, per EIP-3085
+  chainName: string
+  rpcUrls: string[]
+  blockExplorerUrls: string[]
+  nativeCurrency: { name: string; symbol: string; decimals: number }
+}
+
+const NETWORKS: Record<NetworkKey, ChainParams> = {
+  mainnet: {
+    label: 'Mainnet',
+    chainId: '0x3dc', // 988
+    chainName: 'Stable Mainnet',
+    rpcUrls: ['https://rpc.stable.xyz'],
+    blockExplorerUrls: ['https://stablescan.xyz'],
+    nativeCurrency: { name: 'USDT0', symbol: 'USDT0', decimals: 18 },
+  },
+  testnet: {
+    label: 'Testnet',
+    chainId: '0x899', // 2201
+    chainName: 'Stable Testnet',
+    rpcUrls: ['https://rpc.testnet.stable.xyz'],
+    blockExplorerUrls: ['https://testnet.stablescan.xyz'],
+    nativeCurrency: { name: 'USDT0', symbol: 'USDT0', decimals: 18 },
+  },
+}
+
+type Status = 'idle' | 'pending' | 'success' | 'error' | 'no-wallet'
+
+function statusText(status: Status): string {
+  switch (status) {
+    case 'pending':
+      return 'Confirm in MetaMask…'
+    case 'success':
+      return 'Added — check MetaMask'
+    case 'no-wallet':
+      return 'No wallet detected'
+    case 'error':
+      return 'Request rejected'
+    default:
+      return ''
+  }
+}
+
+function AddButton({ network }: { network: NetworkKey }) {
+  const [status, setStatus] = useState<Status>('idle')
+  const params = NETWORKS[network]
+
+  async function add() {
+    // `ethereum` is injected by MetaMask (and most EVM wallets) on the client.
+    const ethereum = (globalThis as { ethereum?: { request: (a: unknown) => Promise<unknown> } }).ethereum
+    if (!ethereum) {
+      setStatus('no-wallet')
+      return
+    }
+    setStatus('pending')
+    try {
+      await ethereum.request({
+        method: 'wallet_addEthereumChain',
+        params: [
+          {
+            chainId: params.chainId,
+            chainName: params.chainName,
+            rpcUrls: params.rpcUrls,
+            blockExplorerUrls: params.blockExplorerUrls,
+            nativeCurrency: params.nativeCurrency,
+          },
+        ],
+      })
+      setStatus('success')
+    } catch {
+      // User rejected, or the wallet refused — surface a neutral message.
+      setStatus('error')
+    }
+  }
+
+  return (
+    <span className="a2mm__item">
+      <button
+        type="button"
+        className="a2mm__btn"
+        onClick={add}
+        disabled={status === 'pending'}
+        aria-label={`Add Stable ${params.label} to MetaMask`}
+      >
+        Add Stable {params.label}
+      </button>
+      {status !== 'idle' && (
+        <span className={`a2mm__status a2mm__status--${status}`} role="status">
+          {statusText(status)}
+        </span>
+      )}
+    </span>
+  )
+}
+
+export function AddToMetaMask() {
+  return (
+    <div className="a2mm">
+      <AddButton network="mainnet" />
+      <AddButton network="testnet" />
+    </div>
+  )
+}

docs/pages/cn/reference/connect.mdx

@@ -1,14 +1,16 @@
 ---
 source_path: reference/connect.mdx
-source_sha: 21a5b6baf9d48aa18e34b2c6bb4751a3eba4c5a3
+source_sha: 060ec94cc0c0a0d7da55d200afbb8f7b69fdb8cd
 title: "连接"
-description: "Stable 的主网和测试网链 ID、RPC 端点、区块浏览器和水龙头。"
+description: "Stable 的主网和测试网 chain ID、RPC 端点、区块浏览器和水龙头。"
 diataxis: "reference"
 ---
 
+import { AddToMetaMask } from '../../../components/AddToMetaMask'
+
 # 连接
 
-本页整合了连接到 Stable 所需的网络详细信息。
+本页汇总了连接 Stable 所需的网络详细信息。
 
 ## 主网
 
@@ -41,12 +43,16 @@ diataxis: "reference"
 如需更高的吞吐量，请使用[第三方 RPC 提供商](/cn/reference/rpc-providers)。
 
 :::note
-USDT0 作为原生 gas 代币时使用 **18 位小数**（由 `address(x).balance` 返回），作为 ERC-20 代币时使用 **6 位小数**（由 `USDT0.balanceOf(x)` 返回）。这两个接口操作的是同一个底层余额。viem 和 ethers.js 等库报告 18 位小数，因为它们读取的是原生 gas 代币。有关如何协调精度差异的详细信息，请参阅 [USDT0 在 Stable 上的行为](/cn/explanation/usdt0-behavior)。
+USDT0 作为原生 gas 代币使用 **18 位小数**（由 `address(x).balance` 返回），作为 ERC-20 代币使用 **6 位小数**（由 `USDT0.balanceOf(x)` 返回）。这两个接口操作的是同一个底层余额。viem 和 ethers.js 等库报告 18 位小数，因为它们读取的是原生 gas 代币。有关精度差异如何调和的详情，请参阅 [USDT0 在 Stable 上的行为](/cn/explanation/usdt0-behavior)。
 :::
 
 ## 将 Stable 添加到你的钱包
 
-要手动添加 Stable，请打开浏览器钱包的网络设置，并输入上述表格中的值。必填字段为：
+如果你使用 MetaMask（或其他注入式 EVM 钱包），只需一键即可添加 Stable。该按钮调用 `wallet_addEthereumChain`，因此你的钱包会提示你确认下面的网络详细信息。由于 USDT0 是原生 gas 代币，添加网络后你的余额会自动显示，无需单独导入代币。
+
+<AddToMetaMask />
+
+如果想改为手动添加 Stable，请打开钱包的网络设置并输入上方表格中的值。必填字段为：
 
 - **网络名称**
 - **RPC URL**（EVM JSON-RPC 端点）
@@ -55,7 +61,7 @@ USDT0 作为原生 gas 代币时使用 **18 位小数**（由 `address(x).balanc
 
 ## 验证连接
 
-通过查询链 ID 确认你的 RPC 端点可访问：
+通过查询 chain ID 来确认你的 RPC 端点可访问：
 
 ```bash
 cast chain-id --rpc-url https://rpc.stable.xyz
@@ -79,8 +85,8 @@ cast chain-id --rpc-url https://rpc.testnet.stable.xyz
 2201
 ```
 
-## 下一步推荐
+## 推荐的下一步
 
-- [**快速开始**](/cn/tutorial/quick-start) — 五分钟内发送你的第一笔测试网交易。
-- [**获取测试网 USDT0**](/cn/how-to/use-faucet) — 从水龙头为钱包注资或从 Sepolia 跨链转入。
-- [**USDT0 在 Stable 上的行为**](/cn/explanation/usdt0-behavior) — 在针对余额编写代码之前，了解 18/6 位小数的双重角色。
+- [**快速开始**](/cn/tutorial/quick-start)：在五分钟内发送你的第一笔测试网交易。
+- [**获取测试网 USDT0**](/cn/how-to/use-faucet)：从水龙头为钱包充值，或从 Sepolia 跨链桥接。
+- [**USDT0 在 Stable 上的行为**](/cn/explanation/usdt0-behavior)：在针对余额编写代码之前，先理解 18/6 位小数的双重角色。

docs/pages/en/reference/connect.mdx

@@ -4,6 +4,8 @@ description: "Mainnet and testnet chain IDs, RPC endpoints, block explorers, and
 diataxis: "reference"
 ---
 
+import { AddToMetaMask } from '../../../components/AddToMetaMask'
+
 # Connect
 
 This page consolidates the network details you need to connect to Stable.
@@ -44,7 +46,11 @@ USDT0 uses **18 decimals** as the native gas token (returned by `address(x).bala
 
 ## Add Stable to your wallet
 
-To add Stable manually, open your browser wallet's network settings and enter the values from the tables above. The required fields are:
+If you use MetaMask (or another injected EVM wallet), add Stable in one click. The button calls `wallet_addEthereumChain`, so your wallet prompts you to confirm the network details below. Because USDT0 is the native gas token, your balance shows up automatically once the network is added, with no separate token import needed.
+
+<AddToMetaMask />
+
+To add Stable manually instead, open your wallet's network settings and enter the values from the tables above. The required fields are:
 
 - **Network Name**
 - **RPC URL** (the EVM JSON-RPC endpoint)
@@ -79,6 +85,6 @@ Expected output:
 
 ## Next recommended
 
-- [**Quick start**](/en/tutorial/quick-start) — Send your first testnet transaction in five minutes.
-- [**Get testnet USDT0**](/en/how-to/use-faucet) — Fund a wallet from the faucet or bridge from Sepolia.
-- [**USDT0 behavior on Stable**](/en/explanation/usdt0-behavior) — Understand the 18/6-decimal dual role before you code against balances.
+- [**Quick start**](/en/tutorial/quick-start): Send your first testnet transaction in five minutes.
+- [**Get testnet USDT0**](/en/how-to/use-faucet): Fund a wallet from the faucet or bridge from Sepolia.
+- [**USDT0 behavior on Stable**](/en/explanation/usdt0-behavior): Understand the 18/6-decimal dual role before you code against balances.

docs/pages/ko/reference/connect.mdx

@@ -1,61 +1,67 @@
 ---
 source_path: reference/connect.mdx
-source_sha: 21a5b6baf9d48aa18e34b2c6bb4751a3eba4c5a3
+source_sha: 060ec94cc0c0a0d7da55d200afbb8f7b69fdb8cd
 title: "연결"
-description: "Stable의 메인넷 및 테스트넷 체인 ID, RPC 엔드포인트, 블록 탐색기, 포셋입니다."
+description: "Stable의 메인넷 및 테스트넷 체인 ID, RPC 엔드포인트, 블록 익스플로러, 포셋."
 diataxis: "reference"
 ---
 
+import { AddToMetaMask } from '../../../components/AddToMetaMask'
+
 # 연결
 
-이 페이지는 Stable에 연결하는 데 필요한 네트워크 세부 정보를 통합해 제공합니다.
+이 페이지는 Stable에 연결하는 데 필요한 네트워크 세부 정보를 정리합니다.
 
 ## 메인넷
 
 | **필드** | **값** |
 | :--- | :--- |
-| 네트워크 이름 | Stable Mainnet |
+| Network Name | Stable Mainnet |
 | Chain ID | `988` |
-| 통화 기호 | USDT0 |
+| Currency Symbol | USDT0 |
 | EVM JSON-RPC | `https://rpc.stable.xyz` |
 | WebSocket | `wss://rpc.stable.xyz` |
-| 블록 탐색기 | [https://stablescan.xyz](https://stablescan.xyz) |
+| Block Explorer | [https://stablescan.xyz](https://stablescan.xyz) |
 
 ## 테스트넷
 
 | **필드** | **값** |
 | :--- | :--- |
-| 네트워크 이름 | Stable Testnet |
+| Network Name | Stable Testnet |
 | Chain ID | `2201` |
-| 통화 기호 | USDT0 |
+| Currency Symbol | USDT0 |
 | EVM JSON-RPC | `https://rpc.testnet.stable.xyz` |
 | WebSocket | `wss://rpc.testnet.stable.xyz` |
-| 블록 탐색기 | [https://testnet.stablescan.xyz](https://testnet.stablescan.xyz) |
+| Block Explorer | [https://testnet.stablescan.xyz](https://testnet.stablescan.xyz) |
 
-서드파티 RPC 제공자에 대해서는 [RPC 제공자](/ko/reference/rpc-providers)를 참고하세요. 이러한 엔드포인트를 자동으로 연결해 주는 타입 지정 클라이언트는 [Stable SDK](/ko/explanation/sdk-overview)를 참고하세요.
+서드파티 RPC 제공자에 대해서는 [RPC 제공자](/ko/reference/rpc-providers)를 참조하세요. 이러한 엔드포인트를 자동으로 연결해 주는 타입 지정 클라이언트는 [Stable SDK](/ko/explanation/sdk-overview)를 참조하세요.
 
 ## 속도 제한
 
-공개 RPC 엔드포인트(`https://rpc.stable.xyz` 및 `https://rpc.testnet.stable.xyz`)는 **IP당 10초마다 1,000건의 요청**으로 속도가 제한됩니다. 제한을 초과한 요청은 `HTTP 429`를 반환합니다.
+공개 RPC 엔드포인트(`https://rpc.stable.xyz` 및 `https://rpc.testnet.stable.xyz`)는 **IP당 10초에 1,000 요청**으로 속도가 제한됩니다. 제한을 초과한 요청은 `HTTP 429`를 반환합니다.
 
-더 높은 처리량이 필요하면 [서드파티 RPC 제공자](/ko/reference/rpc-providers)를 사용하세요.
+더 높은 처리량을 위해서는 [서드파티 RPC 제공자](/ko/reference/rpc-providers)를 사용하세요.
 
 :::note
-USDT0은 네이티브 가스 토큰으로는 **18자리 소수**(`address(x).balance`로 반환됨)를, ERC-20 토큰으로는 **6자리 소수**(`USDT0.balanceOf(x)`로 반환됨)를 사용합니다. 두 인터페이스 모두 동일한 기본 잔액을 기반으로 동작합니다. viem이나 ethers.js 같은 라이브러리는 네이티브 가스 토큰을 읽기 때문에 18자리 소수를 보고합니다. 정밀도 차이가 어떻게 조정되는지에 대한 자세한 내용은 [Stable에서의 USDT0 동작](/ko/explanation/usdt0-behavior)을 참고하세요.
+USDT0는 네이티브 가스 토큰으로 사용될 때 **18 소수 자릿수**(`address(x).balance`로 반환됨)를, ERC-20 토큰으로 사용될 때 **6 소수 자릿수**(`USDT0.balanceOf(x)`로 반환됨)를 사용합니다. 두 인터페이스는 동일한 기초 잔액에서 작동합니다. viem과 ethers.js 같은 라이브러리는 네이티브 가스 토큰을 읽기 때문에 18 소수 자릿수를 보고합니다. 정밀도 차이가 어떻게 조정되는지에 대한 자세한 내용은 [Stable에서의 USDT0 동작](/ko/explanation/usdt0-behavior)을 참조하세요.
 :::
 
 ## 지갑에 Stable 추가하기
 
-Stable을 수동으로 추가하려면 브라우저 지갑의 네트워크 설정을 열고 위 표의 값을 입력하세요. 필요한 필드는 다음과 같습니다:
+MetaMask(또는 다른 주입형 EVM 지갑)를 사용하는 경우, 한 번의 클릭으로 Stable을 추가하세요. 이 버튼은 `wallet_addEthereumChain`을 호출하므로, 지갑이 아래의 네트워크 세부 정보를 확인하도록 요청합니다. USDT0가 네이티브 가스 토큰이기 때문에, 네트워크가 추가되면 별도의 토큰 가져오기 없이 잔액이 자동으로 표시됩니다.
+
+<AddToMetaMask />
+
+대신 Stable을 수동으로 추가하려면, 지갑의 네트워크 설정을 열고 위 표의 값을 입력하세요. 필요한 필드는 다음과 같습니다.
 
-- **네트워크 이름**
+- **Network Name**
 - **RPC URL** (EVM JSON-RPC 엔드포인트)
 - **Chain ID**
-- **통화 기호**: `USDT0`
+- **Currency Symbol**: `USDT0`
 
 ## 연결 확인
 
-체인 ID를 조회하여 RPC 엔드포인트에 접근 가능한지 확인하세요:
+체인 ID를 조회하여 RPC 엔드포인트에 접근 가능한지 확인하세요.
 
 ```bash
 cast chain-id --rpc-url https://rpc.stable.xyz
@@ -81,6 +87,6 @@ cast chain-id --rpc-url https://rpc.testnet.stable.xyz
 
 ## 다음 추천
 
-- [**빠른 시작**](/ko/tutorial/quick-start) — 5분 안에 첫 테스트넷 트랜잭션을 전송하세요.
-- [**테스트넷 USDT0 받기**](/ko/how-to/use-faucet) — 포셋에서 지갑에 자금을 채우거나 Sepolia에서 브리지하세요.
-- [**Stable에서의 USDT0 동작**](/ko/explanation/usdt0-behavior) — 잔액을 다루는 코드를 작성하기 전에 18/6 소수 자릿수의 이중 역할을 이해하세요.
+- [**빠른 시작**](/ko/tutorial/quick-start): 5분 안에 첫 번째 테스트넷 트랜잭션을 보내세요.
+- [**테스트넷 USDT0 받기**](/ko/how-to/use-faucet): 포셋에서 지갑에 자금을 충전하거나 Sepolia에서 브리지하세요.
+- [**Stable에서의 USDT0 동작**](/ko/explanation/usdt0-behavior): 잔액을 다루는 코드를 작성하기 전에 18/6 소수 자릿수의 이중 역할을 이해하세요.