👛Wallet Management

Configure your widget for seamless wallet management

To manage wallet connection, switching chains, etc., the widget uses the @lifi/wallet-management package internally and provides UI to connect to a wallet.

If you already have your wallet management UI, you can utilize a set of callbacks provided for your convenience and help the widget communicate with your wallet management solution.

The example below shows how to preconfigure a basic wallet management.

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

export const WidgetPage = () => {
  const { account, connect, disconnect, switchChain } = useWallet();

  const widgetConfig = useMemo((): WidgetConfig => {
    return {
      walletManagement: {
        signer: account.signer,
        connect: async () => {
          const signer = await connect();
          return signer;
        },
        disconnect: async () => {
          await disconnect();
        },
        switchChain: async (chainId: number) => {
          await switchChain(chainId);
          if (account.signer) {
            return account.signer;
          } else {
            throw Error('No signer object is found after the chain switch.');
          }
        },
      },
    };
  }, [account.signer, connect, disconnect, switchChain]);

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

In the next major version, we will migrate to wagmi and simplify wallet management integration.

Check out our example of how to integrate your wagmi wallet management with the widget. Also, see the wagmi ethers adapters (react/core) documentation for wallet client -> signer conversion.

Some callbacks are optional, and we will use our implementation if you don't provide any.

import { Signer } from 'ethers';

export interface WidgetWalletManagement {
  // will be called when the user presses Connect Wallet button
  connect(): Promise<Signer>;
  // will be called to disconnect the wallet by the user or internally
  disconnect(): Promise<void>;
  // will be called to switch the current wallet chain by the user or internally
  switchChain?(chainId: number): Promise<Signer>;
  // will be called to add a token to a wallet if not present
  addToken?(token: Token, chainId: number): Promise<void>;
  // will be called to add a chain to a wallet if not present
  addChain?(chainId: number): Promise<boolean>;
  // we retrieve information about the user account from ethers Signer abstraction
  signer?: Signer;
}

You can find an example of how we use these callbacks to communicate with jumper.exchange external wallet management solution in the repository here.