@lifi/widget 3.0.0-alpha.9 → 3.0.0-beta.1

package/providers/ThemeProvider/ThemeProvider.tsx

@@ -1,10 +1,12 @@
 import type { PaletteMode } from '@mui/material';
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import {
+  ThemeProvider as MuiThemeProvider,
+  useMediaQuery,
+} from '@mui/material';
 import { useEffect, useMemo, useState } from 'react';
-import { createTheme } from '../../config/theme';
-import { useAppearance } from '../../stores';
-import { useWidgetConfig } from '../WidgetProvider';
+import { useAppearance } from '../../stores/settings/useAppearance.js';
+import { createTheme } from '../../themes/createTheme.js';
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
 
 export const ThemeProvider: React.FC<React.PropsWithChildren<{}>> = ({
   children,

package/providers/WalletProvider/EVMBaseProvider.tsx

@@ -0,0 +1,34 @@
+import {
+  createDefaultWagmiConfig,
+  useSyncWagmiConfig,
+} from '@lifi/wallet-management';
+import { useState, type FC, type PropsWithChildren } from 'react';
+import { WagmiProvider } from 'wagmi';
+import { defaultWalletConnectProjectId } from '../../config/walletConnect.js';
+import { useAvailableChains } from '../../hooks/useAvailableChains.js';
+import { LiFiToolLogo } from '../../icons/lifi.js';
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
+
+export const EVMBaseProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { walletConfig } = useWidgetConfig();
+  const { chains } = useAvailableChains();
+  const [wagmi] = useState(() =>
+    createDefaultWagmiConfig({
+      walletConnect: walletConfig?.walletConnect ?? {
+        projectId: defaultWalletConnectProjectId,
+      },
+      coinbase: walletConfig?.coinbase ?? {
+        appName: 'LI.FI',
+        appLogoUrl: LiFiToolLogo,
+      },
+    }),
+  );
+
+  useSyncWagmiConfig(wagmi.config, wagmi.connectors, chains);
+
+  return (
+    <WagmiProvider config={wagmi.config} reconnectOnMount={false}>
+      {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

@@ -1,119 +1,26 @@
-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';
+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';
 
-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 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 ? (
-    children
+    <EVMExternalContext.Provider value={inWagmiContext}>
+      {children}
+    </EVMExternalContext.Provider>
   ) : (
     <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

@@ -1,31 +1,51 @@
-import { EVM, Solana, config } from '@lifi/sdk';
-import type { WalletAdapter } from '@solana/wallet-adapter-base';
+import type { SDKProvider } from '@lifi/sdk';
+import { ChainType, EVM, Solana, config } from '@lifi/sdk';
+import type { SignerWalletAdapter } 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
-    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]);
+    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 SignerWalletAdapter;
+          },
+        }),
+      );
+    }
+    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

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

@@ -1,9 +1,10 @@
-import { config, createConfig, type SDKOptions } from '@lifi/sdk';
+import { config, createConfig, type SDKConfig } 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';
+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: '',
@@ -60,7 +61,12 @@ export const WidgetProvider: React.FC<
           !isNaN(parseFloat(searchParams.fromAmount))
             ? formatInputAmount(searchParams.fromAmount)
             : widgetConfig.fromAmount,
-        toAddress: searchParams.toAddress || widgetConfig.toAddress,
+        toAddress: searchParams.toAddress
+          ? attemptToFindMatchingToAddressInConfig(
+              searchParams.toAddress,
+              widgetConfig,
+            )
+          : widgetConfig.toAddress,
         integrator: widgetConfig.integrator,
         elementId,
       } as WidgetContextProps;
@@ -69,7 +75,7 @@ export const WidgetProvider: React.FC<
       setDefaultSettings(value);
 
       // Configure SDK
-      const _config: SDKOptions = {
+      const _config: SDKConfig = {
         ...widgetConfig.sdkConfig,
         apiKey: widgetConfig.apiKey,
         integrator: widgetConfig.integrator ?? window?.location.hostname,
@@ -101,7 +107,6 @@ export const WidgetProvider: React.FC<
       };
     }
   }, [elementId, widgetConfig]);
-
   return (
     <WidgetContext.Provider value={value}>{children}</WidgetContext.Provider>
   );

package/providers/WidgetProvider/types.ts

@@ -1,4 +1,4 @@
-import type { WidgetConfig } from '../../types';
+import type { WidgetConfig } from '../../types/widget.js';
 
 export type WidgetContextProps = WidgetConfig & {
   fromChain?: number;

package/providers/WidgetProvider/utils.ts

@@ -1,12 +1,26 @@
-export const isItemAllowed = <T>(
-  itemId: T,
-  items?: {
-    allow?: T[];
-    deny?: T[];
-  },
+import type { WidgetConfig } from '../../types/widget.js';
+import { getChainTypeFromAddress } from '../../utils/chainType.js';
+
+export const attemptToFindMatchingToAddressInConfig = (
+  address: string,
+  config: WidgetConfig,
 ) => {
-  if (items?.allow?.length) {
-    return items.allow.includes(itemId);
+  if (config.toAddress && config.toAddress.address === address) {
+    return config.toAddress;
   }
-  return !items?.deny?.includes(itemId);
+
+  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

@@ -1,9 +1,11 @@
 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';
+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,
@@ -13,16 +15,20 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
     <SplitSubvariantStoreProvider
       state={
         config.subvariant === 'split'
-          ? config.subvariantOptions || 'swap'
+          ? config.subvariantOptions?.split || 'swap'
           : undefined
       }
     >
       <HeaderStoreProvider namePrefix={config?.keyPrefix}>
-        <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
-          <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
-            {children}
-          </RouteExecutionStoreProvider>
-        </ChainOrderStoreProvider>
+        <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);
+}

package/stores/bookmarks/createBookmarkStore.ts

@@ -0,0 +1,81 @@
+import type { StateCreator } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
+import type { ToAddress } from '../../types/widget.js';
+import type { PersistStoreProps } from '../types.js';
+import type { BookmarkState } from './types.js';
+
+const recentWalletsLimit = 10;
+
+interface PersistBookmarkProps extends PersistStoreProps {
+  toAddress?: ToAddress;
+}
+export const createBookmarksStore = ({
+  namePrefix,
+  toAddress,
+}: PersistBookmarkProps) =>
+  createWithEqualityFn<BookmarkState>(
+    persist(
+      (set, get) => ({
+        selectedBookmark: toAddress,
+        bookmarks: [],
+        recentWallets: [],
+        getBookmark: (address) =>
+          get().bookmarks.find((bookmark) => bookmark.address === address),
+        addBookmark: (bookmark) => {
+          set((state) => ({
+            bookmarks: [bookmark, ...state.bookmarks],
+          }));
+        },
+        removeBookmark: (address) => {
+          set((state) => ({
+            bookmarks: state.bookmarks.filter(
+              (storedBookmark) => storedBookmark.address !== address,
+            ),
+          }));
+        },
+        getSelectedBookmark: () => get().selectedBookmark,
+        setSelectedBookmark: (bookmark) => {
+          set((state) => ({
+            selectedBookmark: bookmark,
+          }));
+        },
+        addRecentWallet: (bookmark) => {
+          set((state) => ({
+            recentWallets: [
+              bookmark,
+              ...state.recentWallets.filter(
+                (recentWallet) => recentWallet.address !== bookmark.address,
+              ),
+            ].slice(0, recentWalletsLimit),
+          }));
+        },
+        removeRecentWallet: (address) => {
+          set((state) => ({
+            recentWallets: state.recentWallets.filter(
+              (storedRecent) => storedRecent.address !== address,
+            ),
+          }));
+        },
+      }),
+      {
+        name: `${namePrefix || 'li.fi'}-bookmarks`,
+        version: 0,
+        partialize: (state) => ({
+          bookmarks: state.bookmarks,
+          recentWallets: state.recentWallets,
+        }),
+        onRehydrateStorage: () => {
+          return (state) => {
+            if (state && toAddress && !toAddress.name) {
+              const existingBookmark = state.getBookmark(toAddress.address);
+              if (existingBookmark) {
+                state.setSelectedBookmark(existingBookmark);
+              }
+            }
+          };
+        },
+      },
+    ) as StateCreator<BookmarkState, [], [], BookmarkState>,
+    Object.is,
+  );

package/stores/bookmarks/types.ts

@@ -0,0 +1,29 @@
+import type { StoreApi } from 'zustand';
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
+import type { ToAddress } from '../../types/widget.js';
+
+export interface Bookmark extends ToAddress {
+  isConnectedAccount?: boolean;
+}
+
+export interface BookmarkProps {
+  selectedBookmark?: Bookmark;
+  bookmarks: Bookmark[];
+  recentWallets: Bookmark[];
+}
+
+export interface BookmarkActions {
+  getBookmark: (address: string) => Bookmark | undefined;
+  addBookmark: (bookmark: Bookmark) => void;
+  removeBookmark: (address: string) => void;
+  setSelectedBookmark: (bookmark?: Bookmark) => void;
+  getSelectedBookmark: () => Bookmark | undefined;
+  addRecentWallet: (bookmark: Bookmark) => void;
+  removeRecentWallet: (address: string) => void;
+}
+
+export type BookmarkState = BookmarkProps & BookmarkActions;
+
+export type BookmarkStore = UseBoundStoreWithEqualityFn<
+  StoreApi<BookmarkState>
+>;