uniswap / widgets

Uniswap Labs Widgets

The @uniswap/widgets package is an npm package of React components used to provide subsets of the Uniswap Protocol functionality in a small and configurable user interface element.

Uniswap Labs Swap Widget

The Swap Widget bundles the whole swapping experience into a single React component that developers can easily embed in their app with one line of code.

You can customize the theme (colors, fonts, border radius, and more) to match the style of your application. You can also configure your own default token list and optionally set a convenience fee on swaps executed through the widget on your site.

Installation

Install the widgets library via npm or yarn.

yarn add @uniswap/widgets

npm i --save @uniswap/widgets

Documentation

• overview
• api reference

Example Apps

Uniswap Labs maintains two demo apps in branches of the widgets-demo repo:

• NextJS
• Create React App

Others have also also released the widget in production to their userbase:

• OpenSea
• Friends With Benefits
• Oasis

Legal notice

Uniswap Labs encourages integrators to evaluate their own regulatory obligations when integrating this widget into their products, including, but not limited to, those related to economic or trade sanctions compliance.

widgets's Issues

Setting `defaultChainId` to triggers infinite update loop

Bug Description
When a user sets the defaultChainId property and loads the widget async it triggers a an infinite update loop:

Steps to Reproduce

1. Use the snippet below to set a chainId and load the widget async
2. Disconnect all wallets to the localhost site (if a wallet is connected this does not repro)
3. Load the app and observe the console that there is an error indicating a memory leak in ChainSwitch

import { SwapWidget, lightTheme } from '@uniswap/widgets';
import { useEffect } from 'react';
import { useState } from 'react';

const tokenList = [
  {
    "chainId": 10,
    "address": "0x4200000000000000000000000000000000000042",
    "decimals": 18,
    "name": "Optimism",
    "symbol": "OP"
  },
  {
    "chainId": 10,
    "address": "0x4200000000000000000000000000000000000006",
    "decimals": 18,
    "name": "Wrapped Eth",
    "logoURI": "https://static.alchemyapi.io/images/assets/8925.png",
    "symbol": "WETH"
  }
];

function App() {
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 5000)
  }, [isLoading]);

  if (isLoading) return <>Loading...</>

  return (
    <SwapWidget
      defaultChainId={10}
      tokenList={tokenList}
      onError={(e) => console.log(e)}
      theme={lightTheme}
      width="100%"
    />
  );
}

export default App;

Expected Behavior
Swap Widget loads and is set to the chain indicated by defaultChainId.

Additional Context
This does not repro before v2.8.0 seems like it may have been caused by this update

Showing error on CRA v4

Import statement:

import { SwapWidget, darkTheme } from "@uniswap/widgets/dist/index.js";

Using SwapWidget

<SwapWidget
  tokenList={TOKEN_LIST}
  width="100%"
  theme={uniswapWidgetTheme}
  defaultChainId={ARBITRUM}
  defaultOutputTokenAddress={{ [ARBITRUM]: GMX_ADDRESS }}
/>

Getting this error. It works okay with react-scripts v5 but showing this error with v4. I have tried different tokens and networks all showing the same issue.

Screen.Recording.2022-10-19.at.1.06.04.AM.mov

Provide the possibility of integration of Ethers Wallet with Uniswap Widget

Is your feature request related to a problem? Please describe.
The application I am working on keeps it's own custom Ethers wallet for each user for signing transactions etc. I wanted to use Uniswap widget for swap function but after a lot of trial and error, I concluded that custom wallet integration is most probably not supported by the widget.

Describe the solution you'd like
I want the widget to let the user connect to their custom wallets and allow the transactions through their wallet which will be connected to a provider e.g. InfuraProvider/JSON RPC Provider etc.

Describe alternatives you've considered
I haven't come across any alternative solution, except only using metamask/walletconnect for wallet functionality.

Popovers broken on small screens

Bug Description
Popovers are broken on small screens (see screenshots).

Steps to Reproduce

1. Click on the settings icon
2. Click on one of the question mark icons

Expected Behavior
Popovers should use the whole width

UI: Some elements hide behind overflow widget

Bug Description
As seen in below screen with the example of the tooltip. the overflow of the widget hides some elements to be properly shown
I don't have all examples but have seen on some other areas as well

Expected Behavior
Additional information like tooltips, or modals popping up should either fit in the widget or be shown over the borders of the widget

Additional Context

hideConnectionUI does not hide the "Connect Wallet" button

Bug Description
According to the docs:

hideConnectionUI: Hide the widget's built-in wallet connection UI, including the connected account chip & 'Connect wallet to swap' button.

Steps to Reproduce
Provider in this case is a Web3Provider from wagmi, which should handle the wallet interaction.

<SwapWidget
  provider={provider}
  hideConnectionUI
/>

Expected Behavior
There should be no connection button. I still have it when my wallet is not connected.

Custom token not found

Bug Description
When I trying to add the address of a custom token to the select token interface it always says "No result found"

Steps to Reproduce

Install nextjs 13, use the version 2.47.7 of the @uniswap/widgets library (currently the latest)
configure your swap widget with no ssr, setup your tokenList, provider and jsonRpcUrlMap.

Expected Behavior
To found the token and let the possibility to trade it

Additional Context
I tried with and without jsonRpcUrlMap, with custom tokenList or not, etc etc. Nothing work.
It's seems like it's not even trying to find the custom token.

See the result:

For the example, I've tried with a token that I've found on the internet (0xC6d54D2f624bc83815b49d9c2203b1330B841cA0)

Here is my code:

[High Security Risk] [email protected] has security risk with their deep dependencies xml2js

Is your feature request related to a problem? Please describe.
There is a High-security risk with the node-vibrant version 3.2.1-alpha library which they are using a library xml2js which has the risk reported in Snyk. https://security.snyk.io/vuln/SNYK-JS-XML2JS-5414874

I am installing uniswap widget and it was raised in this issue following this path

@uniswap/[email protected] › [email protected] › @vibrant/[email protected] › @jimp/[email protected] › @jimp/[email protected] › [email protected] › [email protected] › [email protected]

Describe the solution you'd like
There is a raised issue on the node-vibrant as well to upgrade xml2js. Vibrant-Colors/node-vibrant#141
We can upgrade to the latest node-vibrant when it is resolved on their side.

Cannot Approve Token For Swap

Bug Description
When trying to swap a token for the first time, I'm not given the option to approve it to be swapped

Steps to Reproduce

1. Connect wallet to widget
2. For the input token, select a token that
   a. The wallet holds
   b. The wallet has not approved uniswap to move (Allowance is 0)

Expected Behavior
The action button should allow the user to approve Uniswap to move the tokens for a swap

Additional Context
Present in Version 2.51.1

v2.25: Cannot find module @uniswap/conedison/dist/format

Bug Description
Whenever I try to start or build my app, the following error is raised:

Error: Cannot find module '/app/node_modules/@uniswap/conedison/dist/format'
    at createEsmNotFoundErr (node:internal/modules/cjs/loader:1016:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:1009:15)
    at resolveExports (node:internal/modules/cjs/loader:529:14)
    at Module._findPath (node:internal/modules/cjs/loader:569:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:981:27)
    at mod._resolveFilename (/app/node_modules/next/dist/build/webpack/require-hook.js:23:32)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/app/node_modules/@uniswap/widgets/dist/cjs/index-48446dbf.cjs:66:14) {
  code: 'MODULE_NOT_FOUND',
  path: '/app/node_modules/@uniswap/conedison/package.json'
}

Steps to Reproduce

1. Create a Next.js app
2. Install @uniswap/widgets version 2.25.0 or higher
3. Add the component to a page
4. Start or build the app

Expected Behavior
The app should not throw an error.

Temporary Solution
Downgrading to version 2.24.0 solves this issue.

Sepolia integration

We are implementing the Uniswap widget on our Development environment that runs on the Sepolia network. The Uniswap widget does not work with this network.

When we use the Sepolia network we are only given the option to switch back to Ethereum mainnet network.

Please see the following demo link for issue.

We would like the widget to work with the Sepolia network in the same fashion as it does with other testnet networks like Mumbai etc.

Is this a feature that will be implemented soon? If not is there any way to add ourselves manually?

Many thanks,
Simon

Bug occurred when it's built

Bug Description
I used the widget with Vite. In dev mode, there is no problem, but when I built the project, the following error is occurred.

Versions

Vite: 4.4.5
React: 18.2.0
TypeScript: 5.0.2
@uniswap/widgets: 2.53.1
...

Expected Behavior
A clear and concise description of what you expected to happen.

Additional Context
Add any other context about the problem here (screenshots, whether the bug only occurs only in certain mobile/desktop/browser environments, etc.)

defaultOutputAmount does not handle floats

Bug Description

TokenDefaults defaultOutputAmount does not handle float values and results in a runtime exception.

(also docs have incorrect property name defaultOutputTokenAmount)

Steps to Reproduce

1. Pass a decimal value to defaultOutputAmount
2. See runtime exception below:

Error: invalid BigNumber string (argument="value", value="0.83458456", code=INVALID_ARGUMENT, version=bignumber/5.6.0)

Expected Behavior
Should be able to pass any real number as the default amount or prop should receive a BigNumber to avoid messing with floats at all.

Widget crashes when an unsupported chain is selected

Bug Description
A clear and concise description of the bug.

Steps to Reproduce

1. Connect widget to Metamask wallet on Mainnet
2. Switch the chain of the Metamask wallet to an unsupported chain, eg BNB
3. App crashes

Expected Behavior

1. Connect the widget to Metamask wallet on Mainnet
2. Switch the chain of the Metamask wallet to an unsupported chain, eg BNB
3. App shows an error message/prompt

Additional Context
Add any other context about the problem here (screenshots, whether the bug only occurs only in certain mobile/desktop/browser environments, etc.)

Widget doesn't work with Vite

Bug Description
When you integrate the swap widget in a React app with Vite the widget won't work. There are 2 things happening:

1. When in developer mode the widget UI would appear on screen, and it would work well for swapping ETH to WETH as it doesn't seem to need to perform any conversion between the 2 of them, but if you select a different token like ETH and DAI the widget will try to fetch prices and will show an error on screen: "Error: Could not parse fraction"

Inspecting the console we can see this error log: "Uncaught Error: Could not parse fraction at Function.tryParseFraction (fraction.ts:38:11)"

If we follow the error we get to this line of code:

2. In preview mode the page won't load and the following error will appear on the console: "index-094e7416.js:766 Uncaught TypeError: n.BigInt is not a function"

Steps to Reproduce
Dev mode

1. Create a Vite app with react and install Uniswap widgets with their dependencies. Create a simple page with the Swap widget.
2. Run the app with yarn dev and try to swap ETH for DAI (or any token that'd need a conversion).
3. The widget will try to fetch prices and fail after a few seconds.

Preview mode

1. Create a Vite app with react and install Uniswap widgets with their dependencies. Create a simple page with the Swap widget.
2. Run the app with yarn preview
3. The app won't load and you could see the error in the console

Expected Behavior
The widget should work fine with Vite

Environment Information
Node v16.14.2
React: 18.2.0
Vite: 4.3.5
Uniswap/widgets: 2.51.2

Additional context
This doesn't happen with Nextjs as I created a small project to test it.

I hope this issue can be addressed so that the @uniswap/widgets library can be used more effectively in Vite-based projects. If there are any temporary workarounds or further actions I can take on my end to alleviate these issues, I would greatly appreciate any guidance.

Thank you for your time and your work on this library.

Could not resolve "qs"

Bug Description
I try to integrate my vite app with swap widget.
During the runtime I'm getting an error:

Could not resolve "qs". You can mark the path "qs" as external to exclude it from the bundle, which will remove this error.

Steps to Reproduce

1. yarn add @uniswap/widgets react-redux
2. yarn dev

Additional Context

Vite v4.2.1
node v18

Restricted Access to ethers EIP-1193 Bridge Provider in <SwapWidget/> Component

Issue Description

<SwapWidget/> component accepts wallet-connected JSON-RPC Providers as its provider prop. However, accessing these providers can be challenging, as they are typically tied to the window.ethereum object, which is not always accessible in certain environments. This can make it difficult to use alternative providers, such as the EIP-1193 Bridge provider provided by the @ethersproject/experimental library, which includes both provider and signer and may be a great tool to interact with swap widget, passing e.g. the JSON-RPC Provider and Wallet signer combined.

Unfortunately, the @uniswap/widgets library has specifically restricted access to the EIP-1193 Bridge provider in the component by using code checks.

Proposed Solution

To resolve this issue, it would be beneficial for the @uniswap/widgets library to remove the code checks that restrict access to the EIP-1193 Bridge provider in the component.

Alternatively, the library could add an additional prop to the <SwapWidget/>component that accepts the Signer object directly.

Motivation

Providing support for the EIP-1193 Bridge provider would be a valuable addition to the @uniswap/widgets library. This would make it easier for developers to use this component and would help to reduce the dependency on the window.ethereum object.

Moreover, this could help to resolve both issues #216 and #559 as well.

export 'ChainId' (imported as 'ChainId') was not found in '@uniswap/smart-order-router'

I'm using @uniswap/widgets in reactjs and facing this issue - export 'ChainId' (imported as 'ChainId') was not found in '@uniswap/smart-order-router'

Buffer polyfill leads to "window is not defined"

Bug Description
The Buffer polyfill added for the wallet connect feature uses the window object.
This leads to the following error in React: ReferenceError: window is not defined

Steps to Reproduce
Import the Uniswap widget in a React / Next.js app

Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

I tried to integrate the Uniswap Widget from the documentation and fix several bugs and errors and still no luck.
I was wondering why I should do the React-Redux. I followed the documentation of the widget. I already tried the Redux but nothing works. Please I need help.

Bug on Vite

Bug Description
Internal server error: Failed to find '~@fontsource/ibm-plex-mono/400.css'
in [
D:/Github/novawars/node_modules/@uniswap/widgets/dist
]

styled-components displayName does not work when re-exporting

Bug Description
styled-components/macro supports setting displayName, which aids debugging.
However, this does not work when the functions are re-exported, as in src/theme/styled.ts.

Expected Behavior
Instead, the styled-components default theme should be set by augmenting the global type, and styled-components/macro should be used directly. Note that this was not done initially because this code base used to be co-located with Uniswap/interface, which was already augmenting the global type.

Additional Context
This is a debug-only issue. It does not affect end users.

Non-latin character tokens

Bug Description
When you try to search for non-latin tokens the response we get is the following error

Error: Tokens failed validation: /tokens/0/name must match pattern "^[ \w.'+-%/À-ÖØ-öø-ÿ:&[]()]+$"

Steps to Reproduce

1. Create a Next.JS app with react and install Uniswap widgets with their dependencies. Create a simple page with the Swap widget.
2. Create a custom list with a non-latin name/symbol. Example:

const MY_TOKEN_LIST = [
{
"name": "Dumplings",
"address": "0x1da74e8beceaa94d4dc6020e4f2ffe3c6ea7176d",
"symbol": "饺子",
"decimals": 18,
"chainId": 1,
"logoURI": "/logo.png"
}]

3. Run the app and try to swap ETH/BNB... for the token above (or any token that doesn't use latin characters).

Expected Behavior
I expected to be able to swap for these tokens but I'm prompted with the error above.

Additional Context
Same token, different response:

Widget

Official App

Unhandled Runtime Error when switching chains

Bug Description
Switching chains does not work when passing a provider and produces the following error:

Unhandled Runtime Error
Error: The connectors prop passed to Web3ReactProvider must be referentially static. If connectors is changing, try providing a key prop to Web3ReactProvider that changes every time connectors changes.

Steps to Reproduce

1. Load the Uniswap widget in a React / Next.js app
2. Pass a provider prop to SwapWidget
3. Switch the chain in your wallet (e.g. from Goerli testnet to Ethereum mainnet or vice versa)

Additional Context

• Using a Next.js app and @uniswap/widgets v2.0.0
• Switching chains worked in v1.1.1

locale prop does not work

Bug Description
locale prop is ignored in the widget interface.

Steps to Reproduce

1. Import the latest V2 version.
2. Set locale prop to any from: https://github.com/Uniswap/widgets/blob/main/src/constants/locales.ts
3. Widget still shows default en-US locale.

Expected Behavior
Specified locale updates the widget interface with correct language.

Additional Context
Issue reproducible in the latest versions of API V2: https://docs.uniswap.org/sdk/swap-widget/reference/v2
Also, the same problem on the demo page: https://widgets-uniswap.vercel.app/?fixtureId=%7B%22path%22%3A%22src%2Fcosmos%2FSwap.fixture.tsx%22%2C%22name%22%3Anull%7D

Wrap action from ETH -> WETH perpetually shows "Fetching best price..."

Bug Description
Wrap action for ETH -> WETH perpetually shows "Fetching best price..."

Steps to Reproduce

1. Render widget
2. Select ETH -> WETH
3. Loader and "Fetching best price..." shown into perpetuity
   ...

Expected Behavior
No best price loader or value to be shown as it confuses the user, especially in the case where they lack the input amount in their wallet and thus they get a loader and less than obvious "balance too low" message:

Using custom token-lists breaks loading default logo's

Bug Description
encountered when connecting the widget to the celo network.
When just the default tokenlist is used, the native-token logo shows up.
By enabling a custom token list, suddenly its not loading this icon anymore.
when then trying to add the native-token as part of the custom list, it just shows up twice which is kind of confusing

Steps to Reproduce

1. Go to https://gooddapp.org
2. Connect a wallet to the celo network
3. go to swap-page
4. look at the token list

Expected Behavior
Using a custom list should not break loading default logo's

Additional Context
Prod (with custom-tokenlist enabled)

Local (custom token list + added native token here)

Could not find dependency: 'jotai-immer' when using SwapWidget

Bug Description
After installing @uniswap/widgets and importing SwapWidget, a DependencyNotFound error for jotai-immer throws.

Steps to Reproduce

Codesandbox here

1. install @uniswap/widgets per the readme
2. try to use SwapWidget
3. error occurs

Expected Behavior
After following the installation steps in the readme, SwapWidget is usable without error.

Additional Context

• noticed this at first on our Next.js app
• Tried in a clean react codesandbox to reproduce the issue and confirm it wasn't local to my machine
• manually adding jotai-immer and qs as dependencies to my project appears to resolve the issue

ConvenienceFee not working

Bug Description
Updating the convenienceFeeRecipient and convenienceFee properties in the Swap component doesn't work and it does not transfer the tokens.

Steps to Reproduce
update convenienceFeeRecipient and convenienceFee in Swap component to a valid address and a number between 0 and 100

Expected Behavior
with convenienceFee = 100 there should be a 1% transfer made to the convenienceFeeRecipient address. If the transfer is 100 tokens, 1 should be transferred to convenienceFeeRecipient.

Additional Context
This works well in the Widget but not in the interface

Uncaught Error: Invalid hook call.

Bug Description
I want to use uniswap widget but getting this error in the chrome dev console:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1476:1)
    at useContext (react.development.js:1484:1)
    at Fe (ThemeProvider.js:47:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)

I don't know why its happening . Just by importing the SwapWidget I am getting this error.
Steps to Reproduce

1. Install @uniswap/widgets: ^2.7.0
2. simply create a react app using yarn: yarn create react-app my-app.
3. Copy paste my code to see the issue:
   App.jsx:

import Navbar from './components/Navbar';
import UniSwapWidget from "./components/Uniswap-widget";
import './App.css';

function App() {
  return (
    <div className="App">
     <Navbar/>
     <UniSwapWidget/>
    </div>
  );
}

export default App;

Create a file in src folder and paste the below code

Uniswap-widget/index.js:

import React from "react";
import { SwapWidget } from '@uniswap/widgets'
import '@uniswap/widgets/fonts.css'

function UniSwapWidget() {
  return (
    <div className="Uniswap">
      <SwapWidget />
    </div>
  );
}

export default UniSwapWidget;

Expected Behavior
Should not throw error and able to swap the tokens.

Additional Context
versions:
yarn: 1.22.19
nodejs: v16.16.0
react: ^18.2.0

Widget require `hardhat` as a dependency

Bug Description
After integration of the widget on a Remix app. Our automatic deployment with netlify was not able to install dependencies on the server because hardhat was required as a dependency.

Steps to Reproduce

1. Install a widget on a Remix boilerplate app
2. Configure netlify for automatic deployments
3. View deployment log errors on the Functions bundling step

Expected Behavior
Not require hardhat as a dependency.

Additional Context
Netlify log output:

7:57:58 PM: ────────────────────────────────────────────────────────────────
7:57:58 PM:   2. Functions bundling                                         
7:57:58 PM: ────────────────────────────────────────────────────────────────
7:57:58 PM: ​
7:57:58 PM: Packaging Functions from .netlify/functions-internal directory:
7:57:58 PM:  - server.js
7:57:58 PM: ​
7:58:03 PM: ​
7:58:03 PM: ────────────────────────────────────────────────────────────────
7:58:03 PM:   Dependencies installation error                               
7:58:03 PM: ────────────────────────────────────────────────────────────────
7:58:03 PM: ​
7:58:03 PM:   Error message
7:58:03 PM:   A Netlify Function failed to require one of its dependencies.
7:58:03 PM:   Please make sure it is present in the site's top-level "package.json".
​
7:58:03 PM:   In file "/opt/build/repo/.netlify/functions-internal/server.js"
7:58:03 PM:   Cannot find module 'hardhat'
7:58:03 PM:   Require stack:
7:58:03 PM:   - /opt/buildhome/node-deps/node_modules/@netlify/zip-it-and-ship-it/dist/runtimes/node/bundlers/zisi/resolve.js

Note that if we include hardhat as a dev dependency the issue is fixed though we hit the server size limit with the following error: Request must be smaller than 69905067 bytes for the CreateFunction operation.

SwapWidget not accepting ethers providers

Bug Description
Ethers.js FallbackProvider not working with SwapWidget. The FallbackProvider is what is returned by ethers.getDefaultPovider(). When using an editor like VSCode, the editor tells you that the passed in provider is missing properties of the jsonRpcProvider. This is weird, because the documentation says I can also pass in any ethers provider or any EIP-1193 provider.

Steps to Reproduce

1. Import the SwapWidget on a page.
2. Create a provider using ethers.getDefaultProvider()
3. Pass the ethers provider into the provider props of the SwapWidget.
4. You will get an error saying that the SwapWidget doesn't accept this provider.

Expected Behavior
I expect the widget to accept any ethers provider, like the documentation says.

Additional Context
I am using version 2.8.1 of the "@uniswap/widgets package".
Version 5.7.0 of the "ethers" package.

Image of the error:

Widget Package Does Not Support React v18

Bug Description
The widget does not support the current version of React (v18). To get it to work you have to downgrade projects to React 17. When I try to run npm install --save @uniswap/widgets on a React v18 project I get the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from @uniswap/[email protected]
npm ERR! node_modules/@uniswap/widgets
npm ERR!   @uniswap/widgets@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Steps to Reproduce

1. Start a new react app project using Create React App v5
   create-react-app my-app
2. Note that the React version in package.json is v18

{
...
dependencies: {
       "react": "^18.1.0",
       "react-dom": "^18.1.0",
    }
    ...
}

3. Per the docs attempt to install Uniswap widget package:

npm install --save @uniswap/widgets react-redux

4. Note the error above is returned

Expected Behavior
The package should install without error and be usable per the docs description.

Widget disconnects wallet upon manual chain switch

Bug Description
Also seen here: Uniswap/web3-react#518

Steps to Reproduce

1. Connected MetaMask wallet to the widget (or interface) while on Mainnet
2. Switch chain using MetaMask wallet to Arbitrum or Optimism
3. Wallet disconnects

Expected Behavior

1. Connected MetaMask wallet to the widget (or interface) while on Mainnet
2. Switch chain using MetaMask wallet to Arbitrum or Optimism
3. Wallet stays connected

Additional Context
Add any other context about the problem here (screenshots, whether the bug only occurs only in certain mobile/desktop/browser environments, etc.)

Permit2 is missing transaction details

Is your feature request related to a problem? Please describe.
The uniswap widget allows enabling permit2
currently, the amount to approve is set to maxAllowance:

widgets/src/hooks/usePermitAllowance.ts

Line 77 in b981a05

amount: MaxAllowanceTransferAmount,

The whole idea for permit2 (afaik) is to make it not this easy for malicious contracts/tokens to spend all a user has in its holdings.
Only metamask has a built-in feature where a user can choose the allowance amount. this is not yet a standard in a lot of other wallets.

Describe the solution you'd like
Send the amount of the original transaction where the allowance is requested for along with the permit-details
so that a wallet can make a choice on how to handle the to-approve amount

and extended solution would be to add an extra step before the permit2 approval/sign flow is started, and ask directly from widget how much a user wishes to allow for its spending. Not rely on all the wallets out there to start implementing new sign flows, but tackle it a couple of steps before

Would be nice-to-have to also have token-symbol added to details

Describe alternatives you've considered
see above

Gray strip overlaps header in the token list

Bug Description
Grayish strip overlaps header in the list of tokens, which disallows to close the list.

Steps to Reproduce

1. Click on token select
2. List is opened with grayish strip in the header

Expected Behavior
I am not sure the purpose of the strip, but I suppose it should be placed on element of the active token.

Additional Context
Codesandbox

Screenshot

Bug: defaultChainId not being used

Bug Description
When the widget loads with defaultChainId that is not equal to the chain ID that the users wallet loaded with, the widget simply switches to what users wallet is set to. This makes the defaultChainId prop useless.

Steps to Reproduce

1. Instantiate the swap widget with defaultChainId set to 1 (Mainnet)

<SwapWidget defaultChainId={1} />

2. Open the app, and connect a wallet. Then switch the wallet to a supported, non-Mainnet network like Polygon
3. Refresh the app. Notice that the widget still loads with Polygon as the network, not respecting the defaultChainId property

Expected Behavior
In this case the widget should display the chain switch behavior and prompt the user to switch to the network defined by defaultChainId

Add typing for the "data" field returned by callback functions such as onTxSuccess

Is your feature request related to a problem? Please describe.
It is difficult to work wit the data field returned by callback functions of the widget such as the onTxSuccess prop.
In effect, this field as data type any making is not idea to work with Typescript.

(txHash: string, data: any) => void

Furthermore, I ran into the issue that I wanted to know the type of transaction that triggered the onTxSuccesscallback (SWAP, APPROVE or WRAP). Since there wasn't any Typescript type associated with the data field, I had to dig into the widget's code to be able to interpret the meaning of the type field. In this case, the type field was an enum called TransactionType, which is impossible to interpret without the type.

Describe the solution you'd like
I would like the data field to be fully typed for Typescript. Also, I would like every type used by that field to be exported so I can reference them in my app such as the TransactionType

Feature Request: onSuccess prop for callback function upon successful swap

Is your feature request related to a problem? Please describe.
The widget does not give any indication of when a swap is successful. It would be useful to have a callback function of some kind being triggered once a swap is successful for closing a modal for example.

Describe the solution you'd like
A prop added added to the widget called onSuccess which is triggered upon successful swap.

Describe alternatives you've considered
I tried listening to events. However, this is overly complicated and also does not work perfectly because it's impossible to know exactly if the transaction that triggered the event is the same from the widget.
https://discord.com/channels/597638925346930701/941447445844463676/973999807737786398

Additional context
A PR was opened attempting to add this feature:
#10

Unable to use Widget without unsafe-eval CSP

Bug Description
Uniswap's dependency AJV attempts to inject a script inline requiring unsafe-eval.

Steps to Reproduce
(Example, Next JS)

1. Disabling unsafe-eval or adding specific Content Security Policies for script-src
2. App will throw an error

Expected Behavior
The ability to use the widget in a more secure environment.

Additional Context
AJV's documentation recommends compiling using CLI or including it in the build.

Widget tries all RPC endpoints unnecessarily

Bug Description
When I open the Uniswap widget, it makes a bunch of requests to JSON RPC endpoints for different chains, instead of just the chain set by the wallet provider.

Steps to Reproduce

1. Open the widget
2. Check the network tab

Expected Behavior
The widget only uses RPC endpoints when it needs to access that chain

Additional Context
Digging into it some more, this happens because the getBestUrl function tries the default endpoints with multiple options:
https://github.com/Uniswap/web3-react/blob/main/packages/walletconnect/src/utils.ts.

Maybe it'd be best to only call getBestUrl when a given chain is needed?

Uniswap Widgets components for Vue.js/Nuxt.js

A Vue.js/Nuxt.js version of the Widgets is much needed and requested by devs.
We can support.

NextJS "Window Not Defined" Error

Bug Description
NextJS sometimes does server side rendering which does not have access to a 'window' object causing the app to crash before even loading. Seems to be stemming from here

Steps to Reproduce
Since it's hard to control when NextJS renders server side, this is somewhat intermittent but generally:

1. Create a new NextJS project
2. Import and insert the <SwapWidget /> component
3. Reload the page
4. Note that the page does not even load and the app crashes with the error:
   Server Error ReferenceError: window is not defined. This error happened while generating the page. Any console logs will be displayed in the terminal window.

Expected Behavior
The page should load with the swap widget

Additional Context
https://github.com/Uniswap/widgets/blob/ebe37e65ac98b50a04fcb1d9c9e8df820a851046/src/polyfills.ts

Webpack complains about dynamic imports

Bug Description
A clear and concise description of the bug.

Steps to Reproduce

1. Buils project using webpack

WARNING in ../../node_modules/@uniswap/widgets/dist/cjs/index-4f48ae8b.cjs 21221:117-155
Critical dependency: the request of a dependency is an expression
    at CommonJsRequireContextDependency.getWarnings (~/node_modules/webpack/lib/dependencies/ContextDependency.js:104:18)
    at Compilation.reportDependencyErrorsAndWarnings (~/node_modules/webpack/lib/Compilation.js:3140:24)
    at ~/node_modules/webpack/lib/Compilation.js:2737:28
    at eval (eval at create (~/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:29:1)
    at ~/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:380:10
    at ~/node_modules/neo-async/async.js:2830:7
    at Object.each (~/node_modules/neo-async/async.js:2850:39)
    at ~/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:356:17
    at ~/node_modules/neo-async/async.js:2830:7
    at Object.each (~/node_modules/neo-async/async.js:2850:39)

The error is caused by the dynamic import in this line
https://github.com/Uniswap/widgets/blob/main/src/i18n.tsx#L82

According to the doc, this error can be eliminated by adding a special comment

const catalog = await import(/* webpackPrefetch: true */ `./locales/${locale}.js`)

https://webpack.js.org/guides/code-splitting/#dynamic-imports

Expected Behavior
No warnings at compile time

Additional Context
Add any other context about the problem here (screenshots, whether the bug only occurs only in certain mobile/desktop/browser environments, etc.)

Error in build file when using Vite- "r.BigInt is not defined"

Bug Description
Uniswap widget works fine locally. After building, r.BigInt is not defined error appears.
Steps to Reproduce
use vite, install widget, verify it works locally, build file, preview build

Update widgets with new changes from interface to support mixed routes

Suport for mixed routes is now live on production routing-api. It is fully backward compatible, so no immediate action needed. if you pass in the protocols query param [Protocol.V2, Protocol.V3, Protocol.MIXED], you'll be able to get mixed routes returned back from the auto router.

widgets/src/state/routing/slice.ts

Line 13 in 133ed89

const protocols: Protocol[] = [Protocol.V2, Protocol.V3]

There are a few other changes that can be found in the interface PR: Uniswap/interface#4181

React widget not working on BNB network

Bug Description:

The Uniswap React widget is not working when the network is set to Binance Smart Chain. It appears to only function properly when the network is set to Ethereum. When attempting to use the widget on Binance Smart Chain, the user balance does not show and when clicking swap i get an error that "could not estimate gas"

Steps to Reproduce:

Open the Uniswap React widget.
Set the network to Binance Smart Chain.
Attempt to use the widget to swap tokens.
Observe the error message

Expected Behavior:

The Uniswap React widget should be able to function properly on any network that it supports, including Binance Smart Chain. Users should be able to swap tokens.

Actual Behavior:

The widget is only functioning properly on the Ethereum network. When attempting to use it on Binance Smart Chain, an error message is displayed and the functionality is not available.

Workaround:

Currently, the only known workaround is to switch the network to Ethereum in order to use the Uniswap React widget. However, this may not be a viable solution for users who wish to use the Binance Smart Chain network specifically.

Reproducibility:

The issue can be reproduced consistently by following the steps outlined above.

Additional Information:

This bug was tested on the latest version of the Uniswap React widget , using the latest version of the Metamask browser extension on Google Chrome.

Сan't integrate widget

Bug Description
Dependency (modules) error when using widget

Steps to Reproduce

1. Create next project using [email protected]
2. Install latest @uniswap/widgets and react-redux
3. Integrate SwapWiget to page
4. An error has occurred

Expected Behavior
The widget must be on the page, the project must be compiled successfully

Additional Context

Problem with module \node_modules@uniswap\conedison\dist\provider\signing

Refactor exported `connections` to be within React lifecycle

Right now connections is statically exported and consumed by React components, but is itself modified within the React lifecycle.

Suggested fix would be to bring connections within React lifecycle and not statically export it.

UI: (desktop/chrome) its not possible to scroll through token list

Bug Description
Tried on desktop (chrome)
there will never be shown more then 3 tokens.
Looks to me like 'overflow: clip' should not be used or a better check should be done for which browsers support it

Expected Behavior
Token list should be scrollable

Additional Context
(local, 4 tokens, should be scrollable)

same behavior shown on: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow (text is cut off when using clip)