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

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -1,269 +0,0 @@
-import DoneIcon from '@mui/icons-material/Done';
-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 { useEffect, useRef } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import type { BottomSheetBase } from '../../components/BottomSheet';
-import { BottomSheet } from '../../components/BottomSheet';
-import { Token } from '../../components/Token';
-import {
-  getProcessMessage,
-  useAvailableChains,
-  useNavigateBack,
-  useTokenBalance,
-} from '../../hooks';
-import { FormKey, useWidgetConfig } from '../../providers';
-import type { RouteExecution } from '../../stores';
-import { RouteExecutionStatus, getSourceTxHash } from '../../stores';
-import {
-  formatTokenAmount,
-  hasEnumFlag,
-  navigationRoutes,
-  shortenAddress,
-} from '../../utils';
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
-
-export const StatusBottomSheet: React.FC<RouteExecution> = ({
-  status,
-  route,
-}) => {
-  const { t } = useTranslation();
-  const { navigateBack, navigate } = useNavigateBack();
-  const ref = useRef<BottomSheetBase>(null);
-  const { getChainById } = useAvailableChains();
-  const { setValue } = useFormContext();
-  const {
-    subvariant,
-    contractComponent,
-    contractSecondaryComponent,
-    contractCompactComponent,
-  } = useWidgetConfig();
-
-  const toToken = {
-    ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
-    amount: BigInt(
-      route.steps.at(-1)?.execution?.toAmount ??
-        route.steps.at(-1)?.estimate.toAmount ??
-        route.toAmount,
-    ),
-  };
-
-  const { token, refetch, refetchNewBalance, refetchAllBalances } =
-    useTokenBalance(route.toAddress, toToken);
-
-  const clearFromAmount = () => {
-    refetchAllBalances();
-    setValue(FormKey.FromAmount, '');
-    setValue(FormKey.ToAmount, '');
-  };
-
-  const handleDone = () => {
-    clearFromAmount();
-    navigateBack();
-  };
-
-  const handlePartialDone = () => {
-    clearFromAmount();
-    if (
-      toToken.chainId !== route.toToken.chainId &&
-      toToken.address !== route.toToken.address
-    ) {
-      setValue(
-        FormKey.FromAmount,
-        formatTokenAmount(toToken.amount, toToken.decimals),
-        { shouldTouch: true },
-      );
-      setValue(FormKey.FromChain, toToken.chainId, { shouldTouch: true });
-      setValue(FormKey.FromToken, toToken.address, { shouldTouch: true });
-      setValue(FormKey.ToChain, route.toToken.chainId, {
-        shouldTouch: true,
-      });
-      setValue(FormKey.ToToken, route.toToken.address, {
-        shouldTouch: true,
-      });
-    }
-    navigateBack();
-  };
-
-  const handleClose = () => {
-    clearFromAmount();
-    ref.current?.close();
-  };
-
-  const handleSeeDetails = () => {
-    handleClose();
-
-    const transactionHash = getSourceTxHash(route);
-
-    navigate(navigationRoutes.transactionDetails, {
-      state: {
-        routeId: route.id,
-        transactionHash,
-      },
-      replace: true,
-    });
-  };
-
-  const transactionType =
-    route.fromChainId === route.toChainId ? 'swap' : 'bridge';
-
-  let title: string | undefined;
-  let primaryMessage;
-  let secondaryMessage;
-  let handlePrimaryButton = handleDone;
-  switch (status) {
-    case RouteExecutionStatus.Done: {
-      title =
-        subvariant === 'nft'
-          ? t('success.title.purchaseSuccessful')
-          : t(`success.title.${transactionType}Successful`);
-      if (token) {
-        primaryMessage = t('success.message.exchangeSuccessful', {
-          amount: formatTokenAmount(token.amount, token.decimals),
-          tokenSymbol: token.symbol,
-          chainName: getChainById(token.chainId)?.name,
-          walletAddress: shortenAddress(route.toAddress),
-        });
-      }
-      handlePrimaryButton = handleDone;
-      break;
-    }
-    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial: {
-      title = t(`success.title.${transactionType}PartiallySuccessful`);
-      primaryMessage = t('success.message.exchangePartiallySuccessful', {
-        tool: route.steps.at(-1)?.toolDetails.name,
-        tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
-      });
-      if (token) {
-        secondaryMessage = t('success.message.exchangeSuccessful', {
-          amount: formatTokenAmount(token.amount, token.decimals),
-          tokenSymbol: token.symbol,
-          chainName: getChainById(token.chainId)?.name,
-          walletAddress: shortenAddress(route.toAddress),
-        });
-      }
-      handlePrimaryButton = handlePartialDone;
-      break;
-    }
-    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded: {
-      title = t('success.title.refundIssued');
-      primaryMessage = t('success.message.exchangePartiallySuccessful', {
-        tool: route.steps.at(-1)?.toolDetails.name,
-        tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
-      });
-      if (token) {
-        secondaryMessage = t('success.message.exchangeSuccessful', {
-          amount: formatTokenAmount(token.amount, token.decimals),
-          tokenSymbol: token.symbol,
-          chainName: getChainById(token.chainId)?.name,
-          walletAddress: shortenAddress(route.toAddress),
-        });
-      }
-      break;
-    }
-    case RouteExecutionStatus.Failed: {
-      const step = route.steps.find(
-        (step) => step.execution?.status === 'FAILED',
-      );
-      const process = step?.execution?.process.find(
-        (process) => process.status === 'FAILED',
-      );
-      if (!step || !process) {
-        break;
-      }
-      const processMessage = getProcessMessage(t, getChainById, step, process);
-      title = processMessage.title;
-      primaryMessage = processMessage.message;
-      handlePrimaryButton = handleClose;
-      break;
-    }
-    default:
-      break;
-  }
-
-  useEffect(() => {
-    const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done);
-    if (
-      (hasSuccessFlag || hasEnumFlag(status, RouteExecutionStatus.Failed)) &&
-      !ref.current?.isOpen()
-    ) {
-      if (hasSuccessFlag) {
-        refetchNewBalance();
-        refetch();
-      }
-      ref.current?.open();
-    }
-  }, [refetch, refetchNewBalance, status]);
-
-  const showContractComponent =
-    subvariant === 'nft' && hasEnumFlag(status, RouteExecutionStatus.Done);
-
-  return (
-    <BottomSheet ref={ref}>
-      <Box p={3}>
-        {!showContractComponent ? (
-          <CenterContainer>
-            <IconCircle status={status} mb={1}>
-              {status === RouteExecutionStatus.Idle ? (
-                <InfoRoundedIcon color="primary" />
-              ) : null}
-              {status === RouteExecutionStatus.Done ? (
-                <DoneIcon color="success" />
-              ) : null}
-              {hasEnumFlag(status, RouteExecutionStatus.Partial) ||
-              hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (
-                <WarningRoundedIcon color="warning" />
-              ) : null}
-              {hasEnumFlag(status, RouteExecutionStatus.Failed) ? (
-                <ErrorRoundedIcon color="error" />
-              ) : null}
-            </IconCircle>
-          </CenterContainer>
-        ) : null}
-        <CenterContainer>
-          <Typography py={1} fontSize={18} fontWeight={700}>
-            {title}
-          </Typography>
-        </CenterContainer>
-        {showContractComponent ? (
-          contractCompactComponent ||
-          contractSecondaryComponent ||
-          contractComponent
-        ) : (
-          <CenterContainer>
-            {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
-              <Token token={toToken} py={1} disableDescription />
-            ) : null}
-          </CenterContainer>
-        )}
-        {!showContractComponent ? (
-          <Typography py={1}>{primaryMessage}</Typography>
-        ) : null}
-        {secondaryMessage ? (
-          <Typography py={1}>{secondaryMessage}</Typography>
-        ) : null}
-        <Box mt={2}>
-          <Button variant="contained" fullWidth onClick={handlePrimaryButton}>
-            {status === RouteExecutionStatus.Idle ? t('button.ok') : null}
-            {hasEnumFlag(status, RouteExecutionStatus.Done)
-              ? t('button.done')
-              : null}
-            {status === RouteExecutionStatus.Failed
-              ? t('button.seeDetails')
-              : null}
-          </Button>
-        </Box>
-        {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
-          <Box mt={2}>
-            <Button variant="text" onClick={handleSeeDetails} fullWidth>
-              {t('button.seeDetails')}
-            </Button>
-          </Box>
-        ) : null}
-      </Box>
-    </BottomSheet>
-  );
-};

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/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/index.ts

@@ -1,3 +0,0 @@
-export * from './FormProvider';
-export * from './URLSearchParamsBuilder';
-export * from './types';