@lifi/widget 0.0.0-preview-6cc63bac

package/src/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -0,0 +1,80 @@
+import { Box, type Theme, useMediaQuery } from '@mui/material'
+import type { FC } from 'react'
+import { useRef } from 'react'
+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 { useHeader } from '../../hooks/useHeader.js'
+import { useSwapOnly } from '../../hooks/useSwapOnly.js'
+import { useWideVariant } from '../../hooks/useWideVariant.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { SearchTokenInput } from './SearchTokenInput.js'
+
+export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
+  const headerRef = useRef<HTMLElement>(null)
+
+  const swapOnly = useSwapOnly()
+
+  const { mode, hiddenUI } = useWidgetConfig()
+  const wideVariant = useWideVariant()
+
+  const { t } = useTranslation()
+  const title =
+    formType === 'from'
+      ? mode === 'custom'
+        ? t('header.payWith')
+        : t('header.from')
+      : t('header.to')
+
+  useHeader(title)
+
+  const hideChainSelect =
+    (wideVariant && !hiddenUI?.chainSidebar) ||
+    (swapOnly && formType === 'to') ||
+    hiddenUI?.chainSelect
+
+  const isMobile = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down(theme.breakpoints.values.xs)
+  )
+  const hideSearchTokenInput = hiddenUI?.searchTokenInput
+
+  const hasHeader = !hideChainSelect || !hideSearchTokenInput
+
+  return (
+    <PageContainer disableGutters>
+      <Box
+        ref={headerRef}
+        sx={{
+          pt: 1.5,
+          pb: hasHeader ? 2 : 0,
+          px: 3,
+        }}
+      >
+        {!hideChainSelect ? <ChainSelect formType={formType} /> : null}
+        {!hideSearchTokenInput && (
+          <Box
+            sx={{
+              mt: !hideChainSelect ? 2 : 0,
+            }}
+          >
+            <SearchTokenInput formType={formType} />
+          </Box>
+        )}
+      </Box>
+      <TokenList
+        // Rerender component if variant changes (since chains tiles change height)
+        key={
+          hideChainSelect
+            ? 'without-offset'
+            : isMobile
+              ? 'with-offset-mobile'
+              : 'with-offset'
+        }
+        headerRef={headerRef}
+        formType={formType}
+      />
+    </PageContainer>
+  )
+}

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -0,0 +1,247 @@
+import ErrorIcon from '@mui/icons-material/Error'
+import TurnedIn from '@mui/icons-material/TurnedIn'
+import WarningRounded from '@mui/icons-material/WarningRounded'
+import { Button, Typography } from '@mui/material'
+import type { ChangeEvent, RefObject } from 'react'
+import {
+  type ForwardRefExoticComponent,
+  forwardRef,
+  type RefAttributes,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { Input } from '../../components/Input.js'
+import { AlertMessage } from '../../components/Messages/AlertMessage.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: ForwardRefExoticComponent<
+  BookmarkAddressProps & RefAttributes<BottomSheetBase>
+> = 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 RefObject<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 = (validatedWallet: Bookmark) => {
+      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(validatedWallet)
+        : 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 RefObject<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
+                  sx={{
+                    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={<ErrorIcon />}>
+                {error.message}
+              </ValidationAlert>
+            ) : null}
+          </BookmarkInputFields>
+          <AlertMessage
+            title={
+              <Typography variant="body2" sx={{ color: 'text.primary' }}>
+                {t('warning.message.fundsLossPrevention')}
+              </Typography>
+            }
+            icon={<WarningRounded />}
+          />
+          <SendToWalletButtonRow>
+            <Button variant="text" onClick={handleCancel} fullWidth>
+              {t('button.cancel')}
+            </Button>
+            <Button
+              variant="contained"
+              onClick={handleBookmark}
+              loading={isValidating}
+              loadingPosition="center"
+              fullWidth
+              focusRipple
+            >
+              {t('button.bookmark')}
+            </Button>
+          </SendToWalletButtonRow>
+        </SendToWalletSheetContainer>
+      </BottomSheet>
+    )
+  }
+)

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -0,0 +1,145 @@
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import DeleteOutline from '@mui/icons-material/DeleteOutlined'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import TurnedIn from '@mui/icons-material/TurnedIn'
+import { Button, List, ListItemAvatar, ListItemText } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import { type JSX, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { ContextMenu } from '../../components/ContextMenu.js'
+import { EmptyListIndicator } from '../../components/EmptyListIndicator/EmptyListIndicator.js'
+import { ListItem } from '../../components/ListItem/ListItem.js'
+import { ListItemButton } from '../../components/ListItem/ListItemButton.js'
+import { PageContainer } from '../../components/PageContainer.js'
+import { useExplorer } from '../../hooks/useExplorer.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useListHeight } from '../../hooks/useListHeight.js'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.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 { defaultChainIdsByType } from '../../utils/chainType.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'
+import { BookmarkButtonContainer } from './SendToWalletPage.style.js'
+
+export const BookmarksPage = (): JSX.Element => {
+  const { t } = useTranslation()
+  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)
+  const listParentRef = useRef<HTMLUListElement | null>(null)
+  const buttonRef = useRef<HTMLDivElement | null>(null)
+  const { bookmarks } = useBookmarks()
+  const { requiredToChainType } = useToAddressRequirements()
+  const { addBookmark, removeBookmark, setSelectedBookmark } =
+    useBookmarkActions()
+  const navigate = useNavigate()
+  const { setFieldValue } = useFieldActions()
+  const { getAddressLink } = useExplorer()
+
+  useHeader(t('header.bookmarkedWallets'))
+
+  const { listHeight } = useListHeight({
+    listParentRef,
+    headerRef: buttonRef,
+  })
+
+  const handleAddBookmark = () => {
+    bookmarkAddressSheetRef.current?.open()
+  }
+
+  const handleBookmarkSelected = (bookmark: Bookmark) => {
+    setFieldValue('toAddress', bookmark.address, {
+      isTouched: true,
+      isDirty: true,
+    })
+    setSelectedBookmark(bookmark)
+    navigate({ to: navigationRoutes.home, replace: true })
+  }
+
+  return (
+    <PageContainer disableGutters>
+      <List
+        className="long-list"
+        ref={listParentRef}
+        style={{ height: listHeight, overflow: 'auto' }}
+        disablePadding
+        sx={{ paddingTop: 1.5 }}
+      >
+        {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>
+            <ContextMenu
+              disabled={
+                !!(
+                  requiredToChainType &&
+                  requiredToChainType !== bookmark.chainType
+                )
+              }
+              items={[
+                {
+                  icon: <ContentCopyRounded />,
+                  label: t('button.copyAddress'),
+                  onClick: () =>
+                    navigator.clipboard.writeText(bookmark.address),
+                },
+                {
+                  icon: <OpenInNewRounded />,
+                  label: t('button.viewOnExplorer'),
+                  onClick: () =>
+                    window.open(
+                      getAddressLink(
+                        bookmark.address,
+                        defaultChainIdsByType[bookmark.chainType]
+                      ),
+                      '_blank'
+                    ),
+                },
+                {
+                  icon: <DeleteOutline />,
+                  label: t('button.delete'),
+                  onClick: () => removeBookmark(bookmark.address),
+                },
+              ]}
+            />
+          </ListItem>
+        ))}
+        {!bookmarks.length && (
+          <EmptyListIndicator
+            icon={<TurnedIn />}
+            title={t('sendToWallet.noBookmarkedWallets')}
+            message={t('sendToWallet.noBookmarkedWalletsMessage')}
+          />
+        )}
+      </List>
+      <BookmarkButtonContainer ref={buttonRef}>
+        <Button variant="contained" onClick={handleAddBookmark}>
+          {t('sendToWallet.addBookmark')}
+        </Button>
+      </BookmarkButtonContainer>
+      <BookmarkAddressSheet
+        ref={bookmarkAddressSheetRef}
+        onAddBookmark={addBookmark}
+      />
+    </PageContainer>
+  )
+}

package/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -0,0 +1,107 @@
+import Wallet from '@mui/icons-material/Wallet'
+import WarningRounded from '@mui/icons-material/WarningRounded'
+import { Button, Typography } from '@mui/material'
+import type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'
+import { forwardRef, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { AlertMessage } from '../../components/Messages/AlertMessage.js'
+import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
+import type { Bookmark } from '../../stores/bookmarks/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import {
+  IconContainer,
+  SendToWalletButtonRow,
+  SendToWalletSheetContainer,
+  SheetAddressContainer,
+  SheetTitle,
+} from './SendToWalletPage.style.js'
+
+interface ConfirmAddressSheetProps {
+  onConfirm: (wallet: Bookmark) => void
+  validatedBookmark?: Bookmark
+}
+
+interface ConfirmAddressSheetContentProps extends ConfirmAddressSheetProps {
+  onClose: () => void
+}
+
+export const ConfirmAddressSheet: ForwardRefExoticComponent<
+  ConfirmAddressSheetProps & RefAttributes<BottomSheetBase>
+> = forwardRef<BottomSheetBase, ConfirmAddressSheetProps>((props, ref) => {
+  const handleClose = () => {
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
+  }
+
+  return (
+    <BottomSheet ref={ref}>
+      <ConfirmAddressSheetContent {...props} onClose={handleClose} />
+    </BottomSheet>
+  )
+})
+
+const ConfirmAddressSheetContent: React.FC<ConfirmAddressSheetContentProps> = ({
+  validatedBookmark,
+  onConfirm,
+  onClose,
+}) => {
+  const { t } = useTranslation()
+  const navigateBack = useNavigateBack()
+  const { setFieldValue } = useFieldActions()
+  const containerRef = useRef<HTMLElement>(null)
+  useSetContentHeight(containerRef)
+
+  const handleConfirm = () => {
+    if (validatedBookmark) {
+      setFieldValue('toAddress', validatedBookmark.address, {
+        isTouched: true,
+        isDirty: true,
+      })
+      onConfirm?.(validatedBookmark)
+      onClose()
+      navigateBack()
+    }
+  }
+
+  return (
+    <SendToWalletSheetContainer ref={containerRef}>
+      <IconContainer>
+        <Wallet sx={{ fontSize: 40 }} />
+      </IconContainer>
+      <SheetTitle>{t('sendToWallet.confirmWalletAddress')}</SheetTitle>
+      <SheetAddressContainer>
+        {validatedBookmark?.name ? (
+          <Typography
+            sx={{
+              fontWeight: 600,
+              mb: 0.5,
+            }}
+          >
+            {validatedBookmark?.name}
+          </Typography>
+        ) : null}
+        <Typography>{validatedBookmark?.address}</Typography>
+      </SheetAddressContainer>
+      <AlertMessage
+        severity="warning"
+        title={
+          <Typography variant="body2" sx={{ color: 'text.primary' }}>
+            {t('warning.message.fundsLossPrevention')}
+          </Typography>
+        }
+        icon={<WarningRounded />}
+        multiline
+      />
+      <SendToWalletButtonRow>
+        <Button variant="text" onClick={onClose} fullWidth>
+          {t('button.cancel')}
+        </Button>
+        <Button variant="contained" onClick={handleConfirm} fullWidth>
+          {t('button.confirm')}
+        </Button>
+      </SendToWalletButtonRow>
+    </SendToWalletSheetContainer>
+  )
+}