Which tech stack and framework LI.FI Widget is compatible with?
List of environments, libraries and frameworks we’ve tested the widget with so far:
- React 18+ (Example)
- Vite (Example)
- Next.js (Compatibility with Next.js, Remix, Nuxt, etc., example)
- Remix (Example)
- Vue 3 (Example)
- Svelte (Example)
- Nuxt.js (Example)
- Gatsby (Example)
- RainbowKit (Example)
See the compatibility pages for more information. Check out our complete widget implementation examples in the widget repository or file an issue if you have any incompatibilities.
You can find answer to more answers like this in our main website with its super-helpful AI assistant
Widget Overview
How to integrate wallet management?
In order to configure your widget for seamless wallet management you can consult our documentation on https://docs.li.fi/integrate-li.fi-widget/wallet-management
Example demonstrating the utilisation of Widget wallet management can be found on https://github.com/lifinance/widget/tree/main/examples
The examples are also very helpful in implementing our Widget for your use case
You can find answer to more answers like this in our main website with its super-helpful AI assistant
Widget Overview
How can I get the transaction data using the LI.FI widget inside a react app?
The LI.FI Widget provides a useWidgetEvents hook that lets you subscribe to a series of widget events, facilitating the extraction of valuable information, including transaction data.
You can check our documentation onhttps://docs.li.fi/widget/widget-events
Explore the LI.FI Widget repository on GitHub at https://github.com/lifinance/widget
To see an example of implementing the useWidgetEvents hook, view the code reference in our widget repository: https://github.com/lifinance/widget/blob/main/examples/nextjs/components/WidgetEvents.tsx.
How can I update default slippage in widget?
To update the default slippage in the LI.FI Widget, use the slippage property in your widget configuration:
You can get more information about widget configuration from our main website and its super helpful AI
Example configuration:
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
const widgetConfig: WidgetConfig = {
slippage: 0.005, // Default slippage setting (0.005 = 0.5%)
};
export const WidgetPage = () => {
return (
<LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
);
};
How can I embed LiFi widget without changing routing?
LI.FI Widget is fully compatible with React Router v6 and uses it internally for page navigation.
Check our documentation on https://docs.li.fi/widget/react-router-compatibility
To see an latest example you can check our latest React Router v7 example:
https://github.com/lifinance/widget/tree/main/examples/react-router-7
You can find answer to more answers like this in our main website with its super-helpful AI assistant
Widget Overview
How can I test the widget while directly modifying it?
To link the widget run yarn link in the build folder packages/widget/build and every time you change something in the widget you need to run yarn build.
For specific development setup questions, consider filing an issue on the widget github repository
Is it possible to use the widget with react-native,flutter,dart etc?
Currently the widget is not natively compatible with react native , flutter- dart. You could try to add it as a webview.
You can check the list of environments, libraries and frameworks we’ve tested the widget with so far.
When modifying the wallet-management package, do I have to link that to the widget package and the link the widget package to the example package Im using to test?
We use the wallet-management package inside the widget so during the build wallet-management package should be covered too and it should be fine to just link the widget.
For specific development setup questions, consider filing an issue on the widget github repository