@lifi/widget 3.26.1 → 3.26.2-beta.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>
   )
 }

package/src/components/Header/WalletHeader.tsx

@@ -27,10 +27,9 @@ import { WalletMenu } from './WalletMenu.js'
 import { WalletMenuContainer } from './WalletMenu.style.js'
 
 const useInternalWalletManagement = () => {
-  const { subvariant, hiddenUI } = useWidgetConfig()
+  const { hiddenUI } = useWidgetConfig()
   const { useExternalWalletProvidersOnly } = useExternalWalletProvider()
 
-  const isSplitVariant = subvariant === 'split'
   const isWalletMenuHidden = hiddenUI?.includes(HiddenUI.WalletMenu)
 
   const shouldShowWalletMenu =
@@ -38,25 +37,19 @@ const useInternalWalletManagement = () => {
 
   return {
     shouldShowWalletMenu,
-    isSplitVariant,
   }
 }
 
 export const WalletHeader: React.FC = () => {
-  const { shouldShowWalletMenu, isSplitVariant } = useInternalWalletManagement()
+  const { shouldShowWalletMenu } = useInternalWalletManagement()
 
-  return shouldShowWalletMenu && !isSplitVariant ? (
+  return shouldShowWalletMenu ? (
     <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>
       <WalletMenuButton />
     </HeaderAppBar>
   ) : null
 }
 
-export const SplitWalletMenuButton: React.FC = () => {
-  const { shouldShowWalletMenu, isSplitVariant } = useInternalWalletManagement()
-  return shouldShowWalletMenu && isSplitVariant ? <WalletMenuButton /> : null
-}
-
 export const WalletMenuButton: React.FC = () => {
   const { variant, hiddenUI } = useWidgetConfig()
   const { account, accounts } = useAccount()
@@ -92,24 +85,25 @@ export const WalletMenuButton: React.FC = () => {
 
 const ConnectButton = () => {
   const { t } = useTranslation()
-  const { walletConfig, subvariant, variant } = useWidgetConfig()
+  const { walletConfig, variant } = useWidgetConfig()
   const { openWalletMenu } = useWalletMenu()
-  const connect = async () => {
+  const connect = async (event: React.MouseEvent<HTMLElement>) => {
     if (!walletConfig?.usePartialWalletManagement && walletConfig?.onConnect) {
       walletConfig.onConnect()
       return
     }
     openWalletMenu()
+    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer
   }
 
+  const walletPosition = variant === 'drawer' ? 'start' : 'end'
+
   return (
     <WalletButton
-      subvariant={subvariant}
-      endIcon={
-        variant !== 'drawer' && subvariant !== 'split' ? <Wallet /> : undefined
-      }
+      withOffset={walletPosition === 'end'}
+      endIcon={walletPosition === 'end' ? <Wallet /> : undefined}
       startIcon={
-        variant === 'drawer' || subvariant === 'split' ? (
+        walletPosition === 'start' ? (
           <Wallet sx={{ marginLeft: -0.25 }} />
         ) : undefined
       }
@@ -121,13 +115,13 @@ const ConnectButton = () => {
 }
 
 const ConnectedButton = ({ account }: { account: Account }) => {
-  const { subvariant } = useWidgetConfig()
   const { chain } = useChain(account.chainId)
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
   const walletAddress = shortenAddress(account.address)
 
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget)
+    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer
   }
 
   const handleClose = () => {
@@ -137,7 +131,7 @@ const ConnectedButton = ({ account }: { account: Account }) => {
   return (
     <>
       <WalletButton
-        subvariant={subvariant}
+        withOffset
         endIcon={<ExpandMore />}
         startIcon={
           chain?.logoURI ? (

package/src/components/Step/StepProcess.tsx

@@ -13,12 +13,17 @@ export const StepProcess: React.FC<{
   const { title, message } = useProcessMessage(step, process)
   const { getTransactionLink } = useExplorer()
 
-  const transactionLink = process.txLink
+  const transactionLink = process.txHash
     ? getTransactionLink({
-        txLink: process.txLink,
+        txHash: process.txHash,
         chain: process.chainId,
       })
-    : undefined
+    : process.txLink
+      ? getTransactionLink({
+          txLink: process.txLink,
+          chain: process.chainId,
+        })
+      : undefined
 
   return (
     <Box

package/src/components/Tabs/NavigationTabs.tsx

@@ -0,0 +1,40 @@
+import { styled, Tabs, tabsClasses } from '@mui/material'
+import { Tab } from './Tabs.style.js'
+
+export const NavigationTabs = styled(Tabs, {
+  name: 'MuiNavigationTabs',
+  slot: 'root',
+})(({ theme }) => ({
+  overflow: 'visible', // Prevent shadows from being cut off
+  width: 'fit-content',
+  minHeight: theme.spacing(5),
+  maxHeight: theme.spacing(5),
+  background: 'transparent',
+  ...theme.applyStyles('dark', {
+    backgroundColor: 'transparent',
+  }),
+  [`& .${tabsClasses.scroller}`]: {
+    padding: 0,
+    overflow: 'visible !important', // Enforce since overflow is set dynamically
+  },
+  [`& .${tabsClasses.indicator}`]: {
+    boxShadow: 'none',
+    top: 0,
+    left: 0,
+    height: '100%',
+    width: '100%',
+    borderRadius: theme.vars.shape.borderRadius,
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    ...theme.applyStyles('dark', {
+      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+    }),
+  },
+}))
+
+export const NavigationTab = styled(Tab, {
+  name: 'MuiNavigationTab',
+  slot: 'root',
+})(({ theme }) => ({
+  minHeight: theme.spacing(5),
+  maxHeight: theme.spacing(5),
+}))

package/src/components/TokenList/TokenListItem.tsx

@@ -102,6 +102,7 @@ const OpenTokenDetailsButton = ({
       size="small"
       onClick={(e) => {
         e.stopPropagation()
+        e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer
         onClick(tokenAddress, withoutContractAddress)
       }}
     >

package/src/components/TokenList/useTokenSelect.ts

@@ -6,6 +6,7 @@ import { useChainOrderStoreContext } from '../../stores/chains/ChainOrderStore.j
 import type { FormType } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'
 import { WidgetEvent } from '../../types/events.js'
 import type { DisabledUI } from '../../types/widget.js'
 
@@ -16,6 +17,7 @@ export type UseTokenSelectArgs = {
 
 export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
   const { subvariant, disabledUI } = useWidgetConfig()
+  const splitSubvariant = useSplitSubvariantStore((store) => store.state)
   const emitter = useWidgetEvents()
   const { setFieldValue, getFieldValues } = useFieldActions()
   const autoPopulateToAddress = useToAddressAutoPopulate()
@@ -47,10 +49,19 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
         FormKeyHelper.getChainKey(oppositeFormType),
         'toAddress'
       )
+
       // TODO: remove when we enable same chain/token transfers
-      if (
+      const isSameTokenTransfer =
         selectedOppositeTokenAddress === tokenAddress &&
-        selectedOppositeChainId === selectedChainId &&
+        selectedOppositeChainId === selectedChainId
+
+      const isBridgeToSameChain =
+        subvariant === 'split' &&
+        splitSubvariant === 'bridge' &&
+        selectedOppositeChainId === selectedChainId
+
+      if (
+        (isSameTokenTransfer || isBridgeToSameChain) &&
         subvariant !== 'custom'
       ) {
         setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {
@@ -106,6 +117,7 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
       onClick,
       setFieldValue,
       subvariant,
+      splitSubvariant,
       tokenKey,
     ]
   )

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.26.1'
+export const version = '3.26.2-beta.0'

package/src/pages/MainPage/MainPage.tsx

@@ -25,12 +25,20 @@ export const MainPage: React.FC = () => {
   const custom = subvariant === 'custom'
   const showPoweredBy = !hiddenUI?.includes(HiddenUI.PoweredBy)
 
+  const splitTitle =
+    subvariantOptions?.split === 'bridge'
+      ? t('header.bridge')
+      : subvariantOptions?.split === 'swap'
+        ? t('header.swap')
+        : undefined
   const title =
     subvariant === 'custom'
       ? t(`header.${subvariantOptions?.custom ?? 'checkout'}`)
       : subvariant === 'refuel'
         ? t('header.gas')
-        : t('header.exchange')
+        : subvariant === 'split' && splitTitle
+          ? splitTitle
+          : t('header.exchange')
 
   useHeader(title)
 

package/src/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -39,7 +39,6 @@ export const RoutePrioritySettings: React.FC = () => {
         aria-label="tabs"
         indicatorColor="primary"
         onChange={handleRoutePriorityChange}
-        orientation="vertical"
         sx={{ mt: 1.5 }}
       >
         {Priorities.map((priority) => {

package/src/themes/azureLight.ts

@@ -48,12 +48,11 @@ export const azureLightTheme: WidgetTheme = {
       defaultProps: { variant: 'filled' },
     },
     // Used only for 'split' subvariant and can be safely removed if not used
-    MuiTabs: {
+    MuiNavigationTabs: {
       styleOverrides: {
         root: {
-          backgroundColor: '#f8f8fa',
           [`.${tabsClasses.indicator}`]: {
-            backgroundColor: '#ffffff',
+            backgroundColor: '#f8f8fa',
           },
         },
       },

package/src/themes/createTheme.ts

@@ -469,6 +469,12 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
           },
         },
       },
+      MuiNavigationTabs: {
+        ...widgetTheme.components?.MuiNavigationTabs,
+      },
+      MuiNavigationTab: {
+        ...widgetTheme.components?.MuiNavigationTab,
+      },
     },
   })
 

package/src/themes/types.ts

@@ -3,6 +3,8 @@ import type {
   ComponentsOverrides,
   ComponentsVariants,
   SimplePaletteColorOptions,
+  TabProps,
+  TabsProps,
 } from '@mui/material'
 import type {} from '@mui/material/themeCssVarsAugmentation'
 import type { CSSProperties } from 'react'
@@ -42,9 +44,13 @@ declare module '@mui/material/styles' {
   }
   interface ComponentNameToClassKey {
     MuiInputCard: 'root'
+    MuiNavigationTabs: 'root'
+    MuiNavigationTab: 'root'
   }
   interface ComponentsPropsList {
     MuiInputCard: Partial<CardProps>
+    MuiNavigationTabs: Partial<TabsProps>
+    MuiNavigationTab: Partial<TabProps>
   }
   interface Components {
     MuiInputCard?: {
@@ -54,6 +60,20 @@ declare module '@mui/material/styles' {
       >['MuiInputCard']
       variants?: ComponentsVariants['MuiInputCard']
     }
+    MuiNavigationTabs?: {
+      defaultProps?: ComponentsPropsList['MuiNavigationTabs']
+      styleOverrides?: ComponentsOverrides<
+        Omit<Theme, 'components'>
+      >['MuiNavigationTabs']
+      variants?: ComponentsVariants['MuiNavigationTabs']
+    }
+    MuiNavigationTab?: {
+      defaultProps?: ComponentsPropsList['MuiNavigationTab']
+      styleOverrides?: ComponentsOverrides<
+        Omit<Theme, 'components'>
+      >['MuiNavigationTab']
+      variants?: ComponentsVariants['MuiNavigationTab']
+    }
   }
   interface Palette {
     playground: Palette['primary']

package/src/themes/watermelonLight.ts

@@ -1,3 +1,4 @@
+import { tabsClasses } from '@mui/material'
 import type { WidgetTheme } from '../types/widget.js'
 
 export const watermelonLightTheme: WidgetTheme = {
@@ -46,6 +47,17 @@ export const watermelonLightTheme: WidgetTheme = {
     MuiCard: {
       defaultProps: { variant: 'elevation' },
     },
+    MuiNavigationTabs: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          [`.${tabsClasses.indicator}`]: {
+            backgroundColor: '#ffffff',
+            filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08))`,
+            borderRadius: '16px',
+          },
+        }),
+      },
+    },
     // MuiIconButton: {
     //   styleOverrides: {
     //     root: ({ theme }) => ({

package/src/themes/windows95.ts

@@ -1,3 +1,4 @@
+import { tabsClasses } from '@mui/material'
 import type { WidgetTheme } from '../types/widget.js'
 
 export const windows95Theme: WidgetTheme = {
@@ -84,6 +85,17 @@ export const windows95Theme: WidgetTheme = {
         },
       },
     },
+    MuiNavigationTabs: {
+      styleOverrides: {
+        root: {
+          [`.${tabsClasses.indicator}`]: {
+            backgroundColor: '#dfdfdf',
+            boxShadow:
+              'inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
+          },
+        },
+      },
+    },
     MuiIconButton: {
       defaultProps: {
         // disableRipple: true,

package/src/types/widget.ts

@@ -62,6 +62,8 @@ export type WidgetThemeComponents = Partial<
     | 'MuiCard'
     | 'MuiIconButton'
     | 'MuiInputCard'
+    | 'MuiNavigationTabs'
+    | 'MuiNavigationTab'
     | 'MuiTabs'
   >
 >

package/dist/esm/components/Header/NavigationTabs.d.ts

@@ -1 +0,0 @@
-export declare const NavigationTabs: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Header/NavigationTabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavigationTabs.js","sourceRoot":"","sources":["../../../../src/components/Header/NavigationTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAA;AAC1F,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,uBAAuB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC;QAC3D,KAAK,CAAC,KAAK;QACX,KAAK,CAAC,QAAQ;KACf,CAAC,CAAA;IAEF,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,EAAE,CAAA;IAC3C,MAAM,YAAY,GAAG,CAAC,CAAuB,EAAE,KAAa,EAAE,EAAE;QAC9D,aAAa,CAAC,YAAY,EAAE,EAAE,CAAC,CAAA;QAC/B,aAAa,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;QAC9B,aAAa,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;QAC5B,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC3C,CAAC,CAAA;IAED,OAAO,CACL,KAAC,YAAY,IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,aAAa,EAAE,GAAG,EAAE,YACnE,MAAC,IAAI,IACH,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC/B,QAAQ,EAAE,YAAY,gBACX,MAAM,EACjB,cAAc,EAAC,SAAS,aAExB,KAAC,GAAG,IAAC,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,aAAa,SAAG,EAC9C,KAAC,GAAG,IAAC,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,EAAE,aAAa,SAAG,IAC3C,GACM,CAChB,CAAA;AACH,CAAC,CAAA"}