[UX] Surface wallet "not activated" state so users know to sync

[0xdevcollins]

When the backend indicates the user has a wallet (hasWalletFromSession) but wallet details haven't loaded yet (e.g. wallet not activated or API failed), the app only shows a generic "Loading wallet…" spinner in the wallet drawer/sheet. Users don't know that:

• Their wallet may need to be activated (e.g. first-time setup).
• They may need to sync their wallet to use it.
• Something went wrong and they should retry or contact support.

Current behavior:

• WalletTrigger: if hasWalletFromSession and no walletAddress, a wallet icon opens the drawer with "Loading wallet…" only.
• WalletSheet and FamilyWalletDrawer: same state renders only a spinner and "Loading wallet…" with no explanation or primary action (e.g. "Sync wallet" or "Activate wallet").

Suggested improvements:

• When hasWalletFromSession is true and walletAddress is null (and not still in initial loading):
  • Show a clear message such as "Wallet not ready" or "Sync your wallet to activate it."
  • Provide a primary "Sync wallet" (or "Activate") button that calls syncWallet() and refreshes.
• Optionally show a short explanation: "Your wallet is created but not yet active on-chain. Syncing will activate it."
• Consider a small persistent indicator (e.g. in header or near wallet entry) when the session has a wallet but details aren't loaded, so users don't have to open the drawer to discover the issue.
• Banner + docs: Use the shadcn Banner to show "Wallet not activated" (or "Wallet not ready") with a "View docs" link to docs.boundlessfi.xyz for how to activate a wallet. See docs/ux-ui-github-issues.md ("Recommended implementation: Banner + docs links").

Relevant files:

• components/wallet/WalletTrigger.tsx
• components/wallet/WalletSheet.tsx (lines ~141–153)
• components/wallet/FamilyWalletDrawer.tsx (lines ~361–383)
• components/providers/wallet-provider.tsx

[linear]

BOU-136

[coderabbitai]

🔗 Related PRs

#377 - Feat/abstract wallet [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!