@lifi/widget 3.0.0-alpha.8 → 3.0.0-beta.0

package/pages/SelectNativeTokenPage.tsx

@@ -0,0 +1,47 @@
+import { List, ListItemAvatar } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { TokenAvatar } from '../components/Avatar/TokenAvatar.js';
+import { ListItemButton } from '../components/ListItemButton.js';
+import { ListItemText } from '../components/ListItemText.js';
+import { PageContainer } from '../components/PageContainer.js';
+import { useTokenSelect } from '../components/TokenList/useTokenSelect.js';
+import { useChains } from '../hooks/useChains.js';
+import { useNavigateBack } from '../hooks/useNavigateBack.js';
+import type { FormTypeProps } from '../stores/form/types.js';
+
+export const SelectNativeTokenPage: React.FC<FormTypeProps> = ({
+  formType,
+}) => {
+  const { t } = useTranslation();
+  const { navigateBack } = useNavigateBack();
+  const { chains } = useChains();
+  const selectToken = useTokenSelect(formType, navigateBack);
+
+  return (
+    <PageContainer disableGutters>
+      <List
+        sx={{
+          paddingTop: 0,
+          paddingLeft: 1.5,
+          paddingRight: 1.5,
+          paddingBottom: 1.5,
+        }}
+      >
+        {chains?.map((chain) => (
+          <ListItemButton
+            key={chain.id}
+            onClick={() => selectToken(chain.nativeToken.address, chain.id)}
+          >
+            <ListItemAvatar>
+              <TokenAvatar token={chain.nativeToken} chain={chain} />
+            </ListItemAvatar>
+            <ListItemText
+              primary={chain.nativeToken.symbol}
+              secondary={t('main.onChain', { chainName: chain.name })}
+            />
+          </ListItemButton>
+        ))}
+      </List>
+    </PageContainer>
+  );
+};

package/pages/SelectTokenPage/SearchTokenInput.style.tsx

@@ -1,5 +1,5 @@
-import { styled } from '@mui/material/styles';
-import { Input as InputBase } from '../../components/Input';
+import { styled } from '@mui/material';
+import { Input as InputBase } from '../../components/Input.js';
 
 export const Input = styled(InputBase)(({ theme }) => ({
   paddingRight: theme.spacing(1.5),

package/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -1,42 +1,48 @@
-import SearchIcon from '@mui/icons-material/Search';
+import { Search } from '@mui/icons-material';
 import { FormControl, InputAdornment } from '@mui/material';
 import { useEffect } from 'react';
-import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { Card } from '../../components/Card';
-import { FormKey } from '../../providers';
-import { Input } from './SearchTokenInput.style';
+import { InputCard } from '../../components/Card/InputCard.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useFieldController } from '../../stores/form/useFieldController.js';
+import { Input } from './SearchTokenInput.style.js';
 
 export const SearchTokenInput = () => {
   const { t } = useTranslation();
-  const { register, setValue } = useFormContext();
+  const { setFieldValue } = useFieldActions();
+  const { onChange, onBlur, name, value } = useFieldController({
+    name: 'tokenSearchFilter',
+  });
 
   useEffect(
     () => () => {
-      setValue(FormKey.TokenSearchFilter, '');
+      setFieldValue('tokenSearchFilter', '');
     },
-    [setValue],
+    [setFieldValue],
   );
 
   return (
-    <Card>
+    <InputCard>
       <FormControl fullWidth>
         <Input
           size="small"
           placeholder={t(`main.tokenSearch`) as string}
-          defaultValue=""
           endAdornment={
             <InputAdornment position="end">
-              <SearchIcon />
+              <Search />
             </InputAdornment>
           }
           inputProps={{
             inputMode: 'search',
-            ...register(FormKey.TokenSearchFilter),
+            onChange: (e) => onChange((e.target as HTMLInputElement).value),
+            onBlur,
+            name,
+            value,
+            maxLength: 128,
           }}
           autoComplete="off"
         />
       </FormControl>
-    </Card>
+    </InputCard>
   );
 };

package/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -1,16 +1,18 @@
-import { Box, Container } from '@mui/material';
+import { Box } from '@mui/material';
 import type { FC } from 'react';
 import { useLayoutEffect, useRef, useState } from 'react';
-import { ChainSelect } from '../../components/ChainSelect';
-import { TokenList } from '../../components/TokenList';
-import {
-  useContentHeight,
-  useNavigateBack,
-  useScrollableOverflowHidden,
-  useSwapOnly,
-} from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-import { SearchTokenInput } from './SearchTokenInput';
+import { useTranslation } from 'react-i18next';
+import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { TokenList } from '../../components/TokenList/TokenList.js';
+import { useContentHeight } from '../../hooks/useContentHeight.js';
+import { useHeader } from '../../hooks/useHeader.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js';
+import { useSwapOnly } from '../../hooks/useSwapOnly.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import type { FormTypeProps } from '../../stores/form/types.js';
+import { SearchTokenInput } from './SearchTokenInput.js';
 
 const minTokenListHeight = 360;
 
@@ -22,6 +24,17 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   const [tokenListHeight, setTokenListHeight] = useState(0);
   const swapOnly = useSwapOnly();
 
+  const { subvariant } = useWidgetConfig();
+  const { t } = useTranslation();
+  const title =
+    formType === 'from'
+      ? subvariant === 'custom'
+        ? t(`header.payWith`)
+        : t(`header.from`)
+      : t(`header.to`);
+
+  useHeader(title);
+
   useLayoutEffect(() => {
     setTokenListHeight(
       Math.max(
@@ -34,8 +47,8 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   const hideChainSelect = swapOnly && formType === 'to';
 
   return (
-    <Container disableGutters>
-      <Box pt={1} pb={2} px={3} ref={headerRef}>
+    <PageContainer disableGutters>
+      <Box pb={2} px={3} ref={headerRef}>
         {!hideChainSelect ? <ChainSelect formType={formType} /> : null}
         <Box mt={!hideChainSelect ? 2 : 0}>
           <SearchTokenInput />
@@ -46,6 +59,6 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
         onClick={navigateBack}
         formType={formType}
       />
-    </Container>
+    </PageContainer>
   );
 };

package/pages/SelectWalletPage/EVMListItemButton.tsx

@@ -1,12 +1,16 @@
 import { ChainType } from '@lifi/sdk';
-import { getWalletIcon, isWalletInstalledAsync } from '@lifi/wallet-management';
+import {
+  getConnectorIcon,
+  isWalletInstalledAsync,
+} from '@lifi/wallet-management';
 import { Avatar, ListItemAvatar } from '@mui/material';
 import type { Connector } from 'wagmi';
 import { useConnect, useDisconnect } from 'wagmi';
-import { ListItemButton } from '../../components/ListItemButton';
-import { ListItemText } from '../../components/ListItemText';
-import { useNavigateBack, useWidgetEvents } from '../../hooks';
-import { WidgetEvent } from '../../types';
+import { ListItemButton } from '../../components/ListItemButton.js';
+import { ListItemText } from '../../components/ListItemText.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
+import { WidgetEvent } from '../../types/events.js';
 
 interface EVMListItemButtonProps {
   connectedConnector?: Connector;
@@ -51,10 +55,7 @@ export const EVMListItemButton = ({
   return (
     <ListItemButton key={connector.uid} onClick={handleEVMConnect}>
       <ListItemAvatar>
-        <Avatar
-          src={connector.icon || getWalletIcon(connector.id)}
-          alt={connector.name}
-        >
+        <Avatar src={getConnectorIcon(connector)} alt={connector.name}>
           {connector.name[0]}
         </Avatar>
       </ListItemAvatar>

package/pages/SelectWalletPage/SVMListItemButton.tsx

@@ -2,10 +2,11 @@ import { ChainId, ChainType } from '@lifi/sdk';
 import { Avatar, ListItemAvatar } from '@mui/material';
 import type { Wallet } from '@solana/wallet-adapter-react';
 import { useWallet } from '@solana/wallet-adapter-react';
-import { ListItemButton } from '../../components/ListItemButton';
-import { ListItemText } from '../../components/ListItemText';
-import { useNavigateBack, useWidgetEvents } from '../../hooks';
-import { WidgetEvent } from '../../types';
+import { ListItemButton } from '../../components/ListItemButton.js';
+import { ListItemText } from '../../components/ListItemText.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
+import { WidgetEvent } from '../../types/events.js';
 
 interface SVMListItemButtonProps {
   wallet: Wallet;

package/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -1,14 +1,14 @@
+import { ChainType } from '@lifi/sdk';
 import { isWalletInstalled } from '@lifi/wallet-management';
 import type { Theme } from '@mui/material';
 import {
   Button,
-  Container,
   DialogActions,
   DialogContent,
   DialogContentText,
   List,
+  useMediaQuery,
 } from '@mui/material';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import { WalletReadyState } from '@solana/wallet-adapter-base';
 import type { Wallet } from '@solana/wallet-adapter-react';
 import { useWallet } from '@solana/wallet-adapter-react';
@@ -16,13 +16,18 @@ import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { Connector } from 'wagmi';
 import { useConnect, useAccount as useWagmiAccount } from 'wagmi';
-import { Dialog } from '../../components/Dialog';
-import { EVMListItemButton } from './EVMListItemButton';
-import { SVMListItemButton } from './SVMListItemButton';
-import { walletComparator } from './utils';
+import { Dialog } from '../../components/Dialog.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { useHeader } from '../../hooks/useHeader.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { isItemAllowed } from '../../utils/item.js';
+import { EVMListItemButton } from './EVMListItemButton.js';
+import { SVMListItemButton } from './SVMListItemButton.js';
+import { walletComparator } from './utils.js';
 
 export const SelectWalletPage = () => {
   const { t } = useTranslation();
+  const { chains } = useWidgetConfig();
   const account = useWagmiAccount();
   const { connectors } = useConnect();
   const [walletIdentity, setWalletIdentity] = useState<{
@@ -31,6 +36,8 @@ export const SelectWalletPage = () => {
   }>({ show: false });
   const { wallets: solanaWallets } = useWallet();
 
+  useHeader(t(`header.selectWallet`));
+
   const isDesktopView = useMediaQuery((theme: Theme) =>
     theme.breakpoints.up('sm'),
   );
@@ -50,25 +57,31 @@ export const SelectWalletPage = () => {
   }, []);
 
   const wallets = useMemo(() => {
-    const evmInstalled = connectors.filter(
-      (connector) =>
-        isWalletInstalled(connector.id) &&
-        // We should not show already connected connectors
-        account.connector?.id !== connector.id,
-    );
-    const evmNotDetected = connectors.filter(
-      (connector) => !isWalletInstalled(connector.id),
-    );
-    const svmInstalled = solanaWallets?.filter(
-      (connector) =>
-        connector.adapter.readyState === WalletReadyState.Installed &&
-        // We should not show already connected connectors
-        !connector.adapter.connected,
-    );
-    const svmNotDetected = solanaWallets?.filter(
-      (connector) =>
-        connector.adapter.readyState !== WalletReadyState.Installed,
-    );
+    const evmInstalled = isItemAllowed(ChainType.EVM, chains?.types)
+      ? connectors.filter(
+          (connector) =>
+            isWalletInstalled(connector.id) &&
+            // We should not show already connected connectors
+            account.connector?.id !== connector.id,
+        )
+      : [];
+    const evmNotDetected = isItemAllowed(ChainType.EVM, chains?.types)
+      ? connectors.filter((connector) => !isWalletInstalled(connector.id))
+      : [];
+    const svmInstalled = isItemAllowed(ChainType.SVM, chains?.types)
+      ? solanaWallets?.filter(
+          (connector) =>
+            connector.adapter.readyState === WalletReadyState.Installed &&
+            // We should not show already connected connectors
+            !connector.adapter.connected,
+        )
+      : [];
+    const svmNotDetected = isItemAllowed(ChainType.SVM, chains?.types)
+      ? solanaWallets?.filter(
+          (connector) =>
+            connector.adapter.readyState !== WalletReadyState.Installed,
+        )
+      : [];
 
     const installedWallets = [...evmInstalled, ...svmInstalled].sort(
       walletComparator,
@@ -82,14 +95,22 @@ export const SelectWalletPage = () => {
     }
 
     return installedWallets;
-  }, [account.connector?.id, connectors, isDesktopView, solanaWallets]);
+  }, [
+    account.connector?.id,
+    chains?.types,
+    connectors,
+    isDesktopView,
+    solanaWallets,
+  ]);
 
   return (
-    <Container disableGutters>
+    <PageContainer disableGutters>
       <List
         sx={{
+          paddingTop: 0,
           paddingLeft: 1.5,
           paddingRight: 1.5,
+          paddingBottom: 1.5,
         }}
       >
         {wallets?.map((connector) =>
@@ -122,6 +143,6 @@ export const SelectWalletPage = () => {
           </Button>
         </DialogActions>
       </Dialog>
-    </Container>
+    </PageContainer>
   );
 };

package/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -0,0 +1,228 @@
+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>
+  );
+});