@lifi/widget 3.40.11 → 4.0.0-alpha.2

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -5,9 +5,9 @@ import MoreHoriz from '@mui/icons-material/MoreHoriz'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import TurnedInNot from '@mui/icons-material/TurnedInNot'
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import { useId, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { ListItem } from '../../components/ListItem/ListItem.js'
@@ -62,18 +62,15 @@ export const RecentWalletsPage = () => {
     })
     setSelectedBookmark(recentWallet)
     setSendToWallet(true)
-    navigate('../../', {
-      relative: 'path',
+    navigate({
+      to: navigationRoutes.home,
       replace: true,
     })
   }
 
   const handleAddBookmark = (bookmark: Bookmark) => {
     addBookmark(bookmark)
-    navigate(`../${navigationRoutes.bookmarks}`, {
-      relative: 'path',
-      replace: true,
-    })
+    navigate({ to: navigationRoutes.bookmarks, replace: true })
   }
 
   const closeMenu = () => {

package/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -26,7 +26,7 @@ import {
 
 export const SendToConfiguredWalletPage = () => {
   const { t } = useTranslation()
-  const { navigateBack } = useNavigateBack()
+  const navigateBack = useNavigateBack()
   const { toAddresses } = useWidgetConfig()
   const [selectedToAddress, setSelectedToAddress] = useState<ToAddress>()
   const { requiredToChainType } = useToAddressRequirements()

package/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -4,10 +4,10 @@ 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'
+import { useNavigate } from '@tanstack/react-router'
 import type { ChangeEvent } from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { ButtonTertiary } from '../../components/ButtonTertiary.js'
 import { CardButton } from '../../components/Card/CardButton.js'
@@ -38,7 +38,7 @@ import {
   ValidationAlert,
 } from './SendToWalletPage.style.js'
 
-export const SendToWalletPage = () => {
+export const SendToWalletPage: React.FC = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)
@@ -164,19 +164,19 @@ export const SendToWalletPage = () => {
   }
 
   const handleRecentWalletsClick = () => {
-    navigate(navigationRoutes.recentWallets)
+    navigate({ to: navigationRoutes.recentWallets })
   }
 
   const handleConnectedWalletsClick = () => {
-    navigate(navigationRoutes.connectedWallets)
+    navigate({ to: navigationRoutes.connectedWallets })
   }
   const handleBookmarkedWalletsClick = () => {
-    navigate(navigationRoutes.bookmarks)
+    navigate({ to: navigationRoutes.bookmarks })
   }
 
   const handleAddBookmark = (bookmark: Bookmark) => {
     addBookmark(bookmark)
-    navigate(navigationRoutes.bookmarks)
+    navigate({ to: navigationRoutes.bookmarks })
   }
 
   const handleOnConfirm = (confirmedWallet: Bookmark) => {

package/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -1,7 +1,7 @@
 import AirlineStops from '@mui/icons-material/AirlineStops'
 import SwapHoriz from '@mui/icons-material/SwapHoriz'
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { CardButton } from '../../components/Card/CardButton.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
@@ -38,7 +38,9 @@ export const BridgeAndExchangeSettings: React.FC<{
   }
 
   const handleClick = () => {
-    navigate(navigationRoutes[type.toLowerCase() as 'bridges' | 'exchanges'])
+    navigate({
+      to: navigationRoutes[type.toLowerCase() as 'bridges' | 'exchanges'],
+    })
   }
 
   const Icon = supportedIcons[type]

package/src/pages/SettingsPage/LanguageSetting.tsx

@@ -1,6 +1,6 @@
 import Language from '@mui/icons-material/Language'
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { CardButton } from '../../components/Card/CardButton.js'
 import { CardValue } from '../../components/Card/CardButton.style.js'
 import { useLanguages } from '../../hooks/useLanguages.js'
@@ -20,7 +20,7 @@ export const LanguageSetting: React.FC = () => {
   }
 
   const handleClick = () => {
-    navigate(navigationRoutes.languages)
+    navigate({ to: navigationRoutes.languages })
   }
 
   return (

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

@@ -1,6 +1,6 @@
 import { Collapse } from '@mui/material'
 import type { PropsWithChildren, ReactNode } from 'react'
-import { useId } from 'react'
+import { forwardRef, useId, useImperativeHandle, useRef } from 'react'
 import { Card } from '../../../components/Card/Card.js'
 import {
   CardRowButton,
@@ -12,39 +12,69 @@ import type { SettingCardTitle } from './types.js'
 
 interface SettingCardExpandableProps extends SettingCardTitle {
   value: ReactNode
+  disabled?: boolean
+  keepValueVisible?: boolean
+  onEntered?: () => void
 }
 
-export const SettingCardExpandable: React.FC<
+export interface SettingCardExpandableRef {
+  element: HTMLButtonElement | null
+  isExpanded: boolean
+  toggleExpanded: (forceExpanded?: boolean) => void
+}
+
+export const SettingCardExpandable = forwardRef<
+  SettingCardExpandableRef,
   PropsWithChildren<SettingCardExpandableProps>
-> = ({ icon, title, value, children }) => {
-  const { expanded, toggleExpanded } = useSettingsCardExpandable()
-  const buttonId = useId()
-  const collapseId = useId()
+>(
+  (
+    { icon, title, value, children, disabled, keepValueVisible, onEntered },
+    ref
+  ) => {
+    const { expanded, toggleExpanded } = useSettingsCardExpandable()
+    const buttonId = useId()
+    const collapseId = useId()
+    const buttonRef = useRef<HTMLButtonElement>(null)
 
-  return (
-    <Card sx={{ p: 1 }}>
-      <CardRowButton
-        id={buttonId}
-        aria-expanded={expanded}
-        aria-controls={collapseId}
-        onClick={toggleExpanded}
-        disableRipple
-        sx={{ p: 1 }}
-      >
-        <CardTitleContainer>
-          {icon}
-          <CardValue>{title}</CardValue>
-        </CardTitleContainer>
-        {!expanded && value}
-      </CardRowButton>
-      <Collapse
-        id={collapseId}
-        role="region"
-        aria-labelledby={buttonId}
-        in={expanded}
-      >
-        {children}
-      </Collapse>
-    </Card>
-  )
-}
+    useImperativeHandle(
+      ref,
+      () => ({
+        element: buttonRef.current,
+        isExpanded: expanded,
+        toggleExpanded,
+      }),
+      [expanded, toggleExpanded]
+    )
+
+    return (
+      <Card sx={{ p: 1 }}>
+        <CardRowButton
+          ref={buttonRef}
+          id={buttonId}
+          aria-expanded={expanded}
+          aria-controls={collapseId}
+          onClick={disabled ? undefined : () => toggleExpanded()}
+          disableRipple
+          sx={{ p: 1, cursor: disabled ? 'default' : 'pointer' }}
+        >
+          <CardTitleContainer>
+            {icon}
+            <CardValue>{title}</CardValue>
+          </CardTitleContainer>
+          {(!expanded || keepValueVisible) && value}
+        </CardRowButton>
+        <Collapse
+          id={collapseId}
+          role="region"
+          aria-labelledby={buttonId}
+          in={expanded}
+          mountOnEnter
+          unmountOnExit
+          onEntered={onEntered}
+        >
+          {children}
+        </Collapse>
+      </Card>
+    )
+  }
+)

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

@@ -22,8 +22,9 @@ export const useSettingsCardExpandable = () => {
   const settingCardExpandableId = useId()
   const [expanded, setExpanded] = useState(false)
   const { openCard, setOpenCard } = useContext(SettingsAccordionContext)
-  const toggleExpanded = () => {
-    const newExpanded = !expanded
+
+  const toggleExpanded = (forceExpanded?: boolean) => {
+    const newExpanded = forceExpanded ?? !expanded
     setExpanded(newExpanded)
 
     if (newExpanded && openCard !== settingCardExpandableId) {

package/src/pages/SettingsPage/SettingsPage.tsx

@@ -1,6 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { PageContainer } from '../../components/PageContainer.js'
 import { useHeader } from '../../hooks/useHeader.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { HiddenUI } from '../../types/widget.js'
 import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js'
 import { GasPriceSettings } from './GasPriceSettings.js'
 import { LanguageSetting } from './LanguageSetting.js'
@@ -9,10 +11,12 @@ import { RoutePrioritySettings } from './RoutePrioritySettings.js'
 import { SettingsList } from './SettingsCard/SettingCard.style.js'
 import { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js'
 import { SlippageSettings } from './SlippageSettings/SlippageSettings.js'
+import { SmallBalanceFilterSettings } from './SmallBalanceFilterSettings.js'
 import { ThemeSettings } from './ThemeSettings.js'
 
 export const SettingsPage = () => {
   const { t } = useTranslation()
+  const { hiddenUI } = useWidgetConfig()
   useHeader(t('header.settings'))
 
   return (
@@ -24,6 +28,9 @@ export const SettingsPage = () => {
           <RoutePrioritySettings />
           <GasPriceSettings />
           <SlippageSettings />
+          {!hiddenUI?.includes(HiddenUI.HideSmallBalances) && (
+            <SmallBalanceFilterSettings />
+          )}
           <BridgeAndExchangeSettings type="Bridges" />
           <BridgeAndExchangeSettings type="Exchanges" />
         </SettingsCardAccordion>

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

@@ -19,7 +19,7 @@ export const SettingsFieldSet = styled(Box)(({ theme }) => ({
   }),
 }))
 
-const slippageControlSelected = (theme: Theme) => ({
+const settingsControlSelected = (theme: Theme) => ({
   backgroundColor: theme.vars.palette.background.paper,
   boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
   ...theme.applyStyles('dark', {
@@ -29,17 +29,17 @@ const slippageControlSelected = (theme: Theme) => ({
   borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`,
 })
 
-interface SlippageDefaultProps {
+interface SettingsControlProps {
   selected?: boolean
 }
 
-export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(
+export const SettingsDefaultButton = styled(ButtonBase)<SettingsControlProps>(
   ({ theme, selected }) => {
-    const slippageControlSelectedStyles = slippageControlSelected(theme)
+    const settingsControlSelectedStyles = settingsControlSelected(theme)
     const selectedStyle = selected
       ? {
           '&:not(:focus)': {
-            ...slippageControlSelectedStyles,
+            ...settingsControlSelectedStyles,
           },
         }
       : {}
@@ -50,20 +50,20 @@ export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(
       fontSize: '1rem',
       fontWeight: 700,
       '&:focus': {
-        ...slippageControlSelectedStyles,
+        ...settingsControlSelectedStyles,
       },
       ...selectedStyle,
     }
   }
 )
 
-export const SlippageCustomInput = styled(InputBase)<SlippageDefaultProps>(
+export const SettingsCustomInput = styled(InputBase)<SettingsControlProps>(
   ({ theme, selected }) => {
-    const slippageControlSelectedStyles = slippageControlSelected(theme)
+    const settingsControlSelectedStyles = settingsControlSelected(theme)
     const selectedStyle = selected
       ? {
           '&:not(:focus)': {
-            ...slippageControlSelectedStyles,
+            ...settingsControlSelectedStyles,
           },
         }
       : {}
@@ -82,7 +82,7 @@ export const SlippageCustomInput = styled(InputBase)<SlippageDefaultProps>(
           opacity: 1,
         },
         '&:focus': {
-          ...slippageControlSelectedStyles,
+          ...settingsControlSelectedStyles,
         },
         ...selectedStyle,
       },

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

@@ -12,9 +12,9 @@ import { formatInputAmount, formatSlippage } from '../../../utils/format.js'
 import { BadgedValue } from '../SettingsCard/BadgedValue.js'
 import { SettingCardExpandable } from '../SettingsCard/SettingCardExpandable.js'
 import {
+  SettingsCustomInput,
+  SettingsDefaultButton,
   SettingsFieldSet,
-  SlippageCustomInput,
-  SlippageDefaultButton,
   SlippageLimitsWarningContainer,
 } from './SlippageSettings.style.js'
 
@@ -106,7 +106,7 @@ export const SlippageSettings: React.FC = () => {
         }}
       >
         <SettingsFieldSet>
-          <SlippageDefaultButton
+          <SettingsDefaultButton
             selected={defaultSlippage === slippage && focused !== 'input'}
             onFocus={() => {
               setFocused('button')
@@ -118,8 +118,8 @@ export const SlippageSettings: React.FC = () => {
             disableRipple
           >
             {t('button.auto')}
-          </SlippageDefaultButton>
-          <SlippageCustomInput
+          </SettingsDefaultButton>
+          <SettingsCustomInput
             selected={defaultSlippage !== slippage && focused !== 'button'}
             placeholder={focused === 'input' ? '' : t('settings.custom')}
             inputProps={{

package/src/pages/SettingsPage/SmallBalanceFilterSettings.tsx

@@ -0,0 +1,116 @@
+import AttachMoney from '@mui/icons-material/AttachMoney'
+import { Box } from '@mui/material'
+import {
+  type ChangeEvent,
+  type ChangeEventHandler,
+  type FocusEventHandler,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { Switch } from '../../components/Switch.js'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import { formatInputAmount, usdDecimals } from '../../utils/format.js'
+import {
+  SettingCardExpandable,
+  type SettingCardExpandableRef,
+} from './SettingsCard/SettingCardExpandable.js'
+import {
+  SettingsCustomInput,
+  SettingsFieldSet,
+} from './SlippageSettings/SlippageSettings.style.js'
+
+const defaultThreshold = '0.01'
+
+export const SmallBalanceFilterSettings: React.FC = () => {
+  const { t } = useTranslation()
+  const { smallBalanceThreshold } = useSettings(['smallBalanceThreshold'])
+  const { setValue } = useSettingsActions()
+  const [inputValue, setInputValue] = useState(
+    smallBalanceThreshold ?? defaultThreshold
+  )
+  const buttonRef = useRef<SettingCardExpandableRef>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const formatAndSetThreshold = (inputValue: string, returnInitial = false) => {
+    const value = inputValue.replace('$', '')
+    const formattedValue = formatInputAmount(value, usdDecimals, returnInitial)
+    if (returnInitial) {
+      setInputValue(formattedValue)
+    } else {
+      const formattedOrDefault = formattedValue || defaultThreshold
+      setInputValue(formattedOrDefault)
+      setValue('smallBalanceThreshold', formattedOrDefault)
+    }
+  }
+
+  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {
+    formatAndSetThreshold(event.target.value, true)
+  }
+
+  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    formatAndSetThreshold(event.target.value, false)
+  }
+
+  const handleHideSmallBalancesChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ) => {
+    setValue(
+      'smallBalanceThreshold',
+      event.target.checked ? defaultThreshold : undefined
+    )
+    if (buttonRef.current) {
+      buttonRef.current?.toggleExpanded(event.target.checked)
+    }
+  }
+
+  const handleExpanded = () => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }
+
+  useEffect(() => {
+    setInputValue(smallBalanceThreshold ?? defaultThreshold)
+  }, [smallBalanceThreshold])
+
+  return (
+    <SettingCardExpandable
+      ref={buttonRef}
+      value={
+        <Switch
+          checked={!!smallBalanceThreshold}
+          onChange={handleHideSmallBalancesChange}
+          aria-label={t('settings.hideSmallBalances')}
+        />
+      }
+      icon={<AttachMoney />}
+      title={t('settings.hideSmallBalances')}
+      disabled={!smallBalanceThreshold}
+      keepValueVisible
+      onEntered={handleExpanded}
+    >
+      <Box
+        sx={{
+          mt: 1.5,
+        }}
+      >
+        <SettingsFieldSet>
+          <SettingsCustomInput
+            inputRef={inputRef}
+            selected
+            inputProps={{
+              inputMode: 'decimal',
+            }}
+            onChange={handleInputUpdate}
+            onBlur={handleInputBlur}
+            value={`$${inputValue}`}
+            autoComplete="off"
+          />
+        </SettingsFieldSet>
+      </Box>
+    </SettingCardExpandable>
+  )
+}

package/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -1,8 +1,8 @@
 import type { FullStatusData } from '@lifi/sdk'
 import { Box, Typography } from '@mui/material'
+import { useLocation, useNavigate } from '@tanstack/react-router'
 import { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useLocation } from 'react-router-dom'
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
 import { PageContainer } from '../../components/PageContainer.js'
 import { getStepList } from '../../components/Step/StepList.js'
@@ -10,7 +10,6 @@ import { TransactionDetails } from '../../components/TransactionDetails.js'
 import { internalExplorerUrl } from '../../config/constants.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useHeader } from '../../hooks/useHeader.js'
-import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { useTools } from '../../hooks/useTools.js'
 import { useTransactionDetails } from '../../hooks/useTransactionDetails.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
@@ -25,7 +24,7 @@ import { TransferIdCard } from './TransferIdCard.js'
 
 export const TransactionDetailsPage: React.FC = () => {
   const { t, i18n } = useTranslation()
-  const { navigate } = useNavigateBack()
+  const navigate = useNavigate()
   const {
     subvariant,
     subvariantOptions,
@@ -33,14 +32,14 @@ export const TransactionDetailsPage: React.FC = () => {
     explorerUrls,
     hiddenUI,
   } = useWidgetConfig()
-  const { state }: any = useLocation()
+  const { search }: any = useLocation()
   const { tools } = useTools()
   const { getTransactionLink } = useExplorer()
   const storedRouteExecution = useRouteExecutionStore(
-    (store) => store.routes[state?.routeId]
+    (store) => store.routes[search?.routeId]
   )
   const { transaction, isLoading } = useTransactionDetails(
-    !storedRouteExecution && state?.transactionHash
+    !storedRouteExecution && search?.transactionHash
   )
 
   const title =
@@ -67,7 +66,7 @@ export const TransactionDetailsPage: React.FC = () => {
 
   useEffect(() => {
     if (!isLoading && !routeExecution) {
-      navigate(navigationRoutes.home)
+      navigate({ to: navigationRoutes.home })
     }
   }, [isLoading, navigate, routeExecution])
 
@@ -94,7 +93,7 @@ export const TransactionDetailsPage: React.FC = () => {
   }
 
   const startedAt = new Date(
-    (routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0) *
+    (routeExecution?.route.steps[0].execution?.startedAt ?? 0) *
       (storedRouteExecution ? 1 : 1000) // local and BE routes have different ms handling
   )
 

package/src/pages/TransactionHistoryPage/TransactionHistoryItem.tsx

@@ -5,8 +5,8 @@ import type {
   TokenAmount,
 } from '@lifi/sdk'
 import { Box, Typography } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { Card } from '../../components/Card/Card.js'
 import { Token } from '../../components/Token/Token.js'
 import { TokenDivider } from '../../components/Token/Token.style.js'
@@ -24,8 +24,9 @@ export const TransactionHistoryItem: React.FC<{
     .receiving as ExtendedTransactionInfo
 
   const handleClick = () => {
-    navigate(navigationRoutes.transactionDetails, {
-      state: {
+    navigate({
+      to: navigationRoutes.transactionDetails,
+      search: {
         transactionHash: (transaction as FullStatusData).sending.txHash,
       },
     })

package/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx

@@ -1,7 +1,6 @@
 import type { FullStatusData } from '@lifi/sdk'
 import { Box, List } from '@mui/material'
 import { useVirtualizer } from '@tanstack/react-virtual'
-import type React from 'react'
 import { useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PageContainer } from '../../components/PageContainer.js'
@@ -13,7 +12,7 @@ import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'
 import { TransactionHistoryItem } from './TransactionHistoryItem.js'
 import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js'
 
-export const TransactionHistoryPage: React.FC = () => {
+export const TransactionHistoryPage = () => {
   // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue
   const parentRef = useRef<HTMLDivElement | null>(null)
   const { data: transactions, isLoading } = useTransactionHistory()