@lifi/widget 3.0.0-alpha.2 → 3.0.0-alpha.21

package/src/providers/FormProvider/types.ts

@@ -1,44 +0,0 @@
-export enum FormKey {
-  ContractOutputsToken = 'contractOutputsToken',
-  FromAmount = 'fromAmount',
-  FromChain = 'fromChain',
-  FromToken = 'fromToken',
-  ToAddress = 'toAddress',
-  ToAmount = 'toAmount',
-  ToChain = 'toChain',
-  ToContractAddress = 'toContractAddress',
-  ToContractCallData = 'toContractCallData',
-  ToContractGasLimit = 'ToContractGasLimit',
-  ToToken = 'toToken',
-  TokenSearchFilter = 'tokenSearchFilter',
-}
-
-export type FormValues = {
-  [FormKey.ContractOutputsToken]: string;
-  [FormKey.FromAmount]: string;
-  [FormKey.FromChain]: number;
-  [FormKey.FromToken]: string;
-  [FormKey.ToAddress]: string;
-  [FormKey.ToAmount]: string;
-  [FormKey.ToChain]: number;
-  [FormKey.ToContractAddress]: string;
-  [FormKey.ToContractCallData]: string;
-  [FormKey.ToContractGasLimit]: string;
-  [FormKey.ToToken]: string;
-  [FormKey.TokenSearchFilter]: string;
-};
-
-export type FormType = 'from' | 'to';
-
-export const FormKeyHelper = {
-  getChainKey: (formType: FormType): 'fromChain' | 'toChain' =>
-    `${formType}Chain`,
-  getTokenKey: (formType: FormType): 'fromToken' | 'toToken' =>
-    `${formType}Token`,
-  getAmountKey: (formType: FormType): 'fromAmount' | 'toAmount' =>
-    `${formType}Amount`,
-};
-
-export interface FormTypeProps {
-  formType: FormType;
-}

package/src/providers/I18nProvider/I18nProvider.tsx

@@ -1,65 +0,0 @@
-import { createInstance, i18n } from 'i18next';
-import { useMemo } from 'react';
-import { I18nextProvider, initReactI18next } from 'react-i18next';
-import * as supportedLanguages from '../../i18n';
-import { useSettings } from '../../stores';
-import { deepMerge } from '../../utils';
-import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
-import type { LanguageKey, LanguageTranslationResources } from './types';
-
-export const I18nProvider: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
-  const { languageResources, languages } = useWidgetConfig();
-  const { language } = useSettings(['language']);
-
-  const i18n = useMemo(() => {
-    let resources = (Object.keys(supportedLanguages) as LanguageKey[])
-      .filter((lng) => isItemAllowed(lng, languages))
-      .reduce((resources, lng) => {
-        resources[lng] = {
-          translation: languageResources?.[lng]
-            ? (deepMerge(
-                supportedLanguages[lng],
-                languageResources[lng],
-              ) as any)
-            : supportedLanguages[lng],
-        };
-        return resources;
-      }, {} as LanguageTranslationResources);
-
-    if (languageResources) {
-      resources = Object.keys(languageResources).reduce((resources, lng) => {
-        if (!resources[lng]) {
-          resources[lng] = {
-            translation: languageResources[lng as LanguageKey]!,
-          };
-        }
-        return resources;
-      }, resources);
-    }
-
-    let i18n = createInstance({
-      lng: languages?.default || language,
-      fallbackLng: resources.en
-        ? 'en'
-        : languages?.default ||
-          languages?.allow?.[0] ||
-          Object.keys(resources)?.[0],
-      lowerCaseLng: true,
-      interpolation: {
-        escapeValue: false,
-      },
-      resources,
-      detection: {
-        caches: [],
-      },
-    });
-
-    i18n.use(initReactI18next).init();
-
-    return i18n;
-  }, [language, languageResources, languages]);
-
-  return <I18nextProvider i18n={i18n as i18n}>{children}</I18nextProvider>;
-};

package/src/providers/ThemeProvider/ThemeProvider.tsx

@@ -1,43 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

package/src/providers/WidgetProvider/WidgetProvider.tsx

@@ -1,108 +0,0 @@
-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/index.ts

@@ -1,3 +0,0 @@
-export * from './types';
-export * from './utils';
-export * from './WidgetProvider';

package/src/providers/WidgetProvider/utils.ts

@@ -1,12 +0,0 @@
-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

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

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

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

package/src/stores/StoreProvider.tsx

@@ -1,29 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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,
-  );