@lifi/widget 4.0.0-beta.1 → 4.0.0-beta.11

package/dist/esm/pages/TransactionPage/StatusBottomSheet.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBottomSheet.style.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.style.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AAInE,MAAM,cAAc,GAAG,CAAC,MAAmB,EAAE,KAAY,EAAE,EAAE;IAC3D,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,oBAAoB,CAAC,IAAI;YAC5B,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW;gBAC7C,KAAK,EAAE,IAAI;gBACX,WAAW,EAAE,CAAC;gBACd,UAAU,EAAE,CAAC;aACd,CAAA;QACH,KAAK,oBAAoB,CAAC,MAAM;YAC9B,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW;gBAC3C,KAAK,EAAE,IAAI;gBACX,WAAW,EAAE,CAAC;gBACd,UAAU,EAAE,CAAC;aACd,CAAA;QACH,KAAK,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,OAAO,CAAC;QAC9D,KAAK,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,QAAQ,CAAC;QAC/D,KAAK,SAAS;YACZ,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW;gBAC7C,KAAK,EAAE,IAAI;gBACX,WAAW,EAAE,IAAI;gBACjB,UAAU,EAAE,CAAC;aACd,CAAA;QACH;YACE,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW;gBAC7C,KAAK,EAAE,IAAI;gBACX,WAAW,EAAE,CAAC;gBACd,UAAU,EAAE,CAAC;aACd,CAAA;IACL,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,EAAE;IACpC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,QAAQ;CAC/C,CAAC,CAA0B,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IAChD,MAAM,YAAY,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IAElD,OAAO;QACL,eAAe,EAAE,QAAQ,YAAY,CAAC,KAAK,MAAM,YAAY,CAAC,KAAK,GAAG;QACtE,YAAY,EAAE,KAAK;QACnB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE;YACT,KAAK,EAAE,0BAA0B,YAAY,CAAC,KAAK,KAAK,CAAC,CAAC,GAAG,YAAY,CAAC,WAAW,CAAC,GAAG,GAAG,WAAW;YACvG,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACX;QACD,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE;YAC3B,SAAS,EAAE;gBACT,KAAK,EAAE,0BAA0B,YAAY,CAAC,KAAK,KAAK,CAAC,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,GAAG,GAAG,WAAW;gBACtG,KAAK,EAAE,EAAE;gBACT,MAAM,EAAE,EAAE;aACX;SACF,CAAC;KACH,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"version":3,"file":"StatusBottomSheet.style.js","names":[],"sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\n\ntype StatusColor = RouteExecutionStatus | 'warning'\n\nconst getStatusColor = (status: StatusColor, theme: Theme) => {\n  switch (status) {\n    case RouteExecutionStatus.Done:\n      return {\n        color: theme.vars.palette.success.mainChannel,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case RouteExecutionStatus.Failed:\n      return {\n        color: theme.vars.palette.error.mainChannel,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:\n    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:\n    case 'warning':\n      return {\n        color: theme.vars.palette.warning.mainChannel,\n        alpha: 0.48,\n        lightDarken: 0.32,\n        darkDarken: 0,\n      }\n    default:\n      return {\n        color: theme.vars.palette.primary.mainChannel,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n  }\n}\n\nexport const CenterContainer: React.FC<\n  React.ComponentProps<typeof Box> & { status?: StatusColor }\n> = styled(Box)(() => ({\n  display: 'grid',\n  placeItems: 'center',\n  position: 'relative',\n}))\n\nexport const IconCircle: React.FC<\n  React.ComponentProps<typeof Box> & { status?: StatusColor }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'status',\n})<{ status?: StatusColor }>(\n  ({ theme, status = RouteExecutionStatus.Idle }) => {\n    const statusConfig = getStatusColor(status, theme)\n\n    return {\n      backgroundColor: `rgba(${statusConfig.color} / ${statusConfig.alpha})`,\n      borderRadius: '50%',\n      width: 72,\n      height: 72,\n      display: 'grid',\n      position: 'relative',\n      placeItems: 'center',\n      '& > svg': {\n        color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.lightDarken) * 100}%, black)`,\n        width: 36,\n        height: 36,\n      },\n      ...theme.applyStyles('dark', {\n        '& > svg': {\n          color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.darkDarken) * 100}%, black)`,\n          width: 36,\n          height: 36,\n        },\n      }),\n    }\n  }\n)\n"],"mappings":";;;AAOA,MAAM,kBAAkB,QAAqB,UAAiB;AAC5D,SAAQ,QAAR;EACE,KAAK,qBAAqB,KACxB,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,KAAK,qBAAqB,OACxB,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,MAAM;GAChC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,KAAK,qBAAqB,OAAO,qBAAqB;EACtD,KAAK,qBAAqB,OAAO,qBAAqB;EACtD,KAAK,UACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,QACE,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;;;AAIP,MAAa,kBAET,OAAO,IAAI,QAAQ;CACrB,SAAS;CACT,YAAY;CACZ,UAAU;CACX,EAAE;AAEH,MAAa,aAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACvC,CAAC,EACC,EAAE,OAAO,SAAS,qBAAqB,WAAW;CACjD,MAAM,eAAe,eAAe,QAAQ,MAAM;AAElD,QAAO;EACL,iBAAiB,QAAQ,aAAa,MAAM,KAAK,aAAa,MAAM;EACpE,cAAc;EACd,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;GACT,OAAO,0BAA0B,aAAa,MAAM,KAAK,IAAI,aAAa,eAAe,IAAI;GAC7F,OAAO;GACP,QAAQ;GACT;EACD,GAAG,MAAM,YAAY,QAAQ,EAC3B,WAAW;GACT,OAAO,0BAA0B,aAAa,MAAM,KAAK,IAAI,aAAa,cAAc,IAAI;GAC5F,OAAO;GACP,QAAQ;GACT,EACF,CAAC;EACH;EAEJ"}

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

@@ -1,75 +1,147 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import WarningRounded from '@mui/icons-material/WarningRounded';
-import { Box, Button, Typography } from '@mui/material';
-import { forwardRef, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
-import { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js';
-import { useSetContentHeight } from '../../hooks/useSetContentHeight.js';
-import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
-import { calculateValueLossPercentage } from './utils.js';
-export const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }, ref) => {
-    const handleCancel = () => {
-        ;
-        ref.current?.close();
-        onCancel?.();
-    };
-    return (_jsx(BottomSheet, { ref: ref, onClose: onCancel, children: _jsx(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) }));
+import { getAccumulatedFeeCostsBreakdown } from "../../utils/fees.js";
+import { FeeBreakdownTooltip } from "../../components/FeeBreakdownTooltip.js";
+import { BottomSheet } from "../../components/BottomSheet/BottomSheet.js";
+import { useSetContentHeight } from "../../hooks/useSetContentHeight.js";
+import { CenterContainer, IconCircle } from "./StatusBottomSheet.style.js";
+import { calculateValueLossPercentage } from "./utils.js";
+import { forwardRef, useRef } from "react";
+import { Box, Button, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+//#region src/pages/TransactionPage/TokenValueBottomSheet.tsx
+const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }, ref) => {
+	const handleCancel = () => {
+		ref.current?.close();
+		onCancel?.();
+	};
+	return /* @__PURE__ */ jsx(BottomSheet, {
+		ref,
+		onClose: onCancel,
+		children: /* @__PURE__ */ jsx(TokenValueBottomSheetContent, {
+			route,
+			onContinue,
+			onCancel: handleCancel
+		})
+	});
 });
-const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
-    const { t } = useTranslation();
-    const ref = useRef(null);
-    useSetContentHeight(ref);
-    const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
-    const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
-    const toAmountUSD = Number.parseFloat(route.toAmountUSD);
-    return (_jsxs(Box, { ref: ref, sx: {
-            p: 3,
-        }, children: [_jsxs(CenterContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRounded, { color: "warning" }) }), _jsx(Typography, { sx: {
-                            py: 1,
-                            fontSize: 18,
-                            fontWeight: 700,
-                        }, children: t('warning.title.highValueLoss') })] }), _jsx(Typography, { sx: {
-                    py: 1,
-                }, children: t('warning.message.highValueLoss') }), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    mt: 1,
-                }, children: [_jsx(Typography, { children: t('main.sending') }), _jsx(Typography, { sx: {
-                            fontWeight: 600,
-                        }, children: t('format.currency', { value: route.fromAmountUSD }) })] }), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    mt: 0.25,
-                }, children: [_jsx(Typography, { children: t('main.fees.network') }), _jsx(FeeBreakdownTooltip, { gasCosts: gasCosts, gasless: !gasCostUSD, children: _jsx(Typography, { sx: {
-                                fontWeight: 600,
-                            }, children: !gasCostUSD
-                                ? t('main.fees.free')
-                                : t('format.currency', { value: gasCostUSD }) }) })] }), feeCostUSD ? (_jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    mt: 0.25,
-                }, children: [_jsx(Typography, { children: t('main.fees.provider') }), _jsx(FeeBreakdownTooltip, { feeCosts: feeCosts, children: _jsx(Typography, { sx: {
-                                fontWeight: 600,
-                            }, children: t('format.currency', { value: feeCostUSD }) }) })] })) : null, _jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    mt: 0.25,
-                }, children: [_jsx(Typography, { children: t('main.receiving') }), _jsx(Typography, { sx: {
-                            fontWeight: 600,
-                        }, children: t('format.currency', { value: route.toAmountUSD }) })] }), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    mt: 0.25,
-                }, children: [_jsx(Typography, { children: t('main.valueLoss') }), _jsxs(Typography, { sx: {
-                            fontWeight: 600,
-                        }, children: [calculateValueLossPercentage(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD), "%"] })] }), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    mt: 3,
-                }, children: [_jsx(Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), _jsx(Box, { sx: {
-                            display: 'flex',
-                            p: 1,
-                        } }), _jsx(Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
+const TokenValueBottomSheetContent = ({ route, onCancel, onContinue }) => {
+	const { t } = useTranslation();
+	const ref = useRef(null);
+	useSetContentHeight(ref);
+	const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+	const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
+	const toAmountUSD = Number.parseFloat(route.toAmountUSD);
+	return /* @__PURE__ */ jsxs(Box, {
+		ref,
+		sx: { p: 3 },
+		children: [
+			/* @__PURE__ */ jsxs(CenterContainer, { children: [/* @__PURE__ */ jsx(IconCircle, {
+				status: "warning",
+				mb: 1,
+				children: /* @__PURE__ */ jsx(WarningRounded, { color: "warning" })
+			}), /* @__PURE__ */ jsx(Typography, {
+				sx: {
+					py: 1,
+					fontSize: 18,
+					fontWeight: 700
+				},
+				children: t("warning.title.highValueLoss")
+			})] }),
+			/* @__PURE__ */ jsx(Typography, {
+				sx: { py: 1 },
+				children: t("warning.message.highValueLoss")
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					justifyContent: "space-between",
+					mt: 1
+				},
+				children: [/* @__PURE__ */ jsx(Typography, { children: t("main.sending") }), /* @__PURE__ */ jsx(Typography, {
+					sx: { fontWeight: 600 },
+					children: t("format.currency", { value: route.fromAmountUSD })
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					justifyContent: "space-between",
+					mt: .25
+				},
+				children: [/* @__PURE__ */ jsx(Typography, { children: t("main.fees.network") }), /* @__PURE__ */ jsx(FeeBreakdownTooltip, {
+					gasCosts,
+					gasless: !gasCostUSD,
+					children: /* @__PURE__ */ jsx(Typography, {
+						sx: { fontWeight: 600 },
+						children: !gasCostUSD ? t("main.fees.free") : t("format.currency", { value: gasCostUSD })
+					})
+				})]
+			}),
+			feeCostUSD ? /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					justifyContent: "space-between",
+					mt: .25
+				},
+				children: [/* @__PURE__ */ jsx(Typography, { children: t("main.fees.provider") }), /* @__PURE__ */ jsx(FeeBreakdownTooltip, {
+					feeCosts,
+					children: /* @__PURE__ */ jsx(Typography, {
+						sx: { fontWeight: 600 },
+						children: t("format.currency", { value: feeCostUSD })
+					})
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					justifyContent: "space-between",
+					mt: .25
+				},
+				children: [/* @__PURE__ */ jsx(Typography, { children: t("main.receiving") }), /* @__PURE__ */ jsx(Typography, {
+					sx: { fontWeight: 600 },
+					children: t("format.currency", { value: route.toAmountUSD })
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					justifyContent: "space-between",
+					mt: .25
+				},
+				children: [/* @__PURE__ */ jsx(Typography, { children: t("main.valueLoss") }), /* @__PURE__ */ jsxs(Typography, {
+					sx: { fontWeight: 600 },
+					children: [calculateValueLossPercentage(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD), "%"]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					mt: 3
+				},
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						onClick: onCancel,
+						fullWidth: true,
+						children: t("button.cancel")
+					}),
+					/* @__PURE__ */ jsx(Box, { sx: {
+						display: "flex",
+						p: 1
+					} }),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "contained",
+						onClick: onContinue,
+						fullWidth: true,
+						children: t("button.continue")
+					})
+				]
+			})
+		]
+	});
 };
+//#endregion
+export { TokenValueBottomSheet };
+
 //# sourceMappingURL=TokenValueBottomSheet.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TokenValueBottomSheet.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.tsx"],"names":[],"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 WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Button, Typography } from '@mui/material'\nimport type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'\nimport { forwardRef, useRef } 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 { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'\nimport { calculateValueLossPercentage } from './utils.js'\n\ninterface TokenValueBottomSheetProps {\n  route: Route\n  onContinue(): void\n  onCancel?(): void\n}\n\nexport const TokenValueBottomSheet: ForwardRefExoticComponent<\n  TokenValueBottomSheetProps & RefAttributes<BottomSheetBase>\n> = forwardRef<BottomSheetBase, TokenValueBottomSheetProps>(\n  ({ route, onContinue, onCancel }, ref) => {\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)\n\nconst TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({\n  route,\n  onCancel,\n  onContinue,\n}) => {\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  return (\n    <Box\n      ref={ref}\n      sx={{\n        p: 3,\n      }}\n    >\n      <CenterContainer>\n        <IconCircle status=\"warning\" mb={1}>\n          <WarningRounded color=\"warning\" />\n        </IconCircle>\n        <Typography\n          sx={{\n            py: 1,\n            fontSize: 18,\n            fontWeight: 700,\n          }}\n        >\n          {t('warning.title.highValueLoss')}\n        </Typography>\n      </CenterContainer>\n      <Typography\n        sx={{\n          py: 1,\n        }}\n      >\n        {t('warning.message.highValueLoss')}\n      </Typography>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 1,\n        }}\n      >\n        <Typography>{t('main.sending')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {t('format.currency', { value: route.fromAmountUSD })}\n        </Typography>\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 0.25,\n        }}\n      >\n        <Typography>{t('main.fees.network')}</Typography>\n        <FeeBreakdownTooltip gasCosts={gasCosts} gasless={!gasCostUSD}>\n          <Typography\n            sx={{\n              fontWeight: 600,\n            }}\n          >\n            {!gasCostUSD\n              ? t('main.fees.free')\n              : t('format.currency', { value: gasCostUSD })}\n          </Typography>\n        </FeeBreakdownTooltip>\n      </Box>\n      {feeCostUSD ? (\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            mt: 0.25,\n          }}\n        >\n          <Typography>{t('main.fees.provider')}</Typography>\n          <FeeBreakdownTooltip feeCosts={feeCosts}>\n            <Typography\n              sx={{\n                fontWeight: 600,\n              }}\n            >\n              {t('format.currency', { value: feeCostUSD })}\n            </Typography>\n          </FeeBreakdownTooltip>\n        </Box>\n      ) : null}\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 0.25,\n        }}\n      >\n        <Typography>{t('main.receiving')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {t('format.currency', { value: route.toAmountUSD })}\n        </Typography>\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          mt: 0.25,\n        }}\n      >\n        <Typography>{t('main.valueLoss')}</Typography>\n        <Typography\n          sx={{\n            fontWeight: 600,\n          }}\n        >\n          {calculateValueLossPercentage(\n            fromAmountUSD,\n            toAmountUSD,\n            gasCostUSD,\n            feeCostUSD\n          )}\n          %\n        </Typography>\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          mt: 3,\n        }}\n      >\n        <Button variant=\"text\" onClick={onCancel} fullWidth>\n          {t('button.cancel')}\n        </Button>\n        <Box\n          sx={{\n            display: 'flex',\n            p: 1,\n          }}\n        />\n        <Button variant=\"contained\" onClick={onContinue} fullWidth>\n          {t('button.continue')}\n        </Button>\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}