@lifi/widget 3.0.0-alpha.17 → 3.0.0-alpha.19

package/pages/SendToWallet/RecentWalletsPage.tsx

@@ -0,0 +1,215 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteIcon from '@mui/icons-material/Delete';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import TurnedInIcon from '@mui/icons-material/TurnedIn';
+import WalletIcon from '@mui/icons-material/Wallet';
+import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material';
+import { useId, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { AccountAvatar } from '../../components/AccountAvatar';
+import type { BottomSheetBase } from '../../components/BottomSheet';
+import { ListItem, ListItemButton } from '../../components/ListItem';
+import { Menu } from '../../components/Menu';
+import { useChains, useToAddressRequirements } from '../../hooks';
+import type { Bookmark } from '../../stores';
+import { useBookmarkActions, useBookmarks } from '../../stores';
+import {
+  defaultChainIdsByType,
+  navigationRoutes,
+  shortenAddress,
+} from '../../utils';
+import { BookmarkAddressSheet } from './BookmarkAddressSheet';
+import { ConfirmAddressSheet } from './ConfirmAddressSheet';
+import { EmptyListIndicator } from './EmptyListIndicator';
+import {
+  ListContainer,
+  OptionsMenuButton,
+  SendToWalletPageContainer,
+} from './SendToWalletPage.style';
+
+export const RecentWalletsPage = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [selectedRecent, setSelectedRecent] = useState<Bookmark>();
+  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null);
+  const confirmAddressSheetRef = useRef<BottomSheetBase>(null);
+  const { recentWallets } = useBookmarks();
+  const { requiredToChainType } = useToAddressRequirements();
+  const {
+    removeRecentWallet,
+    addBookmark,
+    setSelectedBookmark,
+    addRecentWallet,
+  } = useBookmarkActions();
+  const { getChainById } = useChains();
+  const moreMenuId = useId();
+  const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>();
+  const open = Boolean(moreMenuAnchorEl);
+
+  const handleRecentSelected = (recentWallet: Bookmark) => {
+    setSelectedRecent(recentWallet);
+    confirmAddressSheetRef.current?.open();
+  };
+
+  const handleAddBookmark = (bookmark: Bookmark) => {
+    addBookmark(bookmark);
+    navigate(`../${navigationRoutes.bookmarks}`, {
+      relative: 'path',
+      replace: true,
+    });
+  };
+
+  const handleOnConfirm = (confirmedBookmark: Bookmark) => {
+    setSelectedBookmark(confirmedBookmark);
+    addRecentWallet(confirmedBookmark);
+  };
+
+  const closeMenu = () => {
+    setMenuAnchorEl(null);
+  };
+
+  const handleMenuOpen = (el: HTMLElement, recentWallet: Bookmark) => {
+    setMenuAnchorEl(el);
+    setSelectedRecent(recentWallet);
+  };
+
+  const handleCopyAddress = () => {
+    if (selectedRecent) {
+      navigator.clipboard.writeText(selectedRecent.address);
+    }
+    closeMenu();
+  };
+
+  const handleViewOnExplorer = () => {
+    if (selectedRecent) {
+      const chain = getChainById(
+        defaultChainIdsByType[selectedRecent.chainType],
+      );
+      window.open(
+        `${chain?.metamask.blockExplorerUrls[0]}address/${selectedRecent.address}`,
+        '_blank',
+      );
+    }
+    closeMenu();
+  };
+
+  const handleOpenBookmarkSheet = () => {
+    if (selectedRecent) {
+      setSelectedRecent(selectedRecent);
+      bookmarkAddressSheetRef.current?.open();
+    }
+    closeMenu();
+  };
+
+  const handleRemoveRecentWallet = () => {
+    if (selectedRecent) {
+      removeRecentWallet(selectedRecent.address);
+    }
+    closeMenu();
+  };
+
+  return (
+    <SendToWalletPageContainer disableGutters>
+      <ListContainer sx={{ minHeight: 418 }}>
+        {recentWallets.map((recentWallet) => (
+          <ListItem key={recentWallet.address} sx={{ position: 'relative' }}>
+            <ListItemButton
+              disabled={
+                requiredToChainType &&
+                requiredToChainType !== recentWallet.chainType
+              }
+              onClick={() => handleRecentSelected(recentWallet)}
+            >
+              <ListItemAvatar>
+                <AccountAvatar
+                  chainId={defaultChainIdsByType[recentWallet.chainType]}
+                />
+              </ListItemAvatar>
+              <ListItemText
+                primary={
+                  recentWallet.name || shortenAddress(recentWallet.address)
+                }
+                secondary={
+                  recentWallet.name
+                    ? shortenAddress(recentWallet.address)
+                    : undefined
+                }
+              />
+            </ListItemButton>
+            <OptionsMenuButton
+              aria-label={t('button.options')}
+              aria-controls={
+                open && recentWallet.address === selectedRecent?.address
+                  ? moreMenuId
+                  : undefined
+              }
+              aria-haspopup="true"
+              aria-expanded={open ? 'true' : undefined}
+              onClick={(e) =>
+                handleMenuOpen(e.target as HTMLElement, recentWallet)
+              }
+              sx={{
+                opacity:
+                  requiredToChainType &&
+                  requiredToChainType !== recentWallet.chainType
+                    ? 0.5
+                    : 1,
+              }}
+            >
+              <MoreHorizIcon fontSize="small" />
+            </OptionsMenuButton>
+          </ListItem>
+        ))}
+        {!recentWallets.length && (
+          <EmptyListIndicator icon={<WalletIcon sx={{ fontSize: 48 }} />}>
+            {t('sendToWallet.noRecentWallets')}
+          </EmptyListIndicator>
+        )}
+        <Menu
+          id={moreMenuId}
+          elevation={0}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          anchorEl={moreMenuAnchorEl}
+          open={open}
+          onClose={closeMenu}
+        >
+          <MenuItem onClick={handleCopyAddress}>
+            <ContentCopyIcon />
+            {t('button.copyAddress')}
+          </MenuItem>
+          <MenuItem onClick={handleViewOnExplorer}>
+            <OpenInNewIcon />
+            {t('button.viewOnExplorer')}
+          </MenuItem>
+          <MenuItem onClick={handleOpenBookmarkSheet}>
+            <TurnedInIcon />
+            {t('button.bookmark')}
+          </MenuItem>
+          <MenuItem onClick={handleRemoveRecentWallet}>
+            <DeleteIcon />
+            {t('button.delete')}
+          </MenuItem>
+        </Menu>
+      </ListContainer>
+      <BookmarkAddressSheet
+        ref={bookmarkAddressSheetRef}
+        validatedWallet={selectedRecent}
+        onAddBookmark={handleAddBookmark}
+      />
+      <ConfirmAddressSheet
+        ref={confirmAddressSheetRef}
+        validatedBookmark={selectedRecent}
+        onConfirm={handleOnConfirm}
+      />
+    </SendToWalletPageContainer>
+  );
+};

package/pages/SendToWallet/SendToWalletPage.style.tsx

@@ -0,0 +1,182 @@
+import type { Theme } from '@mui/material';
+import {
+  Alert,
+  Box,
+  Button,
+  IconButton,
+  List,
+  Typography,
+  alertClasses,
+  inputBaseClasses,
+  styled,
+} from '@mui/material';
+import { Card } from '../../components/Card';
+import { Input } from '../../components/Input';
+import type { PageContainerProps } from '../../components/PageContainer';
+import { PageContainer } from '../../components/PageContainer';
+import { getContrastAlphaColor } from '../../utils';
+
+export const AddressInput = styled(Input)(({ theme }) => ({
+  padding: 0,
+  [`.${inputBaseClasses.input}`]: {
+    padding: theme.spacing(2),
+    minHeight: 48,
+  },
+}));
+
+export const BookmarkInputFields = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(2),
+  width: '100%',
+}));
+
+export const SendToWalletPageContainer = styled(
+  PageContainer,
+)<PageContainerProps>(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1),
+}));
+
+export const SendToWalletCard = styled(Card)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+}));
+
+export const SendToWalletSheetContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  padding: theme.spacing(6, 3, 3),
+  gap: theme.spacing(3),
+}));
+
+export const SendToWalletButtonRow = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  width: '100%',
+  gap: theme.spacing(1),
+}));
+
+const tertiaryButtonStyles = (theme: Theme) => ({
+  color: theme.palette.text.primary,
+  height: 40,
+  fontSize: 14,
+  backgroundColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[200]
+      : theme.palette.grey[800],
+  '&:hover': {
+    backgroundColor:
+      theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[700],
+  },
+  '&:active': {
+    backgroundColor:
+      theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[700],
+  },
+});
+
+export const SendToWalletButton = styled(Button)(({ theme }) => ({
+  ...tertiaryButtonStyles(theme),
+}));
+
+export const SendToWalletIconButton = styled(Button)(({ theme }) => ({
+  ...tertiaryButtonStyles(theme),
+  padding: theme.spacing(1.25),
+  minWidth: 40,
+}));
+
+export const WalletNumber = styled(Typography)(({ theme }) => ({
+  color:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[600]
+      : theme.palette.grey[400],
+}));
+
+export const IconContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 96,
+  height: 96,
+  color:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[700]
+      : theme.palette.grey[300],
+  background:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[200]
+      : theme.palette.grey[800],
+  borderRadius: '50%',
+}));
+
+export const SheetTitle = styled(Typography)(() => ({
+  fontSize: 18,
+  fontWeight: 700,
+}));
+
+export const SheetAddressContainer = styled(Box)(() => ({
+  width: '100%',
+  wordWrap: 'break-word',
+}));
+
+export const ListContainer = styled(List)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: 362,
+  paddingBottom: theme.spacing(3),
+}));
+
+export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({
+  background: theme.palette.background.default,
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  position: 'sticky',
+  bottom: 0,
+  padding: theme.spacing(0, 3, 2),
+  marginBottom: theme.spacing(-1.5),
+  zIndex: 2,
+}));
+
+export const EmptyContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexGrow: 1,
+  gap: theme.spacing(2),
+}));
+
+export const EmptyListMessage = styled(Typography)(({ theme }) => ({
+  fontSize: 14,
+  fontWeight: 700,
+  color:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[600]
+      : theme.palette.grey[400],
+}));
+
+export const ValidationAlert = styled(Alert)(({ theme }) => ({
+  backgroundColor: 'transparent',
+  padding: 0,
+  color: theme.palette.text.primary,
+  [`.${alertClasses.icon}`]: {
+    padding: 0,
+    color: theme.palette.error.main,
+  },
+  [`.${alertClasses.message}`]: { padding: theme.spacing(0.25, 0, 0, 0) },
+}));
+
+export const OptionsMenuButton = styled(IconButton)(({ theme }) => ({
+  position: 'absolute',
+  top: theme.spacing(1.75),
+  right: theme.spacing(2),
+  '&:hover': {
+    backgroundColor: getContrastAlphaColor(theme.palette.mode, '4%'),
+  },
+}));

package/pages/SendToWallet/SendToWalletPage.tsx

@@ -0,0 +1,246 @@
+import ErrorIcon from '@mui/icons-material/Error';
+import HistoryIcon from '@mui/icons-material/History';
+import TurnedInIcon from '@mui/icons-material/TurnedIn';
+import WalletIcon from '@mui/icons-material/Wallet';
+import { Tooltip } from '@mui/material';
+import type { ChangeEvent, FocusEventHandler } from 'react';
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import type { BottomSheetBase } from '../../components/BottomSheet';
+import { CardButton } from '../../components/Card';
+import {
+  useAccount,
+  useAddressValidation,
+  useChain,
+  useToAddressRequirements,
+} from '../../hooks';
+import type { Bookmark } from '../../stores';
+import { useBookmarkActions, useBookmarks, useFieldValues } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { BookmarkAddressSheet } from './BookmarkAddressSheet';
+import { ConfirmAddressSheet } from './ConfirmAddressSheet';
+import {
+  AddressInput,
+  SendToWalletButton,
+  SendToWalletButtonRow,
+  SendToWalletCard,
+  SendToWalletIconButton,
+  SendToWalletPageContainer,
+  ValidationAlert,
+  WalletNumber,
+} from './SendToWalletPage.style';
+
+export const SendToWalletPage = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { bookmarks, recentWallets } = useBookmarks();
+  const { addBookmark, getBookmark, setSelectedBookmark, addRecentWallet } =
+    useBookmarkActions();
+  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null);
+  const confirmAddressSheetRef = useRef<BottomSheetBase>(null);
+  const doneButtonRef = useRef<HTMLButtonElement>(null);
+  const boomarkButtonRef = useRef<HTMLButtonElement>(null);
+  const [inputAddressValue, setInputAddressValue] = useState('');
+  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 handleInputChange = (e: ChangeEvent) => {
+    setInputAddressValue((e.target as HTMLInputElement).value.trim());
+  };
+
+  const handleDone = async () => {
+    if (isValidating) {
+      return;
+    }
+    if (!inputAddressValue) {
+      setErrorMessage(t('error.title.addressRequired'));
+      return;
+    }
+
+    const validationResult = await validateAddress(inputAddressValue);
+    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 === 'ENS' ? inputAddressValue : undefined,
+      address: validationResult.address,
+      chainType: validationResult.chainType,
+    });
+    confirmAddressSheetRef.current?.open();
+  };
+
+  const handleBookmarkAddress = async () => {
+    if (isValidating) {
+      return;
+    }
+    if (!inputAddressValue) {
+      setErrorMessage(t('error.title.addressRequired'));
+      return;
+    }
+
+    const existingBookmarkWallet = getBookmark(inputAddressValue);
+    if (existingBookmarkWallet) {
+      setErrorMessage(
+        t('error.title.bookmarkAlreadyExists', {
+          name: existingBookmarkWallet.name,
+        }),
+      );
+      return;
+    }
+
+    const validationResult = await validateAddress(inputAddressValue);
+
+    if (validationResult.isValid) {
+      setValidatedWallet({
+        name:
+          validationResult.addressType === 'ENS'
+            ? 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 handleOnBlur: FocusEventHandler = async (e) => {
+    if (
+      !(
+        e.relatedTarget === doneButtonRef.current ||
+        e.relatedTarget === boomarkButtonRef.current
+      ) &&
+      !isValidating
+    ) {
+      if (!inputAddressValue) {
+        return;
+      }
+      const validationResult = await validateAddress(inputAddressValue);
+      if (!validationResult.isValid) {
+        setErrorMessage(validationResult.error);
+      }
+    }
+  };
+
+  return (
+    <SendToWalletPageContainer topBottomGutters>
+      <SendToWalletCard mb={1.5}>
+        <AddressInput
+          size="small"
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck="false"
+          onChange={handleInputChange}
+          onBlur={handleOnBlur}
+          value={inputAddressValue}
+          placeholder={t('sendToWallet.enterAddress')}
+          aria-label={t('sendToWallet.enterAddress')}
+          multiline
+        />
+        {!!errorMessage && (
+          <ValidationAlert icon={<ErrorIcon />} sx={{ pb: 2, paddingX: 2 }}>
+            {errorMessage}
+          </ValidationAlert>
+        )}
+        <SendToWalletButtonRow sx={{ paddingX: 2, paddingBottom: 2 }}>
+          <SendToWalletButton
+            ref={doneButtonRef}
+            variant="text"
+            onClick={handleDone}
+            sx={{ flexGrow: 1 }}
+          >
+            {t('button.done')}
+          </SendToWalletButton>
+          <Tooltip title={t('button.bookmark')} arrow>
+            <SendToWalletIconButton
+              ref={boomarkButtonRef}
+              onClick={handleBookmarkAddress}
+            >
+              <TurnedInIcon 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={<HistoryIcon />}
+        onClick={handleRecentWalletsClick}
+      >
+        {!!recentWallets.length && (
+          <WalletNumber>{recentWallets.length}</WalletNumber>
+        )}
+      </CardButton>
+      <CardButton
+        title={t('sendToWallet.connectedWallets')}
+        icon={<WalletIcon />}
+        onClick={handleConnectedWalletsClick}
+      >
+        {!!connectedWallets.length && (
+          <WalletNumber>{connectedWallets.length}</WalletNumber>
+        )}
+      </CardButton>
+      <CardButton
+        title={t('header.bookmarkedWallets')}
+        icon={<TurnedInIcon />}
+        onClick={handleBookmarkedWalletsClick}
+      >
+        {!!bookmarks.length && <WalletNumber>{bookmarks.length}</WalletNumber>}
+      </CardButton>
+    </SendToWalletPageContainer>
+  );
+};

package/pages/SendToWallet/index.ts

@@ -0,0 +1,4 @@
+export * from './BookmarksPage';
+export * from './ConnectedWalletsPage';
+export * from './RecentWalletsPage';
+export * from './SendToWalletPage';

package/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -6,7 +6,8 @@ import { shallow } from 'zustand/shallow';
 import { useSettingMonitor } from '../../hooks';
 import { useSettingsStore } from '../../stores';
 import { navigationRoutes } from '../../utils';
-import { BadgedValue, SettingCardButton } from './SettingsCard';
+import { CardButton } from '../../components/Card';
+import { BadgedValue } from './SettingsCard';
 
 const supportedIcons = {
   Bridges: AirlineStopsIcon,
@@ -36,7 +37,7 @@ export const BridgeAndExchangeSettings: React.FC<{
   const Icon = supportedIcons[type];
 
   return (
-    <SettingCardButton
+    <CardButton
       onClick={handleClick}
       icon={<Icon />}
       title={t(`settings.enabled${type}`)}
@@ -45,6 +46,6 @@ export const BridgeAndExchangeSettings: React.FC<{
         badgeColor="info"
         showBadge={customisationLookUp[type]}
       >{`${enabledTools}/${tools}`}</BadgedValue>
-    </SettingCardButton>
+    </CardButton>
   );
 };

package/pages/SettingsPage/LanguageSetting.tsx

@@ -5,7 +5,7 @@ import { useLanguages } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { HiddenUI } from '../../types';
 import { navigationRoutes } from '../../utils';
-import { SettingCardButton, SummaryValue } from './SettingsCard';
+import { CardButton, CardValue } from '../../components/Card';
 
 export const LanguageSetting: React.FC = () => {
   const { t } = useTranslation();
@@ -22,12 +22,12 @@ export const LanguageSetting: React.FC = () => {
   };
 
   return (
-    <SettingCardButton
+    <CardButton
       onClick={handleClick}
       icon={<LanguageIcon />}
       title={t(`language.title`)}
     >
-      <SummaryValue>{selectedLanguageDisplayName}</SummaryValue>
-    </SettingCardButton>
+      <CardValue>{selectedLanguageDisplayName}</CardValue>
+    </CardButton>
   );
 };