@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/providers/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,43 @@
+import type { PaletteMode } from '@mui/material';
+import { useMediaQuery } from '@mui/material';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { useEffect, useMemo, useState } from 'react';
+import { createTheme } from '../../config/theme';
+import { useAppearance } from '../../stores';
+import { useWidgetConfig } from '../WidgetProvider';
+
+export const ThemeProvider: React.FC<React.PropsWithChildren<{}>> = ({
+  children,
+}) => {
+  const { appearance: colorSchemeMode, theme: themeConfig } = useWidgetConfig();
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [appearance, setAppearance] = useAppearance();
+  const [mode, setMode] = useState<PaletteMode>(
+    colorSchemeMode ?? appearance === 'auto'
+      ? prefersDarkMode
+        ? 'dark'
+        : 'light'
+      : appearance,
+  );
+
+  useEffect(() => {
+    if (appearance === 'auto') {
+      setMode(prefersDarkMode ? 'dark' : 'light');
+    } else {
+      setMode(appearance);
+    }
+  }, [appearance, prefersDarkMode]);
+
+  useEffect(() => {
+    if (colorSchemeMode) {
+      setAppearance(colorSchemeMode);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [colorSchemeMode]);
+
+  const theme = useMemo(
+    () => createTheme(mode, themeConfig),
+    [mode, themeConfig],
+  );
+  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
+};

package/src/providers/WalletProvider/EVMProvider.tsx

@@ -0,0 +1,119 @@
+import {
+  alpha,
+  binance,
+  bitget,
+  bitpie,
+  block,
+  brave,
+  coinbase,
+  dcent,
+  exodus,
+  frame,
+  frontier,
+  gate,
+  hyperpay,
+  imtoken,
+  liquality,
+  okx,
+  oneinch,
+  ownbit,
+  rabby,
+  safepal,
+  status,
+  taho,
+  tokenary,
+  tokenpocket,
+  trust,
+  walletConnect,
+  xdefi,
+} from '@lifi/wallet-management';
+import { useContext, useMemo, type FC, type PropsWithChildren } from 'react';
+import type { Chain } from 'viem';
+import { createClient } from 'viem';
+import { WagmiContext, WagmiProvider, createConfig, http } from 'wagmi';
+import { mainnet } from 'wagmi/chains';
+import { useAvailableChains } from '../../hooks';
+import { formatChain } from './utils';
+
+const connectors = [
+  walletConnect,
+  coinbase,
+  bitget,
+  gate,
+  exodus,
+  taho,
+  binance,
+  frontier,
+  okx,
+  trust,
+  status,
+  alpha,
+  block,
+  bitpie,
+  brave,
+  dcent,
+  frame,
+  hyperpay,
+  imtoken,
+  liquality,
+  ownbit,
+  tokenpocket,
+  xdefi,
+  oneinch,
+  tokenary,
+  safepal,
+  rabby,
+];
+
+export const EVMProvider: FC<PropsWithChildren> = ({ children }) => {
+  const inWagmiContext = useInWagmiContext();
+  return inWagmiContext ? (
+    children
+  ) : (
+    <EVMBaseProvider>{children}</EVMBaseProvider>
+  );
+};
+
+export const EVMBaseProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { chains } = useAvailableChains();
+
+  const wagmiConfig = useMemo(() => {
+    const _chains: [Chain, ...Chain[]] = chains?.length
+      ? (chains.map(formatChain) as [Chain, ...Chain[]])
+      : [mainnet];
+    // Add ENS contracts
+    const _mainnet = _chains.find((chain) => chain.id === mainnet.id);
+    if (_mainnet) {
+      _mainnet.contracts = mainnet.contracts;
+    }
+    const wagmiConfig = createConfig({
+      chains: _chains,
+      connectors: connectors,
+      client({ chain }) {
+        return createClient({ chain, transport: http() });
+      },
+      // transports: _chains.reduce(
+      //   (transports, chain) => {
+      //     transports[chain.id] = http();
+      //     return transports;
+      //   },
+      //   {} as Record<number, Transport>,
+      // ),
+    });
+    return wagmiConfig;
+  }, [chains]);
+
+  return (
+    <WagmiProvider
+      config={wagmiConfig}
+      reconnectOnMount={Boolean(chains?.length)}
+    >
+      {children}
+    </WagmiProvider>
+  );
+};
+
+function useInWagmiContext(): boolean {
+  const context = useContext(WagmiContext);
+  return Boolean(context);
+}

package/src/providers/WalletProvider/SDKProviders.tsx

@@ -0,0 +1,31 @@
+import { EVM, Solana, config } from '@lifi/sdk';
+import type { WalletAdapter } from '@solana/wallet-adapter-base';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { getWalletClient, switchChain } from '@wagmi/core';
+import { useEffect } from 'react';
+import { useConfig } from 'wagmi';
+
+export const SDKProviders = () => {
+  const { wallet } = useWallet();
+  const wagmiConfig = useConfig();
+
+  useEffect(() => {
+    // Configure SDK Providers
+    config.setProviders([
+      EVM({
+        getWalletClient: () => getWalletClient(wagmiConfig),
+        switchChain: async (chainId: number) => {
+          await switchChain(wagmiConfig, { chainId });
+          return getWalletClient(wagmiConfig);
+        },
+      }),
+      Solana({
+        async getWalletAdapter() {
+          return wallet?.adapter as WalletAdapter;
+        },
+      }),
+    ]);
+  }, [wagmiConfig, wallet?.adapter]);
+
+  return null;
+};

package/src/providers/WalletProvider/SolanaProvider.tsx

@@ -0,0 +1,48 @@
+import type { Adapter } from '@solana/wallet-adapter-base';
+import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
+import {
+  ConnectionContext,
+  ConnectionProvider,
+  WalletProvider,
+} from '@solana/wallet-adapter-react';
+import { clusterApiUrl } from '@solana/web3.js';
+import { useContext, type FC, type PropsWithChildren } from 'react';
+
+const endpoint = clusterApiUrl(WalletAdapterNetwork.Mainnet);
+/**
+ * Wallets that implement either of these standards will be available automatically.
+ *
+ *   - Solana Mobile Stack Mobile Wallet Adapter Protocol
+ *     (https://github.com/solana-mobile/mobile-wallet-adapter)
+ *   - Solana Wallet Standard
+ *     (https://github.com/solana-labs/wallet-standard)
+ *
+ * If you wish to support a wallet that supports neither of those standards,
+ * instantiate its legacy wallet adapter here. Common legacy adapters can be found
+ * in the npm package `@solana/wallet-adapter-wallets`.
+ */
+const wallets: Adapter[] = [];
+
+export const SolanaProvider: FC<PropsWithChildren> = ({ children }) => {
+  const inSolanaContext = useInSolanaContext();
+  return inSolanaContext ? (
+    children
+  ) : (
+    <SolanaBaseProvider>{children}</SolanaBaseProvider>
+  );
+};
+
+export const SolanaBaseProvider: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <ConnectionProvider endpoint={endpoint}>
+      <WalletProvider wallets={wallets} autoConnect>
+        {children}
+      </WalletProvider>
+    </ConnectionProvider>
+  );
+};
+
+function useInSolanaContext(): boolean {
+  const context = useContext(ConnectionContext);
+  return Boolean(context?.connection);
+}

package/src/providers/WalletProvider/WalletProvider.tsx

@@ -0,0 +1,15 @@
+import { type FC, type PropsWithChildren } from 'react';
+import { EVMProvider } from './EVMProvider';
+import { SDKProviders } from './SDKProviders';
+import { SolanaProvider } from './SolanaProvider';
+
+export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <SolanaProvider>
+      <EVMProvider>
+        <SDKProviders />
+        {children}
+      </EVMProvider>
+    </SolanaProvider>
+  );
+};

package/src/providers/WalletProvider/index.ts

@@ -0,0 +1,2 @@
+export * from './WalletProvider';
+export * from './utils';

package/src/providers/WalletProvider/utils.ts

@@ -0,0 +1,37 @@
+import type { ExtendedChain } from '@lifi/sdk';
+import type { Address, Chain } from 'viem';
+
+type ChainBlockExplorer = {
+  name: string;
+  url: string;
+};
+
+type ChainBlockExplorers = {
+  [key: string]: ChainBlockExplorer;
+  default: ChainBlockExplorer;
+};
+
+export const formatChain = (chain: ExtendedChain): Chain => ({
+  ...chain,
+  ...chain.metamask,
+  blockExplorers: chain.metamask.blockExplorerUrls.reduce(
+    (blockExplorers, blockExplorer, index) => {
+      blockExplorers[index === 0 ? 'default' : `${index}`] = {
+        name: blockExplorer,
+        url: blockExplorer,
+      };
+      return blockExplorers;
+    },
+    {} as ChainBlockExplorers,
+  ),
+  name: chain.metamask.chainName,
+  rpcUrls: {
+    default: { http: chain.metamask.rpcUrls },
+    public: { http: chain.metamask.rpcUrls },
+  },
+  contracts: {
+    ...(chain.multicallAddress
+      ? { multicall3: { address: chain.multicallAddress as Address } }
+      : undefined),
+  },
+});

package/src/providers/WidgetProvider/WidgetProvider.tsx

@@ -0,0 +1,108 @@
+import { config, createConfig, type SDKOptions } from '@lifi/sdk';
+import { createContext, useContext, useId, useMemo } from 'react';
+import { version } from '../../config/version';
+import { setDefaultSettings } from '../../stores';
+import { formatInputAmount } from '../../utils';
+import type { WidgetContextProps, WidgetProviderProps } from './types';
+
+const initialContext: WidgetContextProps = {
+  elementId: '',
+  integrator: '',
+};
+
+const WidgetContext = createContext<WidgetContextProps>(initialContext);
+
+export const useWidgetConfig = (): WidgetContextProps =>
+  useContext(WidgetContext);
+
+let sdkInitialized = false;
+
+export const WidgetProvider: React.FC<
+  React.PropsWithChildren<WidgetProviderProps>
+> = ({ children, config: widgetConfig }) => {
+  const elementId = useId();
+
+  if (!widgetConfig?.integrator) {
+    throw Error('Required property "integrator" is missing.');
+  }
+
+  const value = useMemo((): WidgetContextProps => {
+    try {
+      // Get search params from URL
+      const searchParams = Object.fromEntries(
+        new URLSearchParams(window?.location.search),
+      );
+      // Prevent using fromToken/toToken params if chain is not selected
+      ['from', 'to'].forEach((key) => {
+        if (searchParams[`${key}Token`] && !searchParams[`${key}Chain`]) {
+          delete searchParams[`${key}Token`];
+        }
+      });
+      // Create widget configuration object
+      const value = {
+        ...widgetConfig,
+        fromChain:
+          (searchParams.fromChain &&
+            !isNaN(parseInt(searchParams.fromChain, 10))) ||
+          typeof widgetConfig.fromChain === 'number'
+            ? parseInt(searchParams.fromChain, 10) || widgetConfig.fromChain
+            : undefined,
+        toChain:
+          (searchParams.toChain &&
+            !isNaN(parseInt(searchParams.toChain, 10))) ||
+          typeof widgetConfig.toChain === 'number'
+            ? parseInt(searchParams.toChain, 10) || widgetConfig.toChain
+            : undefined,
+        fromToken: searchParams.fromToken || widgetConfig.fromToken,
+        toToken: searchParams.toToken || widgetConfig.toToken,
+        fromAmount:
+          typeof searchParams.fromAmount === 'string' &&
+          !isNaN(parseFloat(searchParams.fromAmount))
+            ? formatInputAmount(searchParams.fromAmount)
+            : widgetConfig.fromAmount,
+        toAddress: searchParams.toAddress || widgetConfig.toAddress,
+        integrator: widgetConfig.integrator,
+        elementId,
+      } as WidgetContextProps;
+
+      // Set default settings for widget settings store
+      setDefaultSettings(value);
+
+      // Configure SDK
+      const _config: SDKOptions = {
+        ...widgetConfig.sdkConfig,
+        apiKey: widgetConfig.apiKey,
+        integrator: widgetConfig.integrator ?? window?.location.hostname,
+        routeOptions: {
+          fee: widgetConfig.fee,
+          referrer: widgetConfig.referrer,
+          order: widgetConfig.routePriority,
+          slippage: widgetConfig.slippage,
+          ...widgetConfig.sdkConfig?.routeOptions,
+        },
+        disableVersionCheck: true,
+        widgetVersion: version,
+        preloadChains: false,
+      };
+      if (!sdkInitialized) {
+        createConfig(_config);
+        sdkInitialized = true;
+      } else {
+        config.set(_config);
+      }
+
+      return value;
+    } catch (e) {
+      console.warn(e);
+      return {
+        ...widgetConfig,
+        elementId,
+        integrator: widgetConfig.integrator,
+      };
+    }
+  }, [elementId, widgetConfig]);
+
+  return (
+    <WidgetContext.Provider value={value}>{children}</WidgetContext.Provider>
+  );
+};

package/src/providers/WidgetProvider/types.ts

@@ -0,0 +1,11 @@
+import type { WidgetConfig } from '../../types';
+
+export type WidgetContextProps = WidgetConfig & {
+  fromChain?: number;
+  toChain?: number;
+  elementId: string;
+};
+
+export interface WidgetProviderProps {
+  config?: WidgetConfig;
+}

package/src/providers/WidgetProvider/utils.ts

@@ -0,0 +1,12 @@
+export const isItemAllowed = <T>(
+  itemId: T,
+  items?: {
+    allow?: T[];
+    deny?: T[];
+  },
+) => {
+  if (items?.allow?.length) {
+    return items.allow.includes(itemId);
+  }
+  return !items?.deny?.includes(itemId);
+};

package/src/providers/index.ts

@@ -0,0 +1,5 @@
+export * from './FormProvider';
+export * from './I18nProvider';
+export * from './ThemeProvider';
+export * from './WalletProvider';
+export * from './WidgetProvider';

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/stores/StoreProvider.tsx

@@ -0,0 +1,29 @@
+import type { PropsWithChildren } from 'react';
+import type { WidgetConfigProps } from '../types';
+import { ChainOrderStoreProvider } from './chains';
+import { HeaderStoreProvider } from './header';
+import { RouteExecutionStoreProvider } from './routes';
+import { SplitSubvariantStoreProvider } from './settings';
+
+export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
+  children,
+  config,
+}) => {
+  return (
+    <SplitSubvariantStoreProvider
+      state={
+        config.subvariant === 'split'
+          ? config.subvariantOptions || 'swap'
+          : undefined
+      }
+    >
+      <HeaderStoreProvider namePrefix={config?.keyPrefix}>
+        <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
+          <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
+            {children}
+          </RouteExecutionStoreProvider>
+        </ChainOrderStoreProvider>
+      </HeaderStoreProvider>
+    </SplitSubvariantStoreProvider>
+  );
+};

package/src/stores/chains/ChainOrderStore.tsx

@@ -0,0 +1,79 @@
+import { createContext, useContext, useEffect, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+import type { StoreApi } from 'zustand';
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
+import { useChains } from '../../hooks';
+import { FormKey } from '../../providers';
+import type { PersistStoreProviderProps } from '../types';
+import { createChainOrderStore } from './createChainOrderStore';
+import type { ChainOrderState } from './types';
+
+export type ChainOrderStore = UseBoundStoreWithEqualityFn<
+  StoreApi<ChainOrderState>
+>;
+
+export const ChainOrderStoreContext = createContext<ChainOrderStore | null>(
+  null,
+);
+
+export function ChainOrderStoreProvider({
+  children,
+  ...props
+}: PersistStoreProviderProps) {
+  const storeRef = useRef<ChainOrderStore>();
+  const { chains: filteredChains } = useChains();
+  const { setValue, getValues } = useFormContext();
+
+  if (!storeRef.current) {
+    storeRef.current = createChainOrderStore(props);
+  }
+
+  useEffect(() => {
+    if (filteredChains) {
+      const chainOrder = storeRef.current
+        ?.getState()
+        .initializeChains(filteredChains.map((chain) => chain.id));
+      if (chainOrder) {
+        const [fromChainValue, toChainValue] = getValues([
+          FormKey.FromChain,
+          FormKey.ToChain,
+        ]);
+        if (!fromChainValue) {
+          setValue(FormKey.FromChain, chainOrder[0]);
+        }
+        if (!toChainValue) {
+          setValue(FormKey.ToChain, chainOrder[0]);
+        }
+      }
+    }
+  }, [filteredChains, getValues, setValue]);
+
+  return (
+    <ChainOrderStoreContext.Provider value={storeRef.current}>
+      {children}
+    </ChainOrderStoreContext.Provider>
+  );
+}
+
+export function useChainOrderStore<T>(
+  selector: (state: ChainOrderState) => T,
+  equalityFn?: (left: T, right: T) => boolean,
+): T {
+  const useStore = useContext(ChainOrderStoreContext);
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`,
+    );
+  }
+  return useStore(selector, equalityFn);
+}
+
+export function useChainOrderStoreContext() {
+  const useStore = useContext(ChainOrderStoreContext);
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`,
+    );
+  }
+  return useStore;
+}

package/src/stores/chains/createChainOrderStore.ts

@@ -0,0 +1,67 @@
+import type { StateCreator } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
+import type { PersistStoreProps } from '../types';
+import type { ChainOrderState } from './types';
+
+export const maxChainToOrder = 9;
+
+export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
+  createWithEqualityFn<ChainOrderState>(
+    persist(
+      (set, get) => ({
+        chainOrder: [],
+        availableChains: [],
+        initializeChains: (chainIds: number[]) => {
+          set((state: ChainOrderState) => {
+            const chainOrder = state.chainOrder.filter((chainId) =>
+              chainIds.includes(chainId),
+            );
+            const chainsToAdd = chainIds.filter(
+              (chainId) => !chainOrder.includes(chainId),
+            );
+            if (chainOrder.length === maxChainToOrder || !chainsToAdd.length) {
+              return {
+                availableChains: chainIds,
+                chainOrder,
+              };
+            }
+            const chainsToAddLength = maxChainToOrder - chainOrder.length;
+            for (let index = 0; index < chainsToAddLength; index++) {
+              chainOrder.push(chainsToAdd[index]);
+            }
+            return {
+              availableChains: chainIds,
+              chainOrder,
+            };
+          });
+          return get().chainOrder;
+        },
+        setChain: (chainId: number) => {
+          const state = get();
+          if (
+            state.chainOrder.includes(chainId) ||
+            !state.availableChains.includes(chainId)
+          ) {
+            return;
+          }
+          set((state: ChainOrderState) => {
+            const chainOrder = state.chainOrder.slice();
+            chainOrder.unshift(chainId);
+            if (chainOrder.length > maxChainToOrder) {
+              chainOrder.pop();
+            }
+            return {
+              chainOrder,
+            };
+          });
+        },
+      }),
+      {
+        name: `${namePrefix || 'li.fi'}-widget-chains-order`,
+        version: 0,
+        partialize: (state) => ({ chainOrder: state.chainOrder }),
+      },
+    ) as StateCreator<ChainOrderState, [], [], ChainOrderState>,
+    Object.is,
+  );

package/src/stores/chains/types.ts

@@ -0,0 +1,9 @@
+export interface ChainOrderProps {
+  chainOrder: number[];
+  availableChains: number[];
+}
+
+export interface ChainOrderState extends ChainOrderProps {
+  initializeChains(chainIds: number[]): number[];
+  setChain(chainId: number): void;
+}

package/src/stores/chains/useChainOrder.ts

@@ -0,0 +1,9 @@
+import { shallow } from 'zustand/shallow';
+import { useChainOrderStore } from './ChainOrderStore';
+
+export const useChainOrder = (): [number[], (chainId: number) => void] => {
+  return useChainOrderStore(
+    (state) => [state.chainOrder, state.setChain],
+    shallow,
+  );
+};

package/src/stores/header/types.ts

@@ -0,0 +1,16 @@
+import type { StoreApi } from 'zustand';
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
+
+export type HeaderStore = UseBoundStoreWithEqualityFn<StoreApi<HeaderState>>;
+
+export interface HeaderStateBase {
+  element?: React.ReactNode | null;
+  title?: string;
+}
+
+export interface HeaderState extends HeaderStateBase {
+  setAction(element?: React.ReactNode | null): () => void;
+  setTitle(title?: string): () => void;
+  removeAction(): void;
+  removeTitle(): void;
+}