Skip to main content

Widget related FAQ to assist you

  • Updated

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:

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

 

 

Related to

Related articles