ethereum-optimism / ethereum-optimism/actions

Wallet Refactor: Add ConnectedWalletProvider (WalletConnect / injected / Coinbase Wallet)

Open
#401 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.