Not connected
;\n return{wallet.archAddress}
;\n}\n```\n\n`useWallet()` returns:\n\n| Field | What it is |\n|---|---|\n| `wallet` | `WalletState \\| null` — address, pubkey, `pubkeyXCoord`, `archAddress`, balances |\n| `connectionPhase` / `connectionError` | Connect-flow progress and failure copy |\n| `openConnectModal()` / `handleDisconnect()` | Open the picker / tear down the session |\n| `handleConnect(walletId, options?)` | Start a connect flow imperatively |\n| `repairOnboarding()` | Re-run your `onboard` hook without disconnecting — surface it when a transaction fails with an account-not-ready error |\n| `laserEyes`, `detectedWallets`, `showConnect`, … | Lower-level state for custom UIs |\n\n**5. Sign** with the active wallet:\n\n```tsx\nimport { useWalletSigner } from \"@arch-network/wallet-connect-kit\";\n\nconst signer = useWalletSigner(); // ChallengeSigner | DigestSigner\nconst signature =\n typeof signer === \"function\"\n ? await signer(challenge) // BIP-322 challenge signer\n : await signer.signDigest(digestHex); // digest signer (Arch ext, Turnkey)\n```\n\nAll wallet types produce signatures your transaction runner can treat\nidentically (BIP-322 witness / raw 64-byte Schnorr shapes). Outside React,\nuse `resolveActiveTransactionSigner(...)`.\n\n## Configuration reference\n\n```ts\nconst config: WalletKitConfig = {\n // Required. A network name, or the full triple\n // { bitcoinNetwork, xverseNetworkType, networkId } when the derived\n // Xverse network.type / Hub x-network values don't fit your deployment.\n network: \"testnet4\",\n\n // Optional — names the app in passkey prompts and Hub wallet labels.\n appName: \"My Arch App\", // default \"Arch\"\n\n // Optional — prefix for every localStorage/sessionStorage key.\n storagePrefix: \"myapp\", // default \"arch\"\n\n // Optional — Turnkey Wallet Hub endpoint (see \"Wallet Hub\" below).\n hub: { baseUrl: \"/api/wallet-hub\", apiKey: undefined },\n\n // Optional — console diagnostics, filterable with \"[WalletConnect]\".\n debug: false,\n\n // Optional host hooks — see \"Host hooks\" below.\n onboard: async ({ identity, signer, onPhase }) => {},\n fetchBalances: async (identity) => ({ balances: {}, totalUsdValue: null }),\n};\n```\n\nThe config is captured once on mount. To switch networks, remount the\nprovider (`key={network}`) or reload the page — per-network derived state is\nnot valid across networks.\n\n## Host hooks\n\nThe kit owns *connecting*; your app owns *what happens on-chain afterwards*:\n\n- **`onboard({ identity, signer, onPhase })`** — run post-connect provisioning\n (e.g. Arch `create_account` + associated token accounts). Report progress via\n `onPhase(\"checking-account\" | \"creating-account\" | …)` and the modal renders\n stage copy for each step. Throwing aborts the connect and tears down partial\n state. Omit it and connect finishes after identity validation.\n- **`fetchBalances(identity)`** — return the initial\n `{ balances, totalUsdValue }` snapshot committed with the wallet. Omit it and\n the wallet connects with empty balances; keep your own polling layer updating\n `walletKitStore` afterwards.\n\n## Wallet Hub (passkey / email wallets)\n\n- `hub.baseUrl` may be `https://hub.arch.network` or (recommended in\n browsers) a same-origin proxy that attaches `x-api-key` server-side and\n avoids CORS.\n- `hub.apiKey` is a public platform gate, not a user credential.\n- The Hub derives wallets on the network named by `network.networkId`\n (`x-network` header).\n\n### Same-origin proxy (Next.js)\n\nBrowser requests to the hosted Hub with `x-api-key`/`x-network` trigger a CORS\npreflight the Hub doesn't serve on every route. Keep the browser on your\norigin and attach the key server-side:\n\n```ts\n// app/api/wallet-hub/[...path]/route.ts\nimport { NextRequest } from \"next/server\";\n\nconst UPSTREAM = process.env.WALLET_HUB_BASE_URL ?? \"https://hub.arch.network\";\n\nasync function proxy(request: NextRequest, { params }: { params: Promise<{ path?: string[] }> }) {\n const { path } = await params;\n const headers = new Headers(request.headers);\n headers.delete(\"host\");\n headers.delete(\"connection\");\n headers.delete(\"content-length\");\n if (process.env.WALLET_HUB_API_KEY) headers.set(\"x-api-key\", process.env.WALLET_HUB_API_KEY);\n // Trust the client's x-network (the kit always sends it); default otherwise.\n if (!headers.has(\"x-network\")) headers.set(\"x-network\", \"mainnet\");\n\n const method = request.method.toUpperCase();\n const upstream = await fetch(\n `${UPSTREAM.replace(/\\/+$/, \"\")}/${(path ?? []).join(\"/\")}${request.nextUrl.search}`,\n {\n method,\n headers,\n body: [\"GET\", \"HEAD\"].includes(method) ? undefined : await request.text(),\n cache: \"no-store\",\n },\n );\n return new Response(upstream.body, { status: upstream.status, headers: upstream.headers });\n}\n\nexport const GET = proxy;\nexport const POST = proxy;\nexport async function OPTIONS() {\n return new Response(null, { status: 204 });\n}\n```\n\nThen set `hub: { baseUrl: \"/api/wallet-hub\" }` — the kit appends `/v1`\nitself. On Vite, the dev server can do the same with a `server.proxy` entry\n(see the example app).\n\n## Customization\n\n### Theming\n\n- Import `@arch-network/wallet-connect-kit/styles.css` once.\n- Override `--awck-*` CSS variables (`--awck-surface`, `--awck-fg`,\n `--awck-primary`, `--awck-accent`, …). Dark mode follows\n `prefers-color-scheme` and can be forced with `data-awck-theme=\"dark\"` on\n ``.\n\n### Component props\n\nEvery modal/button prop overrides its context default, so partial\ncustomization is a prop away:\n\n```tsx\n