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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.0.0-alpha.16",
+  "version": "3.0.0-alpha.19",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./_cjs/index.js",
@@ -35,30 +35,30 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@lifi/sdk": "^3.0.0-alpha.48",
-    "@lifi/wallet-management": "^3.0.0-alpha.10",
-    "@mui/icons-material": "^5.15.4",
-    "@mui/lab": "^5.0.0-alpha.160",
-    "@mui/material": "^5.15.4",
+    "@lifi/sdk": "^3.0.0-alpha.50",
+    "@lifi/wallet-management": "^3.0.0-alpha.12",
+    "@mui/icons-material": "^5.15.6",
+    "@mui/lab": "^5.0.0-alpha.162",
+    "@mui/material": "^5.15.6",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/wallet-adapter-wallets": "^0.19.25",
     "@solana/web3.js": "^1.89.1",
-    "@tanstack/react-query": "^5.17.14",
-    "@tanstack/react-virtual": "^3.0.1",
-    "i18next": "^23.7.16",
+    "@tanstack/react-query": "^5.17.19",
+    "@tanstack/react-virtual": "^3.0.2",
+    "i18next": "^23.7.18",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^14.0.0",
+    "react-i18next": "^14.0.1",
     "react-intersection-observer": "^9.5.3",
-    "react-router-dom": "^6.21.2",
+    "react-router-dom": "^6.21.3",
     "react-timer-hook": "^3.0.7",
     "uuid": "^9.0.1",
-    "viem": "^2.1.1",
-    "wagmi": "^2.2.1",
-    "zustand": "^4.4.7"
+    "viem": "^2.5.0",
+    "wagmi": "^2.5.1",
+    "zustand": "^4.5.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.17.0",

package/pages/MainPage/MainPage.tsx

@@ -7,8 +7,8 @@ import { PageContainer } from '../../components/PageContainer';
 import { Routes } from '../../components/Routes';
 import { SelectChainAndToken } from '../../components/SelectChainAndToken';
 import {
-  SendToWallet,
   SendToWalletButton,
+  SendToWalletExpandButton,
 } from '../../components/SendToWallet';
 import { useExpandableVariant } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
@@ -30,12 +30,12 @@ export const MainPage: React.FC = () => {
       <SelectChainAndToken mt={1} mb={2} />
       {!nft ? <AmountInput formType="from" mb={2} /> : null}
       {!expandable ? <Routes mb={2} /> : null}
-      <SendToWallet mb={2} />
+      <SendToWalletButton />
       <GasRefuelMessage mb={2} />
       <MainGasMessage mb={2} />
       <Box display="flex" mb={1}>
         <ReviewButton />
-        <SendToWalletButton />
+        <SendToWalletExpandButton />
       </Box>
     </PageContainer>
   );

package/pages/MainPage/ReviewButton.tsx

@@ -1,23 +1,23 @@
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { BaseTransactionButton } from '../../components/BaseTransactionButton';
-import { useRoutes } from '../../hooks';
+import { useToAddressRequirements, useRoutes } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import {
   useSetExecutableRoute,
   useSplitSubvariantStore,
-  useValidation,
+  useFieldValues,
 } from '../../stores';
 import { navigationRoutes } from '../../utils';
 
 export const ReviewButton: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { isValid, isValidating } = useValidation();
   const setExecutableRoute = useSetExecutableRoute();
   const { subvariant } = useWidgetConfig();
   const splitState = useSplitSubvariantStore((state) => state.state);
-
+  const [toAddress] = useFieldValues('toAddress');
+  const { requiredToAddress } = useToAddressRequirements();
   const { routes } = useRoutes();
 
   const currentRoute = routes?.[0];
@@ -66,7 +66,7 @@ export const ReviewButton: React.FC = () => {
     <BaseTransactionButton
       text={getButtonText()}
       onClick={handleClick}
-      disabled={currentRoute && (isValidating || !isValid)}
+      disabled={currentRoute && requiredToAddress && !toAddress}
     />
   );
 };

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