@lifi/widget 3.0.0-alpha.7 → 3.0.0-alpha.8

package/providers/FormProvider/FormUpdater.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useEffect, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+import type { FormValues } from '.';
+import { FormKey } from '.';
+import { useAccount } from '../../hooks';
+import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
+
+export const FormUpdater: React.FC<{
+  defaultValues: Partial<FormValues>;
+}> = ({ defaultValues }) => {
+  const { fromChain, toChain, chains } = useWidgetConfig();
+  const { account } = useAccount();
+  const {
+    setValue,
+    getValues,
+    getFieldState,
+    resetField,
+    // Subscription to touchedFields is required by getFieldState to work
+    formState: { touchedFields },
+  } = useFormContext();
+
+  const previousDefaultValues = useRef(defaultValues);
+
+  // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
+  useEffect(() => {
+    const chainAllowed =
+      account.chainId && isItemAllowed(account.chainId, chains);
+    if (!account.isConnected || !account.chainId || !chainAllowed) {
+      return;
+    }
+
+    const { isTouched: isFromChainTouched } = getFieldState(FormKey.FromChain);
+    const { isTouched: isToChainTouched } = getFieldState(FormKey.ToChain);
+    const { isTouched: isFromTokenTouched } = getFieldState(FormKey.FromToken);
+    const { isTouched: isToTokenTouched } = getFieldState(FormKey.ToToken);
+    const { isTouched: isFromAmountTouched } = getFieldState(
+      FormKey.FromAmount,
+    );
+
+    if (!fromChain && !isFromChainTouched && !isFromTokenTouched) {
+      resetField(FormKey.FromChain, { defaultValue: account.chainId });
+      setValue(FormKey.FromChain, account.chainId);
+      setValue(FormKey.FromToken, '');
+      if (isFromAmountTouched) {
+        setValue(FormKey.FromAmount, '');
+      }
+    }
+    if (!toChain && !isToChainTouched && !isToTokenTouched) {
+      resetField(FormKey.ToChain, { defaultValue: account.chainId });
+      setValue(FormKey.ToChain, account.chainId);
+      setValue(FormKey.ToToken, '');
+    }
+  }, [
+    account.chainId,
+    account.isConnected,
+    chains,
+    fromChain,
+    getFieldState,
+    getValues,
+    resetField,
+    setValue,
+    toChain,
+  ]);
+
+  // Makes widget config options reactive to changes
+  // Acts similar to values property from useForm, but includes additional logic for chains
+  useEffect(() => {
+    (Object.keys(defaultValues) as FormKey[]).forEach((key) => {
+      if (previousDefaultValues.current[key] !== defaultValues[key]) {
+        const value =
+          defaultValues[key] ||
+          // set the chain to the current user one if it is not present in the config
+          (key === FormKey.FromChain || key === FormKey.ToChain
+            ? account.chainId || ''
+            : '');
+        setValue(key, value);
+        resetField(key, { defaultValue: value });
+      }
+    });
+    previousDefaultValues.current = defaultValues;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValues, getValues, resetField, setValue]);
+
+  return null;
+};

package/providers/FormProvider/URLSearchParamsBuilder.tsx

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { useFormState, useWatch } from 'react-hook-form';
+import { useLocation } from 'react-router-dom';
+import { FormKey } from './types';
+
+const formValueKeys = [
+  FormKey.FromAmount,
+  FormKey.FromChain,
+  FormKey.FromToken,
+  FormKey.ToAddress,
+  FormKey.ToChain,
+  FormKey.ToToken,
+];
+
+export const URLSearchParamsBuilder = () => {
+  const { pathname } = useLocation();
+  const {
+    // Have to use touchedFields, because default values are not considered dirty
+    touchedFields: { ...touchedFields },
+  } = useFormState();
+  const values = useWatch({ name: formValueKeys });
+
+  useEffect(() => {
+    const url = new URL(window.location as any);
+    formValueKeys.forEach((key, index) => {
+      if (touchedFields[key] && values[index]) {
+        url.searchParams.set(key, values[index]);
+      } else if (url.searchParams.has(key) && !values[index]) {
+        url.searchParams.delete(key);
+      }
+    });
+    url.searchParams.sort();
+    window.history.replaceState(window.history.state, '', url);
+  }, [pathname, touchedFields, values]);
+
+  return null;
+};

package/providers/FormProvider/index.ts

@@ -0,0 +1,3 @@
+export * from './FormProvider';
+export * from './URLSearchParamsBuilder';
+export * from './types';

package/providers/FormProvider/types.ts

@@ -0,0 +1,44 @@
+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/providers/I18nProvider/I18nProvider.tsx

@@ -0,0 +1,66 @@
+import type { i18n } from 'i18next';
+import { createInstance } 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/providers/I18nProvider/index.ts

@@ -0,0 +1,2 @@
+export * from './I18nProvider';
+export * from './types';

package/providers/I18nProvider/types.ts

@@ -0,0 +1,27 @@
+import type * as languages from '../../i18n';
+
+export type PartialResource<T> = T extends object
+  ? {
+      [P in keyof T]?: PartialResource<T[P]>;
+    }
+  : T;
+
+export type LanguageKey = keyof typeof languages;
+
+export type LanguageResource = typeof languages.en;
+
+export type LanguageResources =
+  | {
+      [language in LanguageKey]?: PartialResource<LanguageResource>;
+    }
+  | {
+      [language: string]: PartialResource<LanguageResource>;
+    };
+
+export type LanguageTranslationResource = {
+  [namespace in 'translation']: PartialResource<LanguageResource>;
+};
+
+export type LanguageTranslationResources = {
+  [language: string]: LanguageTranslationResource;
+};

package/providers/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,43 @@
+import type { PaletteMode } from '@mui/material';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+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/providers/ThemeProvider/index.ts

@@ -0,0 +1 @@
+export * from './ThemeProvider';

package/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/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/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/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/providers/WalletProvider/index.ts

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

package/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/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/providers/WidgetProvider/index.ts

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