@lifi/widget 4.0.0-beta.9 → 4.0.0

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) },
+  }))

package/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -1,6 +1,6 @@
 import { useAccount } from '@lifi/wallet-management'
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'
 import ErrorIcon from '@mui/icons-material/Error'
-import History from '@mui/icons-material/History'
 import TurnedIn from '@mui/icons-material/TurnedIn'
 import Wallet from '@mui/icons-material/Wallet'
 import { Box, Tooltip, Typography } from '@mui/material'
@@ -25,7 +25,6 @@ import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js
 import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import { HiddenUI, RequiredUI } from '../../types/widget.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'
 import { ConfirmAddressSheet } from './ConfirmAddressSheet.js'
@@ -190,6 +189,7 @@ export const SendToWalletPage: React.FC = () => {
 
   return (
     <FullHeightAdjustablePageContainer
+      topGutters
       bottomGutters
       enableFullHeight={variant !== 'drawer'}
     >
@@ -252,14 +252,12 @@ export const SendToWalletPage: React.FC = () => {
             onAddBookmark={handleAddBookmark}
           />
         </SendToWalletCard>
-        {requiredUI?.includes(RequiredUI.AccountDeployedMessage) && (
-          <AccountDeployedMessage />
-        )}
+        {requiredUI?.accountDeployedMessage && <AccountDeployedMessage />}
       </Box>
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
         <CardButton
           title={t('header.recentWallets')}
-          icon={<History />}
+          icon={<AccountBalanceWalletIcon />}
           onClick={handleRecentWalletsClick}
         >
           {!!recentWallets.length && (
@@ -272,7 +270,7 @@ export const SendToWalletPage: React.FC = () => {
             </Typography>
           )}
         </CardButton>
-        {!hiddenUI?.includes(HiddenUI.AddressBookConnectedWallets) && (
+        {!hiddenUI?.addressBookConnectedWallets && (
           <CardButton
             title={t('sendToWallet.connectedWallets')}
             icon={<Wallet />}

package/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -6,7 +6,6 @@ import { CardButton } from '../../components/Card/CardButton.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useSettingsStore } from '../../stores/settings/SettingsStore.js'
-import { HiddenUI } from '../../types/widget.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { BadgedValue } from './SettingsCard/BadgedValue.js'
 
@@ -28,7 +27,7 @@ export const BridgeAndExchangeSettings: React.FC<{
 
   const { hiddenUI } = useWidgetConfig()
 
-  if (type === 'Bridges' && hiddenUI?.includes(HiddenUI.BridgesSettings)) {
+  if (type === 'Bridges' && hiddenUI?.bridgesSettings) {
     return null
   }
 

package/src/pages/SettingsPage/LanguageSetting.tsx

@@ -6,7 +6,6 @@ import { CardValue } from '../../components/Card/CardButton.style.js'
 import { useLanguages } from '../../hooks/useLanguages.js'
 import { languageNames } from '../../providers/I18nProvider/constants.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { HiddenUI } from '../../types/widget.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 
 export const LanguageSetting: React.FC = () => {
@@ -15,7 +14,7 @@ export const LanguageSetting: React.FC = () => {
   const { hiddenUI } = useWidgetConfig()
   const { selectedLanguageCode } = useLanguages()
 
-  if (hiddenUI?.includes(HiddenUI.Language)) {
+  if (hiddenUI?.language) {
     return null
   }
 

package/src/pages/SettingsPage/ResetSettingsButton.style.tsx

@@ -1,10 +1,12 @@
 import { Box, styled } from '@mui/material'
+import type React from 'react'
 
-export const ResetButtonContainer = styled(Box)(({ theme }) => ({
-  background: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-  borderRadius: '16px',
-  padding: '16px',
-  svg: {
-    fill: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,
-  },
-}))
+export const ResetButtonContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    background: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+    borderRadius: '16px',
+    padding: '16px',
+    svg: {
+      fill: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,
+    },
+  }))

package/src/pages/SettingsPage/ResetSettingsButton.tsx

@@ -1,15 +1,15 @@
 import InfoRounded from '@mui/icons-material/InfoRounded'
+import { Box, Button } from '@mui/material'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Dialog } from '../../components/Dialog/Dialog.js'
 import {
-  Box,
-  Button,
   DialogActions,
+  DialogContainer,
   DialogContent,
   DialogContentText,
   DialogTitle,
-} from '@mui/material'
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Dialog } from '../../components/Dialog.js'
+} from '../../components/Dialog/Dialog.style.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
 import { ResetButtonContainer } from './ResetSettingsButton.style.js'
 
@@ -62,18 +62,20 @@ export const ResetSettingsButton: React.FC = () => {
         </Button>
 
         <Dialog open={open} onClose={toggleDialog}>
-          <DialogTitle>{t('warning.title.resetSettings')}</DialogTitle>
-          <DialogContent>
-            <DialogContentText>
-              {t('warning.message.resetSettings')}
-            </DialogContentText>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={toggleDialog}>{t('button.cancel')}</Button>
-            <Button variant="contained" onClick={handleReset} autoFocus>
-              {t('button.reset')}
-            </Button>
-          </DialogActions>
+          <DialogContainer>
+            <DialogTitle>{t('warning.title.resetSettings')}</DialogTitle>
+            <DialogContent>
+              <DialogContentText>
+                {t('warning.message.resetSettings')}
+              </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={toggleDialog}>{t('button.cancel')}</Button>
+              <Button variant="contained" onClick={handleReset} autoFocus>
+                {t('button.reset')}
+              </Button>
+            </DialogActions>
+          </DialogContainer>
         </Dialog>
       </ResetButtonContainer>
     </Box>

package/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx

@@ -1,12 +1,17 @@
 import { Box, badgeClasses, Badge as MuiBadge, styled } from '@mui/material'
+import type React from 'react'
 
-export const SettingsList = styled(Box)(({ theme }) => ({
+export const SettingsList: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: theme.spacing(1),
 }))
 
-export const Badge = styled(MuiBadge)(({ theme }) => ({
+export const Badge: React.FC<React.ComponentProps<typeof MuiBadge>> = styled(
+  MuiBadge
+)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(1.25),

package/src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx

@@ -1,6 +1,13 @@
 import { Collapse } from '@mui/material'
 import type { PropsWithChildren, ReactNode } from 'react'
-import { forwardRef, useId, useImperativeHandle, useRef } from 'react'
+import {
+  type ForwardRefExoticComponent,
+  forwardRef,
+  type RefAttributes,
+  useId,
+  useImperativeHandle,
+  useRef,
+} from 'react'
 import { Card } from '../../../components/Card/Card.js'
 import {
   CardRowButton,
@@ -23,7 +30,10 @@ export interface SettingCardExpandableRef {
   toggleExpanded: (forceExpanded?: boolean) => void
 }
 
-export const SettingCardExpandable = forwardRef<
+export const SettingCardExpandable: ForwardRefExoticComponent<
+  PropsWithChildren<SettingCardExpandableProps> &
+    RefAttributes<SettingCardExpandableRef>
+> = forwardRef<
   SettingCardExpandableRef,
   PropsWithChildren<SettingCardExpandableProps>
 >(

package/src/pages/SettingsPage/SettingsCard/SettingsAccordian.tsx

@@ -18,7 +18,10 @@ export const SettingsCardAccordion: React.FC<PropsWithChildren> = ({
   )
 }
 
-export const useSettingsCardExpandable = () => {
+export const useSettingsCardExpandable = (): {
+  expanded: boolean
+  toggleExpanded: (forceExpanded?: boolean) => void
+} => {
   const settingCardExpandableId = useId()
   const [expanded, setExpanded] = useState(false)
   const { openCard, setOpenCard } = useContext(SettingsAccordionContext)
@@ -39,7 +42,7 @@ export const useSettingsCardExpandable = () => {
   }, [settingCardExpandableId, openCard])
 
   return {
-    expanded,
-    toggleExpanded,
+    expanded: expanded,
+    toggleExpanded: toggleExpanded,
   }
 }