lifinance/widget

LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.

LI.FI Widget

This repository contains LI.FI Widget and supporting libraries.

• LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.

• LI.FI Wallet Management is our library of hooks that can help you gain complete control over your app's wallet management.

Installation

LI.FI Widget

LI.FI Widget is available as an npm package.

npm:

npm install @lifi/widget

yarn:

yarn add @lifi/widget

LI.FI Wallet Management

LI.FI Wallet Management is available as an npm package.

npm:

npm install @lifi/wallet-management

yarn:

yarn add @lifi/wallet-management

Getting started with LI.FI Widget

Here is an example of a basic app using LI.FI Widget:

import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  containerStyle: {
    border: '1px solid rgb(234, 234, 234)',
    borderRadius: '16px',
  },
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};

Examples

Visit our playground to see how you can customize your LI.FI Widget experience.

Documentation

LI.FI Widget Documentation

Changelog

The changelog is regularly updated to reflect what's changed in each new release.

License

This project is licensed under the terms of the Apache-2.0.

widget's Issues

this.windowProvider?.on is not a function

I am getting this.windowProvider?.on is not a function error if we add on react project.

I think it's just dependency conflict especially on the wallet connection.
I am using rainbow kit provider along with react version 18.2.0.

Do you know why this happens?

How to update or completely destroy or re-initialize the widget context config ?!

We are currently working on integrating a Li-Fi widget into our Quantum wallet. However, we are encountering an issue that requires us to dynamically alter certain widget configurations, specifically the chains:{allow:[]} property. Once this property is initially set, there seems to be no way to modify it, even if the widget is completely unmounted.

To provide more context, in our wallet, if a user adds or removes a network, we need to update the chain IDs permitted in the widget. Unfortunately, I haven't found a method to accomplish this.

Furthermore, this issue affects other functionalities in our wallet. Each account is associated with different networks, and when we switch accounts, the chain IDs are altered but not reflected in your widget.

Here is my code:

const chainIds = useAccountChainIds();

const config:WidgetConfig = {
      integrator: "quantum",
      variant: "default",
      subvariant: "default",
      subvariantOptions: "swap",
      appearance: "light",
      hiddenUI: ["language", "appearance", "history"],
      languages: {
        default: "en",
      },
      chains: {
        allow: chainIds,
      },
      walletManagement: signer ? {
            signer,
            connect: async () => {
              return signer;
            },
            disconnect: async () => {},
          }
        : undefined,
    }
};

return <LiFiWidget integrator={widgetConfig.integrator} config={widgetConfig} />;

and here are the use case:

Account 2:

Switch to
Account 1:

The widget with the variant as a drawer sometime throw a react error

Try the widget's example for Nextjs with the drawer variant config. The drawer sometimes renders LI.FI Swap as button.lifiSwap and throw a react error "Error: Should have a queue. This is likely a bug in React. Please file an issue." when clicked

okx.svg is using an uncommon attribute xmlns:xodm

okx.svg is using an uncommon attribute xmlns:xodm which is causing an issue when this svg is being imported

error - ../../node_modules/@lifi/wallet-management/walletIcons/okx.svg
SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

SVG error on page reload

The LiFi widget works fine, but when reloading the page, there an SVG related error that comes up:

node_modules@lifi\wallet-management\cjs\walletIcons\alphawallet.svg:1
<svg width="100%" height="100%" viewBox="0 0 512 512" fill="none"...

SyntaxError: Unexpected token '<'

toAddress reset when selecting token

I believe the latest update caused this. We were on a previous version and had no issues until updating. It isn't just a visual issue either, tested a swap and it swapped to the same wallet and not the one set.

Disconnect wallet still show "Swap" instead "Connect Wallet" in button

Hi LIFI Team
I am trying to integrate widget with using my Wallet management in walletConfig.
When I disconnect wallet and set walletManagement.signer = undefined but button still show "Swap" instead "Connect Wallet".

I think has logic issue at WalletProvider
https://github.com/lifinance/widget/blob/dev/packages/widget/src/providers/WalletProvider/WalletProvider.tsx

// keep account information up to date
  useEffect(() => {
    const updateAccount = async () => {
      const account = await extractAccountFromSigner(
        walletManagement?.signer ?? signer, // I think logic here is issue
      );
      setAccount(account);
    };
    updateAccount();
  }, [signer, walletManagement]);

*signer is getting from lifiWalletManagement not from my walletManagement.signer so that why account.isActive = true => It show "Swap" instead "Connect wallet" in button

Could you help to check? thanks

vue3 walletManagement error

Vue3 configures walletManagement. When clicking 'swap', the chain selected by the wallet is different from the chain selected by the current exchange. Switch the chain first, and an error will be reported after the operation is successful.

walletManagement: {
connect: async () => {
connectWallet()
},
disconnect: disconnect,
switchChain: async chainId => {
await SwitchNetwork({
chainId: chainId
})
},
addToken: addToken,
addChain: addChain,
signer: Signer
}

Expandable on Vitejs react is not working

When I use path="/swap/*" for react-router-dom, the routes box will not show.

<Routes>
          <Route path="/swap/*" element={<Swap />} />
 </Routes>

and when change to

<Routes>
          <Route path="/*" element={<Swap />} />
 </Routes>

It'll be working

Is there any possible fix for that to be able to have LIFI Widget inside the subpages?

Enabled Bridges showing swap form

I have a problem, that widget started to show swap form when I'm navigating to Enabled Bridges setting:

What I can provide to you for more information?

Getting Css error

I am getting this Css error while integrating with nextJs/ReactJs

[dev:frontend] - error ../../node_modules/@lifi/widget/fonts/inter.css
[dev:frontend] Global CSS cannot be imported from within node_modules.
[dev:frontend] Read more: https://nextjs.org/docs/messages/css-npm
[dev:frontend] Location: ../../node_modules/@lifi/widget/index.js
[dev:frontend]
[dev:frontend] Import trace for requested module:
[dev:frontend] ../../node_modules/@lifi/widget/fonts/inter.css
[dev:frontend] ../../node_modules/@lifi/widget/index.js
[dev:frontend] ./src/components/Lifi/Widget.tsx

Hello, are there any examples used in nuxt3?

Hello, are there any examples used in nuxt3?

Global CSS cannot be imported from within node_modules.

Bug Reports

./node_modules/@lifi/widget/fonts/inter.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@lifi/widget/index.js

I recommend to not require styles in the core. It should be included by the package consumer.

More info https://github.com/zeit/next.js/blob/master/errors/css-npm.md

The Widget Provider is lowercasing the passed fromToken and toToken addresses internally

Hey everyone ,

The issue is that we use the events to store the user selected token internally but when we set it back to the widget the widget doesn't recognize the token balance, and when i look into the code it seems the WidgetProvider internally lowercasing the fromToken and toToken addresses but the useTokenAddressBalance hook looks for the token address in a case sensitive approach.

Also it seems that this issue is already fixed in your version 3 alpha but can we apply this fix also on the current version 2? just remove the toLowercase() from the WidgetProvider.

Thank and sorry for the headache :)

Web App crash in production

I have implemented this library in my React project. I used the latest version (v2.5.1) of this library.Instead of using typescript, I converted to JS,

but in that case, if I test the functionality on my local it working as expected.

but when I deployed the code to the production server the web app crashed.

I tried to resolve the error by downgrading the version (v1.32.8) of the library, And that worked for us.

v1.32.8 above this version, In all the versions I faced this error.

So can you please let me know, How can I get rid of this?

frontier.svg is using non-standard svg attribute, causing build errors

Many build tools are transforming svg attributes to camelCase for jsx to use. frontier.svg is using an uncommon attribute xmlns:xodm which is causing an issue when this svg is being imported

error - ../../node_modules/@lifi/wallet-management/walletIcons/frontier.svg
SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

is it possible to remove this attribute?

[Question] - How to properly configure with nextjs12?

Currently the example is on nextjs13, but I try to adapt with nextjs12 which not work as intended. Or is it not compatible with nextjs 12

And there is strange linter error, when install "@lifi/widget": "^1.32.8":

package.json:
"next": "12.1.0",
"next-transpile-modules": "^10.0.0",
"react": "17.0.2",
"swr": "^1.3.0"
"react-dom": "17.0.2",
"@lifi/sdk": "^1.7.2",
"@lifi/widget": "^1.32.8",

API is failing on testnet

Hi,

I have integrated the widget into my app. I wanted to test the functionality on the testnet. I have selected the goerli testnet as the source chain and the polygon testnet as the destination chain. I want to swap the ETH from goerli to USDC on the polygon testnet. I am getting errors from the below API.

API: https://staging.li.quest/v1/advanced/routes

Error Message: Access to XMLHttpRequest at 'https://staging.li.quest/v1/advanced/routes' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I understand this error is because APIs from localhost are being blocked. Is this intentional?
How do I fix this issue?

AwaitRenderStatus is not defined in production with nextjs

nextjs version: 13.1.6,
"react-dom": "^18.2.0",
"@types/node": "^18.7.11",
"@types/react": "^18.0.28",
"typescript": "5.1.6"

The widget crashes in my React v18 app - interpolating a keyframe declaration (iSKUCl) into an untagged string

I did test the widget in a clean React v18 project successfully, both with create-react-app and react-app-rewired. But I have a lot more dependencies in my production app (which is also React 18), and it seems it is related to styled-components, which I have installed.

Tried with both v5 and v6 of styled-components with no luck. This is the error from the chrome console, I don't know how to get past this. Downgrading to v3 will result in other incompatibilities with the app.

---

error.ts:32 Uncaught Error: It seems you are interpolating a keyframe declaration (iSKUCl) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css`` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css

react-dom.development.js:18687 The above error occurred in the component:
at ThemeProvider (bundle.js:170672:5)
at SDKProvider (bundle.js:170603:5)
at WidgetProvider (bundle.js:170927:5)
at RouteExecutionStoreProvider (bundle.js:171296:5)
at ChainOrderStoreProvider (bundle.js:171067:5)
at HeaderStoreProvider (bundle.js:171214:5)
at SplitSubvariantStoreProvider (bundle.js:171956:5)
at StoreProvider (bundle.js:171023:5)
at QueryClientProvider (bundle.js:462091:5)
at AppProvider (bundle.js:125935:5)

Further tracing from the console:
node_modules/@lifi/widget/providers/ThemeProvider/ThemeProvider.js

node_modules/@lifi/widget/config/theme.js

Icons doesnt render properly in chain select section

You can very well see the issue here where chain icons doesnt render .

Error produced in console log