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

package/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -0,0 +1,219 @@
+import ErrorIcon from '@mui/icons-material/Error';
+import TurnedInIcon from '@mui/icons-material/TurnedIn';
+import { Button, Typography } from '@mui/material';
+import type { ChangeEvent, FocusEventHandler, MutableRefObject } from 'react';
+import { forwardRef, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { BottomSheetBase } from '../../components/BottomSheet';
+import { BottomSheet } from '../../components/BottomSheet';
+import { Input } from '../../components/Input';
+import { useAddressValidation } from '../../hooks';
+import type { Bookmark } from '../../stores';
+import { useBookmarkActions } from '../../stores';
+import {
+  AddressInput,
+  BookmarkInputFields,
+  IconContainer,
+  SendToWalletButtonRow,
+  SendToWalletCard,
+  SendToWalletSheetContainer,
+  SheetAddressContainer,
+  SheetTitle,
+  ValidationAlert,
+} from './SendToWalletPage.style';
+
+interface BookmarkAddressProps {
+  onAddBookmark: (bookmark: Bookmark) => void;
+  validatedWallet?: Bookmark;
+}
+
+export const BookmarkAddressSheet = forwardRef<
+  BottomSheetBase,
+  BookmarkAddressProps
+>(({ validatedWallet, onAddBookmark }, ref) => {
+  const { t } = useTranslation();
+  const bookmarkButtonRef = useRef<HTMLButtonElement>(null);
+  const [name, setName] = useState('');
+  const [address, setAddress] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+  const { validateAddress, isValidating } = useAddressValidation();
+  const { getBookmark } = useBookmarkActions();
+
+  const nameValue = name || validatedWallet?.name || '';
+  const addressValue = address || validatedWallet?.address || '';
+
+  const handleCancel = () => {
+    setErrorMessage('');
+    (ref as MutableRefObject<BottomSheetBase>).current?.close();
+  };
+
+  const validateWithAddressFromInput = async () => {
+    const validationResult = await validateAddress(address);
+    if (!validationResult.isValid) {
+      setErrorMessage(validationResult.error);
+      return;
+    }
+
+    return {
+      name: nameValue.trim(),
+      address: validationResult.address,
+      chainType: validationResult.chainType,
+    };
+  };
+
+  const validateWithValidatedWallet = () => {
+    if (errorMessage) {
+      setErrorMessage('');
+    }
+    return {
+      name: nameValue.trim(),
+      address: validatedWallet!.address,
+      chainType: validatedWallet!.chainType,
+    };
+  };
+
+  const handleBookmark = async () => {
+    if (!nameValue) {
+      setErrorMessage(t('error.title.bookmarkNameRequired'));
+      return;
+    }
+    if (!addressValue) {
+      setErrorMessage(t('error.title.addressRequired'));
+      return;
+    }
+
+    const existingBookmark = getBookmark(addressValue);
+    if (existingBookmark) {
+      setErrorMessage(
+        t('error.title.bookmarkAlreadyExists', {
+          name: existingBookmark.name,
+        }),
+      );
+      return;
+    }
+
+    //  If the validatedWallet is supplied as a prop then we should assume
+    //  the address has already been validated
+    const validatedBookmark = validatedWallet
+      ? validateWithValidatedWallet()
+      : await validateWithAddressFromInput();
+
+    if (validatedBookmark) {
+      (ref as MutableRefObject<BottomSheetBase>).current?.close();
+
+      onAddBookmark({
+        name: validatedBookmark.name,
+        address: validatedBookmark.address,
+        chainType: validatedBookmark.chainType,
+      });
+    }
+  };
+
+  const handleAddressInputChange = (e: ChangeEvent) => {
+    setAddress((e.target as HTMLInputElement).value.trim());
+  };
+
+  const handleNameInputChange = (e: ChangeEvent) => {
+    setName((e.target as HTMLInputElement).value.trim());
+  };
+
+  const resetValues = () => {
+    setName('');
+    setAddress('');
+  };
+
+  const handleAddressInputOnBlur: FocusEventHandler = async (e) => {
+    if (!(e.relatedTarget === bookmarkButtonRef.current) && !isValidating) {
+      if (!address) {
+        return;
+      }
+
+      const existingBookmark = getBookmark(address);
+      if (existingBookmark) {
+        setErrorMessage(
+          t('error.title.bookmarkAlreadyExists', {
+            name: existingBookmark.name,
+          }),
+        );
+        return;
+      }
+
+      const validationResult = await validateAddress(address);
+      if (!validationResult.isValid) {
+        setErrorMessage(validationResult.error);
+      }
+    }
+  };
+
+  return (
+    <BottomSheet ref={ref} onClose={resetValues}>
+      <SendToWalletSheetContainer>
+        <IconContainer>
+          <TurnedInIcon sx={{ fontSize: 48 }} />
+        </IconContainer>
+        <SheetTitle>{t('sendToWallet.bookmarkWallet')}</SheetTitle>
+        {validatedWallet ? (
+          <SheetAddressContainer>
+            {validatedWallet?.name ? (
+              <Typography fontWeight={600} mb={0.5}>
+                {validatedWallet?.name}
+              </Typography>
+            ) : null}
+            <Typography>{validatedWallet?.address}</Typography>
+          </SheetAddressContainer>
+        ) : null}
+        <BookmarkInputFields>
+          <SendToWalletCard>
+            <Input
+              size="small"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              onChange={handleNameInputChange}
+              value={name}
+              placeholder={validatedWallet?.name || t('sendToWallet.enterName')}
+              aria-label={validatedWallet?.name || t('sendToWallet.enterName')}
+            />
+          </SendToWalletCard>
+          {!validatedWallet && (
+            <SendToWalletCard>
+              <AddressInput
+                size="small"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                onChange={handleAddressInputChange}
+                onBlur={handleAddressInputOnBlur}
+                value={address}
+                placeholder={t('sendToWallet.enterAddress')}
+                aria-label={t('sendToWallet.enterAddress')}
+                multiline
+              />
+            </SendToWalletCard>
+          )}
+          {!!errorMessage && (
+            <ValidationAlert icon={<ErrorIcon />}>
+              {errorMessage}
+            </ValidationAlert>
+          )}
+        </BookmarkInputFields>
+        <SendToWalletButtonRow>
+          <Button sx={{ flexGrow: 1 }} variant="text" onClick={handleCancel}>
+            {t('button.cancel')}
+          </Button>
+          <Button
+            ref={bookmarkButtonRef}
+            sx={{ flexGrow: 1 }}
+            variant="contained"
+            onClick={handleBookmark}
+            focusRipple
+          >
+            {t('button.bookmark')}
+          </Button>
+        </SendToWalletButtonRow>
+      </SendToWalletSheetContainer>
+    </BottomSheet>
+  );
+});

package/pages/SendToWallet/BookmarksPage.tsx

@@ -0,0 +1,182 @@
+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 { Button, ListItemAvatar, ListItemText, MenuItem } from '@mui/material';
+import { useId, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+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, shortenAddress } from '../../utils';
+import { BookmarkAddressSheet } from './BookmarkAddressSheet';
+import { ConfirmAddressSheet } from './ConfirmAddressSheet';
+import { EmptyListIndicator } from './EmptyListIndicator';
+import {
+  BookmarkButtonContainer,
+  ListContainer,
+  OptionsMenuButton,
+  SendToWalletPageContainer,
+} from './SendToWalletPage.style';
+
+export const BookmarksPage = () => {
+  const { t } = useTranslation();
+  const [bookmark, setBookmark] = useState<Bookmark>();
+  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null);
+  const confirmAddressSheetRef = useRef<BottomSheetBase>(null);
+  const { bookmarks } = useBookmarks();
+  const { requiredToChainType } = useToAddressRequirements();
+  const { addBookmark, removeBookmark, setSelectedBookmark } =
+    useBookmarkActions();
+  const { getChainById } = useChains();
+
+  const handleAddBookmark = () => {
+    bookmarkAddressSheetRef.current?.open();
+  };
+
+  const handleBookmarkSelected = (bookmark: Bookmark) => {
+    setBookmark(bookmark);
+    confirmAddressSheetRef.current?.open();
+  };
+
+  const handleOnConfirm = (confirmedWallet: Bookmark) => {
+    setSelectedBookmark(confirmedWallet);
+  };
+
+  const moreMenuId = useId();
+  const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>();
+  const open = Boolean(moreMenuAnchorEl);
+  const closeMenu = () => {
+    setMenuAnchorEl(null);
+  };
+
+  const handleMenuOpen = (el: HTMLElement, bookmark: Bookmark) => {
+    setMenuAnchorEl(el);
+    setBookmark(bookmark);
+  };
+
+  const handleCopyAddress = () => {
+    if (bookmark) {
+      navigator.clipboard.writeText(bookmark.address);
+    }
+    closeMenu();
+  };
+
+  const handleViewOnExplorer = () => {
+    if (bookmark) {
+      const chain = getChainById(defaultChainIdsByType[bookmark.chainType]);
+      window.open(
+        `${chain?.metamask.blockExplorerUrls[0]}address/${bookmark.address}`,
+        '_blank',
+      );
+    }
+    closeMenu();
+  };
+
+  const handleRemoveBookmark = () => {
+    if (bookmark) {
+      removeBookmark(bookmark.address);
+    }
+    closeMenu();
+  };
+
+  return (
+    <SendToWalletPageContainer disableGutters>
+      <ListContainer>
+        {bookmarks.map((bookmark) => (
+          <ListItem key={bookmark.address} sx={{ position: 'relative' }}>
+            <ListItemButton
+              onClick={() => handleBookmarkSelected(bookmark)}
+              disabled={
+                requiredToChainType &&
+                requiredToChainType !== bookmark.chainType
+              }
+            >
+              <ListItemAvatar>
+                <AccountAvatar
+                  chainId={defaultChainIdsByType[bookmark.chainType]}
+                />
+              </ListItemAvatar>
+              <ListItemText
+                primary={bookmark.name}
+                secondary={shortenAddress(bookmark.address)}
+              />
+            </ListItemButton>
+            <OptionsMenuButton
+              aria-label={t('button.options')}
+              aria-controls={
+                open && bookmark.address === bookmark?.address
+                  ? moreMenuId
+                  : undefined
+              }
+              aria-haspopup="true"
+              aria-expanded={open ? 'true' : undefined}
+              onClick={(e) => handleMenuOpen(e.target as HTMLElement, bookmark)}
+              sx={{
+                opacity:
+                  requiredToChainType &&
+                  requiredToChainType !== bookmark.chainType
+                    ? 0.5
+                    : 1,
+              }}
+            >
+              <MoreHorizIcon fontSize="small" />
+            </OptionsMenuButton>
+          </ListItem>
+        ))}
+        {!bookmarks.length && (
+          <EmptyListIndicator icon={<TurnedInIcon sx={{ fontSize: 48 }} />}>
+            {t('sendToWallet.noBookmarkedWallets')}
+          </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={handleRemoveBookmark}>
+            <DeleteIcon />
+            {t('button.delete')}
+          </MenuItem>
+        </Menu>
+      </ListContainer>
+      <BookmarkButtonContainer>
+        <Button variant="contained" onClick={handleAddBookmark}>
+          {t('sendToWallet.addBookmark')}
+        </Button>
+      </BookmarkButtonContainer>
+      <BookmarkAddressSheet
+        ref={bookmarkAddressSheetRef}
+        onAddBookmark={addBookmark}
+      />
+      <ConfirmAddressSheet
+        ref={confirmAddressSheetRef}
+        validatedBookmark={bookmark}
+        onConfirm={handleOnConfirm}
+      />
+    </SendToWalletPageContainer>
+  );
+};

package/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -0,0 +1,90 @@
+import InfoIcon from '@mui/icons-material/Info';
+import WalletIcon from '@mui/icons-material/Wallet';
+import { Button, Typography } from '@mui/material';
+import type { MutableRefObject } from 'react';
+import { forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { AlertMessage } from '../../components/AlertMessage';
+import type { BottomSheetBase } from '../../components/BottomSheet';
+import { BottomSheet } from '../../components/BottomSheet';
+import type { Bookmark } from '../../stores';
+import { useFieldActions, useSendToWalletStore } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import {
+  IconContainer,
+  SendToWalletButtonRow,
+  SendToWalletSheetContainer,
+  SheetAddressContainer,
+  SheetTitle,
+} from './SendToWalletPage.style';
+
+interface ConfirmAddressSheetProps {
+  onConfirm: (wallet: Bookmark) => void;
+  validatedBookmark?: Bookmark;
+}
+
+export const ConfirmAddressSheet = forwardRef<
+  BottomSheetBase,
+  ConfirmAddressSheetProps
+>(({ validatedBookmark, onConfirm }, ref) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { setFieldValue } = useFieldActions();
+  const setSendToWallet = useSendToWalletStore(
+    (state) => state.setSendToWallet,
+  );
+
+  const handleClose = () => {
+    (ref as MutableRefObject<BottomSheetBase>).current?.close();
+  };
+
+  const handleConfirm = () => {
+    if (validatedBookmark) {
+      setFieldValue('toAddress', validatedBookmark.address);
+      onConfirm?.(validatedBookmark);
+      setSendToWallet(true);
+      handleClose();
+      navigate(navigationRoutes.home);
+    }
+  };
+
+  return (
+    <BottomSheet ref={ref}>
+      <SendToWalletSheetContainer>
+        <IconContainer>
+          <WalletIcon sx={{ fontSize: 48 }} />
+        </IconContainer>
+        <SheetTitle>{t('sendToWallet.confirmWalletAddress')}</SheetTitle>
+        <SheetAddressContainer>
+          {validatedBookmark?.name ? (
+            <Typography fontWeight={600} mb={0.5}>
+              {validatedBookmark?.name}
+            </Typography>
+          ) : null}
+          <Typography>{validatedBookmark?.address}</Typography>
+        </SheetAddressContainer>
+        <AlertMessage
+          title={
+            <Typography variant="body2">
+              {t('info.message.fundsToExchange')}
+            </Typography>
+          }
+          icon={<InfoIcon />}
+        />
+        <SendToWalletButtonRow>
+          <Button sx={{ flexGrow: 1 }} variant="text" onClick={handleClose}>
+            {t('button.cancel')}
+          </Button>
+          <Button
+            sx={{ flexGrow: 1 }}
+            variant="contained"
+            onClick={handleConfirm}
+          >
+            {t('button.confirm')}
+          </Button>
+        </SendToWalletButtonRow>
+      </SendToWalletSheetContainer>
+    </BottomSheet>
+  );
+});

package/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -0,0 +1,165 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import TurnedInIcon from '@mui/icons-material/TurnedIn';
+import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material';
+import { useId, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AccountAvatar } from '../../components/AccountAvatar';
+import type { BottomSheetBase } from '../../components/BottomSheet';
+import { ListItem, ListItemButton } from '../../components/ListItem';
+import { Menu } from '../../components/Menu';
+import type { Account } from '../../hooks';
+import { useAccount, useChains, useToAddressRequirements } from '../../hooks';
+import type { Bookmark } from '../../stores';
+import { useBookmarkActions } from '../../stores';
+import { shortenAddress } from '../../utils';
+import { ConfirmAddressSheet } from './ConfirmAddressSheet';
+import { EmptyListIndicator } from './EmptyListIndicator';
+import {
+  ListContainer,
+  OptionsMenuButton,
+  SendToWalletPageContainer,
+} from './SendToWalletPage.style';
+
+export const ConnectedWalletsPage = () => {
+  const { t } = useTranslation();
+  const [selectedAccount, setSelectedAccount] = useState<Account>();
+  const confirmAddressSheetRef = useRef<BottomSheetBase>(null);
+  const { accounts } = useAccount();
+  const { setSelectedBookmark } = useBookmarkActions();
+  const { getChainById } = useChains();
+  const { requiredToChainType } = useToAddressRequirements();
+  const moreMenuId = useId();
+
+  const handleWalletSelected = (account: Account) => {
+    setSelectedAccount(account);
+    confirmAddressSheetRef.current?.open();
+  };
+
+  const handleOnConfirm = (accountWallet: Bookmark) => {
+    setSelectedBookmark(accountWallet);
+  };
+
+  const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>();
+  const open = Boolean(moreMenuAnchorEl);
+  const closeMenu = () => {
+    setMenuAnchorEl(null);
+  };
+
+  const handleMenuOpen = (el: HTMLElement, connectedWallet: Account) => {
+    setMenuAnchorEl(el);
+    setSelectedAccount(connectedWallet);
+  };
+
+  const handleCopyAddress = () => {
+    if (selectedAccount?.address) {
+      navigator.clipboard.writeText(selectedAccount.address);
+    }
+    closeMenu();
+  };
+
+  const handleViewOnExplorer = () => {
+    if (selectedAccount?.chainId) {
+      const chain = getChainById(selectedAccount.chainId);
+      window.open(
+        `${chain?.metamask.blockExplorerUrls[0]}address/${selectedAccount.address}`,
+        '_blank',
+      );
+    }
+    closeMenu();
+  };
+
+  return (
+    <SendToWalletPageContainer disableGutters>
+      <ListContainer>
+        {accounts.map((account) => {
+          const walletAddress = shortenAddress(account.address);
+
+          return (
+            <ListItem key={account.address} sx={{ position: 'relative' }}>
+              <ListItemButton
+                onClick={() => handleWalletSelected(account)}
+                disabled={
+                  requiredToChainType &&
+                  requiredToChainType !== account.chainType
+                }
+              >
+                <ListItemAvatar>
+                  <AccountAvatar chainId={account.chainId} account={account} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={account.connector?.name}
+                  secondary={walletAddress}
+                />
+              </ListItemButton>
+              <OptionsMenuButton
+                aria-label={t('button.options')}
+                aria-controls={
+                  open && account.address === selectedAccount?.address
+                    ? moreMenuId
+                    : undefined
+                }
+                aria-haspopup="true"
+                aria-expanded={open ? 'true' : undefined}
+                onClick={(e) =>
+                  handleMenuOpen(e.target as HTMLElement, account)
+                }
+                sx={{
+                  opacity:
+                    requiredToChainType &&
+                    requiredToChainType !== account.chainType
+                      ? 0.5
+                      : 1,
+                }}
+              >
+                <MoreHorizIcon fontSize="small" />
+              </OptionsMenuButton>
+            </ListItem>
+          );
+        })}
+        {!accounts.length && (
+          <EmptyListIndicator icon={<TurnedInIcon sx={{ fontSize: 48 }} />}>
+            {t('sendToWallet.noConnectedWallets')}
+          </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>
+        </Menu>
+      </ListContainer>
+      <ConfirmAddressSheet
+        ref={confirmAddressSheetRef}
+        validatedBookmark={
+          selectedAccount && {
+            name: selectedAccount.connector?.name,
+            address: selectedAccount.address!,
+            chainType: selectedAccount.chainType!,
+            isConnectedAccount: true,
+          }
+        }
+        onConfirm={handleOnConfirm}
+      />
+    </SendToWalletPageContainer>
+  );
+};

package/pages/SendToWallet/EmptyListIndicator.tsx

@@ -0,0 +1,19 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+import {
+  EmptyContainer,
+  EmptyListMessage,
+  IconContainer,
+} from './SendToWalletPage.style';
+
+interface EmptyListIndicatorProps extends PropsWithChildren {
+  icon: ReactNode;
+}
+export const EmptyListIndicator = ({
+  icon,
+  children,
+}: EmptyListIndicatorProps) => (
+  <EmptyContainer>
+    <IconContainer>{icon}</IconContainer>
+    <EmptyListMessage>{children}</EmptyListMessage>
+  </EmptyContainer>
+);