kybernetwork / kyberswap-widgets

KyberSwap Widgets

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

KyberSwap Widget

KyberSwap widget provides users of your website with a handy tool for swap tokens at the best rate.

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 @kyberswap/widgets

npm i --save @kyberswap/widgets

Documentation

• overview

Example Apps

• NextJS
• Vite React App

kyberswap-widgets's Issues

Importing a token that KyberSwap widget does not have data on, crashes the widget

Importing the above token, crashes the widget, and next time when selecting the token list, an error is thrown:
TypeError: Cannot read properties of undefined (reading 'toLowerCase') (It is trying to read p.name.toLowerCase)
The token which was imported: name: ShibbyInu, symbol: Shibby, address: 0x36c9cd90063e86844c06e318e59e1e178609baa2
I've checked that on kyberswap.com/swap the widget is found and imported successfuly:

Based on the above, I assume that the widget is using a different data source than the list in KyberSwap swap page. The currently set enabled dexes on the widget is: enableDexes="kyberswap-elastic,uniswapv3,uniswap"

For "fixing" this, I think it should not crash the widget if it does not have the data on it - as this renders the widget unusable for any other token for the user. Instead, handle it gracefully ("unknow token", not allow to add it or whatever is that you think is best), but allow user to still use the widget.

Other question, is this an enabledDexes problem (as it can find the token in the KyberSwap/spaw page, or is this just a different data source?

Even though the error trace is from minified js, maybe it will be helpful. attaching it:

{ "error": {}, "errorInfo": { "componentStack": "\n at X0 (webpack-internal:///(app-pages-browser)/./node_modules/@kyberswap/widgets/dist/widget.es.js:20698:18)\n at div\n at T (webpack-internal:///(app-pages-browser)/./node_modules/@kyberswap/widgets/dist/widget.es.js:1298:6)\n at div\n at T (webpack-internal:///(app-pages-browser)/./node_modules/@kyberswap/widgets/dist/widget.es.js:1298:6)\n at div\n at T (webpack-internal:///(app-pages-browser)/./node_modules/@kyberswap/widgets/dist/widget.es.js:1298:6)\n at J8 (webpack-internal:///(app-pages-browser)/./node_modules/@kyberswap/widgets/dist/widget.es.js:24570:19)\n at S3 (webpack-internal:///(app-pages-browser)/./node_modules/@kyberswap/widgets/dist/widget.es.js:20248:14)\n at E3 (webpack-internal:///(app-pages-browser)/./node_modules/@kyberswap/widgets/dist/widget.es.js:20161:13)\n at c1 (webpack-internal:///(app-pages-browser)/./node_modules/@kyberswap/widgets/dist/widget.es.js:1253:60)\n at t5 (webpack-internal:///(app-pages-browser)/./node_modules/@kyberswap/widgets/dist/widget.es.js:24941:13)\n at ErrorBoundary (webpack-internal:///(app-pages-browser)/./utils/ErrorBoundary.jsx:75:9)\n at div\n at KyberSwapWidget\n at Trade (webpack-internal:///(app-pages-browser)/./app/trade/page.js:26:79)\n at StaticGenerationSearchParamsBailoutProvider (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/static-generation-searchparams-bailout-provider.js:15:11)\n at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:241:11)\n at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)\n at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)\n at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)\n at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:338:11)\n at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)\n at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9)\n at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11)\n at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)\n at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:11)\n at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:241:11)\n at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)\n at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)\n at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)\n at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)\n at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:338:11)\n at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)\n at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9)\n at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11)\n at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)\n at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:11)\n at LoggedInGuard (webpack-internal:///(app-pages-browser)/./app/logged-in.guard.js:10:11)\n at div\n at div\n at div\n at ThemeProvider (webpack-internal:///(app-pages-browser)/./node_modules/react-bootstrap/esm/ThemeProvider.js:32:3)\n at AppStateProvider (webpack-internal:///(app-pages-browser)/./state/AppStateProvider.jsx:14:11)\n at Providers (webpack-internal:///(app-pages-browser)/./app/providers.js:14:11)\n at body\n at html\n at RootLayout (webpack-internal:///(app-pages-browser)/./app/layout.js:17:11)\n at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)\n at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)\n at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)\n at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)\n at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)\n at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)\n at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:294:11)\n at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:157:11)\n at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9)\n at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)\n at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:440:13)\n at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:126:11)\n at RSCComponent\n at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:142:11)" } }

Customizing the width

The documentation mentions the ability to customize the width, but the width property is not being accepted in the widget's props.

The width of the Wrapper component is also not being applied to the width property that may be passed in.

Balances not loading and preventing swap

For some reason wallet balance inside the widget is not loading and it is preventing the swap.

-Connecting injected wallet works and loads balance successfully.
-Widget is able to calculate best route and prices

But wallet balance in widget shows 0 and does not allow us to swap.

We see this in console

Failed to load resource: the server responded with a status of 400 ()
agregator-api.kyberswap.com/ethereum/api/v1/routes?

Do we need to change this api to a cronos api?
If so, where can this be changed or what could be this issue.
Thanks.

widget with tailwind

tailwindcss affects rem, and the widget's dialog layer height is calc(100%-2rem), which can cause style problems.