@lifi/widget 3.0.0-alpha.7 → 3.0.0-alpha.8

package/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>
+  );
+};

package/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -0,0 +1,104 @@
+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/pages/TransactionPage/TransactionPage.style.tsx

@@ -0,0 +1,6 @@
+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/pages/TransactionPage/TransactionPage.tsx

@@ -0,0 +1,236 @@
+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/pages/TransactionPage/index.ts

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

package/pages/TransactionPage/types.ts

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

package/pages/TransactionPage/utils.ts

@@ -0,0 +1,10 @@
+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/providers/FormProvider/FormProvider.tsx

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