@lifi/widget 3.7.0 → 3.8.0-beta.1

package/pages/TransactionPage/StatusBottomSheet.tsx

@@ -1,322 +0,0 @@
-import {
-  Done,
-  ErrorRounded,
-  InfoRounded,
-  WarningRounded,
-} from '@mui/icons-material';
-import { Box, Button, Skeleton, Typography } from '@mui/material';
-import { useQueryClient } from '@tanstack/react-query';
-import { useCallback, useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
-import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
-import { Token } from '../../components/Token/Token.js';
-import { useAvailableChains } from '../../hooks/useAvailableChains.js';
-import { useNavigateBack } from '../../hooks/useNavigateBack.js';
-import { getProcessMessage } from '../../hooks/useProcessMessage.js';
-import { useSetContentHeight } from '../../hooks/useSetContentHeight.js';
-import { useTokenBalance } from '../../hooks/useTokenBalance.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import {
-  RouteExecutionStatus,
-  type RouteExecution,
-} from '../../stores/routes/types.js';
-import { getSourceTxHash } from '../../stores/routes/utils.js';
-import { hasEnumFlag } from '../../utils/enum.js';
-import { formatTokenAmount } from '../../utils/format.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import { shortenAddress } from '../../utils/wallet.js';
-import {
-  CenterContainer,
-  IconCircle,
-  MessageSkeletonContainer,
-} from './StatusBottomSheet.style.js';
-
-interface StatusBottomSheetContentProps extends RouteExecution {
-  onClose(): void;
-}
-
-const MessageSkeleton = () => (
-  <MessageSkeletonContainer>
-    <Skeleton height={24} variant="text" width="92%" />
-    <Skeleton height={24} variant="text" width="56%" />
-  </MessageSkeletonContainer>
-);
-
-export const StatusBottomSheet: React.FC<RouteExecution> = ({
-  status,
-  route,
-}) => {
-  const ref = useRef<BottomSheetBase>(null);
-
-  const onClose = useCallback(() => {
-    ref.current?.close();
-  }, []);
-
-  useEffect(() => {
-    const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done);
-    const hasFailedFlag = hasEnumFlag(status, RouteExecutionStatus.Failed);
-    if ((hasSuccessFlag || hasFailedFlag) && !ref.current?.isOpen()) {
-      ref.current?.open();
-    }
-  }, [status]);
-
-  return (
-    <BottomSheet ref={ref}>
-      <StatusBottomSheetContent
-        status={status}
-        route={route}
-        onClose={onClose}
-      />
-    </BottomSheet>
-  );
-};
-
-export const StatusBottomSheetContent: React.FC<
-  StatusBottomSheetContentProps
-> = ({ status, route, onClose }) => {
-  const { t } = useTranslation();
-  const { navigateBack, navigate } = useNavigateBack();
-  const queryClient = useQueryClient();
-  const { setFieldValue } = useFieldActions();
-  const {
-    subvariant,
-    subvariantOptions,
-    contractSecondaryComponent,
-    contractCompactComponent,
-    feeConfig,
-  } = useWidgetConfig();
-  const { getChainById } = useAvailableChains();
-
-  const ref = useRef<HTMLElement>();
-  useSetContentHeight(ref);
-
-  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 toChain = getChainById(toToken.chainId);
-
-  const { token, refetch, refetchNewBalance, refetchAllBalances } =
-    useTokenBalance(route.toAddress, toToken, toChain);
-
-  const invalidateQueries = () => {
-    refetchAllBalances();
-    setFieldValue('fromAmount', '');
-    setFieldValue('toAmount', '');
-    queryClient.invalidateQueries({ queryKey: ['transaction-history'] });
-  };
-
-  const handleDone = () => {
-    invalidateQueries();
-    navigateBack();
-  };
-
-  const handlePartialDone = () => {
-    invalidateQueries();
-    if (
-      toToken.chainId !== route.toToken.chainId &&
-      toToken.address !== route.toToken.address
-    ) {
-      setFieldValue(
-        'fromAmount',
-        formatTokenAmount(toToken.amount, toToken.decimals),
-        { isTouched: true },
-      );
-      setFieldValue('fromChain', toToken.chainId, { isTouched: true });
-      setFieldValue('fromToken', toToken.address, { isTouched: true });
-      setFieldValue('toChain', route.toToken.chainId, {
-        isTouched: true,
-      });
-      setFieldValue('toToken', route.toToken.address, {
-        isTouched: true,
-      });
-    }
-    navigateBack();
-  };
-
-  const handleClose = () => {
-    invalidateQueries();
-    onClose();
-  };
-
-  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 === 'custom'
-          ? t(
-              `success.title.${subvariantOptions?.custom ?? 'checkout'}Successful`,
-            )
-          : t(`success.title.${transactionType}Successful`);
-      if (token) {
-        primaryMessage = t('success.message.exchangeSuccessful', {
-          amount: formatTokenAmount(token.amount, token.decimals),
-          tokenSymbol: token.symbol,
-          chainName: toChain?.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: toChain?.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: toChain?.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) {
-      refetchNewBalance();
-      refetch();
-    }
-  }, [refetch, refetchNewBalance, status]);
-
-  const showContractComponent =
-    subvariant === 'custom' &&
-    hasEnumFlag(status, RouteExecutionStatus.Done) &&
-    (contractCompactComponent || contractSecondaryComponent);
-
-  const VcComponent =
-    status === RouteExecutionStatus.Done ? feeConfig?._vcComponent : undefined;
-
-  return (
-    <Box p={3} ref={ref}>
-      {!showContractComponent ? (
-        <CenterContainer>
-          <IconCircle status={status} mb={1}>
-            {status === RouteExecutionStatus.Idle ? (
-              <InfoRounded color="primary" />
-            ) : null}
-            {status === RouteExecutionStatus.Done ? (
-              <Done color="success" />
-            ) : null}
-            {hasEnumFlag(status, RouteExecutionStatus.Partial) ||
-            hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (
-              <WarningRounded color="warning" />
-            ) : null}
-            {hasEnumFlag(status, RouteExecutionStatus.Failed) ? (
-              <ErrorRounded color="error" />
-            ) : null}
-          </IconCircle>
-        </CenterContainer>
-      ) : null}
-      <CenterContainer>
-        <Typography py={1} fontSize={18} fontWeight={700}>
-          {title}
-        </Typography>
-      </CenterContainer>
-      {showContractComponent ? (
-        contractCompactComponent || contractSecondaryComponent
-      ) : (
-        <CenterContainer>
-          {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
-            <Token token={toToken} py={1} disableDescription />
-          ) : null}
-        </CenterContainer>
-      )}
-      {!showContractComponent ? (
-        primaryMessage ? (
-          <Typography py={1}>{primaryMessage}</Typography>
-        ) : (
-          <MessageSkeleton />
-        )
-      ) : null}
-      {secondaryMessage ? (
-        <Typography py={1}>{secondaryMessage}</Typography>
-      ) : null}
-      {VcComponent ? <VcComponent route={route} /> : null}
-      <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>
-        {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
-          <Button variant="text" onClick={handleSeeDetails} fullWidth>
-            {t('button.seeDetails')}
-          </Button>
-        ) : null}
-        <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>
-    </Box>
-  );
-};

package/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -1,117 +0,0 @@
-import type { Route } from '@lifi/sdk';
-import { WarningRounded } from '@mui/icons-material';
-import { Box, Button, Typography } from '@mui/material';
-import type { MutableRefObject } from 'react';
-import { forwardRef, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
-import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
-import { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js';
-import { useSetContentHeight } from '../../hooks/useSetContentHeight.js';
-import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
-import { calculateValueLossPercentage } from './utils.js';
-
-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);
-  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =
-    getAccumulatedFeeCostsBreakdown(route);
-  const fromAmountUSD = parseFloat(route.fromAmountUSD);
-  const toAmountUSD = parseFloat(route.toAmountUSD);
-  return (
-    <Box p={3} ref={ref}>
-      <CenterContainer>
-        <IconCircle status="warning" mb={1}>
-          <WarningRounded 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.fees.network')}</Typography>
-        <FeeBreakdownTooltip gasCosts={gasCosts}>
-          <Typography fontWeight={600}>
-            {t('format.currency', { value: gasCostUSD })}
-          </Typography>
-        </FeeBreakdownTooltip>
-      </Box>
-      {feeCostUSD ? (
-        <Box display="flex" justifyContent="space-between" mt={0.25}>
-          <Typography>{t('main.fees.provider')}</Typography>
-          <FeeBreakdownTooltip feeCosts={feeCosts}>
-            <Typography fontWeight={600}>
-              {t('format.currency', { value: feeCostUSD })}
-            </Typography>
-          </FeeBreakdownTooltip>
-        </Box>
-      ) : null}
-      <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}>
-          {calculateValueLossPercentage(
-            fromAmountUSD,
-            toAmountUSD,
-            gasCostUSD,
-            feeCostUSD,
-          )}
-          %
-        </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>
-  );
-};

package/pages/TransactionPage/TransactionPage.tsx

@@ -1,229 +0,0 @@
-import type { ExchangeRateUpdateParams } from '@lifi/sdk';
-import { Delete } from '@mui/icons-material';
-import { Box, Button, Tooltip } from '@mui/material';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
-import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
-import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
-import { GasMessage } from '../../components/GasMessage/GasMessage.js';
-import { PageContainer } from '../../components/PageContainer.js';
-import { getStepList } from '../../components/Step/StepList.js';
-import { TransactionDetails } from '../../components/TransactionDetails.js';
-import { useHeader } from '../../hooks/useHeader.js';
-import { useNavigateBack } from '../../hooks/useNavigateBack.js';
-import { useRouteExecution } from '../../hooks/useRouteExecution.js';
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { RouteExecutionStatus } from '../../stores/routes/types.js';
-import { WidgetEvent } from '../../types/events.js';
-import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
-import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js';
-import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js';
-import { RouteTracker } from './RouteTracker.js';
-import { StartTransactionButton } from './StartTransactionButton.js';
-import { StatusBottomSheet } from './StatusBottomSheet.js';
-import { TokenValueBottomSheet } from './TokenValueBottomSheet.js';
-import {
-  calculateValueLossPercentage,
-  getTokenValueLossThreshold,
-} from './utils.js';
-
-export const TransactionPage: React.FC = () => {
-  const { t } = useTranslation();
-  const { setFieldValue } = useFieldActions();
-  const emitter = useWidgetEvents();
-  const { navigateBack } = useNavigateBack();
-  const { subvariant, subvariantOptions, contractSecondaryComponent } =
-    useWidgetConfig();
-  const { state }: any = useLocation();
-  const stateRouteId = state?.routeId;
-  const [routeId, setRouteId] = useState<string>(stateRouteId);
-  const [routeRefreshing, setRouteRefreshing] = useState(false);
-
-  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,
-    });
-
-  const getHeaderTitle = () => {
-    if (subvariant === 'custom') {
-      return t(`header.${subvariantOptions?.custom ?? 'checkout'}`);
-    } else {
-      if (route) {
-        const transactionType =
-          route.fromChainId === route.toChainId ? 'swap' : 'bridge';
-        return status === RouteExecutionStatus.Idle
-          ? t(`button.${transactionType}Review`)
-          : t(`header.${transactionType}`);
-      }
-    }
-
-    return t(`header.exchange`);
-  };
-
-  const headerAction = useMemo(
-    () =>
-      status === RouteExecutionStatus.Idle ? (
-        <RouteTracker
-          observableRouteId={stateRouteId}
-          onChange={setRouteId}
-          onFetching={setRouteRefreshing}
-        />
-      ) : undefined,
-    [stateRouteId, status],
-  );
-
-  useHeader(getHeaderTitle(), headerAction);
-
-  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 handleExecuteRoute = () => {
-    if (tokenValueBottomSheetRef.current?.isOpen()) {
-      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
-      const fromAmountUSD = parseFloat(route.fromAmountUSD);
-      const toAmountUSD = parseFloat(route.toAmountUSD);
-      emitter.emit(WidgetEvent.RouteHighValueLoss, {
-        fromAmountUSD,
-        toAmountUSD,
-        gasCostUSD,
-        feeCostUSD,
-        valueLoss: calculateValueLossPercentage(
-          fromAmountUSD,
-          toAmountUSD,
-          gasCostUSD,
-          feeCostUSD,
-        ),
-      });
-    }
-    tokenValueBottomSheetRef.current?.close();
-    executeRoute();
-    setFieldValue('fromAmount', '');
-    if (subvariant === 'custom') {
-      setFieldValue('fromToken', '');
-      setFieldValue('toToken', '');
-    }
-  };
-
-  const handleStartClick = async () => {
-    if (status === RouteExecutionStatus.Idle) {
-      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
-      const fromAmountUSD = parseFloat(route.fromAmountUSD);
-      const toAmountUSD = parseFloat(route.toAmountUSD);
-      const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(
-        fromAmountUSD,
-        toAmountUSD,
-        gasCostUSD,
-        feeCostUSD,
-      );
-      if (tokenValueLossThresholdExceeded && subvariant !== 'custom') {
-        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 'custom':
-            return subvariantOptions?.custom === 'deposit'
-              ? t(`button.deposit`)
-              : t(`button.buy`);
-          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 '';
-    }
-  };
-
-  return (
-    <PageContainer bottomGutters>
-      {getStepList(route, subvariant)}
-      {subvariant === 'custom' && contractSecondaryComponent ? (
-        <ContractComponent sx={{ marginTop: 2 }}>
-          {contractSecondaryComponent}
-        </ContractComponent>
-      ) : null}
-      <TransactionDetails route={route} sx={{ marginTop: 2 }} />
-      {status === RouteExecutionStatus.Idle ||
-      status === RouteExecutionStatus.Failed ? (
-        <>
-          <GasMessage mt={2} route={route} />
-          <Box mt={2} display="flex">
-            <StartTransactionButton
-              text={getButtonText()}
-              onClick={handleStartClick}
-              route={route}
-              loading={routeRefreshing}
-            />
-            {status === RouteExecutionStatus.Failed ? (
-              <Tooltip
-                title={t('button.removeTransaction')}
-                placement="bottom-end"
-              >
-                <Button
-                  onClick={handleRemoveRoute}
-                  sx={{
-                    minWidth: 48,
-                    marginLeft: 1,
-                  }}
-                >
-                  <Delete />
-                </Button>
-              </Tooltip>
-            ) : null}
-          </Box>
-        </>
-      ) : null}
-      {status ? <StatusBottomSheet status={status} route={route} /> : null}
-      {subvariant !== 'custom' ? (
-        <TokenValueBottomSheet
-          route={route}
-          ref={tokenValueBottomSheetRef}
-          onContinue={handleExecuteRoute}
-        />
-      ) : null}
-      <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />
-    </PageContainer>
-  );
-};

package/pages/TransactionPage/types.ts

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

package/pages/TransactionPage/utils.ts

@@ -1,25 +0,0 @@
-export const calculateValueLossPercentage = (
-  fromAmountUSD: number,
-  toAmountUSD: number,
-  gasCostUSD: number,
-  feeCostUSD: number,
-) => {
-  return parseFloat(
-    (
-      (toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) - 1) *
-      100
-    ).toFixed(2),
-  );
-};
-
-export const getTokenValueLossThreshold = (
-  fromAmountUSD: number,
-  toAmountUSD: number,
-  gasCostUSD: number,
-  feeCostUSD: number,
-) => {
-  if (!fromAmountUSD || !toAmountUSD) {
-    return false;
-  }
-  return toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) < 0.9;
-};