@lifi/widget 3.0.0-alpha.3 → 3.0.0-alpha.31

package/providers/I18nProvider/types.ts

@@ -0,0 +1,27 @@
+import type * as languages from '../../i18n/index.js';
+
+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,45 @@
+import type { PaletteMode } from '@mui/material';
+import {
+  ThemeProvider as MuiThemeProvider,
+  useMediaQuery,
+} from '@mui/material';
+import { useEffect, useMemo, useState } from 'react';
+import { createTheme } from '../../config/theme.js';
+import { useAppearance } from '../../stores/settings/useAppearance.js';
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
+
+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/WalletProvider/EVMBaseProvider.tsx

@@ -0,0 +1,122 @@
+import {
+  alpha,
+  binance,
+  bitget,
+  bitpie,
+  block,
+  brave,
+  createCoinbaseConnector,
+  createWalletConnectConnector,
+  dcent,
+  exodus,
+  frame,
+  frontier,
+  gate,
+  hyperpay,
+  imtoken,
+  liquality,
+  okx,
+  oneinch,
+  ownbit,
+  safepal,
+  status,
+  taho,
+  tokenary,
+  tokenpocket,
+  trust,
+  xdefi,
+} from '@lifi/wallet-management';
+import { useMemo, type FC, type PropsWithChildren } from 'react';
+import type { Chain } from 'viem';
+import { createClient } from 'viem';
+import type { CreateConnectorFn } from 'wagmi';
+import { WagmiProvider, createConfig, http } from 'wagmi';
+import { mainnet } from 'wagmi/chains';
+import { defaultWalletConnectProjectId } from '../../config/walletConnect.js';
+import { useAvailableChains } from '../../hooks/useAvailableChains.js';
+import { LiFiToolLogo } from '../../icons/lifi.js';
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
+import { formatChain } from './utils.js';
+
+const connectors: Record<string, CreateConnectorFn | undefined> = {
+  walletConnect: undefined,
+  coinbase: undefined,
+  bitget,
+  gate,
+  exodus,
+  taho,
+  binance,
+  frontier,
+  okx,
+  trust,
+  status,
+  alpha,
+  block,
+  bitpie,
+  brave,
+  dcent,
+  frame,
+  hyperpay,
+  imtoken,
+  liquality,
+  ownbit,
+  tokenpocket,
+  xdefi,
+  oneinch,
+  tokenary,
+  safepal,
+};
+
+export const EVMBaseProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { walletConfig } = useWidgetConfig();
+  const { chains } = useAvailableChains();
+
+  const wagmiConfig = useMemo(() => {
+    const _chains: [Chain, ...Chain[]] = chains?.length
+      ? (chains.map(formatChain) as [Chain, ...Chain[]])
+      : [mainnet];
+    if (!connectors['walletConnect']) {
+      const params = walletConfig?.walletConnect ?? {
+        projectId: defaultWalletConnectProjectId,
+      };
+      connectors['walletConnect'] = createWalletConnectConnector(params);
+    }
+    if (!connectors['coinbase']) {
+      const params = walletConfig?.coinbase ?? {
+        appName: 'LI.FI',
+        appLogoUrl: LiFiToolLogo,
+      };
+      connectors['coinbase'] = createCoinbaseConnector(params);
+    }
+
+    const wagmiConfig = createConfig({
+      chains: _chains,
+      connectors: Object.values(connectors) as CreateConnectorFn[],
+      client({ chain }) {
+        return createClient({ chain, transport: http() });
+      },
+      // transports: _chains.reduce(
+      //   (transports, chain) => {
+      //     transports[chain.id] = http();
+      //     return transports;
+      //   },
+      //   {} as Record<number, Transport>,
+      // ),
+
+      // Workaround for Wagmi config re-creation after we load chains.
+      // Internal Wagmi hydration logic doesn't allow the safe creation of new configs in runtime.
+      ssr: !chains?.length,
+    });
+
+    return wagmiConfig;
+  }, [chains, walletConfig?.coinbase, walletConfig?.walletConnect]);
+
+  return (
+    <WagmiProvider
+      config={wagmiConfig}
+      reconnectOnMount={Boolean(chains?.length)}
+    >
+      {children}
+    </WagmiProvider>
+  );
+};

package/providers/WalletProvider/EVMExternalContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const EVMExternalContext = createContext<boolean>(false);

package/providers/WalletProvider/EVMProvider.tsx

@@ -0,0 +1,26 @@
+import { ChainType } from '@lifi/sdk';
+import { useContext, type FC, type PropsWithChildren } from 'react';
+import { WagmiContext } from 'wagmi';
+import { isItemAllowed } from '../../utils/item.js';
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
+import { EVMBaseProvider } from './EVMBaseProvider.js';
+import { EVMExternalContext } from './EVMExternalContext.js';
+
+export function useInWagmiContext(): boolean {
+  const { chains } = useWidgetConfig();
+  const context = useContext(WagmiContext);
+
+  return Boolean(context) && isItemAllowed(ChainType.EVM, chains?.types);
+}
+
+export const EVMProvider: FC<PropsWithChildren> = ({ children }) => {
+  const inWagmiContext = useInWagmiContext();
+
+  return inWagmiContext ? (
+    <EVMExternalContext.Provider value={inWagmiContext}>
+      {children}
+    </EVMExternalContext.Provider>
+  ) : (
+    <EVMBaseProvider>{children}</EVMBaseProvider>
+  );
+};

package/providers/WalletProvider/SDKProviders.tsx

@@ -0,0 +1,51 @@
+import type { SDKProvider } from '@lifi/sdk';
+import { ChainType, 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';
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
+
+export const SDKProviders = () => {
+  const { sdkConfig } = useWidgetConfig();
+  const { wallet } = useWallet();
+  const wagmiConfig = useConfig();
+
+  useEffect(() => {
+    // Configure SDK Providers
+    const providers: SDKProvider[] = [];
+    const hasConfiguredEVMProvider = sdkConfig?.providers?.some(
+      (provider) => provider.type === ChainType.EVM,
+    );
+    const hasConfiguredSVMProvider = sdkConfig?.providers?.some(
+      (provider) => provider.type === ChainType.SVM,
+    );
+    if (!hasConfiguredEVMProvider) {
+      providers.push(
+        EVM({
+          getWalletClient: () => getWalletClient(wagmiConfig),
+          switchChain: async (chainId: number) => {
+            const chain = await switchChain(wagmiConfig, { chainId });
+            return getWalletClient(wagmiConfig, { chainId: chain.id });
+          },
+        }),
+      );
+    }
+    if (!hasConfiguredSVMProvider) {
+      providers.push(
+        Solana({
+          async getWalletAdapter() {
+            return wallet?.adapter as WalletAdapter;
+          },
+        }),
+      );
+    }
+    if (sdkConfig?.providers?.length) {
+      providers.push(...sdkConfig?.providers);
+    }
+    config.setProviders(providers);
+  }, [sdkConfig?.providers, wagmiConfig, wallet?.adapter]);
+
+  return null;
+};

package/providers/WalletProvider/SVMBaseProvider.tsx

@@ -0,0 +1,33 @@
+import type { Adapter } from '@solana/wallet-adapter-base';
+import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
+import {
+  ConnectionProvider,
+  WalletProvider,
+} from '@solana/wallet-adapter-react';
+import { clusterApiUrl } from '@solana/web3.js';
+import { 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 SVMBaseProvider: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <ConnectionProvider endpoint={endpoint}>
+      <WalletProvider wallets={wallets} autoConnect>
+        {children}
+      </WalletProvider>
+    </ConnectionProvider>
+  );
+};

package/providers/WalletProvider/SVMExternalContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const SVMExternalContext = createContext<boolean>(false);

package/providers/WalletProvider/SVMProvider.tsx

@@ -0,0 +1,27 @@
+import { ChainType } from '@lifi/sdk';
+import { ConnectionContext } from '@solana/wallet-adapter-react';
+import { useContext, type FC, type PropsWithChildren } from 'react';
+import { isItemAllowed } from '../../utils/item.js';
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
+import { SVMBaseProvider } from './SVMBaseProvider.js';
+import { SVMExternalContext } from './SVMExternalContext.js';
+
+export function useInSolanaContext(): boolean {
+  const { chains } = useWidgetConfig();
+  const context = useContext(ConnectionContext);
+  return (
+    Boolean(context?.connection) && isItemAllowed(ChainType.SVM, chains?.types)
+  );
+}
+
+export const SVMProvider: FC<PropsWithChildren> = ({ children }) => {
+  const inSolanaContext = useInSolanaContext();
+
+  return inSolanaContext ? (
+    <SVMExternalContext.Provider value={inSolanaContext}>
+      {children}
+    </SVMExternalContext.Provider>
+  ) : (
+    <SVMBaseProvider>{children}</SVMBaseProvider>
+  );
+};

package/providers/WalletProvider/WalletProvider.tsx

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

package/providers/WalletProvider/useHasExternalWalletProvider.ts

@@ -0,0 +1,30 @@
+import { ChainType } from '@lifi/sdk';
+import { useContext, useMemo } from 'react';
+import { EVMExternalContext } from './EVMExternalContext.js';
+import { SVMExternalContext } from './SVMExternalContext.js';
+
+interface ExternalWalletProvider {
+  hasExternalProvider: boolean;
+  providers: ChainType[];
+}
+
+export function useHasExternalWalletProvider(): ExternalWalletProvider {
+  const hasExternalEVMContext = useContext(EVMExternalContext);
+  const hasExternalSVMContext = useContext(SVMExternalContext);
+
+  const providers = useMemo(() => {
+    const providers = [];
+    if (hasExternalEVMContext) {
+      providers.push(ChainType.EVM);
+    }
+    if (hasExternalSVMContext) {
+      providers.push(ChainType.SVM);
+    }
+    return providers;
+  }, [hasExternalEVMContext, hasExternalSVMContext]);
+
+  return {
+    hasExternalProvider: hasExternalEVMContext || hasExternalSVMContext,
+    providers,
+  };
+}

package/providers/WidgetProvider/WidgetProvider.tsx

@@ -0,0 +1,113 @@
+import { config, createConfig, type SDKConfig } from '@lifi/sdk';
+import { createContext, useContext, useId, useMemo } from 'react';
+import { version } from '../../config/version.js';
+import { setDefaultSettings } from '../../stores/settings/useSettingsStore.js';
+import { formatInputAmount } from '../../utils/format.js';
+import type { WidgetContextProps, WidgetProviderProps } from './types.js';
+import { attemptToFindMatchingToAddressInConfig } from './utils.js';
+
+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
+          ? attemptToFindMatchingToAddressInConfig(
+              searchParams.toAddress,
+              widgetConfig,
+            )
+          : widgetConfig.toAddress,
+        integrator: widgetConfig.integrator,
+        elementId,
+      } as WidgetContextProps;
+
+      // Set default settings for widget settings store
+      setDefaultSettings(value);
+
+      // Configure SDK
+      const _config: SDKConfig = {
+        ...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/types.ts

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

package/providers/WidgetProvider/utils.ts

@@ -0,0 +1,26 @@
+import type { WidgetConfig } from '../../types/widget.js';
+import { getChainTypeFromAddress } from '../../utils/chainType.js';
+
+export const attemptToFindMatchingToAddressInConfig = (
+  address: string,
+  config: WidgetConfig,
+) => {
+  if (config.toAddress && config.toAddress.address === address) {
+    return config.toAddress;
+  }
+
+  if (config.toAddresses?.length) {
+    const matchingToAddress = config.toAddresses.find(
+      (toAddress) => toAddress.address === address,
+    );
+
+    if (matchingToAddress) {
+      return matchingToAddress;
+    }
+  }
+
+  return {
+    address: address,
+    chainType: getChainTypeFromAddress(address),
+  };
+};

package/stores/StoreProvider.tsx

@@ -0,0 +1,35 @@
+import type { PropsWithChildren } from 'react';
+import type { WidgetConfigProps } from '../types/widget.js';
+import { BookmarkStoreProvider } from './bookmarks/BookmarkStore.js';
+import { ChainOrderStoreProvider } from './chains/ChainOrderStore.js';
+import { FormStoreProvider } from './form/FormStore.js';
+import { HeaderStoreProvider } from './header/useHeaderStore.js';
+import { RouteExecutionStoreProvider } from './routes/RouteExecutionStore.js';
+import { SplitSubvariantStoreProvider } from './settings/useSplitSubvariantStore.js';
+
+export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
+  children,
+  config,
+}) => {
+  return (
+    <SplitSubvariantStoreProvider
+      state={
+        config.subvariant === 'split'
+          ? config.subvariantOptions || 'swap'
+          : undefined
+      }
+    >
+      <HeaderStoreProvider namePrefix={config?.keyPrefix}>
+        <FormStoreProvider>
+          <BookmarkStoreProvider namePrefix={config?.keyPrefix}>
+            <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
+              <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
+                {children}
+              </RouteExecutionStoreProvider>
+            </ChainOrderStoreProvider>
+          </BookmarkStoreProvider>
+        </FormStoreProvider>
+      </HeaderStoreProvider>
+    </SplitSubvariantStoreProvider>
+  );
+};

package/stores/bookmarks/BookmarkStore.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useRef } from 'react';
+import { shallow } from 'zustand/shallow';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import type { PersistStoreProviderProps } from '../types.js';
+import { createBookmarksStore } from './createBookmarkStore.js';
+import type { BookmarkState, BookmarkStore } from './types.js';
+
+export const BookmarkStoreContext = createContext<BookmarkStore | null>(null);
+
+export const BookmarkStoreProvider: React.FC<PersistStoreProviderProps> = ({
+  children,
+  ...props
+}) => {
+  const { toAddress } = useWidgetConfig();
+  const storeRef = useRef<BookmarkStore>();
+
+  if (!storeRef.current) {
+    storeRef.current = createBookmarksStore({ ...props, toAddress });
+  }
+
+  return (
+    <BookmarkStoreContext.Provider value={storeRef.current}>
+      {children}
+    </BookmarkStoreContext.Provider>
+  );
+};
+
+export function useBookmarkStore<T>(
+  selector: (store: BookmarkState) => T,
+  equalityFunction = shallow,
+) {
+  const useStore = useContext(BookmarkStoreContext);
+
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${BookmarkStoreProvider.name}>.`,
+    );
+  }
+
+  return useStore(selector, equalityFunction);
+}