1️⃣Install Widget

Easy installation to go multi-chain

Install the widget via npm or yarn.

npm install --save @lifi/widget

or

yarn add @lifi/widget

Compatibility

List of environments we've tested the widget with so far:

• React 18

• Vue 3 (Example)

• Svelte (Example)

• Create React App 4/5 (Example)

• Vite (Example)

• Next.js (Next.js Compatibility, example)

• Gatsby (Example)

See the compatibility pages for more information.

Check out our complete examples in the widget repository or file an issue if you have any incompatibilities.

Basic example

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

The integrator option is required and should contain the identifier of the integrator of the widget. Usually, it's your dApp/company name.

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} />
  );
};