wallet: a real connect picker; Coinbase Smart Wallet was never reachable

Every "Connect wallet" button looked for a connector with id "coinbaseWallet",
but wagmi's Coinbase connector registers as "coinbaseWalletSDK". The lookup
never matched, so the app always fell through to the generic injected
connector. Coinbase Smart Wallet could not be chosen, and in a browser with
no wallet extension the click failed with ProviderNotFound and no UI reacted:
a dead button. That also hid that @coinbase/wallet-sdk (an optional peer of
wagmi) was not installed; the production bundle carried a "Cannot find
module" stub in its place.

- lib/wallet-connectors.ts: pure module choosing which wallets to offer
  (browser-announced EIP-6963 wallets first, the generic browser wallet only
  when something is injected without announcing itself, Coinbase always) and
  turning connect failures into plain text without echoing raw errors.
- components/WalletPicker.tsx: the connect dialog on the existing Sheet, one
  in-flight request at a time, errors shown inline with role=alert, closes on
  success. components/ConnectWallet.tsx: a button in the caller's styling
  that opens it.
- Header, trade panel, launch form, posts composer and the /me dashboard all
  connect through the picker; no component calls useConnect any more except
  the picker, and a test pins that.
- @coinbase/wallet-sdk ^4.3.7 installed (registry tarball, integrity matches,
  no eval or script/iframe injection; its origins were already in the CSP).

Verified in headless Chrome against the dev server: no wallet shows Coinbase
plus guidance and the Coinbase row waits on its popup; a fake EIP-6963 wallet
is listed, connects, and the header shows the address chip; a bare
window.ethereum is offered as "Browser wallet". Lint, typecheck, 279 tests
and a production build pass.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146kzimBSuHTErfKYhMCaic

Author: kevincodex1

app/package-lock.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1127.0",
     "@base-ui/react": "^1.8.0",
+    "@coinbase/wallet-sdk": "^4.3.7",
     "@tanstack/react-query": "^5.91.3",
     "clsx": "^2.1.1",
     "lightweight-charts": "^5.2.1",

app/package.json

@@ -1,8 +1,9 @@
 "use client";
 
 import { useSyncExternalStore } from "react";
-import { useAccount, useConnect, useDisconnect, useSwitchChain } from "wagmi";
+import { useAccount, useDisconnect, useSwitchChain } from "wagmi";
 import { CHAINS } from "@/lib/chainPublic";
+import ConnectWallet from "./ConnectWallet";
 import WalletMenu from "./WalletMenu";
 
 /**
@@ -11,7 +12,6 @@ import WalletMenu from "./WalletMenu";
  */
 export default function ConnectButton({ block = false, onNavigate }: { block?: boolean; onNavigate?: () => void }) {
   const { address, isConnected, chainId, connector: activeConnector } = useAccount();
-  const { connect, connectors, isPending } = useConnect();
   const { disconnectAsync, isPending: disconnecting } = useDisconnect();
   const { switchChainAsync, isPending: switching } = useSwitchChain();
   // Wallet state only exists on the client; render a neutral pill during SSR/hydration.
@@ -27,17 +27,8 @@ export default function ConnectButton({ block = false, onNavigate }: { block?: b
   if (!mounted) return <div className={`${base} border border-line text-faint`}>Wallet</div>;
 
   if (!isConnected || !address) {
-    const connector = connectors.find((c) => c.id === "coinbaseWallet") ?? connectors[0];
-    return (
-      <button
-        onClick={() => connector && connect({ connector })}
-        disabled={isPending || !connector}
-        // a quiet hairline utility (the ThemeToggle recipe): only the launch CTA is loud
-        className={`${base} border border-line text-body hover:text-ink hover:border-line-strong`}
-      >
-        {isPending ? "Connecting…" : "Connect wallet"}
-      </button>
-    );
+    // a quiet hairline utility (the ThemeToggle recipe): only the launch CTA is loud
+    return <ConnectWallet className={`${base} border border-line text-body hover:text-ink hover:border-line-strong`}>Connect wallet</ConnectWallet>;
   }
   return (
     <WalletMenu address={address} chainId={chainId} connectorName={activeConnector?.name}

app/src/components/ConnectButton.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useState } from "react";
+import WalletPicker from "./WalletPicker";
+
+/**
+ * A "Connect wallet" button in the caller's own styling that opens the wallet picker.
+ * Every connect entry point (header, trade panel, launch form, posts, dashboard) goes through
+ * this so wallet choice and error handling live in one place.
+ */
+export default function ConnectWallet({ className, children, disabled = false }: { className?: string; children: React.ReactNode; disabled?: boolean }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)} disabled={disabled} aria-haspopup="dialog" aria-expanded={open} className={className}>
+        {children}
+      </button>
+      {open ? <WalletPicker onClose={() => setOpen(false)} /> : null}
+    </>
+  );
+}

app/src/components/ConnectWallet.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState, useSyncExternalStore } from "react";
+import { useConnect } from "wagmi";
+import { Wallet } from "lucide-react";
+import { NO_WALLET_NOTE, connectErrorMessage, walletChoices, type WalletChoice } from "@/lib/wallet-connectors";
+import Sheet from "./Sheet";
+
+/**
+ * The connect dialog: every wallet the browser announced, the generic browser wallet when one is
+ * injected without announcing itself, and Coinbase (passkey Smart Wallet or the Coinbase app).
+ * Connection errors are shown here instead of vanishing into hook state. Presentation only:
+ * no signing, no transactions.
+ */
+export default function WalletPicker({ onClose }: { onClose: () => void }) {
+  const { connect, connectors, isPending, reset } = useConnect({ mutation: { onSuccess: onClose } });
+  const [error, setError] = useState<string | null>(null);
+  const [pendingId, setPendingId] = useState<string | null>(null);
+  const hasInjectedProvider = useSyncExternalStore(
+    () => () => {},
+    () => Boolean((window as { ethereum?: unknown }).ethereum),
+    () => false,
+  );
+  const choices = walletChoices(connectors, { hasInjectedProvider });
+
+  function pick(choice: WalletChoice) {
+    const connector = connectors.find((c) => c.id === choice.id);
+    if (!connector || isPending) return;
+    setError(null);
+    reset();
+    setPendingId(connector.id);
+    connect({ connector }, { onError: (e) => setError(connectErrorMessage(e)), onSettled: () => setPendingId(null) });
+  }
+
+  return (
+    <Sheet title="Connect a wallet" onClose={onClose}>
+      <ul className="flex flex-col gap-2" aria-label="Wallets">
+        {choices.map((choice) => {
+          const busy = isPending && pendingId === choice.id;
+          return (
+            <li key={choice.id}>
+              <button
+                type="button"
+                onClick={() => pick(choice)}
+                disabled={isPending}
+                aria-busy={busy || undefined}
+                className="w-full min-h-14 px-3.5 py-2.5 inline-flex items-center gap-3.5 rounded-xl bg-card border border-line-strong text-left hover:border-ink/40 hover:bg-paper transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <span className="h-9 w-9 shrink-0 inline-flex items-center justify-center rounded-lg bg-paper border border-line overflow-hidden" aria-hidden>
+                  {choice.icon ? (
+                    // the wallet's own EIP-6963 icon, a data: URI; nothing to optimize
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img src={choice.icon} alt="" width={24} height={24} className="h-6 w-6" />
+                  ) : (
+                    <Wallet size={18} strokeWidth={1.75} />
+                  )}
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block text-sm font-semibold text-ink truncate">{choice.name}</span>
+                  <span className="block text-xs text-muted truncate">{busy ? "Waiting for the wallet…" : choice.hint}</span>
+                </span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+      {!hasInjectedProvider && choices.every((c) => c.kind === "coinbase") ? <p className="mt-3 text-xs text-muted leading-relaxed">{NO_WALLET_NOTE}</p> : null}
+      {choices.length === 0 ? <p className="text-sm text-muted">No wallet option is available right now. Reload the page and try again.</p> : null}
+      <p role="alert" aria-live="assertive" className={`mt-3 text-[13px] leading-relaxed text-down-ink ${error ? "" : "sr-only"}`}>{error ?? ""}</p>
+      <p className="mt-4 text-[11px] text-muted leading-relaxed">Connecting lets this site read your address. Transactions and edits always need your signature.</p>
+    </Sheet>
+  );
+}

app/src/components/WalletPicker.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import { useAccount, useBalance, useConfig, useConnect, useReadContract, useSwitchChain } from "wagmi";
+import { useAccount, useBalance, useConfig, useReadContract, useSwitchChain } from "wagmi";
 import { getPublicClient, getWalletClient } from "wagmi/actions";
 import { isAddress, maxUint160, maxUint256, parseEventLogs, parseUnits, zeroAddress, type Address, type Hex, type PublicClient, type WalletClient } from "viem";
 import TokenAvatar from "./TokenAvatar";
@@ -21,6 +21,7 @@ import { CHAINS, CHAIN_LABELS, CHAIN_KEYS, BUILDER_DATA_SUFFIX, explorerTx, shor
 import { friendlyError } from "@/lib/errors";
 import { Spinner } from "@/components/Skeleton";
 import { startNav } from "@/components/RouteProgress";
+import WalletPicker from "@/components/WalletPicker";
 
 /**
  * Launch flow — honest states, nothing claimed before the chain says so:
@@ -157,7 +158,7 @@ export default function LaunchForm({ ethUsd, gitlawbUsd = null, initialChain = "
   }, [chain, quoteKey, stockQ]);
   const config = useConfig();
   const { address, isConnected, chainId } = useAccount();
-  const { connect, connectors, isPending: connecting } = useConnect();
+  const [pickerOpen, setPickerOpen] = useState(false);
   const { switchChainAsync, isPending: switching } = useSwitchChain();
 
   const [name, setName] = useState("");
@@ -685,16 +686,14 @@ export default function LaunchForm({ ethUsd, gitlawbUsd = null, initialChain = "
             configured={cfg.configured}
             connected={isConnected}
             onChain={onChain}
-            connecting={connecting || switching}
+            connecting={switching}
             valid={valid}
             phase={phase}
-            onConnect={() => {
-              const c = connectors.find((c) => c.id === "coinbaseWallet") ?? connectors[0];
-              if (c) connect({ connector: c });
-            }}
+            onConnect={() => setPickerOpen(true)}
             onSwitch={() => void switchChainAsync({ chainId: CHAIN.id })}
             label={initialBuyRaw ? "Launch + optional buy" : "Launch for free, gas only"}
           />
+          {pickerOpen ? <WalletPicker onClose={() => setPickerOpen(false)} /> : null}
           <PhaseNote phase={phase} chain={chain} />
           <p className="text-xs text-muted leading-relaxed">
             One transaction on {CHAIN_LABEL}: deploys the token, creates the Uniswap v4 pool ({quote.symbol} / your token), locks 100% of the supply in it forever, and registers the fee routing. Cost: gas only, usually a few cents.

app/src/components/launchpad/LaunchForm.tsx

@@ -16,7 +16,6 @@
 .dashboard button:disabled { opacity: .5; cursor: not-allowed; }
 .readOnly { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; max-width: 330px; color: var(--color-muted); font-size: 11px; line-height: 1.75; text-wrap: pretty; }
 .readOnly svg { margin-top: 2px; flex-shrink: 0; }
-.connectError { color: var(--color-down-ink); margin-top: 12px; font-size: 13px; line-height: 1.5; }
 .welcomeGuide { padding: 40px; border-left: 1px solid var(--color-line); }
 .capabilities { margin-top: 8px; }
 .capabilities li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-block: 26px; border-bottom: 1px solid var(--color-line); }

app/src/components/launchpad/MeDashboard.module.css

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { useCallback, useEffect, useState } from "react";
 import { ArrowDownLeft, ArrowRight, ArrowUpRight, Coins, Layers3, LockKeyhole, RefreshCw, Wallet } from "lucide-react";
-import { useAccount, useConfig, useConnect } from "wagmi";
+import { useAccount, useConfig } from "wagmi";
 import { getPublicClient, getWalletClient } from "wagmi/actions";
 import type { Address } from "viem";
 import TokenAvatar from "./TokenAvatar";
@@ -23,6 +23,7 @@ import { ago } from "@/lib/launchpad/time";
 import { BUILDER_DATA_SUFFIX, CHAINS, CHAIN_SHORT, explorerTx, shortAddr, type ChainKey } from "@/lib/chainPublic";
 import { friendlyError } from "@/lib/errors";
 import { SkRow, SkStat } from "@/components/Skeleton";
+import ConnectWallet from "@/components/ConnectWallet";
 import styles from "./MeDashboard.module.css";
 
 type Me = { wallet: string; ethUsd: number | null; launches: LaunchRow[]; tokens: (LaunchRow & { my_buys: number; my_sells: number; my_last_trade: string })[]; trades: WalletTrade[] };
@@ -43,7 +44,6 @@ export default function MeDashboard() {
 }
 
 function WalletDashboard({ address, isConnected }: { address: Address | undefined; isConnected: boolean }) {
-  const { connect, connectors, isPending: connecting, error: connectError } = useConnect();
   const config = useConfig();
   const [me, setMe] = useState<Me | null>(null);
   const [err, setErr] = useState<string | null>(null);
@@ -151,7 +151,6 @@ function WalletDashboard({ address, isConnected }: { address: Address | undefine
   }
 
   if (!isConnected || !address) {
-    const c = connectors.find((x) => x.id === "coinbaseWallet") ?? connectors[0];
     return (
       <div className={styles.dashboard}>
         <section className={styles.welcome} aria-labelledby="wallet-welcome">
@@ -160,10 +159,9 @@ function WalletDashboard({ address, isConnected }: { address: Address | undefine
             <p className={styles.eyebrow}>Start with your wallet</p>
             <h2 id="wallet-welcome">Your wallet.<br /><span>Your workspace.</span></h2>
             <p className={styles.welcomeCopy}>Bring your launches, fees and trading activity into one view. No new account to create.</p>
-            <button type="button" onClick={() => c && connect({ connector: c })} disabled={connecting || !c} className={styles.connectButton}>
-              {connecting ? "Connecting…" : "Connect wallet"}<ArrowRight size={16} aria-hidden="true" />
-            </button>
-            {connectError ? <p role="alert" className={styles.connectError}>{friendlyError(connectError)}</p> : null}
+            <ConnectWallet className={styles.connectButton}>
+              Connect wallet<ArrowRight size={16} aria-hidden="true" />
+            </ConnectWallet>
             <p className={styles.readOnly}><LockKeyhole size={14} aria-hidden="true" />Connecting lets you read. Transactions and edits need your signature.</p>
           </div>
           <div className={styles.welcomeGuide}>

app/src/components/launchpad/MeDashboard.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useAccount, useConfig, useConnect } from "wagmi";
+import { useAccount, useConfig } from "wagmi";
 import { getWalletClient } from "wagmi/actions";
 import WalletAvatar from "@/components/WalletAvatar";
 import ChainBadge from "./ChainBadge";
@@ -14,6 +14,7 @@ import type { PostRow } from "@/lib/launchpad/postsServer";
 import { ago, nowMs } from "@/lib/launchpad/time";
 import { CHAINS, CHAIN_SHORT, shortAddr, type ChainKey } from "@/lib/chainPublic";
 import { friendlyError } from "@/lib/errors";
+import ConnectWallet from "@/components/ConnectWallet";
 import { ChevronDown, MessageSquare } from "lucide-react";
 
 function nonce(): string {
@@ -41,7 +42,6 @@ async function signed(config: ReturnType<typeof useConfig>, chain: ChainKey, mes
  */
 export default function TokenComments({ chain, token, symbol, launcher, embedded = false }: { chain: ChainKey; token: string; symbol: string; launcher: string; embedded?: boolean }) {
   const { address, isConnected } = useAccount();
-  const { connect, connectors, isPending: connecting } = useConnect();
   const config = useConfig();
   const { subscribe } = useLive();
   const [posts, setPosts] = useState<PostRow[]>([]);
@@ -147,7 +147,6 @@ export default function TokenComments({ chain, token, symbol, launcher, embedded
 
   const top = posts.filter((p) => p.parent_id === null);
   const replies = (id: number) => posts.filter((p) => p.parent_id === id).slice().reverse();
-  const c = connectors.find((x) => x.id === "coinbaseWallet") ?? connectors[0];
 
   return (
     <section className={embedded ? "overflow-hidden bg-paper" : "rounded-2xl bg-card border border-line overflow-hidden"} id="comments">
@@ -169,9 +168,7 @@ export default function TokenComments({ chain, token, symbol, launcher, embedded
         ) : !isConnected ? (
           <div className="flex items-center justify-between gap-3 flex-wrap">
             <p className="text-sm text-muted">Connect a wallet to post. Free signature, no transaction. Holders, traders and creators can post.</p>
-            <button type="button" onClick={() => c && connect({ connector: c })} disabled={connecting || !c} className={btn.secondarySm}>
-              {connecting ? "Connecting…" : "Connect"}
-            </button>
+            <ConnectWallet className={btn.secondarySm}>Connect</ConnectWallet>
           </div>
         ) : (
           <div className="space-y-2">