Skip to content

feat: add Stellar Freighter wallet connection (#386)#410

Open
OpadijoIdris wants to merge 1 commit into
amina69:mainfrom
OpadijoIdris:feat/issue-386-freighter-wallet
Open

feat: add Stellar Freighter wallet connection (#386)#410
OpadijoIdris wants to merge 1 commit into
amina69:mainfrom
OpadijoIdris:feat/issue-386-freighter-wallet

Conversation

@OpadijoIdris

Copy link
Copy Markdown

Summary

Implement Freighter wallet integration so users can connect, view their
address, and disconnect without leaving the app. All error paths are
handled gracefully with user-friendly messages.

Core additions

  • src/context/WalletContext.tsx — React Context provider wrapping
    @stellar/freighter-api. Handles isConnected(), requestAccess(), and
    getAddress() calls. Persists connected address in sessionStorage and
    restores it on mount. Exposes connect(), disconnect(), and
    shortenAddress() via useWallet() hook.

  • src/components/wallet/WalletButton.tsx — Navbar button with two states:

    • Disconnected: "Connect Wallet" button with loading spinner.
    • Connected: shortened address (GABC...XYZ1) with dropdown showing
      full address, copy-to-clipboard, Stellar Explorer link, and Disconnect
      option. Error popup auto-dismisses after 6 s; links to freighter.app
      when extension is absent.

Wiring

  • src/main.tsx — WalletProvider added inside ThemeProvider/ToastProvider.
  • src/components/layout/Navbar.tsx — WalletButton placed between
    ThemeToggle and NotificationCentreDropdown.

Error scenarios handled

  • Freighter extension not installed
  • User rejects the connection request
  • Unexpected network/runtime errors

Tests (18 tests, all passing)

  • src/context/__tests__/WalletContext.test.tsx — hook unit tests
  • src/components/wallet/__tests__/WalletButton.test.tsx — component tests

Test plan

  • User can connect their Freighter wallet
  • Connected wallet address is displayed in shortened form in the navbar
  • Full address visible in dropdown, with copy and explorer link
  • User can disconnect their wallet
  • Error shown when Freighter is not installed (with install link)
  • Error shown when user rejects the connection request
  • Wallet address persists on page refresh within the same session
  • All 18 automated tests pass

Closes #386

Implement Freighter wallet integration so users can connect, view their
address, and disconnect without leaving the app. All error paths are
handled gracefully with user-friendly messages.

Core additions:
- src/context/WalletContext.tsx: React Context provider wrapping
  @stellar/freighter-api. Handles isConnected(), requestAccess(), and
  getAddress() calls. Persists connected address in sessionStorage and
  restores it on mount. Exposes connect(), disconnect(), and
  shortenAddress() via useWallet() hook.

- src/components/wallet/WalletButton.tsx: Navbar button with two states:
  - Disconnected: "Connect Wallet" button with loading spinner.
  - Connected: shortened address (GABC...XYZ1) with dropdown showing
    full address, copy-to-clipboard, Stellar Explorer link, and
    Disconnect option.
  Error popup auto-dismisses after 6 s; links to freighter.app when
  extension is absent.

Wiring:
- src/main.tsx: WalletProvider added inside ThemeProvider/ToastProvider.
- src/components/layout/Navbar.tsx: WalletButton placed between
  ThemeToggle and NotificationCentreDropdown.

Error scenarios handled:
  - Freighter extension not installed
  - User rejects the connection request
  - Unexpected network/runtime errors

Tests (18 tests, all passing):
- src/context/__tests__/WalletContext.test.tsx — hook unit tests
- src/components/wallet/__tests__/WalletButton.test.tsx — component tests

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 29, 2026

Copy link
Copy Markdown

@OpadijoIdris is attempting to deploy a commit to the sheriffamina1-9497's projects Team on Vercel.

A member of the Team first needs to authorize it.

@amina69

amina69 commented Jun 29, 2026

Copy link
Copy Markdown
Owner

@OpadijoIdris , failed

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.

Feature: Add Stellar Freighter Wallet Connection

2 participants