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

package/src/components/ContextMenu.tsx

@@ -0,0 +1,75 @@
+import MoreVertIcon from '@mui/icons-material/MoreVert'
+import type { SxProps, Theme } from '@mui/material'
+import { MenuItem } from '@mui/material'
+import { type JSX, useId, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ContextMenuButton } from './ContextMenu.style.js'
+import { Menu } from './Menu.js'
+
+export interface ContextMenuItemConfig {
+  icon: React.ReactNode
+  label: string
+  onClick: () => void
+}
+
+interface ContextMenuProps {
+  items: ContextMenuItemConfig[]
+  disabled?: boolean
+  buttonSx?: SxProps<Theme>
+}
+
+export const ContextMenu = ({
+  items,
+  disabled,
+  buttonSx,
+}: ContextMenuProps): JSX.Element => {
+  const { t } = useTranslation()
+  const menuId = useId()
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const open = Boolean(anchorEl)
+
+  const handleOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(e.currentTarget)
+  }
+
+  const closeMenu = () => {
+    setAnchorEl(null)
+  }
+
+  const handleItemClick = (onClick: () => void) => () => {
+    onClick()
+    closeMenu()
+  }
+
+  return (
+    <>
+      <ContextMenuButton
+        aria-label={t('button.options')}
+        aria-controls={open ? menuId : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        onClick={handleOpen}
+        sx={{ opacity: disabled ? 0.5 : 1, ...buttonSx }}
+        disableRipple
+      >
+        <MoreVertIcon fontSize="small" />
+      </ContextMenuButton>
+      <Menu
+        id={menuId}
+        elevation={0}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={closeMenu}
+      >
+        {items.map((item) => (
+          <MenuItem key={item.label} onClick={handleItemClick(item.onClick)}>
+            {item.icon}
+            {item.label}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  )
+}

package/src/components/ContractComponent/NFT/NFT.style.ts

@@ -1,8 +1,10 @@
 import { Avatar, styled } from '@mui/material'
+import type React from 'react'
 
-export const PreviewAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.vars.palette.background.paper,
-  width: 96,
-  height: 96,
-  borderRadius: theme.vars.shape.borderRadius,
-}))
+export const PreviewAvatar: React.FC<React.ComponentProps<typeof Avatar>> =
+  styled(Avatar)(({ theme }) => ({
+    background: theme.vars.palette.background.paper,
+    width: 96,
+    height: 96,
+    borderRadius: theme.vars.shape.borderRadius,
+  }))

package/src/components/Dialog/Dialog.style.tsx

@@ -0,0 +1,59 @@
+import {
+  Box,
+  DialogActions as MuiDialogActions,
+  DialogContent as MuiDialogContent,
+  DialogContentText as MuiDialogContentText,
+  DialogTitle as MuiDialogTitle,
+  styled,
+} from '@mui/material'
+import type React from 'react'
+
+export const DialogContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: theme.spacing(1.5),
+    padding: theme.spacing(4),
+  }))
+
+export const DialogTitle: React.FC<
+  React.ComponentProps<typeof MuiDialogTitle>
+> = styled(MuiDialogTitle)({
+  padding: 0,
+  fontWeight: 700,
+  fontSize: 18,
+  lineHeight: 1.3334,
+  textAlign: 'center',
+})
+
+export const DialogContent: React.FC<
+  React.ComponentProps<typeof MuiDialogContent>
+> = styled(MuiDialogContent)(({ theme }) => ({
+  padding: 0,
+  marginBottom: theme.spacing(2),
+}))
+
+export const DialogActions: React.FC<
+  React.ComponentProps<typeof MuiDialogActions>
+> = styled(MuiDialogActions)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  gap: theme.spacing(1.5),
+  width: '100%',
+  padding: 0,
+  '& .MuiButton-root': {
+    flex: 1,
+    margin: 0,
+  },
+}))
+
+export const DialogContentText: React.FC<
+  React.ComponentProps<typeof MuiDialogContentText>
+> = styled(MuiDialogContentText)(({ theme }) => ({
+  padding: 0,
+  fontSize: 14,
+  fontWeight: 500,
+  lineHeight: 1.3334,
+  color: theme.vars.palette.text.primary,
+}))

package/src/components/{Dialog.tsx → Dialog/Dialog.tsx}

@@ -1,16 +1,16 @@
 import type { DialogProps, Theme } from '@mui/material'
 import { Dialog as MuiDialog } from '@mui/material'
 import type { PropsWithChildren } from 'react'
-import { useGetScrollableContainer } from '../hooks/useScrollableContainer.js'
+import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'
 
-export const modalProps = {
+export const modalProps: { sx: { position: string; overflow: string } } = {
   sx: {
     position: 'absolute',
     overflow: 'hidden',
   },
 }
 
-export const slotProps = {
+export const slotProps: DialogProps['slotProps'] = {
   paper: {
     sx: (theme: Theme) => ({
       position: 'absolute',

package/src/components/Expansion/Expansion.style.tsx

@@ -1,4 +1,5 @@
 import { Box, styled } from '@mui/material'
+import type React from 'react'
 
 export const animationDuration = 225
 
@@ -32,7 +33,9 @@ export const transitionStyles = {
   },
 }
 
-export const ExpansionContainer = styled(Box, {
+export const ExpansionContainer: React.FC<
+  React.ComponentProps<typeof Box> & { width: string | number }
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'width',
 })<{ width: string | number }>(({ width }) => ({
   position: 'relative',

package/src/components/Expansion/Expansion.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react'
+import { type JSX, useMemo, useRef, useState } from 'react'
 import { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'
 import { ExpansionType } from '../../types/widget.js'
 import { ChainsExpanded } from '../Chains/ChainsExpanded.js'
@@ -7,7 +7,7 @@ import { RoutesExpanded } from '../Routes/RoutesExpanded.js'
 import { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'
 import { ExpansionContainer } from './Expansion.style.js'
 
-export function Expansion() {
+export function Expansion(): JSX.Element {
   const [withChainExpansion, expansionType] = useHasChainExpansion()
   const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)
   const [routesOpen, setRoutesOpen] = useState(false)

package/src/components/Expansion/ExpansionTransition.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import { type PropsWithChildren, useRef } from 'react'
+import { type JSX, type PropsWithChildren, useRef } from 'react'
 import { Transition } from 'react-transition-group'
 import {
   animationDuration,
@@ -18,7 +18,7 @@ export function ExpansionTransition({
   children,
   width,
   onExited,
-}: PropsWithChildren<ExpansionTransitionProps>) {
+}: PropsWithChildren<ExpansionTransitionProps>): JSX.Element {
   const nodeRef = useRef(null)
   return (
     <Transition

package/src/components/FullPageContainer.tsx

@@ -1,4 +1,5 @@
 import { styled } from '@mui/material'
+import type React from 'react'
 import type { PageContainerProps } from './PageContainer.js'
 import { PageContainer } from './PageContainer.js'
 
@@ -6,9 +7,11 @@ import { PageContainer } from './PageContainer.js'
 // the PageContainer collapses to use the minimum space need to display its child components whereas
 // the FullPageContainer expands and fills the available vertical space provide by the max-height
 // See the CssBaselineContainer component styles in AppContainer.tsx for usage of full-page-container
-export const FullPageContainer = styled((props: PageContainerProps) => (
-  <PageContainer
-    {...props}
-    className={`${props.className} full-page-container`}
-  />
-))``
+export const FullPageContainer: React.FC<PageContainerProps> = styled(
+  (props: PageContainerProps) => (
+    <PageContainer
+      {...props}
+      className={`${props.className} full-page-container`}
+    />
+  )
+)``

package/src/components/Header/ActivitiesButton.style.tsx

@@ -0,0 +1,67 @@
+import {
+  Badge,
+  Box,
+  CircularProgress as MuiCircularProgress,
+  IconButton as MuiIconButton,
+  styled,
+} from '@mui/material'
+import type React from 'react'
+
+export const ErrorBadge: React.FC<React.ComponentProps<typeof Badge>> = styled(
+  Badge
+)(({ theme }) => ({
+  '& .MuiBadge-badge': {
+    padding: 0,
+    minWidth: 16,
+    width: 16,
+    height: 16,
+    borderRadius: '50%',
+    backgroundColor: theme.vars.palette.background.paper,
+    boxShadow: `0 0 0 2px ${theme.vars.palette.background.paper}`,
+    top: -2,
+    left: 10,
+  },
+}))
+
+export const IconContainer: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(() => ({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}))
+
+export const ActivitiesIconButton: React.FC<
+  React.ComponentProps<typeof MuiIconButton> & { active?: boolean }
+> = styled(MuiIconButton, {
+  shouldForwardProp: (prop) => prop !== 'active',
+})<{ active?: boolean }>({
+  variants: [
+    {
+      props: { active: true },
+      style: ({ theme }) => ({
+        backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.08)`,
+        '&:hover': {
+          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
+        },
+        ...theme.applyStyles('dark', {
+          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
+          '&:hover': {
+            backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
+          },
+        }),
+      }),
+    },
+  ],
+})
+
+export const ProgressTrack: React.FC<
+  React.ComponentProps<typeof MuiCircularProgress>
+> = styled(MuiCircularProgress)(({ theme }) => ({
+  position: 'absolute',
+  color: theme.vars.palette.grey[300],
+  ...theme.applyStyles('dark', {
+    color: theme.vars.palette.grey[800],
+  }),
+}))

package/src/components/Header/ActivitiesButton.tsx

@@ -0,0 +1,58 @@
+import ErrorRounded from '@mui/icons-material/ErrorRounded'
+import HistoryIcon from '@mui/icons-material/History'
+import { Tooltip } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { CircularProgressPending } from '../Step/CircularProgress.style.js'
+import {
+  ActivitiesIconButton,
+  ErrorBadge,
+  IconContainer,
+  ProgressTrack,
+} from './ActivitiesButton.style.js'
+
+export const ActivitiesButton = (): JSX.Element => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const indicator = useRouteExecutionIndicator()
+
+  return (
+    <Tooltip title={t('header.activities')}>
+      <ActivitiesIconButton
+        active={indicator.active || indicator.failed}
+        size="medium"
+        onClick={() => navigate({ to: navigationRoutes.activities })}
+      >
+        <ErrorBadge
+          invisible={!indicator.failed}
+          badgeContent={
+            <ErrorRounded color="error" sx={{ width: 20, height: 20 }} />
+          }
+          overlap="circular"
+          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        >
+          <IconContainer>
+            {(indicator.active || indicator.failed) && (
+              <ProgressTrack
+                variant="determinate"
+                value={100}
+                size={40}
+                thickness={3}
+              />
+            )}
+            {indicator.active && (
+              <CircularProgressPending
+                size={40}
+                sx={{ position: 'absolute', top: -8, left: -8 }}
+              />
+            )}
+            <HistoryIcon />
+          </IconContainer>
+        </ErrorBadge>
+      </ActivitiesIconButton>
+    </Tooltip>
+  )
+}

package/src/components/Header/CloseDrawerButton.tsx

@@ -1,5 +1,6 @@
 import CloseRounded from '@mui/icons-material/CloseRounded'
 import { IconButton, Tooltip } from '@mui/material'
+import type { JSX } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDrawer } from '../../AppDrawerContext.js'
 import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
@@ -8,7 +9,9 @@ interface CloseDrawerButtonProps {
   header?: 'navigation' | 'wallet'
 }
 
-export const CloseDrawerButton = ({ header }: CloseDrawerButtonProps) => {
+export const CloseDrawerButton = ({
+  header,
+}: CloseDrawerButtonProps): JSX.Element | null => {
   const { t } = useTranslation()
   const { closeDrawer } = useDrawer()
   const { useExternalWalletProvidersOnly } = useExternalWalletProvider()

package/src/components/Header/DisconnectIconButton.tsx

@@ -2,8 +2,13 @@ import { useAccountDisconnect } from '@lifi/wallet-management'
 import type { Account } from '@lifi/widget-provider'
 import PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'
 import { IconButton } from '@mui/material'
+import type { JSX } from 'react'
 
-export const DisconnectIconButton = ({ account }: { account: Account }) => {
+export const DisconnectIconButton = ({
+  account,
+}: {
+  account: Account
+}): JSX.Element => {
   const disconnect = useAccountDisconnect()
   return (
     <IconButton

package/src/components/Header/Header.style.ts

@@ -6,9 +6,12 @@ import {
   buttonClasses,
   styled,
 } from '@mui/material'
+import type React from 'react'
 import { getAvatarMask } from '../Avatar/utils.js'
 
-export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
+export const HeaderAppBar: React.FC<
+  React.ComponentProps<typeof AppBar> & { sticky?: boolean }
+> = styled(AppBar)(({ theme }) => ({
   backgroundColor: 'transparent',
   ...theme.applyStyles('dark', {
     backgroundColor: 'transparent',
@@ -19,7 +22,9 @@ export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
   position: 'relative',
 }))
 
-export const Container = styled(Box, {
+export const Container: React.FC<
+  React.ComponentProps<typeof Box> & { sticky?: boolean }
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'sticky',
 })<{ sticky?: boolean }>(({ theme, sticky }) => {
   return {
@@ -44,7 +49,9 @@ export const Container = styled(Box, {
   }
 })
 
-export const WalletButton = styled(Button, {
+export const WalletButton: React.FC<
+  React.ComponentProps<typeof Button> & { withOffset?: boolean }
+> = styled(Button, {
   shouldForwardProp: (prop) => prop !== 'withOffset',
 })<{ withOffset?: boolean }>(({ withOffset, theme }) => ({
   color: theme.vars.palette.text.primary,
@@ -74,7 +81,9 @@ export const WalletButton = styled(Button, {
   }),
 }))
 
-export const DrawerWalletContainer = styled(Box)(({ theme }) => ({
+export const DrawerWalletContainer: React.FC<
+  React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }
+> = styled(Box)(({ theme }) => ({
   width: '100%',
   display: 'flex',
   justifyContent: 'space-between',
@@ -89,7 +98,9 @@ export const DrawerWalletContainer = styled(Box)(({ theme }) => ({
   }),
 }))
 
-export const HeaderControlsContainer = styled(Box)(({ theme }) => ({
+export const HeaderControlsContainer: React.FC<
+  React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }
+> = styled(Box)(({ theme }) => ({
   display: 'flex',
   gap: theme.spacing(0.5),
   ...(theme.navigation.edge && {
@@ -99,7 +110,12 @@ export const HeaderControlsContainer = styled(Box)(({ theme }) => ({
   }),
 }))
 
-export const WalletAvatar = styled(Avatar, {
+export const WalletAvatar: React.FC<
+  React.ComponentProps<typeof Avatar> & {
+    avatarSize?: number
+    badgeSize?: number
+  }
+> = styled(Avatar, {
   shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',
 })<{ avatarSize?: number; badgeSize?: number }>(
   ({ avatarSize = 24, badgeSize = 12 }) => ({

package/src/components/Header/Header.tsx

@@ -40,7 +40,7 @@ const HeaderContainer: FC<PropsWithChildren> = ({ children }) => {
 
   return (
     <Container
-      id={createElementId(ElementId.Header, elementId)}
+      id={createElementId(ElementId.Header, elementId ?? '')}
       sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}
       ref={headerRef}
     >

package/src/components/Header/NavigationHeader.tsx

@@ -9,12 +9,12 @@ import {
   navigationRoutes,
   navigationRoutesValues,
 } from '../../utils/navigationRoutes.js'
+import { ActivitiesButton } from './ActivitiesButton.js'
 import { BackButton } from './BackButton.js'
 import { CloseDrawerButton } from './CloseDrawerButton.js'
 import { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'
 import { SettingsButton } from './SettingsButton.js'
 import { SplitNavigationTabs } from './SplitNavigationTabs.js'
-import { TransactionHistoryButton } from './TransactionHistoryButton.js'
 
 export const NavigationHeader: React.FC = () => {
   const { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } =
@@ -61,7 +61,7 @@ export const NavigationHeader: React.FC = () => {
       {pathname === navigationRoutes.home ? (
         <HeaderControlsContainer>
           {account.isConnected && !hiddenUI?.includes(HiddenUI.History) && (
-            <TransactionHistoryButton />
+            <ActivitiesButton />
           )}
           <SettingsButton />
           {variant === 'drawer' &&

package/src/components/Header/SettingsButton.style.tsx

@@ -4,8 +4,11 @@ import {
   Badge as MuiBadge,
   styled,
 } from '@mui/material'
+import type React from 'react'
 
-export const SettingsIconBadge = styled(MuiBadge)(({ theme }) => ({
+export const SettingsIconBadge: React.FC<
+  React.ComponentProps<typeof MuiBadge>
+> = styled(MuiBadge)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(1.25),
@@ -21,20 +24,22 @@ interface SettingsIconButtonProps {
   variant?: 'info' | 'warning'
 }
 
-export const SettingsIconButton = styled(IconButton, {
+export const SettingsIconButton: React.FC<
+  React.ComponentProps<typeof IconButton> & SettingsIconButtonProps
+> = styled(IconButton, {
   shouldForwardProp: (props) => props !== 'variant',
 })<SettingsIconButtonProps>(({ theme, variant }) => {
   switch (variant) {
     case 'info':
       return {
-        backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
+        backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.08)`,
         '&:hover': {
-          backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.info.mainChannel} / 0.12) 80%, black)`,
+          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
         },
         ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
+          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
           '&:hover': {
-            backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.info.mainChannel} / 0.16) 80%, black)`,
+            backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
           },
         }),
       }

package/src/components/Header/SettingsButton.tsx

@@ -1,6 +1,7 @@
 import Settings from '@mui/icons-material/Settings'
 import { Tooltip } from '@mui/material'
 import { useNavigate } from '@tanstack/react-router'
+import type { JSX } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
@@ -9,7 +10,7 @@ import {
   SettingsIconButton,
 } from './SettingsButton.style.js'
 
-export const SettingsButton = () => {
+export const SettingsButton = (): JSX.Element => {
   const { t } = useTranslation()
   const navigate = useNavigate()
 

package/src/components/Header/SplitNavigationTabs.tsx

@@ -1,9 +1,10 @@
+import type { JSX } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'
 import { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'
 
-export const SplitNavigationTabs = () => {
+export const SplitNavigationTabs = (): JSX.Element => {
   const { t } = useTranslation()
   const [state, setState] = useSplitSubvariantStore((state) => [
     state.state,

package/src/components/Header/WalletMenu.style.tsx

@@ -5,8 +5,11 @@ import {
   styled,
   svgIconClasses,
 } from '@mui/material'
+import type React from 'react'
 
-export const WalletMenuContainer = styled(MuiMenu)(({ theme }) => ({
+export const WalletMenuContainer: React.FC<
+  React.ComponentProps<typeof MuiMenu>
+> = styled(MuiMenu)(({ theme }) => ({
   [`& .${menuClasses.paper}`]: {
     borderRadius: theme.vars.shape.borderRadius,
     color: theme.vars.palette.text.primary,

package/src/components/Header/WalletMenu.tsx

@@ -7,6 +7,7 @@ import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'
 import { Avatar, Badge, Box, Button, IconButton, MenuItem } from '@mui/material'
+import type { JSX } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
@@ -15,7 +16,11 @@ import { AvatarMasked } from '../Avatar/Avatar.style.js'
 import { SmallAvatar } from '../Avatar/SmallAvatar.js'
 import { DisconnectIconButton } from './DisconnectIconButton.js'
 
-export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
+export const WalletMenu = ({
+  onClose,
+}: {
+  onClose: () => void
+}): JSX.Element => {
   const { t } = useTranslation()
   const { accounts } = useAccount()
   const { getChainById } = useAvailableChains()