@lifi/widget 4.0.0-beta.0 → 4.0.0-beta.10

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -3,7 +3,12 @@ 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 { forwardRef, useState } 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'
@@ -30,206 +35,213 @@ interface BookmarkAddressProps {
   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 || ''
+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 handleCancel = () => {
-    setError(undefined)
-    ;(ref as RefObject<BottomSheetBase>).current?.close()
-  }
+    const nameValue = name.trim() || validatedWallet?.name || ''
+    const addressValue = address || validatedWallet?.address || ''
 
-  const validateWithAddressFromInput = async () => {
-    const validationResult = await validateAddress({ value: address })
-    if (!validationResult.isValid) {
-      setError({ type: 'address', message: validationResult.error })
-      return
+    const handleCancel = () => {
+      setError(undefined)
+      ;(ref as RefObject<BottomSheetBase>).current?.close()
     }
 
-    return {
-      name: nameValue,
-      address: validationResult.address,
-      chainType: validationResult.chainType,
-    }
-  }
+    const validateWithAddressFromInput = async () => {
+      const validationResult = await validateAddress({ value: address })
+      if (!validationResult.isValid) {
+        setError({ type: 'address', message: validationResult.error })
+        return
+      }
 
-  const validateWithValidatedWallet = (validatedWallet: Bookmark) => {
-    if (error) {
-      setError(undefined)
-    }
-    return {
-      name: nameValue,
-      address: validatedWallet.address,
-      chainType: validatedWallet.chainType,
+      return {
+        name: nameValue,
+        address: validationResult.address,
+        chainType: validationResult.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
+    const validateWithValidatedWallet = (validatedWallet: Bookmark) => {
+      if (error) {
+        setError(undefined)
+      }
+      return {
+        name: nameValue,
+        address: validatedWallet.address,
+        chainType: validatedWallet.chainType,
+      }
     }
 
-    //  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) {
+    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.bookmarkAlreadyExists', {
-            name: existingBookmark.name,
-          }),
+          message: t('error.title.walletAddressRequired'),
         })
         return
       }
-      ;(ref as RefObject<BottomSheetBase>).current?.close()
 
-      onAddBookmark({
-        name: validatedBookmark.name,
-        address: validatedBookmark.address,
-        chainType: validatedBookmark.chainType,
-      })
+      //  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)
+    const handleAddressInputChange = (e: ChangeEvent) => {
+      if (error) {
+        setError(undefined)
+      }
+      setAddress((e.target as HTMLInputElement).value.trim())
     }
-    setAddress((e.target as HTMLInputElement).value.trim())
-  }
 
-  const handleNameInputChange = (e: ChangeEvent) => {
-    if (error) {
-      setError(undefined)
+    const handleNameInputChange = (e: ChangeEvent) => {
+      if (error) {
+        setError(undefined)
+      }
+      setName((e.target as HTMLInputElement).value)
     }
-    setName((e.target as HTMLInputElement).value)
-  }
 
-  const resetValues = () => {
-    setName('')
-    setAddress('')
-  }
+    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 && (
+    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 === 'address' ? 'error' : 'default'}
+              type={error?.type === 'name' ? 'error' : 'default'}
             >
-              <AddressInput
+              <Input
                 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}
+                onChange={handleNameInputChange}
+                value={name}
+                placeholder={
+                  validatedWallet?.name || t('sendToWallet.enterName')
+                }
+                aria-label={
+                  validatedWallet?.name || t('sendToWallet.enterName')
+                }
                 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>
-  )
-})
+            {!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

@@ -1,17 +1,16 @@
 import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
 import DeleteOutline from '@mui/icons-material/DeleteOutline'
-import MoreHoriz from '@mui/icons-material/MoreHoriz'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import TurnedIn from '@mui/icons-material/TurnedIn'
-import { Button, ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
+import { Button, ListItemAvatar, ListItemText } from '@mui/material'
 import { useNavigate } from '@tanstack/react-router'
-import { useId, useRef, useState } from 'react'
+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 { ListItem } from '../../components/ListItem/ListItem.js'
 import { ListItemButton } from '../../components/ListItem//ListItemButton.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'
@@ -20,7 +19,6 @@ 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 { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { shortenAddress } from '../../utils/wallet.js'
@@ -30,12 +28,10 @@ import {
   BookmarkButtonContainer,
   BookmarksListContainer,
   FullHeightAdjustablePageContainer,
-  OptionsMenuButton,
 } from './SendToWalletPage.style.js'
 
-export const BookmarksPage = () => {
+export const BookmarksPage = (): JSX.Element => {
   const { t } = useTranslation()
-  const [bookmark, setBookmark] = useState<Bookmark>()
   const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)
   const { bookmarks } = useBookmarks()
   const { requiredToChainType } = useToAddressRequirements()
@@ -43,7 +39,6 @@ export const BookmarksPage = () => {
     useBookmarkActions()
   const navigate = useNavigate()
   const { setFieldValue } = useFieldActions()
-  const { setSendToWallet } = useSendToWalletActions()
   const { variant } = useWidgetConfig()
   const { getAddressLink } = useExplorer()
 
@@ -59,49 +54,9 @@ export const BookmarksPage = () => {
       isDirty: true,
     })
     setSelectedBookmark(bookmark)
-    setSendToWallet(true)
     navigate({ to: navigationRoutes.home, 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
@@ -127,26 +82,39 @@ export const BookmarksPage = () => {
                 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:
+            <ContextMenu
+              disabled={
+                !!(
                   requiredToChainType &&
                   requiredToChainType !== bookmark.chainType
-                    ? 0.5
-                    : 1,
-              }}
-            >
-              <MoreHoriz fontSize="small" />
-            </OptionsMenuButton>
+                )
+              }
+              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 && (
@@ -154,34 +122,6 @@ export const BookmarksPage = () => {
             {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}>

package/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -1,7 +1,7 @@
 import Wallet from '@mui/icons-material/Wallet'
 import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Button, Typography } from '@mui/material'
-import type { RefObject } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'
 import { forwardRef, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
@@ -11,7 +11,6 @@ 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 { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
 import {
   IconContainer,
   SendToWalletButtonRow,
@@ -29,10 +28,9 @@ interface ConfirmAddressSheetContentProps extends ConfirmAddressSheetProps {
   onClose: () => void
 }
 
-export const ConfirmAddressSheet = forwardRef<
-  BottomSheetBase,
-  ConfirmAddressSheetProps
->((props, ref) => {
+export const ConfirmAddressSheet: ForwardRefExoticComponent<
+  ConfirmAddressSheetProps & RefAttributes<BottomSheetBase>
+> = forwardRef<BottomSheetBase, ConfirmAddressSheetProps>((props, ref) => {
   const handleClose = () => {
     ;(ref as RefObject<BottomSheetBase>).current?.close()
   }
@@ -52,8 +50,6 @@ const ConfirmAddressSheetContent: React.FC<ConfirmAddressSheetContentProps> = ({
   const { t } = useTranslation()
   const navigateBack = useNavigateBack()
   const { setFieldValue } = useFieldActions()
-  const { setSendToWallet } = useSendToWalletActions()
-
   const containerRef = useRef<HTMLElement>(null)
   useSetContentHeight(containerRef)
 
@@ -64,7 +60,6 @@ const ConfirmAddressSheetContent: React.FC<ConfirmAddressSheetContentProps> = ({
         isDirty: true,
       })
       onConfirm?.(validatedBookmark)
-      setSendToWallet(true)
       onClose()
       navigateBack()
     }