ethereum-optimism / ethereum-optimism/actions
Wallet Refactor: Add ConnectedWalletProvider (WalletConnect / injected / Coinbase Wallet)
- Dominant language
- TypeScript
- Stars
- 32
- Forks
- 25
- Avg merge
- 10h 20m
- Merged PRs (30d)
- 16
Description
## Summary
Add `ConnectedWalletProvider` supporting the standard web3 connect-wallet UX (WalletConnect, injected providers, Coinbase Wallet SDK). React-only — connected wallets are a browser/client concept. Builds on the `WalletProvider` base shaped by earlier refactor sub-issues.
**Parent:** #396
**Brainstorm:** #395
**Blocks agent wallet work (#354):** No
## Context
Current embedded wallet providers (Privy/Turnkey/Dynamic) either hold keys themselves or synthesize a signer from a hosted service. Connected wallets are different: the user brings an EIP-1193 provider (MetaMask, Rabby, injected Coinbase Wallet, WalletConnect session) that signs remotely. They surface in viem as `JsonRpcAccount`, not `LocalAccount`.
The abstraction shape is already set up by the time this lands: `WalletProvider._createSigner` returns viem's `Account` union, and `ExternalWallet.signer` is typed to accept both.
## Scope
- Implement `ConnectedWalletProviderBase` in `wallet/providers/connected/ConnectedWalletProviderBase.ts`
- Implement `react/ConnectedWalletProvider` that accepts user-provided viem `WalletClient` or EIP-1193 `EthereumProvider`
- `_createSigner` returns a `JsonRpcAccount` derived from the connected provider
- Register as `type: 'connected'` in the react-side registry
- Docs + usage examples (MetaMask injected, WalletConnect session, Coinbase Wallet SDK)
## Considerations
- **Chain switching.** `JsonRpcAccount` tx submission uses the connected wallet's active chain; surface clear errors on chain mismatch and offer a chain-switch helper if appropriate.
- **Account stability.** Connected wallets can disconnect/reconnect; the `Account` instance must handle this gracefully or surface to the consumer.
- **Smart-wallet-in-EIP-1193.** Some connected wallets (Coinbase Smart Wallet via `window.ethereum`) are themselves smart accounts but handle 4337 internally — they flow through `ExternalWallet` because submission uses the wallet's own handlers, not our `BundlerClient`. Document this.
## Files affected
- `packages/sdk/src/wallet/providers/connected/ConnectedWalletProviderBase.ts` (new)
- `packages/sdk/src/wallet/providers/connected/react/ConnectedWalletProvider.ts` (new)
- React registry / type map
- `packages/sdk/src/wallet/react/index.ts` (export)
- Demo frontend — add an example of connected-wallet usage
- Tests
## Dependencies
- Depends on "Per-protocol restructure" (sibling sub-issue of #396) — sets the pattern this follows
- Depends on "Introduce WalletProvider base" — `Account` union must be accepted
## Acceptance criteria
- [ ] `ConnectedWalletProvider` (react) ships with tests
- [ ] EIP-1193 provider input supported; viem `WalletClient` input supported
- [ ] Chain switching handled (clear errors + helper)
- [ ] Documented in SDK README with usage examples
- [ ] Demo frontend includes a connected-wallet example
- [ ] `pnpm typecheck && pnpm lint && pnpm test` pass
Contributor guide
Research direction
Start by reading the WalletProvider base and the per-protocol restructure pattern, then inspect the listed connected-provider paths and the React registry/type map. Implement the base and React provider, exports, tests, README examples, and demo usage; done means the acceptance checks pass, including typecheck, lint, and test.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- blockchain, documentation, frontend, testing
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100