@lifi/widget 4.0.0-beta.9 → 4.1.0

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -1,42 +1,38 @@
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'
 import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
-import DeleteOutline from '@mui/icons-material/DeleteOutline'
-import History from '@mui/icons-material/History'
-import MoreHoriz from '@mui/icons-material/MoreHoriz'
+import DeleteOutline from '@mui/icons-material/DeleteOutlined'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import TurnedInNot from '@mui/icons-material/TurnedInNot'
-import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
+import { List, ListItemAvatar, ListItemText } from '@mui/material'
 import { useNavigate } from '@tanstack/react-router'
-import { useId, useRef, useState } from 'react'
+import { type JSX, useRef, useState } 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 { Menu } from '../../components/Menu.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 { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.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 { EmptyListIndicator } from './EmptyListIndicator.js'
-import {
-  ListContainer,
-  OptionsMenuButton,
-  SendToWalletPageContainer,
-} from './SendToWalletPage.style.js'
 
-export const RecentWalletsPage = () => {
+export const RecentWalletsPage = (): JSX.Element => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const [selectedRecent, setSelectedRecent] = useState<Bookmark>()
+  const [bookmarkTarget, setBookmarkTarget] = useState<Bookmark>()
   const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)
+  const listParentRef = useRef<HTMLUListElement | null>(null)
   const { recentWallets } = useBookmarks()
   const { requiredToChainType } = useToAddressRequirements()
   const {
@@ -46,14 +42,12 @@ export const RecentWalletsPage = () => {
     addRecentWallet,
   } = useBookmarkActions()
   const { setFieldValue } = useFieldActions()
-  const { setSendToWallet } = useSendToWalletActions()
-  const moreMenuId = useId()
-  const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>()
-  const open = Boolean(moreMenuAnchorEl)
   const { getAddressLink } = useExplorer()
 
   useHeader(t('header.recentWallets'))
 
+  const { listHeight } = useListHeight({ listParentRef })
+
   const handleRecentSelected = (recentWallet: Bookmark) => {
     addRecentWallet(recentWallet)
     setFieldValue('toAddress', recentWallet.address, {
@@ -61,7 +55,6 @@ export const RecentWalletsPage = () => {
       isDirty: true,
     })
     setSelectedBookmark(recentWallet)
-    setSendToWallet(true)
     navigate({
       to: navigationRoutes.home,
       replace: true,
@@ -73,53 +66,15 @@ export const RecentWalletsPage = () => {
     navigate({ to: navigationRoutes.bookmarks, replace: true })
   }
 
-  const closeMenu = () => {
-    setMenuAnchorEl(null)
-  }
-
-  const handleMenuOpen = (el: HTMLElement, recentWallet: Bookmark) => {
-    setMenuAnchorEl(el)
-    setSelectedRecent(recentWallet)
-  }
-
-  const handleCopyAddress = () => {
-    if (selectedRecent) {
-      navigator.clipboard.writeText(selectedRecent.address)
-    }
-    closeMenu()
-  }
-
-  const handleViewOnExplorer = () => {
-    if (selectedRecent) {
-      window.open(
-        getAddressLink(
-          selectedRecent.address,
-          defaultChainIdsByType[selectedRecent.chainType]
-        ),
-        '_blank'
-      )
-    }
-    closeMenu()
-  }
-
-  const handleOpenBookmarkSheet = () => {
-    if (selectedRecent) {
-      setSelectedRecent(selectedRecent)
-      bookmarkAddressSheetRef.current?.open()
-    }
-    closeMenu()
-  }
-
-  const handleRemoveRecentWallet = () => {
-    if (selectedRecent) {
-      removeRecentWallet(selectedRecent.address)
-    }
-    closeMenu()
-  }
-
   return (
-    <SendToWalletPageContainer disableGutters>
-      <ListContainer>
+    <PageContainer disableGutters>
+      <List
+        className="long-list"
+        ref={listParentRef}
+        style={{ height: listHeight, overflow: 'auto' }}
+        disablePadding
+        sx={{ paddingTop: 1.5 }}
+      >
         {recentWallets.map((recentWallet) => (
           <ListItem key={recentWallet.address} sx={{ position: 'relative' }}>
             <ListItemButton
@@ -145,73 +100,62 @@ export const RecentWalletsPage = () => {
                 }
               />
             </ListItemButton>
-            <OptionsMenuButton
-              aria-label={t('button.options')}
-              aria-controls={
-                open && recentWallet.address === selectedRecent?.address
-                  ? moreMenuId
-                  : undefined
-              }
-              aria-haspopup="true"
-              aria-expanded={open ? 'true' : undefined}
-              onClick={(e) =>
-                handleMenuOpen(e.target as HTMLElement, recentWallet)
-              }
-              sx={{
-                opacity:
+            <ContextMenu
+              disabled={
+                !!(
                   requiredToChainType &&
                   requiredToChainType !== recentWallet.chainType
-                    ? 0.5
-                    : 1,
-              }}
-            >
-              <MoreHoriz fontSize="small" />
-            </OptionsMenuButton>
+                )
+              }
+              items={[
+                {
+                  icon: <ContentCopyRounded />,
+                  label: t('button.copyAddress'),
+                  onClick: () =>
+                    navigator.clipboard.writeText(recentWallet.address),
+                },
+                {
+                  icon: <OpenInNewRounded />,
+                  label: t('button.viewOnExplorer'),
+                  onClick: () =>
+                    window.open(
+                      getAddressLink(
+                        recentWallet.address,
+                        defaultChainIdsByType[recentWallet.chainType]
+                      ),
+                      '_blank'
+                    ),
+                },
+                {
+                  icon: <TurnedInNot />,
+                  label: t('button.bookmark'),
+                  onClick: () => {
+                    setBookmarkTarget(recentWallet)
+                    bookmarkAddressSheetRef.current?.open()
+                  },
+                },
+                {
+                  icon: <DeleteOutline />,
+                  label: t('button.delete'),
+                  onClick: () => removeRecentWallet(recentWallet.address),
+                },
+              ]}
+            />
           </ListItem>
         ))}
         {!recentWallets.length && (
-          <EmptyListIndicator icon={<History sx={{ fontSize: 48 }} />}>
-            {t('sendToWallet.noRecentWallets')}
-          </EmptyListIndicator>
+          <EmptyListIndicator
+            icon={<AccountBalanceWalletIcon />}
+            title={t('sendToWallet.noRecentWallets')}
+            message={t('sendToWallet.noRecentWalletsMessage')}
+          />
         )}
-        <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={handleOpenBookmarkSheet}>
-            <TurnedInNot />
-            {t('button.bookmark')}
-          </MenuItem>
-          <MenuItem onClick={handleRemoveRecentWallet}>
-            <DeleteOutline />
-            {t('button.delete')}
-          </MenuItem>
-        </Menu>
-      </ListContainer>
+      </List>
       <BookmarkAddressSheet
         ref={bookmarkAddressSheetRef}
-        validatedWallet={selectedRecent}
+        validatedWallet={bookmarkTarget}
         onAddBookmark={handleAddBookmark}
       />
-    </SendToWalletPageContainer>
+    </PageContainer>
   )
 }

package/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -1,15 +1,16 @@
 import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
-import MoreHoriz from '@mui/icons-material/MoreHoriz'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
-import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
-import { useId, useState } from 'react'
+import { List, ListItemAvatar, ListItemText } from '@mui/material'
+import { type JSX, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { AccountAvatar } from '../../components/Avatar/AccountAvatar.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 { PageContainer } from '../../components/PageContainer.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useHeader } from '../../hooks/useHeader.js'
+import { useListHeight } from '../../hooks/useListHeight.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
@@ -18,27 +19,21 @@ import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import type { ToAddress } from '../../types/widget.js'
 import { defaultChainIdsByType } from '../../utils/chainType.js'
 import { shortenAddress } from '../../utils/wallet.js'
-import {
-  ListContainer,
-  OptionsMenuButton,
-  SendToWalletPageContainer,
-} from './SendToWalletPage.style.js'
 
-export const SendToConfiguredWalletPage = () => {
+export const SendToConfiguredWalletPage = (): JSX.Element => {
   const { t } = useTranslation()
   const navigateBack = useNavigateBack()
   const { toAddresses } = useWidgetConfig()
-  const [selectedToAddress, setSelectedToAddress] = useState<ToAddress>()
   const { requiredToChainType } = useToAddressRequirements()
   const { setSelectedBookmark } = useBookmarkActions()
   const { setFieldValue } = useFieldActions()
-  const moreMenuId = useId()
-  const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>()
-  const open = Boolean(moreMenuAnchorEl)
   const { getAddressLink } = useExplorer()
+  const listParentRef = useRef<HTMLUListElement | null>(null)
 
   useHeader(t('header.sendToWallet'))
 
+  const { listHeight } = useListHeight({ listParentRef })
+
   const handleCuratedSelected = (toAddress: ToAddress) => {
     setSelectedBookmark(toAddress)
     setFieldValue('toAddress', toAddress.address, {
@@ -48,38 +43,15 @@ export const SendToConfiguredWalletPage = () => {
     navigateBack()
   }
 
-  const closeMenu = () => {
-    setMenuAnchorEl(null)
-  }
-
-  const handleMenuOpen = (el: HTMLElement, toAddress: ToAddress) => {
-    setMenuAnchorEl(el)
-    setSelectedToAddress(toAddress)
-  }
-
-  const handleCopyAddress = () => {
-    if (selectedToAddress) {
-      navigator.clipboard.writeText(selectedToAddress.address)
-    }
-    closeMenu()
-  }
-
-  const handleViewOnExplorer = () => {
-    if (selectedToAddress) {
-      window.open(
-        getAddressLink(
-          selectedToAddress.address,
-          defaultChainIdsByType[selectedToAddress.chainType]
-        ),
-        '_blank'
-      )
-    }
-    closeMenu()
-  }
-
   return (
-    <SendToWalletPageContainer disableGutters>
-      <ListContainer sx={{ minHeight: 418 }}>
+    <PageContainer disableGutters>
+      <List
+        className="long-list"
+        ref={listParentRef}
+        style={{ height: listHeight, overflow: 'auto' }}
+        disablePadding
+        sx={{ paddingTop: 1.5 }}
+      >
         {toAddresses?.map((toAddress) => (
           <ListItem key={toAddress.address} sx={{ position: 'relative' }}>
             <ListItemButton
@@ -102,55 +74,37 @@ export const SendToConfiguredWalletPage = () => {
                 }
               />
             </ListItemButton>
-            <OptionsMenuButton
-              aria-label={t('button.options')}
-              aria-controls={
-                open && toAddress.address === selectedToAddress?.address
-                  ? moreMenuId
-                  : undefined
-              }
-              aria-haspopup="true"
-              aria-expanded={open ? 'true' : undefined}
-              onClick={(e) =>
-                handleMenuOpen(e.target as HTMLElement, toAddress)
-              }
-              sx={{
-                opacity:
+            <ContextMenu
+              disabled={
+                !!(
                   requiredToChainType &&
                   requiredToChainType !== toAddress.chainType
-                    ? 0.5
-                    : 1,
-              }}
-            >
-              <MoreHoriz fontSize="small" />
-            </OptionsMenuButton>
+                )
+              }
+              items={[
+                {
+                  icon: <ContentCopyRounded />,
+                  label: t('button.copyAddress'),
+                  onClick: () =>
+                    navigator.clipboard.writeText(toAddress.address),
+                },
+                {
+                  icon: <OpenInNewRounded />,
+                  label: t('button.viewOnExplorer'),
+                  onClick: () =>
+                    window.open(
+                      getAddressLink(
+                        toAddress.address,
+                        defaultChainIdsByType[toAddress.chainType]
+                      ),
+                      '_blank'
+                    ),
+                },
+              ]}
+            />
           </ListItem>
         ))}
-        <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>
+      </List>
+    </PageContainer>
   )
 }

package/src/pages/SendToWallet/SendToWalletPage.style.tsx

@@ -2,19 +2,20 @@ import {
   Alert,
   alertClasses,
   Box,
-  IconButton,
   inputBaseClasses,
-  List,
   styled,
   Typography,
 } from '@mui/material'
+import type React from 'react'
 import { ButtonTertiary } from '../../components/ButtonTertiary.js'
 import { InputCard } from '../../components/Card/InputCard.js'
 import { Input } from '../../components/Input.js'
 import type { PageContainerProps } from '../../components/PageContainer.js'
 import { PageContainer } from '../../components/PageContainer.js'
 
-export const AddressInput = styled(Input)(({ theme }) => ({
+export const AddressInput: React.FC<
+  React.ComponentProps<typeof Input> & PageContainerProps
+> = styled(Input)(({ theme }) => ({
   padding: 0,
   [`.${inputBaseClasses.input}`]: {
     padding: theme.spacing(2),
@@ -22,46 +23,46 @@ export const AddressInput = styled(Input)(({ theme }) => ({
   },
 }))
 
-export const BookmarkInputFields = styled(Box)(({ theme }) => ({
+export const BookmarkInputFields: React.FC<
+  React.ComponentProps<typeof Box> & PageContainerProps
+> = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: theme.spacing(2),
   width: '100%',
 }))
 
-export const SendToWalletPageContainer = styled(
-  PageContainer
-)<PageContainerProps>(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.spacing(1),
-}))
-
 interface FullHeightAdjustablePageContainerProps extends PageContainerProps {
   enableFullHeight?: boolean
 }
 
-export const FullHeightAdjustablePageContainer = styled(
-  SendToWalletPageContainer,
-  {
-    shouldForwardProp: (prop) => prop !== 'enableFullHeight',
-  }
-)<FullHeightAdjustablePageContainerProps>(({ theme, enableFullHeight }) => ({
+export const FullHeightAdjustablePageContainer: React.FC<
+  React.ComponentProps<typeof PageContainer> &
+    FullHeightAdjustablePageContainerProps
+> = styled(PageContainer, {
+  shouldForwardProp: (prop) => prop !== 'enableFullHeight',
+})<FullHeightAdjustablePageContainerProps>(({ theme, enableFullHeight }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1),
   justifyContent: 'space-between',
   ...(enableFullHeight && theme.container?.height === '100%'
     ? {
-        justifyContent: 'space-between',
         height: '100%',
       }
     : {}),
 }))
 
-export const SendToWalletCard = styled(InputCard)({
+export const SendToWalletCard: React.FC<
+  React.ComponentProps<typeof InputCard>
+> = styled(InputCard)({
   display: 'flex',
   flexDirection: 'column',
 })
 
-export const SendToWalletSheetContainer = styled(Box)(({ theme }) => ({
+export const SendToWalletSheetContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
@@ -69,90 +70,68 @@ export const SendToWalletSheetContainer = styled(Box)(({ theme }) => ({
   gap: theme.spacing(2),
 }))
 
-export const SendToWalletButtonRow = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  width: '100%',
-  gap: theme.spacing(1),
-}))
+export const SendToWalletButtonRow: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    width: '100%',
+    gap: theme.spacing(1),
+  }))
 
-export const SendToWalletIconButton = styled(ButtonTertiary)(({ theme }) => ({
+export const SendToWalletIconButton: React.FC<
+  React.ComponentProps<typeof ButtonTertiary>
+> = styled(ButtonTertiary)(({ theme }) => ({
   padding: theme.spacing(1.25),
   minWidth: 40,
 }))
 
-export const IconContainer = styled(Box)(({ theme }) => ({
+export const IconContainer: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   width: 80,
   height: 80,
   borderRadius: '50%',
-  color: theme.vars.palette.grey[700],
-  background: theme.vars.palette.grey[200],
+  color: theme.vars.palette.grey[800],
+  background: theme.vars.palette.grey[300],
   ...theme.applyStyles('dark', {
     color: theme.vars.palette.grey[300],
     background: theme.vars.palette.grey[800],
   }),
 }))
 
-export const SheetTitle = styled(Typography)(() => ({
-  fontSize: 18,
-  fontWeight: 700,
-}))
-
-export const SheetAddressContainer = styled(Box)(() => ({
-  width: '100%',
-  wordWrap: 'break-word',
-}))
+export const SheetTitle: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(() => ({
+    fontSize: 18,
+    fontWeight: 700,
+  }))
 
-export const ListContainer = styled(List)(() => ({
-  display: 'flex',
-  flexDirection: 'column',
-  padding: 0,
-  minHeight: 400,
-}))
+export const SheetAddressContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(() => ({
+    width: '100%',
+    wordWrap: 'break-word',
+  }))
 
-export const BookmarksListContainer = styled(ListContainer)(({ theme }) => ({
-  ...(theme.container?.height === '100%'
-    ? { minHeight: 360, height: 360, flexGrow: 1, overflow: 'auto' }
-    : { minHeight: 440 }),
-}))
-export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({
+export const BookmarkButtonContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
   background: theme.vars.palette.background.default,
   display: 'flex',
   flexDirection: 'column',
-  bottom: 0,
-  padding: theme.spacing(0, 3, 3),
-  zIndex: 2,
-  position: 'sticky',
+  flexShrink: 0,
+  padding: theme.spacing(2, 3, 3),
   width: '100%',
 }))
 
-export const EmptyContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  flexGrow: 1,
-  gap: theme.spacing(2),
-}))
-
-export const ValidationAlert = styled(Alert)(({ theme }) => ({
-  backgroundColor: 'transparent',
-  padding: 0,
-  color: theme.vars.palette.text.primary,
-  [`.${alertClasses.icon}`]: {
+export const ValidationAlert: React.FC<React.ComponentProps<typeof Alert>> =
+  styled(Alert)(({ theme }) => ({
+    backgroundColor: 'transparent',
     padding: 0,
-    color: theme.vars.palette.error.main,
-  },
-  [`.${alertClasses.message}`]: { padding: theme.spacing(0.25, 0, 0, 0) },
-}))
-
-export const OptionsMenuButton = styled(IconButton)(({ theme }) => ({
-  position: 'absolute',
-  top: theme.spacing(1.75),
-  right: theme.spacing(2),
-  '&:hover': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-  },
-}))
+    color: theme.vars.palette.text.primary,
+    [`.${alertClasses.icon}`]: {
+      padding: 0,
+      color: theme.vars.palette.error.main,
+    },
+    [`.${alertClasses.message}`]: { padding: theme.spacing(0.25, 0, 0, 0) },
+  }))