npm - @lifi/widget - Versions diffs - 4.5.0 → 4.6.0 - Mend

@lifi/widget 4.5.0 → 4.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (199) hide show

package/dist/esm/pages/MainPage/MainPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MainPage.js","names":[],"sources":["../../../../src/pages/MainPage/MainPage.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { AmountInput } from '../../components/AmountInput/AmountInput.js'\nimport { AmountInputCardPair } from '../../components/AmountInputCard/AmountInputCardPair.js'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { GasRefuelMessage } from '../../components/Messages/GasRefuelMessage.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { Routes } from '../../components/Routes/Routes.js'\nimport { SelectChainAndToken } from '../../components/SelectChainAndToken.js'\nimport { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js'\nimport { SettingsPanel } from '../../components/SettingsPanel/SettingsPanel.js'\nimport { advancedNavigationTabKeys } from '../../components/SettingsPanel/utils.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useWideVariant } from '../../hooks/useWideVariant.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { LimitPageContent } from './LimitPageContent.js'\nimport { MainPageActions } from './MainPageActions.js'\n\nconst marginSx = { marginBottom: 2 }\n\nexport const MainPage: React.FC = () => {\n const { t } = useTranslation()\n const wideVariant = useWideVariant()\n const { mode, modeOptions, contractComponent, hiddenUI, defaultUI } =\n useWidgetConfig()\n const activeTab = useNavigationTabsStore((state) => state.activeTab)\n\n const custom = mode === 'custom'\n // Surface the settings panel on the main page for advanced navigation tabs.\n const advancedMode =\n !!activeTab && advancedNavigationTabKeys.includes(activeTab)\n const showSendReceiveCards = defaultUI?.layout === 'cards'\n // Custom non-deposit contract flows have no amount entry — they keep the\n // chain/token selectors only, in both layouts.\n const showAmountEntry = !custom \|\| modeOptions?.custom?.type === 'deposit'\n const showGasRefuelMessage = !hiddenUI?.gasRefuelMessage\n\n const splitTitle =\n modeOptions?.split === 'bridge'\n ? t('header.bridge')\n : modeOptions?.split === 'swap'\n ? t('header.swap')\n : undefined\n const title =\n mode === 'limit'\n ? t('header.limit')\n : mode === 'custom'\n ? t(`header.${modeOptions?.custom?.type ?? 'checkout'}`)\n : mode === 'refuel'\n ? t('header.gas')\n : mode === 'split' && splitTitle\n ? splitTitle\n : t('header.exchange')\n\n useHeader(title)\n\n if (mode === 'limit') {\n return <LimitPageContent />\n }\n\n return (\n <PageContainer topGutters>\n {custom ? (\n <ContractComponent sx={marginSx}>{contractComponent}</ContractComponent>\n ) : null}\n {showSendReceiveCards && showAmountEntry ? (\n <AmountInputCardPair sx={marginSx} />\n ) : (\n <>\n <SelectChainAndToken sx={marginSx} />\n {!showSendReceiveCards && showAmountEntry ? (\n <AmountInput formType=\"from\" sx={marginSx} />\n ) : null}\n </>\n )}\n {advancedMode ? <SettingsPanel sx={marginSx} /> : null}\n {!wideVariant ? <Routes sx={marginSx} /> : null}\n <SendToWalletButton sx={marginSx} />\n {showGasRefuelMessage ? <GasRefuelMessage sx={marginSx} /> : null}\n <MainPageActions showSendToWalletExpand />\n </PageContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,MAAM,WAAW,EAAE,cAAc,EAAE;AAEnC,MAAa,iBAA2B;CACtC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,cAAc,eAAe;CACnC,MAAM,EAAE,MAAM,aAAa,mBAAmB,UAAU,cACtD,gBAAgB;CAClB,MAAM,YAAY,wBAAwB,UAAU,MAAM,SAAS;CAEnE,MAAM,SAAS,SAAS;CAExB,MAAM,eACJ,CAAC,CAAC,aAAa,0BAA0B,SAAS,SAAS;CAC7D,MAAM,uBAAuB,WAAW,WAAW;CAGnD,MAAM,kBAAkB,CAAC,UAAU,aAAa,QAAQ,SAAS;CACjE,MAAM,uBAAuB,CAAC,UAAU;CAExC,MAAM,aACJ,aAAa,UAAU,WACnB,EAAE,eAAe,IACjB,aAAa,UAAU,SACrB,EAAE,aAAa,IACf,KAAA;~~CAYR~~,~~UAVE~~,SAAS,UACL,EAAE,cAAc,IAChB,SAAS,WACP,EAAE,UAAU,aAAa,QAAQ,QAAQ,YAAY,IACrD,SAAS,WACP,EAAE,YAAY,IACd,SAAS,WAAW,aAClB,aACA,EAAE,iBAAiB,~~CAEhB~~;CAEf,IAAI,SAAS,SACX,OAAO,oBAAC,kBAAD,CAAmB,CAAA;CAG5B,OACE,qBAAC,eAAD;EAAe,YAAA;EAAf,UAAA;GACG,SACC,oBAAC,mBAAD;IAAmB,IAAI;IAAW,UAAA;GAAqC,CAAA,IACrE;GACH,wBAAwB,kBACvB,oBAAC,qBAAD,EAAqB,IAAI,SAAW,CAAA,IAEpC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,qBAAD,EAAqB,IAAI,SAAW,CAAA,GACnC,CAAC,wBAAwB,kBACxB,oBAAC,aAAD;IAAa,UAAS;IAAO,IAAI;GAAW,CAAA,IAC1C,IACJ,EAAA,CAAA;GAEH,eAAe,oBAAC,eAAD,EAAe,IAAI,SAAW,CAAA,IAAI;GACjD,CAAC,cAAc,oBAAC,QAAD,EAAQ,IAAI,SAAW,CAAA,IAAI;GAC3C,oBAAC,oBAAD,EAAoB,IAAI,SAAW,CAAA;GAClC,uBAAuB,oBAAC,kBAAD,EAAkB,IAAI,SAAW,CAAA,IAAI;GAC7D,oBAAC,iBAAD,EAAiB,wBAAA,KAAwB,CAAA;EAC5B;;AAEnB"}
1	+ {"version":3,"file":"MainPage.js","names":[],"sources":["../../../../src/pages/MainPage/MainPage.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { AmountInput } from '../../components/AmountInput/AmountInput.js'\nimport { AmountInputCardPair } from '../../components/AmountInputCard/AmountInputCardPair.js'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { GasRefuelMessage } from '../../components/Messages/GasRefuelMessage.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { Routes } from '../../components/Routes/Routes.js'\nimport { SelectChainAndToken } from '../../components/SelectChainAndToken.js'\nimport { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js'\nimport { SettingsPanel } from '../../components/SettingsPanel/SettingsPanel.js'\nimport { advancedNavigationTabKeys } from '../../components/SettingsPanel/utils.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useWideVariant } from '../../hooks/useWideVariant.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { LimitPageContent } from './LimitPageContent.js'\nimport { MainPageActions } from './MainPageActions.js'\n\nconst marginSx = { marginBottom: 2 }\n\nexport const MainPage: React.FC = () => {\n const { t } = useTranslation()\n const wideVariant = useWideVariant()\n const { mode, modeOptions, contractComponent, hiddenUI, defaultUI } =\n useWidgetConfig()\n const activeTab = useNavigationTabsStore((state) => state.activeTab)\n\n const custom = mode === 'custom'\n // Surface the settings panel on the main page for advanced navigation tabs.\n const advancedMode =\n !!activeTab && advancedNavigationTabKeys.includes(activeTab)\n const showSendReceiveCards = defaultUI?.layout === 'cards'\n // Custom non-deposit contract flows have no amount entry — they keep the\n // chain/token selectors only, in both layouts.\n const showAmountEntry = !custom \|\| modeOptions?.custom?.type === 'deposit'\n const showGasRefuelMessage = !hiddenUI?.gasRefuelMessage\n\n const splitTitle =\n modeOptions?.split === 'bridge'\n ? t('header.bridge')\n : modeOptions?.split === 'swap'\n ? t('header.swap')\n : undefined\n const title =\n mode === 'limit'\n ? t('header.limit')\n : mode === 'custom'\n ? t(`header.${modeOptions?.custom?.type ?? 'checkout'}`)\n : mode === 'refuel'\n ? t('header.gas')\n : mode === 'split' && splitTitle\n ? splitTitle\n : t('header.exchange')\n\n useHeader(title)\n\n if (mode === 'limit') {\n return <LimitPageContent />\n }\n\n return (\n <PageContainer topGutters>\n {custom ? (\n <ContractComponent sx={marginSx}>{contractComponent}</ContractComponent>\n ) : null}\n {showSendReceiveCards && showAmountEntry ? (\n <AmountInputCardPair sx={marginSx} />\n ) : (\n <>\n <SelectChainAndToken sx={marginSx} />\n {!showSendReceiveCards && showAmountEntry ? (\n <AmountInput formType=\"from\" sx={marginSx} />\n ) : null}\n </>\n )}\n {advancedMode ? <SettingsPanel sx={marginSx} /> : null}\n {!wideVariant ? <Routes sx={marginSx} /> : null}\n <SendToWalletButton sx={marginSx} />\n {showGasRefuelMessage ? <GasRefuelMessage sx={marginSx} /> : null}\n <MainPageActions showSendToWalletExpand />\n </PageContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,MAAM,WAAW,EAAE,cAAc,EAAE;AAEnC,MAAa,iBAA2B;CACtC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,cAAc,eAAe;CACnC,MAAM,EAAE,MAAM,aAAa,mBAAmB,UAAU,cACtD,gBAAgB;CAClB,MAAM,YAAY,wBAAwB,UAAU,MAAM,SAAS;CAEnE,MAAM,SAAS,SAAS;CAExB,MAAM,eACJ,CAAC,CAAC,aAAa,0BAA0B,SAAS,SAAS;CAC7D,MAAM,uBAAuB,WAAW,WAAW;CAGnD,MAAM,kBAAkB,CAAC,UAAU,aAAa,QAAQ,SAAS;CACjE,MAAM,uBAAuB,CAAC,UAAU;CAExC,MAAM,aACJ,aAAa,UAAU,WACnB,EAAE,eAAe,IACjB,aAAa,UAAU,SACrB,EAAE,aAAa,IACf,KAAA;CACR,MAAM,QACJ,SAAS,UACL,EAAE,cAAc,IAChB,SAAS,WACP,EAAE,UAAU,aAAa,QAAQ,QAAQ,YAAY,IACrD,SAAS,WACP,EAAE,YAAY,IACd,SAAS,WAAW,aAClB,aACA,EAAE,iBAAiB;CAE/B,UAAU,KAAK;CAEf,IAAI,SAAS,SACX,OAAO,oBAAC,kBAAD,CAAmB,CAAA;CAG5B,OACE,qBAAC,eAAD;EAAe,YAAA;EAAf,UAAA;GACG,SACC,oBAAC,mBAAD;IAAmB,IAAI;IAAW,UAAA;GAAqC,CAAA,IACrE;GACH,wBAAwB,kBACvB,oBAAC,qBAAD,EAAqB,IAAI,SAAW,CAAA,IAEpC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,qBAAD,EAAqB,IAAI,SAAW,CAAA,GACnC,CAAC,wBAAwB,kBACxB,oBAAC,aAAD;IAAa,UAAS;IAAO,IAAI;GAAW,CAAA,IAC1C,IACJ,EAAA,CAAA;GAEH,eAAe,oBAAC,eAAD,EAAe,IAAI,SAAW,CAAA,IAAI;GACjD,CAAC,cAAc,oBAAC,QAAD,EAAQ,IAAI,SAAW,CAAA,IAAI;GAC3C,oBAAC,oBAAD,EAAoB,IAAI,SAAW,CAAA;GAClC,uBAAuB,oBAAC,kBAAD,EAAkB,IAAI,SAAW,CAAA,IAAI;GAC7D,oBAAC,iBAAD,EAAiB,wBAAA,KAAwB,CAAA;EAC5B;;AAEnB"}

package/dist/esm/pages/MainPage/ReviewButton.js CHANGED Viewed

@@ -17,7 +17,7 @@ const ReviewButton = () => {
 	const emitter = useWidgetEvents();
 	const { mode, modeOptions } = useWidgetConfig();
 	const splitState = useSplitMode();
-	const { toAddress, requiredToAddress } = useToAddressRequirements();
+	const { toAddress, requiredToAddress, unsupportedReceiverBlocking } = useToAddressRequirements();
 	const { routes, setReviewableRoute } = useRoutes();
 	const [selectedRouteId] = useFieldValues("selectedRouteId");
 	const currentRoute = (mode === "limit" ? routes?.find((route) => route.id === selectedRouteId) : void 0) ?? routes?.[0];
@@ -56,7 +56,7 @@ const ReviewButton = () => {
 	return /* @__PURE__ */ jsx(BaseTransactionButton, {
 		text: getButtonText(),
 		onClick: handleClick,
-		disabled: currentRoute && requiredToAddress && !toAddress,
+		disabled: currentRoute && (unsupportedReceiverBlocking || requiredToAddress && !toAddress),
 		route: currentRoute,
 		sx: { flex: 1 }
 	});

package/dist/esm/pages/MainPage/ReviewButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ReviewButton.js","names":[],"sources":["../../../../src/pages/MainPage/ReviewButton.tsx"],"sourcesContent":["import { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const ReviewButton: React.FC = () => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const emitter = useWidgetEvents()\n const { mode, modeOptions } = useWidgetConfig()\n const splitState = useSplitMode()\n const { toAddress, requiredToAddress } = useToAddressRequirements()\n const { routes, setReviewableRoute } = useRoutes()\n const [selectedRouteId] = useFieldValues('selectedRouteId')\n\n // The provider pick only applies in limit mode (it's the only flow that sets\n // it). Honoring it in other modes would be wrong, since provider/tool keys\n // can collide across modes. Everywhere else, fall back to the best route.\n const currentRoute =\n (mode === 'limit'\n ? routes?.find((route) => route.id === selectedRouteId)\n : undefined) ?? routes?.[0]\n\n const handleClick = async () => {\n if (!currentRoute) {\n return\n }\n\n setReviewableRoute(currentRoute)\n navigate({\n to: navigationRoutes.transactionExecution,\n search: { routeId: currentRoute.id },\n })\n emitter.emit(WidgetEvent.RouteSelected, {\n route: currentRoute,\n routes: routes!,\n })\n }\n\n const getButtonText = (): string => {\n if (currentRoute) {\n switch (mode) {\n case 'custom':\n return t(`button.${modeOptions?.custom?.type ?? 'checkout'}Review`)\n case 'refuel':\n return t('button.getGas')\n case 'limit':\n return t('button.review')\n default: {\n const transactionType =\n currentRoute.fromChainId === currentRoute.toChainId\n ? 'swap'\n : 'bridge'\n return t(`button.${transactionType}Review`)\n }\n }\n }\n switch (mode) {\n case 'custom':\n return modeOptions?.custom?.type === 'deposit'\n ? t('button.deposit')\n : t('button.buy')\n case 'refuel':\n return t('button.getGas')\n case 'limit':\n return t('button.review')\n case 'split':\n if (splitState) {\n return t(`button.${splitState}`)\n }\n return t('button.exchange')\n default:\n return t('button.exchange')\n }\n }\n\n return (\n <BaseTransactionButton\n text={getButtonText()}\n onClick={handleClick}\n disabled={currentRoute && requiredToAddress && !toAddress}\n route={currentRoute}\n sx={{ flex: 1 }}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,qBAA+B;CAC1C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,gBAAgB;CAChC,MAAM,EAAE,MAAM,gBAAgB,gBAAgB;CAC9C,MAAM,aAAa,aAAa;CAChC,MAAM,EAAE,WAAW,~~sBAAsB~~,yBAAyB;~~CAClE~~,MAAM,EAAE,QAAQ,uBAAuB,UAAU;CACjD,MAAM,CAAC,mBAAmB,eAAe,iBAAiB;CAK1D,MAAM,gBACH,SAAS,UACN,QAAQ,MAAM,UAAU,MAAM,OAAO,eAAe,IACpD,KAAA,MAAc,SAAS;CAE7B,MAAM,cAAc,YAAY;EAC9B,IAAI,CAAC,cACH;EAGF,mBAAmB,YAAY;EAC/B,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,aAAa,GAAG;EACrC,CAAC;EACD,QAAQ,KAAA,iBAAgC;GACtC,OAAO;GACC;EACV,CAAC;CACH;CAEA,MAAM,sBAA8B;EAClC,IAAI,cACF,QAAQ,MAAR;GACE,KAAK,UACH,OAAO,EAAE,UAAU,aAAa,QAAQ,QAAQ,WAAW,OAAO;GACpE,KAAK,UACH,OAAO,EAAE,eAAe;GAC1B,KAAK,SACH,OAAO,EAAE,eAAe;GAC1B,SAAS;IACP,MAAM,kBACJ,aAAa,gBAAgB,aAAa,YACtC,SACA;IACN,OAAO,EAAE,UAAU,gBAAgB,OAAO;GAC5C;EACF;EAEF,QAAQ,MAAR;GACE,KAAK,UACH,OAAO,aAAa,QAAQ,SAAS,YACjC,EAAE,gBAAgB,IAClB,EAAE,YAAY;GACpB,KAAK,UACH,OAAO,EAAE,eAAe;GAC1B,KAAK,SACH,OAAO,EAAE,eAAe;GAC1B,KAAK;IACH,IAAI,YACF,OAAO,EAAE,UAAU,YAAY;IAEjC,OAAO,EAAE,iBAAiB;GAC5B,SACE,OAAO,EAAE,iBAAiB;EAC9B;CACF;CAEA,OACE,oBAAC,uBAAD;EACE,MAAM,cAAc;EACpB,SAAS;EACT,~~UAAU~~,~~gBAAgB~~,qBAAqB,CAAC;~~EAChD~~,OAAO;EACP,IAAI,EAAE,MAAM,EAAE;CACf,CAAA;AAEL"}
1	+ {"version":3,"file":"ReviewButton.js","names":[],"sources":["../../../../src/pages/MainPage/ReviewButton.tsx"],"sourcesContent":["import { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const ReviewButton: React.FC = () => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const emitter = useWidgetEvents()\n const { mode, modeOptions } = useWidgetConfig()\n const splitState = useSplitMode()\n const { toAddress, requiredToAddress, unsupportedReceiverBlocking } =\n useToAddressRequirements()\n const { routes, setReviewableRoute } = useRoutes()\n const [selectedRouteId] = useFieldValues('selectedRouteId')\n\n // The provider pick only applies in limit mode (it's the only flow that sets\n // it). Honoring it in other modes would be wrong, since provider/tool keys\n // can collide across modes. Everywhere else, fall back to the best route.\n const currentRoute =\n (mode === 'limit'\n ? routes?.find((route) => route.id === selectedRouteId)\n : undefined) ?? routes?.[0]\n\n const handleClick = async () => {\n if (!currentRoute) {\n return\n }\n\n setReviewableRoute(currentRoute)\n navigate({\n to: navigationRoutes.transactionExecution,\n search: { routeId: currentRoute.id },\n })\n emitter.emit(WidgetEvent.RouteSelected, {\n route: currentRoute,\n routes: routes!,\n })\n }\n\n const getButtonText = (): string => {\n if (currentRoute) {\n switch (mode) {\n case 'custom':\n return t(`button.${modeOptions?.custom?.type ?? 'checkout'}Review`)\n case 'refuel':\n return t('button.getGas')\n case 'limit':\n return t('button.review')\n default: {\n const transactionType =\n currentRoute.fromChainId === currentRoute.toChainId\n ? 'swap'\n : 'bridge'\n return t(`button.${transactionType}Review`)\n }\n }\n }\n switch (mode) {\n case 'custom':\n return modeOptions?.custom?.type === 'deposit'\n ? t('button.deposit')\n : t('button.buy')\n case 'refuel':\n return t('button.getGas')\n case 'limit':\n return t('button.review')\n case 'split':\n if (splitState) {\n return t(`button.${splitState}`)\n }\n return t('button.exchange')\n default:\n return t('button.exchange')\n }\n }\n\n return (\n <BaseTransactionButton\n text={getButtonText()}\n onClick={handleClick}\n disabled={\n currentRoute &&\n (unsupportedReceiverBlocking \|\| (requiredToAddress && !toAddress))\n }\n route={currentRoute}\n sx={{ flex: 1 }}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,qBAA+B;CAC1C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,gBAAgB;CAChC,MAAM,EAAE,MAAM,gBAAgB,gBAAgB;CAC9C,MAAM,aAAa,aAAa;CAChC,MAAM,EAAE,WAAW,mBAAmB,gCACpC,yBAAyB;CAC3B,MAAM,EAAE,QAAQ,uBAAuB,UAAU;CACjD,MAAM,CAAC,mBAAmB,eAAe,iBAAiB;CAK1D,MAAM,gBACH,SAAS,UACN,QAAQ,MAAM,UAAU,MAAM,OAAO,eAAe,IACpD,KAAA,MAAc,SAAS;CAE7B,MAAM,cAAc,YAAY;EAC9B,IAAI,CAAC,cACH;EAGF,mBAAmB,YAAY;EAC/B,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,aAAa,GAAG;EACrC,CAAC;EACD,QAAQ,KAAA,iBAAgC;GACtC,OAAO;GACC;EACV,CAAC;CACH;CAEA,MAAM,sBAA8B;EAClC,IAAI,cACF,QAAQ,MAAR;GACE,KAAK,UACH,OAAO,EAAE,UAAU,aAAa,QAAQ,QAAQ,WAAW,OAAO;GACpE,KAAK,UACH,OAAO,EAAE,eAAe;GAC1B,KAAK,SACH,OAAO,EAAE,eAAe;GAC1B,SAAS;IACP,MAAM,kBACJ,aAAa,gBAAgB,aAAa,YACtC,SACA;IACN,OAAO,EAAE,UAAU,gBAAgB,OAAO;GAC5C;EACF;EAEF,QAAQ,MAAR;GACE,KAAK,UACH,OAAO,aAAa,QAAQ,SAAS,YACjC,EAAE,gBAAgB,IAClB,EAAE,YAAY;GACpB,KAAK,UACH,OAAO,EAAE,eAAe;GAC1B,KAAK,SACH,OAAO,EAAE,eAAe;GAC1B,KAAK;IACH,IAAI,YACF,OAAO,EAAE,UAAU,YAAY;IAEjC,OAAO,EAAE,iBAAiB;GAC5B,SACE,OAAO,EAAE,iBAAiB;EAC9B;CACF;CAEA,OACE,oBAAC,uBAAD;EACE,MAAM,cAAc;EACpB,SAAS;EACT,UACE,iBACC,+BAAgC,qBAAqB,CAAC;EAEzD,OAAO;EACP,IAAI,EAAE,MAAM,EAAE;CACf,CAAA;AAEL"}

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

@@ -27,7 +27,7 @@ const RoutesPage = () => {
 	const { routes, isLoading, isFetching, dataUpdatedAt, refetchTime, fromChain, refetch, setReviewableRoute } = useRoutes();
 	const { account } = useAccount({ chainType: fromChain?.chainType });
 	const [toAddress] = useFieldValues("toAddress");
-	const { requiredToAddress } = useToAddressRequirements();
+	const { requiredToAddress, unsupportedReceiverBlocking } = useToAddressRequirements();
 	const headerAction = useMemo(() => /* @__PURE__ */ jsx(ProgressToNextUpdate, {
 		updatedAt: dataUpdatedAt || Date.now(),
 		timeToUpdate: refetchTime,
@@ -55,7 +55,7 @@ const RoutesPage = () => {
 		});
 	};
 	const routeNotFound = !routes?.length && !isLoading && !isFetching;
-	const toAddressUnsatisfied = routes?.[0] && requiredToAddress && !toAddress;
+	const toAddressUnsatisfied = routes?.[0] && (unsupportedReceiverBlocking || requiredToAddress && !toAddress);
 	const allowInteraction = account.isConnected && !toAddressUnsatisfied;
 	return /* @__PURE__ */ jsx(PageContainer, {
 		disableGutters: true,

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

	@@ -1 +1 @@
1	- {"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;EACb,UAAA,oBAAC,KAAD;GACE,WAAU;GACV,KAAK;GACL,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;GAE9C,UAAA,oBAACA,SAAD;IAAO,WAAU;IAAS,SAAS;IAAG,IAAI,EAAE,IAAI,IAAI;IACjD,UAAA,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"}
1	+ {"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, unsupportedReceiverBlocking } =\n 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 =\n routes?.[0] &&\n (unsupportedReceiverBlocking \|\| (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,mBAAmB,gCACzB,yBAAyB;CAE3B,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,uBACJ,SAAS,OACR,+BAAgC,qBAAqB,CAAC;CAEzD,MAAM,mBAAmB,QAAQ,eAAe,CAAC;CAEjD,OACE,oBAAC,eAAD;EAAe,gBAAA;EACb,UAAA,oBAAC,KAAD;GACE,WAAU;GACV,KAAK;GACL,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;GAE9C,UAAA,oBAACA,SAAD;IAAO,WAAU;IAAS,SAAS;IAAG,IAAI,EAAE,IAAI,IAAI;IACjD,UAAA,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/dist/esm/pages/SelectChainPage/SelectChainPage.js CHANGED Viewed

@@ -13,20 +13,21 @@ const SelectChainPage = ({ formType, selectNativeToken }) => {
 	const selectToken = useTokenSelect(formType, navigateBack);
 	const { t } = useTranslation();
 	useHeader(t("header.selectChain"));
+	const handleClick = useCallback(async (chain) => {
+		if (selectNativeToken) selectToken(chain.nativeToken.address, chain.id);
+		else {
+			setCurrentChain(chain.id);
+			navigateBack();
+		}
+	}, [
+		navigateBack,
+		selectNativeToken,
+		selectToken,
+		setCurrentChain
+	]);
 	return /* @__PURE__ */ jsx(SelectChainPageContent, {
 		formType,
-		onSelect: useCallback(async (chain) => {
-			if (selectNativeToken) selectToken(chain.nativeToken.address, chain.id);
-			else {
-				setCurrentChain(chain.id);
-				navigateBack();
-			}
-		}, [
-			navigateBack,
-			selectNativeToken,
-			selectToken,
-			setCurrentChain
-		])
+		onSelect: handleClick
 	});
 };
 //#endregion

package/dist/esm/pages/SelectChainPage/SelectChainPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectChainPage.js","names":[],"sources":["../../../../src/pages/SelectChainPage/SelectChainPage.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { useCallback } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainSelect } from '../../components/ChainSelect/useChainSelect.js'\nimport { SelectChainPageContent } from '../../components/Chains/SelectChainPageContent.js'\nimport { useTokenSelect } from '../../components/TokenList/useTokenSelect.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport type { SelectChainPageProps } from './types.js'\n\nexport const SelectChainPage: React.FC<SelectChainPageProps> = ({\n formType,\n selectNativeToken,\n}) => {\n const navigateBack = useNavigateBack()\n const { setCurrentChain } = useChainSelect(formType)\n const selectToken = useTokenSelect(formType, navigateBack)\n\n const { t } = useTranslation()\n\n useHeader(t('header.selectChain'))\n\n const handleClick = useCallback(\n async (chain: ExtendedChain) => {\n if (selectNativeToken) {\n selectToken(chain.nativeToken.address, chain.id)\n } else {\n setCurrentChain(chain.id)\n navigateBack()\n }\n },\n [navigateBack, selectNativeToken, selectToken, setCurrentChain]\n )\n\n return <SelectChainPageContent formType={formType} onSelect={handleClick} />\n}\n"],"mappings":";;;;;;;;;AAUA,MAAa,mBAAmD,EAC9D,UACA,wBACI;CACJ,MAAM,eAAe,gBAAgB;CACrC,MAAM,EAAE,oBAAoB,eAAe,QAAQ;CACnD,MAAM,cAAc,eAAe,UAAU,YAAY;CAEzD,MAAM,EAAE,MAAM,eAAe;CAE7B,UAAU,EAAE,oBAAoB,CAAC;~~CAcjC~~,~~OAAO~~,~~oBAAC~~,~~wBAAD;EAAkC;EAAU,UAZ/B,~~YAClB,OAAO,UAAyB;~~GAC9B~~,IAAI,mBACF,YAAY,MAAM,YAAY,SAAS,MAAM,EAAE;~~QAC1C~~;~~IACL~~,gBAAgB,MAAM,EAAE;~~IACxB~~,aAAa;~~GACf~~;~~EACF~~,GACA;~~GAAC~~;~~GAAc~~;~~GAAmB~~;~~GAAa~~;~~EAAe~~,~~CAGO~~;~~CAAI~~,CAAA;AAC7E"}
1	+ {"version":3,"file":"SelectChainPage.js","names":[],"sources":["../../../../src/pages/SelectChainPage/SelectChainPage.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { useCallback } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainSelect } from '../../components/ChainSelect/useChainSelect.js'\nimport { SelectChainPageContent } from '../../components/Chains/SelectChainPageContent.js'\nimport { useTokenSelect } from '../../components/TokenList/useTokenSelect.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport type { SelectChainPageProps } from './types.js'\n\nexport const SelectChainPage: React.FC<SelectChainPageProps> = ({\n formType,\n selectNativeToken,\n}) => {\n const navigateBack = useNavigateBack()\n const { setCurrentChain } = useChainSelect(formType)\n const selectToken = useTokenSelect(formType, navigateBack)\n\n const { t } = useTranslation()\n\n useHeader(t('header.selectChain'))\n\n const handleClick = useCallback(\n async (chain: ExtendedChain) => {\n if (selectNativeToken) {\n selectToken(chain.nativeToken.address, chain.id)\n } else {\n setCurrentChain(chain.id)\n navigateBack()\n }\n },\n [navigateBack, selectNativeToken, selectToken, setCurrentChain]\n )\n\n return <SelectChainPageContent formType={formType} onSelect={handleClick} />\n}\n"],"mappings":";;;;;;;;;AAUA,MAAa,mBAAmD,EAC9D,UACA,wBACI;CACJ,MAAM,eAAe,gBAAgB;CACrC,MAAM,EAAE,oBAAoB,eAAe,QAAQ;CACnD,MAAM,cAAc,eAAe,UAAU,YAAY;CAEzD,MAAM,EAAE,MAAM,eAAe;CAE7B,UAAU,EAAE,oBAAoB,CAAC;CAEjC,MAAM,cAAc,YAClB,OAAO,UAAyB;EAC9B,IAAI,mBACF,YAAY,MAAM,YAAY,SAAS,MAAM,EAAE;OAC1C;GACL,gBAAgB,MAAM,EAAE;GACxB,aAAa;EACf;CACF,GACA;EAAC;EAAc;EAAmB;EAAa;CAAe,CAChE;CAEA,OAAO,oBAAC,wBAAD;EAAkC;EAAU,UAAU;CAAc,CAAA;AAC7E"}

package/dist/esm/pages/SelectEnabledToolsPage.js CHANGED Viewed

@@ -13,8 +13,9 @@ import { useTranslation } from "react-i18next";
 //#region src/pages/SelectEnabledToolsPage.tsx
 const SelectAllCheckbox = memo(({ allCheckboxesSelected, anyCheckboxesSelected, noCheckboxesAvailable, onClick }) => {
 	const { t } = useTranslation();
+	const tooltipTitle = noCheckboxesAvailable ? void 0 : allCheckboxesSelected ? t("tooltip.deselectAll") : t("tooltip.selectAll");
 	return /* @__PURE__ */ jsx(Tooltip, {
-		title: noCheckboxesAvailable ? void 0 : allCheckboxesSelected ? t("tooltip.deselectAll") : t("tooltip.selectAll"),
+		title: tooltipTitle,
 		children: /* @__PURE__ */ jsx(Checkbox, {
 			id: "select-all",
 			checked: allCheckboxesSelected,
@@ -69,6 +70,11 @@ const SelectEnabledToolsPage = ({ type }) => {
 		filteredTools
 	]);
 	useHeader(t(`settings.enabled${type}`), headerAction);
+	const handleSearchInputChange = useCallback((e) => {
+		setSearchValue(e.target.value);
+		listRef.current?.scrollTo(0, 0);
+	}, []);
+	const debouncedSearchInputChange = debounce(handleSearchInputChange, 250);
 	return /* @__PURE__ */ jsxs(PageContainer, {
 		disableGutters: true,
 		children: [/* @__PURE__ */ jsx(Box, {
@@ -79,10 +85,7 @@ const SelectEnabledToolsPage = ({ type }) => {
 				pt: 1.5
 			},
 			children: /* @__PURE__ */ jsx(SearchInput, {
-				onChange: debounce(useCallback((e) => {
-					setSearchValue(e.target.value);
-					listRef.current?.scrollTo(0, 0);
-				}, []), 250),
+				onChange: debouncedSearchInputChange,
 				placeholder: t(`main.search${type}`),
 				autoFocus: true
 			})

package/dist/esm/pages/SelectEnabledToolsPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectEnabledToolsPage.js","names":[],"sources":["../../../src/pages/SelectEnabledToolsPage.tsx"],"sourcesContent":["import { Box, Checkbox, debounce, Tooltip } from '@mui/material'\nimport type { ChangeEvent, ChangeEventHandler } from 'react'\nimport { memo, useCallback, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { PageContainer } from '../components/PageContainer.js'\nimport { SearchInput } from '../components/Search/SearchInput.js'\nimport { type ToolCollectionTypes, Tools } from '../components/Tools/Tools.js'\nimport { useHeader } from '../hooks/useHeader.js'\nimport { useListHeight } from '../hooks/useListHeight.js'\nimport { useTools } from '../hooks/useTools.js'\nimport { useSettingsStore } from '../stores/settings/SettingsStore.js'\nimport { useSettingsActions } from '../stores/settings/useSettingsActions.js'\n\ninterface SelectAllCheckboxProps {\n allCheckboxesSelected: boolean\n onClick: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void\n anyCheckboxesSelected: boolean\n noCheckboxesAvailable: boolean\n}\n\nconst SelectAllCheckbox = memo<SelectAllCheckboxProps>(\n ({\n allCheckboxesSelected,\n anyCheckboxesSelected,\n noCheckboxesAvailable,\n onClick,\n }) => {\n const { t } = useTranslation()\n const tooltipTitle = noCheckboxesAvailable\n ? undefined\n : allCheckboxesSelected\n ? t('tooltip.deselectAll')\n : t('tooltip.selectAll')\n\n return (\n <Tooltip title={tooltipTitle}>\n <Checkbox\n id=\"select-all\"\n checked={allCheckboxesSelected}\n indeterminate={anyCheckboxesSelected && !allCheckboxesSelected}\n onChange={onClick}\n disabled={noCheckboxesAvailable}\n sx={{ mr: -1.5, height: 20 }}\n />\n </Tooltip>\n )\n }\n)\n\nexport const SelectEnabledToolsPage: React.FC<{\n type: 'Bridges' \| 'Exchanges'\n}> = ({ type }) => {\n const typeKey = type.toLowerCase() as 'bridges' \| 'exchanges'\n const { tools } = useTools()\n const { toggleToolKeys } = useSettingsActions()\n\n const disabledTools = useSettingsStore((state) => state[`disabled${type}`])\n\n const { t } = useTranslation()\n const headerRef = useRef<HTMLElement>(null)\n const listRef = useRef<HTMLDivElement>(null)\n const [searchValue, setSearchValue] = useState('')\n\n const { listHeight } = useListHeight({\n listParentRef: listRef,\n headerRef,\n })\n\n const filteredTools = useMemo(() => {\n const toolsList = tools?.[typeKey] ?? []\n\n if (!searchValue) {\n return toolsList\n }\n\n const lowerSearchValue = searchValue.toLowerCase()\n return toolsList.filter((tool) =>\n tool.name.toLowerCase().includes(lowerSearchValue)\n ) as ToolCollectionTypes\n }, [tools, typeKey, searchValue])\n\n const handleSelectAll = useCallback(() => {\n toggleToolKeys(\n type,\n filteredTools.map((tool) => tool.key)\n )\n }, [toggleToolKeys, type, filteredTools])\n\n const headerAction = useMemo(\n () => (\n <SelectAllCheckbox\n allCheckboxesSelected={\n !!filteredTools.length &&\n filteredTools.every((tool) => !disabledTools.includes(tool.key))\n }\n anyCheckboxesSelected={\n !!filteredTools.length &&\n filteredTools.some((tool) => disabledTools.includes(tool.key))\n }\n noCheckboxesAvailable={!filteredTools.length}\n onClick={handleSelectAll}\n />\n ),\n [disabledTools, handleSelectAll, filteredTools]\n )\n\n useHeader(t(`settings.enabled${type}`), headerAction)\n\n const handleSearchInputChange: ChangeEventHandler<HTMLInputElement> =\n useCallback((e) => {\n setSearchValue(e.target.value)\n listRef.current?.scrollTo(0, 0)\n }, [])\n\n const debouncedSearchInputChange = debounce(handleSearchInputChange, 250)\n\n return (\n <PageContainer disableGutters>\n <Box ref={headerRef} sx={{ px: 3, pb: 2, pt: 1.5 }}>\n <SearchInput\n onChange={debouncedSearchInputChange}\n placeholder={t(`main.search${type}`)}\n autoFocus\n />\n </Box>\n <Box ref={listRef} style={{ height: listHeight, overflow: 'auto' }}>\n <Tools filteredTools={filteredTools} type={type} />\n </Box>\n </PageContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,oBAAoB,MACvB,EACC,uBACA,uBACA,uBACA,cACI;CACJ,MAAM,EAAE,MAAM,eAAe;~~CAO7B~~,~~OACE~~,~~oBAAC~~,~~SAAD;EAAS,OAPU,~~wBACjB,KAAA,IACA,wBACE,EAAE,qBAAqB,IACvB,EAAE,mBAAmB;~~EAIvB~~,UAAA,oBAAC,UAAD;GACE,IAAG;GACH,SAAS;GACT,eAAe,yBAAyB,CAAC;GACzC,UAAU;GACV,UAAU;GACV,IAAI;IAAE,IAAI;IAAM,QAAQ;GAAG;EAC5B,CAAA;CACM,CAAA;AAEb,CACF;AAEA,MAAa,0BAEP,EAAE,WAAW;CACjB,MAAM,UAAU,KAAK,YAAY;CACjC,MAAM,EAAE,UAAU,SAAS;CAC3B,MAAM,EAAE,mBAAmB,mBAAmB;CAE9C,MAAM,gBAAgB,kBAAkB,UAAU,MAAM,WAAW,OAAO;CAE1E,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,YAAY,OAAoB,IAAI;CAC1C,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CAEjD,MAAM,EAAE,eAAe,cAAc;EACnC,eAAe;EACf;CACF,CAAC;CAED,MAAM,gBAAgB,cAAc;EAClC,MAAM,YAAY,QAAQ,YAAY,CAAC;EAEvC,IAAI,CAAC,aACH,OAAO;EAGT,MAAM,mBAAmB,YAAY,YAAY;EACjD,OAAO,UAAU,QAAQ,SACvB,KAAK,KAAK,YAAY,CAAC,CAAC,SAAS,gBAAgB,CACnD;CACF,GAAG;EAAC;EAAO;EAAS;CAAW,CAAC;CAEhC,MAAM,kBAAkB,kBAAkB;EACxC,eACE,MACA,cAAc,KAAK,SAAS,KAAK,GAAG,CACtC;CACF,GAAG;EAAC;EAAgB;EAAM;CAAa,CAAC;CAExC,MAAM,eAAe,cAEjB,oBAAC,mBAAD;EACE,uBACE,CAAC,CAAC,cAAc,UAChB,cAAc,OAAO,SAAS,CAAC,cAAc,SAAS,KAAK,GAAG,CAAC;EAEjE,uBACE,CAAC,CAAC,cAAc,UAChB,cAAc,MAAM,SAAS,cAAc,SAAS,KAAK,GAAG,CAAC;EAE/D,uBAAuB,CAAC,cAAc;EACtC,SAAS;CACV,CAAA,GAEH;EAAC;EAAe;EAAiB;CAAa,CAChD;CAEA,UAAU,EAAE,mBAAmB,MAAM,GAAG,YAAY;~~CAUpD~~,OACE,qBAAC,eAAD;EAAe,gBAAA;EAAf,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK;GAAW,IAAI;IAAE,IAAI;IAAG,IAAI;IAAG,IAAI;GAAI;GAC/C,UAAA,oBAAC,aAAD;IACE,~~UAN2B,SALjC,aAAa,MAAM~~;~~KACjB~~,~~eAAe,EAAE,OAAO,KAAK;KAC7B,QAAQ,SAAS,SAAS,GAAG,CAAC;IAChC,GAAG,CAAC,CAE4D,GAAG,GAM1B;IACnC,~~aAAa,EAAE,cAAc,MAAM;IACnC,WAAA;GACD,CAAA;EACE,CAAA,GACL,oBAAC,KAAD;GAAK,KAAK;GAAS,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;GAC/D,UAAA,oBAAC,OAAD;IAAsB;IAAqB;GAAO,CAAA;EAC/C,CAAA,CACQ;;AAEnB"}
1	+ {"version":3,"file":"SelectEnabledToolsPage.js","names":[],"sources":["../../../src/pages/SelectEnabledToolsPage.tsx"],"sourcesContent":["import { Box, Checkbox, debounce, Tooltip } from '@mui/material'\nimport type { ChangeEvent, ChangeEventHandler } from 'react'\nimport { memo, useCallback, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { PageContainer } from '../components/PageContainer.js'\nimport { SearchInput } from '../components/Search/SearchInput.js'\nimport { type ToolCollectionTypes, Tools } from '../components/Tools/Tools.js'\nimport { useHeader } from '../hooks/useHeader.js'\nimport { useListHeight } from '../hooks/useListHeight.js'\nimport { useTools } from '../hooks/useTools.js'\nimport { useSettingsStore } from '../stores/settings/SettingsStore.js'\nimport { useSettingsActions } from '../stores/settings/useSettingsActions.js'\n\ninterface SelectAllCheckboxProps {\n allCheckboxesSelected: boolean\n onClick: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void\n anyCheckboxesSelected: boolean\n noCheckboxesAvailable: boolean\n}\n\nconst SelectAllCheckbox = memo<SelectAllCheckboxProps>(\n ({\n allCheckboxesSelected,\n anyCheckboxesSelected,\n noCheckboxesAvailable,\n onClick,\n }) => {\n const { t } = useTranslation()\n const tooltipTitle = noCheckboxesAvailable\n ? undefined\n : allCheckboxesSelected\n ? t('tooltip.deselectAll')\n : t('tooltip.selectAll')\n\n return (\n <Tooltip title={tooltipTitle}>\n <Checkbox\n id=\"select-all\"\n checked={allCheckboxesSelected}\n indeterminate={anyCheckboxesSelected && !allCheckboxesSelected}\n onChange={onClick}\n disabled={noCheckboxesAvailable}\n sx={{ mr: -1.5, height: 20 }}\n />\n </Tooltip>\n )\n }\n)\n\nexport const SelectEnabledToolsPage: React.FC<{\n type: 'Bridges' \| 'Exchanges'\n}> = ({ type }) => {\n const typeKey = type.toLowerCase() as 'bridges' \| 'exchanges'\n const { tools } = useTools()\n const { toggleToolKeys } = useSettingsActions()\n\n const disabledTools = useSettingsStore((state) => state[`disabled${type}`])\n\n const { t } = useTranslation()\n const headerRef = useRef<HTMLElement>(null)\n const listRef = useRef<HTMLDivElement>(null)\n const [searchValue, setSearchValue] = useState('')\n\n const { listHeight } = useListHeight({\n listParentRef: listRef,\n headerRef,\n })\n\n const filteredTools = useMemo(() => {\n const toolsList = tools?.[typeKey] ?? []\n\n if (!searchValue) {\n return toolsList\n }\n\n const lowerSearchValue = searchValue.toLowerCase()\n return toolsList.filter((tool) =>\n tool.name.toLowerCase().includes(lowerSearchValue)\n ) as ToolCollectionTypes\n }, [tools, typeKey, searchValue])\n\n const handleSelectAll = useCallback(() => {\n toggleToolKeys(\n type,\n filteredTools.map((tool) => tool.key)\n )\n }, [toggleToolKeys, type, filteredTools])\n\n const headerAction = useMemo(\n () => (\n <SelectAllCheckbox\n allCheckboxesSelected={\n !!filteredTools.length &&\n filteredTools.every((tool) => !disabledTools.includes(tool.key))\n }\n anyCheckboxesSelected={\n !!filteredTools.length &&\n filteredTools.some((tool) => disabledTools.includes(tool.key))\n }\n noCheckboxesAvailable={!filteredTools.length}\n onClick={handleSelectAll}\n />\n ),\n [disabledTools, handleSelectAll, filteredTools]\n )\n\n useHeader(t(`settings.enabled${type}`), headerAction)\n\n const handleSearchInputChange: ChangeEventHandler<HTMLInputElement> =\n useCallback((e) => {\n setSearchValue(e.target.value)\n listRef.current?.scrollTo(0, 0)\n }, [])\n\n const debouncedSearchInputChange = debounce(handleSearchInputChange, 250)\n\n return (\n <PageContainer disableGutters>\n <Box ref={headerRef} sx={{ px: 3, pb: 2, pt: 1.5 }}>\n <SearchInput\n onChange={debouncedSearchInputChange}\n placeholder={t(`main.search${type}`)}\n autoFocus\n />\n </Box>\n <Box ref={listRef} style={{ height: listHeight, overflow: 'auto' }}>\n <Tools filteredTools={filteredTools} type={type} />\n </Box>\n </PageContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,oBAAoB,MACvB,EACC,uBACA,uBACA,uBACA,cACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,eAAe,wBACjB,KAAA,IACA,wBACE,EAAE,qBAAqB,IACvB,EAAE,mBAAmB;CAE3B,OACE,oBAAC,SAAD;EAAS,OAAO;EACd,UAAA,oBAAC,UAAD;GACE,IAAG;GACH,SAAS;GACT,eAAe,yBAAyB,CAAC;GACzC,UAAU;GACV,UAAU;GACV,IAAI;IAAE,IAAI;IAAM,QAAQ;GAAG;EAC5B,CAAA;CACM,CAAA;AAEb,CACF;AAEA,MAAa,0BAEP,EAAE,WAAW;CACjB,MAAM,UAAU,KAAK,YAAY;CACjC,MAAM,EAAE,UAAU,SAAS;CAC3B,MAAM,EAAE,mBAAmB,mBAAmB;CAE9C,MAAM,gBAAgB,kBAAkB,UAAU,MAAM,WAAW,OAAO;CAE1E,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,YAAY,OAAoB,IAAI;CAC1C,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CAEjD,MAAM,EAAE,eAAe,cAAc;EACnC,eAAe;EACf;CACF,CAAC;CAED,MAAM,gBAAgB,cAAc;EAClC,MAAM,YAAY,QAAQ,YAAY,CAAC;EAEvC,IAAI,CAAC,aACH,OAAO;EAGT,MAAM,mBAAmB,YAAY,YAAY;EACjD,OAAO,UAAU,QAAQ,SACvB,KAAK,KAAK,YAAY,CAAC,CAAC,SAAS,gBAAgB,CACnD;CACF,GAAG;EAAC;EAAO;EAAS;CAAW,CAAC;CAEhC,MAAM,kBAAkB,kBAAkB;EACxC,eACE,MACA,cAAc,KAAK,SAAS,KAAK,GAAG,CACtC;CACF,GAAG;EAAC;EAAgB;EAAM;CAAa,CAAC;CAExC,MAAM,eAAe,cAEjB,oBAAC,mBAAD;EACE,uBACE,CAAC,CAAC,cAAc,UAChB,cAAc,OAAO,SAAS,CAAC,cAAc,SAAS,KAAK,GAAG,CAAC;EAEjE,uBACE,CAAC,CAAC,cAAc,UAChB,cAAc,MAAM,SAAS,cAAc,SAAS,KAAK,GAAG,CAAC;EAE/D,uBAAuB,CAAC,cAAc;EACtC,SAAS;CACV,CAAA,GAEH;EAAC;EAAe;EAAiB;CAAa,CAChD;CAEA,UAAU,EAAE,mBAAmB,MAAM,GAAG,YAAY;CAEpD,MAAM,0BACJ,aAAa,MAAM;EACjB,eAAe,EAAE,OAAO,KAAK;EAC7B,QAAQ,SAAS,SAAS,GAAG,CAAC;CAChC,GAAG,CAAC,CAAC;CAEP,MAAM,6BAA6B,SAAS,yBAAyB,GAAG;CAExE,OACE,qBAAC,eAAD;EAAe,gBAAA;EAAf,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK;GAAW,IAAI;IAAE,IAAI;IAAG,IAAI;IAAG,IAAI;GAAI;GAC/C,UAAA,oBAAC,aAAD;IACE,UAAU;IACV,aAAa,EAAE,cAAc,MAAM;IACnC,WAAA;GACD,CAAA;EACE,CAAA,GACL,oBAAC,KAAD;GAAK,KAAK;GAAS,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;GAC/D,UAAA,oBAAC,OAAD;IAAsB;IAAqB;GAAO,CAAA;EAC/C,CAAA,CACQ;;AAEnB"}

package/dist/esm/pages/SelectTokenPage/SelectTokenPage.js CHANGED Viewed

@@ -17,7 +17,8 @@ const SelectTokenPage = ({ formType }) => {
 	const { mode, hiddenUI } = useWidgetConfig();
 	const wideVariant = useWideVariant();
 	const { t } = useTranslation();
-	useHeader(formType === "from" ? mode === "custom" ? t("header.payWith") : t("header.from") : t("header.to"));
+	const title = formType === "from" ? mode === "custom" ? t("header.payWith") : t("header.from") : t("header.to");
+	useHeader(title);
 	const hideChainSelect = wideVariant && !hiddenUI?.chainSidebar || swapOnly && formType === "to" || hiddenUI?.chainSelect;
 	const isMobile = useMediaQuery((theme) => theme.breakpoints.down(theme.breakpoints.values.xs));
 	const hideSearchTokenInput = hiddenUI?.searchTokenInput;

package/dist/esm/pages/SelectTokenPage/SelectTokenPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectTokenPage.js","names":[],"sources":["../../../../src/pages/SelectTokenPage/SelectTokenPage.tsx"],"sourcesContent":["import { Box, type Theme, useMediaQuery } from '@mui/material'\nimport type { FC } from 'react'\nimport { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { TokenList } from '../../components/TokenList/TokenList.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useSwapOnly } from '../../hooks/useSwapOnly.js'\nimport { useWideVariant } from '../../hooks/useWideVariant.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { SearchTokenInput } from './SearchTokenInput.js'\n\nexport const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {\n const headerRef = useRef<HTMLElement>(null)\n\n const swapOnly = useSwapOnly()\n\n const { mode, hiddenUI } = useWidgetConfig()\n const wideVariant = useWideVariant()\n\n const { t } = useTranslation()\n const title =\n formType === 'from'\n ? mode === 'custom'\n ? t('header.payWith')\n : t('header.from')\n : t('header.to')\n\n useHeader(title)\n\n const hideChainSelect =\n (wideVariant && !hiddenUI?.chainSidebar) \|\|\n (swapOnly && formType === 'to') \|\|\n hiddenUI?.chainSelect\n\n const isMobile = useMediaQuery((theme: Theme) =>\n theme.breakpoints.down(theme.breakpoints.values.xs)\n )\n const hideSearchTokenInput = hiddenUI?.searchTokenInput\n\n const hasHeader = !hideChainSelect \|\| !hideSearchTokenInput\n\n return (\n <PageContainer disableGutters>\n <Box\n ref={headerRef}\n sx={{\n pt: 1.5,\n pb: hasHeader ? 2 : 0,\n px: 3,\n }}\n >\n {!hideChainSelect ? <ChainSelect formType={formType} /> : null}\n {!hideSearchTokenInput && (\n <Box\n sx={{\n mt: !hideChainSelect ? 2 : 0,\n }}\n >\n <SearchTokenInput formType={formType} />\n </Box>\n )}\n </Box>\n <TokenList\n // Rerender component if variant changes (since chains tiles change height)\n key={\n hideChainSelect\n ? 'without-offset'\n : isMobile\n ? 'with-offset-mobile'\n : 'with-offset'\n }\n headerRef={headerRef}\n formType={formType}\n />\n </PageContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAa,mBAAsC,EAAE,eAAe;CAClE,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,WAAW,YAAY;CAE7B,MAAM,EAAE,MAAM,aAAa,gBAAgB;CAC3C,MAAM,cAAc,eAAe;CAEnC,MAAM,EAAE,MAAM,eAAe;~~CAQ7B~~,~~UANE~~,aAAa,SACT,SAAS,WACP,EAAE,gBAAgB,IAClB,EAAE,aAAa,IACjB,EAAE,WAAW,~~CAEJ~~;CAEf,MAAM,kBACH,eAAe,CAAC,UAAU,gBAC1B,YAAY,aAAa,QAC1B,UAAU;CAEZ,MAAM,WAAW,eAAe,UAC9B,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,CACpD;CACA,MAAM,uBAAuB,UAAU;CAIvC,OACE,qBAAC,eAAD;EAAe,gBAAA;EAAf,UAAA,CACE,qBAAC,KAAD;GACE,KAAK;GACL,IAAI;IACF,IAAI;IACJ,IARU,CAAC,mBAAmB,CAAC,uBAQf,IAAI;IACpB,IAAI;GACN;GANF,UAAA,CAQG,CAAC,kBAAkB,oBAAC,aAAD,EAAuB,SAAW,CAAA,IAAI,MACzD,CAAC,wBACA,oBAAC,KAAD;IACE,IAAI,EACF,IAAI,CAAC,kBAAkB,IAAI,EAC7B;IAEA,UAAA,oBAAC,kBAAD,EAA4B,SAAW,CAAA;GACpC,CAAA,CAEJ;EACL,CAAA,GAAA,oBAAC,WAAD;GASa;GACD;EACX,GARG,kBACI,mBACA,WACE,uBACA,aAIT,CACY;;AAEnB"}
1	+ {"version":3,"file":"SelectTokenPage.js","names":[],"sources":["../../../../src/pages/SelectTokenPage/SelectTokenPage.tsx"],"sourcesContent":["import { Box, type Theme, useMediaQuery } from '@mui/material'\nimport type { FC } from 'react'\nimport { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { TokenList } from '../../components/TokenList/TokenList.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useSwapOnly } from '../../hooks/useSwapOnly.js'\nimport { useWideVariant } from '../../hooks/useWideVariant.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { SearchTokenInput } from './SearchTokenInput.js'\n\nexport const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {\n const headerRef = useRef<HTMLElement>(null)\n\n const swapOnly = useSwapOnly()\n\n const { mode, hiddenUI } = useWidgetConfig()\n const wideVariant = useWideVariant()\n\n const { t } = useTranslation()\n const title =\n formType === 'from'\n ? mode === 'custom'\n ? t('header.payWith')\n : t('header.from')\n : t('header.to')\n\n useHeader(title)\n\n const hideChainSelect =\n (wideVariant && !hiddenUI?.chainSidebar) \|\|\n (swapOnly && formType === 'to') \|\|\n hiddenUI?.chainSelect\n\n const isMobile = useMediaQuery((theme: Theme) =>\n theme.breakpoints.down(theme.breakpoints.values.xs)\n )\n const hideSearchTokenInput = hiddenUI?.searchTokenInput\n\n const hasHeader = !hideChainSelect \|\| !hideSearchTokenInput\n\n return (\n <PageContainer disableGutters>\n <Box\n ref={headerRef}\n sx={{\n pt: 1.5,\n pb: hasHeader ? 2 : 0,\n px: 3,\n }}\n >\n {!hideChainSelect ? <ChainSelect formType={formType} /> : null}\n {!hideSearchTokenInput && (\n <Box\n sx={{\n mt: !hideChainSelect ? 2 : 0,\n }}\n >\n <SearchTokenInput formType={formType} />\n </Box>\n )}\n </Box>\n <TokenList\n // Rerender component if variant changes (since chains tiles change height)\n key={\n hideChainSelect\n ? 'without-offset'\n : isMobile\n ? 'with-offset-mobile'\n : 'with-offset'\n }\n headerRef={headerRef}\n formType={formType}\n />\n </PageContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAa,mBAAsC,EAAE,eAAe;CAClE,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,WAAW,YAAY;CAE7B,MAAM,EAAE,MAAM,aAAa,gBAAgB;CAC3C,MAAM,cAAc,eAAe;CAEnC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,QACJ,aAAa,SACT,SAAS,WACP,EAAE,gBAAgB,IAClB,EAAE,aAAa,IACjB,EAAE,WAAW;CAEnB,UAAU,KAAK;CAEf,MAAM,kBACH,eAAe,CAAC,UAAU,gBAC1B,YAAY,aAAa,QAC1B,UAAU;CAEZ,MAAM,WAAW,eAAe,UAC9B,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,CACpD;CACA,MAAM,uBAAuB,UAAU;CAIvC,OACE,qBAAC,eAAD;EAAe,gBAAA;EAAf,UAAA,CACE,qBAAC,KAAD;GACE,KAAK;GACL,IAAI;IACF,IAAI;IACJ,IARU,CAAC,mBAAmB,CAAC,uBAQf,IAAI;IACpB,IAAI;GACN;GANF,UAAA,CAQG,CAAC,kBAAkB,oBAAC,aAAD,EAAuB,SAAW,CAAA,IAAI,MACzD,CAAC,wBACA,oBAAC,KAAD;IACE,IAAI,EACF,IAAI,CAAC,kBAAkB,IAAI,EAC7B;IAEA,UAAA,oBAAC,kBAAD,EAA4B,SAAW,CAAA;GACpC,CAAA,CAEJ;EACL,CAAA,GAAA,oBAAC,WAAD;GASa;GACD;EACX,GARG,kBACI,mBACA,WACE,uBACA,aAIT,CACY;;AAEnB"}

package/dist/esm/pages/SettingsPage/SmallBalanceFilterSettings.js CHANGED Viewed

@@ -19,7 +19,8 @@ const SmallBalanceFilterSettings = () => {
 	const buttonRef = useRef(null);
 	const inputRef = useRef(null);
 	const formatAndSetThreshold = (inputValue, returnInitial = false) => {
-		const formattedValue = formatInputAmount(inputValue.replace("$", ""), 2, returnInitial);
+		const value = inputValue.replace("$", "");
+		const formattedValue = formatInputAmount(value, 2, returnInitial);
 		if (returnInitial) setInputValue(formattedValue);
 		else {
 			const formattedOrDefault = formattedValue || defaultThreshold;

package/dist/esm/pages/SettingsPage/SmallBalanceFilterSettings.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SmallBalanceFilterSettings.js","names":["Switch"],"sources":["../../../../src/pages/SettingsPage/SmallBalanceFilterSettings.tsx"],"sourcesContent":["import AttachMoney from '@mui/icons-material/AttachMoney'\nimport { Box } from '@mui/material'\nimport {\n type ChangeEvent,\n type ChangeEventHandler,\n type FocusEventHandler,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Switch } from '../../components/Switch.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { formatInputAmount, usdDecimals } from '../../utils/format.js'\nimport {\n SettingCardExpandable,\n type SettingCardExpandableRef,\n} from './SettingsCard/SettingCardExpandable.js'\nimport {\n SettingsCustomInput,\n SettingsFieldSet,\n} from './SlippageSettings/SlippageSettings.style.js'\n\nconst defaultThreshold = '0.01'\n\nexport const SmallBalanceFilterSettings: React.FC = () => {\n const { t } = useTranslation()\n const { smallBalanceThreshold } = useSettings(['smallBalanceThreshold'])\n const { setValue } = useSettingsActions()\n const [inputValue, setInputValue] = useState(\n smallBalanceThreshold ?? defaultThreshold\n )\n const buttonRef = useRef<SettingCardExpandableRef>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n\n const formatAndSetThreshold = (inputValue: string, returnInitial = false) => {\n const value = inputValue.replace('$', '')\n const formattedValue = formatInputAmount(value, usdDecimals, returnInitial)\n if (returnInitial) {\n setInputValue(formattedValue)\n } else {\n const formattedOrDefault = formattedValue \|\| defaultThreshold\n setInputValue(formattedOrDefault)\n setValue('smallBalanceThreshold', formattedOrDefault)\n }\n }\n\n const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {\n formatAndSetThreshold(event.target.value, true)\n }\n\n const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n formatAndSetThreshold(event.target.value, false)\n }\n\n const handleHideSmallBalancesChange = (\n event: ChangeEvent<HTMLInputElement>\n ) => {\n setValue(\n 'smallBalanceThreshold',\n event.target.checked ? defaultThreshold : undefined\n )\n if (buttonRef.current) {\n buttonRef.current?.toggleExpanded(event.target.checked)\n }\n }\n\n const handleExpanded = () => {\n if (inputRef.current) {\n inputRef.current.focus()\n }\n }\n\n useEffect(() => {\n setInputValue(smallBalanceThreshold ?? defaultThreshold)\n }, [smallBalanceThreshold])\n\n return (\n <SettingCardExpandable\n ref={buttonRef}\n value={\n <Switch\n checked={!!smallBalanceThreshold}\n onChange={handleHideSmallBalancesChange}\n aria-label={t('settings.hideSmallBalances')}\n />\n }\n icon={<AttachMoney />}\n title={t('settings.hideSmallBalances')}\n disabled={!smallBalanceThreshold}\n keepValueVisible\n onEntered={handleExpanded}\n >\n <Box\n sx={{\n mt: 1.5,\n }}\n >\n <SettingsFieldSet>\n <SettingsCustomInput\n inputRef={inputRef}\n selected\n inputProps={{\n inputMode: 'decimal',\n }}\n onChange={handleInputUpdate}\n onBlur={handleInputBlur}\n value={`$${inputValue}`}\n autoComplete=\"off\"\n />\n </SettingsFieldSet>\n </Box>\n </SettingCardExpandable>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,mBAAmB;AAEzB,MAAa,mCAA6C;CACxD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,0BAA0B,YAAY,CAAC,uBAAuB,CAAC;CACvE,MAAM,EAAE,aAAa,mBAAmB;CACxC,MAAM,CAAC,YAAY,iBAAiB,SAClC,yBAAyB,gBAC3B;CACA,MAAM,YAAY,OAAiC,IAAI;CACvD,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,yBAAyB,YAAoB,gBAAgB,UAAU;~~EAE3E~~,MAAM,~~iBAAiB~~,~~kBADT,~~WAAW,QAAQ,KAAK,~~EACO~~,~~GAAA~~,~~GAAgB~~,aAAa;EAC1E,IAAI,eACF,cAAc,cAAc;OACvB;GACL,MAAM,qBAAqB,kBAAkB;GAC7C,cAAc,kBAAkB;GAChC,SAAS,yBAAyB,kBAAkB;EACtD;CACF;CAEA,MAAM,qBAA2D,UAAU;EACzE,sBAAsB,MAAM,OAAO,OAAO,IAAI;CAChD;CAEA,MAAM,mBAAwD,UAAU;EACtE,sBAAsB,MAAM,OAAO,OAAO,KAAK;CACjD;CAEA,MAAM,iCACJ,UACG;EACH,SACE,yBACA,MAAM,OAAO,UAAU,mBAAmB,KAAA,CAC5C;EACA,IAAI,UAAU,SACZ,UAAU,SAAS,eAAe,MAAM,OAAO,OAAO;CAE1D;CAEA,MAAM,uBAAuB;EAC3B,IAAI,SAAS,SACX,SAAS,QAAQ,MAAM;CAE3B;CAEA,gBAAgB;EACd,cAAc,yBAAyB,gBAAgB;CACzD,GAAG,CAAC,qBAAqB,CAAC;CAE1B,OACE,oBAAC,uBAAD;EACE,KAAK;EACL,OACE,oBAACA,UAAD;GACE,SAAS,CAAC,CAAC;GACX,UAAU;GACV,cAAY,EAAE,4BAA4B;EAC3C,CAAA;EAEH,MAAM,oBAAC,aAAD,CAAc,CAAA;EACpB,OAAO,EAAE,4BAA4B;EACrC,UAAU,CAAC;EACX,kBAAA;EACA,WAAW;EAEX,UAAA,oBAAC,KAAD;GACE,IAAI,EACF,IAAI,IACN;GAEA,UAAA,oBAAC,kBAAD,EAAA,UACE,oBAAC,qBAAD;IACY;IACV,UAAA;IACA,YAAY,EACV,WAAW,UACb;IACA,UAAU;IACV,QAAQ;IACR,OAAO,IAAI;IACX,cAAa;GACd,CAAA,EACe,CAAA;EACf,CAAA;CACgB,CAAA;AAE3B"}
1	+ {"version":3,"file":"SmallBalanceFilterSettings.js","names":["Switch"],"sources":["../../../../src/pages/SettingsPage/SmallBalanceFilterSettings.tsx"],"sourcesContent":["import AttachMoney from '@mui/icons-material/AttachMoney'\nimport { Box } from '@mui/material'\nimport {\n type ChangeEvent,\n type ChangeEventHandler,\n type FocusEventHandler,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Switch } from '../../components/Switch.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { formatInputAmount, usdDecimals } from '../../utils/format.js'\nimport {\n SettingCardExpandable,\n type SettingCardExpandableRef,\n} from './SettingsCard/SettingCardExpandable.js'\nimport {\n SettingsCustomInput,\n SettingsFieldSet,\n} from './SlippageSettings/SlippageSettings.style.js'\n\nconst defaultThreshold = '0.01'\n\nexport const SmallBalanceFilterSettings: React.FC = () => {\n const { t } = useTranslation()\n const { smallBalanceThreshold } = useSettings(['smallBalanceThreshold'])\n const { setValue } = useSettingsActions()\n const [inputValue, setInputValue] = useState(\n smallBalanceThreshold ?? defaultThreshold\n )\n const buttonRef = useRef<SettingCardExpandableRef>(null)\n const inputRef = useRef<HTMLInputElement>(null)\n\n const formatAndSetThreshold = (inputValue: string, returnInitial = false) => {\n const value = inputValue.replace('$', '')\n const formattedValue = formatInputAmount(value, usdDecimals, returnInitial)\n if (returnInitial) {\n setInputValue(formattedValue)\n } else {\n const formattedOrDefault = formattedValue \|\| defaultThreshold\n setInputValue(formattedOrDefault)\n setValue('smallBalanceThreshold', formattedOrDefault)\n }\n }\n\n const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {\n formatAndSetThreshold(event.target.value, true)\n }\n\n const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n formatAndSetThreshold(event.target.value, false)\n }\n\n const handleHideSmallBalancesChange = (\n event: ChangeEvent<HTMLInputElement>\n ) => {\n setValue(\n 'smallBalanceThreshold',\n event.target.checked ? defaultThreshold : undefined\n )\n if (buttonRef.current) {\n buttonRef.current?.toggleExpanded(event.target.checked)\n }\n }\n\n const handleExpanded = () => {\n if (inputRef.current) {\n inputRef.current.focus()\n }\n }\n\n useEffect(() => {\n setInputValue(smallBalanceThreshold ?? defaultThreshold)\n }, [smallBalanceThreshold])\n\n return (\n <SettingCardExpandable\n ref={buttonRef}\n value={\n <Switch\n checked={!!smallBalanceThreshold}\n onChange={handleHideSmallBalancesChange}\n aria-label={t('settings.hideSmallBalances')}\n />\n }\n icon={<AttachMoney />}\n title={t('settings.hideSmallBalances')}\n disabled={!smallBalanceThreshold}\n keepValueVisible\n onEntered={handleExpanded}\n >\n <Box\n sx={{\n mt: 1.5,\n }}\n >\n <SettingsFieldSet>\n <SettingsCustomInput\n inputRef={inputRef}\n selected\n inputProps={{\n inputMode: 'decimal',\n }}\n onChange={handleInputUpdate}\n onBlur={handleInputBlur}\n value={`$${inputValue}`}\n autoComplete=\"off\"\n />\n </SettingsFieldSet>\n </Box>\n </SettingCardExpandable>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,mBAAmB;AAEzB,MAAa,mCAA6C;CACxD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,0BAA0B,YAAY,CAAC,uBAAuB,CAAC;CACvE,MAAM,EAAE,aAAa,mBAAmB;CACxC,MAAM,CAAC,YAAY,iBAAiB,SAClC,yBAAyB,gBAC3B;CACA,MAAM,YAAY,OAAiC,IAAI;CACvD,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,yBAAyB,YAAoB,gBAAgB,UAAU;EAC3E,MAAM,QAAQ,WAAW,QAAQ,KAAK,EAAE;EACxC,MAAM,iBAAiB,kBAAkB,OAAA,GAAoB,aAAa;EAC1E,IAAI,eACF,cAAc,cAAc;OACvB;GACL,MAAM,qBAAqB,kBAAkB;GAC7C,cAAc,kBAAkB;GAChC,SAAS,yBAAyB,kBAAkB;EACtD;CACF;CAEA,MAAM,qBAA2D,UAAU;EACzE,sBAAsB,MAAM,OAAO,OAAO,IAAI;CAChD;CAEA,MAAM,mBAAwD,UAAU;EACtE,sBAAsB,MAAM,OAAO,OAAO,KAAK;CACjD;CAEA,MAAM,iCACJ,UACG;EACH,SACE,yBACA,MAAM,OAAO,UAAU,mBAAmB,KAAA,CAC5C;EACA,IAAI,UAAU,SACZ,UAAU,SAAS,eAAe,MAAM,OAAO,OAAO;CAE1D;CAEA,MAAM,uBAAuB;EAC3B,IAAI,SAAS,SACX,SAAS,QAAQ,MAAM;CAE3B;CAEA,gBAAgB;EACd,cAAc,yBAAyB,gBAAgB;CACzD,GAAG,CAAC,qBAAqB,CAAC;CAE1B,OACE,oBAAC,uBAAD;EACE,KAAK;EACL,OACE,oBAACA,UAAD;GACE,SAAS,CAAC,CAAC;GACX,UAAU;GACV,cAAY,EAAE,4BAA4B;EAC3C,CAAA;EAEH,MAAM,oBAAC,aAAD,CAAc,CAAA;EACpB,OAAO,EAAE,4BAA4B;EACrC,UAAU,CAAC;EACX,kBAAA;EACA,WAAW;EAEX,UAAA,oBAAC,KAAD;GACE,IAAI,EACF,IAAI,IACN;GAEA,UAAA,oBAAC,kBAAD,EAAA,UACE,oBAAC,qBAAD;IACY;IACV,UAAA;IACA,YAAY,EACV,WAAW,UACb;IACA,UAAU;IACV,QAAQ;IACR,OAAO,IAAI;IACX,cAAa;GACd,CAAA,EACe,CAAA;EACf,CAAA;CACgB,CAAA;AAE3B"}

package/dist/esm/pages/TransactionDetailsPage/ContactSupportButton.js CHANGED Viewed

@@ -5,8 +5,9 @@ import { useTranslation } from "react-i18next";
 //#region src/pages/TransactionDetailsPage/ContactSupportButton.tsx
 const ContactSupportButton = ({ supportId }) => {
 	const { t } = useTranslation();
+	const handleContactSupport = useContactSupport(supportId);
 	return /* @__PURE__ */ jsx(ButtonChip, {
-		onClick: useContactSupport(supportId),
+		onClick: handleContactSupport,
 		children: t("button.contactSupport")
 	});
 };

package/dist/esm/pages/TransactionDetailsPage/ContactSupportButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContactSupportButton.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ContactSupportButton.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useContactSupport } from '../../hooks/useContactSupport.js'\nimport { ButtonChip } from './ContactSupportButton.style.js'\n\ninterface ContactSupportButtonProps {\n supportId?: string\n}\n\nexport const ContactSupportButton = ({\n supportId,\n}: ContactSupportButtonProps): JSX.Element => {\n const { t } = useTranslation()\n const handleContactSupport = useContactSupport(supportId)\n\n return (\n <ButtonChip onClick={handleContactSupport}>\n {t('button.contactSupport')}\n </ButtonChip>\n )\n}\n"],"mappings":";;;;;AASA,MAAa,wBAAwB,EACnC,gBAC4C;CAC5C,MAAM,EAAE,MAAM,eAAe;~~CAG7B~~,OACE,oBAAC,YAAD;EAAY,~~SAHe,kBAAkB,SAGL~~;~~EACrC~~,UAAA,EAAE,uBAAuB;CAChB,CAAA;AAEhB"}
1	+ {"version":3,"file":"ContactSupportButton.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ContactSupportButton.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useContactSupport } from '../../hooks/useContactSupport.js'\nimport { ButtonChip } from './ContactSupportButton.style.js'\n\ninterface ContactSupportButtonProps {\n supportId?: string\n}\n\nexport const ContactSupportButton = ({\n supportId,\n}: ContactSupportButtonProps): JSX.Element => {\n const { t } = useTranslation()\n const handleContactSupport = useContactSupport(supportId)\n\n return (\n <ButtonChip onClick={handleContactSupport}>\n {t('button.contactSupport')}\n </ButtonChip>\n )\n}\n"],"mappings":";;;;;AASA,MAAa,wBAAwB,EACnC,gBAC4C;CAC5C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,uBAAuB,kBAAkB,SAAS;CAExD,OACE,oBAAC,YAAD;EAAY,SAAS;EAClB,UAAA,EAAE,uBAAuB;CAChB,CAAA;AAEhB"}

package/dist/esm/pages/TransactionDetailsPage/TransactionDetailsPage.js CHANGED Viewed

@@ -28,7 +28,8 @@ const TransactionDetailsPage = () => {
 	const { getTransactionLink } = useExplorer();
 	const storedRouteExecution = useRouteExecutionStore((store) => search?.routeId ? store.routes[search.routeId] : void 0);
 	const { transaction, isLoading } = useTransactionDetails(!storedRouteExecution && search?.transactionHash);
-	useHeader(mode === "custom" ? t(`header.${modeOptions?.custom?.type ?? "checkout"}Details`) : t("header.transactionDetails"));
+	const title = mode === "custom" ? t(`header.${modeOptions?.custom?.type ?? "checkout"}Details`) : t("header.transactionDetails");
+	useHeader(title);
 	const routeExecution = useMemo(() => {
 		if (storedRouteExecution) return storedRouteExecution;
 		if (isLoading) return;

package/dist/esm/pages/TransactionDetailsPage/TransactionDetailsPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TransactionDetailsPage.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx"],"sourcesContent":["import type { FullStatusData } from '@lifi/sdk'\nimport { useLocation, useNavigate } from '@tanstack/react-router'\nimport { useEffect, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { TransactionCard } from '../../components/TransactionCard/TransactionCard.js'\nimport { internalExplorerUrl } from '../../config/constants.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useTools } from '../../hooks/useTools.js'\nimport { useTransactionDetails } from '../../hooks/useTransactionDetails.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'\nimport { getSourceTxHash } from '../../stores/routes/utils.js'\nimport { buildRouteFromTxHistory } from '../../utils/converters.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ReceiptsCard } from './ReceiptsCard.js'\nimport { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'\nimport { TransferIdCard } from './TransferIdCard.js'\n\nexport const TransactionDetailsPage: React.FC = () => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const { mode, modeOptions, contractSecondaryComponent, explorerUrls } =\n useWidgetConfig()\n const { search }: any = useLocation()\n const { tools } = useTools()\n const { getTransactionLink } = useExplorer()\n const storedRouteExecution = useRouteExecutionStore((store) =>\n search?.routeId ? store.routes[search.routeId] : undefined\n )\n const { transaction, isLoading } = useTransactionDetails(\n !storedRouteExecution && search?.transactionHash\n )\n\n const title =\n mode === 'custom'\n ? t(`header.${modeOptions?.custom?.type ?? 'checkout'}Details`)\n : t('header.transactionDetails')\n useHeader(title)\n\n const routeExecution = useMemo(() => {\n if (storedRouteExecution) {\n return storedRouteExecution\n }\n if (isLoading) {\n return\n }\n if (transaction) {\n return buildRouteFromTxHistory(transaction as FullStatusData, tools)\n }\n }, [isLoading, storedRouteExecution, tools, transaction])\n\n useEffect(() => {\n if (!isLoading && !routeExecution) {\n navigate({ to: navigationRoutes.home })\n }\n }, [isLoading, navigate, routeExecution])\n\n const explorerUrl = explorerUrls?.internal?.[0]\n const url = typeof explorerUrl === 'string' ? explorerUrl : explorerUrl?.url\n\n const sourceTxHash = getSourceTxHash(routeExecution?.route)\n let supportId = sourceTxHash ?? routeExecution?.route.id ?? ''\n\n const internalTxLink =\n routeExecution?.route?.steps?.at(-1)?.execution?.internalTxLink\n const externalTxLink =\n routeExecution?.route?.steps?.at(-1)?.execution?.externalTxLink\n\n const txLink =\n (url\n ? internalTxLink?.replace(internalExplorerUrl, url)\n : internalTxLink) \|\|\n externalTxLink \|\|\n getTransactionLink({ txHash: supportId })\n\n if (process.env.NODE_ENV === 'development') {\n supportId += `_${routeExecution?.route.id}`\n }\n\n const startedAt = new Date(\n routeExecution?.route.steps[0].execution?.startedAt ?? 0\n )\n\n if (isLoading && !storedRouteExecution) {\n return <TransactionDetailsSkeleton />\n }\n\n if (!routeExecution?.route) {\n return null\n }\n\n return (\n <PageContainer\n topGutters\n bottomGutters\n sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}\n >\n <TransactionCard route={routeExecution.route} date={startedAt} />\n {mode === 'custom' && contractSecondaryComponent ? (\n <ContractComponent>{contractSecondaryComponent}</ContractComponent>\n ) : null}\n <ReceiptsCard route={routeExecution.route} />\n {supportId ? (\n <TransferIdCard transferId={supportId} txLink={txLink} />\n ) : null}\n </PageContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,+BAAyC;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,aAAa,4BAA4B,iBACrD,gBAAgB;CAClB,MAAM,EAAE,WAAgB,YAAY;CACpC,MAAM,EAAE,UAAU,SAAS;CAC3B,MAAM,EAAE,uBAAuB,YAAY;CAC3C,MAAM,uBAAuB,wBAAwB,UACnD,QAAQ,UAAU,MAAM,OAAO,OAAO,WAAW,KAAA,CACnD;CACA,MAAM,EAAE,aAAa,cAAc,sBACjC,CAAC,wBAAwB,QAAQ,eACnC;~~CAMA~~,~~UAHE~~,SAAS,WACL,EAAE,UAAU,aAAa,QAAQ,QAAQ,WAAW,QAAQ,IAC5D,EAAE,2BAA2B,~~CACpB~~;CAEf,MAAM,iBAAiB,cAAc;EACnC,IAAI,sBACF,OAAO;EAET,IAAI,WACF;EAEF,IAAI,aACF,OAAO,wBAAwB,aAA+B,KAAK;CAEvE,GAAG;EAAC;EAAW;EAAsB;EAAO;CAAW,CAAC;CAExD,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,gBACjB,SAAS,EAAE,IAAI,iBAAiB,KAAK,CAAC;CAE1C,GAAG;EAAC;EAAW;EAAU;CAAc,CAAC;CAExC,MAAM,cAAc,cAAc,WAAW;CAC7C,MAAM,MAAM,OAAO,gBAAgB,WAAW,cAAc,aAAa;CAGzE,IAAI,YADiB,gBAAgB,gBAAgB,KAC1B,KAAK,gBAAgB,MAAM,MAAM;CAE5D,MAAM,iBACJ,gBAAgB,OAAO,OAAO,GAAG,EAAE,CAAC,EAAE,WAAW;CACnD,MAAM,iBACJ,gBAAgB,OAAO,OAAO,GAAG,EAAE,CAAC,EAAE,WAAW;CAEnD,MAAM,UACH,MACG,gBAAgB,QAAA,sBAA6B,GAAG,IAChD,mBACJ,kBACA,mBAAmB,EAAE,QAAQ,UAAU,CAAC;CAE1C,IAAI,QAAQ,IAAI,aAAa,eAC3B,aAAa,IAAI,gBAAgB,MAAM;CAGzC,MAAM,YAAY,IAAI,KACpB,gBAAgB,MAAM,MAAM,EAAE,CAAC,WAAW,aAAa,CACzD;CAEA,IAAI,aAAa,CAAC,sBAChB,OAAO,oBAAC,4BAAD,CAA6B,CAAA;CAGtC,IAAI,CAAC,gBAAgB,OACnB,OAAO;CAGT,OACE,qBAAC,eAAD;EACE,YAAA;EACA,eAAA;EACA,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAE;EAHzD,UAAA;GAKE,oBAAC,iBAAD;IAAiB,OAAO,eAAe;IAAO,MAAM;GAAY,CAAA;GAC/D,SAAS,YAAY,6BACpB,oBAAC,mBAAD,EAAA,UAAoB,2BAA8C,CAAA,IAChE;GACJ,oBAAC,cAAD,EAAc,OAAO,eAAe,MAAQ,CAAA;GAC3C,YACC,oBAAC,gBAAD;IAAgB,YAAY;IAAmB;GAAS,CAAA,IACtD;EACS;;AAEnB"}
1	+ {"version":3,"file":"TransactionDetailsPage.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx"],"sourcesContent":["import type { FullStatusData } from '@lifi/sdk'\nimport { useLocation, useNavigate } from '@tanstack/react-router'\nimport { useEffect, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { TransactionCard } from '../../components/TransactionCard/TransactionCard.js'\nimport { internalExplorerUrl } from '../../config/constants.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useTools } from '../../hooks/useTools.js'\nimport { useTransactionDetails } from '../../hooks/useTransactionDetails.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'\nimport { getSourceTxHash } from '../../stores/routes/utils.js'\nimport { buildRouteFromTxHistory } from '../../utils/converters.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ReceiptsCard } from './ReceiptsCard.js'\nimport { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'\nimport { TransferIdCard } from './TransferIdCard.js'\n\nexport const TransactionDetailsPage: React.FC = () => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const { mode, modeOptions, contractSecondaryComponent, explorerUrls } =\n useWidgetConfig()\n const { search }: any = useLocation()\n const { tools } = useTools()\n const { getTransactionLink } = useExplorer()\n const storedRouteExecution = useRouteExecutionStore((store) =>\n search?.routeId ? store.routes[search.routeId] : undefined\n )\n const { transaction, isLoading } = useTransactionDetails(\n !storedRouteExecution && search?.transactionHash\n )\n\n const title =\n mode === 'custom'\n ? t(`header.${modeOptions?.custom?.type ?? 'checkout'}Details`)\n : t('header.transactionDetails')\n useHeader(title)\n\n const routeExecution = useMemo(() => {\n if (storedRouteExecution) {\n return storedRouteExecution\n }\n if (isLoading) {\n return\n }\n if (transaction) {\n return buildRouteFromTxHistory(transaction as FullStatusData, tools)\n }\n }, [isLoading, storedRouteExecution, tools, transaction])\n\n useEffect(() => {\n if (!isLoading && !routeExecution) {\n navigate({ to: navigationRoutes.home })\n }\n }, [isLoading, navigate, routeExecution])\n\n const explorerUrl = explorerUrls?.internal?.[0]\n const url = typeof explorerUrl === 'string' ? explorerUrl : explorerUrl?.url\n\n const sourceTxHash = getSourceTxHash(routeExecution?.route)\n let supportId = sourceTxHash ?? routeExecution?.route.id ?? ''\n\n const internalTxLink =\n routeExecution?.route?.steps?.at(-1)?.execution?.internalTxLink\n const externalTxLink =\n routeExecution?.route?.steps?.at(-1)?.execution?.externalTxLink\n\n const txLink =\n (url\n ? internalTxLink?.replace(internalExplorerUrl, url)\n : internalTxLink) \|\|\n externalTxLink \|\|\n getTransactionLink({ txHash: supportId })\n\n if (process.env.NODE_ENV === 'development') {\n supportId += `_${routeExecution?.route.id}`\n }\n\n const startedAt = new Date(\n routeExecution?.route.steps[0].execution?.startedAt ?? 0\n )\n\n if (isLoading && !storedRouteExecution) {\n return <TransactionDetailsSkeleton />\n }\n\n if (!routeExecution?.route) {\n return null\n }\n\n return (\n <PageContainer\n topGutters\n bottomGutters\n sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}\n >\n <TransactionCard route={routeExecution.route} date={startedAt} />\n {mode === 'custom' && contractSecondaryComponent ? (\n <ContractComponent>{contractSecondaryComponent}</ContractComponent>\n ) : null}\n <ReceiptsCard route={routeExecution.route} />\n {supportId ? (\n <TransferIdCard transferId={supportId} txLink={txLink} />\n ) : null}\n </PageContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,+BAAyC;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,aAAa,4BAA4B,iBACrD,gBAAgB;CAClB,MAAM,EAAE,WAAgB,YAAY;CACpC,MAAM,EAAE,UAAU,SAAS;CAC3B,MAAM,EAAE,uBAAuB,YAAY;CAC3C,MAAM,uBAAuB,wBAAwB,UACnD,QAAQ,UAAU,MAAM,OAAO,OAAO,WAAW,KAAA,CACnD;CACA,MAAM,EAAE,aAAa,cAAc,sBACjC,CAAC,wBAAwB,QAAQ,eACnC;CAEA,MAAM,QACJ,SAAS,WACL,EAAE,UAAU,aAAa,QAAQ,QAAQ,WAAW,QAAQ,IAC5D,EAAE,2BAA2B;CACnC,UAAU,KAAK;CAEf,MAAM,iBAAiB,cAAc;EACnC,IAAI,sBACF,OAAO;EAET,IAAI,WACF;EAEF,IAAI,aACF,OAAO,wBAAwB,aAA+B,KAAK;CAEvE,GAAG;EAAC;EAAW;EAAsB;EAAO;CAAW,CAAC;CAExD,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,gBACjB,SAAS,EAAE,IAAI,iBAAiB,KAAK,CAAC;CAE1C,GAAG;EAAC;EAAW;EAAU;CAAc,CAAC;CAExC,MAAM,cAAc,cAAc,WAAW;CAC7C,MAAM,MAAM,OAAO,gBAAgB,WAAW,cAAc,aAAa;CAGzE,IAAI,YADiB,gBAAgB,gBAAgB,KAC1B,KAAK,gBAAgB,MAAM,MAAM;CAE5D,MAAM,iBACJ,gBAAgB,OAAO,OAAO,GAAG,EAAE,CAAC,EAAE,WAAW;CACnD,MAAM,iBACJ,gBAAgB,OAAO,OAAO,GAAG,EAAE,CAAC,EAAE,WAAW;CAEnD,MAAM,UACH,MACG,gBAAgB,QAAA,sBAA6B,GAAG,IAChD,mBACJ,kBACA,mBAAmB,EAAE,QAAQ,UAAU,CAAC;CAE1C,IAAI,QAAQ,IAAI,aAAa,eAC3B,aAAa,IAAI,gBAAgB,MAAM;CAGzC,MAAM,YAAY,IAAI,KACpB,gBAAgB,MAAM,MAAM,EAAE,CAAC,WAAW,aAAa,CACzD;CAEA,IAAI,aAAa,CAAC,sBAChB,OAAO,oBAAC,4BAAD,CAA6B,CAAA;CAGtC,IAAI,CAAC,gBAAgB,OACnB,OAAO;CAGT,OACE,qBAAC,eAAD;EACE,YAAA;EACA,eAAA;EACA,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAE;EAHzD,UAAA;GAKE,oBAAC,iBAAD;IAAiB,OAAO,eAAe;IAAO,MAAM;GAAY,CAAA;GAC/D,SAAS,YAAY,6BACpB,oBAAC,mBAAD,EAAA,UAAoB,2BAA8C,CAAA,IAChE;GACJ,oBAAC,cAAD,EAAc,OAAO,eAAe,MAAQ,CAAA;GAC3C,YACC,oBAAC,gBAAD;IAAgB,YAAY;IAAmB;GAAS,CAAA,IACtD;EACS;;AAEnB"}

package/dist/esm/pages/TransactionPage/StartTransactionButton.js CHANGED Viewed

@@ -5,12 +5,13 @@ import { jsx } from "react/jsx-runtime";
 //#region src/pages/TransactionPage/StartTransactionButton.tsx
 const StartTransactionButton = ({ onClick, route, text, loading }) => {
 	const { messages, isLoading } = useMessageQueue(route, true);
+	const hasNonGasMessages = useMemo(() => {
+		return messages.some((message) => message.id !== "INSUFFICIENT_GAS");
+	}, [messages]);
 	return /* @__PURE__ */ jsx(BaseTransactionButton, {
 		onClick,
 		text,
-		disabled: useMemo(() => {
-			return messages.some((message) => message.id !== "INSUFFICIENT_GAS");
-		}, [messages]),
+		disabled: hasNonGasMessages,
 		loading: isLoading || loading,
 		route
 	});

package/dist/esm/pages/TransactionPage/StartTransactionButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StartTransactionButton.js","names":[],"sources":["../../../../src/pages/TransactionPage/StartTransactionButton.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'\nimport { useMessageQueue } from '../../components/Messages/useMessageQueue.js'\nimport type { StartTransactionButtonProps } from './types.js'\n\nexport const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({\n onClick,\n route,\n text,\n loading,\n}) => {\n const { messages, isLoading } = useMessageQueue(route, true)\n\n const hasNonGasMessages = useMemo(() => {\n return messages.some((message) => message.id !== 'INSUFFICIENT_GAS')\n }, [messages])\n\n return (\n <BaseTransactionButton\n onClick={onClick}\n text={text}\n disabled={hasNonGasMessages}\n loading={isLoading \|\| loading}\n route={route}\n />\n )\n}\n"],"mappings":";;;;;AAKA,MAAa,0BAAiE,EAC5E,SACA,OACA,MACA,cACI;CACJ,MAAM,EAAE,UAAU,cAAc,gBAAgB,OAAO,IAAI;~~CAM3D~~,~~OACE~~,~~oBAAC~~,~~uBAAD;EACW;EACH;EACN,UARsB,~~cAAc;~~GACtC~~,OAAO,SAAS,MAAM,YAAY,QAAQ,OAAO,kBAAkB;~~EACrE~~,GAAG,CAAC,QAAQ,~~CAMkB~~;~~EAC1B~~,SAAS,aAAa;EACf;CACR,CAAA;AAEL"}
1	+ {"version":3,"file":"StartTransactionButton.js","names":[],"sources":["../../../../src/pages/TransactionPage/StartTransactionButton.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'\nimport { useMessageQueue } from '../../components/Messages/useMessageQueue.js'\nimport type { StartTransactionButtonProps } from './types.js'\n\nexport const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({\n onClick,\n route,\n text,\n loading,\n}) => {\n const { messages, isLoading } = useMessageQueue(route, true)\n\n const hasNonGasMessages = useMemo(() => {\n return messages.some((message) => message.id !== 'INSUFFICIENT_GAS')\n }, [messages])\n\n return (\n <BaseTransactionButton\n onClick={onClick}\n text={text}\n disabled={hasNonGasMessages}\n loading={isLoading \|\| loading}\n route={route}\n />\n )\n}\n"],"mappings":";;;;;AAKA,MAAa,0BAAiE,EAC5E,SACA,OACA,MACA,cACI;CACJ,MAAM,EAAE,UAAU,cAAc,gBAAgB,OAAO,IAAI;CAE3D,MAAM,oBAAoB,cAAc;EACtC,OAAO,SAAS,MAAM,YAAY,QAAQ,OAAO,kBAAkB;CACrE,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,oBAAC,uBAAD;EACW;EACH;EACN,UAAU;EACV,SAAS,aAAa;EACf;CACR,CAAA;AAEL"}

package/dist/esm/pages/TransactionPage/TokenVerificationBottomSheet.js ADDED Viewed

@@ -0,0 +1,64 @@
+import { IconCircle } from "../../components/IconCircle/IconCircle.js";
+import { BottomSheet } from "../../components/BottomSheet/BottomSheet.js";
+import { useSetContentHeight } from "../../hooks/useSetContentHeight.js";
+import { ButtonRow, CenterContainer, ContentContainer, WarningMessage, WarningTitle } from "./TokenValueBottomSheet.style.js";
+import { useRef, useState } from "react";
+import { Button, Checkbox, FormControlLabel } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/pages/TransactionPage/TokenVerificationBottomSheet.tsx
+const TokenVerificationBottomSheet = ({ tokens, onContinue, onCancel, ref }) => {
+	const handleCancel = () => {
+		ref.current?.close();
+		onCancel?.();
+	};
+	return /* @__PURE__ */ jsx(BottomSheet, {
+		ref,
+		onClose: onCancel,
+		children: /* @__PURE__ */ jsx(TokenVerificationBottomSheetContent, {
+			tokens,
+			onContinue,
+			onCancel: handleCancel
+		})
+	});
+};
+const TokenVerificationBottomSheetContent = ({ tokens, onCancel, onContinue }) => {
+	const [accepted, setAccepted] = useState(false);
+	const { t } = useTranslation();
+	const ref = useRef(null);
+	useSetContentHeight(ref);
+	return /* @__PURE__ */ jsxs(ContentContainer, {
+		ref,
+		children: [
+			/* @__PURE__ */ jsxs(CenterContainer, { children: [/* @__PURE__ */ jsx(IconCircle, {
+				status: "error",
+				sx: { mb: 2.5 }
+			}), /* @__PURE__ */ jsx(WarningTitle, { children: t("warning.title.tokenFlagged") })] }),
+			tokens.map((token) => /* @__PURE__ */ jsx(WarningMessage, { children: t("warning.message.tokenFlagged", { tokenSymbol: token.symbol }) }, `${token.chainId}-${token.address}`)),
+			/* @__PURE__ */ jsx(FormControlLabel, {
+				control: /* @__PURE__ */ jsx(Checkbox, {
+					checked: accepted,
+					onChange: (_, checked) => setAccepted(checked)
+				}),
+				label: t("warning.checkbox.tokenFlagged"),
+				sx: { mt: 1 }
+			}),
+			/* @__PURE__ */ jsxs(ButtonRow, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onClick: onCancel,
+				fullWidth: true,
+				children: t("button.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "contained",
+				onClick: onContinue,
+				disabled: !accepted,
+				fullWidth: true,
+				children: t("button.continue")
+			})] })
+		]
+	});
+};
+//#endregion
+export { TokenVerificationBottomSheet };
+//# sourceMappingURL=TokenVerificationBottomSheet.js.map

package/dist/esm/pages/TransactionPage/TokenVerificationBottomSheet.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TokenVerificationBottomSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/TokenVerificationBottomSheet.tsx"],"sourcesContent":["import type { Token } from '@lifi/sdk'\nimport { Button, Checkbox, FormControlLabel } from '@mui/material'\nimport type { JSX, Ref, RefObject } from 'react'\nimport { useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { IconCircle } from '../../components/IconCircle/IconCircle.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport {\n ButtonRow,\n CenterContainer,\n ContentContainer,\n WarningMessage,\n WarningTitle,\n} from './TokenValueBottomSheet.style.js'\n\ninterface TokenVerificationBottomSheetProps {\n /** Source and/or destination tokens the screening provider flagged. */\n tokens: Token[]\n onContinue(): void\n onCancel?(): void\n}\n\nexport const TokenVerificationBottomSheet = ({\n tokens,\n onContinue,\n onCancel,\n ref,\n}: TokenVerificationBottomSheetProps & {\n ref?: Ref<BottomSheetBase>\n}): JSX.Element => {\n const handleCancel = () => {\n ;(ref as RefObject<BottomSheetBase>).current?.close()\n onCancel?.()\n }\n\n return (\n <BottomSheet ref={ref} onClose={onCancel}>\n <TokenVerificationBottomSheetContent\n tokens={tokens}\n onContinue={onContinue}\n onCancel={handleCancel}\n />\n </BottomSheet>\n )\n}\n\nconst TokenVerificationBottomSheetContent: React.FC<\n TokenVerificationBottomSheetProps\n> = ({ tokens, onCancel, onContinue }) => {\n const [accepted, setAccepted] = useState(false)\n const { t } = useTranslation()\n const ref = useRef<HTMLElement>(null)\n useSetContentHeight(ref)\n\n return (\n <ContentContainer ref={ref}>\n <CenterContainer>\n <IconCircle status=\"error\" sx={{ mb: 2.5 }} />\n <WarningTitle>{t('warning.title.tokenFlagged')}</WarningTitle>\n </CenterContainer>\n {tokens.map((token) => (\n <WarningMessage key={`${token.chainId}-${token.address}`}>\n {t('warning.message.tokenFlagged', { tokenSymbol: token.symbol })}\n </WarningMessage>\n ))}\n <FormControlLabel\n control={\n <Checkbox\n checked={accepted}\n onChange={(_, checked) => setAccepted(checked)}\n />\n }\n label={t('warning.checkbox.tokenFlagged')}\n sx={{ mt: 1 }}\n />\n <ButtonRow>\n <Button variant=\"text\" onClick={onCancel} fullWidth>\n {t('button.cancel')}\n </Button>\n <Button\n variant=\"contained\"\n onClick={onContinue}\n disabled={!accepted}\n fullWidth\n >\n {t('button.continue')}\n </Button>\n </ButtonRow>\n </ContentContainer>\n )\n}\n"],"mappings":";;;;;;;;;AAwBA,MAAa,gCAAgC,EAC3C,QACA,YACA,UACA,UAGiB;CACjB,MAAM,qBAAqB;EACxB,IAAoC,SAAS,MAAM;EACpD,WAAW;CACb;CAEA,OACE,oBAAC,aAAD;EAAkB;EAAK,SAAS;EAC9B,UAAA,oBAAC,qCAAD;GACU;GACI;GACZ,UAAU;EACX,CAAA;CACU,CAAA;AAEjB;AAEA,MAAM,uCAED,EAAE,QAAQ,UAAU,iBAAiB;CACxC,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,MAAM,OAAoB,IAAI;CACpC,oBAAoB,GAAG;CAEvB,OACE,qBAAC,kBAAD;EAAuB;EAAvB,UAAA;GACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,YAAD;IAAY,QAAO;IAAQ,IAAI,EAAE,IAAI,IAAI;GAAI,CAAA,GAC7C,oBAAC,cAAD,EAAA,UAAe,EAAE,4BAA4B,EAAgB,CAAA,CAC9C,EAAA,CAAA;GAChB,OAAO,KAAK,UACX,oBAAC,gBAAD,EAAA,UACG,EAAE,gCAAgC,EAAE,aAAa,MAAM,OAAO,CAAC,EAClD,GAFK,GAAG,MAAM,QAAQ,GAAG,MAAM,SAE/B,CACjB;GACD,oBAAC,kBAAD;IACE,SACE,oBAAC,UAAD;KACE,SAAS;KACT,WAAW,GAAG,YAAY,YAAY,OAAO;IAC9C,CAAA;IAEH,OAAO,EAAE,+BAA+B;IACxC,IAAI,EAAE,IAAI,EAAE;GACb,CAAA;GACD,qBAAC,WAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IAAQ,SAAQ;IAAO,SAAS;IAAU,WAAA;IACvC,UAAA,EAAE,eAAe;GACZ,CAAA,GACR,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,UAAU,CAAC;IACX,WAAA;IAEC,UAAA,EAAE,iBAAiB;GACd,CAAA,CACC,EAAA,CAAA;EACK;;AAEtB"}

package/dist/esm/pages/TransactionPage/TransactionExecutionContent.js CHANGED Viewed

@@ -24,6 +24,22 @@ const TransactionExecutionContent = ({ route, status, restartRoute, deleteRoute
 	const { title, message } = useRouteExecutionMessage(route, status);
 	const { mode, contractCompactComponent, contractSecondaryComponent, defaultUI } = useWidgetConfig();
 	const isDone = hasEnumFlag(status, 4);
+	const rows = useExecutionRows(route, isDone ? route.toAddress : void 0);
+	const iconSlot = mode === "custom" && isDone && !!(contractCompactComponent || contractSecondaryComponent) ? contractCompactComponent || contractSecondaryComponent : /* @__PURE__ */ jsx(StatusIcon, {
+		route,
+		status
+	});
+	const footerSlot = isDone ? /* @__PURE__ */ jsx(ExecutionDoneCard, {
+		route,
+		status
+	}) : /* @__PURE__ */ jsx(Card$1, {
+		type: "default",
+		indented: true,
+		children: /* @__PURE__ */ jsx(RouteTokens, {
+			route,
+			defaultExpanded: defaultUI?.transactionDetailsExpanded
+		})
+	});
 	return /* @__PURE__ */ jsx(LazyMotion, {
 		features: domMax,
 		strict: true,
@@ -38,22 +54,9 @@ const TransactionExecutionContent = ({ route, status, restartRoute, deleteRoute
 				children: [/* @__PURE__ */ jsx(ExecutionStatusCard, {
 					title,
 					description: message,
-					rows: useExecutionRows(route, isDone ? route.toAddress : void 0),
-					iconSlot: mode === "custom" && isDone && !!(contractCompactComponent || contractSecondaryComponent) ? contractCompactComponent || contractSecondaryComponent : /* @__PURE__ */ jsx(StatusIcon, {
-						route,
-						status
-					}),
-					footerSlot: isDone ? /* @__PURE__ */ jsx(ExecutionDoneCard, {
-						route,
-						status
-					}) : /* @__PURE__ */ jsx(Card$1, {
-						type: "default",
-						indented: true,
-						children: /* @__PURE__ */ jsx(RouteTokens, {
-							route,
-							defaultExpanded: defaultUI?.transactionDetailsExpanded
-						})
-					})
+					rows,
+					iconSlot,
+					footerSlot
 				}), status === 8 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(WarningMessages, {
 					route,
 					allowInteraction: true

package/dist/esm/pages/TransactionPage/TransactionExecutionContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TransactionExecutionContent.js","names":["Card"],"sources":["../../../../src/pages/TransactionPage/TransactionExecutionContent.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { domMax, LazyMotion, MotionConfig } from 'motion/react'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport { Card } from '../../components/Card/Card.js'\nimport { ExecutionStatusCard } from '../../components/ExecutionStatusCard/ExecutionStatusCard.js'\nimport { StatusIcon } from '../../components/ExecutionStatusCard/StatusIcon.js'\nimport { WarningMessages } from '../../components/Messages/WarningMessages.js'\nimport { RouteTokens } from '../../components/RouteCard/RouteTokens.js'\nimport { useExecutionRows } from '../../components/StepActions/executionRows.js'\nimport { useRouteExecutionMessage } from '../../hooks/useRouteExecutionMessage.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport { ExecutionDoneCard } from './ExecutionDoneCard.js'\nimport { TransactionDoneButtons } from './TransactionDoneButtons.js'\nimport { TransactionFailedButtons } from './TransactionFailedButtons.js'\n\nexport interface TransactionExecutionContentProps {\n route: RouteExtended\n status: RouteExecutionStatus\n restartRoute: () => void\n deleteRoute: () => void\n}\n\n/*\n Execution-phase layout for the Transaction page.\n * Renders the {@link ExecutionStatusCard}, warning messages,\n * and terminal action buttons.\n */\nexport const TransactionExecutionContent: React.FC<\n TransactionExecutionContentProps\n> = ({ route, status, restartRoute, deleteRoute }): JSX.Element => {\n const { title, message } = useRouteExecutionMessage(route, status)\n const {\n mode,\n contractCompactComponent,\n contractSecondaryComponent,\n defaultUI,\n } = useWidgetConfig()\n\n const isDone = hasEnumFlag(status, RouteExecutionStatus.Done)\n const rows = useExecutionRows(route, isDone ? route.toAddress : undefined)\n\n const showContract =\n mode === 'custom' &&\n isDone &&\n !!(contractCompactComponent \|\| contractSecondaryComponent)\n\n const iconSlot = showContract ? (\n contractCompactComponent \|\| contractSecondaryComponent\n ) : (\n <StatusIcon route={route} status={status} />\n )\n\n const footerSlot = isDone ? (\n <ExecutionDoneCard route={route} status={status} />\n ) : (\n <Card type=\"default\" indented>\n <RouteTokens\n route={route}\n defaultExpanded={defaultUI?.transactionDetailsExpanded}\n />\n </Card>\n )\n\n return (\n <LazyMotion features={domMax} strict>\n <MotionConfig reducedMotion=\"user\">\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n <ExecutionStatusCard\n title={title}\n description={message}\n rows={rows}\n iconSlot={iconSlot}\n footerSlot={footerSlot}\n />\n {status === RouteExecutionStatus.Failed ? (\n <>\n <WarningMessages route={route} allowInteraction />\n <TransactionFailedButtons\n route={route}\n restartRoute={restartRoute}\n deleteRoute={deleteRoute}\n />\n </>\n ) : isDone ? (\n <TransactionDoneButtons route={route} status={status} />\n ) : null}\n </Box>\n </MotionConfig>\n </LazyMotion>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,+BAER,EAAE,OAAO,QAAQ,cAAc,kBAA+B;CACjE,MAAM,EAAE,OAAO,YAAY,yBAAyB,OAAO,MAAM;CACjE,MAAM,EACJ,MACA,0BACA,4BACA,cACE,gBAAgB;CAEpB,MAAM,SAAS,YAAY,QAAA,CAAiC;~~CAyB5D~~,~~OACE~~,~~oBAAC~~,~~YAAD;EAAY,UAAU;EAAQ,QAAA;EAC5B,UAAA,oBAAC,cAAD;GAAc,eAAc;GAC1B,UAAA,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,eAAe;KAAU,KAAK;IAAE;IAA5D,UAAA,CACE,oBAAC,qBAAD;KACS;KACP,aAAa;KACb,MA/BG,~~iBAAiB,OAAO,SAAS,MAAM,YAAY,KAAA,~~CA+B7C~~;~~KACT~~,~~UA7BR~~,SAAS,YACT,UACA,CAAC,EAAE,4BAA4B,8BAG/B,4BAA4B,6BAE5B,oBAAC,YAAD;~~MAAmB~~;~~MAAe~~;~~KAAS~~,CAAA;~~KAuBnC~~,~~YApBS~~,SACjB,oBAAC,mBAAD;~~MAA0B~~;~~MAAe~~;~~KAAS~~,CAAA,IAElD,oBAACA,QAAD;~~MAAM~~,MAAK;~~MAAU~~,UAAA;~~MACnB~~,UAAA,oBAAC,aAAD;~~OACS~~;~~OACP~~,iBAAiB,WAAW;~~MAC7B~~,CAAA;~~KACG~~,CAAA;~~IAaC~~,CAAA,GACA,WAAA,IACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,iBAAD;KAAwB;KAAO,kBAAA;IAAkB,CAAA,GACjD,oBAAC,0BAAD;KACS;KACO;KACD;IACd,CAAA,CACD,EAAA,CAAA,IACA,SACF,oBAAC,wBAAD;KAA+B;KAAe;IAAS,CAAA,IACrD,IACD;;EACO,CAAA;CACJ,CAAA;AAEhB"}
1	+ {"version":3,"file":"TransactionExecutionContent.js","names":["Card"],"sources":["../../../../src/pages/TransactionPage/TransactionExecutionContent.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { domMax, LazyMotion, MotionConfig } from 'motion/react'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport { Card } from '../../components/Card/Card.js'\nimport { ExecutionStatusCard } from '../../components/ExecutionStatusCard/ExecutionStatusCard.js'\nimport { StatusIcon } from '../../components/ExecutionStatusCard/StatusIcon.js'\nimport { WarningMessages } from '../../components/Messages/WarningMessages.js'\nimport { RouteTokens } from '../../components/RouteCard/RouteTokens.js'\nimport { useExecutionRows } from '../../components/StepActions/executionRows.js'\nimport { useRouteExecutionMessage } from '../../hooks/useRouteExecutionMessage.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport { ExecutionDoneCard } from './ExecutionDoneCard.js'\nimport { TransactionDoneButtons } from './TransactionDoneButtons.js'\nimport { TransactionFailedButtons } from './TransactionFailedButtons.js'\n\nexport interface TransactionExecutionContentProps {\n route: RouteExtended\n status: RouteExecutionStatus\n restartRoute: () => void\n deleteRoute: () => void\n}\n\n/*\n Execution-phase layout for the Transaction page.\n * Renders the {@link ExecutionStatusCard}, warning messages,\n * and terminal action buttons.\n */\nexport const TransactionExecutionContent: React.FC<\n TransactionExecutionContentProps\n> = ({ route, status, restartRoute, deleteRoute }): JSX.Element => {\n const { title, message } = useRouteExecutionMessage(route, status)\n const {\n mode,\n contractCompactComponent,\n contractSecondaryComponent,\n defaultUI,\n } = useWidgetConfig()\n\n const isDone = hasEnumFlag(status, RouteExecutionStatus.Done)\n const rows = useExecutionRows(route, isDone ? route.toAddress : undefined)\n\n const showContract =\n mode === 'custom' &&\n isDone &&\n !!(contractCompactComponent \|\| contractSecondaryComponent)\n\n const iconSlot = showContract ? (\n contractCompactComponent \|\| contractSecondaryComponent\n ) : (\n <StatusIcon route={route} status={status} />\n )\n\n const footerSlot = isDone ? (\n <ExecutionDoneCard route={route} status={status} />\n ) : (\n <Card type=\"default\" indented>\n <RouteTokens\n route={route}\n defaultExpanded={defaultUI?.transactionDetailsExpanded}\n />\n </Card>\n )\n\n return (\n <LazyMotion features={domMax} strict>\n <MotionConfig reducedMotion=\"user\">\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n <ExecutionStatusCard\n title={title}\n description={message}\n rows={rows}\n iconSlot={iconSlot}\n footerSlot={footerSlot}\n />\n {status === RouteExecutionStatus.Failed ? (\n <>\n <WarningMessages route={route} allowInteraction />\n <TransactionFailedButtons\n route={route}\n restartRoute={restartRoute}\n deleteRoute={deleteRoute}\n />\n </>\n ) : isDone ? (\n <TransactionDoneButtons route={route} status={status} />\n ) : null}\n </Box>\n </MotionConfig>\n </LazyMotion>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,+BAER,EAAE,OAAO,QAAQ,cAAc,kBAA+B;CACjE,MAAM,EAAE,OAAO,YAAY,yBAAyB,OAAO,MAAM;CACjE,MAAM,EACJ,MACA,0BACA,4BACA,cACE,gBAAgB;CAEpB,MAAM,SAAS,YAAY,QAAA,CAAiC;CAC5D,MAAM,OAAO,iBAAiB,OAAO,SAAS,MAAM,YAAY,KAAA,CAAS;CAOzE,MAAM,WAJJ,SAAS,YACT,UACA,CAAC,EAAE,4BAA4B,8BAG/B,4BAA4B,6BAE5B,oBAAC,YAAD;EAAmB;EAAe;CAAS,CAAA;CAG7C,MAAM,aAAa,SACjB,oBAAC,mBAAD;EAA0B;EAAe;CAAS,CAAA,IAElD,oBAACA,QAAD;EAAM,MAAK;EAAU,UAAA;EACnB,UAAA,oBAAC,aAAD;GACS;GACP,iBAAiB,WAAW;EAC7B,CAAA;CACG,CAAA;CAGR,OACE,oBAAC,YAAD;EAAY,UAAU;EAAQ,QAAA;EAC5B,UAAA,oBAAC,cAAD;GAAc,eAAc;GAC1B,UAAA,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,eAAe;KAAU,KAAK;IAAE;IAA5D,UAAA,CACE,oBAAC,qBAAD;KACS;KACP,aAAa;KACP;KACI;KACE;IACb,CAAA,GACA,WAAA,IACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,iBAAD;KAAwB;KAAO,kBAAA;IAAkB,CAAA,GACjD,oBAAC,0BAAD;KACS;KACO;KACD;IACd,CAAA,CACD,EAAA,CAAA,IACA,SACF,oBAAC,wBAAD;KAA+B;KAAe;IAAS,CAAA,IACrD,IACD;;EACO,CAAA;CACJ,CAAA;AAEhB"}

package/dist/esm/pages/TransactionPage/TransactionFailedButtons.js CHANGED Viewed

@@ -28,7 +28,9 @@ const TransactionFailedButtons = ({ route, restartRoute, deleteRoute }) => {
 			return;
 		}
 		const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
-		if (getTokenValueLossThreshold(Number.parseFloat(route.fromAmountUSD), Number.parseFloat(route.toAmountUSD), gasCostUSD, feeCostUSD) && mode !== "custom") tokenValueBottomSheetRef.current?.open();
+		const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
+		const toAmountUSD = Number.parseFloat(route.toAmountUSD);
+		if (getTokenValueLossThreshold(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD) && mode !== "custom") tokenValueBottomSheetRef.current?.open();
 		else restartRoute();
 	};
 	return /* @__PURE__ */ jsxs(Box, {