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

package/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -10,12 +10,12 @@ import {
   List,
   useTheme,
 } from '@mui/material';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActiveTransactionItem } from '../../components/ActiveTransactions/ActiveTransactionItem.js';
 import { Dialog } from '../../components/Dialog.js';
 import { PageContainer } from '../../components/PageContainer.js';
-import { useHeaderStoreContext } from '../../stores/header/useHeaderStore.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js';
 import { useExecutingRoutesIds } from '../../stores/routes/useExecutingRoutesIds.js';
 import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty.js';
@@ -38,20 +38,21 @@ export const ActiveTransactionsPage = () => {
   const { t } = useTranslation();
   const executingRoutes = useExecutingRoutesIds();
   const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
-  const headerStoreContext = useHeaderStoreContext();
   const [open, setOpen] = useState(false);
 
   const toggleDialog = useCallback(() => {
     setOpen((open) => !open);
   }, []);
 
-  useEffect(() => {
-    if (executingRoutes.length) {
-      return headerStoreContext
-        .getState()
-        .setAction(<DeleteIconButton onClick={toggleDialog} />);
-    }
-  }, [executingRoutes.length, headerStoreContext, toggleDialog]);
+  const headerAction = useMemo(
+    () =>
+      executingRoutes.length ? (
+        <DeleteIconButton onClick={toggleDialog} />
+      ) : undefined,
+    [executingRoutes.length, toggleDialog],
+  );
+
+  useHeader(t(`header.activeTransactions`), headerAction);
 
   if (!executingRoutes.length) {
     return <ActiveTransactionsEmpty />;

package/pages/LanguagesPage.tsx

@@ -1,16 +1,18 @@
 import { Check } from '@mui/icons-material';
 import { List } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { useHeader } from '../hooks/useHeader.js';
 import { ListItemText } from '../components/ListItemText.js';
 import { PageContainer } from '../components/PageContainer.js';
 import { SettingsListItemButton } from '../components/SettingsListItemButton.js';
 import { useLanguages } from '../hooks/useLanguages.js';
 
 export const LanguagesPage: React.FC = () => {
+  const { t } = useTranslation();
   const { selectedLanguageCode, availableLanguages, setLanguageWithCode } =
     useLanguages();
 
-  const { t } = useTranslation();
+  useHeader(t(`language.title`));
 
   if (availableLanguages.length < 1) {
     return null;

package/pages/MainPage/MainPage.tsx

@@ -11,16 +11,27 @@ import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletBu
 import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js';
 import { useWideVariant } from '../../hooks/useWideVariant.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { HiddenUI } from '../../types/widget.js';
 import { MainMessages } from './MainMessages.js';
 import { ReviewButton } from './ReviewButton.js';
+import { useTranslation } from 'react-i18next';
 
 export const MainPage: React.FC = () => {
+  const { t } = useTranslation();
   const wideVariant = useWideVariant();
   const { subvariant, contractComponent, hiddenUI } = useWidgetConfig();
   const custom = subvariant === 'custom';
   const showPoweredBy = !hiddenUI?.includes(HiddenUI.PoweredBy);
 
+  const title =
+    subvariant === 'custom'
+      ? t(`header.checkout`)
+      : subvariant === 'refuel'
+        ? t(`header.gas`)
+        : t(`header.exchange`);
+  useHeader(title);
+
   return (
     <PageContainer>
       <ActiveTransactions sx={{ marginBottom: 2 }} />

package/pages/RoutesPage/RoutesPage.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 import type { Route } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
-import { useEffect } from 'react';
+import { useMemo } from 'react';
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js';
 import { RouteCard } from '../../components/RouteCard/RouteCard.js';
 import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js';
@@ -11,15 +11,15 @@ import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useRoutes } from '../../hooks/useRoutes.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { useHeaderStoreContext } from '../../stores/header/useHeaderStore.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { Stack } from './RoutesPage.style.js';
+import { useTranslation } from 'react-i18next';
 
 export const RoutesPage: React.FC<BoxProps> = () => {
   const { navigate } = useNavigateBack();
   const setExecutableRoute = useSetExecutableRoute();
-  const headerStoreContext = useHeaderStoreContext();
   const {
     routes,
     isLoading,
@@ -33,6 +33,24 @@ export const RoutesPage: React.FC<BoxProps> = () => {
   const [toAddress] = useFieldValues('toAddress');
   const { requiredToAddress } = useToAddressRequirements();
 
+  const { t } = useTranslation();
+
+  const headerAction = useMemo(
+    () => (
+      <ProgressToNextUpdate
+        updatedAt={dataUpdatedAt || new Date().getTime()}
+        timeToUpdate={refetchTime}
+        isLoading={isFetching}
+        onClick={() => refetch()}
+        sx={{ marginRight: -1 }}
+        size="medium"
+      />
+    ),
+    [dataUpdatedAt, isFetching, refetch, refetchTime],
+  );
+
+  useHeader(t(`header.youGet`), headerAction);
+
   const handleRouteClick = (route: Route) => {
     setExecutableRoute(route);
     navigate(navigationRoutes.transactionExecution, {
@@ -40,21 +58,6 @@ export const RoutesPage: React.FC<BoxProps> = () => {
     });
   };
 
-  useEffect(() => {
-    return headerStoreContext
-      .getState()
-      .setAction(
-        <ProgressToNextUpdate
-          updatedAt={dataUpdatedAt || new Date().getTime()}
-          timeToUpdate={refetchTime}
-          isLoading={isFetching}
-          onClick={() => refetch()}
-          sx={{ marginRight: -1 }}
-          size="medium"
-        />,
-      );
-  }, [dataUpdatedAt, headerStoreContext, isFetching, refetch, refetchTime]);
-
   const routeNotFound = !routes?.length && !isLoading && !isFetching;
 
   const toAddressUnsatisfied = routes?.[0] && requiredToAddress && !toAddress;

package/pages/SelectChainPage/SelectChainPage.tsx

@@ -1,5 +1,6 @@
 import type { ExtendedChain } from '@lifi/sdk';
 import { Avatar, List, ListItemAvatar } from '@mui/material';
+import { useHeader } from '../../hooks/useHeader.js';
 import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js';
 import { ListItemButton } from '../../components/ListItemButton.js';
 import { ListItemText } from '../../components/ListItemText.js';
@@ -7,6 +8,7 @@ import { PageContainer } from '../../components/PageContainer.js';
 import { useTokenSelect } from '../../components/TokenList/useTokenSelect.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import type { SelectChainPageProps } from './types.js';
+import { useTranslation } from 'react-i18next';
 
 export const SelectChainPage: React.FC<SelectChainPageProps> = ({
   formType,
@@ -16,6 +18,9 @@ export const SelectChainPage: React.FC<SelectChainPageProps> = ({
   const { chains, setCurrentChain } = useChainSelect(formType);
   const selectToken = useTokenSelect(formType, navigateBack);
 
+  const { t } = useTranslation();
+  useHeader(t('header.selectChain'));
+
   const handleClick = async (chain: ExtendedChain) => {
     if (selectNativeToken) {
       selectToken(chain.nativeToken.address, chain.id);

package/pages/SelectEnabledToolsPage.tsx

@@ -13,14 +13,14 @@ import {
   useTheme,
 } from '@mui/material';
 import type { MouseEventHandler } from 'react';
-import { useEffect } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 import { ListItemText } from '../components/ListItemText.js';
 import { PageContainer } from '../components/PageContainer.js';
 import { SettingsListItemButton } from '../components/SettingsListItemButton.js';
 import { useTools } from '../hooks/useTools.js';
-import { useHeaderStoreContext } from '../stores/header/useHeaderStore.js';
+import { useHeader } from '../hooks/useHeader.js';
 import { useSettingsStore } from '../stores/settings/useSettingsStore.js';
 
 interface SelectAllCheckboxProps {
@@ -74,24 +74,26 @@ export const SelectEnabledToolsPage: React.FC<{
       ],
       shallow,
     );
-  const headerStoreContext = useHeaderStoreContext();
+
+  const { t } = useTranslation();
+
+  const headerAction = useMemo(
+    () => (
+      <SelectAllCheckbox
+        allCheckboxesSelected={!disabledTools.length}
+        anyCheckboxesSelected={Boolean(disabledTools.length)}
+        onClick={() => toggleTools(type)}
+      />
+    ),
+    [disabledTools.length, toggleTools, type],
+  );
+
+  useHeader(t(`settings.enabled${type}`), headerAction);
 
   const handleClick = (key: string) => {
     setToolValue(type, key, !enabledTools[key]);
   };
 
-  useEffect(() => {
-    return headerStoreContext
-      .getState()
-      .setAction(
-        <SelectAllCheckbox
-          allCheckboxesSelected={!disabledTools.length}
-          anyCheckboxesSelected={Boolean(disabledTools.length)}
-          onClick={() => toggleTools(type)}
-        />,
-      );
-  }, [disabledTools.length, headerStoreContext, toggleTools, type]);
-
   return (
     <PageContainer disableGutters>
       <List

package/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -1,6 +1,8 @@
 import { Box } from '@mui/material';
 import type { FC } from 'react';
 import { useLayoutEffect, useRef, useState } from 'react';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { TokenList } from '../../components/TokenList/TokenList.js';
@@ -10,6 +12,7 @@ import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.
 import { useSwapOnly } from '../../hooks/useSwapOnly.js';
 import type { FormTypeProps } from '../../stores/form/types.js';
 import { SearchTokenInput } from './SearchTokenInput.js';
+import { useTranslation } from 'react-i18next';
 
 const minTokenListHeight = 360;
 
@@ -21,6 +24,17 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   const [tokenListHeight, setTokenListHeight] = useState(0);
   const swapOnly = useSwapOnly();
 
+  const { subvariant } = useWidgetConfig();
+  const { t } = useTranslation();
+  const title =
+    formType === 'from'
+      ? subvariant === 'custom'
+        ? t(`header.payWith`)
+        : t(`header.from`)
+      : t(`header.to`);
+
+  useHeader(title);
+
   useLayoutEffect(() => {
     setTokenListHeight(
       Math.max(

package/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -23,6 +23,7 @@ import { isItemAllowed } from '../../utils/item.js';
 import { EVMListItemButton } from './EVMListItemButton.js';
 import { SVMListItemButton } from './SVMListItemButton.js';
 import { walletComparator } from './utils.js';
+import { useHeader } from '../../hooks/useHeader.js';
 
 export const SelectWalletPage = () => {
   const { t } = useTranslation();
@@ -35,6 +36,8 @@ export const SelectWalletPage = () => {
   }>({ show: false });
   const { wallets: solanaWallets } = useWallet();
 
+  useHeader(t(`header.selectWallet`));
+
   const isDesktopView = useMediaQuery((theme: Theme) =>
     theme.breakpoints.up('sm'),
   );

package/pages/SendToWallet/BookmarksPage.tsx

@@ -21,6 +21,7 @@ import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js
 import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { defaultChainIdsByType } from '../../utils/chainType.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { shortenAddress } from '../../utils/wallet.js';
@@ -46,6 +47,8 @@ export const BookmarksPage = () => {
   const { setFieldValue } = useFieldActions();
   const { setSendToWallet } = useSendToWalletActions();
 
+  useHeader(t(`header.bookmarkedWallets`));
+
   const handleAddBookmark = () => {
     bookmarkAddressSheetRef.current?.open();
   };

package/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -19,6 +19,7 @@ import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.j
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { shortenAddress } from '../../utils/wallet.js';
 import { EmptyListIndicator } from './EmptyListIndicator.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

@@ -22,6 +22,7 @@ import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js
 import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { defaultChainIdsByType } from '../../utils/chainType.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { shortenAddress } from '../../utils/wallet.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

@@ -16,6 +16,7 @@ import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.j
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import type { ToAddress } from '../../types/widget.js';
 import { defaultChainIdsByType } from '../../utils/chainType.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.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

@@ -19,6 +19,7 @@ import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js
 import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { BookmarkAddressSheet } from './BookmarkAddressSheet.js';
 import { ConfirmAddressSheet } from './ConfirmAddressSheet.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

@@ -8,8 +8,13 @@ import { SettingsList } from './SettingsCard/SettingCard.style.js';
 import { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js';
 import { SlippageSettings } from './SlippageSettings/SlippageSettings.js';
 import { ThemeSettings } from './ThemeSettings.js';
+import { useHeader } from '../../hooks/useHeader.js';
+import { useTranslation } from 'react-i18next';
 
 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

@@ -21,6 +21,7 @@ import { formatTokenAmount } from '../../utils/format.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { ContactSupportButton } from './ContactSupportButton.js';
 import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js';
+import { useHeader } from '../../hooks/useHeader.js';
 
 export const TransactionDetailsPage: React.FC = () => {
   const { t, i18n } = useTranslation();
@@ -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,18 +2,23 @@ import type { FullStatusData } from '@lifi/sdk';
 import { List } from '@mui/material';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useRef } from 'react';
+import { useHeader } from '../../hooks/useHeader.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { useTransactionHistory } from '../../hooks/useTransactionHistory.js';
 import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js';
 import { TransactionHistoryItem } from './TransactionHistoryItem.js';
 import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js';
 import { minTransactionListHeight } from './constants.js';
+import { useTranslation } from 'react-i18next';
 
 export const TransactionHistoryPage: React.FC = () => {
   // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue
   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>