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

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

@@ -1,29 +1,93 @@
-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'
+
 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).
+        if (!targetNetwork) {
+          await open({ view: 'Networks' })
+          return
+        }
+        try {
+          await switchNetwork(targetNetwork)
+        } catch {
+          await open({ view: 'Networks' })
+        }
+      }}
+      disconnectLabel={APPKIT_DISCONNECT_LABEL}
+      disconnectIcon="settings"
       connectOverride={async () => {
         await open({ view: 'Connect' })
         if (!addressRef.current) throw new Error('wallet_connect_cancelled')
@@ -35,7 +99,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',
       }}

packages/citizen-claim-widget/src/CitizenClaimWidget.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { GoodWidgetProvider } from '@goodwidget/core'
+import { GoodWidgetProvider, useWallet } from '@goodwidget/core'
 import type { EIP1193Provider } from '@goodwidget/core'
 import {
   createComponent,
@@ -242,6 +242,10 @@ function CitizenClaimInner({
 
   /** Dispatch the primary action and surface callbacks for claim outcomes. */
   const handlePrimaryAction = useCallback(async () => {
+    // Tracks which chain a 'switch_chain' attempt targeted, so a failure can
+    // name that chain in the catch block below (the switch/case scope it's
+    // set in doesn't otherwise survive into the shared catch).
+    let switchChainTargetId: number | null = null
     try {
       switch (primaryAction) {
         case 'connect':
@@ -348,8 +352,11 @@ function CitizenClaimInner({
           await actions.refresh()
           break
         case 'switch_chain':
-          // Default to Celo (42220) as the first preferred supported chain
-          await actions.switchChain?.(42220)
+          // Prefer switching to a chain the wallet already has a claimable
+          // balance on; when none is known yet, fall back to Celo, the
+          // first preferred supported chain.
+          switchChainTargetId = claimablesByChain[0]?.chainId ?? SupportedChains.CELO
+          await actions.switchChain?.(switchChainTargetId)
           break
       }
     } catch (err: unknown) {
@@ -359,6 +366,25 @@ function CitizenClaimInner({
           chainId: chainId ?? null,
           message: err instanceof Error ? err.message : 'Claim failed',
         })
+      } else if (primaryAction === 'switch_chain') {
+        // Previously swallowed entirely: a failed switch (unsupported chain
+        // not yet added to the wallet, a raw provider error with no
+        // integrator override to fall back to, etc.) produced no toast and
+        // no onClaimError call, leaving the user with zero feedback that
+        // nothing happened. Log the underlying error for debugging, but
+        // surface a message naming the specific chain rather than the raw
+        // wallet/provider error text.
+        console.error('[CitizenClaimWidget] switchChain failed', err)
+        const targetChainName = switchChainTargetId
+          ? getChainName(switchChainTargetId)
+          : 'the requested chain'
+        const message = `Couldn't switch to ${targetChainName}. Please try again from your wallet.`
+        createToast({ message, status: 'error', duration: 0 })
+        onClaimError?.({
+          address: address ?? null,
+          chainId: switchChainTargetId,
+          message,
+        })
       }
     }
   }, [
@@ -412,9 +438,32 @@ function CitizenClaimInner({
                 </>
               )}
 
-              {(status === 'eligible' || status === 'claiming' || claimablesByChain.length > 0) && (
+              {status === 'unsupported_chain' && (
                 <>
-                  <Text secondary>Ready to claim</Text>
+                  <Text secondary>
+                    {chainId
+                      ? `Claiming isn't available on ${getChainName(chainId)}. Switch network to continue.`
+                      : 'Switch to a supported network to claim daily G$'}
+                  </Text>
+                </>
+              )}
+
+              {status !== 'unsupported_chain' &&
+                (status === 'eligible' || status === 'claiming' || claimablesByChain.length > 0) && (
+                <>
+                  {/*
+                    Declarative to claim status: an already_claimed wallet with
+                    other chains still available must not read as "no claims
+                    left" (the "Just a little longer" copy below is reserved for
+                    when every chain has actually been claimed for the day).
+                  */}
+                  <Text secondary>
+                    {status === 'already_claimed' && claimablesByChain.length === 1
+                      ? `G$ Claim is still available on ${getChainName(claimablesByChain[0].chainId)}`
+                      : status === 'already_claimed' && claimablesByChain.length > 1
+                        ? 'G$ Claim is still available on other chains'
+                        : 'Ready to claim'}
+                  </Text>
                   {displayAmount && <TokenAmount token="G$" amount={displayAmount} size="xl" />}
                 </>
               )}
@@ -534,44 +583,36 @@ function CitizenClaimInner({
 }
 
 // ---------------------------------------------------------------------------
-// Public component
+// Shell — rendered inside GoodWidgetProvider so the network pill reflects the
+// live wallet chain id from useWallet() (itself driven by chainIdOverride when
+// the integrator supplies one) rather than a static prop fixed at mount.
 // ---------------------------------------------------------------------------
-/**
- * CitizenClaimWidget — real SDK-backed GoodDollar UBI claim flow.
- *
- * Aligned to GoodWalletV2 claim behavior and the claim-widget-theme-demo visual baseline.
- *
- * Usage as a React component:
- *   <CitizenClaimWidget provider={eip1193Provider} />
- *
- * Also available as a Web Component via the `element` or `register` entry points.
- *
- * Provider-first runtime path:
- *   host provider → GoodWidgetProvider → citizen-claim adapter → citizen-sdk
- */
-export function CitizenClaimWidget({
-  provider,
-  environment = 'production',
-  chainId,
+interface CitizenClaimShellProps {
+  /** Used only until the live wallet chain id resolves, or while disconnected. */
+  fallbackChainId?: number
+  environment: CitizenClaimWidgetEnvironment
+  clientFactory?: CitizenClaimWidgetClientFactory
+  claimExecution?: CitizenClaimWidgetCustodialExecution
+  onClaimSuccess?: (detail: CitizenClaimWidgetSuccessDetail) => void
+  onClaimError?: (detail: CitizenClaimWidgetErrorDetail) => void
+  initialTab?: CitizenClaimTab
+}
+
+function CitizenClaimShell({
+  fallbackChainId,
+  environment,
   clientFactory,
   claimExecution,
-  themeOverrides,
-  config,
-  defaultTheme = 'dark',
   onClaimSuccess,
   onClaimError,
   initialTab,
-}: CitizenClaimWidgetProps) {
+}: CitizenClaimShellProps) {
+  const { chainId } = useWallet()
   // Initial tab only — not synced after mount, matching existing internal-state pattern.
   const [activeTab, setActiveTab] = useState<CitizenClaimTab>(initialTab ?? 'claim')
 
   return (
-    <GoodWidgetProvider
-      provider={provider as EIP1193Provider | undefined}
-      config={config}
-      themeOverrides={themeOverrides}
-      defaultTheme={defaultTheme}
-    >
+    <>
       <WidgetTabs
         tabs={[
           { id: 'claim', label: 'Claim' },
@@ -580,7 +621,7 @@ export function CitizenClaimWidget({
         ]}
         activeTab={activeTab}
         onTabChange={(tabId: string) => setActiveTab(tabId as CitizenClaimTab)}
-        chainId={chainId ?? 42220}
+        chainId={chainId ?? fallbackChainId ?? SupportedChains.CELO}
       />
       {activeTab === 'claim' ? (
         <>
@@ -600,6 +641,63 @@ export function CitizenClaimWidget({
           </YStack>
         </Card>
       )}
+    </>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Public component
+// ---------------------------------------------------------------------------
+/**
+ * CitizenClaimWidget — real SDK-backed GoodDollar UBI claim flow.
+ *
+ * Aligned to GoodWalletV2 claim behavior and the claim-widget-theme-demo visual baseline.
+ *
+ * Usage as a React component:
+ *   <CitizenClaimWidget provider={eip1193Provider} />
+ *
+ * Also available as a Web Component via the `element` or `register` entry points.
+ *
+ * Provider-first runtime path:
+ *   host provider → GoodWidgetProvider → citizen-claim adapter → citizen-sdk
+ */
+export function CitizenClaimWidget({
+  provider,
+  environment = 'production',
+  chainId,
+  clientFactory,
+  claimExecution,
+  themeOverrides,
+  config,
+  defaultTheme = 'dark',
+  onClaimSuccess,
+  onClaimError,
+  initialTab,
+  addressOverride,
+  chainIdOverride,
+  switchChainOverride,
+  availableChainIdsOverride,
+}: CitizenClaimWidgetProps) {
+  return (
+    <GoodWidgetProvider
+      provider={provider as EIP1193Provider | undefined}
+      config={config}
+      themeOverrides={themeOverrides}
+      defaultTheme={defaultTheme}
+      addressOverride={addressOverride}
+      chainIdOverride={chainIdOverride}
+      switchChainOverride={switchChainOverride}
+      availableChainIdsOverride={availableChainIdsOverride}
+    >
+      <CitizenClaimShell
+        fallbackChainId={chainId}
+        environment={environment}
+        clientFactory={clientFactory}
+        claimExecution={claimExecution}
+        onClaimSuccess={onClaimSuccess}
+        onClaimError={onClaimError}
+        initialTab={initialTab}
+      />
     </GoodWidgetProvider>
   )
 }