Skip to content

enhance(settings): integrate wallet management into profile account page - #898

Merged
johdanike merged 2 commits into
SwiftChainn:mainfrom
Deemexlyon:enhance/profile-wallet-management-tab
Oct 5, 2026
Merged

johdanike merged 2 commits into
SwiftChainn:mainfrom
Deemexlyon:enhance/profile-wallet-management-tab

Conversation

@Deemexlyon

Copy link
Copy Markdown
Contributor

Closes #874

Summary

Adds a Wallet Management tab to the profile settings page (app/(dashboard)/settings/profile/page.tsx) alongside the existing Profile Information and Security tabs. The tab lists the Web3 wallets linked to the authenticated account and lets the user set an active wallet or unlink one, with all data coming from the backend API.

While wiring this up I found that services/walletService.ts had been replaced wholesale by a balance-only refactor (commit 57c6ca4), which silently dropped connect, disconnect, getBalance, getTransactionStatus, getPendingMultiSigOperations and signMultiSigOperation. useWallet, useTxTracker and useMultiSigApprovals still call these methods, so 19 tests in services/__tests__/walletService.transaction.test.ts were failing. This PR restores those methods (keeping the newer balance caching intact) so the wallet context this feature syncs with actually works.

Changes

File Change
types/wallet.types.ts Added ConnectedWallet and ConnectedWalletsResponse types
services/walletService.ts Restored regressed session/transaction/multi-sig methods; added getConnectedWallets() and disconnectWallet()
hooks/useWalletManagement.ts New hook: fetch, error/loading, refetch, disconnectWallet, setActiveWallet, and wallet-context sync
components/wallet/ConnectedWallets.tsx New presentational panel (loading / error / empty / list states)
app/(dashboard)/settings/profile/page.tsx Added the Wallet Management tab and rendered ConnectedWallets
Tests (3 new files) Service, hook and component unit tests

Architecture

Strict layered flow, no component talks to a service or the network directly:

profile page / ConnectedWallets (Component)
        -> useWalletManagement (Hook)
        -> walletService (Service)
        -> GET /api/wallet/wallets, DELETE /api/wallet/wallets/:id (backend API)

Data source

All wallet data is retrieved from the backend API through walletService — there are no inline mock objects in the component or hook. The panel renders loading, error (with retry) and empty states so it behaves correctly against a real backend.

Wallet-context sync

useWalletManagement reads useWalletStore and:

  • matches the persisted address to a backend wallet to expose activeWallet;
  • clears a stale persisted session whose address is no longer linked on the backend;
  • writes the selected wallet back into the shared context via setActiveWallet;
  • clears the context when the active wallet is unlinked.

Testing

npx jest services/__tests__/walletService.connectedWallets.test.ts \
         hooks/__tests__/useWalletManagement.test.ts \
         components/wallet/__tests__/ConnectedWallets.test.tsx
# 3 suites passed, 27 tests passed

npx jest services/__tests__/walletService.transaction.test.ts
# 19 passed (previously 19 failed)

npx tsc --noEmit   # no new type errors
npx eslint <changed files>   # 0 errors

Two suites unrelated to this change (hooks/__tests__/useWallet.test.ts, components/wallet/__tests__/BalanceWarning.test.tsx) fail identically on the base branch and are not touched here.

Acceptance criteria

  • Wallet tab appears in the tab navigation
  • ConnectedWallets component renders within the tab panel
  • Existing Profile Information and Security tabs remain functional
  • min-h-[420px] reserved on the panel prevents layout shift when switching tabs
  • Strict layered architecture (Component -> Hook -> Service)
  • Data retrieved from the backend API, no inline mocks
  • Screenshot of the implementation (to be attached to this PR)
  • Closes #874 with a work summary in the PR body

Notes for reviewers

  • The new endpoint contract is GET /api/wallet/wallets -> { success, message?, data: ConnectedWallet[] } and DELETE /api/wallet/wallets/:id -> { success, message }.
  • Please attach a screenshot of the Wallet Management tab before merge.

Add a Wallet Management tab to the profile settings page so users can review
the Web3 wallets linked to their account. The new tab renders the
ConnectedWallets panel, fed by the useWalletManagement hook and walletService
(Component -> Hook -> Service), and keeps the shared wallet context
(useWalletStore) in sync when a wallet is selected or unlinked.

Also restore the wallet session, transaction-status and multi-sig methods on
walletService that a previous balance-only refactor had dropped, which left
useWallet, useTxTracker and useMultiSigApprovals calling missing methods and
broke the wallet service transaction tests.

Closes SwiftChainn#874

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>
@drips-wave

drips-wave Bot commented Sep 29, 2026

Copy link
Copy Markdown

@Deemexlyon Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@johdanike

Copy link
Copy Markdown
Contributor

Please resolve conflict. Thanks for contributing to Swiftchainn

@Deemexlyon

Copy link
Copy Markdown
Contributor Author

@johdanike Please approve workflow

@johdanike
johdanike merged commit 4f1dc87 into SwiftChainn:main Oct 5, 2026
@johdanike

Copy link
Copy Markdown
Contributor

Thanks for contributing to Swiftchainn man. Nice work

@johdanike johdanike left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay now

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.

Enhancement: Integrate Wallet Management into Profile Account Page

2 participants