Skip to content

feat: add wallet connect button with address dropdown (Closes #8) - #21

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

feat: add wallet connect button with address dropdown (Closes #8)#21
therealsaitama0 wants to merge 2 commits into
coopfinance:mainfrom
therealsaitama0:feat/wallet-connect-button

Conversation

@therealsaitama0

@therealsaitama0 therealsaitama0 commented Jun 29, 2026

Copy link
Copy Markdown

Summary

Adds a wallet connect button to the top-right header as specified in issue #8.

Changes

  • src/components/ui/wallet-button.tsx — New WalletButton component with three states:
    • Disconnected: Shows "Connect Wallet" button → calls useWallet().connect()
    • Connecting: Shows spinner with "Connecting..."
    • Connected: Shows shortened address (e.g. G2AB...K3XP) with green dot indicator
  • Connected dropdown (on click): Full address with copy icon (with checkmark feedback), "View on Stellar Explorer" link, and "Disconnect" button (red, clears wallet state)
  • src/app/layout.tsx — Added top bar with WalletButton aligned to the right, offset by sidebar width

Acceptance Criteria

  • 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 — no reinvention
  • Works with Freighter wallet on testnet

Payment

ETHEREUM ADDRESS: 0x5e1040927a1E28D740f92De27a3d493b81682D88

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.

2 participants