@lifi/widget 3.26.0 → 3.26.2-beta.0

package/src/components/Chains/SelectChainContent.tsx

@@ -19,95 +19,94 @@ interface SelectChainContentProps {
 
 const searchHeaderHeight = '80px'
 
-export const SelectChainContent: React.FC<SelectChainContentProps> = memo(
-  ({ formType, onSelect, inExpansion }) => {
-    const theme = useTheme()
-    const { chains, isLoading, setCurrentChain } = useChainSelect(formType)
-    const elementId = useDefaultElementId()
-    const scrollableContainer = useScrollableContainer(elementId)
-    const [selectedChainId] = useFieldValues(
-      FormKeyHelper.getChainKey(formType)
-    )
-    const inputRef = useRef<HTMLInputElement>(null)
-    const listRef = useRef<HTMLDivElement>(null)
-    const [debouncedSearchValue, setDebouncedSearchValue] = useState('')
+export const SelectChainContent = memo(function SelectChainContent({
+  formType,
+  onSelect,
+  inExpansion,
+}: SelectChainContentProps) {
+  const theme = useTheme()
+  const { chains, isLoading, setCurrentChain } = useChainSelect(formType)
+  const elementId = useDefaultElementId()
+  const scrollableContainer = useScrollableContainer(elementId)
+  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType))
+  const inputRef = useRef<HTMLInputElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+  const [debouncedSearchValue, setDebouncedSearchValue] = useState('')
 
-    const filteredChains = useMemo(() => {
-      const value = debouncedSearchValue.toLowerCase()
-      return value
-        ? (chains?.filter((chain) =>
-            chain.name.toLowerCase().includes(value)
-          ) ?? [])
-        : (chains ?? [])
-    }, [chains, debouncedSearchValue])
+  const filteredChains = useMemo(() => {
+    const value = debouncedSearchValue.toLowerCase()
+    return value
+      ? (chains?.filter((chain) => chain.name.toLowerCase().includes(value)) ??
+          [])
+      : (chains ?? [])
+  }, [chains, debouncedSearchValue])
 
-    const scrollToTop = useCallback(() => {
-      // Scroll widget container to top
-      if (!inExpansion && scrollableContainer) {
-        scrollableContainer.scrollTop = 0
-      }
-    }, [inExpansion, scrollableContainer])
+  const scrollToTop = useCallback(() => {
+    // Scroll widget container to top
+    if (!inExpansion && scrollableContainer) {
+      scrollableContainer.scrollTop = 0
+    }
+  }, [inExpansion, scrollableContainer])
 
-    const debouncedFilterChains = useMemo(
-      () =>
-        debounce((value: string) => {
-          setDebouncedSearchValue(value)
-          scrollToTop()
-        }, 250),
-      [scrollToTop]
-    )
+  const debouncedFilterChains = useMemo(
+    () =>
+      debounce((value: string) => {
+        setDebouncedSearchValue(value)
+        scrollToTop()
+      }, 250),
+    [scrollToTop]
+  )
 
-    const onSelectChainFallback = useCallback(
-      (chain: ExtendedChain) => {
-        setCurrentChain(chain.id)
-      },
-      [setCurrentChain]
-    )
+  const onSelectChainFallback = useCallback(
+    (chain: ExtendedChain) => {
+      setCurrentChain(chain.id)
+    },
+    [setCurrentChain]
+  )
 
-    const onChange = useCallback(() => {
-      const value = inputRef.current?.value || ''
-      debouncedFilterChains(value)
-    }, [debouncedFilterChains])
+  const onChange = useCallback(() => {
+    const value = inputRef.current?.value || ''
+    debouncedFilterChains(value)
+  }, [debouncedFilterChains])
 
-    const onClear = useCallback(() => {
-      setDebouncedSearchValue('')
-      scrollToTop()
-    }, [scrollToTop])
+  const onClear = useCallback(() => {
+    setDebouncedSearchValue('')
+    scrollToTop()
+  }, [scrollToTop])
 
-    const listContainerHeight = useMemo(() => {
-      const fullContainerHeight = getWidgetMaxHeight(theme)
-      const heightValue =
-        typeof fullContainerHeight === 'number'
-          ? `${fullContainerHeight}px`
-          : fullContainerHeight
-      return `calc(${heightValue} - ${searchHeaderHeight})`
-    }, [theme])
+  const listContainerHeight = useMemo(() => {
+    const fullContainerHeight = getWidgetMaxHeight(theme)
+    const heightValue =
+      typeof fullContainerHeight === 'number'
+        ? `${fullContainerHeight}px`
+        : fullContainerHeight
+    return `calc(${heightValue} - ${searchHeaderHeight})`
+  }, [theme])
 
-    return (
-      <FullPageContainer disableGutters>
-        <ChainSearchInput
-          inputRef={inputRef}
+  return (
+    <FullPageContainer disableGutters>
+      <ChainSearchInput
+        inputRef={inputRef}
+        inExpansion={inExpansion}
+        onChange={onChange}
+        onClear={onClear}
+        searchHeaderHeight={searchHeaderHeight}
+      />
+      <Box
+        ref={listRef}
+        sx={
+          inExpansion ? { height: listContainerHeight, overflow: 'auto' } : {}
+        }
+      >
+        <ChainList
+          parentRef={listRef}
+          chains={filteredChains}
+          isLoading={isLoading}
+          onSelect={onSelect ?? onSelectChainFallback}
+          selectedChainId={selectedChainId}
           inExpansion={inExpansion}
-          onChange={onChange}
-          onClear={onClear}
-          searchHeaderHeight={searchHeaderHeight}
         />
-        <Box
-          ref={listRef}
-          sx={
-            inExpansion ? { height: listContainerHeight, overflow: 'auto' } : {}
-          }
-        >
-          <ChainList
-            parentRef={listRef}
-            chains={filteredChains}
-            isLoading={isLoading}
-            onSelect={onSelect ?? onSelectChainFallback}
-            selectedChainId={selectedChainId}
-            inExpansion={inExpansion}
-          />
-        </Box>
-      </FullPageContainer>
-    )
-  }
-)
+      </Box>
+    </FullPageContainer>
+  )
+})

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

@@ -0,0 +1,43 @@
+import { Box, styled } from '@mui/material'
+
+export const animationDuration = 225
+
+export const defaultStyle = {
+  opacity: 0,
+  whiteSpace: 'nowrap',
+  transform: 'translateX(-100%)',
+  display: 'inline-block',
+  position: 'absolute' as const,
+  top: 0,
+  left: 0,
+  transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+}
+
+export const transitionStyles = {
+  entering: {
+    opacity: 1,
+    transform: 'translateX(0)',
+  },
+  entered: {
+    opacity: 1,
+    transform: 'translateX(0)',
+  },
+  exiting: {
+    opacity: 0,
+    transform: 'translateX(-100%)',
+  },
+  exited: {
+    opacity: 0,
+    transform: 'translateX(-100%)',
+  },
+}
+
+export const ExpansionContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'width',
+})<{ width: string | number }>(({ width }) => ({
+  position: 'relative',
+  display: 'flex',
+  transition: `width ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+  width: width,
+  marginLeft: width ? '24px' : 0,
+}))

package/src/components/Expansion/Expansion.tsx

@@ -1,23 +1,17 @@
-import { Box } from '@mui/material'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { useHasChainExpansion } from '../../hooks/useHasChainExpansion'
 import { ExpansionType } from '../../types/widget'
 import { ChainsExpanded } from '../Chains/ChainsExpanded'
 import { chainExpansionWidth } from '../Chains/ChainsExpanded.style'
 import { RoutesExpanded } from '../Routes/RoutesExpanded'
 import { routesExpansionWidth } from '../Routes/RoutesExpanded.style'
-import { animationDuration } from './ExpansionTransition'
+import { ExpansionContainer } from './Expansion.style'
 
 export function Expansion() {
   const [withChainExpansion, expansionType] = useHasChainExpansion()
   const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)
-
   const [routesOpen, setRoutesOpen] = useState(false)
 
-  const handleSetRoutesOpen = useCallback((open: boolean) => {
-    setRoutesOpen(open)
-  }, [])
-
   // Track the previous chain expansion type to avoid re-renders when transitioning to Routes
   if (
     expansionType === ExpansionType.FromChain ||
@@ -26,28 +20,19 @@ export function Expansion() {
     chainExpansionTypeRef.current = expansionType
   }
 
-  const boxWidth = useMemo(() => {
+  const containerWidth = useMemo(() => {
     return routesOpen
       ? routesExpansionWidth
       : withChainExpansion
         ? chainExpansionWidth
-        : '0px'
+        : 0
   }, [routesOpen, withChainExpansion])
 
   return (
-    <Box
-      sx={{
-        position: 'relative',
-        display: 'flex',
-        transition: `width ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
-        width: boxWidth,
-        willChange: 'width',
-        marginLeft: boxWidth !== '0px' ? '24px' : '0px',
-      }}
-    >
+    <ExpansionContainer width={containerWidth}>
       <RoutesExpanded
-        expansionType={expansionType}
-        setOpenExpansion={handleSetRoutesOpen}
+        canOpen={expansionType === ExpansionType.Routes}
+        setOpenExpansion={setRoutesOpen}
       />
       <ChainsExpanded
         formType={
@@ -57,6 +42,6 @@ export function Expansion() {
         }
         open={withChainExpansion}
       />
-    </Box>
+    </ExpansionContainer>
   )
 }

package/src/components/Expansion/ExpansionTransition.tsx

@@ -1,39 +1,11 @@
 import { Box } from '@mui/material'
 import { type PropsWithChildren, useRef } from 'react'
 import { Transition } from 'react-transition-group'
-
-export const animationDuration = 225
-
-const defaultStyle = {
-  opacity: 0,
-  whiteSpace: 'nowrap',
-  transform: 'translateX(-100%)',
-  display: 'inline-block',
-  position: 'absolute' as const,
-  top: 0,
-  left: 0,
-  willChange: 'opacity, transform',
-  transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
-}
-
-const transitionStyles = {
-  entering: {
-    opacity: 1,
-    transform: 'translateX(0)',
-  },
-  entered: {
-    opacity: 1,
-    transform: 'translateX(0)',
-  },
-  exiting: {
-    opacity: 0,
-    transform: 'translateX(-100%)',
-  },
-  exited: {
-    opacity: 0,
-    transform: 'translateX(-100%)',
-  },
-}
+import {
+  animationDuration,
+  defaultStyle,
+  transitionStyles,
+} from './Expansion.style'
 
 interface ExpansionTransitionProps {
   in: boolean

package/src/components/Header/CloseDrawerButton.tsx

@@ -3,7 +3,6 @@ import { IconButton, Tooltip } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useDrawer } from '../../AppDrawerContext.js'
 import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 
 interface CloseDrawerButtonProps {
   header?: 'navigation' | 'wallet'
@@ -11,15 +10,13 @@ interface CloseDrawerButtonProps {
 
 export const CloseDrawerButton = ({ header }: CloseDrawerButtonProps) => {
   const { t } = useTranslation()
-  const { subvariant } = useWidgetConfig()
   const { closeDrawer } = useDrawer()
   const { useExternalWalletProvidersOnly } = useExternalWalletProvider()
 
   const showInNavigationHeader =
-    header === 'navigation' &&
-    (useExternalWalletProvidersOnly || subvariant === 'split')
+    header === 'navigation' && useExternalWalletProvidersOnly
 
-  const showInWalletHeader = header === 'wallet' && subvariant !== 'split'
+  const showInWalletHeader = header === 'wallet'
 
   return showInNavigationHeader || showInWalletHeader ? (
     <Tooltip title={t('button.close')}>

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

@@ -6,7 +6,6 @@ import {
   buttonClasses,
   styled,
 } from '@mui/material'
-import type { WidgetSubvariant } from '../../types/widget.js'
 import { getAvatarMask } from '../Avatar/utils.js'
 
 export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
@@ -46,8 +45,8 @@ export const Container = styled(Box, {
 })
 
 export const WalletButton = styled(Button, {
-  shouldForwardProp: (prop) => prop !== 'subvariant',
-})<{ subvariant?: WidgetSubvariant }>(({ subvariant, theme }) => ({
+  shouldForwardProp: (prop) => prop !== 'withOffset',
+})<{ withOffset?: boolean }>(({ withOffset, theme }) => ({
   color: theme.vars.palette.text.primary,
   padding: theme.spacing(1, 1.5),
   maxHeight: 40,
@@ -71,8 +70,7 @@ export const WalletButton = styled(Button, {
     fontSize: '24px',
   },
   ...(theme.navigation.edge && {
-    marginRight: subvariant === 'split' ? 0 : theme.spacing(-1.25),
-    marginLeft: subvariant === 'split' ? theme.spacing(-1) : 0,
+    marginRight: withOffset ? theme.spacing(-1.25) : 0,
   }),
 }))
 

package/src/components/Header/NavigationHeader.tsx

@@ -13,13 +13,13 @@ import {
 import { BackButton } from './BackButton.js'
 import { CloseDrawerButton } from './CloseDrawerButton.js'
 import { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'
-import { NavigationTabs } from './NavigationTabs.js'
 import { SettingsButton } from './SettingsButton.js'
+import { SplitNavigationTabs } from './SplitNavigationTabs.js'
 import { TransactionHistoryButton } from './TransactionHistoryButton.js'
-import { SplitWalletMenuButton } from './WalletHeader.js'
 
 export const NavigationHeader: React.FC = () => {
-  const { subvariant, hiddenUI, variant, defaultUI } = useWidgetConfig()
+  const { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } =
+    useWidgetConfig()
   const { navigateBack } = useNavigateBack()
   const { account } = useAccount()
   const { element, title } = useHeaderStore((state) => state)
@@ -31,77 +31,70 @@ export const NavigationHeader: React.FC = () => {
   const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)
   const hasPath = navigationRoutesValues.includes(path)
 
-  const splitSubvariant = subvariant === 'split' && !hasPath
+  const showSplitOptions =
+    subvariant === 'split' && !hasPath && !subvariantOptions?.split
 
   return (
-    <>
-      <HeaderAppBar elevation={0}>
-        {backButtonRoutes.includes(path) ? (
-          <BackButton
-            onClick={() =>
-              navigateBack(
-                // From transaction details page, navigate to home page
-                path === navigationRoutes.transactionDetails
-                  ? navigationRoutes.home
-                  : undefined
-              )
-            }
-          />
-        ) : null}
-        {splitSubvariant ? (
-          <Box
-            sx={{
-              flex: 1,
-            }}
-          >
-            <SplitWalletMenuButton />
-          </Box>
-        ) : (
-          <Typography
-            align={hasPath ? 'center' : 'left'}
-            noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}
-            sx={{
-              fontSize: hasPath ? 18 : 24,
-              fontWeight: '700',
-              flex: 1,
-            }}
-          >
-            {title}
-          </Typography>
-        )}
-        <Routes>
-          <Route
-            path={navigationRoutes.home}
-            element={
-              <HeaderControlsContainer>
-                {account.isConnected &&
-                !hiddenUI?.includes(HiddenUI.History) ? (
-                  <TransactionHistoryButton />
-                ) : null}
-                <SettingsButton />
-                {variant === 'drawer' &&
-                !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (
-                  <CloseDrawerButton header="navigation" />
-                ) : null}
-              </HeaderControlsContainer>
-            }
-          />
-          <Route
-            path="*"
-            element={
-              element || (
-                <Box
-                  sx={{
-                    width: 28,
-                    height: 40,
-                  }}
-                />
-              )
-            }
-          />
-        </Routes>
-      </HeaderAppBar>
-      {splitSubvariant ? <NavigationTabs /> : null}
-    </>
+    <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>
+      {backButtonRoutes.includes(path) ? (
+        <BackButton
+          onClick={() =>
+            navigateBack(
+              // From transaction details page, navigate to home page
+              path === navigationRoutes.transactionDetails
+                ? navigationRoutes.home
+                : undefined
+            )
+          }
+        />
+      ) : null}
+      {showSplitOptions ? (
+        <Box sx={{ flex: 1, marginRight: 1 }}>
+          <SplitNavigationTabs />
+        </Box>
+      ) : (
+        <Typography
+          align={hasPath ? 'center' : 'left'}
+          noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}
+          sx={{
+            fontSize: hasPath ? 18 : 24,
+            fontWeight: '700',
+            flex: 1,
+          }}
+        >
+          {title}
+        </Typography>
+      )}
+      <Routes>
+        <Route
+          path={navigationRoutes.home}
+          element={
+            <HeaderControlsContainer>
+              {account.isConnected && !hiddenUI?.includes(HiddenUI.History) && (
+                <TransactionHistoryButton />
+              )}
+              <SettingsButton />
+              {variant === 'drawer' &&
+              !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (
+                <CloseDrawerButton header="navigation" />
+              ) : null}
+            </HeaderControlsContainer>
+          }
+        />
+        <Route
+          path="*"
+          element={
+            element || (
+              <Box
+                sx={{
+                  width: 28,
+                  height: 40,
+                }}
+              />
+            )
+          }
+        />
+      </Routes>
+    </HeaderAppBar>
   )
 }

package/src/components/Header/{NavigationTabs.tsx → SplitNavigationTabs.tsx}

@@ -1,10 +1,9 @@
 import { useTranslation } from 'react-i18next'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'
-import { Tab, Tabs } from '../Tabs/Tabs.style.js'
-import { HeaderAppBar } from './Header.style.js'
+import { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'
 
-export const NavigationTabs = () => {
+export const SplitNavigationTabs = () => {
   const { t } = useTranslation()
   const [state, setState] = useSplitSubvariantStore((state) => [
     state.state,
@@ -20,16 +19,13 @@ export const NavigationTabs = () => {
   }
 
   return (
-    <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>
-      <Tabs
-        value={state === 'swap' ? 0 : 1}
-        onChange={handleChange}
-        aria-label="tabs"
-        indicatorColor="primary"
-      >
-        <Tab label={t('header.swap')} disableRipple />
-        <Tab label={t('header.bridge')} disableRipple />
-      </Tabs>
-    </HeaderAppBar>
+    <NavigationTabs
+      value={state === 'swap' ? 0 : 1}
+      onChange={handleChange}
+      aria-label="tabs"
+    >
+      <NavigationTab label={t('header.swap')} disableRipple />
+      <NavigationTab label={t('header.bridge')} disableRipple />
+    </NavigationTabs>
   )
 }