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

package/pages/TransactionPage/TransactionPage.tsx

@@ -0,0 +1,239 @@
+import type { ExchangeRateUpdateParams } from '@lifi/sdk';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Box, Button, Tooltip } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import type { BottomSheetBase } from '../../components/BottomSheet';
+import { ContractComponent } from '../../components/ContractComponent';
+import { GasMessage } from '../../components/GasMessage';
+import { Insurance } from '../../components/Insurance';
+import { PageContainer } from '../../components/PageContainer';
+import { getStepList } from '../../components/Step';
+import {
+  useNavigateBack,
+  useRouteExecution,
+  useWidgetEvents,
+} from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import {
+  RouteExecutionStatus,
+  useFieldActions,
+  useHeaderStoreContext,
+} from '../../stores';
+import { WidgetEvent } from '../../types/events';
+import { formatTokenAmount } from '../../utils';
+import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet';
+import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
+import {
+  StartInsurableTransactionButton,
+  StartTransactionButton,
+} from './StartTransactionButton';
+import { StatusBottomSheet } from './StatusBottomSheet';
+import {
+  TokenValueBottomSheet,
+  getTokenValueLossThreshold,
+} from './TokenValueBottomSheet';
+import { calcValueLoss } from './utils';
+
+export const TransactionPage: React.FC = () => {
+  const { t } = useTranslation();
+  const { setFieldValue } = useFieldActions();
+  const emitter = useWidgetEvents();
+  const { navigateBack } = useNavigateBack();
+  const {
+    subvariant,
+    insurance,
+    contractComponent,
+    contractSecondaryComponent,
+  } = useWidgetConfig();
+  const { state }: any = useLocation();
+  const headerStoreContext = useHeaderStoreContext();
+  const stateRouteId = state?.routeId;
+  const [routeId, setRouteId] = useState<string>(stateRouteId);
+
+  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null);
+  const exchangeRateBottomSheetRef = useRef<ExchangeRateBottomSheetBase>(null);
+
+  const onAcceptExchangeRateUpdate = (
+    resolver: (value: boolean) => void,
+    data: ExchangeRateUpdateParams,
+  ) => {
+    exchangeRateBottomSheetRef.current?.open(resolver, data);
+  };
+
+  const { route, status, executeRoute, restartRoute, deleteRoute } =
+    useRouteExecution({
+      routeId: routeId,
+      onAcceptExchangeRateUpdate,
+    });
+
+  useEffect(() => {
+    if (route && subvariant !== 'nft') {
+      const transactionType =
+        route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
+      return headerStoreContext
+        .getState()
+        .setTitle(
+          status === RouteExecutionStatus.Idle
+            ? t(`button.review${transactionType}`)
+            : t(`header.${transactionType.toLowerCase() as 'swap' | 'bridge'}`),
+        );
+    }
+  }, [headerStoreContext, route, status, subvariant, t]);
+
+  useEffect(() => {
+    if (status === RouteExecutionStatus.Idle) {
+      emitter.emit(WidgetEvent.ReviewTransactionPageEntered, route);
+    }
+    // We want to emit event only when the page is mounted
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (!route) {
+    return null;
+  }
+
+  const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(route);
+
+  const handleExecuteRoute = () => {
+    if (tokenValueBottomSheetRef.current?.isOpen()) {
+      emitter.emit(WidgetEvent.RouteHighValueLoss, {
+        fromAmountUsd: route.fromAmountUSD,
+        gasCostUSD: route.gasCostUSD,
+        toAmountUSD: route.toAmountUSD,
+        valueLoss: calcValueLoss(route),
+      });
+    }
+    tokenValueBottomSheetRef.current?.close();
+    executeRoute();
+    setFieldValue('fromAmount', '');
+    if (subvariant === 'nft') {
+      setFieldValue('fromToken', '');
+      setFieldValue('toToken', '');
+    }
+  };
+
+  const handleStartClick = async () => {
+    if (status === RouteExecutionStatus.Idle) {
+      if (tokenValueLossThresholdExceeded && subvariant !== 'nft') {
+        tokenValueBottomSheetRef.current?.open();
+      } else {
+        handleExecuteRoute();
+      }
+    }
+    if (status === RouteExecutionStatus.Failed) {
+      restartRoute();
+    }
+  };
+
+  const handleRemoveRoute = () => {
+    navigateBack();
+    deleteRoute();
+  };
+
+  const getButtonText = (): string => {
+    switch (status) {
+      case RouteExecutionStatus.Idle:
+        switch (subvariant) {
+          case 'nft':
+            return t('button.buyNow');
+          case 'refuel':
+            return t('button.startBridging');
+          default:
+            const transactionType =
+              route.fromChainId === route.toChainId ? 'Swapping' : 'Bridging';
+            return t(`button.start${transactionType}`);
+        }
+      case RouteExecutionStatus.Failed:
+        return t('button.tryAgain');
+      default:
+        return '';
+    }
+  };
+
+  const insuredRoute = route.insurance?.state === 'INSURED';
+  const insurableRoute =
+    insurance &&
+    subvariant !== 'refuel' &&
+    status === RouteExecutionStatus.Idle &&
+    route.insurance?.state === 'INSURABLE';
+
+  const insuranceAvailable = insuredRoute || insurableRoute;
+
+  const StartButton = insurableRoute
+    ? StartInsurableTransactionButton
+    : StartTransactionButton;
+
+  const getInsuranceCoverageId = () =>
+    route.steps[0].execution?.process
+      .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
+      .find((process) => process.txHash)?.txHash ?? route.fromAddress;
+
+  return (
+    <PageContainer topBottomGutters>
+      {getStepList(route, subvariant)}
+      {subvariant === 'nft' ? (
+        <ContractComponent mt={2}>
+          {contractSecondaryComponent || contractComponent}
+        </ContractComponent>
+      ) : null}
+      {insuranceAvailable ? (
+        <Insurance
+          mt={2}
+          status={status}
+          insurableRouteId={stateRouteId}
+          feeAmountUsd={route.insurance.feeAmountUsd}
+          insuredAmount={formatTokenAmount(
+            BigInt(route.toAmountMin),
+            route.toToken.decimals,
+          )}
+          insuredTokenSymbol={route.toToken.symbol}
+          insuranceCoverageId={getInsuranceCoverageId()}
+          onChange={setRouteId}
+        />
+      ) : null}
+      {status === RouteExecutionStatus.Idle ||
+      status === RouteExecutionStatus.Failed ? (
+        <>
+          <GasMessage mt={2} route={route} />
+          <Box mt={2} display="flex">
+            <StartButton
+              text={getButtonText()}
+              onClick={handleStartClick}
+              route={route}
+              insurableRouteId={stateRouteId}
+            />
+            {status === RouteExecutionStatus.Failed ? (
+              <Tooltip
+                title={t('button.removeTransaction')}
+                placement="bottom-end"
+                enterDelay={400}
+                arrow
+              >
+                <Button
+                  onClick={handleRemoveRoute}
+                  sx={{
+                    minWidth: 48,
+                    marginLeft: 1,
+                  }}
+                >
+                  <DeleteIcon />
+                </Button>
+              </Tooltip>
+            ) : null}
+          </Box>
+        </>
+      ) : null}
+      {status ? <StatusBottomSheet status={status} route={route} /> : null}
+      {tokenValueLossThresholdExceeded && subvariant !== 'nft' ? (
+        <TokenValueBottomSheet
+          route={route}
+          ref={tokenValueBottomSheetRef}
+          onContinue={handleExecuteRoute}
+        />
+      ) : null}
+      <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />
+    </PageContainer>
+  );
+};

package/pages/TransactionPage/index.ts

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

package/providers/I18nProvider/I18nProvider.tsx

@@ -0,0 +1,67 @@
+import type { i18n } from 'i18next';
+import { createInstance } from 'i18next';
+import { useMemo } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import * as supportedLanguages from '../../i18n';
+import { useSettings } from '../../stores';
+import { deepMerge, isItemAllowed } from '../../utils';
+import { 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: [],
+      },
+      returnEmptyString: false,
+    });
+
+    i18n.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/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/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

@@ -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';
+import { useWidgetConfig } from '../WidgetProvider';
+import { EVMBaseProvider } from './EVMBaseProvider';
+import { EVMExternalContext } from './EVMExternalContext';
+
+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';
+
+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';
+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

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

package/providers/WalletProvider/index.ts

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