@lifi/widget 3.0.0-alpha.37 → 3.0.0-alpha.39

package/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -15,6 +15,7 @@ import { Menu } from '../../components/Menu.js';
 import type { Account } from '../../hooks/useAccount.js';
 import { useAccount } from '../../hooks/useAccount.js';
 import { useChains } from '../../hooks/useChains.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
@@ -42,6 +43,7 @@ export const ConnectedWalletsPage = () => {
   const moreMenuId = useId();
   const open = Boolean(moreMenuAnchorEl);
 
+  useHeader(t('sendToWallet.connectedWallets'));
   const handleWalletSelected = (account: Account) => {
     setFieldValue('toAddress', account.address!, {
       isTouched: true,

package/pages/SendToWallet/RecentWalletsPage.tsx

@@ -16,6 +16,7 @@ import { ListItem } from '../../components/ListItem/ListItem.js';
 import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
 import { Menu } from '../../components/Menu.js';
 import { useChains } from '../../hooks/useChains.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import type { Bookmark } from '../../stores/bookmarks/types.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
@@ -53,6 +54,8 @@ export const RecentWalletsPage = () => {
   const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>();
   const open = Boolean(moreMenuAnchorEl);
 
+  useHeader(t(`header.recentWallets`));
+
   const handleRecentSelected = (recentWallet: Bookmark) => {
     addRecentWallet(recentWallet);
     setFieldValue('toAddress', recentWallet.address, {

package/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -12,6 +12,7 @@ import { ListItem } from '../../components/ListItem/ListItem.js';
 import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
 import { Menu } from '../../components/Menu.js';
 import { useChains } from '../../hooks/useChains.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
@@ -39,6 +40,8 @@ export const SendToConfiguredWalletPage = () => {
   const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>();
   const open = Boolean(moreMenuAnchorEl);
 
+  useHeader(t(`header.sendToWallet`));
+
   const handleCuratedSelected = (toAddress: ToAddress) => {
     setSelectedBookmark(toAddress);
     setFieldValue('toAddress', toAddress.address, { isTouched: true });

package/pages/SendToWallet/SendToWalletPage.tsx

@@ -13,6 +13,7 @@ import {
   useAddressValidation,
 } from '../../hooks/useAddressValidation.js';
 import { useChain } from '../../hooks/useChain.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import type { Bookmark } from '../../stores/bookmarks/types.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
@@ -59,6 +60,8 @@ export const SendToWalletPage = () => {
   const [isDoneButtonLoading, setIsDoneButtonLoading] = useState(false);
   const [isBookmarkButtonLoading, setIsBookmarkButtonLoading] = useState(false);
 
+  useHeader(t(`header.sendToWallet`));
+
   const handleInputChange = (e: ChangeEvent) => {
     if (errorMessage) {
       setErrorMessage('');

package/pages/SettingsPage/GasPriceSettings.tsx

@@ -1,6 +1,6 @@
 import { EvStation } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
-import { Tab, Tabs } from '../../components/Tabs/Tabs.style.js';
+import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js';
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js';
 import { useSettings } from '../../stores/settings/useSettings.js';
 import { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
@@ -27,7 +27,7 @@ export const GasPriceSettings: React.FC = () => {
       icon={<EvStation />}
       title={t(`settings.gasPrice.title`)}
     >
-      <Tabs
+      <CardTabs
         value={gasPrice}
         aria-label="tabs"
         indicatorColor="primary"
@@ -41,7 +41,7 @@ export const GasPriceSettings: React.FC = () => {
           disableRipple
         />
         <Tab label={t(`settings.gasPrice.fast`)} value="fast" disableRipple />
-      </Tabs>
+      </CardTabs>
     </SettingCardExpandable>
   );
 };

package/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -1,7 +1,7 @@
 import type { Order } from '@lifi/sdk';
 import { Route } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
-import { Tab, Tabs } from '../../components/Tabs/Tabs.style.js';
+import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js';
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js';
 import { useSettings } from '../../stores/settings/useSettings.js';
 import { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
@@ -34,7 +34,7 @@ export const RoutePrioritySettings: React.FC = () => {
       icon={<Route />}
       title={t(`settings.routePriority`)}
     >
-      <Tabs
+      <CardTabs
         value={currentRoutePriority}
         aria-label="tabs"
         indicatorColor="primary"
@@ -52,7 +52,7 @@ export const RoutePrioritySettings: React.FC = () => {
             />
           );
         })}
-      </Tabs>
+      </CardTabs>
     </SettingCardExpandable>
   );
 };

package/pages/SettingsPage/SettingsPage.tsx

@@ -1,4 +1,6 @@
+import { useTranslation } from 'react-i18next';
 import { PageContainer } from '../../components/PageContainer.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js';
 import { GasPriceSettings } from './GasPriceSettings.js';
 import { LanguageSetting } from './LanguageSetting.js';
@@ -10,6 +12,9 @@ import { SlippageSettings } from './SlippageSettings/SlippageSettings.js';
 import { ThemeSettings } from './ThemeSettings.js';
 
 export const SettingsPage = () => {
+  const { t } = useTranslation();
+  useHeader(t(`header.settings`));
+
   return (
     <PageContainer bottomGutters>
       <SettingsList>

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

@@ -7,23 +7,25 @@ import {
   inputBaseClasses,
   styled,
 } from '@mui/material';
-import { getCardFieldsetBackgroundColor } from '../../../utils/colors.js';
 
 export const SettingsFieldSet = styled(Box)(({ theme }) => ({
   display: 'flex',
-  backgroundColor: getCardFieldsetBackgroundColor(theme),
-  borderRadius: Math.max(
-    theme.shape.borderRadius,
-    theme.shape.borderRadiusSecondary,
-  ),
+  backgroundColor:
+    theme.palette.mode === 'light'
+      ? alpha(theme.palette.common.black, 0.04)
+      : alpha(theme.palette.common.white, 0.08),
+  borderRadius: theme.shape.borderRadius,
   padding: theme.spacing(0.5),
   gap: theme.spacing(0.5),
   height: '3.5rem',
 }));
 
 const slippageControlSelected = (theme: Theme) => ({
-  backgroundColor: theme.palette.background.paper,
-  borderRadius: theme.shape.borderRadiusSecondary,
+  backgroundColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.background.paper
+      : alpha(theme.palette.common.black, 0.56),
+  borderRadius: theme.shape.borderRadius - 4,
   boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
 });
 

package/pages/SettingsPage/ThemeSettings.tsx

@@ -2,7 +2,7 @@ import { BrightnessAuto, LightMode, Nightlight } from '@mui/icons-material';
 import { Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CardValue } from '../../components/Card/CardButton.style.js';
-import { Tab, Tabs } from '../../components/Tabs/Tabs.style.js';
+import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useAppearance } from '../../stores/settings/useAppearance.js';
 import type { Appearance } from '../../types/widget.js';
@@ -58,7 +58,7 @@ export const ThemeSettings: React.FC = () => {
       icon={<ThemeIcon />}
       title={t('settings.theme')}
     >
-      <Tabs
+      <CardTabs
         value={appearance}
         aria-label="tabs"
         indicatorColor="primary"
@@ -77,7 +77,7 @@ export const ThemeSettings: React.FC = () => {
             />
           );
         })}
-      </Tabs>
+      </CardTabs>
     </SettingCardExpandable>
   );
 };

package/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -10,6 +10,7 @@ import { ContractComponent } from '../../components/ContractComponent/ContractCo
 import { Insurance } from '../../components/Insurance/Insurance.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { getStepList } from '../../components/Step/StepList.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';
@@ -36,6 +37,12 @@ export const TransactionDetailsPage: React.FC = () => {
     state?.transactionHash,
   );
 
+  const title =
+    subvariant === 'custom'
+      ? t(`header.purchaseDetails`)
+      : t(`header.transactionDetails`);
+  useHeader(title);
+
   const routeExecution = useMemo(() => {
     if (storedRouteExecution) {
       return storedRouteExecution;

package/pages/TransactionHistoryPage/TransactionHistoryPage.tsx

@@ -2,7 +2,9 @@ import type { FullStatusData } from '@lifi/sdk';
 import { List } from '@mui/material';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { PageContainer } from '../../components/PageContainer.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { useTransactionHistory } from '../../hooks/useTransactionHistory.js';
 import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js';
 import { TransactionHistoryItem } from './TransactionHistoryItem.js';
@@ -14,6 +16,9 @@ export const TransactionHistoryPage: React.FC = () => {
   const parentRef = useRef<HTMLDivElement | null>(null);
   const { data: transactions, isLoading } = useTransactionHistory();
 
+  const { t } = useTranslation();
+  useHeader(t(`header.transactionHistory`));
+
   const { getVirtualItems, getTotalSize } = useVirtualizer({
     count: transactions.length,
     overscan: 10,

package/pages/TransactionPage/StatusBottomSheet.style.tsx

@@ -52,3 +52,11 @@ export const IconCircle = styled(Box, {
     },
   };
 });
+
+export const MessageSkeletonContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  height: 64,
+  gap: theme.spacing(0.5),
+  paddingTop: theme.spacing(1),
+}));

package/pages/TransactionPage/StatusBottomSheet.tsx

@@ -4,7 +4,7 @@ import {
   InfoRounded,
   WarningRounded,
 } from '@mui/icons-material';
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Button, Skeleton, Typography } from '@mui/material';
 import { useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,12 +27,23 @@ import { hasEnumFlag } from '../../utils/enum.js';
 import { formatTokenAmount } from '../../utils/format.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { shortenAddress } from '../../utils/wallet.js';
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
+import {
+  CenterContainer,
+  IconCircle,
+  MessageSkeletonContainer,
+} from './StatusBottomSheet.style.js';
 
 interface StatusBottomSheetContentProps extends RouteExecution {
   onClose(): void;
 }
 
+const MessageSkeleton = () => (
+  <MessageSkeletonContainer>
+    <Skeleton height={24} variant="text" width="92%" />
+    <Skeleton height={24} variant="text" width="56%" />
+  </MessageSkeletonContainer>
+);
+
 export const StatusBottomSheet: React.FC<RouteExecution> = ({
   status,
   route,
@@ -270,7 +281,11 @@ export const StatusBottomSheetContent: React.FC<
         </CenterContainer>
       )}
       {!showContractComponent ? (
-        <Typography py={1}>{primaryMessage}</Typography>
+        primaryMessage ? (
+          <Typography py={1}>{primaryMessage}</Typography>
+        ) : (
+          <MessageSkeleton />
+        )
       ) : null}
       {secondaryMessage ? (
         <Typography py={1}>{secondaryMessage}</Typography>

package/pages/TransactionPage/TransactionPage.tsx

@@ -10,12 +10,12 @@ import { GasMessage } from '../../components/GasMessage/GasMessage.js';
 import { Insurance } from '../../components/Insurance/Insurance.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { getStepList } from '../../components/Step/StepList.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useRouteExecution } from '../../hooks/useRouteExecution.js';
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useHeaderStoreContext } from '../../stores/header/useHeaderStore.js';
 import { RouteExecutionStatus } from '../../stores/routes/types.js';
 import { WidgetEvent } from '../../types/events.js';
 import { formatTokenAmount } from '../../utils/format.js';
@@ -40,7 +40,6 @@ export const TransactionPage: React.FC = () => {
   const { subvariant, insurance, contractSecondaryComponent } =
     useWidgetConfig();
   const { state }: any = useLocation();
-  const headerStoreContext = useHeaderStoreContext();
   const stateRouteId = state?.routeId;
   const [routeId, setRouteId] = useState<string>(stateRouteId);
 
@@ -60,19 +59,26 @@ export const TransactionPage: React.FC = () => {
       onAcceptExchangeRateUpdate,
     });
 
-  useEffect(() => {
-    if (route && subvariant !== 'custom') {
-      const transactionType =
-        route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
-      return headerStoreContext
-        .getState()
-        .setTitle(
-          status === RouteExecutionStatus.Idle
-            ? t(`button.review${transactionType}`)
-            : t(`header.${transactionType.toLowerCase() as 'swap' | 'bridge'}`),
-        );
+  const getHeaderTitle = () => {
+    if (subvariant === 'custom') {
+      return t(`header.purchase`);
+    } else {
+      if (route) {
+        const transactionType =
+          route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
+
+        return status === RouteExecutionStatus.Idle
+          ? t(`button.review${transactionType}`)
+          : t(`header.${transactionType.toLowerCase() as 'swap' | 'bridge'}`);
+      }
     }
-  }, [headerStoreContext, route, status, subvariant, t]);
+
+    return t(`header.exchange`);
+  };
+
+  const title = getHeaderTitle();
+
+  useHeader(title);
 
   useEffect(() => {
     if (status === RouteExecutionStatus.Idle) {

package/stores/chains/createChainOrderStore.ts

@@ -4,7 +4,8 @@ import { createWithEqualityFn } from 'zustand/traditional';
 import type { PersistStoreProps } from '../types.js';
 import type { ChainOrderState } from './types.js';
 
-export const maxChainToOrder = 10;
+export const maxChainsToOrder = 9;
+export const maxChainsToShow = 10;
 const defaultChainState = {
   from: [],
   to: [],
@@ -24,7 +25,7 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
             const chainsToAdd = chainIds.filter(
               (chainId) => !chainOrder.includes(chainId),
             );
-            if (chainOrder.length === maxChainToOrder || !chainsToAdd.length) {
+            if (chainOrder.length === maxChainsToOrder || !chainsToAdd.length) {
               return {
                 availableChains: {
                   ...state.availableChains,
@@ -36,7 +37,7 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
                 },
               };
             }
-            const chainsToAddLength = maxChainToOrder - chainOrder.length;
+            const chainsToAddLength = maxChainsToOrder - chainOrder.length;
             for (let index = 0; index < chainsToAddLength; index++) {
               chainOrder.push(chainsToAdd[index]);
             }
@@ -64,7 +65,7 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
           set((state: ChainOrderState) => {
             const chainOrder = state.chainOrder[type].slice();
             chainOrder.unshift(chainId);
-            if (chainOrder.length > maxChainToOrder) {
+            if (chainOrder.length > maxChainsToOrder) {
               chainOrder.pop();
             }
             return {
@@ -78,7 +79,7 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
       }),
       {
         name: `${namePrefix || 'li.fi'}-widget-chains-order`,
-        version: 1,
+        version: 2,
         partialize: (state) => ({ chainOrder: state.chainOrder }),
       },
     ) as StateCreator<ChainOrderState, [], [], ChainOrderState>,

package/stores/header/useHeaderStore.tsx

@@ -34,7 +34,6 @@ export function useHeaderStore<T>(selector: (state: HeaderState) => T): T {
   const useStore = useHeaderStoreContext();
   return useStore(selector);
 }
-
 export const createHeaderStore = ({ namePrefix }: PersistStoreProps) =>
   createWithEqualityFn<HeaderState>(
     (set, get) => ({

package/themes/azureLight.ts

@@ -1,3 +1,4 @@
+import { tabsClasses } from '@mui/material';
 import type { WidgetTheme } from '../types/widget.js';
 
 export const azureLightTheme: WidgetTheme = {
@@ -42,5 +43,16 @@ export const azureLightTheme: WidgetTheme = {
     MuiCard: {
       defaultProps: { variant: 'filled' },
     },
+    // Used only for 'split' subvariant and can be safely removed if not used
+    MuiTabs: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#f8f8fa',
+          [`.${tabsClasses.indicator}`]: {
+            backgroundColor: '#ffffff',
+          },
+        },
+      },
+    },
   },
 };

package/themes/createTheme.ts

@@ -15,12 +15,13 @@ import {
   getContrastRatio,
   keyframes,
   lighten,
+  tabsClasses,
   touchRippleClasses,
 } from '@mui/material';
 import type { WidgetTheme } from '../types/widget.js';
+import { palette, paletteDark, paletteLight } from './palettes.js';
 import type {} from './types.js';
 import { getStyleOverrides } from './utils.js';
-import { palette, paletteLight, paletteDark } from './palettes.js';
 
 const shape: Shape = {
   borderRadius: 12,
@@ -365,6 +366,40 @@ export const createTheme = (
           }),
         },
       },
+      MuiTabs: {
+        ...widgetTheme.components?.MuiTabs,
+        styleOverrides: {
+          ...widgetTheme.components?.MuiTabs?.styleOverrides,
+          root: ({ theme, ownerState }) => {
+            const rootStyleOverrides = getStyleOverrides(
+              'MuiTabs',
+              'root',
+              widgetTheme,
+              ownerState,
+            );
+            return {
+              backgroundColor:
+                theme.palette.mode === 'light'
+                  ? alpha(theme.palette.common.black, 0.04)
+                  : alpha(theme.palette.common.white, 0.08),
+              borderRadius: theme.shape.borderRadius,
+              ...rootStyleOverrides,
+              [`.${tabsClasses.indicator}`]: {
+                backgroundColor:
+                  theme.palette.mode === 'light'
+                    ? theme.palette.background.paper
+                    : alpha(theme.palette.common.black, 0.56),
+                borderRadius:
+                  theme.shape.borderRadius > 0
+                    ? theme.shape.borderRadius - 4
+                    : theme.shape.borderRadius,
+                boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
+                ...rootStyleOverrides?.[`.${tabsClasses.indicator}`],
+              },
+            };
+          },
+        },
+      },
     },
   });
 };

package/themes/watermelonLight.ts

@@ -1,6 +1,4 @@
 import type { WidgetTheme } from '../types/widget.js';
-import { alpha } from '@mui/material';
-import { palette } from '@lifi/widget';
 
 export const watermelonLightTheme: WidgetTheme = {
   palette: {

package/types/widget.ts

@@ -51,6 +51,7 @@ export type WidgetThemeComponents = Pick<
   | 'MuiCard'
   | 'MuiIconButton'
   | 'MuiInputCard'
+  | 'MuiTabs'
 >;
 export type WidgetTheme = {
   palette?: Pick<

package/utils/colors.ts

@@ -16,11 +16,6 @@ export const getInfoBackgroundColor = (theme: Theme) =>
     ? alpha(theme.palette.info.main, 0.12)
     : alpha(theme.palette.info.main, 0.16);
 
-export const getCardFieldsetBackgroundColor = (theme: Theme) =>
-  theme.palette.mode === 'light'
-    ? alpha(theme.palette.common.black, 0.04)
-    : theme.palette.grey[800];
-
 /**
  * https://github.com/mui/material-ui/blob/next/packages/mui-system/src/colorManipulator/colorManipulator.js
  * Blend a transparent overlay color with a background color, resulting in a single