StabilityNexus / StabilityNexus/Windmill-EVM-WebUI

feat(wallet): implement real EIP-1193 RPC network switching and connected account popover

Open
#53 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
6
Forks
14
Avg merge
12h 32m
Merged PRs (30d)
22

Description

Feature and its Use Cases

Problem / Current Behavior
Currently, selecting a network from the dropdown in components/layout/Navbar.tsx updates the local UI state (network), but does not dispatch EIP-1193 RPC network switch requests (wallet_switchEthereumChain) to the user's connected wallet provider (e.g. MetaMask, Rabby, Coinbase Wallet).

This creates a state desynchronization between the chain displayed in the UI and the actual network selected in the user's wallet, leading to transaction failures when creating or cancelling dynamic curve orders.

Proposed Feature / Solution
EIP-1193 RPC Chain Switching Integration

Connect the network switcher in Navbar.tsx directly to wallet_switchEthereumChain.
Add a fallback handler for error code 4902 (Unrecognized chain) using wallet_addEthereumChain to automatically register supported chains defined in lib/contractConfig.ts (Sepolia, Base, Polygon, BSC, ETC, Anvil Localhost).
Network Selector UI Enhancements

Upgrade the dropdown menu in Navbar.tsx with network indicators, status badges (Deployed vs. Pending), and active chain highlighting.
Provide feedback state while network switching is pending in the wallet.
Connected Account Menu / Popover

Add a popover drawer when clicking the connected address badge in the navbar containing:
1-click Copy Address to Clipboard with success toast/indicator.
Direct link to active Block Explorer (getExplorerAddressUrl).
Disconnect Wallet action.
Files Affected
context/WalletContext.tsx
components/layout/Navbar.tsx
lib/contractConfig.ts
Acceptance Criteria
Selecting a network in the navbar triggers a wallet prompt to switch chains via wallet_switchEthereumChain.
If the network is not present in the user's wallet, wallet_addEthereumChain is invoked with correct RPC and Explorer metadata.
Wallet account popover permits copying address and opening explorer links.
Build passes cleanly (npm run lint && npx tsc --noEmit && npm run build).

Additional Context

No response

Code of Conduct
  • I have joined the Discord server and will post updates there
  • I have searched existing issues to avoid duplicates

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading context/WalletContext.tsx, components/layout/Navbar.tsx, and lib/contractConfig.ts to trace the current network and account state. Implement the switch and add-chain flows plus the account popover, then verify the acceptance criteria and run npm run lint && npx tsc --noEmit && npm run build.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
blockchain, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.