Fix multi-chain claim flow under AppKit connections (standalone Superfluid campaign widget)

apps/superfluid-campaign-web/src/App.tsx

@@ -1,29 +1,101 @@
-import React, { useRef } from 'react'
+import React, { useMemo, useRef } from 'react'
 import { SuperfluidCampaignWidget } from '@goodwidget/superfluid-campaign-widget'
 import type { EIP1193Provider } from '@goodwidget/core'
 import {
+  DEFAULT_APPKIT_NETWORKS,
   DefaultAppKitProvider,
   useAppKit,
   useAppKitAccount,
+  useAppKitNetwork,
   useAppKitProvider,
 } from '@goodwidget/embed/appkit-provider'
 import { TamaguiProvider } from '@tamagui/core'
 import { YStack, defaultConfig } from '@goodwidget/ui'
 
 const DESKTOP_WIDGET_MAX_WIDTH = 960
 
+/**
+ * Pressing the disconnect-menu item under AppKit opens AppKit's own Account
+ * view (see disconnectOverride below) rather than ending the session
+ * directly, so the button is labeled to match what it actually does.
+ */
+const APPKIT_DISCONNECT_LABEL = 'Network settings'
+
+const SWITCH_CHAIN_MANUAL_SELECTION_ERROR = 'Select the network in the wallet dialog, then try again.'
+
 function AppKitSuperfluidCampaignWidget() {
   const { open } = useAppKit()
-  const { address } = useAppKitAccount()
+  const { address, status: accountStatus } = useAppKitAccount()
   const { walletProvider } = useAppKitProvider<EIP1193Provider | undefined>('eip155')
+  const { chainId, switchNetwork, approvedCaipNetworkIds } = useAppKitNetwork()
   const addressRef = useRef(address)
   addressRef.current = address
 
+  // AppKit reports `address: undefined` both while it's still restoring a prior
+  // session ('connecting'/'reconnecting'/not yet reported) and once it has
+  // definitively resolved to "no wallet". Only the latter is a real override —
+  // during the unresolved window this stays `undefined` so the core provider's
+  // own EIP-1193 fallback tracking (rather than a premature "disconnected"
+  // override) covers the gap until AppKit reports a final status. `chainId`
+  // below is gated on the same flag so it doesn't fall back to a stale
+  // previously-tracked chain once the account is known to be disconnected.
+  const isAccountResolved = accountStatus === 'connected' || accountStatus === 'disconnected'
+
+  // AppKit's switchNetwork takes the network descriptor object, not a chain id,
+  // so this looks up the descriptor for whichever chain the widget wants to
+  // switch to. AppKit's own active-network state (chainId here) is always the
+  // source of truth for what's "current" — the widget never tracks it separately.
+  const appKitNetworksByChainId = useMemo(
+    () => new Map(DEFAULT_APPKIT_NETWORKS.map((network) => [Number(network.id), network])),
+    [],
+  )
+
+  // CAIP network ids are formatted like "eip155:122" — the widget's execute
+  // gating needs plain numeric chain ids. `undefined` (AppKit hasn't reported
+  // approved networks yet) is kept as `null`, meaning "no restriction known"
+  // rather than "nothing is available".
+  const availableChainIds = useMemo(
+    () =>
+      approvedCaipNetworkIds
+        ? approvedCaipNetworkIds
+            .map((caipId) => Number(caipId.split(':')[1]))
+            .filter((id) => Number.isFinite(id))
+        : null,
+    [approvedCaipNetworkIds],
+  )
+
   return (
     <SuperfluidCampaignWidget
       provider={walletProvider}
       defaultTheme="dark"
       contentMaxWidth={DESKTOP_WIDGET_MAX_WIDTH}
+      addressOverride={isAccountResolved ? (address ?? null) : undefined}
+      chainIdOverride={isAccountResolved ? (chainId == null ? null : Number(chainId)) : undefined}
+      availableChainIdsOverride={availableChainIds}
+      switchChainOverride={async (targetChainId) => {
+        const targetNetwork = appKitNetworksByChainId.get(targetChainId)
+        // Falling through to AppKit's own network-selection modal is the
+        // documented recovery path when a target chain has no direct
+        // programmatic descriptor here, or when switchNetwork itself fails
+        // (e.g. the connected wallet rejects the automatic switch request).
+        // The modal only lets the user attempt the switch themselves — it
+        // never confirms synchronously that one actually happened — so this
+        // throws rather than resolves, otherwise the caller (core's
+        // switchChain, and the claim widget's error handling built on top of
+        // it) would treat an opened modal as an already-finished switch.
+        if (!targetNetwork) {
+          await open({ view: 'Networks' })
+          throw new Error(SWITCH_CHAIN_MANUAL_SELECTION_ERROR)
+        }
+        try {
+          await switchNetwork(targetNetwork)
+        } catch {
+          await open({ view: 'Networks' })
+          throw new Error(SWITCH_CHAIN_MANUAL_SELECTION_ERROR)
+        }
+      }}
+      disconnectLabel={APPKIT_DISCONNECT_LABEL}
+      disconnectIcon="settings"
       connectOverride={async () => {
         await open({ view: 'Connect' })
         if (!addressRef.current) throw new Error('wallet_connect_cancelled')
@@ -35,7 +107,7 @@ function AppKitSuperfluidCampaignWidget() {
         'flow-state-vote': 'https://ubi.gd/4fEqvrS',
         'flow-state-funding': 'https://ubi.gd/4z2tH8y',
         'gardens-donation': 'https://ubi.gd/4xhk4kv',
-        'gardens-funding': 'https:/ubi.gd/3TABl9O',
+        'gardens-funding': 'https://ubi.gd/3TABl9O',
         'invite-users': 'https://ubi.gd/4xhYTyH',
         'claim-ubi': 'https://ubi.gd/3RNtzJd',
       }}