@lifi/widget 4.0.0 → 4.2.0

package/src/AppDefault.tsx

@@ -12,6 +12,7 @@ import { NotFound } from './components/NotFound.js'
 import { ActivitiesPage } from './pages/ActivitiesPage/ActivitiesPage.js'
 import { LanguagesPage } from './pages/LanguagesPage.js'
 import { MainPage } from './pages/MainPage/MainPage.js'
+import { RoutePriorityPage } from './pages/RoutePriorityPage.js'
 import { RoutesPage } from './pages/RoutesPage/RoutesPage.js'
 import { SelectChainPage } from './pages/SelectChainPage/SelectChainPage.js'
 import { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage.js'
@@ -22,6 +23,7 @@ import { RecentWalletsPage } from './pages/SendToWallet/RecentWalletsPage.js'
 import { SendToConfiguredWalletPage } from './pages/SendToWallet/SendToConfiguredWalletPage.js'
 import { SendToWalletPage } from './pages/SendToWallet/SendToWalletPage.js'
 import { SettingsPage } from './pages/SettingsPage/SettingsPage.js'
+import { SlippagePage } from './pages/SettingsPage/SlippageSettings/SlippagePage.js'
 import { TransactionDetailsPage } from './pages/TransactionDetailsPage/TransactionDetailsPage.js'
 import { TransactionPage } from './pages/TransactionPage/TransactionPage.js'
 import { navigationRoutes } from './utils/navigationRoutes.js'
@@ -66,6 +68,18 @@ const settingsLanguagesRoute = createRoute({
   component: LanguagesPage,
 })
 
+const settingsRoutePriorityRoute = createRoute({
+  getParentRoute: () => settingsLayoutRoute,
+  path: navigationRoutes.routePriority,
+  component: RoutePriorityPage,
+})
+
+const settingsSlippageRoute = createRoute({
+  getParentRoute: () => settingsLayoutRoute,
+  path: navigationRoutes.slippage,
+  component: SlippagePage,
+})
+
 const fromTokenLayoutRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: navigationRoutes.fromToken,
@@ -214,6 +228,8 @@ const routeTree = rootRoute.addChildren([
   settingsLayoutRoute.addChildren([
     settingsIndexRoute,
     settingsLanguagesRoute,
+    settingsRoutePriorityRoute,
+    settingsSlippageRoute,
     settingsBridgesRoute,
     settingsExchangesRoute,
   ]),

package/src/AppDrawer.tsx

@@ -1,11 +1,6 @@
 import { Drawer } from '@mui/material'
-import type {
-  ForwardRefExoticComponent,
-  PropsWithChildren,
-  RefAttributes,
-} from 'react'
+import type { JSX, PropsWithChildren, Ref } from 'react'
 import {
-  forwardRef,
   useCallback,
   useImperativeHandle,
   useMemo,
@@ -23,82 +18,86 @@ export interface WidgetDrawer {
   closeDrawer(): void
 }
 
-export const AppDrawer: ForwardRefExoticComponent<
-  PropsWithChildren<WidgetDrawerProps> & RefAttributes<WidgetDrawer>
-> = forwardRef<WidgetDrawer, PropsWithChildren<WidgetDrawerProps>>(
-  ({ elementRef, open, onClose, children }, ref) => {
-    const openRef = useRef(Boolean(open))
-    const [drawerOpen, setDrawerOpen] = useState(Boolean(open))
+export const AppDrawer = ({
+  elementRef,
+  open,
+  onClose,
+  children,
+  ref,
+}: PropsWithChildren<WidgetDrawerProps> & {
+  ref?: Ref<WidgetDrawer>
+}): JSX.Element => {
+  const openRef = useRef(Boolean(open))
+  const [drawerOpen, setDrawerOpen] = useState(Boolean(open))
 
-    const toggleDrawer = useCallback(() => {
-      setDrawerOpen((open) => {
-        openRef.current = !open
-        return openRef.current
-      })
-      if (!openRef.current) {
-        onClose?.()
-      }
-    }, [onClose])
+  const toggleDrawer = useCallback(() => {
+    setDrawerOpen((open) => {
+      openRef.current = !open
+      return openRef.current
+    })
+    if (!openRef.current) {
+      onClose?.()
+    }
+  }, [onClose])
 
-    const openDrawer = useCallback(() => {
-      setDrawerOpen(true)
-      openRef.current = true
-    }, [])
+  const openDrawer = useCallback(() => {
+    setDrawerOpen(true)
+    openRef.current = true
+  }, [])
 
-    const closeDrawer = useCallback(() => {
-      setDrawerOpen(false)
-      openRef.current = false
-      onClose?.()
-    }, [onClose])
+  const closeDrawer = useCallback(() => {
+    setDrawerOpen(false)
+    openRef.current = false
+    onClose?.()
+  }, [onClose])
 
-    useImperativeHandle(
-      ref,
-      () => ({
-        isOpen: () => openRef.current,
-        toggleDrawer,
-        openDrawer,
-        closeDrawer,
-      }),
-      [closeDrawer, openDrawer, toggleDrawer]
-    )
+  useImperativeHandle(
+    ref,
+    () => ({
+      isOpen: () => openRef.current,
+      toggleDrawer,
+      openDrawer,
+      closeDrawer,
+    }),
+    [closeDrawer, openDrawer, toggleDrawer]
+  )
 
-    const drawerContext: WidgetDrawerContext = useMemo(
-      () => ({
-        closeDrawer,
-      }),
-      [closeDrawer]
-    )
+  const drawerContext: WidgetDrawerContext = useMemo(
+    () => ({
+      closeDrawer,
+    }),
+    [closeDrawer]
+  )
 
-    return (
-      <DrawerContext.Provider value={drawerContext}>
-        <Drawer
-          ref={elementRef}
-          anchor="right"
-          open={drawerOpen}
-          onClose={closeDrawer}
-          slotProps={{
-            paper: {
-              sx: (theme) => ({
-                background: theme.vars.palette.background.default,
-                width: theme?.container?.width ?? '100%',
-                minWidth:
-                  theme?.container?.minWidth ?? theme.breakpoints.values.xs,
-                maxWidth:
-                  theme?.container?.maxWidth ?? theme.breakpoints.values.sm,
-              }),
+  return (
+    <DrawerContext value={drawerContext}>
+      <Drawer
+        ref={elementRef}
+        anchor="right"
+        open={drawerOpen}
+        onClose={closeDrawer}
+        slotProps={{
+          paper: {
+            sx: (theme) => ({
+              background: theme.vars.palette.background.default,
+              width: theme?.container?.width ?? '100%',
+              minWidth:
+                theme?.container?.minWidth ?? theme.breakpoints.values.xs,
+              maxWidth:
+                theme?.container?.maxWidth ?? theme.breakpoints.values.sm,
+            }),
+          },
+          backdrop: {
+            sx: {
+              backgroundColor: 'rgb(0 0 0 / 48%)',
+              backdropFilter: 'blur(3px)',
             },
-            backdrop: {
-              sx: {
-                backgroundColor: 'rgb(0 0 0 / 48%)',
-                backdropFilter: 'blur(3px)',
-              },
-            },
-          }}
-          keepMounted
-        >
-          {children}
-        </Drawer>
-      </DrawerContext.Provider>
-    )
-  }
-)
+          },
+        }}
+        keepMounted
+      >
+        {children}
+      </Drawer>
+    </DrawerContext>
+  )
+}

package/src/AppDrawerContext.ts

@@ -1,4 +1,4 @@
-import { type Context, createContext, useContext } from 'react'
+import { type Context, createContext, use } from 'react'
 
 export interface WidgetDrawerContext {
   closeDrawer?(): void
@@ -7,4 +7,4 @@ export interface WidgetDrawerContext {
 export const DrawerContext: Context<WidgetDrawerContext> =
   createContext<WidgetDrawerContext>({})
 
-export const useDrawer = (): WidgetDrawerContext => useContext(DrawerContext)
+export const useDrawer = (): WidgetDrawerContext => use(DrawerContext)

package/src/components/AmountInput/AmountInputEndAdornment.style.ts

@@ -18,5 +18,5 @@ export const AmountInputButton: React.FC<
   fontWeight: 700,
   lineHeight: 1.3334,
   height: 'auto',
-  borderRadius: theme.shape.borderRadiusSecondary,
+  borderRadius: theme.vars.shape.borderRadiusSecondary,
 }))

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -1,4 +1,5 @@
 import { formatUnits } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
 import type React from 'react'
 import { type JSX, memo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -25,6 +26,9 @@ export const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps>
       FormKeyHelper.getTokenKey(formType)
     )
 
+    const chain = getChainById(chainId)
+    const { account } = useAccount({ chainType: chain?.chainType })
+
     // We get gas recommendations for the source chain to make sure that after pressing the Max button
     // the user will have enough funds remaining to cover gas costs
     const { data } = useGasRecommendation(chainId)
@@ -35,7 +39,6 @@ export const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps>
       if (!token?.amount) {
         return 0n
       }
-      const chain = getChainById(chainId)
       let maxAmount = token.amount
       if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
         const recommendedAmount = BigInt(data.recommended.amount)
@@ -73,7 +76,7 @@ export const AmountInputEndAdornment: React.NamedExoticComponent<FormTypeProps>
       }
     }
 
-    if (formType !== 'from' || !token) {
+    if (formType !== 'from' || !token || !account?.isConnected) {
       return null
     }
 

package/src/components/AmountInputCard/AmountInputCard.style.tsx

@@ -0,0 +1,157 @@
+import {
+  Box,
+  ButtonBase,
+  InputBase,
+  inputBaseClasses,
+  styled,
+  Typography,
+} from '@mui/material'
+import type React from 'react'
+import type { FormType } from '../../stores/form/types.js'
+import { InputCard } from '../Card/InputCard.js'
+
+export const maxInputFontSize = 30
+export const minInputFontSize = 20
+export const amountHeight = 32
+export const footerFontSize = 12
+
+export const AmountCard: React.FC<
+  React.ComponentProps<typeof InputCard> & {
+    formType?: FormType
+    mask?: boolean
+  }
+> = styled(InputCard, {
+  shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),
+})<{ formType?: FormType; mask?: boolean }>(
+  ({ theme, formType, mask = true }) => {
+    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
+    // Notch faces the swap button between the stacked cards: bottom edge for the
+    // top (send) card, top edge for the bottom (receive) card.
+    const vertical = formType === 'to' ? '-4px' : 'calc(100% + 4px)'
+    return {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: theme.spacing(1.5),
+      padding: theme.spacing(2),
+      ...(cardVariant !== 'outlined' &&
+        mask && {
+          mask: `radial-gradient(circle 22px at 50% ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`,
+        }),
+    }
+  }
+)
+
+export const CardHeaderRow: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: 0,
+  height: theme.spacing(2),
+}))
+
+export const CardBodyRow: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(2),
+}))
+
+export const CardFooterRow: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: theme.spacing(2),
+}))
+
+export const LargeInput: React.FC<React.ComponentProps<typeof InputBase>> =
+  styled(InputBase)(({ theme }) => ({
+    fontSize: maxInputFontSize,
+    fontWeight: 700,
+    lineHeight: 1.4,
+    height: amountHeight,
+    flex: 1,
+    minWidth: 0,
+    boxShadow: 'none',
+    [`.${inputBaseClasses.input}`]: {
+      height: amountHeight,
+      padding: 0,
+    },
+    [`.${inputBaseClasses.input}::placeholder`]: {
+      color: theme.vars.palette.text.primary,
+      opacity: 0.5,
+    },
+    '& input[type="number"]::-webkit-outer-spin-button, & input[type="number"]::-webkit-inner-spin-button':
+      {
+        WebkitAppearance: 'none',
+        margin: 0,
+      },
+    '& input[type="number"]': {
+      MozAppearance: 'textfield',
+    },
+    [`&.${inputBaseClasses.disabled}`]: {
+      color: 'inherit',
+    },
+    [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
+      WebkitTextFillColor: 'unset',
+    },
+  }))
+
+export const AmountDisplay: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(() => ({
+    fontSize: maxInputFontSize,
+    fontWeight: 700,
+    lineHeight: 1.4,
+    height: amountHeight,
+    display: 'flex',
+    alignItems: 'center',
+    flex: 1,
+    minWidth: 0,
+    overflow: 'visible',
+    whiteSpace: 'nowrap',
+  }))
+
+export const FooterText: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(({ theme }) => ({
+    fontSize: footerFontSize,
+    fontWeight: 500,
+    lineHeight: 1,
+    color: theme.vars.palette.text.secondary,
+  }))
+
+export const CardContainer: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+}))
+
+export const ToggleButton: React.FC<
+  React.ComponentProps<typeof ButtonBase> & { clickable?: boolean }
+> = styled(ButtonBase, {
+  shouldForwardProp: (prop) => prop !== 'clickable',
+})<{ clickable?: boolean }>(({ theme, clickable }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(0.25),
+  borderRadius: theme.vars.shape.borderRadiusSecondary,
+  padding: theme.spacing(0.25, 0.5, 0.25, 0.75),
+  marginLeft: theme.spacing(-0.75),
+  backgroundColor: 'transparent',
+  ...(clickable
+    ? {
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+        },
+      }
+    : {
+        cursor: 'default',
+        pointerEvents: 'none',
+      }),
+}))

package/src/components/AmountInputCard/AmountInputCardPair.tsx

@@ -0,0 +1,25 @@
+import type { BoxProps } from '@mui/material'
+import type React from 'react'
+import type { JSX } from 'react'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { LimitPriceCard } from '../LimitPriceCard/LimitPriceCard.js'
+import { SwapButton } from '../SwapButton/SwapButton.js'
+import { CardContainer } from './AmountInputCard.style.js'
+import { ReceiveAmountCard } from './ReceiveAmountCard.js'
+import { SendAmountCard } from './SendAmountCard.js'
+
+export const AmountInputCardPair: React.FC<BoxProps> = (props): JSX.Element => {
+  // Refuel's destination is fixed to native gas, so reversing from/to is
+  // meaningless — hide the swap button (and the notch mask it sits in).
+  const { mode } = useWidgetConfig()
+  const showSwapButton = mode !== 'refuel'
+
+  return (
+    <CardContainer {...props}>
+      {mode === 'limit' ? <LimitPriceCard sx={{ marginBottom: 1 }} /> : null}
+      <SendAmountCard mask={showSwapButton} />
+      <SwapButton sx={{ visibility: showSwapButton ? 'visible' : 'hidden' }} />
+      <ReceiveAmountCard mask={showSwapButton} />
+    </CardContainer>
+  )
+}

package/src/components/AmountInputCard/BalanceDisplay.style.tsx

@@ -0,0 +1,9 @@
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+
+export const BalanceContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+  }))

package/src/components/AmountInputCard/BalanceDisplay.tsx

@@ -0,0 +1,46 @@
+import AccountBalanceWalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined'
+import { Skeleton } from '@mui/material'
+import { type JSX, memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { formatTokenAmount } from '../../utils/format.js'
+import { FooterText, footerFontSize } from './AmountInputCard.style.js'
+import { BalanceContainer } from './BalanceDisplay.style.js'
+
+export const BalanceDisplay: React.NamedExoticComponent<FormTypeProps> = memo(
+  ({ formType }: FormTypeProps): JSX.Element | null => {
+    const { t } = useTranslation()
+    const [chainId, tokenAddress] = useFieldValues(
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType)
+    )
+
+    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)
+
+    if (isLoading && tokenAddress) {
+      return (
+        <Skeleton variant="text" width={72} sx={{ fontSize: footerFontSize }} />
+      )
+    }
+
+    if (!token?.amount) {
+      return null
+    }
+
+    const tokenAmount = formatTokenAmount(token.amount, token.decimals)
+
+    return (
+      <BalanceContainer>
+        <FooterText title={tokenAmount}>
+          {t('format.tokenAmount', { value: tokenAmount })}
+        </FooterText>
+        <AccountBalanceWalletOutlinedIcon
+          sx={{ fontSize: 16, color: 'text.secondary' }}
+        />
+      </BalanceContainer>
+    )
+  }
+)

package/src/components/AmountInputCard/FiatValueToggle.tsx

@@ -0,0 +1,55 @@
+import SwapVertIcon from '@mui/icons-material/SwapVert'
+import { type JSX, memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useToken } from '../../hooks/useToken.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'
+import { formatTokenPrice } from '../../utils/format.js'
+import { FooterText, ToggleButton } from './AmountInputCard.style.js'
+
+export const FiatValueToggle: React.NamedExoticComponent<FormTypeProps> = memo(
+  ({ formType }: FormTypeProps): JSX.Element => {
+    const { t } = useTranslation()
+    const [chainId, tokenAddress, amount] = useFieldValues(
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType),
+      FormKeyHelper.getAmountKey(formType)
+    )
+
+    const { token } = useToken(chainId, tokenAddress)
+    const { inputMode, toggleInputMode } = useInputModeStore()
+    const currentInputMode = inputMode[formType]
+
+    const handleToggle = (e: React.MouseEvent): void => {
+      e.stopPropagation()
+      toggleInputMode(formType)
+    }
+
+    const canToggle = !!token?.priceUSD
+
+    const displayValue =
+      currentInputMode === 'amount'
+        ? t('format.currency', {
+            value: formatTokenPrice(amount, token?.priceUSD, token?.decimals),
+          })
+        : t('format.tokenAmount', { value: amount || '0' })
+
+    return (
+      <ToggleButton
+        clickable={canToggle}
+        onClick={canToggle ? handleToggle : undefined}
+        aria-label={canToggle ? 'Toggle fiat value' : undefined}
+      >
+        <FooterText>{displayValue}</FooterText>
+        {currentInputMode === 'price' && token?.symbol ? (
+          <FooterText>{token.symbol}</FooterText>
+        ) : null}
+        {canToggle ? (
+          <SwapVertIcon sx={{ fontSize: 14, color: 'text.secondary' }} />
+        ) : null}
+      </ToggleButton>
+    )
+  }
+)

package/src/components/AmountInputCard/PercentageChips.style.tsx

@@ -0,0 +1,60 @@
+import { Box, Button, styled } from '@mui/material'
+import { cardClasses } from '@mui/material/Card'
+import type React from 'react'
+
+const chipCount = 4
+const staggerStepMs = 25
+
+const revealStagger = Object.fromEntries(
+  Array.from({ length: chipCount }, (_, index) => [
+    `&[data-delay="${index}"]`,
+    {
+      [`.${cardClasses.root}:hover &`]: {
+        opacity: 1,
+        transform: 'scale(1) translateX(0)',
+        pointerEvents: 'auto',
+        transitionDelay: `${(chipCount - 1 - index) * staggerStepMs}ms`,
+      },
+      [`.${cardClasses.root}:not(:hover) &`]: {
+        transitionDelay: `${index * staggerStepMs}ms`,
+      },
+    },
+  ])
+)
+
+export const ChipContainer: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  gap: theme.spacing(0.5),
+}))
+
+export const Chip: React.FC<React.ComponentProps<typeof Button>> = styled(
+  Button
+)(({ theme }) => ({
+  minWidth: 0,
+  padding: theme.spacing(0.5, 1.5),
+  fontSize: 12,
+  fontWeight: 700,
+  lineHeight: 1.3334,
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  color: theme.vars.palette.text.primary,
+  transition:
+    'opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms ease',
+  '&:hover': {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+  },
+  // Reveal-on-hover — only on devices that support hover. On touch there is no
+  // hover, so the chips stay permanently visible (the default above) instead of
+  // becoming an unreachable dead row.
+  '@media (hover: hover)': {
+    opacity: 0,
+    transform: 'scale(0.85) translateX(10px)',
+    pointerEvents: 'none',
+    ...revealStagger,
+    '@media (prefers-reduced-motion: reduce)': {
+      transform: 'none !important',
+      transitionDelay: '0ms !important',
+    },
+  },
+}))