Skip to content

feat: Add wallet connect button to header/navbar - #31

Open
derekliutao-cmd wants to merge 2 commits into
coopfinance:mainfrom
derekliutao-cmd:feat/wallet-connect-button
Open

feat: Add wallet connect button to header/navbar#31
derekliutao-cmd wants to merge 2 commits into
coopfinance:mainfrom
derekliutao-cmd:feat/wallet-connect-button

Conversation

@derekliutao-cmd

Copy link
Copy Markdown
Contributor

Summary

Closes #8

Implements wallet connect button in the layout header with address display and disconnect.

Changes

src/components/ui/wallet-button.tsx (new file) — WalletButton component:

  • Disconnected: "Connect Wallet" button with Wallet icon, calls useWallet().connect()
  • Connecting: Spinner with "Connecting..." text
  • Connected: Shortened address (e.g. G2AB...K3XP) with animated green ping indicator
  • Click when connected → Radix DropdownMenu with:
    • Full address (copyable with copy icon → Check feedback)
    • "View on Stellar Explorer" link (opens testnet explorer)
    • "Disconnect" button (red, calls disconnect())
  • Error display when connection fails

src/app/layout.tsx — Updated to render WalletButton:

  • Right-aligned in a flex container above page content
  • Preserves existing layout structure and metadata

Acceptance Criteria Met

  • WalletButton component created in src/components/ui/wallet-button.tsx
  • All 3 states implemented (disconnected / connecting / connected)
  • Address dropdown with copy and explorer link
  • Disconnect clears wallet state
  • Uses existing useWallet() hook
  • Works with Freighter wallet on testnet

Uses existing dependencies (@radix-ui/react-dropdown-menu, lucide-react, clsx, tailwind-merge).

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.

[Frontend] Add wallet connect button to header/navbar with address display and disconnect

1 participant