0xtrails 0.16.2 → 0.17.0

package/dist/widget/components/QuoteDetails.js

@@ -1,728 +0,0 @@
-import { logger as ge } from "../../logger/index.js";
-import { getExplorerUrl as fe, getExplorerUrlForAddress as y } from "../../explorer.js";
-import { isNativeToken as E, truncateAddress as k } from "../../utils/address.js";
-import { formatUsdAmountDisplay as W, formatUsdAmountLocaleDisplay as b } from "../../utils/format.js";
-import { isDisplayableTransactionHash as K } from "../../transactions.js";
-import B from "./ChainImage.js";
-import w from "./TokenImage.js";
-import Q from "./Tooltip.js";
-import { isSameChainSameToken as xe } from "../../utils/passthrough.js";
-import { usePriceImpactWarning as ye } from "../../hooks/usePriceImpactWarning.js";
-import ke from "./PriceImpactWarning.js";
-import { hasFailedOrAbortedTransaction as be } from "../utils/transactionFailure.js";
-import { useTrails as ve } from "../providers/TrailsProvider.js";
-import { useCallback as L, useEffect as Y, useMemo as J, useRef as X, useState as A } from "react";
-import { Fragment as v, jsx as a, jsxs as t } from "react/jsx-runtime";
-import { ChevronDown as S, Clock as Ne, ExternalLink as f, Info as q, TriangleAlert as Z } from "lucide-react";
-var je = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee = !0, children: z, onExpand: R, swapMode: ae, compact: te = !1, isRefetching: ne = !1, initialExpanded: x = !1, showInsufficientFunds: re = !0, isPassthrough: p = !1, liveTransactionStates: F, hasMetaTxError: V }) => {
-  const [u, ie] = A(!1), [U, H] = A(!0), [g, D] = A(x), [j, se] = A(x), le = X(null), { trailsAppUrl: de } = ve(), C = X(null), I = ye(), P = xe(e), m = r?.totalFee ? r?.totalFee / (T ?? 1) : 0;
-  r && ge.console.log("[trails-sdk] OnRamp Quote", { onRampQuote: r }), Y(() => {
-    R?.(g);
-  }, [g, R]), Y(() => {
-    x !== j && (se(x), D(x));
-  }, [x, j]);
-  const G = L(() => {
-    if (!r || !e?.originTokenRate) return null;
-    const n = r.exchangeRate;
-    if (!n || e.originTokenRate === "0") return null;
-    const s = e.originTokenRate.match(/=\s*([\d.]+)/), i = s ? parseFloat(s[1]) : null;
-    return i ? {
-      fiatToDestinationToken: i / n,
-      fiatSymbol: r.sourceCurrencyCode,
-      destSymbol: e.destinationToken?.symbol || "TOKEN",
-      fiatToUsdcRate: n
-    } : null;
-  }, [r, e]), { totalFeeUsd: $, totalFeeUsdDisplay: oe, totalFeeUsdLocaleDisplay: O } = J(() => {
-    if (r) {
-      const n = m + parseFloat(e?.fees.totalFeeAmountUsd || "0");
-      return {
-        totalFeeUsd: n,
-        totalFeeUsdDisplay: W(n),
-        totalFeeUsdLocaleDisplay: b(n)
-      };
-    }
-    if (e?.fees?.totalFeeAmountUsd) {
-      const n = parseFloat(e.fees.totalFeeAmountUsd);
-      return {
-        totalFeeUsd: n,
-        totalFeeUsdDisplay: e.fees.totalFeeAmountUsdDisplay ?? W(n),
-        totalFeeUsdLocaleDisplay: e.fees.totalFeeAmountUsdLocaleDisplay ?? b(n)
-      };
-    }
-    return {
-      totalFeeUsd: 0,
-      totalFeeUsdDisplay: "$0.00",
-      totalFeeUsdLocaleDisplay: b(0)
-    };
-  }, [
-    r,
-    e?.fees,
-    m
-  ]), ce = L(() => e?.slippageTolerance ? parseFloat(e.slippageTolerance) * 100 : null, [e?.slippageTolerance]), _ = J(() => {
-    const n = (e?.intentProtocol || "v1").replace("_", ".").toUpperCase();
-    return n.startsWith("V") ? n : `V${n}`;
-  }, [e?.intentProtocol]), he = L((n, s) => {
-    const i = e?.routeProviders?.length ?? e?.trailsFeeBreakdown?.providerFees?.length ?? 0;
-    return i > 1 ? s === 0 ? "Swap" : "Bridge" : i === 1 ? e?.originChain?.id === e?.destinationChain?.id ? "Swap" : "Bridge" : n.isBridge ? "Bridge" : "Swap";
-  }, [
-    e?.destinationChain?.id,
-    e?.originChain?.id,
-    e?.routeProviders?.length,
-    e?.trailsFeeBreakdown?.providerFees?.length
-  ]);
-  return ee ? /* @__PURE__ */ t("div", {
-    className: `relative transition-opacity duration-300 ${ne ? "opacity-50" : ""}`,
-    children: [
-      /* @__PURE__ */ a(ke, {
-        quote: e,
-        thresholdBps: I.thresholdBps,
-        warningMessage: I.warningMessage,
-        fallbackBridgeUrl: I.fallbackBridgeUrl
-      }),
-      re && e?.noSufficientBalance && /* @__PURE__ */ t("div", {
-        className: "flex justify-between items-center mb-2 p-2 bg-amber-50 dark:bg-amber-900/20 rounded-lg",
-        children: [/* @__PURE__ */ t("span", {
-          className: "text-xs text-amber-600 dark:text-amber-400 flex items-center gap-1",
-          children: ["Balance Status:", /* @__PURE__ */ a(Q, {
-            message: "Your wallet does not have sufficient balance to complete this transaction",
-            children: /* @__PURE__ */ a(q, { className: "size-3 text-amber-500 dark:text-amber-400 cursor-pointer" })
-          })]
-        }), /* @__PURE__ */ t("span", {
-          className: "font-medium text-xs text-amber-600 dark:text-amber-400 flex items-center gap-1",
-          children: [/* @__PURE__ */ a(Z, { className: "size-3" }), "Insufficient Balance"]
-        })]
-      }),
-      /* @__PURE__ */ a("div", {
-        className: "flex justify-center",
-        children: ae ? /* @__PURE__ */ t("button", {
-          type: "button",
-          onClick: () => D(!g),
-          className: "w-full flex items-center justify-between px-2 py-2 trails-border-radius-button transition-colors cursor-pointer text-sm",
-          "aria-label": "Show more details",
-          children: [/* @__PURE__ */ a("div", {
-            className: "font-semibold text-gray-900 dark:text-white flex items-center gap-2 whitespace-nowrap max-w-48 truncate",
-            children: (() => {
-              const n = G();
-              if (n) {
-                const { fiatToDestinationToken: s, fiatSymbol: i, destSymbol: l } = n;
-                return /* @__PURE__ */ t("span", { children: [
-                  "1 ",
-                  i,
-                  " = ",
-                  s.toFixed(6),
-                  " ",
-                  l
-                ] });
-              }
-              if (r?.exchangeRate) {
-                const s = r.sourceCurrencyCode, i = r.destinationCurrencyCode.split("_")[0];
-                return /* @__PURE__ */ t("span", { children: [
-                  "1 ",
-                  s,
-                  " =",
-                  " ",
-                  (1 / r.exchangeRate).toFixed(6),
-                  " ",
-                  i
-                ] });
-              }
-              return e?.originTokenRate && e.originTokenRate !== "0" ? /* @__PURE__ */ a("span", { children: e.originTokenRate }) : null;
-            })()
-          }), /* @__PURE__ */ t("div", {
-            className: "flex items-center gap-2 text-gray-600 dark:text-gray-400",
-            children: [
-              e?.completionEstimateDisplay && /* @__PURE__ */ t("div", {
-                className: "flex items-center gap-1",
-                children: [/* @__PURE__ */ a(Ne, { className: "size-3" }), /* @__PURE__ */ t("span", {
-                  className: "font-medium",
-                  children: ["~", r ? "3 min" : e.completionEstimateDisplay]
-                })]
-              }),
-              $ > 0 && /* @__PURE__ */ t("div", {
-                className: "flex items-center gap-1",
-                children: [/* @__PURE__ */ a("svg", {
-                  "aria-hidden": "true",
-                  focusable: "false",
-                  "data-prefix": "fas",
-                  "data-icon": "gas-pump",
-                  className: "svg-inline--fa fa-gas-pump",
-                  role: "img",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  viewBox: "0 0 512 512",
-                  width: "12",
-                  children: /* @__PURE__ */ a("path", {
-                    fill: "currentColor",
-                    d: "M32 64C32 28.7 60.7 0 96 0H256c35.3 0 64 28.7 64 64V256h8c48.6 0 88 39.4 88 88v32c0 13.3 10.7 24 24 24s24-10.7 24-24V222c-27.6-7.1-48-32.2-48-62V96L384 64c-8.8-8.8-8.8-23.2 0-32s23.2-8.8 32 0l77.3 77.3c12 12 18.7 28.3 18.7 45.3V168v24 32V376c0 39.8-32.2 72-72 72s-72-32.2-72-72V344c0-22.1-17.9-40-40-40h-8V448c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32V64zM96 80v96c0 8.8 7.2 16 16 16H240c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16H112c-8.8 0-16 7.2-16 16z"
-                  })
-                }), /* @__PURE__ */ a("span", {
-                  className: "font-medium",
-                  title: oe,
-                  children: O
-                })]
-              }),
-              /* @__PURE__ */ a(S, { className: `size-3 transition-transform duration-300 ease-out text-gray-600 dark:text-gray-400 ${g ? "rotate-180" : ""}` })
-            ]
-          })]
-        }) : /* @__PURE__ */ t("button", {
-          type: "button",
-          onClick: () => D(!g),
-          className: `w-full max-w-md flex items-center ${te ? "justify-center" : "justify-between"} gap-2 py-1 px-1 trails-border-radius-button transition-colors cursor-pointer text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300`,
-          "aria-label": "Show transaction details",
-          children: [/* @__PURE__ */ a("span", { children: "Transaction details" }), /* @__PURE__ */ a(S, { className: `size-3 transition-transform duration-300 ease-out ${g ? "rotate-180" : ""}` })]
-        })
-      }),
-      /* @__PURE__ */ a("div", {
-        ref: le,
-        className: `overflow-auto transition-all duration-300 ease-out ${g ? "max-h-[250px] opacity-100" : "max-h-0 opacity-0"}`,
-        children: /* @__PURE__ */ a("div", {
-          className: "text-sm p-2 space-y-2",
-          children: /* @__PURE__ */ t("div", {
-            className: "space-y-2",
-            children: [
-              e?.trailsFeeBreakdown && (e?.trailsFeeBreakdown.originRelayFee || e?.trailsFeeBreakdown.destinationRelayFee) && $ > 0 && /* @__PURE__ */ t(v, { children: [
-                /* @__PURE__ */ t(d, {
-                  variant: "bold",
-                  children: [/* @__PURE__ */ a(o, {
-                    tooltip: "The total fees for this transaction, including gas costs and all provider fees",
-                    children: "Fees total"
-                  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("span", {
-                    className: "notranslate",
-                    translate: "no",
-                    title: `${$}`,
-                    children: [
-                      "≈",
-                      " ",
-                      O || e?.fees?.totalFeeAmountUsdLocaleDisplay
-                    ]
-                  }) })]
-                }),
-                /* @__PURE__ */ a("div", { className: "h-0" }),
-                (e.trailsFeeBreakdown.originRelayFee || e.trailsFeeBreakdown.destinationRelayFee) && /* @__PURE__ */ t(N, { children: [
-                  /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
-                    tooltip: "Total gas costs for executing transactions on both origin and destination chains",
-                    children: "All gas costs"
-                  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a("span", {
-                    title: `$${e.totalGasUsd ?? 0}`,
-                    children: e.totalGasUsdLocaleDisplay || e.totalGasUsdDisplay || "$0.00"
-                  }) })] }),
-                  e.trailsFeeBreakdown.originRelayFee && /* @__PURE__ */ t(d, {
-                    variant: "light",
-                    children: [/* @__PURE__ */ t(o, {
-                      tooltip: "Gas fee for executing the transaction on the origin chain",
-                      children: ["Origin Gas", /* @__PURE__ */ a(B, {
-                        chainId: e.originChain.id,
-                        size: 16
-                      })]
-                    }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a("span", {
-                      title: `$${e.originGasUsd ?? 0}`,
-                      children: e.originGasUsdLocaleDisplay || e.trailsFeeBreakdown.originRelayFee.usdValueLocale || e.trailsFeeBreakdown.originRelayFee.usdValue
-                    }) })]
-                  }),
-                  e.trailsFeeBreakdown.destinationRelayFee && /* @__PURE__ */ t(d, {
-                    variant: "light",
-                    children: [/* @__PURE__ */ t(o, {
-                      tooltip: "Gas fee for executing the transaction on the destination chain",
-                      children: ["Destination Gas", /* @__PURE__ */ a(B, {
-                        chainId: e.destinationChain.id,
-                        size: 16
-                      })]
-                    }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a("span", {
-                      title: `$${e.destinationGasUsd ?? 0}`,
-                      children: e.destinationGasUsdLocaleDisplay || e.trailsFeeBreakdown.destinationRelayFee.usdValueLocale || e.trailsFeeBreakdown.destinationRelayFee.usdValue
-                    }) })]
-                  })
-                ] }),
-                /* @__PURE__ */ a("div", { className: "h-1" })
-              ] }),
-              (() => {
-                const n = e?.trailsFeeBreakdown && (e.providerFeeUsd ?? 0) > 0, s = e?.trailsFeeBreakdown && (e.trailsFeeUsd ?? 0) > 0, i = r && (r.totalFee ?? 0) > 0;
-                return !n && !s && !i ? null : /* @__PURE__ */ t(N, { children: [
-                  ((e?.totalProviderFeesUsd ?? 0) > 0 || i) && /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
-                    tooltip: "Total provider fees for bridge, routing, and onramp services",
-                    children: "All provider fees"
-                  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a("span", {
-                    title: `$${e ? (e?.totalProviderFeesUsd ?? 0) + (m ?? 0) : m ?? 0}`,
-                    children: e ? b((e?.totalProviderFeesUsd ?? 0) + (m ?? 0)) : b(m)
-                  }) })] }),
-                  n && e?.trailsFeeBreakdown?.providerFees && e.trailsFeeBreakdown.providerFees.length > 0 && e.trailsFeeBreakdown.providerFees.map((l, h) => /* @__PURE__ */ t(d, {
-                    variant: "light",
-                    children: [/* @__PURE__ */ t(o, {
-                      tooltip: `Fee charged by ${l.name || l.id}`,
-                      children: [he(l, h), l.name && /* @__PURE__ */ t("span", { children: [
-                        " ",
-                        "(",
-                        /* @__PURE__ */ t("a", {
-                          href: l.url,
-                          target: "_blank",
-                          rel: "noopener noreferrer",
-                          className: "hover:underline inline-flex items-center gap-0.5 text-blue-500",
-                          children: [l.name, /* @__PURE__ */ a(f, { className: "size-3" })]
-                        }),
-                        ")"
-                      ] })]
-                    }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a("span", {
-                      title: `$${l.feeUsd}`,
-                      children: l.usdValueLocale || l.usdValue
-                    }) })]
-                  }, "--")),
-                  i && /* @__PURE__ */ t(d, {
-                    variant: "light",
-                    children: [/* @__PURE__ */ t(o, {
-                      tooltip: "Fee charged by the onramp service provider, including network and transaction fees",
-                      children: ["Onramp", r.serviceProvider && /* @__PURE__ */ t("span", { children: [
-                        "(",
-                        r.serviceProvider,
-                        ")"
-                      ] })]
-                    }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a("span", {
-                      title: `$${m ?? 0}`,
-                      children: b(m)
-                    }) })]
-                  }),
-                  s && e?.trailsFeeBreakdown?.trailsFee && (() => {
-                    const l = e.trailsFeeBreakdown.trailsFee;
-                    return /* @__PURE__ */ t(d, {
-                      variant: "light",
-                      children: [/* @__PURE__ */ a(o, {
-                        tooltip: "Platform fee for using the Trails service",
-                        children: "Trails"
-                      }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a("span", {
-                        title: l.usdValue,
-                        children: l.usdValueLocale || l.usdValue
-                      }) })]
-                    });
-                  })()
-                ] });
-              })(),
-              /* @__PURE__ */ a("div", { className: "h-px bg-gray-200 dark:bg-gray-800 my-4" }),
-              (() => {
-                const n = e?.slippageTolerance != null && Number(e.slippageTolerance) !== 0, s = e?.priceImpact != null && Number(e.priceImpact) !== 0, i = e?.intentId != null && e.intentId !== "";
-                return n || s || i ? /* @__PURE__ */ t(N, { children: [
-                  /* @__PURE__ */ a(d, {
-                    variant: "bold",
-                    children: /* @__PURE__ */ a(o, { children: "Transaction details" })
-                  }),
-                  i && /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, { children: "Intent ID" }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("a", {
-                    href: `${de}/intent/${e.intentId}`,
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    className: "font-mono text-xs hover:underline flex items-center gap-1 text-blue-500",
-                    children: [k(e?.intentId ?? "", 9, 3), /* @__PURE__ */ a(f, { className: "size-3" })]
-                  }) })] }),
-                  n && /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
-                    tooltip: "The maximum percentage by which the exchange rate can change before the transaction fails. Higher slippage means more tolerance for price changes but potentially worse rates.",
-                    children: "Max slippage"
-                  }), /* @__PURE__ */ t(c, { children: [ce(), "%"] })] }),
-                  s && /* @__PURE__ */ t("div", {
-                    className: "space-y-1",
-                    children: [/* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
-                      tooltip: "The percentage change in the token price caused by your trade. Higher impact means your trade affects the market price more, potentially resulting in worse rates.",
-                      children: "Price impact"
-                    }), /* @__PURE__ */ t(c, {
-                      className: `flex items-center gap-1 ${Math.abs(Number(e.priceImpact)) > 5 ? "text-red-600 dark:text-red-400" : Math.abs(Number(e.priceImpact)) > 0.5 ? "text-orange-600 dark:text-orange-400" : "text-gray-600 dark:text-gray-400"}`,
-                      children: [
-                        Math.abs(Number(e.priceImpact)) > 0.5 && /* @__PURE__ */ a("span", {
-                          title: "High price impact",
-                          children: /* @__PURE__ */ a(Z, { className: "size-3" })
-                        }),
-                        Number(e.priceImpact).toFixed(2),
-                        "%"
-                      ]
-                    })] }), e.priceImpactUsdDisplay && /* @__PURE__ */ a("div", {
-                      className: "text-right",
-                      children: /* @__PURE__ */ t("span", {
-                        className: "text-xs text-gray-500 dark:text-gray-400 notranslate",
-                        translate: "no",
-                        title: e.priceImpactUsdDisplay,
-                        children: [
-                          "≈",
-                          " ",
-                          e.priceImpactUsdLocaleDisplay || e.priceImpactUsdDisplay
-                        ]
-                      })
-                    })]
-                  })
-                ] }) : null;
-              })(),
-              /* @__PURE__ */ t("div", {
-                className: "space-y-3 pt-2",
-                children: [
-                  !P && (() => {
-                    const n = G();
-                    if (n) {
-                      const { fiatToDestinationToken: s, fiatSymbol: i, destSymbol: l } = n;
-                      return /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
-                        tooltip: `Combined exchange rate from ${i} to ${l} (via USDC on Base)`,
-                        children: "Exchange Rate"
-                      }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("button", {
-                        type: "button",
-                        onClick: () => H(!U),
-                        className: "hover:underline cursor-pointer",
-                        children: [
-                          "1 ",
-                          i,
-                          " = $",
-                          s.toFixed(6),
-                          " $",
-                          l,
-                          "`"
-                        ]
-                      }) })] });
-                    }
-                    if (r?.exchangeRate) {
-                      const s = r.sourceCurrencyCode, i = r.destinationCurrencyCode.split("_")[0], l = r.exchangeRate;
-                      return /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
-                        tooltip: `Exchange rate from ${s} to ${i}`,
-                        children: "Exchange Rate"
-                      }), /* @__PURE__ */ t(c, { children: [
-                        "1 ",
-                        s,
-                        " = $",
-                        (1 / l).toFixed(6),
-                        " $",
-                        i
-                      ] })] });
-                    }
-                    return e?.originTokenRate && e?.destinationTokenRate && e.originTokenRate !== "0" && e.destinationTokenRate !== "0" ? /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
-                      tooltip: "The current exchange rate between the origin and destination tokens",
-                      children: "Exchange Rate"
-                    }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a("button", {
-                      type: "button",
-                      onClick: () => H(!U),
-                      className: "hover:underline cursor-pointer",
-                      children: U ? e.originTokenRate : e.destinationTokenRate
-                    }) })] }) : null;
-                  })(),
-                  (e?.originAmount && e?.originToken.symbol && e?.originChain.id || e?.destinationToken.symbol && e?.destinationAmount && e?.destinationAmountUsdDisplay && e?.destinationChain.id) && /* @__PURE__ */ t(N, { children: [!P && e?.originAmount && e?.originToken.symbol && e?.originChain.id && /* @__PURE__ */ t(d, {
-                    className: "items-start",
-                    children: [/* @__PURE__ */ a(o, {
-                      tooltip: p ? "The amount of tokens you will transfer" : "The amount of tokens you will send from the origin chain",
-                      children: p ? "Transfer Amount" : "Origin Transfer Amount"
-                    }), /* @__PURE__ */ a("div", {
-                      className: "text-right",
-                      children: E(e.originToken.contractAddress) ? /* @__PURE__ */ t(v, { children: [/* @__PURE__ */ t("div", {
-                        className: "font-medium text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1 justify-end",
-                        children: [/* @__PURE__ */ a(w, {
-                          imageUrl: e.originToken.imageUrl,
-                          symbol: e.originToken.symbol,
-                          chainId: e.originChain.id,
-                          contractAddress: e.originToken.contractAddress,
-                          size: 16
-                        }), /* @__PURE__ */ t("span", {
-                          className: "notranslate",
-                          translate: "no",
-                          children: [
-                            e.originAmountFormattedLocale || e.originAmountDisplay,
-                            " ",
-                            e.originToken.symbol
-                          ]
-                        })]
-                      }), e.originAmountUsdDisplay && /* @__PURE__ */ t("div", {
-                        className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 notranslate",
-                        translate: "no",
-                        title: e.originAmountUsdDisplay,
-                        children: [
-                          "≈",
-                          " ",
-                          e.originAmountUsdLocaleDisplay || e.originAmountUsdDisplay
-                        ]
-                      })] }) : /* @__PURE__ */ t(v, { children: [/* @__PURE__ */ a("a", {
-                        href: y({
-                          address: e.originToken.contractAddress,
-                          chainId: e.originChain.id
-                        }),
-                        target: "_blank",
-                        rel: "noopener noreferrer",
-                        className: "hover:underline cursor-pointer",
-                        children: /* @__PURE__ */ t("div", {
-                          className: "font-medium text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1 justify-end",
-                          children: [
-                            /* @__PURE__ */ a(w, {
-                              imageUrl: e.originToken.imageUrl,
-                              symbol: e.originToken.symbol,
-                              chainId: e.originChain.id,
-                              contractAddress: e.originToken.contractAddress,
-                              size: 16
-                            }),
-                            e.originAmountFormattedLocale || e.originAmountDisplay,
-                            " ",
-                            e.originToken.symbol
-                          ]
-                        })
-                      }), e.originAmountUsdDisplay && /* @__PURE__ */ t("div", {
-                        className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 notranslate",
-                        translate: "no",
-                        title: e.originAmountUsdDisplay,
-                        children: [
-                          "≈",
-                          " ",
-                          e.originAmountUsdLocaleDisplay || e.originAmountUsdDisplay
-                        ]
-                      })] })
-                    })]
-                  }), e?.destinationToken.symbol && e?.destinationAmount && e?.destinationAmountUsdDisplay && e?.destinationChain.id && /* @__PURE__ */ t(d, {
-                    className: "items-start",
-                    children: [/* @__PURE__ */ a(o, {
-                      tooltip: p ? "The amount of tokens the recipient will receive" : "The amount of tokens you will receive on the destination chain after the swap and/or bridge",
-                      children: p ? "Target Amount" : "Destination Target Amount"
-                    }), /* @__PURE__ */ a("div", {
-                      className: "text-right",
-                      children: E(e.destinationToken.contractAddress) ? /* @__PURE__ */ t(v, { children: [/* @__PURE__ */ t("div", {
-                        className: "font-medium text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1 justify-end",
-                        children: [/* @__PURE__ */ a(w, {
-                          imageUrl: e.destinationToken.imageUrl,
-                          symbol: e.destinationToken.symbol,
-                          chainId: e.destinationChain.id,
-                          contractAddress: e.destinationToken.contractAddress,
-                          size: 16
-                        }), /* @__PURE__ */ t("span", {
-                          className: "notranslate",
-                          translate: "no",
-                          children: [
-                            e.destinationAmountFormattedLocale || e.destinationAmountDisplay,
-                            " ",
-                            e.destinationToken.symbol
-                          ]
-                        })]
-                      }), e.destinationAmountUsdDisplay && /* @__PURE__ */ t("div", {
-                        className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 notranslate",
-                        translate: "no",
-                        title: e.destinationAmountUsdDisplay,
-                        children: [
-                          "≈",
-                          " ",
-                          e.destinationAmountUsdLocaleDisplay || e.destinationAmountUsdDisplay
-                        ]
-                      })] }) : /* @__PURE__ */ t(v, { children: [/* @__PURE__ */ a("a", {
-                        href: y({
-                          address: e.destinationToken.contractAddress,
-                          chainId: e.destinationChain.id
-                        }),
-                        target: "_blank",
-                        rel: "noopener noreferrer",
-                        className: "hover:underline cursor-pointer",
-                        children: /* @__PURE__ */ t("div", {
-                          className: "font-medium text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1 justify-end",
-                          children: [
-                            /* @__PURE__ */ a(w, {
-                              imageUrl: e.destinationToken.imageUrl,
-                              symbol: e.destinationToken.symbol,
-                              chainId: e.destinationChain.id,
-                              contractAddress: e.destinationToken.contractAddress,
-                              size: 16
-                            }),
-                            e.destinationAmountFormattedLocale || e.destinationAmountDisplay,
-                            " ",
-                            e.destinationToken.symbol
-                          ]
-                        })
-                      }), e.destinationAmountUsdDisplay && /* @__PURE__ */ t("div", {
-                        className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 notranslate",
-                        translate: "no",
-                        title: e.destinationAmountUsdDisplay,
-                        children: [
-                          "≈",
-                          " ",
-                          e.destinationAmountUsdLocaleDisplay || e.destinationAmountUsdDisplay
-                        ]
-                      })] })
-                    })]
-                  })] }),
-                  (e?.originDepositAddress || e?.destinationDepositAddress || e?.destinationAddress) && /* @__PURE__ */ a(N, { children: p ? e?.destinationAddress && /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
-                    tooltip: "The address that will receive the tokens",
-                    children: "Target Address"
-                  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("a", {
-                    href: y({
-                      address: e.destinationAddress,
-                      chainId: e.destinationChain.id
-                    }),
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    className: "font-mono text-xs hover:underline flex items-center gap-1 text-blue-500",
-                    children: [k(e.destinationAddress), /* @__PURE__ */ a(f, { className: "size-3" })]
-                  }) })] }) : /* @__PURE__ */ t(v, { children: [
-                    e?.originDepositAddress && /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
-                      tooltip: "This is the intent address to deposit to that will then execute the swap and/or bridge",
-                      children: "Origin Deposit Address"
-                    }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("a", {
-                      href: y({
-                        address: e.originDepositAddress,
-                        chainId: e.originChain.id
-                      }),
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      className: "font-mono text-xs hover:underline flex items-center gap-1 text-blue-500",
-                      children: [k(e.originDepositAddress), /* @__PURE__ */ a(f, { className: "size-3" })]
-                    }) })] }),
-                    e?.destinationDepositAddress && e?.destinationDepositAddress !== e?.originDepositAddress && /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
-                      tooltip: "This is the address that will receive the tokens after any swap and/or bridge from the origin chain",
-                      children: "Destination Deposit Address"
-                    }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("a", {
-                      href: y({
-                        address: e.destinationDepositAddress,
-                        chainId: e.destinationChain.id
-                      }),
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      className: "font-mono text-xs hover:underline flex items-center gap-1 text-blue-500",
-                      children: [k(e.destinationDepositAddress), /* @__PURE__ */ a(f, { className: "size-3" })]
-                    }) })] }),
-                    e?.destinationAddress && /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
-                      tooltip: "This is the final execution address or recipient address",
-                      children: "Destination Target Address"
-                    }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("a", {
-                      href: y({
-                        address: e.destinationAddress,
-                        chainId: e.destinationChain.id
-                      }),
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      className: "font-mono text-xs hover:underline flex items-center gap-1 text-blue-500",
-                      children: [k(e.destinationAddress), /* @__PURE__ */ a(f, { className: "size-3" })]
-                    }) })] })
-                  ] }) }),
-                  e?.destinationCalldata && /* @__PURE__ */ t("div", {
-                    className: "space-y-2",
-                    children: [/* @__PURE__ */ a("div", {
-                      className: "space-y-0.5",
-                      children: /* @__PURE__ */ t("button", {
-                        type: "button",
-                        onClick: () => {
-                          ie(!u), u || setTimeout(() => {
-                            C.current && C.current.scrollIntoView({
-                              behavior: "smooth",
-                              block: "nearest"
-                            });
-                          }, 150);
-                        },
-                        className: "flex items-center gap-1 text-xs hover:underline cursor-pointer transition-colors duration-200 text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300",
-                        "aria-label": u ? "Hide custom calldata" : "Show custom calldata",
-                        children: [/* @__PURE__ */ a("span", {
-                          className: "text-[10px]",
-                          children: "Includes custom destination calldata"
-                        }), /* @__PURE__ */ a(S, { className: `size-3 transition-transform duration-300 ease-out ${u ? "rotate-180" : ""}` })]
-                      })
-                    }), /* @__PURE__ */ a("div", {
-                      ref: C,
-                      className: `overflow-hidden transition-all duration-300 ease-out ${u ? "max-h-32 opacity-100" : "max-h-0 opacity-0"}`,
-                      children: /* @__PURE__ */ a("div", {
-                        className: "mt-2",
-                        children: /* @__PURE__ */ a("textarea", {
-                          value: e.destinationCalldata,
-                          readOnly: !0,
-                          className: "w-full p-2 text-xs font-mono rounded border border-solid resize-none transition-all duration-200 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200",
-                          rows: 4,
-                          placeholder: "No custom calldata"
-                        })
-                      })
-                    })]
-                  }),
-                  (() => {
-                    const n = F && F.length > 0, s = n ? F : p && e?.passthroughTransactionStates?.length ? e.passthroughTransactionStates : e?.transactionStates;
-                    return !s || s.length === 0 ? null : /* @__PURE__ */ t("div", {
-                      className: "mt-4",
-                      children: [/* @__PURE__ */ a("div", { className: "h-px bg-gray-200 dark:bg-gray-800 mb-3" }), /* @__PURE__ */ t(N, { children: [/* @__PURE__ */ a(d, {
-                        variant: "bold",
-                        children: /* @__PURE__ */ a(o, { children: /* @__PURE__ */ t("span", {
-                          className: "flex items-center gap-2",
-                          children: [n ? "Transactions" : "Transaction Steps", p && /* @__PURE__ */ a("span", {
-                            className: "text-[10px] px-1.5 py-0.5 rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 font-medium",
-                            children: "Direct"
-                          })]
-                        }) })
-                      }), s.map((i, l) => {
-                        const h = i, me = n && K(h.transactionHash), M = h.explorerUrl || (K(h.transactionHash) && h.chainId ? fe({
-                          txHash: h.transactionHash,
-                          chainId: h.chainId
-                        }) : null), pe = V && n ? V(h) : !1;
-                        return /* @__PURE__ */ t("div", {
-                          className: `p-2 rounded ${n ? "bg-gray-100 dark:bg-gray-700/50" : ""}`,
-                          children: [/* @__PURE__ */ t("div", {
-                            className: "flex justify-between items-center",
-                            children: [/* @__PURE__ */ t("span", {
-                              className: "flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400",
-                              children: [!n && /* @__PURE__ */ a("span", {
-                                className: "w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-[10px] font-medium",
-                                children: l + 1
-                              }), i.label]
-                            }), /* @__PURE__ */ t("span", {
-                              className: "flex items-center gap-2",
-                              children: [/* @__PURE__ */ a(B, {
-                                chainId: i.chainId,
-                                size: 14
-                              }), n && h.state && /* @__PURE__ */ a("span", {
-                                className: `px-2 py-0.5 rounded-full text-xs ${be(h) ? "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400" : h.state === "confirmed" ? "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400" : "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400"}`,
-                                children: h.state.charAt(0).toUpperCase() + h.state.slice(1)
-                              })]
-                            })]
-                          }), n && me && M && /* @__PURE__ */ t("div", {
-                            className: "mt-1 flex justify-between items-center",
-                            children: [/* @__PURE__ */ a("span", {
-                              className: "text-xs text-gray-600 dark:text-gray-400",
-                              children: "Hash"
-                            }), /* @__PURE__ */ t("a", {
-                              href: M,
-                              target: "_blank",
-                              rel: "noopener noreferrer",
-                              className: "text-xs flex items-center gap-1 hover:underline text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
-                              children: [
-                                pe && /* @__PURE__ */ t("svg", {
-                                  className: "w-4 h-4 text-orange-500",
-                                  fill: "none",
-                                  viewBox: "0 0 24 24",
-                                  stroke: "currentColor",
-                                  children: [/* @__PURE__ */ a("title", { children: "An internal meta transaction failure occurred" }), /* @__PURE__ */ a("path", {
-                                    strokeLinecap: "round",
-                                    strokeLinejoin: "round",
-                                    strokeWidth: 2,
-                                    d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-                                  })]
-                                }),
-                                /* @__PURE__ */ a("span", { children: k(h.transactionHash) }),
-                                /* @__PURE__ */ a(f, { className: "w-3 h-3" })
-                              ]
-                            })]
-                          })]
-                        }, i.label || l);
-                      })] })]
-                    });
-                  })(),
-                  _.length > 0 && /* @__PURE__ */ t("div", {
-                    className: "pt-1 text-[10px] opacity-50 text-gray-600 dark:text-gray-400",
-                    children: ["Protocol version: ", _]
-                  }),
-                  z && /* @__PURE__ */ a("div", {
-                    className: "mb-0",
-                    children: z
-                  })
-                ]
-              })
-            ]
-          })
-        })
-      })
-    ]
-  }) : null;
-}, N = ({ children: e, className: r = "" }) => /* @__PURE__ */ a("div", {
-  className: `space-y-2 ${r}`,
-  children: e
-}), Te = {
-  default: "text-xs text-gray-600 dark:text-gray-400",
-  light: "text-xs text-gray-400 dark:text-gray-600",
-  bold: "text-sm font-semibold text-gray-900 dark:text-white"
-}, d = ({ children: e, className: r = "", variant: T = "default" }) => /* @__PURE__ */ a("div", {
-  className: `flex justify-between items-center ${Te[T]} ${r}`,
-  children: e
-}), o = ({ children: e, tooltip: r, className: T = "" }) => /* @__PURE__ */ t("div", {
-  className: `flex items-center gap-1 ${T}`,
-  children: [e, r && /* @__PURE__ */ a(Q, {
-    message: r,
-    children: /* @__PURE__ */ a(q, { className: "size-3 text-gray-500 dark:text-gray-400 cursor-pointer" })
-  })]
-}), c = ({ children: e, className: r }) => /* @__PURE__ */ a("div", {
-  className: r,
-  children: e
-});
-export {
-  je as default
-};