> ## Documentation Index
> Fetch the complete documentation index at: https://docs.arc.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Connect to Arc

> Set up your wallet and configure your development environment for Arc Testnet.

export const ConnectWallet = () => {
  const walletIcon = <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="cw-icon shrink-0" aria-hidden="true">
      <path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 1 0 0 4h3a1 1 0 0 0 1-1v-2.5" />
      <path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" />
    </svg>;
  const truncateAddress = addr => {
    if (!addr) return "";
    return addr.slice(0, 6) + "…" + addr.slice(-4);
  };
  const canUseDOM = typeof window !== "undefined";
  const [status, setStatus] = useState("checking");
  const [walletState, setWalletState] = useState(null);
  const [walletsCount, setWalletsCount] = useState(0);
  const [error, setError] = useState(null);
  const [copied, setCopied] = useState(false);
  const [busy, setBusy] = useState(false);
  const [step, setStep] = useState("idle");
  const [wallets, setWallets] = useState([]);
  useEffect(() => {
    if (!canUseDOM) {
      setStatus("not-installed");
      return;
    }
    const bus = window.__arcWallet;
    const syncFromBus = () => {
      const b = window.__arcWallet;
      if (!b) return;
      setWalletState(b.state);
      setWalletsCount(b.wallets.length);
      setWallets(b.wallets);
      if (b.state) {
        setStatus("connected");
      } else if (b.isReady) {
        if (b.wallets.length === 0 && !window.ethereum) {
          setStatus("not-installed");
        } else {
          setStatus("disconnected");
        }
      }
    };
    const handleChanged = () => syncFromBus();
    const handleWalletsChanged = () => syncFromBus();
    const handleReady = () => syncFromBus();
    window.addEventListener("arc:wallet:changed", handleChanged);
    window.addEventListener("arc:wallet:wallets-changed", handleWalletsChanged);
    window.addEventListener("arc:wallet:ready", handleReady);
    if (bus) syncFromBus();
    return () => {
      window.removeEventListener("arc:wallet:changed", handleChanged);
      window.removeEventListener("arc:wallet:wallets-changed", handleWalletsChanged);
      window.removeEventListener("arc:wallet:ready", handleReady);
    };
  }, []);
  const handleConnect = async () => {
    if (!window.__arcWallet) return;
    setError(null);
    setBusy(true);
    try {
      await window.__arcWallet.connect();
      try {
        await window.__arcWallet.switchChain(window.__arcWallet.ARC_TESTNET_CHAIN_ID);
      } catch (switchErr) {
        if (switchErr && switchErr.code !== 4001) {
          throw switchErr;
        }
      }
    } catch (err) {
      if (err && err.code === "MULTIPLE_WALLETS") {
        setStep("picking");
      } else if (err && err.code === 4001) {
        setError("Request rejected. Try again when ready.");
      } else if (err && (/No wallet detected/i).test(err.message || "")) {
        setError("No wallet found. Install a browser wallet to continue.");
      } else if (err && (/User cancelled/i).test(err.message || "")) {} else {
        setError("Something went wrong. Please try again.");
      }
    } finally {
      setBusy(false);
    }
  };
  const handlePickWallet = async uuid => {
    if (!window.__arcWallet) return;
    setError(null);
    setBusy(true);
    try {
      await window.__arcWallet.connect(uuid);
      try {
        await window.__arcWallet.switchChain(window.__arcWallet.ARC_TESTNET_CHAIN_ID);
      } catch (switchErr) {
        if (switchErr && switchErr.code !== 4001) {
          throw switchErr;
        }
      }
      setStep("idle");
    } catch (err) {
      if (err && err.code === 4001) {
        setError("Request rejected. Try again when ready.");
      } else {
        setError("Something went wrong. Please try again.");
      }
    } finally {
      setBusy(false);
    }
  };
  const handleCancelPick = () => {
    setStep("idle");
    setError(null);
  };
  const handleDisconnect = async () => {
    if (!window.__arcWallet) return;
    setBusy(true);
    try {
      await window.__arcWallet.disconnect();
    } finally {
      setBusy(false);
    }
  };
  const handleCopy = async () => {
    if (!walletState || !walletState.address) return;
    try {
      await navigator.clipboard.writeText(walletState.address);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {}
  };
  if (status === "checking") {
    return null;
  }
  if (status === "not-installed") {
    return <div className="cw-card rounded-xl p-5 mb-4 not-prose">
        <div className="flex items-center justify-between flex-wrap gap-3">
          <div className="flex items-center gap-3">
            {walletIcon}
            <p className="cw-text-body text-sm m-0">
              No wallet detected. Install a browser wallet to connect to Arc
              Testnet.
            </p>
          </div>
          <a href="https://metamask.io/download/" target="_blank" rel="noopener noreferrer" className="cw-btn-primary inline-block rounded-md px-4 py-2 text-sm font-medium no-underline whitespace-nowrap" aria-label="Download MetaMask (opens in new tab)">
            Get MetaMask →
          </a>
        </div>
      </div>;
  }
  if (status === "connected" && walletState) {
    return <div className="cw-card rounded-xl p-5 mb-4 not-prose">
        <div className="flex items-center justify-between flex-wrap gap-2">
          <div className="flex items-center gap-2">
            <span className="cw-badge-connected inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium">
              <span className="inline-block w-1.5 h-1.5 rounded-full" style={{
      background: "currentColor"
    }} />
              Connected
            </span>
            <span className="cw-text-subtle text-xs">
              Arc Testnet{walletState.connector ? ` · ${walletState.connector}` : ""}
            </span>
          </div>
          <div className="flex items-center gap-3">
            <button onClick={handleCopy} className="cw-text-accent text-sm font-mono flex items-center gap-1 bg-transparent border-0 cursor-pointer p-0" aria-label="Copy wallet address to clipboard" title={walletState.address}>
              {truncateAddress(walletState.address)}
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{
      display: copied ? "none" : "inline-block"
    }}>
                <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{
      display: copied ? "inline-block" : "none",
      color: "#8DD89F"
    }}>
                <polyline points="20 6 9 17 4 12" />
              </svg>
            </button>
            <button onClick={handleDisconnect} disabled={busy} className="cw-text-subtle text-xs bg-transparent border-0 cursor-pointer p-0 underline" aria-label="Disconnect wallet">
              Disconnect
            </button>
          </div>
        </div>
      </div>;
  }
  if (status === "disconnected" && step === "picking") {
    return <div className="cw-card rounded-xl p-5 mb-4 not-prose">
        <div className="flex items-center gap-3 mb-3">
          <button onClick={handleCancelPick} disabled={busy} className="cw-text-subtle text-sm bg-transparent border-0 cursor-pointer p-0" aria-label="Back">
            ← Back
          </button>
          <strong className="cw-text-body text-sm">Choose a wallet</strong>
        </div>
        <div className="flex flex-col gap-1.5">
          {wallets.map(w => <button key={w.info.uuid} onClick={() => handlePickWallet(w.info.uuid)} disabled={busy} className="flex items-center gap-3 p-3 rounded-md bg-transparent border-0 cursor-pointer text-left cw-text-body cw-picker-row" aria-label={`Connect with ${w.info.name}`}>
              {w.info.icon && <img src={w.info.icon} alt="" width={28} height={28} aria-hidden="true" style={{
      borderRadius: 6
    }} />}
              <span className="text-sm">{w.info.name}</span>
            </button>)}
        </div>
        {error && <p className="cw-error text-xs mt-2 mb-0" role="alert">{error}</p>}
      </div>;
  }
  const buttonText = busy ? "Connecting…" : "Connect Wallet";
  return <div className="cw-card rounded-xl p-5 mb-4 not-prose">
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-3 min-w-0">
          {walletIcon}
          <p className="cw-text-body text-sm m-0">
            Adds the network configuration and connects your account.
          </p>
        </div>
        <button onClick={handleConnect} disabled={busy} className="cw-btn-primary rounded-md px-4 py-2 text-sm font-medium border-0 cursor-pointer whitespace-nowrap shrink-0" aria-label="Connect wallet to Arc Testnet" aria-busy={busy}>
          {buttonText}
        </button>
      </div>
      {error && <p className="cw-error text-xs mt-2 mb-0" role="alert">
          {error}
        </p>}
    </div>;
};

Connect a wallet to Arc Testnet using one-click setup or manual configuration.

## Wallet setup

Use the button below to add Arc Testnet to your wallet automatically.

<ConnectWallet />

### Manual setup

<Tip>
  Arc uses USDC as the native gas token (18 decimals). If your wallet supports
  **custom gas tokens**, ensure display/decimals are set correctly. Wallets that
  don't support custom gas tokens still work for signing and sending
  transactions — balances may display as "ETH" but the underlying token is USDC.
  See [Gas and fees](/arc/references/gas-and-fees) for details.
</Tip>

<Tabs>
  <Tab title="MetaMask">
    <Steps>
      <Step title="Open network settings">
        Open MetaMask → **Settings** → **Networks** → **Add network** → **Add a network manually**.
      </Step>

      <Step title="Enter network details">
        | Field               | Value                             |
        | :------------------ | :-------------------------------- |
        | **Network name**    | Arc Testnet                       |
        | **New RPC URL**     | `https://rpc.testnet.arc.network` |
        | **Chain ID**        | 5042002                           |
        | **Currency symbol** | USDC                              |
        | **Explorer URL**    | `https://testnet.arcscan.app`     |
      </Step>

      <Step title="Save and switch">
        Click **Save**, then switch to Arc Testnet.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Rabby">
    <Steps>
      <Step title="Open network settings">
        Open Rabby → click the **network selector** (top-left) → **Add Custom Network**.
      </Step>

      <Step title="Enter network details">
        | Field              | Value                             |
        | :----------------- | :-------------------------------- |
        | **Chain Name**     | Arc Testnet                       |
        | **Chain ID**       | 5042002                           |
        | **RPC URL**        | `https://rpc.testnet.arc.network` |
        | **Currency**       | USDC                              |
        | **Block Explorer** | `https://testnet.arcscan.app`     |
      </Step>

      <Step title="Confirm and switch">
        Click **Confirm**, then select Arc Testnet from the network list.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Coinbase Wallet">
    <Steps>
      <Step title="Open network settings">
        Open Coinbase Wallet → **Settings** → **Networks** → **Add custom network**.
      </Step>

      <Step title="Enter network details">
        | Field               | Value                             |
        | :------------------ | :-------------------------------- |
        | **Network name**    | Arc Testnet                       |
        | **RPC URL**         | `https://rpc.testnet.arc.network` |
        | **Chain ID**        | 5042002                           |
        | **Currency symbol** | USDC                              |
        | **Block explorer**  | `https://testnet.arcscan.app`     |
      </Step>

      <Step title="Save and switch">
        Click **Save**, then switch to Arc Testnet.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Rainbow">
    <Steps>
      <Step title="Open network settings">
        Open Rainbow → **Settings** (gear icon) → **Networks** → **Custom Network**.
      </Step>

      <Step title="Enter network details">
        | Field              | Value                             |
        | :----------------- | :-------------------------------- |
        | **Network name**   | Arc Testnet                       |
        | **RPC URL**        | `https://rpc.testnet.arc.network` |
        | **Chain ID**       | 5042002                           |
        | **Symbol**         | USDC                              |
        | **Block explorer** | `https://testnet.arcscan.app`     |
      </Step>

      <Step title="Save and switch">
        Click **Save**, then switch to Arc Testnet.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Network details

| Parameter | Value                                              |
| :-------- | :------------------------------------------------- |
| Network   | Arc Testnet                                        |
| Chain ID  | `5042002`                                          |
| Currency  | USDC                                               |
| Explorer  | [testnet.arcscan.app](https://testnet.arcscan.app) |
| Faucet    | [faucet.circle.com](https://faucet.circle.com)     |

### RPC endpoints

<CodeGroup>
  ```text Primary theme={null}
  https://rpc.testnet.arc.network
  ```

  ```text Blockdaemon theme={null}
  https://rpc.blockdaemon.testnet.arc.network
  ```

  ```text dRPC theme={null}
  https://rpc.drpc.testnet.arc.network
  ```

  ```text QuickNode theme={null}
  https://rpc.quicknode.testnet.arc.network
  ```
</CodeGroup>

### WebSocket endpoints

<CodeGroup>
  ```text Primary theme={null}
  wss://rpc.testnet.arc.network
  ```

  ```text Blockdaemon theme={null}
  wss://rpc.blockdaemon.testnet.arc.network:443/websocket
  ```

  ```text dRPC theme={null}
  wss://rpc.drpc.testnet.arc.network
  ```

  ```text QuickNode theme={null}
  wss://rpc.quicknode.testnet.arc.network
  ```
</CodeGroup>