Skip to content

feat(connect): add Freighter missing-extension empty state with install CTA and re-check action (Closes #405) - #490

Open
stayzappy wants to merge 1 commit into
TevaLabs:mainfrom
stayzappy:feature/issue-405-freighter-missing-empty-state
Open

feat(connect): add Freighter missing-extension empty state with install CTA and re-check action (Closes #405)#490
stayzappy wants to merge 1 commit into
TevaLabs:mainfrom
stayzappy:feature/issue-405-freighter-missing-empty-state

Conversation

@stayzappy

Copy link
Copy Markdown

Objective & Scope

Closes #405

This Pull Request implements a dedicated, accessible, and responsive empty state component (FreighterMissingCard) when the Freighter browser extension is missing or not installed, fulfilling all scope requirements and acceptance criteria for issue #405.


Key Changes Made

  1. Dedicated Empty State Component (src/components/FreighterMissingCard.tsx):

    • Renders a visually distinct glass card empty state whenever Freighter is missing (errorCode === 'FREIGHTER_UNAVAILABLE' or !isAvailable).
    • Distinct from ACCESS_DENIED (where user rejects access inside an installed extension).
    • Features prominent primary CTA button: Install Freighter Extension (https://www.freighter.app/ with target="_blank" rel="noopener noreferrer").
    • Features secondary action button: Re-check Connection (clears error state and re-verifies wallet connection).
    • Includes direct setup documentation link (https://docs.freighter.app/).
  2. Integration into WalletConnect & Connect Page:

    • Integrated <FreighterMissingCard /> inside src/components/WalletConnect.tsx and src/pages/Connect.tsx.
    • Ensures no false-positives occur when Freighter is installed and unlocked.
  3. Automated Test Coverage (src/components/FreighterMissingCard.test.tsx):

    • Primary flow: Renders empty state card with install CTA & docs link when FREIGHTER_UNAVAILABLE occurs.
    • User action: Clicking "Re-check Connection" clears error and triggers re-check/re-connect flow.
    • No false positive: Renders nothing when wallet is connected or when ACCESS_DENIED occurs.
    • Verified 100% test pass across FreighterMissingCard.test.tsx, WalletConnect.test.tsx, and Connect.test.tsx (49 / 49 tests passed).

Acceptance Criteria Checklist

  • Clear empty state when extension missing.
  • Does not false-positive when Freighter present.

@vercel

vercel Bot commented Aug 26, 2026

Copy link
Copy Markdown

@stayzappy is attempting to deploy a commit to the josephchimebuka's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Freighter missing-extension empty state on Connect

1 participant