Select Widget Variants

LI.FI Widget comes in three variants - compact, wide, and drawer. Variants allow customization of the exterior of the widget, like the side panel for quotes or drawer. There are also several subvariants - default, split, and custom. They help to customize the interior look and feel as well as functionality.

Variants

Variants provide a way to optimize the presentational style of the Widget for the space available in your application.

To use one of the variants, set the variant option in the configuration.

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

const widgetConfig: WidgetConfig = {
  // It can be either compact, wide, or drawer
  variant: 'wide',
};

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

Compact variant

The compact variant is a great choice when you have limited space on a page or are dealing with smaller screen sizes. It has everything you need to bridge and swap in a compact view and allows you to integrate the widget wherever you want on your web app's page.

Wide variant

The wide variant allows you to take advantage of bigger page and screen sizes where you might have more available screen real estate and provides a more comprehensive overview of available routes, displayed in a sidebar with slick animation.

Drawer variant

The drawer variant allows you to show or hide the Widget based on user interaction. It can fit nicely on the page's side and has the same layout as the compact variant.

How do we control the drawer?

The drawer doesn't have a pre-built button to open and close it. To control the drawer you need to create and assign a ref to the widget.

Here is an example of controlling the drawer with ref:

export const WidgetPage = () => {
  const drawerRef = useRef<WidgetDrawer>(null);

  const toggleWidget = () => {
    drawerRef.current?.toggleDrawer();
  };

  return (
    <div>
      <button onClick={toggleWidget}>Open LI.FI Widget</button>
      <LiFiWidget
        ref={drawerRef}
        config={{
          variant: 'drawer',
        }}
        integrator="drawer-example"
      />
    </div>
  );
}

Subvariants

Subvariants allow you to present different workflows for your users.

The default subvariant has the same functionality to bridge and swap in a compact view.

The split subvariant separates mental models and has slightly different views for bridging and swapping experiences with neat tabs on the main page.

The custom subvariant offers a totally new look, allowing you to show custom components like the NFT one and giving you a toolkit to build complete new flows, including NFT Checkout and Deposit.

To use one of the subvariants, set the subvariant option in the configuration.

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

const widgetConfig: WidgetConfig = {
  // It can be either compact, wide, or drawer
  variant: 'wide',
  // It can be either default, split, or custom
  subvariant: 'split',
  // Optional, can be used to configure default split subvariant tabs state
  subvariantOptions: {
    split: 'bridge'
  }
};

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