uniswap/web3-react

★ 5,690TypeScriptAudience · developerComplexity · 3/5Setup · moderate

Mindmap

mindmap
  root((web3-react))
    Wallet Connectors
      MetaMask
      WalletConnect
      Coinbase Wallet
      Gnosis Safe
    Core Package
      Shared Logic
      Connection State
    React Integration
      Component Model
      Shared Data
    Third Party
      Trust Wallet
      Core Wallet
      Venly
    Developer Tools
      TypeScript Support
      Example App

mindmap root((web3-react)) Wallet Connectors MetaMask WalletConnect Coinbase Wallet Gnosis Safe Core Package Shared Logic Connection State React Integration Component Model Shared Data Third Party Trust Wallet Core Wallet Venly Developer Tools TypeScript Support Example App

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add wallet login to a crypto app so users can connect MetaMask or Coinbase Wallet with minimal setup

USE CASE 2

Build an Ethereum dApp in React without writing custom wallet detection and connection logic from scratch

USE CASE 3

Support multiple wallet types in one app by installing only the connector packages you need

Tech stack

TypeScriptReactEthereumMetaMaskWalletConnectCoinbase Wallet

Getting it running

Difficulty · moderate Time to first run · 30min

Install the core package plus only the wallet connector packages you need. A hosted example app is linked in the README to preview before installing.

License not mentioned in the explanation.

In plain English

This is a developer toolkit from Uniswap, the well-known cryptocurrency exchange, that makes it easier to build apps that run on the Ethereum blockchain. It is labeled as beta, meaning it is functional but still evolving. The goal is to give developers a minimal, flexible foundation rather than a heavy, opinionated one. The core problem it solves is wallet connectivity. When someone visits a crypto app in their browser, they need to connect a wallet (like MetaMask or Coinbase Wallet) before they can do anything. Managing that connection, detecting which wallet a user has, and keeping the connection state in sync across the app is tedious to build from scratch. This library handles all of that. It is structured as a collection of small packages rather than one large bundle. There is a core package that provides the shared logic, and then separate connector packages for each wallet type: MetaMask, WalletConnect, Coinbase Wallet, Gnosis Safe, and others. Developers install only what they need. Third parties have also published their own connectors for Trust Wallet, Core Wallet, and Venly using the same pattern. The library is built in TypeScript and is designed for React-based web apps. It plugs into the React component model, which means wallet state is available throughout an app the same way any other shared data would be. A hosted example app is linked in the README for anyone who wants to see it working before installing anything. This is a technical library aimed at JavaScript developers building Ethereum applications, not an end-user product. Non-technical readers are unlikely to interact with it directly.

Copy-paste prompts

Prompt 1

I am using uniswap/web3-react in a React app. Show me how to set up the MetaMask connector and display the connected wallet address on screen.

Prompt 2

Using web3-react, how do I let users switch between MetaMask and WalletConnect in the same app, and how do I detect which one is currently active?

Prompt 3

I am building an Ethereum app with web3-react. How do I handle the case where a user disconnects their wallet or switches accounts in MetaMask?

Prompt 4

Show me how to install web3-react and add Coinbase Wallet support to an existing React project, step by step.

Prompt 5

Using uniswap/web3-react, how do I read the user's ETH balance once their wallet is connected and show it in a component?

Open on GitHub → Explain another repo

← uniswap on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.