@lifi/widget 3.7.0 → 3.8.0-beta.0

package/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -1,228 +0,0 @@
-import { Error, Info, TurnedIn } from '@mui/icons-material';
-import { LoadingButton } from '@mui/lab';
-import { Button, Typography } from '@mui/material';
-import type { ChangeEvent, MutableRefObject } from 'react';
-import { forwardRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { AlertMessage } from '../../components/AlertMessage/AlertMessage.js';
-import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
-import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
-import { Input } from '../../components/Input.js';
-import { useAddressValidation } from '../../hooks/useAddressValidation.js';
-import type { Bookmark } from '../../stores/bookmarks/types.js';
-import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
-import {
-  AddressInput,
-  BookmarkInputFields,
-  IconContainer,
-  SendToWalletButtonRow,
-  SendToWalletCard,
-  SendToWalletSheetContainer,
-  SheetAddressContainer,
-  SheetTitle,
-  ValidationAlert,
-} from './SendToWalletPage.style.js';
-import type { BookmarkError } from './types.js';
-
-interface BookmarkAddressProps {
-  onAddBookmark: (bookmark: Bookmark) => void;
-  validatedWallet?: Bookmark;
-}
-
-export const BookmarkAddressSheet = forwardRef<
-  BottomSheetBase,
-  BookmarkAddressProps
->(({ validatedWallet, onAddBookmark }, ref) => {
-  const { t } = useTranslation();
-  const [name, setName] = useState('');
-  const [address, setAddress] = useState('');
-  const [error, setError] = useState<BookmarkError>();
-  const { validateAddress, isValidating } = useAddressValidation();
-  const { getBookmark } = useBookmarkActions();
-
-  const nameValue = name.trim() || validatedWallet?.name || '';
-  const addressValue = address || validatedWallet?.address || '';
-
-  const handleCancel = () => {
-    setError(undefined);
-    (ref as MutableRefObject<BottomSheetBase>).current?.close();
-  };
-
-  const validateWithAddressFromInput = async () => {
-    const validationResult = await validateAddress({ value: address });
-    if (!validationResult.isValid) {
-      setError({ type: 'address', message: validationResult.error });
-      return;
-    }
-
-    return {
-      name: nameValue,
-      address: validationResult.address,
-      chainType: validationResult.chainType,
-    };
-  };
-
-  const validateWithValidatedWallet = () => {
-    if (error) {
-      setError(undefined);
-    }
-    return {
-      name: nameValue,
-      address: validatedWallet!.address,
-      chainType: validatedWallet!.chainType,
-    };
-  };
-
-  const handleBookmark = async () => {
-    if (isValidating) {
-      return;
-    }
-    if (!nameValue) {
-      setError({
-        type: 'name',
-        message: t('error.title.bookmarkNameRequired'),
-      });
-      return;
-    }
-    if (!addressValue) {
-      setError({
-        type: 'address',
-        message: t('error.title.walletAddressRequired'),
-      });
-      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) {
-      const existingBookmark = getBookmark(validatedBookmark.address);
-      if (existingBookmark) {
-        setError({
-          type: 'address',
-          message: t('error.title.bookmarkAlreadyExists', {
-            name: existingBookmark.name,
-          }),
-        });
-        return;
-      }
-
-      (ref as MutableRefObject<BottomSheetBase>).current?.close();
-
-      onAddBookmark({
-        name: validatedBookmark.name,
-        address: validatedBookmark.address,
-        chainType: validatedBookmark.chainType,
-      });
-    }
-  };
-
-  const handleAddressInputChange = (e: ChangeEvent) => {
-    if (error) {
-      setError(undefined);
-    }
-    setAddress((e.target as HTMLInputElement).value.trim());
-  };
-
-  const handleNameInputChange = (e: ChangeEvent) => {
-    if (error) {
-      setError(undefined);
-    }
-    setName((e.target as HTMLInputElement).value);
-  };
-
-  const resetValues = () => {
-    setName('');
-    setAddress('');
-  };
-
-  return (
-    <BottomSheet ref={ref} onClose={resetValues}>
-      <SendToWalletSheetContainer>
-        <IconContainer>
-          <TurnedIn sx={{ fontSize: 40 }} />
-        </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 type={error?.type === 'name' ? 'error' : 'default'}>
-            <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')}
-              inputProps={{ maxLength: 128 }}
-            />
-          </SendToWalletCard>
-          {!validatedWallet && (
-            <SendToWalletCard
-              type={error?.type === 'address' ? 'error' : 'default'}
-            >
-              <AddressInput
-                size="small"
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck="false"
-                onChange={handleAddressInputChange}
-                value={address}
-                placeholder={t('sendToWallet.enterAddress', {
-                  context: 'long',
-                })}
-                aria-label={t('sendToWallet.enterAddress', {
-                  context: 'long',
-                })}
-                maxRows={2}
-                inputProps={{ maxLength: 128 }}
-                multiline
-              />
-            </SendToWalletCard>
-          )}
-          {error ? (
-            <ValidationAlert icon={<Error />}>{error.message}</ValidationAlert>
-          ) : null}
-        </BookmarkInputFields>
-        <AlertMessage
-          title={
-            <Typography variant="body2">
-              {t('info.message.fundsToExchange')}
-            </Typography>
-          }
-          icon={<Info />}
-        />
-        <SendToWalletButtonRow>
-          <Button variant="text" onClick={handleCancel} fullWidth>
-            {t('button.cancel')}
-          </Button>
-          <LoadingButton
-            variant="contained"
-            onClick={handleBookmark}
-            loading={isValidating}
-            loadingPosition="center"
-            fullWidth
-            focusRipple
-          >
-            {t('button.bookmark')}
-          </LoadingButton>
-        </SendToWalletButtonRow>
-      </SendToWalletSheetContainer>
-    </BottomSheet>
-  );
-});

package/pages/SendToWallet/BookmarksPage.tsx

@@ -1,201 +0,0 @@
-import {
-  ContentCopyRounded,
-  DeleteOutline,
-  MoreHoriz,
-  OpenInNewRounded,
-  TurnedIn,
-} from '@mui/icons-material';
-import { Button, 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/Avatar/AccountAvatar.js';
-import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
-import { ListItemButton } from '../../components/ListItem//ListItemButton.js';
-import { ListItem } from '../../components/ListItem/ListItem.js';
-import { Menu } from '../../components/Menu.js';
-import { useExplorer } from '../../hooks/useExplorer.js';
-import { useHeader } from '../../hooks/useHeader.js';
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.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 { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js';
-import { defaultChainIdsByType } from '../../utils/chainType.js';
-import { shortenAddress } from '../../utils/wallet.js';
-import { BookmarkAddressSheet } from './BookmarkAddressSheet.js';
-import { EmptyListIndicator } from './EmptyListIndicator.js';
-import {
-  BookmarkButtonContainer,
-  BookmarksListContainer,
-  FullHeightAdjustablePageContainer,
-  OptionsMenuButton,
-} from './SendToWalletPage.style.js';
-
-export const BookmarksPage = () => {
-  const { t } = useTranslation();
-  const [bookmark, setBookmark] = useState<Bookmark>();
-  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null);
-  const { bookmarks } = useBookmarks();
-  const { requiredToChainType } = useToAddressRequirements();
-  const { addBookmark, removeBookmark, setSelectedBookmark } =
-    useBookmarkActions();
-  const navigate = useNavigate();
-  const { setFieldValue } = useFieldActions();
-  const { setSendToWallet } = useSendToWalletActions();
-  const { variant } = useWidgetConfig();
-  const { getAddressLink } = useExplorer();
-
-  useHeader(t(`header.bookmarkedWallets`));
-
-  const handleAddBookmark = () => {
-    bookmarkAddressSheetRef.current?.open();
-  };
-
-  const handleBookmarkSelected = (bookmark: Bookmark) => {
-    setFieldValue('toAddress', bookmark.address, {
-      isTouched: true,
-    });
-    setSelectedBookmark(bookmark);
-    setSendToWallet(true);
-    navigate(`../../`, {
-      relative: 'path',
-      replace: true,
-    });
-  };
-
-  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) {
-      window.open(
-        getAddressLink(
-          bookmark.address,
-          defaultChainIdsByType[bookmark.chainType],
-        ),
-        '_blank',
-      );
-    }
-    closeMenu();
-  };
-
-  const handleRemoveBookmark = () => {
-    if (bookmark) {
-      removeBookmark(bookmark.address);
-    }
-    closeMenu();
-  };
-
-  return (
-    <FullHeightAdjustablePageContainer
-      disableGutters
-      enableFullHeight={variant !== 'drawer'}
-    >
-      <BookmarksListContainer>
-        {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,
-              }}
-            >
-              <MoreHoriz fontSize="small" />
-            </OptionsMenuButton>
-          </ListItem>
-        ))}
-        {!bookmarks.length && (
-          <EmptyListIndicator icon={<TurnedIn 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}>
-            <ContentCopyRounded />
-            {t('button.copyAddress')}
-          </MenuItem>
-          <MenuItem onClick={handleViewOnExplorer}>
-            <OpenInNewRounded />
-            {t('button.viewOnExplorer')}
-          </MenuItem>
-          <MenuItem onClick={handleRemoveBookmark}>
-            <DeleteOutline />
-            {t('button.delete')}
-          </MenuItem>
-        </Menu>
-      </BookmarksListContainer>
-      <BookmarkButtonContainer>
-        <Button variant="contained" onClick={handleAddBookmark}>
-          {t('sendToWallet.addBookmark')}
-        </Button>
-      </BookmarkButtonContainer>
-      <BookmarkAddressSheet
-        ref={bookmarkAddressSheetRef}
-        onAddBookmark={addBookmark}
-      />
-    </FullHeightAdjustablePageContainer>
-  );
-};

package/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -1,85 +0,0 @@
-import { Info, Wallet } from '@mui/icons-material';
-import { Button, Typography } from '@mui/material';
-import type { MutableRefObject } from 'react';
-import { forwardRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { AlertMessage } from '../../components/AlertMessage/AlertMessage.js';
-import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
-import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
-import { useNavigateBack } from '../../hooks/useNavigateBack.js';
-import type { Bookmark } from '../../stores/bookmarks/types.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js';
-import {
-  IconContainer,
-  SendToWalletButtonRow,
-  SendToWalletSheetContainer,
-  SheetAddressContainer,
-  SheetTitle,
-} from './SendToWalletPage.style.js';
-
-interface ConfirmAddressSheetProps {
-  onConfirm: (wallet: Bookmark) => void;
-  validatedBookmark?: Bookmark;
-}
-
-export const ConfirmAddressSheet = forwardRef<
-  BottomSheetBase,
-  ConfirmAddressSheetProps
->(({ validatedBookmark, onConfirm }, ref) => {
-  const { t } = useTranslation();
-  const { navigateBack } = useNavigateBack();
-  const { setFieldValue } = useFieldActions();
-  const { setSendToWallet } = useSendToWalletActions();
-
-  const handleClose = () => {
-    (ref as MutableRefObject<BottomSheetBase>).current?.close();
-  };
-
-  const handleConfirm = () => {
-    if (validatedBookmark) {
-      setFieldValue('toAddress', validatedBookmark.address, {
-        isTouched: true,
-      });
-      onConfirm?.(validatedBookmark);
-      setSendToWallet(true);
-      handleClose();
-      navigateBack();
-    }
-  };
-
-  return (
-    <BottomSheet ref={ref}>
-      <SendToWalletSheetContainer>
-        <IconContainer>
-          <Wallet sx={{ fontSize: 40 }} />
-        </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={<Info />}
-        />
-        <SendToWalletButtonRow>
-          <Button variant="text" onClick={handleClose} fullWidth>
-            {t('button.cancel')}
-          </Button>
-          <Button variant="contained" onClick={handleConfirm} fullWidth>
-            {t('button.confirm')}
-          </Button>
-        </SendToWalletButtonRow>
-      </SendToWalletSheetContainer>
-    </BottomSheet>
-  );
-});

package/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -1,172 +0,0 @@
-import {
-  ContentCopyRounded,
-  MoreHoriz,
-  OpenInNewRounded,
-  TurnedIn,
-} from '@mui/icons-material';
-import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material';
-import { useId, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js';
-import { ListItem } from '../../components/ListItem/ListItem.js';
-import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
-import { Menu } from '../../components/Menu.js';
-import type { Account } from '../../hooks/useAccount.js';
-import { useAccount } from '../../hooks/useAccount.js';
-import { useExplorer } from '../../hooks/useExplorer.js';
-import { useHeader } from '../../hooks/useHeader.js';
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
-import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js';
-import { shortenAddress } from '../../utils/wallet.js';
-import { EmptyListIndicator } from './EmptyListIndicator.js';
-import {
-  ListContainer,
-  OptionsMenuButton,
-  SendToWalletPageContainer,
-} from './SendToWalletPage.style.js';
-
-export const ConnectedWalletsPage = () => {
-  const { t } = useTranslation();
-  const [selectedAccount, setSelectedAccount] = useState<Account>();
-  const { accounts } = useAccount();
-  const { setSelectedBookmark } = useBookmarkActions();
-  const { requiredToChainType } = useToAddressRequirements();
-  const navigate = useNavigate();
-  const { setFieldValue } = useFieldActions();
-  const { setSendToWallet } = useSendToWalletActions();
-  const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>();
-  const moreMenuId = useId();
-  const open = Boolean(moreMenuAnchorEl);
-  const { getAddressLink } = useExplorer();
-
-  useHeader(t('sendToWallet.connectedWallets'));
-
-  const handleWalletSelected = (account: Account) => {
-    setFieldValue('toAddress', account.address!, {
-      isTouched: true,
-    });
-    setSelectedBookmark({
-      name: account.connector?.name,
-      address: account.address!,
-      chainType: account.chainType!,
-      isConnectedAccount: true,
-    });
-    setSendToWallet(true);
-    navigate(`../../`, {
-      relative: 'path',
-      replace: true,
-    });
-  };
-
-  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) {
-      if (selectedAccount.address) {
-        window.open(
-          getAddressLink(selectedAccount.address, selectedAccount.chainId),
-          '_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,
-                }}
-              >
-                <MoreHoriz fontSize="small" />
-              </OptionsMenuButton>
-            </ListItem>
-          );
-        })}
-        {!accounts.length && (
-          <EmptyListIndicator icon={<TurnedIn 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}>
-            <ContentCopyRounded />
-            {t('button.copyAddress')}
-          </MenuItem>
-          <MenuItem onClick={handleViewOnExplorer}>
-            <OpenInNewRounded />
-            {t('button.viewOnExplorer')}
-          </MenuItem>
-        </Menu>
-      </ListContainer>
-    </SendToWalletPageContainer>
-  );
-};