Skip to content

feat(frontend): add network switch, re-check action, and bold badges to WalletMismatchBanner - #1687

Open
aazminu wants to merge 1 commit into
LabsCrypt:mainfrom
aazminu:feat/issue-1642-wallet-mismatch-banner-actions
Open

aazminu wants to merge 1 commit into
LabsCrypt:mainfrom
aazminu:feat/issue-1642-wallet-mismatch-banner-actions

Conversation

@aazminu

@aazminu aazminu commented Oct 19, 2026

Copy link
Copy Markdown

Description

Adds a "Switch App to Wallet Network" button, a "Re-check Connection" button, and clear bold network badges for both the wallet's reported network and the app's active network in WalletMismatchBanner (frontend/src/components/wallet/WalletMismatchBanner.tsx).

Type of Change

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 📚 Documentation update
  • 🔧 Refactoring (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test addition or update

Related Issues

Closes #1642
Fixes #1642
/claim #1642

Changes Made

  • Added and exported resolveSupportedNetworkId in frontend/src/components/wallet/WalletMismatchBanner.tsx to map wallet-reported network labels/passphrases to supported app NetworkId values (mainnet, testnet, futurenet, sandbox).
  • Rendered both the wallet's reported network name (data-testid="wallet-network-badge") and the app's active network name (data-testid="app-network-badge") in bold <strong> badge elements inside the role="alert" banner.
  • Added the "Switch App to Wallet Network" button that calls setNetworkId(targetNetworkId) when supported (and disables gracefully for unrecognized custom networks).
  • Added the "Re-check Connection" button that re-queries the connected wallet via connect(selectedWalletId ?? session.walletId) and dismisses the banner once the mismatch is resolved.
  • Added unit tests in frontend/src/components/wallet/WalletMismatchBanner.test.tsx.

Testing

Test Coverage

  • Unit tests added/updated
  • Integration tests added/updated
  • Manual testing performed

Test Steps

  1. Run npx vitest run src/components/wallet/WalletMismatchBanner.test.tsx in frontend/ (10/10 tests pass).
  2. Run npx tsc --noEmit in frontend/ (0 errors).
  3. Run npx eslint src/components/wallet/WalletMismatchBanner.tsx src/components/wallet/WalletMismatchBanner.test.tsx in frontend/ (0 errors, 0 warnings).

Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • I have checked for breaking changes and documented them if applicable

Additional Notes

Payout Details

  • USDT/USDC Receiving Wallet (EVM / ERC-20 / Polygon / Arbitrum / Optimism / Base / BSC): 0x9a51790aC01c54184bcFa067bC38f7F0E7C6F6B6

…to WalletMismatchBanner

Enhance WalletMismatchBanner with bold badges displaying both the wallet's
reported network and the app's active network, a "Switch App to Wallet Network"
button that updates the app's active network setting when supported, and a
"Re-check Connection" button that re-queries the connected wallet session.

Fixes LabsCrypt#1642

This branch has not been deployed

No deployments
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 "Reconnect Wallet" button and clear network labels to WalletMismatchBanner

1 participant