@lifi/widget 3.0.0-alpha.1 → 3.0.0-alpha.11

package/src/pages/SettingsPage/ThemeSettings.tsx

@@ -1,84 +0,0 @@
-import type { Appearance } from '../../types';
-import { HiddenUI } from '../../types';
-import { useWidgetConfig } from '../../providers';
-import LightModeIcon from '@mui/icons-material/LightMode';
-import BrightnessAuto from '@mui/icons-material/BrightnessAuto';
-import Nightlight from '@mui/icons-material/Nightlight';
-import { Tooltip } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useAppearance } from '../../stores';
-import { SettingCardExpandable, SummaryValue } from './SettingsCard';
-import { Tab, Tabs } from '../../components/Tabs';
-
-const themeIcons = {
-  light: LightModeIcon,
-  dark: Nightlight,
-  auto: BrightnessAuto,
-};
-
-interface ThemeTabProps {
-  title: string;
-  value: Appearance;
-  Icon: React.ReactElement;
-}
-
-// If the Tab is not the direct child of the Tabs component you can loose the switching
-// The component passes the props to the Tab component so switching isn't lost
-const ThemeTab: React.FC<ThemeTabProps> = ({
-  title,
-  value,
-  Icon,
-  ...props
-}) => (
-  <Tooltip title={title} arrow>
-    <Tab icon={Icon} value={value} {...props} disableRipple />
-  </Tooltip>
-);
-
-export const ThemeSettings: React.FC = () => {
-  const { t } = useTranslation();
-  const [appearance, setAppearance] = useAppearance();
-  const { hiddenUI } = useWidgetConfig();
-
-  if (hiddenUI?.includes(HiddenUI.Appearance)) {
-    return null;
-  }
-
-  const ThemeIcon = themeIcons[appearance];
-
-  const handleThemeChange = (
-    _: React.SyntheticEvent,
-    appearance: Appearance,
-  ) => {
-    setAppearance(appearance);
-  };
-
-  return (
-    <SettingCardExpandable
-      value={<SummaryValue>{t(`button.${appearance}`)} </SummaryValue>}
-      icon={<ThemeIcon />}
-      title={t('settings.theme')}
-    >
-      <Tabs
-        value={appearance}
-        aria-label="tabs"
-        indicatorColor="primary"
-        onChange={handleThemeChange}
-        sx={{ mt: 1.5 }}
-      >
-        {Object.entries(themeIcons).map(([theme, Icon]) => {
-          const supportedThemeOption = theme as Appearance;
-
-          return (
-            <ThemeTab
-              key={supportedThemeOption}
-              title={t(`button.${supportedThemeOption}`)}
-              value={supportedThemeOption}
-              Icon={<Icon />}
-            />
-          );
-        })}
-      </Tabs>
-    </SettingCardExpandable>
-  );
-};

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.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>
-  );
-};