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

package/pages/SettingsPage/ResetSettingsButton.style.tsx

@@ -0,0 +1,13 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { getContrastAlphaColor } from '../../utils';
+
+export const ResetButtonContainer = styled(Box)(({ theme }) => ({
+  background: getContrastAlphaColor(theme.palette.mode, '4%'),
+  borderRadius: '16px',
+  padding: '16px',
+
+  [`svg`]: {
+    fill: getContrastAlphaColor(theme.palette.mode, '40%'),
+  },
+}));

package/pages/SettingsPage/ResetSettingsButton.tsx

@@ -0,0 +1,66 @@
+import InfoRounded from '@mui/icons-material/InfoRounded';
+import {
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from '@mui/material';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Dialog } from '../../components/Dialog';
+import { useSettingMonitor } from '../../hooks';
+import { ResetButtonContainer } from './ResetSettingsButton.style';
+
+export const ResetSettingsButton: React.FC = () => {
+  const { t } = useTranslation();
+  const { isCustomRouteSettings, reset } = useSettingMonitor();
+  const [open, setOpen] = useState(false);
+
+  const toggleDialog = useCallback(() => {
+    setOpen((open) => !open);
+  }, []);
+
+  const handleReset = () => {
+    reset();
+    toggleDialog();
+  };
+
+  if (!isCustomRouteSettings) {
+    return null;
+  }
+
+  return (
+    <Box px={3} mb={1}>
+      <ResetButtonContainer>
+        <Box display="flex" marginBottom="12px">
+          <InfoRounded
+            sx={{
+              marginRight: '8px',
+            }}
+          />
+          <Box fontSize={14}>{t(`settings.resetSettings`)}</Box>
+        </Box>
+        <Button onClick={toggleDialog} fullWidth>
+          {t('button.resetSettings')}
+        </Button>
+
+        <Dialog open={open} onClose={toggleDialog}>
+          <DialogTitle>{t('warning.title.resetSettings')}</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              {t('warning.message.resetSettings')}
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={toggleDialog}>{t('button.cancel')}</Button>
+            <Button variant="contained" onClick={handleReset} autoFocus>
+              {t('button.reset')}
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </ResetButtonContainer>
+    </Box>
+  );
+};

package/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -0,0 +1,56 @@
+import { Orders } from '@lifi/sdk';
+import RouteIcon from '@mui/icons-material/Route';
+import { useTranslation } from 'react-i18next';
+import { Tab, Tabs } from '../../components/Tabs';
+import { useSettingMonitor } from '../../hooks';
+import { useSettings, useSettingsStore } from '../../stores';
+import { BadgedValue, SettingCardExpandable } from './SettingsCard';
+
+type SupportedRoute = (typeof Orders)[number];
+
+export const RoutePrioritySettings: React.FC = () => {
+  const { t } = useTranslation();
+  const setValue = useSettingsStore((state) => state.setValue);
+  const { isRoutePriorityChanged } = useSettingMonitor();
+  const { routePriority } = useSettings(['routePriority']);
+  const currentRoutePriority = routePriority ?? '';
+
+  const handleRoutePriorityChange = (
+    _: React.SyntheticEvent,
+    routePriority: SupportedRoute,
+  ) => {
+    setValue('routePriority', routePriority);
+  };
+
+  return (
+    <SettingCardExpandable
+      value={
+        <BadgedValue badgeColor="info" showBadge={isRoutePriorityChanged}>
+          {t(`main.tags.${currentRoutePriority.toLowerCase()}` as any)}
+        </BadgedValue>
+      }
+      icon={<RouteIcon />}
+      title={t(`settings.routePriority`)}
+    >
+      <Tabs
+        value={currentRoutePriority}
+        aria-label="tabs"
+        indicatorColor="primary"
+        onChange={handleRoutePriorityChange}
+        orientation="vertical"
+        sx={{ mt: 1.5 }}
+      >
+        {Orders.map((order) => {
+          return (
+            <Tab
+              key={order}
+              label={t(`main.tags.${order.toLowerCase()}` as any)}
+              value={order}
+              disableRipple
+            />
+          );
+        })}
+      </Tabs>
+    </SettingCardExpandable>
+  );
+};

package/pages/SettingsPage/SendToWalletOptionSetting.tsx

@@ -0,0 +1,48 @@
+import WalletIcon from '@mui/icons-material/Wallet';
+import type { ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Switch } from '../../components/Switch';
+import { useWidgetConfig } from '../../providers';
+import {
+  useSendToWalletStore,
+  useSettings,
+  useSettingsStore,
+} from '../../stores';
+import { HiddenUI } from '../../types';
+import {
+  SettingCard,
+  SummaryRowContainer,
+  SummaryTitleContainer,
+  SummaryValue,
+} from './SettingsCard';
+
+export const SendToWalletOptionSetting = () => {
+  const { t } = useTranslation();
+  const { hiddenUI } = useWidgetConfig();
+  const setSendToWallet = useSendToWalletStore(
+    (state) => state.setSendToWallet,
+  );
+  const setValue = useSettingsStore((state) => state.setValue);
+  const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+
+  if (hiddenUI?.includes(HiddenUI.ToAddress)) {
+    return null;
+  }
+
+  const onChange = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+    setValue('showDestinationWallet', checked);
+    setSendToWallet(false);
+  };
+
+  return (
+    <SettingCard>
+      <SummaryRowContainer>
+        <SummaryTitleContainer>
+          <WalletIcon />
+          <SummaryValue>{t(`settings.sendToWalletOption`)}</SummaryValue>
+        </SummaryTitleContainer>
+        <Switch checked={showDestinationWallet} onChange={onChange} />
+      </SummaryRowContainer>
+    </SettingCard>
+  );
+};

package/pages/SettingsPage/SettingsCard/index.ts

@@ -0,0 +1,6 @@
+export * from './SettingCard';
+export * from './SettingCard.style';
+export * from './SettingCardButton';
+export * from './SettingCardExpandable';
+export * from './BadgedValue';
+export * from './SettingsAccordian';

package/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -0,0 +1,114 @@
+import PercentIcon from '@mui/icons-material/Percent';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import { Box, Typography } from '@mui/material';
+import type { ChangeEventHandler, FocusEventHandler } from 'react';
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSettingMonitor } from '../../../hooks';
+import { useSettings, useSettingsStore } from '../../../stores';
+import { formatSlippage } from '../../../utils';
+import { BadgedValue, SettingCardExpandable } from '../SettingsCard';
+import {
+  SettingsFieldSet,
+  SlippageCustomInput,
+  SlippageDefaultButton,
+  SlippageLimitsWarningContainer,
+} from './SlippageSettings.style';
+
+const slippageDefault = '0.5';
+
+export const SlippageSettings: React.FC = () => {
+  const { t } = useTranslation();
+  const { isSlippageOutsideRecommendedLimits, isSlippageChanged } =
+    useSettingMonitor();
+  const { slippage } = useSettings(['slippage']);
+  const setValue = useSettingsStore((state) => state.setValue);
+  const defaultValue = useRef(slippage);
+  const [focused, setFocused] = useState<'input' | 'button' | undefined>();
+
+  const handleDefaultClick = () => {
+    setValue('slippage', formatSlippage(slippageDefault, defaultValue.current));
+  };
+
+  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {
+    const { value } = event.target;
+
+    setValue(
+      'slippage',
+      formatSlippage(value || slippageDefault, defaultValue.current, true),
+    );
+  };
+
+  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    setFocused(undefined);
+
+    const { value } = event.target;
+
+    setValue(
+      'slippage',
+      formatSlippage(value || slippageDefault, defaultValue.current),
+    );
+  };
+
+  const customInputValue =
+    !slippage || slippage === slippageDefault ? '' : slippage;
+
+  const badgeColor = isSlippageOutsideRecommendedLimits
+    ? 'warning'
+    : isSlippageChanged
+      ? 'info'
+      : undefined;
+
+  return (
+    <SettingCardExpandable
+      value={
+        <BadgedValue
+          badgeColor={badgeColor}
+          showBadge={!!badgeColor}
+        >{`${slippage}%`}</BadgedValue>
+      }
+      icon={<PercentIcon />}
+      title={t(`settings.slippage`)}
+    >
+      <Box mt={1.5}>
+        <SettingsFieldSet>
+          <SlippageDefaultButton
+            selected={slippageDefault === slippage && focused !== 'input'}
+            onFocus={() => {
+              setFocused('button');
+            }}
+            onBlur={() => {
+              setFocused(undefined);
+            }}
+            onClick={handleDefaultClick}
+            disableRipple
+          >
+            {slippageDefault}
+          </SlippageDefaultButton>
+          <SlippageCustomInput
+            selected={slippageDefault !== slippage && focused !== 'button'}
+            placeholder={focused === 'input' ? '' : t('settings.custom')}
+            inputProps={{
+              inputMode: 'decimal',
+            }}
+            onChange={handleInputUpdate}
+            onFocus={() => {
+              setFocused('input');
+            }}
+            onBlur={handleInputBlur}
+            value={customInputValue}
+            autoComplete="off"
+          />
+        </SettingsFieldSet>
+        {isSlippageOutsideRecommendedLimits && (
+          <SlippageLimitsWarningContainer>
+            <WarningRoundedIcon color="warning" />
+            <Typography fontSize={13} fontWeight={400}>
+              {t('warning.message.slippageOutsideRecommendedLimits')}
+            </Typography>
+          </SlippageLimitsWarningContainer>
+        )}
+      </Box>
+    </SettingCardExpandable>
+  );
+};

package/pages/SettingsPage/SlippageSettings/index.ts

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

package/pages/SettingsPage/ThemeSettings.tsx

@@ -0,0 +1,84 @@
+import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import NightlightIcon from '@mui/icons-material/Nightlight';
+import { Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Tab, Tabs } from '../../components/Tabs';
+import { useWidgetConfig } from '../../providers';
+import { useAppearance } from '../../stores';
+import type { Appearance } from '../../types';
+import { HiddenUI } from '../../types';
+import { SettingCardExpandable, SummaryValue } from './SettingsCard';
+
+const themeIcons = {
+  light: LightModeIcon,
+  dark: NightlightIcon,
+  auto: BrightnessAutoIcon,
+};
+
+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/pages/SettingsPage/index.ts

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

package/pages/TransactionDetailsPage/index.ts

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

package/pages/TransactionHistoryPage/index.ts

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

package/pages/TransactionPage/StatusBottomSheet.tsx

@@ -0,0 +1,272 @@
+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 { 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 { useWidgetConfig } from '../../providers';
+import type { RouteExecution } from '../../stores';
+import {
+  RouteExecutionStatus,
+  getSourceTxHash,
+  useFieldActions,
+} 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 { setFieldValue } = useFieldActions();
+  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();
+    setFieldValue('fromAmount', '');
+    setFieldValue('toAmount', '');
+  };
+
+  const handleDone = () => {
+    clearFromAmount();
+    navigateBack();
+  };
+
+  const handlePartialDone = () => {
+    clearFromAmount();
+    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 = () => {
+    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>
+  );
+};