1. Examples
  2. Uniswap Widget Example

Examples

Uniswap Widget Example

This example will walk you through how to integrate @web3-onboard with the Uniswap Widget! Add this web3-onboard enabled uniswap widget to your site to provide users with token swap capabilities quickly.

Step 1: Install

To start, we'll install the widgets library and the web3-onboard react library using npm or Yarn.

Step 2: Import + Configure

Import the libraries and any wallets you would like to use. For this example, we are going to use the injected wallets module. You can easily add more wallet support to your dapp via our other wallet modules. Additionally, we'll setup web3-onboard to support 2 chains: Ethereum mainnet and Polygon mainnet.

We'll create a file called web3-onboard.ts and then export the initialized web3-onboard instance and use this throughout our dapp.

web3-onboard.ts 
        import { init } from '@web3-onboard/react'
import injectedModule from '@web3-onboard/injected-wallets'

const INFURA_KEY = ''

const ethereumRopsten = {
  id: '0x3',
  token: 'rETH',
  label: 'Ethereum Ropsten',
  rpcUrl: `https://ropsten.infura.io/v3/${INFURA_KEY}`
}

const polygonMainnet = {
  id: '0x89',
  token: 'MATIC',
  label: 'Polygon',
  rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
}

const chains = [ethereumRopsten, polygonMainnet]

const wallets = [injectedModule()]

const appMetadata = {
  name: 'Uniswap Widget Example',
  icon: '<svg>My App Icon</svg>',
  description: 'Example showcasing how to integrate web3-onboard with uniswap widget.',
  recommendedInjectedWallets: [
    { name: 'MetaMask', url: 'https://metamask.io' },
    { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
  ]
}

// initialize and export Onboard
export default init({
  wallets,
  chains,
  appMetadata
})

Step 3: Add the react hooks

In our main App component we'll setup our Web3-Onboard react hooks. For this example we'll be using the useConnectWallet react hook. This will give us access to the currently connected wallets, as well as, methods for us to facilitate connecting and disconnecting a wallet.

App.tsx 
        import { useState, useEffect } from 'react'

import { ethers } from 'ethers'
import { useConnectWallet } from '@web3-onboard/react'

export default function App() {
  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()
  const [provider, setProvider] = useState<ethers.providers.Web3Provider>()

  // Once the wallet is connected the provider will be defined and we'll set the provider value
  // This provider will then be passed to the Uniswap component in the next step.
  useEffect(() => {
    if (wallet?.provider) {
      // if using ethers v6 this is:
      // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
      setProvider(new ethers.providers.Web3Provider(wallet.provider, 'any'))
    } else {
      // Reset the provider back to 'undefined' such that the
      // connect wallet option will reappear in the uniswap modal
      setProvider(undefined)
    }
  }, [wallet])

  // The connect wallet function which will be based to the Uniswap component in the next step.
  const connectWallet = () => {
    connect()
  }

  return (
    <main>
      <h1>Uniswap Swap Widget</h1>
      // Uniswap widget will go here
    </main>
  )
}

Step 4: Add the Uniswap widget

To begin, we'll import the SwapWidget along with the corresponding fonts. We'll define a few constants that will be passed to the swap widget:

  • The json rpc endpoint that will be used to provide trade quotes prior to the user connecting a wallet
  • The token list url used to provide a list of tokens for the user to select from
  • The Uniswap token address which will be used as the default selected token

To learn more about all of the SwapWidget props, check out the api reference.

We will take the connectWallet function that we previously defined and pass it to the onConnectWallet prop on the SwapWidget. This will allow us to initiate the web3-onboard connect wallet modal once the user clicks the on the connect wallet button within the SwapWidget. Finally, we'll also pass the provider to the SwapWidget such that once the provider is defined, the SwapWidget will be able to use the wallet's provider to facilitate the swap.

App.tsx 
        import { useState, useEffect } from 'react'

import { ethers } from 'ethers'
import { useConnectWallet } from '@web3-onboard/react'

import { SwapWidget } from '@uniswap/widgets'
import '@uniswap/widgets/fonts.css'

const JSON_RPC_URL = 'https://cloudflare-eth.com'
// The url of the default uniswap token list. This list will be passed to the Uniswap component
// and will appear by default in the token selector UI.
const TOKEN_LIST = 'https://gateway.ipfs.io/ipns/tokens.uniswap.org'
const UNI = '0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984'

export default function App() {
  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()
  const [provider, setProvider] = useState<ethers.providers.Web3Provider>()

  // Once the wallet is connected the provider will be defined and we'll set the provider value
  // This provider will then be passed to the Uniswap component below.
  useEffect(() => {
    if (wallet?.provider) {
      // if using ethers v6 this is:
      // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
      setProvider(new ethers.providers.Web3Provider(wallet.provider, 'any'))
    } else {
      // Reset the provider back to 'undefined' such that the
      // connect wallet option will reappear in the uniswap modal
      setProvider(undefined)
    }
  }, [wallet])

  // The connect wallet function which will be based to the Uniswap component below.
  const connectWallet = () => {
    connect()
  }

  return (
    <main>
      <h1>Uniswap Swap Widget</h1>
      <SwapWidget
        jsonRpcEndpoint={JSON_RPC_URL}
        // Specifies the set of tokens that appear by default in the token selector list.
        tokenList={TOKEN_LIST}
        // This is the provider that we receive from the user's connected wallet
        provider={provider}
        // When the Uniswap connect wallet button gets hit
        // the function gets called. We'll hook this up to
        // our connect wallet method from web3-onboard.
        onConnectWallet={connectWallet}
        // Address of the token to be selected by default in the
        // input field (e.g. USDC) for each network chain ID.
        defaultInputTokenAddress="NATIVE"
        // Default amount for the input field in this case 1 ETH
        defaultInputAmount="1"
        // Address of the token to be selected by default in the input field (e.g. USDC)
        // for each network chain ID.
        defaultOutputTokenAddress={UNI}
      />
    </main>
  )
}

Step 5: Wrap the context provider

Finally, we'll wrap our main App component with the web3-onboard context provider in order for us to access the web3-onboard instance throughout our app.

index.tsx 
        import React from 'react'
import ReactDOM from 'react-dom'
import { Web3OnboardProvider } from '@web3-onboard/react'

import './index.css'
import App from './App.tsx'

// Import the web3-onboard singleton
import web3Onboard from './web3-onboard'

ReactDOM.render(
  <React.StrictMode>
    <Web3OnboardProvider web3Onboard={web3Onboard}>
      <App />
    </Web3OnboardProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

See in action!

Live Example 🚀

Check out the live example on StackBlitz! StackBlitz will install and build the package in the below container

Previous <- Connect Wallet Example