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

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -1,104 +0,0 @@
-import type { Route } from '@lifi/sdk';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
-import { Box, Button, Typography } from '@mui/material';
-import type { MutableRefObject } from 'react';
-import { forwardRef, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-import { BottomSheet } from '../../components/BottomSheet';
-import { useSetContentHeight } from '../../hooks';
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
-import { calcValueLoss } from './utils';
-
-interface TokenValueBottomSheetProps {
-  route: Route;
-  onContinue(): void;
-  onCancel?(): void;
-}
-
-export const TokenValueBottomSheet = forwardRef<
-  BottomSheetBase,
-  TokenValueBottomSheetProps
->(({ route, onContinue, onCancel }, ref) => {
-  const handleCancel = () => {
-    (ref as MutableRefObject<BottomSheetBase>).current?.close();
-    onCancel?.();
-  };
-
-  return (
-    <BottomSheet ref={ref} onClose={onCancel}>
-      <TokenValueBottomSheetContent
-        route={route}
-        onContinue={onContinue}
-        onCancel={handleCancel}
-      />
-    </BottomSheet>
-  );
-});
-
-const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
-  route,
-  onCancel,
-  onContinue,
-}) => {
-  const { t } = useTranslation();
-  const ref = useRef<HTMLElement>();
-  useSetContentHeight(ref);
-  return (
-    <Box p={3} ref={ref}>
-      <CenterContainer>
-        <IconCircle status="warning" mb={1}>
-          <WarningRoundedIcon color="warning" />
-        </IconCircle>
-        <Typography py={1} fontSize={18} fontWeight={700}>
-          {t('warning.title.highValueLoss')}
-        </Typography>
-      </CenterContainer>
-      <Typography py={1}>{t('warning.message.highValueLoss')}</Typography>
-      <Box display="flex" justifyContent="space-between" mt={1}>
-        <Typography>{t('main.sending')}</Typography>
-        <Typography fontWeight={600}>
-          {t('format.currency', { value: route.fromAmountUSD })}
-        </Typography>
-      </Box>
-      <Box display="flex" justifyContent="space-between" mt={0.25}>
-        <Typography>{t('main.gasCost')}</Typography>
-        <Typography fontWeight={600}>
-          {t('format.currency', { value: route.gasCostUSD })}
-        </Typography>
-      </Box>
-      <Box display="flex" justifyContent="space-between" mt={0.25}>
-        <Typography>{t('main.receiving')}</Typography>
-        <Typography fontWeight={600}>
-          {t('format.currency', { value: route.toAmountUSD })}
-        </Typography>
-      </Box>
-      <Box display="flex" justifyContent="space-between" mt={0.25}>
-        <Typography>{t('main.valueLoss')}</Typography>
-        <Typography fontWeight={600}>{calcValueLoss(route)}</Typography>
-      </Box>
-      <Box display="flex" mt={3}>
-        <Button variant="text" onClick={onCancel} fullWidth>
-          {t('button.cancel')}
-        </Button>
-        <Box display="flex" p={1} />
-        <Button variant="contained" onClick={onContinue} fullWidth>
-          {t('button.continue')}
-        </Button>
-      </Box>
-    </Box>
-  );
-};
-
-export const getTokenValueLossThreshold = (route?: Route) => {
-  if (!route) {
-    return false;
-  }
-  const fromAmountUSD = Number(route.fromAmountUSD || 0);
-  const toAmountUSD = Number(route.toAmountUSD || 0);
-  const gasCostUSD = Number(route.gasCostUSD || 0);
-  if (!fromAmountUSD && !toAmountUSD) {
-    return false;
-  }
-  return toAmountUSD / (fromAmountUSD + gasCostUSD) < 0.9;
-};

package/src/pages/TransactionPage/TransactionPage.style.tsx

@@ -1,6 +0,0 @@
-import { Container as MuiContainer } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-export const Container = styled(MuiContainer)(({ theme }) => ({
-  padding: theme.spacing(1, 3),
-}));

package/src/pages/TransactionPage/TransactionPage.tsx

@@ -1,236 +0,0 @@
-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 { useFormContext } from 'react-hook-form';
-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 { getStepList } from '../../components/Step';
-import {
-  useNavigateBack,
-  useRouteExecution,
-  useWidgetEvents,
-} from '../../hooks';
-import { FormKey, useWidgetConfig } from '../../providers';
-import { RouteExecutionStatus, 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 { Container } from './TransactionPage.style';
-import { calcValueLoss } from './utils';
-
-export const TransactionPage: React.FC = () => {
-  const { t } = useTranslation();
-  const { setValue } = useFormContext();
-  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();
-    setValue(FormKey.FromAmount, '');
-    if (subvariant === 'nft') {
-      setValue(FormKey.FromToken, '');
-      setValue(FormKey.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 (
-    <Container>
-      {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} />
-    </Container>
-  );
-};

package/src/pages/TransactionPage/types.ts

@@ -1,8 +0,0 @@
-import type { Route } from '@lifi/sdk';
-import type { BaseTransactionButtonProps } from '../../components/BaseTransactionButton';
-
-export interface StartTransactionButtonProps
-  extends BaseTransactionButtonProps {
-  route?: Route;
-  insurableRouteId: string;
-}

package/src/pages/TransactionPage/utils.ts

@@ -1,10 +0,0 @@
-import type { Route } from '@lifi/sdk';
-
-export const calcValueLoss = (route: Route) => {
-  return `${(
-    (Number(route.toAmountUSD || 0) /
-      (Number(route.fromAmountUSD || 0) + Number(route.gasCostUSD || 0)) -
-      1) *
-    100
-  ).toFixed(2)}%`;
-};

package/src/providers/FormProvider/FormProvider.tsx

@@ -1,55 +0,0 @@
-import { useMemo } from 'react';
-import {
-  FormProvider as ReactHookFormProvider,
-  useForm,
-} from 'react-hook-form';
-import { useWidgetConfig } from '../WidgetProvider';
-import { FormUpdater } from './FormUpdater';
-import type { FormValues } from './types';
-import { FormKey } from './types';
-
-export const formDefaultValues = {
-  [FormKey.FromAmount]: '',
-  [FormKey.ToAddress]: '',
-  [FormKey.TokenSearchFilter]: '',
-  [FormKey.ContractOutputsToken]: '',
-  [FormKey.ToContractAddress]: '',
-  [FormKey.ToContractCallData]: '',
-  [FormKey.ToContractGasLimit]: '',
-  [FormKey.ToAmount]: '',
-};
-
-export const FormProvider: React.FC<React.PropsWithChildren<{}>> = ({
-  children,
-}) => {
-  const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress } =
-    useWidgetConfig();
-
-  const defaultValues = useMemo(
-    () => ({
-      ...formDefaultValues,
-      fromChain,
-      fromToken,
-      fromAmount:
-        (typeof fromAmount === 'number'
-          ? fromAmount?.toPrecision()
-          : fromAmount) || formDefaultValues.fromAmount,
-      toChain,
-      toToken,
-      toAddress: toAddress || formDefaultValues.toAddress,
-    }),
-    [fromAmount, fromChain, fromToken, toAddress, toChain, toToken],
-  );
-
-  const methods = useForm<FormValues>({
-    // values,
-    defaultValues,
-  });
-
-  return (
-    <ReactHookFormProvider {...methods}>
-      <FormUpdater defaultValues={defaultValues} />
-      {children}
-    </ReactHookFormProvider>
-  );
-};

package/src/providers/FormProvider/FormUpdater.tsx

@@ -1,86 +0,0 @@
-/* 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/src/providers/FormProvider/URLSearchParamsBuilder.tsx

@@ -1,37 +0,0 @@
-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/src/providers/FormProvider/types.ts

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

@@ -1,66 +0,0 @@
-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/src/providers/I18nProvider/types.ts

@@ -1,27 +0,0 @@
-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;
-};