@lifi/widget 3.0.0-alpha.12 → 3.0.0-alpha.13

package/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -5,7 +5,11 @@ import type { ChangeEventHandler, FocusEventHandler } from 'react';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSettingMonitor } from '../../../hooks';
-import { useSettings, useSettingsStore } from '../../../stores';
+import {
+  defaultSlippage,
+  useSettings,
+  useSettingsStore,
+} from '../../../stores';
 import { formatSlippage } from '../../../utils';
 import { BadgedValue, SettingCardExpandable } from '../SettingsCard';
 import {
@@ -15,8 +19,6 @@ import {
   SlippageLimitsWarningContainer,
 } from './SlippageSettings.style';
 
-const slippageDefault = '0.5';
-
 export const SlippageSettings: React.FC = () => {
   const { t } = useTranslation();
   const { isSlippageOutsideRecommendedLimits, isSlippageChanged } =
@@ -27,7 +29,7 @@ export const SlippageSettings: React.FC = () => {
   const [focused, setFocused] = useState<'input' | 'button' | undefined>();
 
   const handleDefaultClick = () => {
-    setValue('slippage', formatSlippage(slippageDefault, defaultValue.current));
+    setValue('slippage', formatSlippage(defaultSlippage, defaultValue.current));
   };
 
   const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -35,7 +37,7 @@ export const SlippageSettings: React.FC = () => {
 
     setValue(
       'slippage',
-      formatSlippage(value || slippageDefault, defaultValue.current, true),
+      formatSlippage(value || defaultSlippage, defaultValue.current, true),
     );
   };
 
@@ -46,12 +48,12 @@ export const SlippageSettings: React.FC = () => {
 
     setValue(
       'slippage',
-      formatSlippage(value || slippageDefault, defaultValue.current),
+      formatSlippage(value || defaultSlippage, defaultValue.current),
     );
   };
 
   const customInputValue =
-    !slippage || slippage === slippageDefault ? '' : slippage;
+    !slippage || slippage === defaultSlippage ? '' : slippage;
 
   const badgeColor = isSlippageOutsideRecommendedLimits
     ? 'warning'
@@ -73,7 +75,7 @@ export const SlippageSettings: React.FC = () => {
       <Box mt={1.5}>
         <SettingsFieldSet>
           <SlippageDefaultButton
-            selected={slippageDefault === slippage && focused !== 'input'}
+            selected={defaultSlippage === slippage && focused !== 'input'}
             onFocus={() => {
               setFocused('button');
             }}
@@ -83,10 +85,10 @@ export const SlippageSettings: React.FC = () => {
             onClick={handleDefaultClick}
             disableRipple
           >
-            {slippageDefault}
+            {defaultSlippage}
           </SlippageDefaultButton>
           <SlippageCustomInput
-            selected={slippageDefault !== slippage && focused !== 'button'}
+            selected={defaultSlippage !== slippage && focused !== 'button'}
             placeholder={focused === 'input' ? '' : t('settings.custom')}
             inputProps={{
               inputMode: 'decimal',

package/pages/TransactionPage/StatusBottomSheet.tsx

@@ -3,6 +3,7 @@ import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
 import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { Box, Button, Typography } from '@mui/material';
+import { useQueryClient } from '@tanstack/react-query';
 import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { BottomSheetBase } from '../../components/BottomSheet';
@@ -36,7 +37,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
   const { t } = useTranslation();
   const { navigateBack, navigate } = useNavigateBack();
   const ref = useRef<BottomSheetBase>(null);
-  const { getChainById } = useAvailableChains();
+  const queryClient = useQueryClient();
   const { setFieldValue } = useFieldActions();
   const {
     subvariant,
@@ -44,6 +45,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
     contractSecondaryComponent,
     contractCompactComponent,
   } = useWidgetConfig();
+  const { getChainById } = useAvailableChains();
 
   const toToken = {
     ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
@@ -54,22 +56,25 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
     ),
   };
 
+  const toChain = getChainById(toToken.chainId);
+
   const { token, refetch, refetchNewBalance, refetchAllBalances } =
-    useTokenBalance(route.toAddress, toToken);
+    useTokenBalance(route.toAddress, toToken, toChain);
 
-  const clearFromAmount = () => {
+  const invalidateQueries = () => {
     refetchAllBalances();
     setFieldValue('fromAmount', '');
     setFieldValue('toAmount', '');
+    queryClient.invalidateQueries({ queryKey: ['transaction-history'] });
   };
 
   const handleDone = () => {
-    clearFromAmount();
+    invalidateQueries();
     navigateBack();
   };
 
   const handlePartialDone = () => {
-    clearFromAmount();
+    invalidateQueries();
     if (
       toToken.chainId !== route.toToken.chainId &&
       toToken.address !== route.toToken.address
@@ -92,7 +97,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
   };
 
   const handleClose = () => {
-    clearFromAmount();
+    invalidateQueries();
     ref.current?.close();
   };
 
@@ -127,7 +132,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
         primaryMessage = t('success.message.exchangeSuccessful', {
           amount: formatTokenAmount(token.amount, token.decimals),
           tokenSymbol: token.symbol,
-          chainName: getChainById(token.chainId)?.name,
+          chainName: toChain?.name,
           walletAddress: shortenAddress(route.toAddress),
         });
       }
@@ -144,7 +149,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
         secondaryMessage = t('success.message.exchangeSuccessful', {
           amount: formatTokenAmount(token.amount, token.decimals),
           tokenSymbol: token.symbol,
-          chainName: getChainById(token.chainId)?.name,
+          chainName: toChain?.name,
           walletAddress: shortenAddress(route.toAddress),
         });
       }
@@ -161,7 +166,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
         secondaryMessage = t('success.message.exchangeSuccessful', {
           amount: formatTokenAmount(token.amount, token.decimals),
           tokenSymbol: token.symbol,
-          chainName: getChainById(token.chainId)?.name,
+          chainName: toChain?.name,
           walletAddress: shortenAddress(route.toAddress),
         });
       }

package/providers/I18nProvider/I18nProvider.tsx

@@ -4,8 +4,8 @@ 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 { deepMerge, isItemAllowed } from '../../utils';
+import { useWidgetConfig } from '../WidgetProvider';
 import type { LanguageKey, LanguageTranslationResources } from './types';
 
 export const I18nProvider: React.FC<React.PropsWithChildren> = ({
@@ -55,6 +55,7 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
       detection: {
         caches: [],
       },
+      returnEmptyString: false,
     });
 
     i18n.use(initReactI18next).init();

package/providers/WalletProvider/EVMBaseProvider.tsx

@@ -0,0 +1,130 @@
+import {
+  alpha,
+  binance,
+  bitget,
+  bitpie,
+  block,
+  brave,
+  createCoinbaseConnector,
+  createWalletConnectConnector,
+  dcent,
+  exodus,
+  frame,
+  frontier,
+  gate,
+  hyperpay,
+  imtoken,
+  liquality,
+  okx,
+  oneinch,
+  ownbit,
+  rabby,
+  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';
+import { useAvailableChains } from '../../hooks';
+import { LiFiToolLogo } from '../../icons';
+import { useWidgetConfig } from '../WidgetProvider';
+import { formatChain } from './utils';
+
+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,
+  rabby,
+};
+
+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];
+    // Add ENS contracts
+    const _mainnet = _chains.find((chain) => chain.id === mainnet.id);
+    if (_mainnet) {
+      _mainnet.contracts = mainnet.contracts;
+    }
+
+    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

@@ -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';
+import { useWidgetConfig } from '../WidgetProvider';
+import { EVMBaseProvider } from './EVMBaseProvider';
+import { EVMExternalContext } from './EVMExternalContext';
 
-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,17 +1,19 @@
-import { EVM, Solana, config } from '@lifi/sdk';
+import { EVM, SDKProvider, 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';
 
 export const SDKProviders = () => {
+  const { sdkConfig } = useWidgetConfig();
   const { wallet } = useWallet();
   const wagmiConfig = useConfig();
 
   useEffect(() => {
     // Configure SDK Providers
-    config.setProviders([
+    const providers: SDKProvider[] = [
       EVM({
         getWalletClient: () => getWalletClient(wagmiConfig),
         switchChain: async (chainId: number) => {
@@ -19,13 +21,21 @@ export const SDKProviders = () => {
           return getWalletClient(wagmiConfig, { chainId: chain.id });
         },
       }),
-      Solana({
-        async getWalletAdapter() {
-          return wallet?.adapter as WalletAdapter;
-        },
-      }),
-    ]);
-  }, [wagmiConfig, wallet?.adapter]);
+    ];
+    if (wallet?.adapter) {
+      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/{SolanaProvider.tsx → SVMBaseProvider.tsx}

@@ -1,12 +1,11 @@
 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';
+import { type FC, type PropsWithChildren } from 'react';
 
 const endpoint = clusterApiUrl(WalletAdapterNetwork.Mainnet);
 /**
@@ -23,16 +22,7 @@ const endpoint = clusterApiUrl(WalletAdapterNetwork.Mainnet);
  */
 const wallets: Adapter[] = [];
 
-export const SolanaProvider: FC<PropsWithChildren> = ({ children }) => {
-  const inSolanaContext = useInSolanaContext();
-  return inSolanaContext ? (
-    children
-  ) : (
-    <SolanaBaseProvider>{children}</SolanaBaseProvider>
-  );
-};
-
-export const SolanaBaseProvider: FC<PropsWithChildren> = ({ children }) => {
+export const SVMBaseProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
     <ConnectionProvider endpoint={endpoint}>
       <WalletProvider wallets={wallets} autoConnect>
@@ -41,8 +31,3 @@ export const SolanaBaseProvider: FC<PropsWithChildren> = ({ children }) => {
     </ConnectionProvider>
   );
 };
-
-function useInSolanaContext(): boolean {
-  const context = useContext(ConnectionContext);
-  return Boolean(context?.connection);
-}

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';
+import { useWidgetConfig } from '../WidgetProvider';
+import { SVMBaseProvider } from './SVMBaseProvider';
+import { SVMExternalContext } from './SVMExternalContext';
+
+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 { SVMProvider } from './SVMProvider';
 
 export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <SolanaProvider>
-      <EVMProvider>
+    <EVMProvider>
+      <SVMProvider>
         <SDKProviders />
         {children}
-      </EVMProvider>
-    </SolanaProvider>
+      </SVMProvider>
+    </EVMProvider>
   );
 };

package/providers/WalletProvider/index.ts

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

package/providers/WalletProvider/useHasExternalWalletProvider.ts

@@ -0,0 +1,30 @@
+import { ChainType } from '@lifi/sdk';
+import { useContext, useMemo } from 'react';
+import { EVMExternalContext } from './EVMExternalContext';
+import { SVMExternalContext } from './SVMExternalContext';
+
+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,4 +1,4 @@
-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';
@@ -69,7 +69,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,

package/providers/WidgetProvider/index.ts

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