@lifi/widget 4.5.0 → 4.7.0

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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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/ConfirmToAddressSheet.d.ts

@@ -6,9 +6,8 @@ interface ConfirmToAddressSheetProps {
   toAddress: string;
   toChainId: number;
 }
-declare const ConfirmToAddressSheet: ({ ref, ...props }: ConfirmToAddressSheetProps & {
+export declare const ConfirmToAddressSheet: ({ ref, ...props }: ConfirmToAddressSheetProps & {
   ref?: Ref<BottomSheetBase>;
 }) => JSX.Element;
 //#endregion
-export { ConfirmToAddressSheet };
 //# sourceMappingURL=ConfirmToAddressSheet.d.ts.map

package/dist/esm/pages/TransactionPage/ConfirmToAddressSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmToAddressSheet.d.ts","names":[],"sources":["../../../../src/pages/TransactionPage/ConfirmToAddressSheet.tsx"],"mappings":";;;UAoBU;EACR;EACA;EACA;;cAOW,0BACX,QACG,SACF;EACD,MAAM,IAAI;MACR,IAAI"}
+{"version":3,"file":"ConfirmToAddressSheet.d.ts","names":[],"sources":["../../../../src/pages/TransactionPage/ConfirmToAddressSheet.tsx"],"mappings":";;;UAoBU;EACR;EACA;EACA;;qBAOW,0BACX,QACG,SACF;EACD,MAAM,IAAI;MACR,IAAI"}

package/dist/esm/pages/TransactionPage/ExchangeRateBottomSheet.d.ts

@@ -1,7 +1,7 @@
 import { ExchangeRateUpdateParams } from "@lifi/sdk";
 import { JSX, Ref } from "react";
 //#region src/pages/TransactionPage/ExchangeRateBottomSheet.d.ts
-interface ExchangeRateBottomSheetBase {
+export interface ExchangeRateBottomSheetBase {
   isOpen(): void;
   open(resolver: (value: boolean) => void, data: ExchangeRateUpdateParams): void;
   close(value?: boolean, bottomSheetClose?: boolean): void;
@@ -11,9 +11,8 @@ interface ExchangeRateBottomSheetProps {
   onContinue?(): void;
   onCancel?(): void;
 }
-declare const ExchangeRateBottomSheet: ({ onContinue, onCancel, ref }: ExchangeRateBottomSheetProps & {
+export declare const ExchangeRateBottomSheet: ({ onContinue, onCancel, ref }: ExchangeRateBottomSheetProps & {
   ref?: Ref<ExchangeRateBottomSheetBase>;
 }) => JSX.Element;
 //#endregion
-export { ExchangeRateBottomSheet, ExchangeRateBottomSheetBase };
 //# sourceMappingURL=ExchangeRateBottomSheet.d.ts.map

package/dist/esm/pages/TransactionPage/ExchangeRateBottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExchangeRateBottomSheet.d.ts","names":[],"sources":["../../../../src/pages/TransactionPage/ExchangeRateBottomSheet.tsx"],"mappings":";;;UAYiB;EACf;EACA,KAAK,WAAW,yBAAyB,MAAM;EAC/C,MAAM,iBAAiB;;UAGf;EACR,OAAO;EACP;EACA;;cAGW,4BACX,YACA,UACA,OACC;EACD,MAAM,IAAI;MACR,IAAI"}
+{"version":3,"file":"ExchangeRateBottomSheet.d.ts","names":[],"sources":["../../../../src/pages/TransactionPage/ExchangeRateBottomSheet.tsx"],"mappings":";;;iBAYiB;EACf;EACA,KAAK,WAAW,yBAAyB,MAAM;EAC/C,MAAM,iBAAiB;;UAGf;EACR,OAAO;EACP;EACA;;qBAGW,4BACX,YACA,UACA,OACC;EACD,MAAM,IAAI;MACR,IAAI"}

package/dist/esm/pages/TransactionPage/ExecutionDoneCard.d.ts

@@ -6,7 +6,6 @@ interface ExecutionDoneCardProps {
   route: RouteExtended;
   status: RouteExecutionStatus;
 }
-declare const ExecutionDoneCard: React.FC<ExecutionDoneCardProps>;
+export declare const ExecutionDoneCard: React.FC<ExecutionDoneCardProps>;
 //#endregion
-export { ExecutionDoneCard };
 //# sourceMappingURL=ExecutionDoneCard.d.ts.map

package/dist/esm/pages/TransactionPage/ExecutionDoneCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExecutionDoneCard.d.ts","names":[],"sources":["../../../../src/pages/TransactionPage/ExecutionDoneCard.tsx"],"mappings":";;;;UAWU;EACR,OAAO;EACP,QAAQ;;cAGG,mBAAmB,MAAM,GAAG"}
+{"version":3,"file":"ExecutionDoneCard.d.ts","names":[],"sources":["../../../../src/pages/TransactionPage/ExecutionDoneCard.tsx"],"mappings":";;;;UAWU;EACR,OAAO;EACP,QAAQ;;qBAGG,mBAAmB,MAAM,GAAG"}

package/dist/esm/pages/TransactionPage/RouteTracker.d.ts

@@ -5,7 +5,6 @@ interface RouteTrackerProps {
   onChange: Dispatch<SetStateAction<string>>;
   onFetching: Dispatch<SetStateAction<boolean>>;
 }
-declare const RouteTracker: ({ observableRouteId, onChange, onFetching }: RouteTrackerProps) => JSX.Element;
+export declare const RouteTracker: ({ observableRouteId, onChange, onFetching }: RouteTrackerProps) => JSX.Element;
 //#endregion
-export { RouteTracker };
 //# sourceMappingURL=RouteTracker.d.ts.map

package/dist/esm/pages/TransactionPage/RouteTracker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RouteTracker.d.ts","names":[],"sources":["../../../../src/pages/TransactionPage/RouteTracker.tsx"],"mappings":";;UAOU;EACR;EACA,UAAU,SAAS;EACnB,YAAY,SAAS;;cAGV,iBACX,mBACA,UACA,cACC,sBAAoB,IAAI"}
+{"version":3,"file":"RouteTracker.d.ts","names":[],"sources":["../../../../src/pages/TransactionPage/RouteTracker.tsx"],"mappings":";;UAOU;EACR;EACA,UAAU,SAAS;EACnB,YAAY,SAAS;;qBAGV,iBACX,mBACA,UACA,cACC,sBAAoB,IAAI"}

package/dist/esm/pages/TransactionPage/StartTransactionButton.d.ts

@@ -1,6 +1,5 @@
 import { StartTransactionButtonProps } from "./types.js";
 //#region src/pages/TransactionPage/StartTransactionButton.d.ts
-declare const StartTransactionButton: React.FC<StartTransactionButtonProps>;
+export declare const StartTransactionButton: React.FC<StartTransactionButtonProps>;
 //#endregion
-export { StartTransactionButton };
 //# sourceMappingURL=StartTransactionButton.d.ts.map

package/dist/esm/pages/TransactionPage/StartTransactionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StartTransactionButton.d.ts","names":[],"sources":["../../../../src/pages/TransactionPage/StartTransactionButton.tsx"],"mappings":";;cAKa,wBAAwB,MAAM,GAAG"}
+{"version":3,"file":"StartTransactionButton.d.ts","names":[],"sources":["../../../../src/pages/TransactionPage/StartTransactionButton.tsx"],"mappings":";;qBAKa,wBAAwB,MAAM,GAAG"}

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

@@ -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

@@ -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"}
+{"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/TokenValueBottomSheet.d.ts

@@ -7,9 +7,8 @@ interface TokenValueBottomSheetProps {
   onContinue(): void;
   onCancel?(): void;
 }
-declare const TokenValueBottomSheet: ({ route, onContinue, onCancel, ref }: TokenValueBottomSheetProps & {
+export declare const TokenValueBottomSheet: ({ route, onContinue, onCancel, ref }: TokenValueBottomSheetProps & {
   ref?: Ref<BottomSheetBase>;
 }) => JSX.Element;
 //#endregion
-export { TokenValueBottomSheet };
 //# sourceMappingURL=TokenValueBottomSheet.d.ts.map

package/dist/esm/pages/TransactionPage/TokenValueBottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenValueBottomSheet.d.ts","names":[],"sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.tsx"],"mappings":";;;;UAuBU;EACR,OAAO;EACP;EACA;;cAGW,0BACX,OACA,YACA,UACA,OACC;EACD,MAAM,IAAI;MACR,IAAI"}
+{"version":3,"file":"TokenValueBottomSheet.d.ts","names":[],"sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.tsx"],"mappings":";;;;UAuBU;EACR,OAAO;EACP;EACA;;qBAGW,0BACX,OACA,YACA,UACA,OACC;EACD,MAAM,IAAI;MACR,IAAI"}

package/dist/esm/pages/TransactionPage/TokenValueBottomSheet.js

@@ -13,7 +13,6 @@ import { useTranslation } from "react-i18next";
 const TokenValueBottomSheet = ({ route, onContinue, onCancel, ref }) => {
 	const handleCancel = () => {
 		ref.current?.close();
-		onCancel?.();
 	};
 	return /* @__PURE__ */ jsx(BottomSheet, {
 		ref,

package/dist/esm/pages/TransactionPage/TokenValueBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenValueBottomSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.tsx"],"sourcesContent":["import type { Route } 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 { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js'\nimport { IconCircle } from '../../components/IconCircle/IconCircle.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport {\n  ButtonRow,\n  CenterContainer,\n  ContentContainer,\n  DetailLabel,\n  DetailRow,\n  DetailValue,\n  WarningMessage,\n  WarningTitle,\n} from './TokenValueBottomSheet.style.js'\nimport { calculateValueLossPercentage } from './utils.js'\n\ninterface TokenValueBottomSheetProps {\n  route: Route\n  onContinue(): void\n  onCancel?(): void\n}\n\nexport const TokenValueBottomSheet = ({\n  route,\n  onContinue,\n  onCancel,\n  ref,\n}: TokenValueBottomSheetProps & {\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      <TokenValueBottomSheetContent\n        route={route}\n        onContinue={onContinue}\n        onCancel={handleCancel}\n      />\n    </BottomSheet>\n  )\n}\n\nconst TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({\n  route,\n  onCancel,\n  onContinue,\n}) => {\n  const [accepted, setAccepted] = useState(false)\n  const { t } = useTranslation()\n  const ref = useRef<HTMLElement>(null)\n  useSetContentHeight(ref)\n  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =\n    getAccumulatedFeeCostsBreakdown(route)\n  const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n  const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n\n  return (\n    <ContentContainer ref={ref}>\n      <CenterContainer>\n        <IconCircle status=\"warning\" sx={{ mb: 2.5 }} />\n        <WarningTitle>{t('warning.title.highValueLoss')}</WarningTitle>\n      </CenterContainer>\n      <WarningMessage>{t('warning.message.highValueLoss')}</WarningMessage>\n      <DetailRow>\n        <DetailLabel>{t('main.sending')}</DetailLabel>\n        <DetailValue>\n          {t('format.currency', { value: route.fromAmountUSD })}\n        </DetailValue>\n      </DetailRow>\n      <DetailRow>\n        <DetailLabel>{t('main.fees.network')}</DetailLabel>\n        <FeeBreakdownTooltip gasCosts={gasCosts} gasless={!gasCostUSD}>\n          <DetailValue>\n            {!gasCostUSD\n              ? t('main.fees.free')\n              : t('format.currency', { value: gasCostUSD })}\n          </DetailValue>\n        </FeeBreakdownTooltip>\n      </DetailRow>\n      {feeCostUSD ? (\n        <DetailRow>\n          <DetailLabel>{t('main.fees.provider')}</DetailLabel>\n          <FeeBreakdownTooltip feeCosts={feeCosts}>\n            <DetailValue>\n              {t('format.currency', { value: feeCostUSD })}\n            </DetailValue>\n          </FeeBreakdownTooltip>\n        </DetailRow>\n      ) : null}\n      <DetailRow>\n        <DetailLabel>{t('main.receiving')}</DetailLabel>\n        <DetailValue>\n          {t('format.currency', { value: route.toAmountUSD })}\n        </DetailValue>\n      </DetailRow>\n      <DetailRow>\n        <DetailLabel>{t('main.valueLoss')}</DetailLabel>\n        <DetailValue>\n          {calculateValueLossPercentage(\n            fromAmountUSD,\n            toAmountUSD,\n            gasCostUSD,\n            feeCostUSD\n          )}\n          %\n        </DetailValue>\n      </DetailRow>\n      <FormControlLabel\n        control={\n          <Checkbox\n            checked={accepted}\n            onChange={(_, checked) => setAccepted(checked)}\n          />\n        }\n        label={t('warning.checkbox.highValueLoss')}\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":"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"}
+{"version":3,"file":"TokenValueBottomSheet.js","names":[],"sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.tsx"],"sourcesContent":["import type { Route } 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 { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js'\nimport { IconCircle } from '../../components/IconCircle/IconCircle.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport {\n  ButtonRow,\n  CenterContainer,\n  ContentContainer,\n  DetailLabel,\n  DetailRow,\n  DetailValue,\n  WarningMessage,\n  WarningTitle,\n} from './TokenValueBottomSheet.style.js'\nimport { calculateValueLossPercentage } from './utils.js'\n\ninterface TokenValueBottomSheetProps {\n  route: Route\n  onContinue(): void\n  onCancel?(): void\n}\n\nexport const TokenValueBottomSheet = ({\n  route,\n  onContinue,\n  onCancel,\n  ref,\n}: TokenValueBottomSheetProps & {\n  ref?: Ref<BottomSheetBase>\n}): JSX.Element => {\n  const handleCancel = () => {\n    // close() reaches onClose, which is onCancel\n    ;(ref as RefObject<BottomSheetBase>).current?.close()\n  }\n\n  return (\n    <BottomSheet ref={ref} onClose={onCancel}>\n      <TokenValueBottomSheetContent\n        route={route}\n        onContinue={onContinue}\n        onCancel={handleCancel}\n      />\n    </BottomSheet>\n  )\n}\n\nconst TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({\n  route,\n  onCancel,\n  onContinue,\n}) => {\n  const [accepted, setAccepted] = useState(false)\n  const { t } = useTranslation()\n  const ref = useRef<HTMLElement>(null)\n  useSetContentHeight(ref)\n  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =\n    getAccumulatedFeeCostsBreakdown(route)\n  const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n  const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n\n  return (\n    <ContentContainer ref={ref}>\n      <CenterContainer>\n        <IconCircle status=\"warning\" sx={{ mb: 2.5 }} />\n        <WarningTitle>{t('warning.title.highValueLoss')}</WarningTitle>\n      </CenterContainer>\n      <WarningMessage>{t('warning.message.highValueLoss')}</WarningMessage>\n      <DetailRow>\n        <DetailLabel>{t('main.sending')}</DetailLabel>\n        <DetailValue>\n          {t('format.currency', { value: route.fromAmountUSD })}\n        </DetailValue>\n      </DetailRow>\n      <DetailRow>\n        <DetailLabel>{t('main.fees.network')}</DetailLabel>\n        <FeeBreakdownTooltip gasCosts={gasCosts} gasless={!gasCostUSD}>\n          <DetailValue>\n            {!gasCostUSD\n              ? t('main.fees.free')\n              : t('format.currency', { value: gasCostUSD })}\n          </DetailValue>\n        </FeeBreakdownTooltip>\n      </DetailRow>\n      {feeCostUSD ? (\n        <DetailRow>\n          <DetailLabel>{t('main.fees.provider')}</DetailLabel>\n          <FeeBreakdownTooltip feeCosts={feeCosts}>\n            <DetailValue>\n              {t('format.currency', { value: feeCostUSD })}\n            </DetailValue>\n          </FeeBreakdownTooltip>\n        </DetailRow>\n      ) : null}\n      <DetailRow>\n        <DetailLabel>{t('main.receiving')}</DetailLabel>\n        <DetailValue>\n          {t('format.currency', { value: route.toAmountUSD })}\n        </DetailValue>\n      </DetailRow>\n      <DetailRow>\n        <DetailLabel>{t('main.valueLoss')}</DetailLabel>\n        <DetailValue>\n          {calculateValueLossPercentage(\n            fromAmountUSD,\n            toAmountUSD,\n            gasCostUSD,\n            feeCostUSD\n          )}\n          %\n        </DetailValue>\n      </DetailRow>\n      <FormControlLabel\n        control={\n          <Checkbox\n            checked={accepted}\n            onChange={(_, checked) => setAccepted(checked)}\n          />\n        }\n        label={t('warning.checkbox.highValueLoss')}\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":"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"}

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

@@ -0,0 +1,63 @@
+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();
+	};
+	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

@@ -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    // close() reaches onClose, which is onCancel\n    ;(ref as RefObject<BottomSheetBase>).current?.close()\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;EAExB,IAAoC,SAAS,MAAM;CACtD;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/TransactionDoneButtons.d.ts

@@ -6,7 +6,6 @@ interface TransactionDoneButtonsProps {
   route: RouteExtended;
   status: RouteExecutionStatus;
 }
-declare const TransactionDoneButtons: React.FC<TransactionDoneButtonsProps>;
+export declare const TransactionDoneButtons: React.FC<TransactionDoneButtonsProps>;
 //#endregion
-export { TransactionDoneButtons };
 //# sourceMappingURL=TransactionDoneButtons.d.ts.map

package/dist/esm/pages/TransactionPage/TransactionDoneButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionDoneButtons.d.ts","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionDoneButtons.tsx"],"mappings":";;;;UAaU;EACR,OAAO;EACP,QAAQ;;cAGG,wBAAwB,MAAM,GAAG"}
+{"version":3,"file":"TransactionDoneButtons.d.ts","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionDoneButtons.tsx"],"mappings":";;;;UAaU;EACR,OAAO;EACP,QAAQ;;qBAGG,wBAAwB,MAAM,GAAG"}

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

@@ -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

@@ -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"}
+{"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

@@ -1,10 +1,12 @@
+import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
+import "../../types/events.js";
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
 import { getAccumulatedFeeCostsBreakdown } from "../../utils/fees.js";
 import { useNavigateBack } from "../../hooks/useNavigateBack.js";
 import { useAddressActivity } from "../../hooks/useAddressActivity.js";
 import { ConfirmToAddressSheet } from "./ConfirmToAddressSheet.js";
 import { StartTransactionButton } from "./StartTransactionButton.js";
-import { getTokenValueLossThreshold } from "./utils.js";
+import { calculateValueLossPercentage, getRetryGates, getTokenValueLossThreshold, openNextGate } from "./utils.js";
 import { TokenValueBottomSheet } from "./TokenValueBottomSheet.js";
 import { useRef } from "react";
 import { Box, Button } from "@mui/material";
@@ -13,6 +15,7 @@ import { useTranslation } from "react-i18next";
 //#region src/pages/TransactionPage/TransactionFailedButtons.tsx
 const TransactionFailedButtons = ({ route, restartRoute, deleteRoute }) => {
 	const { t } = useTranslation();
+	const emitter = useWidgetEvents();
 	const navigateBack = useNavigateBack();
 	const { mode, hiddenUI } = useWidgetConfig();
 	const tokenValueBottomSheetRef = useRef(null);
@@ -22,15 +25,40 @@ const TransactionFailedButtons = ({ route, restartRoute, deleteRoute }) => {
 		navigateBack();
 		deleteRoute();
 	};
-	const handleRetryClick = () => {
-		if (toAddress && !hasActivity && !isLoadingAddressActivity && isActivityAddressFetched && !hiddenUI?.lowAddressActivityConfirmation) {
-			confirmToAddressSheetRef.current?.open();
-			return;
-		}
+	const retryGates = (() => {
 		const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
-		if (getTokenValueLossThreshold(Number.parseFloat(route.fromAmountUSD), Number.parseFloat(route.toAmountUSD), gasCostUSD, feeCostUSD) && mode !== "custom") tokenValueBottomSheetRef.current?.open();
-		else restartRoute();
+		return getRetryGates({
+			toAddress,
+			hasActivity,
+			isLoadingAddressActivity,
+			isActivityAddressFetched,
+			confirmationHidden: Boolean(hiddenUI?.lowAddressActivityConfirmation),
+			valueLossExceeded: getTokenValueLossThreshold(Number.parseFloat(route.fromAmountUSD), Number.parseFloat(route.toAmountUSD), gasCostUSD, feeCostUSD),
+			isCustomMode: mode === "custom"
+		});
+	})();
+	const openGate = (after) => openNextGate(retryGates, {
+		address: () => confirmToAddressSheetRef.current?.open(),
+		value: () => tokenValueBottomSheetRef.current?.open()
+	}, handleRestartRoute, after);
+	const handleRestartRoute = () => {
+		if (tokenValueBottomSheetRef.current?.isOpen()) {
+			const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+			const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
+			const toAmountUSD = Number.parseFloat(route.toAmountUSD);
+			emitter.emit("routeHighValueLoss", {
+				fromAmountUSD,
+				toAmountUSD,
+				gasCostUSD,
+				feeCostUSD,
+				valueLoss: calculateValueLossPercentage(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD)
+			});
+		}
+		tokenValueBottomSheetRef.current?.close();
+		restartRoute();
 	};
+	const handleRetryClick = () => openGate();
+	const handleConfirmToAddressContinue = () => openGate("address");
 	return /* @__PURE__ */ jsxs(Box, {
 		sx: {
 			display: "flex",
@@ -63,11 +91,11 @@ const TransactionFailedButtons = ({ route, restartRoute, deleteRoute }) => {
 			mode !== "custom" ? /* @__PURE__ */ jsx(TokenValueBottomSheet, {
 				route,
 				ref: tokenValueBottomSheetRef,
-				onContinue: restartRoute
+				onContinue: handleRestartRoute
 			}) : null,
 			!hiddenUI?.lowAddressActivityConfirmation ? /* @__PURE__ */ jsx(ConfirmToAddressSheet, {
 				ref: confirmToAddressSheetRef,
-				onContinue: restartRoute,
+				onContinue: handleConfirmToAddressContinue,
 				toAddress,
 				toChainId: route.toChainId
 			}) : null

package/dist/esm/pages/TransactionPage/TransactionFailedButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionFailedButtons.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionFailedButtons.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box, Button } from '@mui/material'\nimport { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { useAddressActivity } from '../../hooks/useAddressActivity.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'\nimport { StartTransactionButton } from './StartTransactionButton.js'\nimport { TokenValueBottomSheet } from './TokenValueBottomSheet.js'\nimport { getTokenValueLossThreshold } from './utils.js'\n\ninterface TransactionFailedButtonsProps {\n  route: RouteExtended\n  restartRoute: () => void\n  deleteRoute: () => void\n}\n\nexport const TransactionFailedButtons: React.FC<\n  TransactionFailedButtonsProps\n> = ({ route, restartRoute, deleteRoute }) => {\n  const { t } = useTranslation()\n  const navigateBack = useNavigateBack()\n  const { mode, hiddenUI } = useWidgetConfig()\n\n  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)\n  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)\n\n  const {\n    toAddress,\n    hasActivity,\n    isLoading: isLoadingAddressActivity,\n    isFetched: isActivityAddressFetched,\n  } = useAddressActivity(route.toChainId)\n\n  const handleRemoveRoute = () => {\n    navigateBack()\n    deleteRoute()\n  }\n\n  const handleRetryClick = () => {\n    if (\n      toAddress &&\n      !hasActivity &&\n      !isLoadingAddressActivity &&\n      isActivityAddressFetched &&\n      !hiddenUI?.lowAddressActivityConfirmation\n    ) {\n      confirmToAddressSheetRef.current?.open()\n      return\n    }\n\n    const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n    const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n    const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n    const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(\n      fromAmountUSD,\n      toAmountUSD,\n      gasCostUSD,\n      feeCostUSD\n    )\n    if (tokenValueLossThresholdExceeded && mode !== 'custom') {\n      tokenValueBottomSheetRef.current?.open()\n    } else {\n      restartRoute()\n    }\n  }\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      <Box sx={{ display: 'flex', gap: 1.5 }}>\n        <Box sx={{ flex: 1 }}>\n          <Button onClick={handleRemoveRoute} fullWidth>\n            {t('button.delete')}\n          </Button>\n        </Box>\n        <Box sx={{ flex: 1 }}>\n          <StartTransactionButton\n            text={t('button.tryAgain')}\n            onClick={handleRetryClick}\n            route={route}\n            loading={isLoadingAddressActivity}\n          />\n        </Box>\n      </Box>\n      {mode !== 'custom' ? (\n        <TokenValueBottomSheet\n          route={route}\n          ref={tokenValueBottomSheetRef}\n          onContinue={restartRoute}\n        />\n      ) : null}\n      {!hiddenUI?.lowAddressActivityConfirmation ? (\n        <ConfirmToAddressSheet\n          ref={confirmToAddressSheetRef}\n          onContinue={restartRoute}\n          toAddress={toAddress!}\n          toChainId={route.toChainId!}\n        />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,4BAER,EAAE,OAAO,cAAc,kBAAkB;CAC5C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,eAAe,gBAAgB;CACrC,MAAM,EAAE,MAAM,aAAa,gBAAgB;CAE3C,MAAM,2BAA2B,OAAwB,IAAI;CAC7D,MAAM,2BAA2B,OAAwB,IAAI;CAE7D,MAAM,EACJ,WACA,aACA,WAAW,0BACX,WAAW,6BACT,mBAAmB,MAAM,SAAS;CAEtC,MAAM,0BAA0B;EAC9B,aAAa;EACb,YAAY;CACd;CAEA,MAAM,yBAAyB;EAC7B,IACE,aACA,CAAC,eACD,CAAC,4BACD,4BACA,CAAC,UAAU,gCACX;GACA,yBAAyB,SAAS,KAAK;GACvC;EACF;EAEA,MAAM,EAAE,YAAY,eAAe,gCAAgC,KAAK;EASxE,IANwC,2BAFlB,OAAO,WAAW,MAAM,aAGhC,GAFM,OAAO,WAAW,MAAM,WAGhC,GACV,YACA,UAEgC,KAAK,SAAS,UAC9C,yBAAyB,SAAS,KAAK;OAEvC,aAAa;CAEjB;CAEA,OACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;EAA9D,UAAA;GACE,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,KAAK;IAAI;IAArC,UAAA,CACE,oBAAC,KAAD;KAAK,IAAI,EAAE,MAAM,EAAE;KACjB,UAAA,oBAAC,QAAD;MAAQ,SAAS;MAAmB,WAAA;MACjC,UAAA,EAAE,eAAe;KACZ,CAAA;IACL,CAAA,GACL,oBAAC,KAAD;KAAK,IAAI,EAAE,MAAM,EAAE;KACjB,UAAA,oBAAC,wBAAD;MACE,MAAM,EAAE,iBAAiB;MACzB,SAAS;MACF;MACP,SAAS;KACV,CAAA;IACE,CAAA,CACF;;GACJ,SAAS,WACR,oBAAC,uBAAD;IACS;IACP,KAAK;IACL,YAAY;GACb,CAAA,IACC;GACH,CAAC,UAAU,iCACV,oBAAC,uBAAD;IACE,KAAK;IACL,YAAY;IACD;IACX,WAAW,MAAM;GAClB,CAAA,IACC;EACD;;AAET"}
+{"version":3,"file":"TransactionFailedButtons.js","names":[],"sources":["../../../../src/pages/TransactionPage/TransactionFailedButtons.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { Box, Button } from '@mui/material'\nimport { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { useAddressActivity } from '../../hooks/useAddressActivity.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'\nimport { StartTransactionButton } from './StartTransactionButton.js'\nimport { TokenValueBottomSheet } from './TokenValueBottomSheet.js'\nimport type { RetryGate } from './utils.js'\nimport {\n  calculateValueLossPercentage,\n  getRetryGates,\n  getTokenValueLossThreshold,\n  openNextGate,\n} from './utils.js'\n\ninterface TransactionFailedButtonsProps {\n  route: RouteExtended\n  restartRoute: () => void\n  deleteRoute: () => void\n}\n\nexport const TransactionFailedButtons: React.FC<\n  TransactionFailedButtonsProps\n> = ({ route, restartRoute, deleteRoute }) => {\n  const { t } = useTranslation()\n  const emitter = useWidgetEvents()\n  const navigateBack = useNavigateBack()\n  const { mode, hiddenUI } = useWidgetConfig()\n\n  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)\n  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)\n\n  const {\n    toAddress,\n    hasActivity,\n    isLoading: isLoadingAddressActivity,\n    isFetched: isActivityAddressFetched,\n  } = useAddressActivity(route.toChainId)\n\n  const handleRemoveRoute = () => {\n    navigateBack()\n    deleteRoute()\n  }\n\n  const retryGates = (() => {\n    const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n    return getRetryGates({\n      toAddress,\n      hasActivity,\n      isLoadingAddressActivity,\n      isActivityAddressFetched,\n      confirmationHidden: Boolean(hiddenUI?.lowAddressActivityConfirmation),\n      valueLossExceeded: getTokenValueLossThreshold(\n        Number.parseFloat(route.fromAmountUSD),\n        Number.parseFloat(route.toAmountUSD),\n        gasCostUSD,\n        feeCostUSD\n      ),\n      isCustomMode: mode === 'custom',\n    })\n  })()\n\n  const openGate = (after?: RetryGate) =>\n    openNextGate(\n      retryGates,\n      {\n        address: () => confirmToAddressSheetRef.current?.open(),\n        value: () => tokenValueBottomSheetRef.current?.open(),\n      },\n      handleRestartRoute,\n      after\n    )\n\n  const handleRestartRoute = () => {\n    if (tokenValueBottomSheetRef.current?.isOpen()) {\n      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n      const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)\n      const toAmountUSD = Number.parseFloat(route.toAmountUSD)\n      emitter.emit(WidgetEvent.RouteHighValueLoss, {\n        fromAmountUSD,\n        toAmountUSD,\n        gasCostUSD,\n        feeCostUSD,\n        valueLoss: calculateValueLossPercentage(\n          fromAmountUSD,\n          toAmountUSD,\n          gasCostUSD,\n          feeCostUSD\n        ),\n      })\n    }\n    tokenValueBottomSheetRef.current?.close()\n    restartRoute()\n  }\n\n  const handleRetryClick = () => openGate()\n\n  const handleConfirmToAddressContinue = () => openGate('address')\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      <Box sx={{ display: 'flex', gap: 1.5 }}>\n        <Box sx={{ flex: 1 }}>\n          <Button onClick={handleRemoveRoute} fullWidth>\n            {t('button.delete')}\n          </Button>\n        </Box>\n        <Box sx={{ flex: 1 }}>\n          <StartTransactionButton\n            text={t('button.tryAgain')}\n            onClick={handleRetryClick}\n            route={route}\n            loading={isLoadingAddressActivity}\n          />\n        </Box>\n      </Box>\n      {mode !== 'custom' ? (\n        <TokenValueBottomSheet\n          route={route}\n          ref={tokenValueBottomSheetRef}\n          onContinue={handleRestartRoute}\n        />\n      ) : null}\n      {!hiddenUI?.lowAddressActivityConfirmation ? (\n        <ConfirmToAddressSheet\n          ref={confirmToAddressSheetRef}\n          onContinue={handleConfirmToAddressContinue}\n          toAddress={toAddress!}\n          toChainId={route.toChainId!}\n        />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AA4BA,MAAa,4BAER,EAAE,OAAO,cAAc,kBAAkB;CAC5C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,UAAU,gBAAgB;CAChC,MAAM,eAAe,gBAAgB;CACrC,MAAM,EAAE,MAAM,aAAa,gBAAgB;CAE3C,MAAM,2BAA2B,OAAwB,IAAI;CAC7D,MAAM,2BAA2B,OAAwB,IAAI;CAE7D,MAAM,EACJ,WACA,aACA,WAAW,0BACX,WAAW,6BACT,mBAAmB,MAAM,SAAS;CAEtC,MAAM,0BAA0B;EAC9B,aAAa;EACb,YAAY;CACd;CAEA,MAAM,oBAAoB;EACxB,MAAM,EAAE,YAAY,eAAe,gCAAgC,KAAK;EACxE,OAAO,cAAc;GACnB;GACA;GACA;GACA;GACA,oBAAoB,QAAQ,UAAU,8BAA8B;GACpE,mBAAmB,2BACjB,OAAO,WAAW,MAAM,aAAa,GACrC,OAAO,WAAW,MAAM,WAAW,GACnC,YACA,UACF;GACA,cAAc,SAAS;EACzB,CAAC;CACH,EAAA,CAAG;CAEH,MAAM,YAAY,UAChB,aACE,YACA;EACE,eAAe,yBAAyB,SAAS,KAAK;EACtD,aAAa,yBAAyB,SAAS,KAAK;CACtD,GACA,oBACA,KACF;CAEF,MAAM,2BAA2B;EAC/B,IAAI,yBAAyB,SAAS,OAAO,GAAG;GAC9C,MAAM,EAAE,YAAY,eAAe,gCAAgC,KAAK;GACxE,MAAM,gBAAgB,OAAO,WAAW,MAAM,aAAa;GAC3D,MAAM,cAAc,OAAO,WAAW,MAAM,WAAW;GACvD,QAAQ,KAAA,sBAAqC;IAC3C;IACA;IACA;IACA;IACA,WAAW,6BACT,eACA,aACA,YACA,UACF;GACF,CAAC;EACH;EACA,yBAAyB,SAAS,MAAM;EACxC,aAAa;CACf;CAEA,MAAM,yBAAyB,SAAS;CAExC,MAAM,uCAAuC,SAAS,SAAS;CAE/D,OACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;EAA9D,UAAA;GACE,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,KAAK;IAAI;IAArC,UAAA,CACE,oBAAC,KAAD;KAAK,IAAI,EAAE,MAAM,EAAE;KACjB,UAAA,oBAAC,QAAD;MAAQ,SAAS;MAAmB,WAAA;MACjC,UAAA,EAAE,eAAe;KACZ,CAAA;IACL,CAAA,GACL,oBAAC,KAAD;KAAK,IAAI,EAAE,MAAM,EAAE;KACjB,UAAA,oBAAC,wBAAD;MACE,MAAM,EAAE,iBAAiB;MACzB,SAAS;MACF;MACP,SAAS;KACV,CAAA;IACE,CAAA,CACF;;GACJ,SAAS,WACR,oBAAC,uBAAD;IACS;IACP,KAAK;IACL,YAAY;GACb,CAAA,IACC;GACH,CAAC,UAAU,iCACV,oBAAC,uBAAD;IACE,KAAK;IACL,YAAY;IACD;IACX,WAAW,MAAM;GAClB,CAAA,IACC;EACD;;AAET"}

package/dist/esm/pages/TransactionPage/TransactionReview.js

@@ -11,8 +11,10 @@ import { WarningMessages } from "../../components/Messages/WarningMessages.js";
 import { useAddressActivity } from "../../hooks/useAddressActivity.js";
 import { ConfirmToAddressSheet } from "./ConfirmToAddressSheet.js";
 import { StartTransactionButton } from "./StartTransactionButton.js";
-import { calculateValueLossPercentage, getTokenValueLossThreshold } from "./utils.js";
+import { calculateValueLossPercentage, getStartGates, getTokenValueLossThreshold, openNextGate } from "./utils.js";
 import { TokenValueBottomSheet } from "./TokenValueBottomSheet.js";
+import { useFlaggedTokenGuard } from "../../hooks/useFlaggedTokenGuard.js";
+import { TokenVerificationBottomSheet } from "./TokenVerificationBottomSheet.js";
 import { useRef } from "react";
 import { useNavigate } from "@tanstack/react-router";
 import { Box } from "@mui/material";
@@ -28,6 +30,7 @@ const TransactionReview = ({ route, executeRoute, routeRefreshing }) => {
 	const { mode, modeOptions, hiddenUI, defaultUI } = useWidgetConfig();
 	const tokenValueBottomSheetRef = useRef(null);
 	const confirmToAddressSheetRef = useRef(null);
+	const { flaggedTokens, flaggedTokenSheetRef } = useFlaggedTokenGuard(route);
 	const { toAddress, hasActivity, isLoading: isLoadingAddressActivity, isFetched: isActivityAddressFetched } = useAddressActivity(route.toChainId);
 	const handleExecuteRoute = () => {
 		if (tokenValueBottomSheetRef.current?.isOpen()) {
@@ -56,15 +59,30 @@ const TransactionReview = ({ route, executeRoute, routeRefreshing }) => {
 			});
 		});
 	};
-	const handleStartClick = () => {
-		if (toAddress && !hasActivity && !isLoadingAddressActivity && isActivityAddressFetched && !hiddenUI?.lowAddressActivityConfirmation) {
-			confirmToAddressSheetRef.current?.open();
-			return;
-		}
+	const startGates = (() => {
 		const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
-		if (getTokenValueLossThreshold(Number.parseFloat(route.fromAmountUSD), Number.parseFloat(route.toAmountUSD), gasCostUSD, feeCostUSD) && mode !== "custom") tokenValueBottomSheetRef.current?.open();
-		else handleExecuteRoute();
+		return getStartGates({
+			flaggedTokenCount: flaggedTokens.length,
+			toAddress,
+			hasActivity,
+			isLoadingAddressActivity,
+			isActivityAddressFetched,
+			confirmationHidden: Boolean(hiddenUI?.lowAddressActivityConfirmation),
+			valueLossExceeded: getTokenValueLossThreshold(Number.parseFloat(route.fromAmountUSD), Number.parseFloat(route.toAmountUSD), gasCostUSD, feeCostUSD),
+			isCustomMode: mode === "custom"
+		});
+	})();
+	const openGate = (after) => openNextGate(startGates, {
+		flagged: () => flaggedTokenSheetRef.current?.open(),
+		address: () => confirmToAddressSheetRef.current?.open(),
+		value: () => tokenValueBottomSheetRef.current?.open()
+	}, handleExecuteRoute, after);
+	const handleStartClick = () => openGate();
+	const handleFlaggedTokensContinue = () => {
+		flaggedTokenSheetRef.current?.close();
+		openGate("flagged");
 	};
+	const handleConfirmToAddressContinue = () => openGate("address");
 	const getButtonText = () => {
 		switch (mode) {
 			case "custom": return modeOptions?.custom?.type === "deposit" ? t("button.deposit") : t("button.buy");
@@ -104,9 +122,14 @@ const TransactionReview = ({ route, executeRoute, routeRefreshing }) => {
 			ref: tokenValueBottomSheetRef,
 			onContinue: handleExecuteRoute
 		}) : null,
+		flaggedTokens.length ? /* @__PURE__ */ jsx(TokenVerificationBottomSheet, {
+			ref: flaggedTokenSheetRef,
+			tokens: flaggedTokens,
+			onContinue: handleFlaggedTokensContinue
+		}) : null,
 		!hiddenUI?.lowAddressActivityConfirmation ? /* @__PURE__ */ jsx(ConfirmToAddressSheet, {
 			ref: confirmToAddressSheetRef,
-			onContinue: handleExecuteRoute,
+			onContinue: handleConfirmToAddressContinue,
 			toAddress,
 			toChainId: route.toChainId
 		}) : null