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

package/components/Skeleton/WidgetSkeleton.tsx

@@ -0,0 +1,136 @@
+import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material';
+import { useMemo } from 'react';
+import { createTheme } from '../../themes/createTheme.js';
+import type { WidgetConfigPartialProps } from '../../types/widget.js';
+import {
+  AppExpandedContainer,
+  FlexContainer,
+  RelativeContainer,
+} from '../AppContainer.js';
+import { Container as HeaderContainer } from '../Header/Header.style.js';
+import {
+  SkeletonAmountContainer,
+  SkeletonCard,
+  SkeletonCardRow,
+  SkeletonHeaderAppBar,
+  SkeletonInputCard,
+  SkeletonPoweredByContainer,
+  SkeletonReviewButton,
+  SkeletonReviewButtonContainer,
+  SkeletonSendToWalletButton,
+  SkeletonWalletMenuButtonContainer,
+} from './WidgetSkeleton.style.js';
+
+const SkeletonIcon = () => (
+  <Skeleton width={24} height={24} variant="rounded" />
+);
+const SkeletonWalletMenuButton = () => (
+  <SkeletonWalletMenuButtonContainer>
+    <Skeleton width={98} height={19} variant="text" />
+    <SkeletonIcon />
+  </SkeletonWalletMenuButtonContainer>
+);
+
+interface SkeletonSelectCardProps {
+  titleWidth?: number;
+  placeholderWidth?: number;
+}
+const SkeletonSelectCard = ({
+  titleWidth = 36,
+  placeholderWidth = 195,
+}: SkeletonSelectCardProps) => (
+  <SkeletonCard elevation={0}>
+    <Skeleton width={titleWidth} height={22} variant="text" />
+    <SkeletonCardRow>
+      <Skeleton width={40} height={40} variant="circular" />
+      <Skeleton width={placeholderWidth} height={27} variant="text" />
+    </SkeletonCardRow>
+  </SkeletonCard>
+);
+
+const SkeletonYouPayCard = () => (
+  <SkeletonInputCard elevation={0}>
+    <Skeleton width={55} height={22} variant="text" />
+    <SkeletonCardRow>
+      <Skeleton width={40} height={40} variant="circular" />
+      <SkeletonAmountContainer>
+        <Skeleton
+          width={48}
+          height={37}
+          variant="text"
+          sx={{ marginTop: -0.75 }}
+        />
+        <Skeleton width={48} height={12} variant="text" />
+      </SkeletonAmountContainer>
+    </SkeletonCardRow>
+  </SkeletonInputCard>
+);
+
+export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
+  const appearance = config?.appearance;
+  const hiddenUI = config?.hiddenUI || [];
+  const requiredUI = config?.requiredUI || [];
+  const configTheme = config?.theme;
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const appearanceMode =
+    !appearance || appearance === 'auto'
+      ? prefersDarkMode
+        ? 'dark'
+        : 'light'
+      : appearance;
+
+  const theme = useMemo(
+    () => createTheme(appearanceMode, configTheme),
+    [appearanceMode, configTheme],
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <AppExpandedContainer>
+        <RelativeContainer>
+          <HeaderContainer>
+            {!hiddenUI.includes('walletMenu') ? (
+              <SkeletonHeaderAppBar>
+                <SkeletonWalletMenuButton />
+              </SkeletonHeaderAppBar>
+            ) : null}
+            <SkeletonHeaderAppBar
+              sx={{ justifyContent: 'space-between', height: 40 }}
+            >
+              <Skeleton width={126} height={34} variant="text" />
+              <SkeletonIcon />
+            </SkeletonHeaderAppBar>
+          </HeaderContainer>
+          <FlexContainer
+            sx={{
+              gap: 2,
+              paddingBottom: hiddenUI.includes('poweredBy') ? 3 : 2,
+            }}
+          >
+            <SkeletonSelectCard />
+            <SkeletonSelectCard />
+            <SkeletonYouPayCard />
+            {requiredUI.includes('toAddress') ? (
+              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />
+            ) : null}
+            <SkeletonReviewButtonContainer>
+              <SkeletonReviewButton variant="contained" fullWidth>
+                &nbsp;
+              </SkeletonReviewButton>
+              {!requiredUI.includes('toAddress') ? (
+                <SkeletonSendToWalletButton variant="text" fullWidth>
+                  &nbsp;
+                </SkeletonSendToWalletButton>
+              ) : null}
+            </SkeletonReviewButtonContainer>
+            {!hiddenUI.includes('poweredBy') ? (
+              <SkeletonPoweredByContainer>
+                <Skeleton width={96} height={18} variant="text" />
+              </SkeletonPoweredByContainer>
+            ) : null}
+          </FlexContainer>
+        </RelativeContainer>
+      </AppExpandedContainer>
+    </ThemeProvider>
+  );
+};

package/components/Tabs/Tabs.style.tsx

@@ -7,19 +7,30 @@ import {
   tabClasses,
   tabsClasses,
 } from '@mui/material';
-import { getCardFieldsetBackgroundColor } from '../../utils/colors.js';
 
 export const Tabs = styled(MuiTabs)(({ theme }) => ({
-  backgroundColor: getCardFieldsetBackgroundColor(theme),
-  borderRadius: theme.shape.borderRadius,
-  padding: theme.spacing(0.5),
   flex: 1,
   [`.${tabsClasses.indicator}`]: {
-    height: '100%',
-    width: '100%',
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: theme.shape.borderRadius - 4,
-    boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
+    top: theme.spacing(0.5),
+    left: theme.spacing(0.5),
+    height: `calc(100% - ${theme.spacing(1)})`,
+    width: `calc(100% - ${theme.spacing(1)})`,
+  },
+  [`.${tabsClasses.fixed}`]: {
+    padding: theme.spacing(0.5),
+  },
+}));
+
+export const CardTabs = styled(Tabs)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'light'
+      ? alpha(theme.palette.common.black, 0.04)
+      : alpha(theme.palette.common.white, 0.08),
+  [`.${tabsClasses.indicator}`]: {
+    backgroundColor:
+      theme.palette.mode === 'light'
+        ? theme.palette.background.paper
+        : alpha(theme.palette.common.black, 0.56),
   },
 }));
 

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.0.0-alpha.37';
+export const version = '3.0.0-alpha.39';

package/hooks/useAddressValidation.ts

@@ -1,4 +1,5 @@
-import { Chain, getNameServiceAddress, type ChainType } from '@lifi/sdk';
+import type { Chain, ChainType } from '@lifi/sdk';
+import { getNameServiceAddress } from '@lifi/sdk';
 import { useMutation } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { getChainTypeFromAddress } from '../utils/chainType.js';

package/hooks/useHeader.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
+import { useHeaderStore } from '../stores/header/useHeaderStore.js';
+
+export function useHeader(title: string, action?: ReactNode) {
+  const { setTitle, setAction } = useHeaderStore((state) => state);
+
+  useEffect(() => {
+    const removeTitle = setTitle(title);
+    const removeAction = action ? setAction(action) : undefined;
+    return () => {
+      removeTitle();
+      if (removeAction) {
+        removeAction();
+      }
+    };
+  }, [setTitle, setAction, action, title]);
+}

package/hooks/useProcessMessage.ts

@@ -173,6 +173,10 @@ export function getProcessMessage(
         title = t(`error.title.transactionFailed`);
         message = t(`error.message.transactionFailed`);
         break;
+      case LiFiErrorCode.WalletChangedDuringExecution:
+        title = t(`error.title.walletMismatch`);
+        message = t(`error.message.walletChangedDuringExecution`);
+        break;
       case LiFiErrorCode.TransactionUnderpriced:
         title = t(`error.title.transactionUnderpriced`);
         message = getDefaultErrorMessage();

package/hooks/useToken.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { useTokens } from './useTokens.js';
 import { useTokenSearch } from './useTokenSearch.js';
+import { useTokens } from './useTokens.js';
 
 export const useToken = (chainId?: number, tokenAddress?: string) => {
   const { tokens, isLoading } = useTokens(chainId);

package/i18n/en.json

@@ -134,7 +134,8 @@
       "transactionCanceled": "Transaction was canceled.",
       "transactionFailed": "Please check the block explorer for more information.",
       "transactionNotSent": "Transaction was not sent.",
-      "unknown": "Please try again or contact support."
+      "unknown": "Please try again or contact support.",
+      "walletChangedDuringExecution": "The wallet address that requested the quote does not match the wallet address attempting to sign the transaction. Please ensure the same wallet address is used throughout the entire transaction execution."
     },
     "title": {
       "allowanceRequired": "Insufficient allowance",
@@ -155,7 +156,8 @@
       "walletAddressInvalid": "Wallet address or domain name is invalid",
       "walletAddressInvalid_chain": "Wallet address or domain name is invalid for selected destination chain {{chainName}}",
       "walletAddressRequired": "Wallet address is required.",
-      "walletChainTypeInvalid": "Wallet address doesn't match the selected destination chain {{chainName}}"
+      "walletChainTypeInvalid": "Wallet address doesn't match the selected destination chain {{chainName}}",
+      "walletMismatch": "Wallet address mismatch"
     }
   },
   "tooltip": {

package/index.ts

@@ -4,6 +4,7 @@ export * from './components/ContractComponent/ItemPrice.js';
 export * from './components/ContractComponent/NFT/NFT.js';
 export * from './components/ContractComponent/NFT/NFTBase.js';
 export * from './components/ContractComponent/NFT/types.js';
+export * from './components/Skeleton/WidgetSkeleton.js';
 export * from './config/version.js';
 export { useAccount } from './hooks/useAccount.js';
 export { useAvailableChains } from './hooks/useAvailableChains.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.0.0-alpha.37",
+  "version": "3.0.0-alpha.39",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./_esm/index.js",
@@ -34,37 +34,49 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@lifi/sdk": "^3.0.0-alpha.58",
-    "@lifi/wallet-management": "^3.0.0-alpha.24",
-    "@mui/icons-material": "^5.15.15",
+    "@lifi/sdk": "^3.0.0-alpha.61",
+    "@lifi/wallet-management": "^3.0.0-alpha.26",
+    "@mui/icons-material": "^5.15.17",
     "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "^5.15.15",
+    "@mui/material": "^5.15.17",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
-    "@solana/wallet-adapter-wallets": "^0.19.32",
-    "@solana/web3.js": "^1.91.4",
-    "@tanstack/react-query": "^5.29.0",
-    "@tanstack/react-virtual": "^3.2.0",
-    "i18next": "^23.10.1",
+    "@solana/web3.js": "^1.91.8",
+    "@tanstack/react-query": "^5.35.5",
+    "@tanstack/react-virtual": "^3.5.0",
+    "i18next": "^23.11.4",
     "microdiff": "^1.4.0",
     "mitt": "^3.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-i18next": "^14.1.0",
-    "react-intersection-observer": "^9.8.1",
-    "react-router-dom": "^6.22.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^14.1.1",
+    "react-intersection-observer": "^9.10.2",
+    "react-router-dom": "^6.23.0",
     "react-timer-hook": "^3.0.7",
     "uuid": "^9.0.1",
-    "viem": "^2.9.13",
-    "wagmi": "^2.5.19",
+    "viem": "^2.10.3",
+    "wagmi": "^2.8.5",
     "zustand": "^4.5.2"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@lifi/sdk": "^3.0.0-alpha.0",
+    "@lifi/wallet-management": "^3.0.0-alpha.0",
+    "@mui/icons-material": "^5.15.0",
+    "@mui/material": "^5.15.0",
+    "@solana/wallet-adapter-base": "^0.9.0",
+    "@solana/wallet-adapter-react": "^0.15.0",
+    "@solana/web3.js": "^1.91.0",
     "@tanstack/react-query": "^5.17.0",
     "@types/react": "^18.2.0",
+    "i18next": "^23.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "wagmi": "^2.2.0"
+    "react-i18next": "^14.1.0",
+    "react-router-dom": "^6.22.0",
+    "wagmi": "^2.2.0",
+    "zustand": "^4.5.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

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

@@ -4,13 +4,15 @@ import { useTranslation } from 'react-i18next';
 import { ListItemText } from '../components/ListItemText.js';
 import { PageContainer } from '../components/PageContainer.js';
 import { SettingsListItemButton } from '../components/SettingsListItemButton.js';
+import { useHeader } from '../hooks/useHeader.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

@@ -1,4 +1,5 @@
 import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
 import { ActiveTransactions } from '../../components/ActiveTransactions/ActiveTransactions.js';
 import { AmountInput } from '../../components/AmountInput/AmountInput.js';
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
@@ -9,6 +10,7 @@ import { Routes } from '../../components/Routes/Routes.js';
 import { SelectChainAndToken } from '../../components/SelectChainAndToken.js';
 import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js';
 import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { useWideVariant } from '../../hooks/useWideVariant.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { HiddenUI } from '../../types/widget.js';
@@ -16,11 +18,20 @@ import { MainMessages } from './MainMessages.js';
 import { ReviewButton } from './ReviewButton.js';
 
 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,17 +1,18 @@
 /* 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 { useTranslation } from 'react-i18next';
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js';
 import { RouteCard } from '../../components/RouteCard/RouteCard.js';
 import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js';
 import { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js';
 import { useAccount } from '../../hooks/useAccount.js';
+import { useHeader } from '../../hooks/useHeader.js';
 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 { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { Stack } from './RoutesPage.style.js';
@@ -19,7 +20,6 @@ import { Stack } from './RoutesPage.style.js';
 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,10 +1,12 @@
 import type { ExtendedChain } from '@lifi/sdk';
 import { Avatar, List, ListItemAvatar } from '@mui/material';
+import { useTranslation } from 'react-i18next';
 import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js';
 import { ListItemButton } from '../../components/ListItemButton.js';
 import { ListItemText } from '../../components/ListItemText.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { useTokenSelect } from '../../components/TokenList/useTokenSelect.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import type { SelectChainPageProps } from './types.js';
 
@@ -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 { useHeader } from '../hooks/useHeader.js';
 import { useTools } from '../hooks/useTools.js';
-import { useHeaderStoreContext } from '../stores/header/useHeaderStore.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,13 +1,16 @@
 import { Box } from '@mui/material';
 import type { FC } from 'react';
 import { useLayoutEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { TokenList } from '../../components/TokenList/TokenList.js';
 import { useContentHeight } from '../../hooks/useContentHeight.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js';
 import { useSwapOnly } from '../../hooks/useSwapOnly.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import type { FormTypeProps } from '../../stores/form/types.js';
 import { SearchTokenInput } from './SearchTokenInput.js';
 
@@ -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

@@ -18,6 +18,7 @@ import type { Connector } from 'wagmi';
 import { useConnect, useAccount as useWagmiAccount } from 'wagmi';
 import { Dialog } from '../../components/Dialog.js';
 import { PageContainer } from '../../components/PageContainer.js';
+import { useHeader } from '../../hooks/useHeader.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { isItemAllowed } from '../../utils/item.js';
 import { EVMListItemButton } from './EVMListItemButton.js';
@@ -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

@@ -15,6 +15,7 @@ import { ListItemButton } from '../../components/ListItem//ListItemButton.js';
 import { ListItem } from '../../components/ListItem/ListItem.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';
@@ -46,6 +47,8 @@ export const BookmarksPage = () => {
   const { setFieldValue } = useFieldActions();
   const { setSendToWallet } = useSendToWalletActions();
 
+  useHeader(t(`header.bookmarkedWallets`));
+
   const handleAddBookmark = () => {
     bookmarkAddressSheetRef.current?.open();
   };