@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/pages/TransactionHistoryPage/TransactionHistorySkeleton.tsx

@@ -0,0 +1,87 @@
+import { Box, Skeleton } from '@mui/material';
+import { Card } from '../../components/Card';
+import { TokenDivider } from '../../components/Token';
+
+const TokenSkeleton = ({ showDivider }: { showDivider?: boolean }) => {
+  return (
+    <Box flex={1} px={2} pt={showDivider ? 1 : 0.5} pb={showDivider ? 0 : 1}>
+      <Box display="flex" flex={1} alignItems="center">
+        <Skeleton
+          variant="rounded"
+          width={32}
+          height={32}
+          sx={{
+            borderRadius: '100%',
+          }}
+        />
+        <Box display="flex" flexDirection="column" flex={1} ml={2}>
+          <Skeleton width={40} height={30} variant="text" />
+        </Box>
+      </Box>
+      <Box display="flex" marginLeft="-16px">
+        <Box
+          display="flex"
+          flexDirection={'column'}
+          marginTop={0.5}
+          visibility={showDivider ? 'visible' : 'hidden'}
+        >
+          <TokenDivider />
+        </Box>
+        <Skeleton
+          width={64}
+          height={12}
+          sx={{ marginTop: 0.5 }}
+          variant="rounded"
+        />
+        <Skeleton
+          width={96}
+          height={12}
+          variant="rounded"
+          sx={{ marginTop: 0.5, marginLeft: 0.5 }}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export const TransactionHistorySkeleton = () => {
+  return (
+    <Card
+      style={{
+        marginBottom: '16px',
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flex: 1,
+          justifyContent: 'space-between',
+        }}
+        pt={2}
+        px={2}
+      >
+        <Skeleton
+          variant="rectangular"
+          width={96}
+          height={16}
+          sx={(theme) => ({
+            borderRadius: `${theme.shape.borderRadius}px`,
+          })}
+        />
+        <Skeleton
+          variant="rectangular"
+          width={64}
+          height={16}
+          sx={(theme) => ({
+            borderRadius: `${theme.shape.borderRadius}px`,
+          })}
+        />
+      </Box>
+      <Box py={1}>
+        <TokenSkeleton showDivider />
+        <TokenDivider />
+        <TokenSkeleton />
+      </Box>
+    </Card>
+  );
+};

package/src/pages/TransactionHistoryPage/constants.ts

@@ -0,0 +1 @@
+export const minTransactionListHeight = 544;

package/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -0,0 +1,163 @@
+import type { ExchangeRateUpdateParams } from '@lifi/sdk';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import { Box, Button, Typography } from '@mui/material';
+import type { MutableRefObject } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import type { BottomSheetBase } from '../../components/BottomSheet';
+import { BottomSheet } from '../../components/BottomSheet';
+import { useSetContentHeight } from '../../hooks';
+import { formatTokenAmount } from '../../utils';
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
+
+export interface ExchangeRateBottomSheetBase {
+  isOpen(): void;
+  open(
+    resolver: (value: boolean) => void,
+    data: ExchangeRateUpdateParams,
+  ): void;
+  close(value?: boolean, bottomSheetClose?: boolean): void;
+}
+
+interface ExchangeRateBottomSheetProps {
+  data?: ExchangeRateUpdateParams;
+  onContinue?(): void;
+  onCancel?(): void;
+}
+
+export const ExchangeRateBottomSheet = forwardRef<
+  ExchangeRateBottomSheetBase,
+  ExchangeRateBottomSheetProps
+>(({ onContinue, onCancel }, ref) => {
+  const [data, setData] = useState<ExchangeRateUpdateParams>();
+  const bottomSheetRef = useRef<BottomSheetBase>(null);
+  const resolverRef = useRef<(value: boolean) => void>();
+
+  const handleContinue = () => {
+    (ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(true);
+    onContinue?.();
+  };
+
+  const handleCancel = useCallback(() => {
+    (ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(
+      false,
+    );
+    onCancel?.();
+  }, [onCancel, ref]);
+
+  const handleClose = useCallback(() => {
+    (ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(
+      false,
+      false,
+    );
+    onCancel?.();
+  }, [onCancel, ref]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      isOpen: () => bottomSheetRef.current?.isOpen(),
+      open: (resolver, data) => {
+        setData(data);
+        resolverRef.current = resolver;
+        bottomSheetRef.current?.open();
+      },
+      close: (value = false, bottomSheetClose = true) => {
+        resolverRef.current?.(value);
+        if (bottomSheetClose) {
+          bottomSheetRef.current?.close();
+        }
+      },
+    }),
+    [],
+  );
+
+  return (
+    <BottomSheet ref={bottomSheetRef} onClose={handleClose}>
+      <ExchangeRateBottomSheetContent
+        data={data}
+        onContinue={handleContinue}
+        onCancel={handleCancel}
+      />
+    </BottomSheet>
+  );
+});
+
+const ExchangeRateBottomSheetContent: React.FC<
+  ExchangeRateBottomSheetProps
+> = ({ data, onCancel, onContinue }) => {
+  const { t } = useTranslation();
+  const ref = useRef<HTMLElement>();
+  useSetContentHeight(ref);
+
+  if (!data) {
+    return;
+  }
+
+  const oldAmount = BigInt(data.oldToAmount || 1);
+  const rateChange = (
+    (Number((BigInt(data.newToAmount || 0) * 1_000_000n) / oldAmount) /
+      1_000_000) *
+      100 -
+    100
+  ).toFixed(2);
+
+  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.rateChanged')}
+        </Typography>
+      </CenterContainer>
+      <Typography py={1}>{t('warning.message.rateChanged')}</Typography>
+      <Box display="flex" justifyContent="space-between" mt={1}>
+        <Typography>{t('main.quotedAmount')}</Typography>
+        <Typography fontWeight={600}>
+          {t('format.number', {
+            value: formatTokenAmount(
+              BigInt(data.oldToAmount),
+              data.toToken.decimals,
+              5,
+            ),
+          })}{' '}
+          {data?.toToken.symbol}
+        </Typography>
+      </Box>
+      <Box display="flex" justifyContent="space-between" mt={0.25}>
+        <Typography>{t('main.currentAmount')}</Typography>
+        <Typography fontWeight={600}>
+          {t('format.number', {
+            value: formatTokenAmount(
+              BigInt(data?.newToAmount),
+              data?.toToken.decimals,
+              5,
+            ),
+          })}{' '}
+          {data?.toToken.symbol}
+        </Typography>
+      </Box>
+      <Box display="flex" justifyContent="space-between" mt={0.25}>
+        <Typography>{t('main.rateChange')}</Typography>
+        <Typography fontWeight={600}>{rateChange}%</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/src/pages/TransactionPage/StartTransactionButton.tsx

@@ -0,0 +1,56 @@
+import { BaseTransactionButton } from '../../components/BaseTransactionButton';
+import {
+  useFromTokenSufficiency,
+  useGasSufficiency,
+  useRoutes,
+} from '../../hooks';
+import { useRouteExecutionStore } from '../../stores';
+import type { StartTransactionButtonProps } from './types';
+
+export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
+  onClick,
+  route,
+  text,
+  loading,
+}) => {
+  const { insufficientGas, isLoading: isGasSufficiencyLoading } =
+    useGasSufficiency(route);
+  const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } =
+    useFromTokenSufficiency(route);
+
+  const shouldDisableButton =
+    insufficientFromToken || !!insufficientGas?.length;
+
+  return (
+    <BaseTransactionButton
+      onClick={onClick}
+      text={text}
+      disabled={shouldDisableButton}
+      loading={
+        isFromTokenSufficiencyLoading || isGasSufficiencyLoading || loading
+      }
+    />
+  );
+};
+
+export const StartInsurableTransactionButton: React.FC<
+  StartTransactionButtonProps
+> = ({ onClick, text, route, loading, disabled, insurableRouteId }) => {
+  const routeExecution = useRouteExecutionStore(
+    (state) => state.routes[insurableRouteId],
+  );
+  const { isFetching } = useRoutes({
+    insurableRoute: routeExecution?.route,
+  });
+
+  return (
+    <StartTransactionButton
+      onClick={onClick}
+      text={text}
+      route={route}
+      disabled={disabled}
+      loading={loading || isFetching}
+      insurableRouteId={insurableRouteId}
+    />
+  );
+};

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

@@ -0,0 +1,55 @@
+import type { Theme } from '@mui/material';
+import { Box } from '@mui/material';
+import { alpha, darken, styled } from '@mui/material/styles';
+import { RouteExecutionStatus } from '../../stores';
+
+type StatusColor = RouteExecutionStatus | 'warning';
+
+const getStatusColor = (status: StatusColor, theme: Theme) => {
+  switch (status) {
+    case RouteExecutionStatus.Done:
+      return { color: theme.palette.success.main, alpha: 0.12, darken: 0 };
+    case RouteExecutionStatus.Failed:
+      return { color: theme.palette.error.main, alpha: 0.12, darken: 0 };
+    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
+    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
+    case 'warning':
+      return {
+        color: theme.palette.warning.main,
+        alpha: 0.48,
+        darken: theme.palette.mode === 'light' ? 0.32 : 0,
+      };
+    default:
+      return { color: theme.palette.primary.main, alpha: 0.12, darken: 0 };
+  }
+};
+
+export const CenterContainer = styled(Box)(({ theme }) => ({
+  display: 'grid',
+  placeItems: 'center',
+  position: 'relative',
+}));
+
+export const IconCircle = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'status',
+})<{ status: StatusColor }>(({ theme, status }) => {
+  const {
+    color,
+    alpha: alphaValue,
+    darken: darkenValue,
+  } = getStatusColor(status, theme);
+  return {
+    backgroundColor: alpha(color, alphaValue),
+    borderRadius: '50%',
+    width: 64,
+    height: 64,
+    display: 'grid',
+    position: 'relative',
+    placeItems: 'center',
+    '& > svg': {
+      color: darken(color, darkenValue),
+      width: 32,
+      height: 32,
+    },
+  };
+});

package/src/pages/TransactionPage/StatusBottomSheet.tsx

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