@lifi/widget 4.3.0 → 4.3.1

package/dist/esm/config/version.d.ts

@@ -1,6 +1,6 @@
 //#region src/config/version.d.ts
 declare const name = "@lifi/widget";
-declare const version = "4.3.0";
+declare const version = "4.3.1";
 //#endregion
 export { name, version };
 //# sourceMappingURL=version.d.ts.map

package/dist/esm/config/version.js

@@ -1,6 +1,6 @@
 //#region src/config/version.ts
 const name = "@lifi/widget";
-const version = "4.3.0";
+const version = "4.3.1";
 //#endregion
 export { name, version };
 

package/dist/esm/config/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","names":[],"sources":["../../../src/config/version.ts"],"sourcesContent":["export const name = '@lifi/widget'\nexport const version = '4.3.0'\n"],"mappings":";AAAA,MAAa,OAAO;AACpB,MAAa,UAAU"}
+{"version":3,"file":"version.js","names":[],"sources":["../../../src/config/version.ts"],"sourcesContent":["export const name = '@lifi/widget'\nexport const version = '4.3.1'\n"],"mappings":";AAAA,MAAa,OAAO;AACpB,MAAa,UAAU"}

package/dist/esm/pages/LanguagesPage.js

@@ -1,27 +1,39 @@
 import { languageNames } from "../providers/I18nProvider/constants.js";
 import { PageContainer } from "../components/PageContainer.js";
 import { useHeader } from "../hooks/useHeader.js";
+import { useListHeight } from "../hooks/useListHeight.js";
 import { ListItemText as ListItemText$1 } from "../components/ListItemText.js";
 import { SettingsListItemButton } from "../components/SettingsListItemButton.js";
 import { useLanguages } from "../hooks/useLanguages.js";
-import { List } from "@mui/material";
+import { useRef } from "react";
+import { Box, List } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import Check from "@mui/icons-material/Check";
 //#region src/pages/LanguagesPage.tsx
 const LanguagesPage = () => {
 	const { t } = useTranslation();
+	const listParentRef = useRef(null);
 	const { selectedLanguageCode, availableLanguages, setLanguageWithCode } = useLanguages();
 	useHeader(t("language.title"));
+	const { listHeight } = useListHeight({ listParentRef });
 	if (availableLanguages.length < 1) return null;
 	return /* @__PURE__ */ jsx(PageContainer, {
 		disableGutters: true,
-		children: /* @__PURE__ */ jsx(List, {
-			sx: { padding: 1.5 },
-			children: availableLanguages.map((language) => /* @__PURE__ */ jsxs(SettingsListItemButton, {
-				onClick: () => setLanguageWithCode(language),
-				children: [/* @__PURE__ */ jsx(ListItemText$1, { primary: languageNames[language] || t("language.name", { lng: language }) || language }), selectedLanguageCode === language && /* @__PURE__ */ jsx(Check, { color: "primary" })]
-			}, language))
+		children: /* @__PURE__ */ jsx(Box, {
+			className: "long-list",
+			ref: listParentRef,
+			style: {
+				height: listHeight,
+				overflow: "auto"
+			},
+			children: /* @__PURE__ */ jsx(List, {
+				sx: { padding: 1.5 },
+				children: availableLanguages.map((language) => /* @__PURE__ */ jsxs(SettingsListItemButton, {
+					onClick: () => setLanguageWithCode(language),
+					children: [/* @__PURE__ */ jsx(ListItemText$1, { primary: languageNames[language] || t("language.name", { lng: language }) || language }), selectedLanguageCode === language && /* @__PURE__ */ jsx(Check, { color: "primary" })]
+				}, language))
+			})
 		})
 	});
 };

package/dist/esm/pages/LanguagesPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LanguagesPage.js","names":["ListItemText"],"sources":["../../../src/pages/LanguagesPage.tsx"],"sourcesContent":["import Check from '@mui/icons-material/Check'\nimport { List } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { ListItemText } from '../components/ListItemText.js'\nimport { PageContainer } from '../components/PageContainer.js'\nimport { SettingsListItemButton } from '../components/SettingsListItemButton.js'\nimport { useHeader } from '../hooks/useHeader.js'\nimport { useLanguages } from '../hooks/useLanguages.js'\nimport { languageNames } from '../providers/I18nProvider/constants.js'\n\nexport const LanguagesPage: React.FC = () => {\n  const { t } = useTranslation()\n  const { selectedLanguageCode, availableLanguages, setLanguageWithCode } =\n    useLanguages()\n\n  useHeader(t('language.title'))\n\n  if (availableLanguages.length < 1) {\n    return null\n  }\n\n  return (\n    <PageContainer disableGutters>\n      <List\n        sx={{\n          padding: 1.5,\n        }}\n      >\n        {availableLanguages.map((language) => (\n          <SettingsListItemButton\n            key={language}\n            onClick={() => setLanguageWithCode(language)}\n          >\n            <ListItemText\n              primary={\n                languageNames[language as keyof typeof languageNames] ||\n                t('language.name', {\n                  lng: language,\n                }) ||\n                language\n              }\n            />\n            {selectedLanguageCode === language && <Check color=\"primary\" />}\n          </SettingsListItemButton>\n        ))}\n      </List>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,sBAAgC;CAC3C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,sBAAsB,oBAAoB,wBAChD,aAAa;CAEf,UAAU,EAAE,gBAAgB,CAAC;CAE7B,IAAI,mBAAmB,SAAS,GAC9B,OAAO;CAGT,OACE,oBAAC,eAAD;EAAe,gBAAA;YACb,oBAAC,MAAD;GACE,IAAI,EACF,SAAS,IACX;aAEC,mBAAmB,KAAK,aACvB,qBAAC,wBAAD;IAEE,eAAe,oBAAoB,QAAQ;cAF7C,CAIE,oBAACA,gBAAD,EACE,SACE,cAAc,aACd,EAAE,iBAAiB,EACjB,KAAK,SACP,CAAC,KACD,SAEH,CAAA,GACA,yBAAyB,YAAY,oBAAC,OAAD,EAAO,OAAM,UAAW,CAAA,CACxC;MAbjB,QAaiB,CACzB;EACG,CAAA;CACO,CAAA;AAEnB"}
+{"version":3,"file":"LanguagesPage.js","names":["ListItemText"],"sources":["../../../src/pages/LanguagesPage.tsx"],"sourcesContent":["import Check from '@mui/icons-material/Check'\nimport { Box, List } from '@mui/material'\nimport { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ListItemText } from '../components/ListItemText.js'\nimport { PageContainer } from '../components/PageContainer.js'\nimport { SettingsListItemButton } from '../components/SettingsListItemButton.js'\nimport { useHeader } from '../hooks/useHeader.js'\nimport { useLanguages } from '../hooks/useLanguages.js'\nimport { useListHeight } from '../hooks/useListHeight.js'\nimport { languageNames } from '../providers/I18nProvider/constants.js'\n\nexport const LanguagesPage: React.FC = () => {\n  const { t } = useTranslation()\n  const listParentRef = useRef<HTMLDivElement>(null)\n  const { selectedLanguageCode, availableLanguages, setLanguageWithCode } =\n    useLanguages()\n\n  useHeader(t('language.title'))\n\n  const { listHeight } = useListHeight({\n    listParentRef,\n  })\n\n  if (availableLanguages.length < 1) {\n    return null\n  }\n\n  return (\n    <PageContainer disableGutters>\n      <Box\n        className=\"long-list\"\n        ref={listParentRef}\n        style={{ height: listHeight, overflow: 'auto' }}\n      >\n        <List\n          sx={{\n            padding: 1.5,\n          }}\n        >\n          {availableLanguages.map((language) => (\n            <SettingsListItemButton\n              key={language}\n              onClick={() => setLanguageWithCode(language)}\n            >\n              <ListItemText\n                primary={\n                  languageNames[language as keyof typeof languageNames] ||\n                  t('language.name', {\n                    lng: language,\n                  }) ||\n                  language\n                }\n              />\n              {selectedLanguageCode === language && <Check color=\"primary\" />}\n            </SettingsListItemButton>\n          ))}\n        </List>\n      </Box>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,sBAAgC;CAC3C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,gBAAgB,OAAuB,IAAI;CACjD,MAAM,EAAE,sBAAsB,oBAAoB,wBAChD,aAAa;CAEf,UAAU,EAAE,gBAAgB,CAAC;CAE7B,MAAM,EAAE,eAAe,cAAc,EACnC,cACF,CAAC;CAED,IAAI,mBAAmB,SAAS,GAC9B,OAAO;CAGT,OACE,oBAAC,eAAD;EAAe,gBAAA;YACb,oBAAC,KAAD;GACE,WAAU;GACV,KAAK;GACL,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;aAE9C,oBAAC,MAAD;IACE,IAAI,EACF,SAAS,IACX;cAEC,mBAAmB,KAAK,aACvB,qBAAC,wBAAD;KAEE,eAAe,oBAAoB,QAAQ;eAF7C,CAIE,oBAACA,gBAAD,EACE,SACE,cAAc,aACd,EAAE,iBAAiB,EACjB,KAAK,SACP,CAAC,KACD,SAEH,CAAA,GACA,yBAAyB,YAAY,oBAAC,OAAD,EAAO,OAAM,UAAW,CAAA,CACxC;OAbjB,QAaiB,CACzB;GACG,CAAA;EACH,CAAA;CACQ,CAAA;AAEnB"}

package/dist/esm/pages/RoutesPage/RoutesPage.js

@@ -2,6 +2,7 @@ import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
 import "../../types/events.js";
 import { navigationRoutes } from "../../utils/navigationRoutes.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { PageContainer } from "../../components/PageContainer.js";
 import { useRoutes } from "../../hooks/useRoutes.js";
 import { useToAddressRequirements } from "../../hooks/useToAddressRequirements.js";
 import { ProgressToNextUpdate } from "../../components/ProgressToNextUpdate.js";
@@ -9,9 +10,11 @@ import { RouteCard } from "../../components/RouteCard/RouteCard.js";
 import { RouteCardSkeleton } from "../../components/RouteCard/RouteCardSkeleton.js";
 import { RouteNotFoundCard } from "../../components/RouteCard/RouteNotFoundCard.js";
 import { useHeader } from "../../hooks/useHeader.js";
-import { Stack } from "./RoutesPage.style.js";
-import { useMemo } from "react";
+import { useListHeight } from "../../hooks/useListHeight.js";
+import { Stack as Stack$1 } from "./RoutesPage.style.js";
+import { useMemo, useRef } from "react";
 import { useNavigate } from "@tanstack/react-router";
+import { Box } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { useAccount } from "@lifi/wallet-management";
@@ -20,6 +23,7 @@ const RoutesPage = () => {
 	const { t } = useTranslation();
 	const navigate = useNavigate();
 	const emitter = useWidgetEvents();
+	const listParentRef = useRef(null);
 	const { routes, isLoading, isFetching, dataUpdatedAt, refetchTime, fromChain, refetch, setReviewableRoute } = useRoutes();
 	const { account } = useAccount({ chainType: fromChain?.chainType });
 	const [toAddress] = useFieldValues("toAddress");
@@ -38,6 +42,7 @@ const RoutesPage = () => {
 		refetchTime
 	]);
 	useHeader(t("header.receive"), headerAction);
+	const { listHeight } = useListHeight({ listParentRef });
 	const handleRouteClick = (route) => {
 		setReviewableRoute(route);
 		navigate({
@@ -52,20 +57,27 @@ const RoutesPage = () => {
 	const routeNotFound = !routes?.length && !isLoading && !isFetching;
 	const toAddressUnsatisfied = routes?.[0] && requiredToAddress && !toAddress;
 	const allowInteraction = account.isConnected && !toAddressUnsatisfied;
-	return /* @__PURE__ */ jsx(Stack, {
-		className: "long-list",
-		direction: "column",
-		spacing: 2,
-		sx: {
-			flex: 1,
-			pt: 1.5
-		},
-		children: routeNotFound ? /* @__PURE__ */ jsx(RouteNotFoundCard, {}) : isLoading && !routes?.length ? Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx(RouteCardSkeleton, {}, index)) : routes?.map((route, index) => /* @__PURE__ */ jsx(RouteCard, {
-			route,
-			onClick: allowInteraction ? () => handleRouteClick(route) : void 0,
-			active: index === 0,
-			expanded: routes?.length === 1
-		}, index))
+	return /* @__PURE__ */ jsx(PageContainer, {
+		disableGutters: true,
+		children: /* @__PURE__ */ jsx(Box, {
+			className: "long-list",
+			ref: listParentRef,
+			style: {
+				height: listHeight,
+				overflow: "auto"
+			},
+			children: /* @__PURE__ */ jsx(Stack$1, {
+				direction: "column",
+				spacing: 2,
+				sx: { pt: 1.5 },
+				children: routeNotFound ? /* @__PURE__ */ jsx(RouteNotFoundCard, {}) : isLoading && !routes?.length ? Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx(RouteCardSkeleton, {}, index)) : routes?.map((route, index) => /* @__PURE__ */ jsx(RouteCard, {
+					route,
+					onClick: allowInteraction ? () => handleRouteClick(route) : void 0,
+					active: index === 0,
+					expanded: routes?.length === 1
+				}, index))
+			})
+		})
 	});
 };
 //#endregion

package/dist/esm/pages/RoutesPage/RoutesPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoutesPage.js","names":[],"sources":["../../../../src/pages/RoutesPage/RoutesPage.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type JSX, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js'\nimport { RouteCard } from '../../components/RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { Stack } from './RoutesPage.style.js'\n\nexport const RoutesPage = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const emitter = useWidgetEvents()\n  const {\n    routes,\n    isLoading,\n    isFetching,\n    dataUpdatedAt,\n    refetchTime,\n    fromChain,\n    refetch,\n    setReviewableRoute,\n  } = useRoutes()\n  const { account } = useAccount({ chainType: fromChain?.chainType })\n  const [toAddress] = useFieldValues('toAddress')\n  const { requiredToAddress } = useToAddressRequirements()\n\n  const headerAction = useMemo(\n    () => (\n      <ProgressToNextUpdate\n        updatedAt={dataUpdatedAt || Date.now()}\n        timeToUpdate={refetchTime}\n        isLoading={isFetching}\n        onClick={() => refetch()}\n        sx={{ marginRight: -1 }}\n        size=\"medium\"\n      />\n    ),\n    [dataUpdatedAt, isFetching, refetch, refetchTime]\n  )\n\n  useHeader(t('header.receive'), headerAction)\n\n  const handleRouteClick = (route: Route) => {\n    setReviewableRoute(route)\n    navigate({\n      to: navigationRoutes.transactionExecution,\n      search: { routeId: route.id },\n    })\n    emitter.emit(WidgetEvent.RouteSelected, {\n      route,\n      routes: routes!,\n    })\n  }\n\n  const routeNotFound = !routes?.length && !isLoading && !isFetching\n\n  const toAddressUnsatisfied = routes?.[0] && requiredToAddress && !toAddress\n\n  const allowInteraction = account.isConnected && !toAddressUnsatisfied\n\n  return (\n    <Stack\n      className=\"long-list\"\n      direction=\"column\"\n      spacing={2}\n      sx={{ flex: 1, pt: 1.5 }}\n    >\n      {routeNotFound ? (\n        <RouteNotFoundCard />\n      ) : isLoading && !routes?.length ? (\n        Array.from({ length: 3 }).map((_, index) => (\n          <RouteCardSkeleton key={index} />\n        ))\n      ) : (\n        routes?.map((route: Route, index: number) => (\n          <RouteCard\n            key={index}\n            route={route}\n            onClick={\n              allowInteraction ? () => handleRouteClick(route) : undefined\n            }\n            active={index === 0}\n            expanded={routes?.length === 1}\n          />\n        ))\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAa,mBAAgC;CAC3C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,gBAAgB;CAChC,MAAM,EACJ,QACA,WACA,YACA,eACA,aACA,WACA,SACA,uBACE,UAAU;CACd,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,WAAW,UAAU,CAAC;CAClE,MAAM,CAAC,aAAa,eAAe,WAAW;CAC9C,MAAM,EAAE,sBAAsB,yBAAyB;CAEvD,MAAM,eAAe,cAEjB,oBAAC,sBAAD;EACE,WAAW,iBAAiB,KAAK,IAAI;EACrC,cAAc;EACd,WAAW;EACX,eAAe,QAAQ;EACvB,IAAI,EAAE,aAAa,GAAG;EACtB,MAAK;CACN,CAAA,GAEH;EAAC;EAAe;EAAY;EAAS;CAAW,CAClD;CAEA,UAAU,EAAE,gBAAgB,GAAG,YAAY;CAE3C,MAAM,oBAAoB,UAAiB;EACzC,mBAAmB,KAAK;EACxB,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,MAAM,GAAG;EAC9B,CAAC;EACD,QAAQ,KAAA,iBAAgC;GACtC;GACQ;EACV,CAAC;CACH;CAEA,MAAM,gBAAgB,CAAC,QAAQ,UAAU,CAAC,aAAa,CAAC;CAExD,MAAM,uBAAuB,SAAS,MAAM,qBAAqB,CAAC;CAElE,MAAM,mBAAmB,QAAQ,eAAe,CAAC;CAEjD,OACE,oBAAC,OAAD;EACE,WAAU;EACV,WAAU;EACV,SAAS;EACT,IAAI;GAAE,MAAM;GAAG,IAAI;EAAI;YAEtB,gBACC,oBAAC,mBAAD,CAAoB,CAAA,IAClB,aAAa,CAAC,QAAQ,SACxB,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UAChC,oBAAC,mBAAD,CAAgC,GAAR,KAAQ,CACjC,IAED,QAAQ,KAAK,OAAc,UACzB,oBAAC,WAAD;GAES;GACP,SACE,yBAAyB,iBAAiB,KAAK,IAAI,KAAA;GAErD,QAAQ,UAAU;GAClB,UAAU,QAAQ,WAAW;EAC9B,GAPM,KAON,CACF;CAEE,CAAA;AAEX"}
+{"version":3,"file":"RoutesPage.js","names":["Stack"],"sources":["../../../../src/pages/RoutesPage/RoutesPage.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { Box } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type JSX, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js'\nimport { RouteCard } from '../../components/RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useListHeight } from '../../hooks/useListHeight.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { Stack } from './RoutesPage.style.js'\n\nexport const RoutesPage = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const emitter = useWidgetEvents()\n  const listParentRef = useRef<HTMLDivElement>(null)\n  const {\n    routes,\n    isLoading,\n    isFetching,\n    dataUpdatedAt,\n    refetchTime,\n    fromChain,\n    refetch,\n    setReviewableRoute,\n  } = useRoutes()\n  const { account } = useAccount({ chainType: fromChain?.chainType })\n  const [toAddress] = useFieldValues('toAddress')\n  const { requiredToAddress } = useToAddressRequirements()\n\n  const headerAction = useMemo(\n    () => (\n      <ProgressToNextUpdate\n        updatedAt={dataUpdatedAt || Date.now()}\n        timeToUpdate={refetchTime}\n        isLoading={isFetching}\n        onClick={() => refetch()}\n        sx={{ marginRight: -1 }}\n        size=\"medium\"\n      />\n    ),\n    [dataUpdatedAt, isFetching, refetch, refetchTime]\n  )\n\n  useHeader(t('header.receive'), headerAction)\n\n  const { listHeight } = useListHeight({\n    listParentRef,\n  })\n\n  const handleRouteClick = (route: Route) => {\n    setReviewableRoute(route)\n    navigate({\n      to: navigationRoutes.transactionExecution,\n      search: { routeId: route.id },\n    })\n    emitter.emit(WidgetEvent.RouteSelected, {\n      route,\n      routes: routes!,\n    })\n  }\n\n  const routeNotFound = !routes?.length && !isLoading && !isFetching\n\n  const toAddressUnsatisfied = routes?.[0] && requiredToAddress && !toAddress\n\n  const allowInteraction = account.isConnected && !toAddressUnsatisfied\n\n  return (\n    <PageContainer disableGutters>\n      <Box\n        className=\"long-list\"\n        ref={listParentRef}\n        style={{ height: listHeight, overflow: 'auto' }}\n      >\n        <Stack direction=\"column\" spacing={2} sx={{ pt: 1.5 }}>\n          {routeNotFound ? (\n            <RouteNotFoundCard />\n          ) : isLoading && !routes?.length ? (\n            Array.from({ length: 3 }).map((_, index) => (\n              <RouteCardSkeleton key={index} />\n            ))\n          ) : (\n            routes?.map((route: Route, index: number) => (\n              <RouteCard\n                key={index}\n                route={route}\n                onClick={\n                  allowInteraction ? () => handleRouteClick(route) : undefined\n                }\n                active={index === 0}\n                expanded={routes?.length === 1}\n              />\n            ))\n          )}\n        </Stack>\n      </Box>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,mBAAgC;CAC3C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,gBAAgB;CAChC,MAAM,gBAAgB,OAAuB,IAAI;CACjD,MAAM,EACJ,QACA,WACA,YACA,eACA,aACA,WACA,SACA,uBACE,UAAU;CACd,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,WAAW,UAAU,CAAC;CAClE,MAAM,CAAC,aAAa,eAAe,WAAW;CAC9C,MAAM,EAAE,sBAAsB,yBAAyB;CAEvD,MAAM,eAAe,cAEjB,oBAAC,sBAAD;EACE,WAAW,iBAAiB,KAAK,IAAI;EACrC,cAAc;EACd,WAAW;EACX,eAAe,QAAQ;EACvB,IAAI,EAAE,aAAa,GAAG;EACtB,MAAK;CACN,CAAA,GAEH;EAAC;EAAe;EAAY;EAAS;CAAW,CAClD;CAEA,UAAU,EAAE,gBAAgB,GAAG,YAAY;CAE3C,MAAM,EAAE,eAAe,cAAc,EACnC,cACF,CAAC;CAED,MAAM,oBAAoB,UAAiB;EACzC,mBAAmB,KAAK;EACxB,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,MAAM,GAAG;EAC9B,CAAC;EACD,QAAQ,KAAA,iBAAgC;GACtC;GACQ;EACV,CAAC;CACH;CAEA,MAAM,gBAAgB,CAAC,QAAQ,UAAU,CAAC,aAAa,CAAC;CAExD,MAAM,uBAAuB,SAAS,MAAM,qBAAqB,CAAC;CAElE,MAAM,mBAAmB,QAAQ,eAAe,CAAC;CAEjD,OACE,oBAAC,eAAD;EAAe,gBAAA;YACb,oBAAC,KAAD;GACE,WAAU;GACV,KAAK;GACL,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;aAE9C,oBAACA,SAAD;IAAO,WAAU;IAAS,SAAS;IAAG,IAAI,EAAE,IAAI,IAAI;cACjD,gBACC,oBAAC,mBAAD,CAAoB,CAAA,IAClB,aAAa,CAAC,QAAQ,SACxB,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UAChC,oBAAC,mBAAD,CAAgC,GAAR,KAAQ,CACjC,IAED,QAAQ,KAAK,OAAc,UACzB,oBAAC,WAAD;KAES;KACP,SACE,yBAAyB,iBAAiB,KAAK,IAAI,KAAA;KAErD,QAAQ,UAAU;KAClB,UAAU,QAAQ,WAAW;IAC9B,GAPM,KAON,CACF;GAEE,CAAA;EACJ,CAAA;CACQ,CAAA;AAEnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "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": "./dist/esm/index.js",

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '4.3.0'
+export const version = '4.3.1'

package/src/pages/LanguagesPage.tsx

@@ -1,49 +1,62 @@
 import Check from '@mui/icons-material/Check'
-import { List } from '@mui/material'
+import { Box, List } from '@mui/material'
+import { useRef } from 'react'
 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'
+import { useListHeight } from '../hooks/useListHeight.js'
 import { languageNames } from '../providers/I18nProvider/constants.js'
 
 export const LanguagesPage: React.FC = () => {
   const { t } = useTranslation()
+  const listParentRef = useRef<HTMLDivElement>(null)
   const { selectedLanguageCode, availableLanguages, setLanguageWithCode } =
     useLanguages()
 
   useHeader(t('language.title'))
 
+  const { listHeight } = useListHeight({
+    listParentRef,
+  })
+
   if (availableLanguages.length < 1) {
     return null
   }
 
   return (
     <PageContainer disableGutters>
-      <List
-        sx={{
-          padding: 1.5,
-        }}
+      <Box
+        className="long-list"
+        ref={listParentRef}
+        style={{ height: listHeight, overflow: 'auto' }}
       >
-        {availableLanguages.map((language) => (
-          <SettingsListItemButton
-            key={language}
-            onClick={() => setLanguageWithCode(language)}
-          >
-            <ListItemText
-              primary={
-                languageNames[language as keyof typeof languageNames] ||
-                t('language.name', {
-                  lng: language,
-                }) ||
-                language
-              }
-            />
-            {selectedLanguageCode === language && <Check color="primary" />}
-          </SettingsListItemButton>
-        ))}
-      </List>
+        <List
+          sx={{
+            padding: 1.5,
+          }}
+        >
+          {availableLanguages.map((language) => (
+            <SettingsListItemButton
+              key={language}
+              onClick={() => setLanguageWithCode(language)}
+            >
+              <ListItemText
+                primary={
+                  languageNames[language as keyof typeof languageNames] ||
+                  t('language.name', {
+                    lng: language,
+                  }) ||
+                  language
+                }
+              />
+              {selectedLanguageCode === language && <Check color="primary" />}
+            </SettingsListItemButton>
+          ))}
+        </List>
+      </Box>
     </PageContainer>
   )
 }

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -1,13 +1,16 @@
 import type { Route } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
+import { Box } from '@mui/material'
 import { useNavigate } from '@tanstack/react-router'
-import { type JSX, useMemo } from 'react'
+import { type JSX, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { PageContainer } from '../../components/PageContainer.js'
 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 { useHeader } from '../../hooks/useHeader.js'
+import { useListHeight } from '../../hooks/useListHeight.js'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
@@ -20,6 +23,7 @@ export const RoutesPage = (): JSX.Element => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const emitter = useWidgetEvents()
+  const listParentRef = useRef<HTMLDivElement>(null)
   const {
     routes,
     isLoading,
@@ -50,6 +54,10 @@ export const RoutesPage = (): JSX.Element => {
 
   useHeader(t('header.receive'), headerAction)
 
+  const { listHeight } = useListHeight({
+    listParentRef,
+  })
+
   const handleRouteClick = (route: Route) => {
     setReviewableRoute(route)
     navigate({
@@ -69,31 +77,34 @@ export const RoutesPage = (): JSX.Element => {
   const allowInteraction = account.isConnected && !toAddressUnsatisfied
 
   return (
-    <Stack
-      className="long-list"
-      direction="column"
-      spacing={2}
-      sx={{ flex: 1, pt: 1.5 }}
-    >
-      {routeNotFound ? (
-        <RouteNotFoundCard />
-      ) : isLoading && !routes?.length ? (
-        Array.from({ length: 3 }).map((_, index) => (
-          <RouteCardSkeleton key={index} />
-        ))
-      ) : (
-        routes?.map((route: Route, index: number) => (
-          <RouteCard
-            key={index}
-            route={route}
-            onClick={
-              allowInteraction ? () => handleRouteClick(route) : undefined
-            }
-            active={index === 0}
-            expanded={routes?.length === 1}
-          />
-        ))
-      )}
-    </Stack>
+    <PageContainer disableGutters>
+      <Box
+        className="long-list"
+        ref={listParentRef}
+        style={{ height: listHeight, overflow: 'auto' }}
+      >
+        <Stack direction="column" spacing={2} sx={{ pt: 1.5 }}>
+          {routeNotFound ? (
+            <RouteNotFoundCard />
+          ) : isLoading && !routes?.length ? (
+            Array.from({ length: 3 }).map((_, index) => (
+              <RouteCardSkeleton key={index} />
+            ))
+          ) : (
+            routes?.map((route: Route, index: number) => (
+              <RouteCard
+                key={index}
+                route={route}
+                onClick={
+                  allowInteraction ? () => handleRouteClick(route) : undefined
+                }
+                active={index === 0}
+                expanded={routes?.length === 1}
+              />
+            ))
+          )}
+        </Stack>
+      </Box>
+    </PageContainer>
   )
 }