@lifi/widget 3.4.0-beta.4 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.4.0-beta.4",
+  "version": "3.4.0",
   "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,27 +34,27 @@
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@lifi/sdk": "^3.1.3",
-    "@lifi/wallet-management": "^3.0.7-beta.2",
-    "@mui/icons-material": "^5.16.6",
+    "@lifi/sdk": "^3.1.5",
+    "@lifi/wallet-management": "^3.1.0",
+    "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
-    "@mui/material": "^5.16.6",
+    "@mui/material": "^5.16.7",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/web3.js": "^1.95.2",
-    "@tanstack/react-query": "^5.51.21",
-    "@tanstack/react-virtual": "^3.8.4",
-    "i18next": "^23.12.2",
+    "@tanstack/react-query": "^5.51.23",
+    "@tanstack/react-virtual": "^3.9.0",
+    "i18next": "^23.12.3",
     "microdiff": "^1.4.0",
     "mitt": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-i18next": "^15.0.0",
+    "react-i18next": "^15.0.1",
     "react-intersection-observer": "^9.13.0",
     "react-router-dom": "^6.26.0",
     "uuid": "^10.0.0",
-    "viem": "^2.18.8",
-    "wagmi": "^2.12.2",
+    "viem": "^2.19.4",
+    "wagmi": "^2.12.5",
     "zustand": "^4.5.4"
   },
   "peerDependencies": {

package/pages/MainPage/MainPage.tsx

@@ -20,13 +20,14 @@ import { ReviewButton } from './ReviewButton.js';
 export const MainPage: React.FC = () => {
   const { t } = useTranslation();
   const wideVariant = useWideVariant();
-  const { subvariant, contractComponent, hiddenUI } = useWidgetConfig();
+  const { subvariant, subvariantOptions, contractComponent, hiddenUI } =
+    useWidgetConfig();
   const custom = subvariant === 'custom';
   const showPoweredBy = !hiddenUI?.includes(HiddenUI.PoweredBy);
 
   const title =
     subvariant === 'custom'
-      ? t(`header.checkout`)
+      ? t(`header.${subvariantOptions?.custom ?? 'checkout'}`)
       : subvariant === 'refuel'
         ? t(`header.gas`)
         : t(`header.exchange`);

package/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -1,11 +1,10 @@
 import { Box } from '@mui/material';
 import type { FC } from 'react';
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useRef } 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';
@@ -13,15 +12,18 @@ 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';
-
-const minTokenListHeight = 360;
+import { useTokenListHeight } from './useTokenListHeight.js';
 
 export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   useScrollableOverflowHidden();
   const { navigateBack } = useNavigateBack();
   const headerRef = useRef<HTMLElement>(null);
-  const contentHeight = useContentHeight();
-  const [tokenListHeight, setTokenListHeight] = useState(0);
+  const listParentRef = useRef<HTMLUListElement | null>(null);
+  const { tokenListHeight, minListHeight } = useTokenListHeight({
+    listParentRef,
+    headerRef,
+  });
+
   const swapOnly = useSwapOnly();
 
   const { subvariant } = useWidgetConfig();
@@ -35,15 +37,6 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
 
   useHeader(title);
 
-  useLayoutEffect(() => {
-    setTokenListHeight(
-      Math.max(
-        contentHeight - (headerRef.current?.offsetHeight ?? 0),
-        minTokenListHeight,
-      ),
-    );
-  }, [contentHeight]);
-
   const hideChainSelect = swapOnly && formType === 'to';
 
   return (
@@ -54,11 +47,14 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
           <SearchTokenInput />
         </Box>
       </Box>
-      <TokenList
-        height={tokenListHeight}
-        onClick={navigateBack}
-        formType={formType}
-      />
+      <Box height={minListHeight}>
+        <TokenList
+          parentRef={listParentRef}
+          height={tokenListHeight}
+          onClick={navigateBack}
+          formType={formType}
+        />
+      </Box>
     </PageContainer>
   );
 };

package/pages/SelectTokenPage/useTokenListHeight.ts

@@ -0,0 +1,112 @@
+import { useTheme } from '@mui/material';
+import type { MutableRefObject } from 'react';
+import { useLayoutEffect, useState } from 'react';
+import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
+import { ElementId, createElementId } from '../../utils/elements.js';
+
+const debounce = (func: Function, timeout = 300) => {
+  let timer: ReturnType<typeof setTimeout>;
+  return (...args: any[]) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(this, args);
+    }, timeout);
+  };
+};
+
+const getContentHeight = (
+  elementId: string,
+  listParentRef: MutableRefObject<HTMLUListElement | null>,
+) => {
+  const containerElement = document.getElementById(
+    createElementId(ElementId.ScrollableContainer, elementId),
+  );
+
+  const headerElement = document.getElementById(
+    createElementId(ElementId.Header, elementId),
+  );
+
+  const listParentElement = listParentRef?.current;
+
+  let oldHeight;
+
+  // This covers the case where in full height flex mode when the browser height is reduced
+  // - this allows the virtualised token list to be made smaller
+  if (listParentElement) {
+    oldHeight = listParentElement.style.height;
+    listParentElement.style.height = '0';
+  }
+
+  if (!containerElement || !headerElement) {
+    console.warn(
+      `Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`,
+    );
+    return 0;
+  }
+  const { height: containerHeight } = containerElement.getBoundingClientRect();
+  const { height: headerHeight } = headerElement.getBoundingClientRect();
+
+  // This covers the case where in full height flex mode when the browser height is reduced the
+  // - this allows the virtualised token list to be set to minimum size
+  if (listParentElement && oldHeight) {
+    listParentElement.style.height = oldHeight;
+  }
+
+  return containerHeight - headerHeight;
+};
+
+interface UseContentHeightProps {
+  listParentRef: MutableRefObject<HTMLUListElement | null>;
+  headerRef: MutableRefObject<HTMLElement | null>;
+}
+
+export const minTokenListHeight = 360;
+export const minMobileTokenListHeight = 160;
+
+export const useTokenListHeight = ({
+  listParentRef,
+  headerRef,
+}: UseContentHeightProps) => {
+  const elementId = useDefaultElementId();
+  const [contentHeight, setContentHeight] = useState<number>(0);
+  const theme = useTheme();
+
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      setContentHeight(getContentHeight(elementId, listParentRef));
+    };
+
+    const processResize = debounce(() => handleResize(), 40);
+
+    const appContainer = document.getElementById(
+      createElementId(ElementId.AppExpandedContainer, elementId),
+    );
+
+    let resizeObserver: ResizeObserver;
+    if (appContainer) {
+      resizeObserver = new ResizeObserver(processResize);
+      resizeObserver.observe(appContainer);
+    }
+
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [elementId, listParentRef]);
+
+  const minListHeight =
+    theme.container?.height === '100%'
+      ? minMobileTokenListHeight
+      : minTokenListHeight;
+
+  const tokenListHeight = Math.max(
+    contentHeight - (headerRef.current?.offsetHeight ?? 0),
+    minListHeight,
+  );
+
+  return {
+    minListHeight,
+    tokenListHeight,
+  };
+};

package/pages/SelectWalletPage/EVMListItemButton.tsx

@@ -1,4 +1,5 @@
 import { ChainType } from '@lifi/sdk';
+import type { CreateConnectorFnExtended } from '@lifi/wallet-management';
 import {
   getConnectorIcon,
   isWalletInstalledAsync,
@@ -14,7 +15,7 @@ import { WidgetEvent } from '../../types/events.js';
 
 interface EVMListItemButtonProps {
   connectedConnector?: Connector;
-  connector: Connector;
+  connector: CreateConnectorFnExtended | Connector;
   onNotInstalled(connector: Connector): void;
 }
 
@@ -29,9 +30,11 @@ export const EVMListItemButton = ({
   const { disconnectAsync } = useDisconnect();
 
   const handleEVMConnect = async () => {
-    const identityCheckPassed = await isWalletInstalledAsync(connector.id);
+    const identityCheckPassed = await isWalletInstalledAsync(
+      (connector as Connector).id,
+    );
     if (!identityCheckPassed) {
-      onNotInstalled(connector);
+      onNotInstalled(connector as Connector);
       return;
     }
     if (connectedConnector) {
@@ -52,14 +55,20 @@ export const EVMListItemButton = ({
     navigateBack();
   };
 
+  const connectorName: string =
+    (connector as CreateConnectorFnExtended).displayName || connector.name;
+
   return (
-    <ListItemButton key={connector.uid} onClick={handleEVMConnect}>
+    <ListItemButton key={connector.id} onClick={handleEVMConnect}>
       <ListItemAvatar>
-        <Avatar src={getConnectorIcon(connector)} alt={connector.name}>
-          {connector.name[0]}
+        <Avatar
+          src={getConnectorIcon(connector as Connector)}
+          alt={connectorName}
+        >
+          {connectorName?.[0]}
         </Avatar>
       </ListItemAvatar>
-      <ListItemText primary={connector.name} />
+      <ListItemText primary={connectorName} />
     </ListItemButton>
   );
 };

package/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -1,47 +1,34 @@
-import { ChainType } from '@lifi/sdk';
-import { isWalletInstalled } from '@lifi/wallet-management';
-import type { Theme } from '@mui/material';
 import {
   Button,
   DialogActions,
   DialogContent,
   DialogContentText,
   List,
-  useMediaQuery,
 } from '@mui/material';
-import { WalletReadyState } from '@solana/wallet-adapter-base';
 import type { Wallet } from '@solana/wallet-adapter-react';
-import { useWallet } from '@solana/wallet-adapter-react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { Connector } from 'wagmi';
-import { useConnect, useAccount as useWagmiAccount } from 'wagmi';
+import { useAccount as useWagmiAccount } from 'wagmi';
 import { Dialog } from '../../components/Dialog.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { useHeader } from '../../hooks/useHeader.js';
+import { useWallets } from '../../hooks/useWallets.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { isItemAllowed } from '../../utils/item.js';
 import { EVMListItemButton } from './EVMListItemButton.js';
 import { SVMListItemButton } from './SVMListItemButton.js';
-import { walletComparator } from './utils.js';
 
 export const SelectWalletPage = () => {
   const { t } = useTranslation();
-  const { chains } = useWidgetConfig();
+  const { chains, walletConfig } = useWidgetConfig();
   const account = useWagmiAccount();
-  const { connectors } = useConnect();
   const [walletIdentity, setWalletIdentity] = useState<{
     show: boolean;
     connector?: Connector;
   }>({ show: false });
-  const { wallets: solanaWallets } = useWallet();
 
   useHeader(t(`header.selectWallet`));
 
-  const isDesktopView = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.up('sm'),
-  );
-
   const closeDialog = () => {
     setWalletIdentity((state) => ({
       ...state,
@@ -56,52 +43,7 @@ export const SelectWalletPage = () => {
     });
   }, []);
 
-  const wallets = useMemo(() => {
-    const evmInstalled = isItemAllowed(ChainType.EVM, chains?.types)
-      ? connectors.filter(
-          (connector) =>
-            isWalletInstalled(connector.id) &&
-            // We should not show already connected connectors
-            account.connector?.id !== connector.id,
-        )
-      : [];
-    const evmNotDetected = isItemAllowed(ChainType.EVM, chains?.types)
-      ? connectors.filter((connector) => !isWalletInstalled(connector.id))
-      : [];
-    const svmInstalled = isItemAllowed(ChainType.SVM, chains?.types)
-      ? solanaWallets?.filter(
-          (connector) =>
-            connector.adapter.readyState === WalletReadyState.Installed &&
-            // We should not show already connected connectors
-            !connector.adapter.connected,
-        )
-      : [];
-    const svmNotDetected = isItemAllowed(ChainType.SVM, chains?.types)
-      ? solanaWallets?.filter(
-          (connector) =>
-            connector.adapter.readyState !== WalletReadyState.Installed,
-        )
-      : [];
-
-    const installedWallets = [...evmInstalled, ...svmInstalled].sort(
-      walletComparator,
-    );
-
-    if (isDesktopView) {
-      const notDetectedWallets = [...evmNotDetected, ...svmNotDetected].sort(
-        walletComparator,
-      );
-      installedWallets.push(...notDetectedWallets);
-    }
-
-    return installedWallets;
-  }, [
-    account.connector?.id,
-    chains?.types,
-    connectors,
-    isDesktopView,
-    solanaWallets,
-  ]);
+  const wallets = useWallets(walletConfig, chains);
 
   return (
     <PageContainer disableGutters>
@@ -114,9 +56,9 @@ export const SelectWalletPage = () => {
         }}
       >
         {wallets?.map((connector) =>
-          (connector as Connector).uid ? (
+          (connector as Connector).id ? (
             <EVMListItemButton
-              key={(connector as Connector).uid}
+              key={(connector as Connector).id}
               connector={connector as Connector}
               connectedConnector={account.connector}
               onNotInstalled={handleNotInstalled}

package/pages/SendToWallet/BookmarksPage.tsx

@@ -9,6 +9,7 @@ import { Button, ListItemAvatar, ListItemText, MenuItem } from '@mui/material';
 import { useId, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+
 import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
 import { ListItemButton } from '../../components/ListItem//ListItemButton.js';
@@ -17,6 +18,7 @@ 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 type { Bookmark } from '../../stores/bookmarks/types.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
 import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
@@ -28,9 +30,9 @@ import { BookmarkAddressSheet } from './BookmarkAddressSheet.js';
 import { EmptyListIndicator } from './EmptyListIndicator.js';
 import {
   BookmarkButtonContainer,
-  ListContainer,
+  BookmarksListContainer,
+  FullHeightAdjustablePageContainer,
   OptionsMenuButton,
-  SendToWalletPageContainer,
 } from './SendToWalletPage.style.js';
 
 export const BookmarksPage = () => {
@@ -45,6 +47,7 @@ export const BookmarksPage = () => {
   const navigate = useNavigate();
   const { setFieldValue } = useFieldActions();
   const { setSendToWallet } = useSendToWalletActions();
+  const { variant } = useWidgetConfig();
 
   useHeader(t(`header.bookmarkedWallets`));
 
@@ -102,8 +105,11 @@ export const BookmarksPage = () => {
   };
 
   return (
-    <SendToWalletPageContainer disableGutters>
-      <ListContainer>
+    <FullHeightAdjustablePageContainer
+      disableGutters
+      enableFullHeight={variant !== 'drawer'}
+    >
+      <BookmarksListContainer>
         {bookmarks.map((bookmark) => (
           <ListItem key={bookmark.address} sx={{ position: 'relative' }}>
             <ListItemButton
@@ -178,7 +184,7 @@ export const BookmarksPage = () => {
             {t('button.delete')}
           </MenuItem>
         </Menu>
-      </ListContainer>
+      </BookmarksListContainer>
       <BookmarkButtonContainer>
         <Button variant="contained" onClick={handleAddBookmark}>
           {t('sendToWallet.addBookmark')}
@@ -188,6 +194,6 @@ export const BookmarksPage = () => {
         ref={bookmarkAddressSheetRef}
         onAddBookmark={addBookmark}
       />
-    </SendToWalletPageContainer>
+    </FullHeightAdjustablePageContainer>
   );
 };

package/pages/SendToWallet/SendToWalletPage.style.tsx

@@ -38,6 +38,22 @@ export const SendToWalletPageContainer = styled(
   gap: theme.spacing(1),
 }));
 
+interface FullHeightAdjustablePageContainerProps extends PageContainerProps {
+  enableFullHeight?: boolean;
+}
+
+export const FullHeightAdjustablePageContainer = styled(
+  SendToWalletPageContainer,
+)<FullHeightAdjustablePageContainerProps>(({ theme, enableFullHeight }) => ({
+  justifyContent: 'space-between',
+  ...(enableFullHeight && theme.container?.height === '100%'
+    ? {
+        justifyContent: 'space-between',
+        height: '100%',
+      }
+    : {}),
+}));
+
 export const SendToWalletCard = styled(InputCard)({
   display: 'flex',
   flexDirection: 'column',
@@ -92,21 +108,25 @@ export const SheetAddressContainer = styled(Box)(() => ({
 export const ListContainer = styled(List)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
+  padding: 0,
   minHeight: 400,
-  paddingTop: 0,
-  paddingBottom: theme.spacing(1.5),
+}));
+
+export const BookmarksListContainer = styled(ListContainer)(({ theme }) => ({
+  ...(theme.container?.height === '100%'
+    ? { minHeight: 360, height: 360, flexGrow: 1, overflow: 'auto' }
+    : { minHeight: 440 }),
 }));
 
 export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({
   background: theme.palette.background.default,
   display: 'flex',
   flexDirection: 'column',
-  flexGrow: 1,
-  position: 'sticky',
   bottom: 0,
   padding: theme.spacing(0, 3, 3),
-  marginBottom: theme.spacing(-5.25),
   zIndex: 2,
+  position: 'sticky',
+  width: '100%',
 }));
 
 export const EmptyContainer = styled(Box)(({ theme }) => ({

package/pages/SendToWallet/SendToWalletPage.tsx

@@ -1,5 +1,5 @@
 import { Error, History, TurnedIn, Wallet } from '@mui/icons-material';
-import { Tooltip, Typography } from '@mui/material';
+import { Box, Tooltip, Typography } from '@mui/material';
 import type { ChangeEvent } from 'react';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -15,6 +15,7 @@ import {
 import { useChain } from '../../hooks/useChain.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import type { Bookmark } from '../../stores/bookmarks/types.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
 import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
@@ -25,10 +26,10 @@ import { BookmarkAddressSheet } from './BookmarkAddressSheet.js';
 import { ConfirmAddressSheet } from './ConfirmAddressSheet.js';
 import {
   AddressInput,
+  FullHeightAdjustablePageContainer,
   SendToWalletButtonRow,
   SendToWalletCard,
   SendToWalletIconButton,
-  SendToWalletPageContainer,
   ValidationAlert,
 } from './SendToWalletPage.style.js';
 
@@ -59,6 +60,7 @@ export const SendToWalletPage = () => {
   const { chain: toChain } = useChain(toChainId);
   const [isDoneButtonLoading, setIsDoneButtonLoading] = useState(false);
   const [isBookmarkButtonLoading, setIsBookmarkButtonLoading] = useState(false);
+  const { variant } = useWidgetConfig();
 
   useHeader(t(`header.sendToWallet`));
 
@@ -181,7 +183,10 @@ export const SendToWalletPage = () => {
   });
 
   return (
-    <SendToWalletPageContainer bottomGutters>
+    <FullHeightAdjustablePageContainer
+      bottomGutters
+      enableFullHeight={variant !== 'drawer'}
+    >
       <SendToWalletCard
         type={errorMessage ? 'error' : 'default'}
         sx={{
@@ -238,35 +243,39 @@ export const SendToWalletPage = () => {
           onAddBookmark={handleAddBookmark}
         />
       </SendToWalletCard>
-      <CardButton
-        title={t('header.recentWallets')}
-        icon={<History />}
-        onClick={handleRecentWalletsClick}
-      >
-        {!!recentWallets.length && (
-          <Typography color="text.secondary">{recentWallets.length}</Typography>
-        )}
-      </CardButton>
-      <CardButton
-        title={t('sendToWallet.connectedWallets')}
-        icon={<Wallet />}
-        onClick={handleConnectedWalletsClick}
-      >
-        {!!connectedWallets.length && (
-          <Typography color="text.secondary">
-            {connectedWallets.length}
-          </Typography>
-        )}
-      </CardButton>
-      <CardButton
-        title={t('header.bookmarkedWallets')}
-        icon={<TurnedIn />}
-        onClick={handleBookmarkedWalletsClick}
-      >
-        {!!bookmarks.length && (
-          <Typography color="text.secondary">{bookmarks.length}</Typography>
-        )}
-      </CardButton>
-    </SendToWalletPageContainer>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+        <CardButton
+          title={t('header.recentWallets')}
+          icon={<History />}
+          onClick={handleRecentWalletsClick}
+        >
+          {!!recentWallets.length && (
+            <Typography color="text.secondary">
+              {recentWallets.length}
+            </Typography>
+          )}
+        </CardButton>
+        <CardButton
+          title={t('sendToWallet.connectedWallets')}
+          icon={<Wallet />}
+          onClick={handleConnectedWalletsClick}
+        >
+          {!!connectedWallets.length && (
+            <Typography color="text.secondary">
+              {connectedWallets.length}
+            </Typography>
+          )}
+        </CardButton>
+        <CardButton
+          title={t('header.bookmarkedWallets')}
+          icon={<TurnedIn />}
+          onClick={handleBookmarkedWalletsClick}
+        >
+          {!!bookmarks.length && (
+            <Typography color="text.secondary">{bookmarks.length}</Typography>
+          )}
+        </CardButton>
+      </Box>
+    </FullHeightAdjustablePageContainer>
   );
 };

package/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -89,7 +89,6 @@ export const TransactionDetailsPage: React.FC = () => {
       <Box
         sx={{
           display: 'flex',
-          flex: 1,
           justifyContent: 'space-between',
         }}
         pb={1}

package/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -12,7 +12,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
-import { useSetContentHeight } from '../../hooks/useContentHeight.js';
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js';
 import { formatTokenAmount } from '../../utils/format.js';
 import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';