@lifi/widget 4.0.0 → 4.1.0

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/BaseTransactionButton/BaseTransactionButton.tsx

@@ -64,6 +64,7 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
       loadingPosition="center"
       fullWidth
       sx={sx}
+      data-testid="widget-transaction-button"
     >
       {getButtonText()}
     </Button>

package/src/components/BottomSheet/BottomSheet.tsx

@@ -1,7 +1,6 @@
 import { Drawer } from '@mui/material'
-import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+import type { JSX, Ref } from 'react'
 import {
-  forwardRef,
   startTransition,
   useCallback,
   useImperativeHandle,
@@ -12,56 +11,61 @@ import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js
 import { modalProps, slotProps } from '../Dialog/Dialog.js'
 import type { BottomSheetBase, BottomSheetProps } from './types.js'
 
-export const BottomSheet: ForwardRefExoticComponent<
-  Omit<BottomSheetProps, 'ref'> & RefAttributes<BottomSheetBase>
-> = forwardRef<BottomSheetBase, BottomSheetProps>(
-  ({ elementRef, children, open, onClose, keepMounted = false }, ref) => {
-    const getContainer = useGetScrollableContainer()
-    const openRef = useRef(open)
-    const [drawerOpen, setDrawerOpen] = useState(open)
-    const [isInert, setIsInert] = useState(!open)
+export const BottomSheet = ({
+  elementRef,
+  children,
+  open,
+  onClose,
+  keepMounted = false,
+  ref,
+}: Omit<BottomSheetProps, 'ref'> & {
+  ref?: Ref<BottomSheetBase>
+}): JSX.Element => {
+  const getContainer = useGetScrollableContainer()
+  const openRef = useRef(open)
+  const [drawerOpen, setDrawerOpen] = useState(open)
+  const [isInert, setIsInert] = useState(!open)
 
-    const close = useCallback(() => {
-      // Set inert first to prevent focus issues
-      setIsInert(true)
-      // Push the state update to the next event loop tick
-      // to ensure the inert is applied to before the drawer is closed
-      startTransition(() => {
-        setDrawerOpen(false)
-        openRef.current = false
-        onClose?.()
-      })
-    }, [onClose])
+  const close = useCallback(() => {
+    // Set inert first to prevent focus issues
+    setIsInert(true)
+    // Push the state update to the next event loop tick
+    // to ensure the inert is applied to before the drawer is closed
+    startTransition(() => {
+      setDrawerOpen(false)
+      openRef.current = false
+      onClose?.()
+    })
+  }, [onClose])
 
-    useImperativeHandle(
-      ref,
-      () => ({
-        isOpen: () => openRef.current,
-        open: () => {
-          setIsInert(false)
-          setDrawerOpen(true)
-          openRef.current = true
-        },
-        close,
-      }),
-      [close]
-    )
+  useImperativeHandle(
+    ref,
+    () => ({
+      isOpen: () => openRef.current,
+      open: () => {
+        setIsInert(false)
+        setDrawerOpen(true)
+        openRef.current = true
+      },
+      close,
+    }),
+    [close]
+  )
 
-    return (
-      <Drawer
-        container={getContainer}
-        ref={elementRef}
-        anchor="bottom"
-        open={drawerOpen}
-        onClose={close}
-        ModalProps={modalProps}
-        slotProps={slotProps}
-        disableAutoFocus
-        keepMounted={keepMounted}
-        inert={isInert}
-      >
-        {children}
-      </Drawer>
-    )
-  }
-)
+  return (
+    <Drawer
+      container={getContainer}
+      ref={elementRef}
+      anchor="bottom"
+      open={drawerOpen}
+      onClose={close}
+      ModalProps={modalProps}
+      slotProps={slotProps}
+      disableAutoFocus
+      keepMounted={keepMounted}
+      inert={isInert}
+    >
+      {children}
+    </Drawer>
+  )
+}

package/src/components/Header/CloseDrawerButton.tsx

@@ -23,7 +23,11 @@ export const CloseDrawerButton = ({
 
   return showInNavigationHeader || showInWalletHeader ? (
     <Tooltip title={t('button.close')}>
-      <IconButton size="medium" onClick={closeDrawer}>
+      <IconButton
+        size="medium"
+        data-testid="widget-close-drawer-button"
+        onClick={closeDrawer}
+      >
         <CloseRounded />
       </IconButton>
     </Tooltip>

package/src/components/Header/Header.tsx

@@ -1,6 +1,6 @@
 import { useLocation } from '@tanstack/react-router'
 import type { FC, PropsWithChildren } from 'react'
-import { useLayoutEffect, useRef } from 'react'
+import { useCallback } from 'react'
 import { useDefaultElementId } from '../../hooks/useDefaultElementId.js'
 import { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js'
 import { createElementId, ElementId } from '../../utils/elements.js'
@@ -12,31 +12,33 @@ import { WalletHeader } from './WalletHeader.js'
 const HeaderContainer: FC<PropsWithChildren> = ({ children }) => {
   const { pathname } = useLocation()
   const elementId = useDefaultElementId()
-  const headerRef = useRef<HTMLDivElement>(null)
   const { setHeaderHeight } = useSetHeaderHeight()
 
-  useLayoutEffect(() => {
-    const handleHeaderResize = () => {
-      const height = headerRef.current?.getBoundingClientRect().height
-
-      if (height) {
-        setHeaderHeight(height)
+  // React 19 ref cleanup callback: set up the ResizeObserver when the node
+  // mounts and tear it down when it unmounts.
+  const headerRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (!node) {
+        return
       }
-    }
 
-    let resizeObserver: ResizeObserver
+      const handleHeaderResize = () => {
+        const height = node.getBoundingClientRect().height
+
+        if (height) {
+          setHeaderHeight(height)
+        }
+      }
 
-    if (headerRef.current) {
-      resizeObserver = new ResizeObserver(handleHeaderResize)
-      resizeObserver.observe(headerRef.current)
-    }
+      const resizeObserver = new ResizeObserver(handleHeaderResize)
+      resizeObserver.observe(node)
 
-    return () => {
-      if (resizeObserver) {
+      return () => {
         resizeObserver.disconnect()
       }
-    }
-  }, [setHeaderHeight])
+    },
+    [setHeaderHeight]
+  )
 
   return (
     <Container

package/src/components/Header/HeaderNavigationTabs.tsx

@@ -0,0 +1,25 @@
+import type { JSX } from 'react'
+import { useNavigationTabLabel } from '../../stores/navigationTabs/useNavigationTabLabel.js'
+import { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'
+import { HeaderTabs } from './HeaderTabs.js'
+
+export const HeaderNavigationTabs = (): JSX.Element | null => {
+  const [tabs, activeTab, setActiveTab] = useNavigationTabsStore((store) => [
+    store.tabs,
+    store.activeTab,
+    store.setActiveTab,
+  ])
+  const getLabel = useNavigationTabLabel()
+
+  if (!tabs.length || !activeTab) {
+    return null
+  }
+
+  return (
+    <HeaderTabs
+      tabs={tabs.map((key) => ({ key, label: getLabel(key) }))}
+      value={activeTab}
+      onChange={(key) => setActiveTab(key)}
+    />
+  )
+}

package/src/components/Header/HeaderTabs.tsx

@@ -0,0 +1,48 @@
+import type { JSX } from 'react'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'
+
+interface HeaderTab<K extends string> {
+  key: K
+  label: string
+}
+
+interface HeaderTabsProps<K extends string> {
+  tabs: HeaderTab<K>[]
+  value: K
+  onChange: (key: K) => void
+}
+
+/**
+ * Presentational header tabs bar shared by split mode and configured
+ * navigation tabs.
+ * Clears the form fields on switch; the caller supplies the labelled tabs, the
+ * active key, and what selecting a key means for its store.
+ */
+export const HeaderTabs = <K extends string>({
+  tabs,
+  value,
+  onChange,
+}: HeaderTabsProps<K>): JSX.Element => {
+  const { setFieldValue } = useFieldActions()
+
+  const handleChange = (_: React.SyntheticEvent, key: K) => {
+    setFieldValue('fromAmount', '')
+    setFieldValue('fromToken', '')
+    setFieldValue('toToken', '')
+    onChange(key)
+  }
+
+  return (
+    <NavigationTabs value={value} onChange={handleChange} aria-label="tabs">
+      {tabs.map((tab) => (
+        <NavigationTab
+          key={tab.key}
+          value={tab.key}
+          label={tab.label}
+          disableRipple
+        />
+      ))}
+    </NavigationTabs>
+  )
+}

package/src/components/Header/NavigationHeader.tsx

@@ -3,6 +3,7 @@ import { Box, Typography } from '@mui/material'
 import { useLocation } from '@tanstack/react-router'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useHeaderStore } from '../../stores/header/useHeaderStore.js'
+import { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'
 import {
   backButtonRoutes,
   navigationRoutes,
@@ -12,11 +13,14 @@ import { ActivitiesButton } from './ActivitiesButton.js'
 import { BackButton } from './BackButton.js'
 import { CloseDrawerButton } from './CloseDrawerButton.js'
 import { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'
+import { HeaderNavigationTabs } from './HeaderNavigationTabs.js'
 import { SettingsButton } from './SettingsButton.js'
-import { SplitNavigationTabs } from './SplitNavigationTabs.js'
 
 export const NavigationHeader: React.FC = () => {
-  const { mode, hiddenUI, variant, defaultUI, modeOptions } = useWidgetConfig()
+  const { hiddenUI, variant, defaultUI } = useWidgetConfig()
+  const navigationTabsCount = useNavigationTabsStore(
+    (state) => state.tabs.length
+  )
   const { account } = useAccount()
   const [element, title] = useHeaderStore((state) => [
     state.element,
@@ -29,17 +33,16 @@ export const NavigationHeader: React.FC = () => {
   const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)
   const hasPath = navigationRoutesValues.includes(path)
 
-  // Show tabs when split is undefined (default tabs) or an object with defaultTab
-  // Hide tabs when split is a string ('bridge' or 'swap' - single mode)
-  const showSplitOptions =
-    mode === 'split' && !hasPath && typeof modeOptions?.split !== 'string'
+  // The store resolves which tabs to show (split Swap/Bridge or configured
+  // navigation tabs); the header just reflects whether there are any.
+  const showHeaderTabs = !hasPath && navigationTabsCount > 0
 
   return (
     <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>
       {backButtonRoutes.includes(path) ? <BackButton /> : null}
-      {showSplitOptions ? (
+      {showHeaderTabs ? (
         <Box sx={{ flex: 1, marginRight: 1 }}>
-          <SplitNavigationTabs />
+          <HeaderNavigationTabs />
         </Box>
       ) : (
         <Typography

package/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -50,7 +50,10 @@ export const ReverseTokensButton = (): JSX.Element => {
   }
   return (
     <ReverseContainer>
-      <IconCard onClick={handleClick}>
+      <IconCard
+        data-testid="widget-reverse-tokens-button"
+        onClick={handleClick}
+      >
         <ArrowForward fontSize="inherit" />
       </IconCard>
     </ReverseContainer>

package/src/components/Skeleton/WidgetSkeleton.tsx

@@ -89,7 +89,7 @@ export const WidgetSkeleton = ({
       colorSchemeStorageKey="li.fi-widget-color-scheme"
       disableTransitionOnChange
     >
-      <AppExpandedContainer>
+      <AppExpandedContainer data-testid="widget-skeleton-container">
         <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>
           <SkeletonHeaderContainer>
             {!hiddenUI?.walletMenu ? (

package/src/components/Tabs/NavigationTabs.tsx

@@ -40,6 +40,9 @@ export const NavigationTab: React.FC<React.ComponentProps<typeof Tab>> = styled(
     slot: 'root',
   }
 )(({ theme }) => ({
+  flex: 'none',
+  whiteSpace: 'nowrap',
+  minWidth: 'auto',
   minHeight: theme.spacing(5),
   maxHeight: theme.spacing(5),
 }))

package/src/components/TokenList/TokenDetailsSheet.tsx

@@ -1,13 +1,15 @@
-import type React from 'react'
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import type { JSX, Ref } from 'react'
+import { useImperativeHandle, useRef, useState } from 'react'
 import { BottomSheet } from '../BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../BottomSheet/types.js'
 import { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'
 import type { TokenDetailsSheetBase } from './types.js'
 
-export const TokenDetailsSheet: React.ForwardRefExoticComponent<
-  React.RefAttributes<TokenDetailsSheetBase>
-> = forwardRef<TokenDetailsSheetBase>((_, ref) => {
+export const TokenDetailsSheet = ({
+  ref,
+}: {
+  ref?: Ref<TokenDetailsSheetBase>
+}): JSX.Element => {
   const bottomSheetRef = useRef<BottomSheetBase>(null)
   const [tokenAddress, setTokenAddress] = useState<string | undefined>(
     undefined
@@ -35,11 +37,11 @@ export const TokenDetailsSheet: React.ForwardRefExoticComponent<
   return (
     <BottomSheet ref={bottomSheetRef} keepMounted>
       <TokenDetailsSheetContent
-        ref={ref}
+        onClose={() => bottomSheetRef.current?.close()}
         tokenAddress={tokenAddress}
         withoutContractAddress={withoutContractAddress}
         chainId={chainId}
       />
     </BottomSheet>
   )
-})
+}