uniswap / widgets Goto Github PK
View Code? Open in Web Editor NEWHome Page: widgets-uniswap.vercel.app
License: GNU General Public License v3.0
Home Page: widgets-uniswap.vercel.app
License: GNU General Public License v3.0
Bug Description
Wrap action for ETH -> WETH perpetually shows "Fetching best price..."
Steps to Reproduce
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:
Bug Description
When you integrate the swap widget in a React app with Vite the widget won't work. There are 2 things happening:
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:
Steps to Reproduce
Dev mode
Preview mode
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.
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
I'm using @uniswap/widgets in reactjs and facing this issue - export 'ChainId' (imported as 'ChainId') was not found in '@uniswap/smart-order-router'
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
create-react-app my-app
package.json
is v18{
...
dependencies: {
"react": "^18.1.0",
"react-dom": "^18.1.0",
}
...
}
npm install --save @uniswap/widgets react-redux
Expected Behavior
The package should install without error and be usable per the docs description.
Bug Description
After installing @uniswap/widgets
and importing SwapWidget
, a DependencyNotFound
error for jotai-immer
throws.
Steps to Reproduce
@uniswap/widgets
per the readmeSwapWidget
Expected Behavior
After following the installation steps in the readme, SwapWidget
is usable without error.
jotai-immer
and qs
as dependencies to my project appears to resolve the issueBug 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
const MY_TOKEN_LIST = [
{
"name": "Dumplings",
"address": "0x1da74e8beceaa94d4dc6020e4f2ffe3c6ea7176d",
"symbol": "饺子",
"decimals": 18,
"chainId": 1,
"logoURI": "/logo.png"
}]
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
Bug Description
Grayish strip overlaps header in the list of tokens, which disallows to close the list.
Steps to Reproduce
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
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
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.
Bug Description
A clear and concise description of the bug.
Steps to Reproduce
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.)
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
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?
Bug Description
Dependency (modules) error when using widget
Steps to Reproduce
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
<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.
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.
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.
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
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
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
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:
<SwapWidget />
componentServer 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
Bug Description
Uniswap's dependency AJV attempts to inject a script inline requiring unsafe-eval
.
Steps to Reproduce
(Example, Next JS)
unsafe-eval
or adding specific Content Security Policies for script-src
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.
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.
Bug Description
Also seen here: Uniswap/web3-react#518
Steps to Reproduce
Expected Behavior
Additional Context
Add any other context about the problem here (screenshots, whether the bug only occurs only in certain mobile/desktop/browser environments, etc.)
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
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.
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
Expected Behavior
The action button should allow the user to approve Uniswap to move the tokens for a swap
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)
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
Functions bundling
stepExpected 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
.
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.
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
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.
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 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
defaultChainId
set to 1 (Mainnet)<SwapWidget defaultChainId={1} />
defaultChainId
propertyExpected Behavior
In this case the widget should display the chain switch behavior and prompt the user to switch to the network defined by defaultChainId
A Vue.js/Nuxt.js version of the Widgets is much needed and requested by devs.
We can support.
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)
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
@uniswap/widgets
version 2.25.0
or higherExpected Behavior
The app should not throw an error.
Temporary Solution
Downgrading to version 2.24.0
solves this issue.
Bug Description
A clear and concise description of the bug.
Steps to Reproduce
Expected Behavior
Additional Context
Add any other context about the problem here (screenshots, whether the bug only occurs only in certain mobile/desktop/browser environments, etc.)
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 onTxSuccess
callback (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
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.
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
Additional Context
Vite v4.2.1
node v18
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.)
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
defaultOutputAmount
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.
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
There are a few other changes that can be found in the interface PR: Uniswap/interface#4181
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
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 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
Expected Behavior
Using a custom list should not break loading default logo's
Bug Description
locale prop is ignored in the widget interface.
Steps to Reproduce
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
Bug Description
When a user sets the defaultChainId
property and loads the widget async it triggers a an infinite update loop:
Steps to Reproduce
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
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.
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.
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
SwapWidget
Additional Context
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
@uniswap/widgets: ^2.7.0
yarn create react-app my-app
.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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.