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

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

@@ -2,19 +2,21 @@ 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,16 +24,18 @@ 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 }) => ({
+export const SendToWalletPageContainer: React.FC<
+  React.ComponentProps<typeof PageContainer> & PageContainerProps
+> = styled(PageContainer)<PageContainerProps>(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: theme.spacing(1),
@@ -41,12 +45,12 @@ 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(SendToWalletPageContainer, {
+  shouldForwardProp: (prop) => prop !== 'enableFullHeight',
+})<FullHeightAdjustablePageContainerProps>(({ theme, enableFullHeight }) => ({
   justifyContent: 'space-between',
   ...(enableFullHeight && theme.container?.height === '100%'
     ? {
@@ -56,12 +60,16 @@ export const FullHeightAdjustablePageContainer = styled(
     : {}),
 }))
 
-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,18 +77,23 @@ 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',
@@ -95,29 +108,36 @@ export const IconContainer = styled(Box)(({ theme }) => ({
   }),
 }))
 
-export const SheetTitle = styled(Typography)(() => ({
-  fontSize: 18,
-  fontWeight: 700,
-}))
+export const SheetTitle: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(() => ({
+    fontSize: 18,
+    fontWeight: 700,
+  }))
 
-export const SheetAddressContainer = styled(Box)(() => ({
-  width: '100%',
-  wordWrap: 'break-word',
-}))
+export const SheetAddressContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(() => ({
+    width: '100%',
+    wordWrap: 'break-word',
+  }))
 
-export const ListContainer = styled(List)(() => ({
-  display: 'flex',
-  flexDirection: 'column',
-  padding: 0,
-  minHeight: 400,
-}))
+export const ListContainer: React.FC<React.ComponentProps<typeof List>> =
+  styled(List)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: 0,
+    minHeight: 400,
+  }))
 
-export const BookmarksListContainer = styled(ListContainer)(({ theme }) => ({
+export const BookmarksListContainer: React.FC<
+  React.ComponentProps<typeof ListContainer>
+> = 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',
@@ -128,31 +148,24 @@ export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({
   width: '100%',
 }))
 
-export const EmptyContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  flexGrow: 1,
-  gap: theme.spacing(2),
-}))
+export const EmptyContainer: React.FC<React.ComponentProps<typeof Box>> =
+  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/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: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    borderRadius: '16px',
+    padding: '16px',
+    svg: {
+      fill: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,
+    },
+  }))

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

package/src/pages/SettingsPage/SettingsPage.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PageContainer } from '../../components/PageContainer.js'
 import { useHeader } from '../../hooks/useHeader.js'
@@ -14,7 +15,7 @@ import { SlippageSettings } from './SlippageSettings/SlippageSettings.js'
 import { SmallBalanceFilterSettings } from './SmallBalanceFilterSettings.js'
 import { ThemeSettings } from './ThemeSettings.js'
 
-export const SettingsPage = () => {
+export const SettingsPage = (): JSX.Element => {
   const { t } = useTranslation()
   const { hiddenUI } = useWidgetConfig()
   useHeader(t('header.settings'))

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

@@ -6,8 +6,11 @@ import {
   inputBaseClasses,
   styled,
 } from '@mui/material'
+import type React from 'react'
 
-export const SettingsFieldSet = styled(Box)(({ theme }) => ({
+export const SettingsFieldSet: React.FC<
+  React.ComponentProps<typeof Box> & SettingsControlProps
+> = styled(Box)(({ theme }) => ({
   display: 'flex',
   borderRadius: theme.vars.shape.borderRadius,
   padding: theme.spacing(0.5),
@@ -33,64 +36,66 @@ interface SettingsControlProps {
   selected?: boolean
 }
 
-export const SettingsDefaultButton = styled(ButtonBase)<SettingsControlProps>(
-  ({ theme, selected }) => {
-    const settingsControlSelectedStyles = settingsControlSelected(theme)
-    const selectedStyle = selected
-      ? {
-          '&:not(:focus)': {
-            ...settingsControlSelectedStyles,
-          },
-        }
-      : {}
+export const SettingsDefaultButton: React.FC<
+  React.ComponentProps<typeof ButtonBase> & SettingsControlProps
+> = styled(ButtonBase)<SettingsControlProps>(({ theme, selected }) => {
+  const settingsControlSelectedStyles = settingsControlSelected(theme)
+  const selectedStyle = selected
+    ? {
+        '&:not(:focus)': {
+          ...settingsControlSelectedStyles,
+        },
+      }
+    : {}
 
-    return {
-      height: '100%',
-      width: '100%',
-      fontSize: '1rem',
-      fontWeight: 700,
-      '&:focus': {
-        ...settingsControlSelectedStyles,
-      },
-      ...selectedStyle,
-    }
+  return {
+    height: '100%',
+    width: '100%',
+    fontSize: '1rem',
+    fontWeight: 700,
+    '&:focus': {
+      ...settingsControlSelectedStyles,
+    },
+    ...selectedStyle,
   }
-)
+})
 
-export const SettingsCustomInput = styled(InputBase)<SettingsControlProps>(
-  ({ theme, selected }) => {
-    const settingsControlSelectedStyles = settingsControlSelected(theme)
-    const selectedStyle = selected
-      ? {
-          '&:not(:focus)': {
-            ...settingsControlSelectedStyles,
-          },
-        }
-      : {}
+export const SettingsCustomInput: React.FC<
+  React.ComponentProps<typeof InputBase> & SettingsControlProps
+> = styled(InputBase)<SettingsControlProps>(({ theme, selected }) => {
+  const settingsControlSelectedStyles = settingsControlSelected(theme)
+  const selectedStyle = selected
+    ? {
+        '&:not(:focus)': {
+          ...settingsControlSelectedStyles,
+        },
+      }
+    : {}
 
-    return {
+  return {
+    height: '100%',
+    width: '100%',
+    [`.${inputBaseClasses.input}`]: {
       height: '100%',
       width: '100%',
-      [`.${inputBaseClasses.input}`]: {
-        height: '100%',
-        width: '100%',
-        padding: 0,
-        textAlign: 'center',
-        '&::placeholder': {
-          fontSize: '1rem',
-          fontWeight: 700,
-          opacity: 1,
-        },
-        '&:focus': {
-          ...settingsControlSelectedStyles,
-        },
-        ...selectedStyle,
+      padding: 0,
+      textAlign: 'center',
+      '&::placeholder': {
+        fontSize: '1rem',
+        fontWeight: 700,
+        opacity: 1,
       },
-    }
+      '&:focus': {
+        ...settingsControlSelectedStyles,
+      },
+      ...selectedStyle,
+    },
   }
-)
+})
 
-export const SlippageLimitsWarningContainer = styled(Box)(({ theme }) => ({
+export const SlippageLimitsWarningContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
   display: 'flex',
   gap: theme.spacing(1.25),
   marginTop: theme.spacing(1.5),

package/src/pages/TransactionDetailsPage/ActionRow.style.tsx

@@ -0,0 +1,31 @@
+import { Box, styled, Typography } from '@mui/material'
+import type React from 'react'
+
+export const ActionRowContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    padding: theme.spacing(1),
+    borderRadius: theme.vars.shape.borderRadiusTertiary,
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  }))
+
+export const ActionIconCircle: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 24,
+    height: 24,
+    borderRadius: '50%',
+    backgroundColor: `color-mix(in srgb, rgb(${theme.vars.palette.success.mainChannel}) 12%, ${theme.vars.palette.background.paper})`,
+  }))
+
+export const ActionRowLabel: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(({ theme }) => ({
+    flex: 1,
+    fontSize: 12,
+    fontWeight: 500,
+    color: theme.vars.palette.text.primary,
+  }))

package/src/pages/TransactionDetailsPage/ActionRow.tsx

@@ -0,0 +1,22 @@
+import type { FC, ReactNode } from 'react'
+import { ActionRowContainer, ActionRowLabel } from './ActionRow.style.js'
+
+interface ActionRowProps {
+  message: string
+  startAdornment: ReactNode
+  endAdornment?: ReactNode
+}
+
+export const ActionRow: FC<ActionRowProps> = ({
+  message,
+  startAdornment,
+  endAdornment,
+}) => {
+  return (
+    <ActionRowContainer>
+      {startAdornment}
+      <ActionRowLabel>{message}</ActionRowLabel>
+      {endAdornment}
+    </ActionRowContainer>
+  )
+}

package/src/pages/TransactionDetailsPage/ContactSupportButton.style.tsx

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material'
+import type React from 'react'
+import { ButtonTertiary } from '../../components/ButtonTertiary.js'
+
+export const ButtonChip: React.FC<React.ComponentProps<typeof ButtonTertiary>> =
+  styled(ButtonTertiary)(({ theme }) => ({
+    padding: theme.spacing(0.5, 1.5),
+    fontSize: 12,
+    fontWeight: 700,
+    lineHeight: 1.3334,
+    height: 'auto',
+  }))

package/src/pages/TransactionDetailsPage/ContactSupportButton.tsx

@@ -1,7 +1,7 @@
-import { Button } from '@mui/material'
+import type { JSX } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
-import { WidgetEvent } from '../../types/events.js'
+import { useContactSupport } from '../../hooks/useContactSupport.js'
+import { ButtonChip } from './ContactSupportButton.style.js'
 
 interface ContactSupportButtonProps {
   supportId?: string
@@ -9,24 +9,13 @@ interface ContactSupportButtonProps {
 
 export const ContactSupportButton = ({
   supportId,
-}: ContactSupportButtonProps) => {
+}: ContactSupportButtonProps): JSX.Element => {
   const { t } = useTranslation()
-  const widgetEvents = useWidgetEvents()
-
-  const handleClick = () => {
-    if (!widgetEvents.all.has(WidgetEvent.ContactSupport)) {
-      const url = 'https://help.li.fi'
-      const target = '_blank'
-      const rel = 'nofollow noreferrer'
-      window.open(url, target, rel)
-    } else {
-      widgetEvents.emit(WidgetEvent.ContactSupport, { supportId })
-    }
-  }
+  const handleContactSupport = useContactSupport(supportId)
 
   return (
-    <Button onClick={handleClick} fullWidth>
+    <ButtonChip onClick={handleContactSupport}>
       {t('button.contactSupport')}
-    </Button>
+    </ButtonChip>
   )
 }

package/src/pages/TransactionDetailsPage/ReceiptsCard.style.tsx

@@ -0,0 +1,25 @@
+import { Box, Link, styled } from '@mui/material'
+import type React from 'react'
+
+export const TransactionList: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1.5),
+  }))
+
+export const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(
+  Link
+)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 24,
+  height: 24,
+  borderRadius: '50%',
+  textDecoration: 'none',
+  color: theme.vars.palette.text.primary,
+  '&:hover': {
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  },
+}))