@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.41

package/pages/SendToWallet/SendToWalletPage.tsx

@@ -0,0 +1,272 @@
+import { Error, History, TurnedIn, Wallet } from '@mui/icons-material';
+import { Tooltip, Typography } from '@mui/material';
+import type { ChangeEvent } from 'react';
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { ButtonTertiary } from '../../components/ButtonTertiary.js';
+import { CardButton } from '../../components/Card/CardButton.js';
+import { useAccount } from '../../hooks/useAccount.js';
+import {
+  AddressType,
+  useAddressValidation,
+} from '../../hooks/useAddressValidation.js';
+import { useChain } from '../../hooks/useChain.js';
+import { useHeader } from '../../hooks/useHeader.js';
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
+import type { Bookmark } from '../../stores/bookmarks/types.js';
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
+import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { BookmarkAddressSheet } from './BookmarkAddressSheet.js';
+import { ConfirmAddressSheet } from './ConfirmAddressSheet.js';
+import {
+  AddressInput,
+  SendToWalletButtonRow,
+  SendToWalletCard,
+  SendToWalletIconButton,
+  SendToWalletPageContainer,
+  ValidationAlert,
+} from './SendToWalletPage.style.js';
+
+export const SendToWalletPage = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null);
+  const confirmAddressSheetRef = useRef<BottomSheetBase>(null);
+  const { bookmarks, recentWallets } = useBookmarks();
+  const {
+    addBookmark,
+    getBookmark,
+    setSelectedBookmark,
+    getSelectedBookmark,
+    addRecentWallet,
+  } = useBookmarkActions();
+  const { setFieldValue } = useFieldActions();
+  const [inputAddressValue, setInputAddressValue] = useState(
+    () => getSelectedBookmark()?.address ?? '',
+  );
+  const [validatedWallet, setValidatedWallet] = useState<Bookmark>();
+  const [errorMessage, setErrorMessage] = useState('');
+  const { validateAddress, isValidating } = useAddressValidation();
+  const { accounts } = useAccount();
+  const connectedWallets = accounts.filter((account) => account.isConnected);
+  const { requiredToChainType } = useToAddressRequirements();
+  const [toChainId] = useFieldValues('toChain');
+  const { chain: toChain } = useChain(toChainId);
+  const [isDoneButtonLoading, setIsDoneButtonLoading] = useState(false);
+  const [isBookmarkButtonLoading, setIsBookmarkButtonLoading] = useState(false);
+
+  useHeader(t(`header.sendToWallet`));
+
+  const handleInputChange = (e: ChangeEvent) => {
+    if (errorMessage) {
+      setErrorMessage('');
+    }
+    if (getSelectedBookmark()) {
+      setFieldValue('toAddress', '', { isTouched: true });
+      setSelectedBookmark();
+    }
+    setInputAddressValue((e.target as HTMLInputElement).value.trim());
+  };
+
+  const handleDone = async () => {
+    if (isValidating) {
+      return;
+    }
+    if (!inputAddressValue) {
+      setErrorMessage(t('error.title.walletAddressRequired'));
+      return;
+    }
+    setIsDoneButtonLoading(true);
+    const validationResult = await validateAddress({
+      value: inputAddressValue,
+      chainType: requiredToChainType,
+      chain: toChain,
+    });
+    setIsDoneButtonLoading(false);
+    if (!validationResult.isValid) {
+      setErrorMessage(validationResult.error);
+      return;
+    }
+
+    if (
+      requiredToChainType &&
+      requiredToChainType !== validationResult.chainType
+    ) {
+      setErrorMessage(
+        t('error.title.walletChainTypeInvalid', {
+          chainName: toChain?.name,
+        }),
+      );
+      return;
+    }
+
+    setValidatedWallet({
+      name:
+        validationResult.addressType === AddressType.NameService
+          ? inputAddressValue
+          : undefined,
+      address: validationResult.address,
+      chainType: validationResult.chainType,
+    });
+    confirmAddressSheetRef.current?.open();
+  };
+
+  const handleBookmarkAddress = async () => {
+    if (isValidating) {
+      return;
+    }
+    if (!inputAddressValue) {
+      setErrorMessage(t('error.title.walletAddressRequired'));
+      return;
+    }
+
+    const existingBookmarkWallet = getBookmark(inputAddressValue);
+    if (existingBookmarkWallet) {
+      setErrorMessage(
+        t('error.title.bookmarkAlreadyExists', {
+          name: existingBookmarkWallet.name,
+        }),
+      );
+      return;
+    }
+    setIsBookmarkButtonLoading(true);
+    const validationResult = await validateAddress({
+      value: inputAddressValue,
+    });
+    setIsBookmarkButtonLoading(false);
+
+    if (validationResult.isValid) {
+      setValidatedWallet({
+        name:
+          validationResult.addressType === AddressType.NameService
+            ? inputAddressValue
+            : undefined,
+        address: validationResult.address,
+        chainType: validationResult.chainType,
+      });
+      bookmarkAddressSheetRef.current?.open();
+    } else {
+      setErrorMessage(validationResult.error);
+    }
+  };
+
+  const handleRecentWalletsClick = () => {
+    navigate(navigationRoutes.recentWallets);
+  };
+
+  const handleConnectedWalletsClick = () => {
+    navigate(navigationRoutes.connectedWallets);
+  };
+  const handleBookmarkedWalletsClick = () => {
+    navigate(navigationRoutes.bookmarks);
+  };
+
+  const handleAddBookmark = (bookmark: Bookmark) => {
+    addBookmark(bookmark);
+    navigate(navigationRoutes.bookmarks);
+  };
+
+  const handleOnConfirm = (confirmedWallet: Bookmark) => {
+    setSelectedBookmark(confirmedWallet);
+    addRecentWallet(confirmedWallet);
+  };
+
+  const placeholder = t('sendToWallet.enterAddress', {
+    context: 'long',
+  });
+
+  return (
+    <SendToWalletPageContainer bottomGutters>
+      <SendToWalletCard
+        type={errorMessage ? 'error' : 'default'}
+        sx={{
+          marginBottom: 6,
+        }}
+      >
+        <AddressInput
+          size="small"
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck="false"
+          onChange={handleInputChange}
+          value={inputAddressValue}
+          placeholder={placeholder}
+          aria-label={placeholder}
+          maxRows={2}
+          inputProps={{ maxLength: 128 }}
+          multiline
+        />
+        {errorMessage ? (
+          <ValidationAlert icon={<Error />} sx={{ pb: 2, paddingX: 2 }}>
+            {errorMessage}
+          </ValidationAlert>
+        ) : null}
+        <SendToWalletButtonRow sx={{ paddingX: 2, paddingBottom: 2 }}>
+          <ButtonTertiary
+            variant="text"
+            onClick={handleDone}
+            loading={isDoneButtonLoading}
+            loadingPosition="center"
+            sx={{ flexGrow: 1 }}
+          >
+            {t('button.done')}
+          </ButtonTertiary>
+          <Tooltip title={t('button.bookmark')} arrow>
+            <SendToWalletIconButton
+              onClick={handleBookmarkAddress}
+              loading={isBookmarkButtonLoading}
+              loadingPosition="center"
+            >
+              <TurnedIn fontSize="small" />
+            </SendToWalletIconButton>
+          </Tooltip>
+        </SendToWalletButtonRow>
+        <ConfirmAddressSheet
+          ref={confirmAddressSheetRef}
+          validatedBookmark={validatedWallet}
+          onConfirm={handleOnConfirm}
+        />
+        <BookmarkAddressSheet
+          ref={bookmarkAddressSheetRef}
+          validatedWallet={validatedWallet}
+          onAddBookmark={handleAddBookmark}
+        />
+      </SendToWalletCard>
+      <CardButton
+        title={t('header.recentWallets')}
+        icon={<History />}
+        onClick={handleRecentWalletsClick}
+      >
+        {!!recentWallets.length && (
+          <Typography color="text.secondary">{recentWallets.length}</Typography>
+        )}
+      </CardButton>
+      <CardButton
+        title={t('sendToWallet.connectedWallets')}
+        icon={<Wallet />}
+        onClick={handleConnectedWalletsClick}
+      >
+        {!!connectedWallets.length && (
+          <Typography color="text.secondary">
+            {connectedWallets.length}
+          </Typography>
+        )}
+      </CardButton>
+      <CardButton
+        title={t('header.bookmarkedWallets')}
+        icon={<TurnedIn />}
+        onClick={handleBookmarkedWalletsClick}
+      >
+        {!!bookmarks.length && (
+          <Typography color="text.secondary">{bookmarks.length}</Typography>
+        )}
+      </CardButton>
+    </SendToWalletPageContainer>
+  );
+};

package/pages/SendToWallet/types.ts

@@ -0,0 +1,4 @@
+export interface BookmarkError {
+  type: 'name' | 'address';
+  message: string;
+}

package/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -0,0 +1,50 @@
+import { AirlineStops, SwapHoriz } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { shallow } from 'zustand/shallow';
+import { CardButton } from '../../components/Card/CardButton.js';
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js';
+import { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { BadgedValue } from './SettingsCard/BadgedValue.js';
+
+const supportedIcons = {
+  Bridges: AirlineStops,
+  Exchanges: SwapHoriz,
+};
+
+export const BridgeAndExchangeSettings: React.FC<{
+  type: 'Bridges' | 'Exchanges';
+}> = ({ type }) => {
+  const { isBridgesChanged, isExchangesChanged } = useSettingMonitor();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [enabledTools, tools] = useSettingsStore((state) => {
+    const enabledTools = Object.values(state[`enabled${type}`]);
+    return [enabledTools.filter(Boolean).length, enabledTools.length];
+  }, shallow);
+
+  const customisationLookUp = {
+    Bridges: isBridgesChanged,
+    Exchanges: isExchangesChanged,
+  };
+
+  const handleClick = () => {
+    navigate(navigationRoutes[type.toLowerCase() as 'bridges' | 'exchanges']);
+  };
+
+  const Icon = supportedIcons[type];
+
+  return (
+    <CardButton
+      onClick={handleClick}
+      icon={<Icon />}
+      title={t(`settings.enabled${type}`)}
+    >
+      <BadgedValue
+        badgeColor="info"
+        showBadge={customisationLookUp[type]}
+      >{`${enabledTools}/${tools}`}</BadgedValue>
+    </CardButton>
+  );
+};

package/pages/SettingsPage/GasPriceSettings.tsx

@@ -0,0 +1,47 @@
+import { EvStation } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js';
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js';
+import { useSettings } from '../../stores/settings/useSettings.js';
+import { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
+import { BadgedValue } from './SettingsCard/BadgedValue.js';
+import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js';
+
+export const GasPriceSettings: React.FC = () => {
+  const { t } = useTranslation();
+  const setValue = useSettingsStore((state) => state.setValue);
+  const { isGasPriceChanged } = useSettingMonitor();
+  const { gasPrice } = useSettings(['gasPrice']);
+
+  const handleGasPriceChange = (_: React.SyntheticEvent, gasPrice: string) => {
+    setValue('gasPrice', gasPrice);
+  };
+
+  return (
+    <SettingCardExpandable
+      value={
+        <BadgedValue badgeColor="info" showBadge={isGasPriceChanged}>
+          {t(`settings.gasPrice.${gasPrice}` as any)}
+        </BadgedValue>
+      }
+      icon={<EvStation />}
+      title={t(`settings.gasPrice.title`)}
+    >
+      <CardTabs
+        value={gasPrice}
+        aria-label="tabs"
+        indicatorColor="primary"
+        onChange={handleGasPriceChange}
+        sx={{ mt: 1.5 }}
+      >
+        <Tab label={t(`settings.gasPrice.slow`)} value="slow" disableRipple />
+        <Tab
+          label={t(`settings.gasPrice.normal`)}
+          value="normal"
+          disableRipple
+        />
+        <Tab label={t(`settings.gasPrice.fast`)} value="fast" disableRipple />
+      </CardTabs>
+    </SettingCardExpandable>
+  );
+};

package/pages/SettingsPage/LanguageSetting.tsx

@@ -0,0 +1,34 @@
+import { Language } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { CardButton } from '../../components/Card/CardButton.js';
+import { CardValue } from '../../components/Card/CardButton.style.js';
+import { useLanguages } from '../../hooks/useLanguages.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { HiddenUI } from '../../types/widget.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+
+export const LanguageSetting: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { hiddenUI } = useWidgetConfig();
+  const { selectedLanguageDisplayName } = useLanguages();
+
+  if (hiddenUI?.includes(HiddenUI.Language)) {
+    return null;
+  }
+
+  const handleClick = () => {
+    navigate(navigationRoutes.languages);
+  };
+
+  return (
+    <CardButton
+      onClick={handleClick}
+      icon={<Language />}
+      title={t(`language.title`)}
+    >
+      <CardValue>{selectedLanguageDisplayName}</CardValue>
+    </CardButton>
+  );
+};

package/pages/SettingsPage/ResetSettingsButton.style.tsx

@@ -0,0 +1,12 @@
+import { Box, styled } from '@mui/material';
+import { getContrastAlphaColor } from '../../utils/colors.js';
+
+export const ResetButtonContainer = styled(Box)(({ theme }) => ({
+  background: getContrastAlphaColor(theme, 0.04),
+  borderRadius: '16px',
+  padding: '16px',
+
+  [`svg`]: {
+    fill: getContrastAlphaColor(theme, 0.4),
+  },
+}));

package/pages/SettingsPage/ResetSettingsButton.tsx

@@ -0,0 +1,66 @@
+import { InfoRounded } from '@mui/icons-material';
+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.js';
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js';
+import { ResetButtonContainer } from './ResetSettingsButton.style.js';
+
+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 mt={2}>
+      <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,58 @@
+import type { Order } from '@lifi/sdk';
+import { Route } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js';
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js';
+import { useSettings } from '../../stores/settings/useSettings.js';
+import { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
+import { BadgedValue } from './SettingsCard/BadgedValue.js';
+import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js';
+
+const Priorities: Order[] = ['CHEAPEST', 'FASTEST'];
+
+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: Order,
+  ) => {
+    setValue('routePriority', routePriority);
+  };
+
+  return (
+    <SettingCardExpandable
+      value={
+        <BadgedValue badgeColor="info" showBadge={isRoutePriorityChanged}>
+          {t(`main.tags.${currentRoutePriority.toLowerCase()}` as any)}
+        </BadgedValue>
+      }
+      icon={<Route />}
+      title={t(`settings.routePriority`)}
+    >
+      <CardTabs
+        value={currentRoutePriority}
+        aria-label="tabs"
+        indicatorColor="primary"
+        onChange={handleRoutePriorityChange}
+        orientation="vertical"
+        sx={{ mt: 1.5 }}
+      >
+        {Priorities.map((priority) => {
+          return (
+            <Tab
+              key={priority}
+              label={t(`main.tags.${priority.toLowerCase()}` as any)}
+              value={priority}
+              disableRipple
+            />
+          );
+        })}
+      </CardTabs>
+    </SettingCardExpandable>
+  );
+};

package/pages/SettingsPage/SettingsCard/BadgedValue.tsx

@@ -0,0 +1,22 @@
+import type { BadgeProps } from '@mui/material';
+import type { PropsWithChildren } from 'react';
+import { CardValue } from '../../../components/Card/CardButton.style.js';
+import { Badge } from './SettingCard.style.js';
+
+interface BadgedValueProps {
+  showBadge: boolean;
+  badgeColor?: BadgeProps['color'];
+}
+
+export const BadgedValue: React.FC<PropsWithChildren<BadgedValueProps>> = ({
+  showBadge,
+  badgeColor,
+  children,
+}) =>
+  showBadge && badgeColor ? (
+    <Badge variant="dot" color={badgeColor}>
+      <CardValue>{children}</CardValue>
+    </Badge>
+  ) : (
+    <CardValue>{children}</CardValue>
+  );

package/pages/SettingsPage/SettingsCard/SettingCard.style.tsx

@@ -0,0 +1,21 @@
+import { Box, Badge as MuiBadge, badgeClasses, styled } from '@mui/material';
+
+export const SettingsList = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1),
+}));
+
+export const Badge = styled(MuiBadge)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1.25),
+  [`.${badgeClasses.badge}`]: {
+    width: 10,
+    height: 10,
+    // the following removes MUI styling so we can position the badge with flex
+    position: 'relative',
+    transform: 'translateX(0)',
+    borderRadius: '50%',
+  },
+}));

package/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx

@@ -0,0 +1,50 @@
+import { Collapse } from '@mui/material';
+import type { PropsWithChildren, ReactNode } from 'react';
+import { useId } from 'react';
+import { Card } from '../../../components/Card/Card.js';
+import {
+  CardRowButton,
+  CardTitleContainer,
+  CardValue,
+} from '../../../components/Card/CardButton.style.js';
+import { useSettingsCardExpandable } from './SettingsAccordian.js';
+import type { SettingCardTitle } from './types.js';
+
+interface SettingCardExpandableProps extends SettingCardTitle {
+  value: ReactNode;
+}
+
+export const SettingCardExpandable: React.FC<
+  PropsWithChildren<SettingCardExpandableProps>
+> = ({ icon, title, value, children }) => {
+  const { expanded, toggleExpanded } = useSettingsCardExpandable();
+  const buttonId = useId();
+  const collapseId = useId();
+
+  return (
+    <Card sx={{ p: 1 }}>
+      <CardRowButton
+        id={buttonId}
+        aria-expanded={expanded}
+        aria-controls={collapseId}
+        onClick={toggleExpanded}
+        disableRipple
+        sx={{ p: 1 }}
+      >
+        <CardTitleContainer>
+          {icon}
+          <CardValue>{title}</CardValue>
+        </CardTitleContainer>
+        {!expanded && value}
+      </CardRowButton>
+      <Collapse
+        id={collapseId}
+        role="region"
+        aria-labelledby={buttonId}
+        in={expanded}
+      >
+        {children}
+      </Collapse>
+    </Card>
+  );
+};

package/pages/SettingsPage/SettingsPage.tsx

@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next';
+import { PageContainer } from '../../components/PageContainer.js';
+import { useHeader } from '../../hooks/useHeader.js';
+import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js';
+import { GasPriceSettings } from './GasPriceSettings.js';
+import { LanguageSetting } from './LanguageSetting.js';
+import { ResetSettingsButton } from './ResetSettingsButton.js';
+import { RoutePrioritySettings } from './RoutePrioritySettings.js';
+import { SettingsList } from './SettingsCard/SettingCard.style.js';
+import { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js';
+import { SlippageSettings } from './SlippageSettings/SlippageSettings.js';
+import { ThemeSettings } from './ThemeSettings.js';
+
+export const SettingsPage = () => {
+  const { t } = useTranslation();
+  useHeader(t(`header.settings`));
+
+  return (
+    <PageContainer bottomGutters>
+      <SettingsList>
+        <SettingsCardAccordion>
+          <ThemeSettings />
+          <LanguageSetting />
+          <RoutePrioritySettings />
+          <GasPriceSettings />
+          <SlippageSettings />
+          <BridgeAndExchangeSettings type="Bridges" />
+          <BridgeAndExchangeSettings type="Exchanges" />
+        </SettingsCardAccordion>
+      </SettingsList>
+      <ResetSettingsButton />
+    </PageContainer>
+  );
+};