Merge pull request #27 from base/feat/demo-reset-flow

feat: demo reset flow and Base Sepolia defaults

Author: patnir

components/Providers.tsx

@@ -7,13 +7,8 @@ import { WagmiProvider } from "wagmi";
 import { config } from "../lib/wagmi";
 
 const onchainKitConfig: AppConfig = {
-  appearance: {
-    mode: "auto",
-  },
-  wallet: {
-    display: "classic",
-    preference: "all",
-  },
+  appearance: { mode: "auto" },
+  wallet: { display: "classic", preference: "all" },
 } as const;
 
 export function Providers({ children }: PropsWithChildren) {

components/Wallet.tsx

@@ -1,18 +1,58 @@
 'use client'
 
 import { useEffect, useMemo, useState } from 'react'
-import { useAccount } from 'wagmi'
-import { useConnect } from 'wagmi'
-import { useDisconnect } from 'wagmi'
-import { config } from '../lib/wagmi'
-
+import { useAccount, useConnect, useDisconnect, useSwitchChain } from 'wagmi'
+import { config, baseSepolia } from '../lib/wagmi'
+import { useToast } from './ToastProvider'
 
 export function WalletComponent() {
-  const { isConnected, address } = useAccount()
+  const { isConnected, address, connector } = useAccount()
+  const [walletChainId, setWalletChainId] = useState<number | undefined>()
   const { connect, connectors } = useConnect({ config })
+  const { switchChainAsync } = useSwitchChain()
   const { disconnect } = useDisconnect()
+  const { showToast } = useToast()
   const [selectedConnectorId, setSelectedConnectorId] = useState<string>()
 
+  useEffect(() => {
+    if (!connector) {
+      setWalletChainId(undefined)
+      return
+    }
+
+    let cancelled = false
+
+    const refresh = async () => {
+      try {
+        const id = await connector.getChainId()
+        if (!cancelled) setWalletChainId(id)
+      } catch {
+        if (!cancelled) setWalletChainId(undefined)
+      }
+    }
+
+    void refresh()
+
+    let provider: { on?: (event: string, handler: () => void) => void; removeListener?: (event: string, handler: () => void) => void } | undefined
+    const onChainChanged = () => { void refresh() }
+
+    void connector.getProvider().then((p) => {
+      provider = p as typeof provider
+      provider?.on?.('chainChanged', onChainChanged)
+    })
+
+    return () => {
+      cancelled = true
+      provider?.removeListener?.('chainChanged', onChainChanged)
+    }
+  }, [connector])
+
+  // Base Account often stays on mainnet (8453) after connect; nudge to Sepolia.
+  useEffect(() => {
+    if (!isConnected || walletChainId === undefined || walletChainId === baseSepolia.id) return
+    void switchChainAsync({ chainId: baseSepolia.id }).catch(() => {})
+  }, [isConnected, walletChainId, switchChainAsync])
+
   useEffect(() => {
     if (selectedConnectorId || connectors.length === 0) return
 
@@ -31,8 +71,32 @@ export function WalletComponent() {
   )
 
   if (isConnected && address) {
+    const copyAddress = async (event: React.MouseEvent) => {
+      event.stopPropagation()
+      try {
+        await navigator.clipboard.writeText(address)
+        showToast('Address copied', 'success')
+      } catch {
+        showToast('Could not copy address', 'error')
+      }
+    }
+
     return (
-      <div>
+      <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+        <div
+          style={{
+            padding: '0.5rem 0.75rem',
+            border: '1px solid #d1d5db',
+            borderRadius: '8px',
+            background: 'white',
+            color: '#374151',
+            fontSize: '0.875rem',
+            fontWeight: '500',
+            fontFamily: 'monospace',
+          }}
+        >
+          Chain {walletChainId ?? '…'}
+        </div>
         <div
           onClick={() => disconnect()}
           style={{
@@ -44,11 +108,27 @@ export function WalletComponent() {
             fontSize: '0.875rem',
             fontWeight: '500',
             fontFamily: 'monospace',
-            cursor: 'pointer'
+            cursor: 'pointer',
           }}
         >
           {address.slice(0, 6)}...{address.slice(-4)}
         </div>
+        <button
+          type="button"
+          onClick={copyAddress}
+          style={{
+            padding: '0.5rem 0.75rem',
+            border: '1px solid #d1d5db',
+            borderRadius: '8px',
+            background: 'white',
+            color: '#374151',
+            fontSize: '0.875rem',
+            fontWeight: '500',
+            cursor: 'pointer',
+          }}
+        >
+          Copy
+        </button>
       </div>
     )
   }
@@ -90,7 +170,10 @@ export function WalletComponent() {
       </select>
       <button
         type="button"
-        onClick={() => selectedConnector && connect({ connector: selectedConnector })}
+        onClick={() =>
+          selectedConnector &&
+          connect({ connector: selectedConnector, chainId: baseSepolia.id })
+        }
         disabled={!selectedConnector}
         style={{
           padding: '0.5rem 1rem',

lib/onchainTxErrors.ts

@@ -0,0 +1,67 @@
+const REVERT_MESSAGES: Record<string, string> = {
+  '0x646cf558': 'This identity has already claimed.',
+  '0x0455eeee': 'Nothing to reset — this identity has not claimed yet.',
+  '0x3c091c33': 'Token expired. Sign in again and retry the claim.',
+  '0x8baa579f':
+    'Onchain signature rejected. Ensure verify/.env ONCHAIN_SIGNING_KEY is 64 hex chars (no 0x), matches the registered signer, and restart the verify backend.',
+  '0xd0b145db': 'Verify signer is not registered on the deployed VerifyRegistry.',
+}
+
+const TEXT_MATCHES: Array<{ match: string; message: string }> = [
+  { match: 'AlreadyClaimed', message: REVERT_MESSAGES['0x646cf558'] },
+  { match: 'ClaimNotFound', message: REVERT_MESSAGES['0x0455eeee'] },
+  { match: 'TokenExpired', message: REVERT_MESSAGES['0x3c091c33'] },
+  { match: 'InvalidSignature', message: REVERT_MESSAGES['0x8baa579f'] },
+  { match: 'UntrustedSigner', message: REVERT_MESSAGES['0xd0b145db'] },
+  {
+    match: 'ConnectorChainMismatch',
+    message:
+      'Wallet chain does not match the connection. Disconnect, reconnect, and switch your wallet to the correct network before retrying.',
+  },
+  {
+    match: 'insufficient funds',
+    message: 'Insufficient Base Sepolia ETH to pay for this transaction.',
+  },
+]
+
+function collectErrorText(error: unknown): string {
+  let str = ''
+  let e: unknown = error
+  while (e instanceof Error) {
+    str += `${e.message} `
+    e = (e as Error & { cause?: unknown }).cause
+  }
+  if (typeof error === 'string') str += error
+  return str
+}
+
+export function isUserRejectedWalletError(error: unknown): boolean {
+  const message = collectErrorText(error).toLowerCase()
+  return (
+    message.includes('user rejected') ||
+    message.includes('user denied') ||
+    message.includes('rejected the request')
+  )
+}
+
+export function parseOnchainTxError(error: unknown): string {
+  if (isUserRejectedWalletError(error)) {
+    return ''
+  }
+
+  const str = collectErrorText(error)
+
+  for (const [selector, message] of Object.entries(REVERT_MESSAGES)) {
+    if (str.includes(selector) || str.includes(selector.slice(2))) {
+      return message
+    }
+  }
+
+  for (const { match, message } of TEXT_MATCHES) {
+    if (str.includes(match)) {
+      return message
+    }
+  }
+
+  return 'Transaction failed. Please try again.'
+}

lib/verifyApiErrors.ts

@@ -0,0 +1,50 @@
+const BACKEND_MESSAGE_COPY: Record<string, string> = {
+  verification_not_found:
+    'No Coinbase verification for this wallet. Complete verify first.',
+  verification_traits_not_satisfied:
+    'Verification does not meet the required traits.',
+  credential_not_found:
+    'No verified account found for this wallet. Complete verification first.',
+  no_valid_credential:
+    'No verified account found for this wallet. Complete verification first.',
+  invalid_signature:
+    'SIWE signature invalid. Sign in again and retry.',
+  server_error:
+    'Verify backend failed to sign the token. Check verify/.env ONCHAIN_SIGNING_KEY (64-char hex, no 0x prefix) and restart the backend.',
+}
+
+function readBackendCode(body: string): string | undefined {
+  try {
+    const parsed = JSON.parse(body) as { message?: string; error?: string }
+    return parsed.message || parsed.error
+  } catch {
+    return undefined
+  }
+}
+
+export function parseVerifyBackendError(status: number, body: string): string {
+  const code = readBackendCode(body)
+  if (code && BACKEND_MESSAGE_COPY[code]) {
+    return BACKEND_MESSAGE_COPY[code]
+  }
+  if (code) {
+    return code.replace(/_/g, ' ')
+  }
+
+  switch (status) {
+    case 400:
+      return 'The verification request was invalid. Sign in again and retry.'
+    case 401:
+      return 'This app is not authorized to call Base Verify. Check your API keys.'
+    case 404:
+      return 'No Coinbase verification for this wallet. Complete verify first.'
+    case 412:
+      return 'Verification does not meet the required traits.'
+    case 429:
+      return 'Too many requests. Wait a moment and try again.'
+    case 500:
+      return 'Verify backend error. Check backend logs and ONCHAIN_SIGNING_KEY config.'
+    default:
+      return `Failed to get onchain verify token (${status})`
+  }
+}

lib/wagmi.ts

@@ -2,6 +2,8 @@ import { createConfig, http } from "wagmi";
 import { base, baseSepolia } from "wagmi/chains";
 import { baseAccount } from "wagmi/connectors";
 
+export { baseSepolia };
+
 const baseAccountConnector = baseAccount({
   appName: "Base Verify Demo",
   appLogoUrl: "https://baseverifydemo.com/icon.png",

pages/api/onchain/verify-token.ts

@@ -1,5 +1,6 @@
 import { NextApiRequest, NextApiResponse } from "next";
 import { config } from "../../../lib/config";
+import { parseVerifyBackendError } from "../../../lib/verifyApiErrors";
 
 export default async function handler(
   req: NextApiRequest,
@@ -49,7 +50,7 @@ export default async function handler(
         verifyResponse.statusText
       );
       return res.status(verifyResponse.status).json({
-        error: "Failed to get onchain verify token",
+        error: parseVerifyBackendError(verifyResponse.status, responseBody),
       });
     }