从 v2 迁移到 v3

// Widget v2
interface WidgetConfig {
  // ...
  toAddress?: string;
  // ...
}

// Widget v3
interface ToAddress {
  name?: string;
  address: string;
  chainType: ChainType;
  logoURI?: string;
}

interface WidgetConfig {
  // ...
  toAddress?: ToAddress;
  // ...
}

// Widget v2
type SplitSubvariantOptions = 'bridge' | 'swap';
interface WidgetConfig {
  // ...
  subvariantOptions?: SplitSubvariantOptions;
  // ...
}

// Widget v3
type SplitSubvariant = 'bridge' | 'swap';
type CustomSubvariant = 'checkout' | 'deposit';
interface SubvariantOptions {
  split?: SplitSubvariant;
  custom?: CustomSubvariant;
}

interface WidgetConfig {
  // ...
  subvariantOptions?: SubvariantOptions;
  // ...
}

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

// Widget v2
export const WidgetPage = () => {
  return (
    <LiFiWidget
      integrator="vite-example"
      config={{
        containerStyle: {
          border: `1px solid rgb(234, 234, 234)`,
          borderRadius: '16px',
        },
      }}
    />
  );
};

// Widget v3
export const WidgetPage = () => {
  return (
    <LiFiWidget
      integrator="example"
      config={{
        theme: {
          container: {
            border: `1px solid rgb(234, 234, 234)`,
            borderRadius: '16px',
          },
        },
      }}
    />
  );
};

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

import { LiFiWidget } from '@lifi/widget';
import { createClient } from 'viem';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';
import { injected } from 'wagmi/connectors';

const wagmiConfig = createConfig({
  // Make sure to provide the full list of chains
  // you would like to support in the Widget
  // and keep them in sync, so all functionality
  // like switching chains can work correctly.
  chains: [mainnet],
  connectors: [injected()],
  client({ chain }) {
    return createClient({ chain, transport: http() });
  },
});

export const WidgetPage = () => {
  return (
    <WagmiProvider config={wagmiConfig} reconnectOnMount>
      <LiFiWidget integrator="wagmi-example" />
    </WagmiProvider>
  );
};

interface WidgetWalletConfig {
  // Can be used to open the external wallet menu, 
  // if the user is not connected and dApp uses external wallet management
  onConnect(): void;
  // Provide your projectId and other WalletConnect properties 
  // when using Widget's internal wallet management
  walletConnect?: WalletConnectParameters;
  // Provide your app name and other Coinbase properties 
  // when using Widget's internal wallet management
  coinbase?: CoinbaseWalletParameters;
}