0xtrails 0.16.0 → 0.16.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,31 +1,31 @@
1
- import { logger as pe } from "../../logger/index.js";
2
- import { getExplorerUrl as ge, getExplorerUrlForAddress as y } from "../../explorer.js";
3
- import { isNativeToken as E, truncateAddress as b } from "../../utils/address.js";
4
- import { formatUsdAmountDisplay as P, formatUsdAmountLocaleDisplay as k } from "../../utils/format.js";
5
- import { isDisplayableTransactionHash as W } from "../../transactions.js";
6
- import L from "./ChainImage.js";
7
- import A from "./TokenImage.js";
1
+ import { logger as ge } from "../../logger/index.js";
2
+ import { getExplorerUrl as fe, getExplorerUrlForAddress as y } from "../../explorer.js";
3
+ import { isNativeToken as E, truncateAddress as k } from "../../utils/address.js";
4
+ import { formatUsdAmountDisplay as W, formatUsdAmountLocaleDisplay as b } from "../../utils/format.js";
5
+ import { isDisplayableTransactionHash as K } from "../../transactions.js";
6
+ import B from "./ChainImage.js";
7
+ import w from "./TokenImage.js";
8
8
  import Q from "./Tooltip.js";
9
9
  import { isSameChainSameToken as xe } from "../../utils/passthrough.js";
10
- import { usePriceImpactWarning as fe } from "../../hooks/usePriceImpactWarning.js";
11
- import ye from "./PriceImpactWarning.js";
10
+ import { usePriceImpactWarning as ye } from "../../hooks/usePriceImpactWarning.js";
11
+ import ke from "./PriceImpactWarning.js";
12
12
  import { hasFailedOrAbortedTransaction as be } from "../utils/transactionFailure.js";
13
- import { useTrails as ke } from "../providers/TrailsProvider.js";
14
- import { useCallback as K, useEffect as Y, useMemo as J, useRef as X, useState as w } from "react";
13
+ import { useTrails as ve } from "../providers/TrailsProvider.js";
14
+ import { useCallback as L, useEffect as Y, useMemo as J, useRef as X, useState as A } from "react";
15
15
  import { Fragment as v, jsx as a, jsxs as t } from "react/jsx-runtime";
16
- import { ChevronDown as B, Clock as ve, ExternalLink as x, Info as q, TriangleAlert as Z } from "lucide-react";
17
- var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee = !0, children: S, onExpand: z, swapMode: ae, compact: te = !1, isRefetching: ne = !1, initialExpanded: f = !1, showInsufficientFunds: re = !0, isPassthrough: p = !1, liveTransactionStates: U, hasMetaTxError: R }) => {
18
- const [u, ie] = w(!1), [F, V] = w(!0), [g, D] = w(f), [H, se] = w(f), le = X(null), { trailsAppUrl: de } = ke(), I = X(null), C = fe(), j = xe(e), h = r?.totalFee ? r?.totalFee / (T ?? 1) : 0;
19
- r && pe.console.log("[trails-sdk] OnRamp Quote", { onRampQuote: r }), Y(() => {
20
- z?.(g);
21
- }, [g, z]), Y(() => {
22
- f !== H && (se(f), D(f));
23
- }, [f, H]);
24
- const G = K(() => {
16
+ import { ChevronDown as S, Clock as Ne, ExternalLink as f, Info as q, TriangleAlert as Z } from "lucide-react";
17
+ 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 }) => {
18
+ 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;
19
+ r && ge.console.log("[trails-sdk] OnRamp Quote", { onRampQuote: r }), Y(() => {
20
+ R?.(g);
21
+ }, [g, R]), Y(() => {
22
+ x !== j && (se(x), D(x));
23
+ }, [x, j]);
24
+ const G = L(() => {
25
25
  if (!r || !e?.originTokenRate) return null;
26
26
  const n = r.exchangeRate;
27
27
  if (!n || e.originTokenRate === "0") return null;
28
- const o = e.originTokenRate.match(/=\s*([\d.]+)/), i = o ? parseFloat(o[1]) : null;
28
+ const s = e.originTokenRate.match(/=\s*([\d.]+)/), i = s ? parseFloat(s[1]) : null;
29
29
  return i ? {
30
30
  fiatToDestinationToken: i / n,
31
31
  fiatSymbol: r.sourceCurrencyCode,
@@ -34,42 +34,50 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
34
34
  } : null;
35
35
  }, [r, e]), { totalFeeUsd: $, totalFeeUsdDisplay: oe, totalFeeUsdLocaleDisplay: O } = J(() => {
36
36
  if (r) {
37
- const n = h + parseFloat(e?.fees.totalFeeAmountUsd || "0");
37
+ const n = m + parseFloat(e?.fees.totalFeeAmountUsd || "0");
38
38
  return {
39
39
  totalFeeUsd: n,
40
- totalFeeUsdDisplay: P(n),
41
- totalFeeUsdLocaleDisplay: k(n)
40
+ totalFeeUsdDisplay: W(n),
41
+ totalFeeUsdLocaleDisplay: b(n)
42
42
  };
43
43
  }
44
44
  if (e?.fees?.totalFeeAmountUsd) {
45
45
  const n = parseFloat(e.fees.totalFeeAmountUsd);
46
46
  return {
47
47
  totalFeeUsd: n,
48
- totalFeeUsdDisplay: e.fees.totalFeeAmountUsdDisplay ?? P(n),
49
- totalFeeUsdLocaleDisplay: e.fees.totalFeeAmountUsdLocaleDisplay ?? k(n)
48
+ totalFeeUsdDisplay: e.fees.totalFeeAmountUsdDisplay ?? W(n),
49
+ totalFeeUsdLocaleDisplay: e.fees.totalFeeAmountUsdLocaleDisplay ?? b(n)
50
50
  };
51
51
  }
52
52
  return {
53
53
  totalFeeUsd: 0,
54
54
  totalFeeUsdDisplay: "$0.00",
55
- totalFeeUsdLocaleDisplay: k(0)
55
+ totalFeeUsdLocaleDisplay: b(0)
56
56
  };
57
57
  }, [
58
58
  r,
59
59
  e?.fees,
60
- h
61
- ]), ce = K(() => e?.slippageTolerance ? parseFloat(e.slippageTolerance) * 100 : null, [e?.slippageTolerance]), _ = J(() => {
60
+ m
61
+ ]), ce = L(() => e?.slippageTolerance ? parseFloat(e.slippageTolerance) * 100 : null, [e?.slippageTolerance]), _ = J(() => {
62
62
  const n = (e?.intentProtocol || "v1").replace("_", ".").toUpperCase();
63
63
  return n.startsWith("V") ? n : `V${n}`;
64
- }, [e?.intentProtocol]);
64
+ }, [e?.intentProtocol]), he = L((n, s) => {
65
+ const i = e?.routeProviders?.length ?? e?.trailsFeeBreakdown?.providerFees?.length ?? 0;
66
+ return i > 1 ? s === 0 ? "Swap" : "Bridge" : i === 1 ? e?.originChain?.id === e?.destinationChain?.id ? "Swap" : "Bridge" : n.isBridge ? "Bridge" : "Swap";
67
+ }, [
68
+ e?.destinationChain?.id,
69
+ e?.originChain?.id,
70
+ e?.routeProviders?.length,
71
+ e?.trailsFeeBreakdown?.providerFees?.length
72
+ ]);
65
73
  return ee ? /* @__PURE__ */ t("div", {
66
74
  className: `relative transition-opacity duration-300 ${ne ? "opacity-50" : ""}`,
67
75
  children: [
68
- /* @__PURE__ */ a(ye, {
76
+ /* @__PURE__ */ a(ke, {
69
77
  quote: e,
70
- thresholdBps: C.thresholdBps,
71
- warningMessage: C.warningMessage,
72
- fallbackBridgeUrl: C.fallbackBridgeUrl
78
+ thresholdBps: I.thresholdBps,
79
+ warningMessage: I.warningMessage,
80
+ fallbackBridgeUrl: I.fallbackBridgeUrl
73
81
  }),
74
82
  re && e?.noSufficientBalance && /* @__PURE__ */ t("div", {
75
83
  className: "flex justify-between items-center mb-2 p-2 bg-amber-50 dark:bg-amber-900/20 rounded-lg",
@@ -96,21 +104,21 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
96
104
  children: (() => {
97
105
  const n = G();
98
106
  if (n) {
99
- const { fiatToDestinationToken: o, fiatSymbol: i, destSymbol: s } = n;
107
+ const { fiatToDestinationToken: s, fiatSymbol: i, destSymbol: l } = n;
100
108
  return /* @__PURE__ */ t("span", { children: [
101
109
  "1 ",
102
110
  i,
103
111
  " = ",
104
- o.toFixed(6),
112
+ s.toFixed(6),
105
113
  " ",
106
- s
114
+ l
107
115
  ] });
108
116
  }
109
117
  if (r?.exchangeRate) {
110
- const o = r.sourceCurrencyCode, i = r.destinationCurrencyCode.split("_")[0];
118
+ const s = r.sourceCurrencyCode, i = r.destinationCurrencyCode.split("_")[0];
111
119
  return /* @__PURE__ */ t("span", { children: [
112
120
  "1 ",
113
- o,
121
+ s,
114
122
  " =",
115
123
  " ",
116
124
  (1 / r.exchangeRate).toFixed(6),
@@ -125,7 +133,7 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
125
133
  children: [
126
134
  e?.completionEstimateDisplay && /* @__PURE__ */ t("div", {
127
135
  className: "flex items-center gap-1",
128
- children: [/* @__PURE__ */ a(ve, { className: "size-3" }), /* @__PURE__ */ t("span", {
136
+ children: [/* @__PURE__ */ a(Ne, { className: "size-3" }), /* @__PURE__ */ t("span", {
129
137
  className: "font-medium",
130
138
  children: ["~", r ? "3 min" : e.completionEstimateDisplay]
131
139
  })]
@@ -152,7 +160,7 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
152
160
  children: O
153
161
  })]
154
162
  }),
155
- /* @__PURE__ */ a(B, { className: `size-3 transition-transform duration-300 ease-out text-gray-600 dark:text-gray-400 ${g ? "rotate-180" : ""}` })
163
+ /* @__PURE__ */ a(S, { className: `size-3 transition-transform duration-300 ease-out text-gray-600 dark:text-gray-400 ${g ? "rotate-180" : ""}` })
156
164
  ]
157
165
  })]
158
166
  }) : /* @__PURE__ */ t("button", {
@@ -160,7 +168,7 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
160
168
  onClick: () => D(!g),
161
169
  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`,
162
170
  "aria-label": "Show transaction details",
163
- children: [/* @__PURE__ */ a("span", { children: "Transaction details" }), /* @__PURE__ */ a(B, { className: `size-3 transition-transform duration-300 ease-out ${g ? "rotate-180" : ""}` })]
171
+ children: [/* @__PURE__ */ a("span", { children: "Transaction details" }), /* @__PURE__ */ a(S, { className: `size-3 transition-transform duration-300 ease-out ${g ? "rotate-180" : ""}` })]
164
172
  })
165
173
  }),
166
174
  /* @__PURE__ */ a("div", {
@@ -172,9 +180,9 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
172
180
  className: "space-y-2",
173
181
  children: [
174
182
  e?.trailsFeeBreakdown && (e?.trailsFeeBreakdown.originRelayFee || e?.trailsFeeBreakdown.destinationRelayFee) && $ > 0 && /* @__PURE__ */ t(v, { children: [
175
- /* @__PURE__ */ t(l, {
183
+ /* @__PURE__ */ t(d, {
176
184
  variant: "bold",
177
- children: [/* @__PURE__ */ a(d, {
185
+ children: [/* @__PURE__ */ a(o, {
178
186
  tooltip: "The total fees for this transaction, including gas costs and all provider fees",
179
187
  children: "Fees total"
180
188
  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("span", {
@@ -190,18 +198,18 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
190
198
  }),
191
199
  /* @__PURE__ */ a("div", { className: "h-0" }),
192
200
  (e.trailsFeeBreakdown.originRelayFee || e.trailsFeeBreakdown.destinationRelayFee) && /* @__PURE__ */ t(N, { children: [
193
- /* @__PURE__ */ t(l, { children: [/* @__PURE__ */ a(d, {
201
+ /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
194
202
  tooltip: "Total gas costs for executing transactions on both origin and destination chains",
195
203
  children: "All gas costs"
196
204
  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a("span", {
197
205
  title: `$${e.totalGasUsd ?? 0}`,
198
206
  children: e.totalGasUsdLocaleDisplay || e.totalGasUsdDisplay || "$0.00"
199
207
  }) })] }),
200
- e.trailsFeeBreakdown.originRelayFee && /* @__PURE__ */ t(l, {
208
+ e.trailsFeeBreakdown.originRelayFee && /* @__PURE__ */ t(d, {
201
209
  variant: "light",
202
- children: [/* @__PURE__ */ t(d, {
210
+ children: [/* @__PURE__ */ t(o, {
203
211
  tooltip: "Gas fee for executing the transaction on the origin chain",
204
- children: ["Origin Gas", /* @__PURE__ */ a(L, {
212
+ children: ["Origin Gas", /* @__PURE__ */ a(B, {
205
213
  chainId: e.originChain.id,
206
214
  size: 16
207
215
  })]
@@ -210,11 +218,11 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
210
218
  children: e.originGasUsdLocaleDisplay || e.trailsFeeBreakdown.originRelayFee.usdValueLocale || e.trailsFeeBreakdown.originRelayFee.usdValue
211
219
  }) })]
212
220
  }),
213
- e.trailsFeeBreakdown.destinationRelayFee && /* @__PURE__ */ t(l, {
221
+ e.trailsFeeBreakdown.destinationRelayFee && /* @__PURE__ */ t(d, {
214
222
  variant: "light",
215
- children: [/* @__PURE__ */ t(d, {
223
+ children: [/* @__PURE__ */ t(o, {
216
224
  tooltip: "Gas fee for executing the transaction on the destination chain",
217
- children: ["Destination Gas", /* @__PURE__ */ a(L, {
225
+ children: ["Destination Gas", /* @__PURE__ */ a(B, {
218
226
  chainId: e.destinationChain.id,
219
227
  size: 16
220
228
  })]
@@ -227,39 +235,39 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
227
235
  /* @__PURE__ */ a("div", { className: "h-1" })
228
236
  ] }),
229
237
  (() => {
230
- const n = e?.trailsFeeBreakdown && (e.providerFeeUsd ?? 0) > 0, o = e?.trailsFeeBreakdown && (e.trailsFeeUsd ?? 0) > 0, i = r && (r.totalFee ?? 0) > 0;
231
- return !n && !o && !i ? null : /* @__PURE__ */ t(N, { children: [
232
- ((e?.totalProviderFeesUsd ?? 0) > 0 || i) && /* @__PURE__ */ t(l, { children: [/* @__PURE__ */ a(d, {
238
+ const n = e?.trailsFeeBreakdown && (e.providerFeeUsd ?? 0) > 0, s = e?.trailsFeeBreakdown && (e.trailsFeeUsd ?? 0) > 0, i = r && (r.totalFee ?? 0) > 0;
239
+ return !n && !s && !i ? null : /* @__PURE__ */ t(N, { children: [
240
+ ((e?.totalProviderFeesUsd ?? 0) > 0 || i) && /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
233
241
  tooltip: "Total provider fees for bridge, routing, and onramp services",
234
242
  children: "All provider fees"
235
243
  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a("span", {
236
- title: `$${e ? (e?.totalProviderFeesUsd ?? 0) + (h ?? 0) : h ?? 0}`,
237
- children: e ? k((e?.totalProviderFeesUsd ?? 0) + (h ?? 0)) : k(h)
244
+ title: `$${e ? (e?.totalProviderFeesUsd ?? 0) + (m ?? 0) : m ?? 0}`,
245
+ children: e ? b((e?.totalProviderFeesUsd ?? 0) + (m ?? 0)) : b(m)
238
246
  }) })] }),
239
- n && e?.trailsFeeBreakdown?.providerFees && e.trailsFeeBreakdown.providerFees.length > 0 && e.trailsFeeBreakdown.providerFees.map((s) => /* @__PURE__ */ t(l, {
247
+ n && e?.trailsFeeBreakdown?.providerFees && e.trailsFeeBreakdown.providerFees.length > 0 && e.trailsFeeBreakdown.providerFees.map((l, h) => /* @__PURE__ */ t(d, {
240
248
  variant: "light",
241
- children: [/* @__PURE__ */ t(d, {
242
- tooltip: `Fee charged by ${s.name || s.id}`,
243
- children: [s.isBridge ? "Bridge" : "Swap", s.name && /* @__PURE__ */ t("span", { children: [
249
+ children: [/* @__PURE__ */ t(o, {
250
+ tooltip: `Fee charged by ${l.name || l.id}`,
251
+ children: [he(l, h), l.name && /* @__PURE__ */ t("span", { children: [
244
252
  " ",
245
253
  "(",
246
254
  /* @__PURE__ */ t("a", {
247
- href: s.url,
255
+ href: l.url,
248
256
  target: "_blank",
249
257
  rel: "noopener noreferrer",
250
258
  className: "hover:underline inline-flex items-center gap-0.5 text-blue-500",
251
- children: [s.name, /* @__PURE__ */ a(x, { className: "size-3" })]
259
+ children: [l.name, /* @__PURE__ */ a(f, { className: "size-3" })]
252
260
  }),
253
261
  ")"
254
262
  ] })]
255
263
  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a("span", {
256
- title: `$${s.feeUsd}`,
257
- children: s.usdValueLocale || s.usdValue
264
+ title: `$${l.feeUsd}`,
265
+ children: l.usdValueLocale || l.usdValue
258
266
  }) })]
259
- }, s.id)),
260
- i && /* @__PURE__ */ t(l, {
267
+ }, "--")),
268
+ i && /* @__PURE__ */ t(d, {
261
269
  variant: "light",
262
- children: [/* @__PURE__ */ t(d, {
270
+ children: [/* @__PURE__ */ t(o, {
263
271
  tooltip: "Fee charged by the onramp service provider, including network and transaction fees",
264
272
  children: ["Onramp", r.serviceProvider && /* @__PURE__ */ t("span", { children: [
265
273
  "(",
@@ -267,20 +275,20 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
267
275
  ")"
268
276
  ] })]
269
277
  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a("span", {
270
- title: `$${h ?? 0}`,
271
- children: k(h)
278
+ title: `$${m ?? 0}`,
279
+ children: b(m)
272
280
  }) })]
273
281
  }),
274
- o && e?.trailsFeeBreakdown?.trailsFee && (() => {
275
- const s = e.trailsFeeBreakdown.trailsFee;
276
- return /* @__PURE__ */ t(l, {
282
+ s && e?.trailsFeeBreakdown?.trailsFee && (() => {
283
+ const l = e.trailsFeeBreakdown.trailsFee;
284
+ return /* @__PURE__ */ t(d, {
277
285
  variant: "light",
278
- children: [/* @__PURE__ */ a(d, {
286
+ children: [/* @__PURE__ */ a(o, {
279
287
  tooltip: "Platform fee for using the Trails service",
280
288
  children: "Trails"
281
289
  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a("span", {
282
- title: s.usdValue,
283
- children: s.usdValueLocale || s.usdValue
290
+ title: l.usdValue,
291
+ children: l.usdValueLocale || l.usdValue
284
292
  }) })]
285
293
  });
286
294
  })()
@@ -288,26 +296,26 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
288
296
  })(),
289
297
  /* @__PURE__ */ a("div", { className: "h-px bg-gray-200 dark:bg-gray-800 my-4" }),
290
298
  (() => {
291
- const n = e?.slippageTolerance != null && Number(e.slippageTolerance) !== 0, o = e?.priceImpact != null && Number(e.priceImpact) !== 0, i = e?.intentId != null && e.intentId !== "";
292
- return n || o || i ? /* @__PURE__ */ t(N, { children: [
293
- /* @__PURE__ */ a(l, {
299
+ const n = e?.slippageTolerance != null && Number(e.slippageTolerance) !== 0, s = e?.priceImpact != null && Number(e.priceImpact) !== 0, i = e?.intentId != null && e.intentId !== "";
300
+ return n || s || i ? /* @__PURE__ */ t(N, { children: [
301
+ /* @__PURE__ */ a(d, {
294
302
  variant: "bold",
295
- children: /* @__PURE__ */ a(d, { children: "Transaction details" })
303
+ children: /* @__PURE__ */ a(o, { children: "Transaction details" })
296
304
  }),
297
- i && /* @__PURE__ */ t(l, { children: [/* @__PURE__ */ a(d, { children: "Intent ID" }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("a", {
305
+ i && /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, { children: "Intent ID" }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("a", {
298
306
  href: `${de}/intent/${e.intentId}`,
299
307
  target: "_blank",
300
308
  rel: "noopener noreferrer",
301
309
  className: "font-mono text-xs hover:underline flex items-center gap-1 text-blue-500",
302
- children: [b(e?.intentId ?? "", 9, 3), /* @__PURE__ */ a(x, { className: "size-3" })]
310
+ children: [k(e?.intentId ?? "", 9, 3), /* @__PURE__ */ a(f, { className: "size-3" })]
303
311
  }) })] }),
304
- n && /* @__PURE__ */ t(l, { children: [/* @__PURE__ */ a(d, {
312
+ n && /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
305
313
  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.",
306
314
  children: "Max slippage"
307
315
  }), /* @__PURE__ */ t(c, { children: [ce(), "%"] })] }),
308
- o && /* @__PURE__ */ t("div", {
316
+ s && /* @__PURE__ */ t("div", {
309
317
  className: "space-y-1",
310
- children: [/* @__PURE__ */ t(l, { children: [/* @__PURE__ */ a(d, {
318
+ children: [/* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
311
319
  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.",
312
320
  children: "Price impact"
313
321
  }), /* @__PURE__ */ t(c, {
@@ -339,62 +347,62 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
339
347
  /* @__PURE__ */ t("div", {
340
348
  className: "space-y-3 pt-2",
341
349
  children: [
342
- !j && (() => {
350
+ !P && (() => {
343
351
  const n = G();
344
352
  if (n) {
345
- const { fiatToDestinationToken: o, fiatSymbol: i, destSymbol: s } = n;
346
- return /* @__PURE__ */ t(l, { children: [/* @__PURE__ */ a(d, {
347
- tooltip: `Combined exchange rate from ${i} to ${s} (via USDC on Base)`,
353
+ const { fiatToDestinationToken: s, fiatSymbol: i, destSymbol: l } = n;
354
+ return /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
355
+ tooltip: `Combined exchange rate from ${i} to ${l} (via USDC on Base)`,
348
356
  children: "Exchange Rate"
349
357
  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("button", {
350
358
  type: "button",
351
- onClick: () => V(!F),
359
+ onClick: () => H(!U),
352
360
  className: "hover:underline cursor-pointer",
353
361
  children: [
354
362
  "1 ",
355
363
  i,
356
364
  " = $",
357
- o.toFixed(6),
365
+ s.toFixed(6),
358
366
  " $",
359
- s,
367
+ l,
360
368
  "`"
361
369
  ]
362
370
  }) })] });
363
371
  }
364
372
  if (r?.exchangeRate) {
365
- const o = r.sourceCurrencyCode, i = r.destinationCurrencyCode.split("_")[0], s = r.exchangeRate;
366
- return /* @__PURE__ */ t(l, { children: [/* @__PURE__ */ a(d, {
367
- tooltip: `Exchange rate from ${o} to ${i}`,
373
+ const s = r.sourceCurrencyCode, i = r.destinationCurrencyCode.split("_")[0], l = r.exchangeRate;
374
+ return /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
375
+ tooltip: `Exchange rate from ${s} to ${i}`,
368
376
  children: "Exchange Rate"
369
377
  }), /* @__PURE__ */ t(c, { children: [
370
378
  "1 ",
371
- o,
379
+ s,
372
380
  " = $",
373
- (1 / s).toFixed(6),
381
+ (1 / l).toFixed(6),
374
382
  " $",
375
383
  i
376
384
  ] })] });
377
385
  }
378
- return e?.originTokenRate && e?.destinationTokenRate && e.originTokenRate !== "0" && e.destinationTokenRate !== "0" ? /* @__PURE__ */ t(l, { children: [/* @__PURE__ */ a(d, {
386
+ return e?.originTokenRate && e?.destinationTokenRate && e.originTokenRate !== "0" && e.destinationTokenRate !== "0" ? /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
379
387
  tooltip: "The current exchange rate between the origin and destination tokens",
380
388
  children: "Exchange Rate"
381
389
  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a("button", {
382
390
  type: "button",
383
- onClick: () => V(!F),
391
+ onClick: () => H(!U),
384
392
  className: "hover:underline cursor-pointer",
385
- children: F ? e.originTokenRate : e.destinationTokenRate
393
+ children: U ? e.originTokenRate : e.destinationTokenRate
386
394
  }) })] }) : null;
387
395
  })(),
388
- (e?.originAmount && e?.originToken.symbol && e?.originChain.id || e?.destinationToken.symbol && e?.destinationAmount && e?.destinationAmountUsdDisplay && e?.destinationChain.id) && /* @__PURE__ */ t(N, { children: [!j && e?.originAmount && e?.originToken.symbol && e?.originChain.id && /* @__PURE__ */ t(l, {
396
+ (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, {
389
397
  className: "items-start",
390
- children: [/* @__PURE__ */ a(d, {
398
+ children: [/* @__PURE__ */ a(o, {
391
399
  tooltip: p ? "The amount of tokens you will transfer" : "The amount of tokens you will send from the origin chain",
392
400
  children: p ? "Transfer Amount" : "Origin Transfer Amount"
393
401
  }), /* @__PURE__ */ a("div", {
394
402
  className: "text-right",
395
403
  children: E(e.originToken.contractAddress) ? /* @__PURE__ */ t(v, { children: [/* @__PURE__ */ t("div", {
396
404
  className: "font-medium text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1 justify-end",
397
- children: [/* @__PURE__ */ a(A, {
405
+ children: [/* @__PURE__ */ a(w, {
398
406
  imageUrl: e.originToken.imageUrl,
399
407
  symbol: e.originToken.symbol,
400
408
  chainId: e.originChain.id,
@@ -429,7 +437,7 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
429
437
  children: /* @__PURE__ */ t("div", {
430
438
  className: "font-medium text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1 justify-end",
431
439
  children: [
432
- /* @__PURE__ */ a(A, {
440
+ /* @__PURE__ */ a(w, {
433
441
  imageUrl: e.originToken.imageUrl,
434
442
  symbol: e.originToken.symbol,
435
443
  chainId: e.originChain.id,
@@ -452,16 +460,16 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
452
460
  ]
453
461
  })] })
454
462
  })]
455
- }), e?.destinationToken.symbol && e?.destinationAmount && e?.destinationAmountUsdDisplay && e?.destinationChain.id && /* @__PURE__ */ t(l, {
463
+ }), e?.destinationToken.symbol && e?.destinationAmount && e?.destinationAmountUsdDisplay && e?.destinationChain.id && /* @__PURE__ */ t(d, {
456
464
  className: "items-start",
457
- children: [/* @__PURE__ */ a(d, {
465
+ children: [/* @__PURE__ */ a(o, {
458
466
  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",
459
467
  children: p ? "Target Amount" : "Destination Target Amount"
460
468
  }), /* @__PURE__ */ a("div", {
461
469
  className: "text-right",
462
470
  children: E(e.destinationToken.contractAddress) ? /* @__PURE__ */ t(v, { children: [/* @__PURE__ */ t("div", {
463
471
  className: "font-medium text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1 justify-end",
464
- children: [/* @__PURE__ */ a(A, {
472
+ children: [/* @__PURE__ */ a(w, {
465
473
  imageUrl: e.destinationToken.imageUrl,
466
474
  symbol: e.destinationToken.symbol,
467
475
  chainId: e.destinationChain.id,
@@ -496,7 +504,7 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
496
504
  children: /* @__PURE__ */ t("div", {
497
505
  className: "font-medium text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1 justify-end",
498
506
  children: [
499
- /* @__PURE__ */ a(A, {
507
+ /* @__PURE__ */ a(w, {
500
508
  imageUrl: e.destinationToken.imageUrl,
501
509
  symbol: e.destinationToken.symbol,
502
510
  chainId: e.destinationChain.id,
@@ -520,7 +528,7 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
520
528
  })] })
521
529
  })]
522
530
  })] }),
523
- (e?.originDepositAddress || e?.destinationDepositAddress || e?.destinationAddress) && /* @__PURE__ */ a(N, { children: p ? e?.destinationAddress && /* @__PURE__ */ t(l, { children: [/* @__PURE__ */ a(d, {
531
+ (e?.originDepositAddress || e?.destinationDepositAddress || e?.destinationAddress) && /* @__PURE__ */ a(N, { children: p ? e?.destinationAddress && /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
524
532
  tooltip: "The address that will receive the tokens",
525
533
  children: "Target Address"
526
534
  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("a", {
@@ -531,9 +539,9 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
531
539
  target: "_blank",
532
540
  rel: "noopener noreferrer",
533
541
  className: "font-mono text-xs hover:underline flex items-center gap-1 text-blue-500",
534
- children: [b(e.destinationAddress), /* @__PURE__ */ a(x, { className: "size-3" })]
542
+ children: [k(e.destinationAddress), /* @__PURE__ */ a(f, { className: "size-3" })]
535
543
  }) })] }) : /* @__PURE__ */ t(v, { children: [
536
- e?.originDepositAddress && /* @__PURE__ */ t(l, { children: [/* @__PURE__ */ a(d, {
544
+ e?.originDepositAddress && /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
537
545
  tooltip: "This is the intent address to deposit to that will then execute the swap and/or bridge",
538
546
  children: "Origin Deposit Address"
539
547
  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("a", {
@@ -544,9 +552,9 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
544
552
  target: "_blank",
545
553
  rel: "noopener noreferrer",
546
554
  className: "font-mono text-xs hover:underline flex items-center gap-1 text-blue-500",
547
- children: [b(e.originDepositAddress), /* @__PURE__ */ a(x, { className: "size-3" })]
555
+ children: [k(e.originDepositAddress), /* @__PURE__ */ a(f, { className: "size-3" })]
548
556
  }) })] }),
549
- e?.destinationDepositAddress && e?.destinationDepositAddress !== e?.originDepositAddress && /* @__PURE__ */ t(l, { children: [/* @__PURE__ */ a(d, {
557
+ e?.destinationDepositAddress && e?.destinationDepositAddress !== e?.originDepositAddress && /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
550
558
  tooltip: "This is the address that will receive the tokens after any swap and/or bridge from the origin chain",
551
559
  children: "Destination Deposit Address"
552
560
  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("a", {
@@ -557,9 +565,9 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
557
565
  target: "_blank",
558
566
  rel: "noopener noreferrer",
559
567
  className: "font-mono text-xs hover:underline flex items-center gap-1 text-blue-500",
560
- children: [b(e.destinationDepositAddress), /* @__PURE__ */ a(x, { className: "size-3" })]
568
+ children: [k(e.destinationDepositAddress), /* @__PURE__ */ a(f, { className: "size-3" })]
561
569
  }) })] }),
562
- e?.destinationAddress && /* @__PURE__ */ t(l, { children: [/* @__PURE__ */ a(d, {
570
+ e?.destinationAddress && /* @__PURE__ */ t(d, { children: [/* @__PURE__ */ a(o, {
563
571
  tooltip: "This is the final execution address or recipient address",
564
572
  children: "Destination Target Address"
565
573
  }), /* @__PURE__ */ a(c, { children: /* @__PURE__ */ t("a", {
@@ -570,7 +578,7 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
570
578
  target: "_blank",
571
579
  rel: "noopener noreferrer",
572
580
  className: "font-mono text-xs hover:underline flex items-center gap-1 text-blue-500",
573
- children: [b(e.destinationAddress), /* @__PURE__ */ a(x, { className: "size-3" })]
581
+ children: [k(e.destinationAddress), /* @__PURE__ */ a(f, { className: "size-3" })]
574
582
  }) })] })
575
583
  ] }) }),
576
584
  e?.destinationCalldata && /* @__PURE__ */ t("div", {
@@ -581,7 +589,7 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
581
589
  type: "button",
582
590
  onClick: () => {
583
591
  ie(!u), u || setTimeout(() => {
584
- I.current && I.current.scrollIntoView({
592
+ C.current && C.current.scrollIntoView({
585
593
  behavior: "smooth",
586
594
  block: "nearest"
587
595
  });
@@ -592,10 +600,10 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
592
600
  children: [/* @__PURE__ */ a("span", {
593
601
  className: "text-[10px]",
594
602
  children: "Includes custom destination calldata"
595
- }), /* @__PURE__ */ a(B, { className: `size-3 transition-transform duration-300 ease-out ${u ? "rotate-180" : ""}` })]
603
+ }), /* @__PURE__ */ a(S, { className: `size-3 transition-transform duration-300 ease-out ${u ? "rotate-180" : ""}` })]
596
604
  })
597
605
  }), /* @__PURE__ */ a("div", {
598
- ref: I,
606
+ ref: C,
599
607
  className: `overflow-hidden transition-all duration-300 ease-out ${u ? "max-h-32 opacity-100" : "max-h-0 opacity-0"}`,
600
608
  children: /* @__PURE__ */ a("div", {
601
609
  className: "mt-2",
@@ -610,23 +618,23 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
610
618
  })]
611
619
  }),
612
620
  (() => {
613
- const n = U && U.length > 0, o = n ? U : p && e?.passthroughTransactionStates?.length ? e.passthroughTransactionStates : e?.transactionStates;
614
- return !o || o.length === 0 ? null : /* @__PURE__ */ t("div", {
621
+ const n = F && F.length > 0, s = n ? F : p && e?.passthroughTransactionStates?.length ? e.passthroughTransactionStates : e?.transactionStates;
622
+ return !s || s.length === 0 ? null : /* @__PURE__ */ t("div", {
615
623
  className: "mt-4",
616
- children: [/* @__PURE__ */ a("div", { className: "h-px bg-gray-200 dark:bg-gray-800 mb-3" }), /* @__PURE__ */ t(N, { children: [/* @__PURE__ */ a(l, {
624
+ children: [/* @__PURE__ */ a("div", { className: "h-px bg-gray-200 dark:bg-gray-800 mb-3" }), /* @__PURE__ */ t(N, { children: [/* @__PURE__ */ a(d, {
617
625
  variant: "bold",
618
- children: /* @__PURE__ */ a(d, { children: /* @__PURE__ */ t("span", {
626
+ children: /* @__PURE__ */ a(o, { children: /* @__PURE__ */ t("span", {
619
627
  className: "flex items-center gap-2",
620
628
  children: [n ? "Transactions" : "Transaction Steps", p && /* @__PURE__ */ a("span", {
621
629
  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",
622
630
  children: "Direct"
623
631
  })]
624
632
  }) })
625
- }), o.map((i, s) => {
626
- const m = i, me = n && W(m.transactionHash), M = m.explorerUrl || (W(m.transactionHash) && m.chainId ? ge({
627
- txHash: m.transactionHash,
628
- chainId: m.chainId
629
- }) : null), he = R && n ? R(m) : !1;
633
+ }), s.map((i, l) => {
634
+ const h = i, me = n && K(h.transactionHash), M = h.explorerUrl || (K(h.transactionHash) && h.chainId ? fe({
635
+ txHash: h.transactionHash,
636
+ chainId: h.chainId
637
+ }) : null), pe = V && n ? V(h) : !1;
630
638
  return /* @__PURE__ */ t("div", {
631
639
  className: `p-2 rounded ${n ? "bg-gray-100 dark:bg-gray-700/50" : ""}`,
632
640
  children: [/* @__PURE__ */ t("div", {
@@ -635,16 +643,16 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
635
643
  className: "flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400",
636
644
  children: [!n && /* @__PURE__ */ a("span", {
637
645
  className: "w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-[10px] font-medium",
638
- children: s + 1
646
+ children: l + 1
639
647
  }), i.label]
640
648
  }), /* @__PURE__ */ t("span", {
641
649
  className: "flex items-center gap-2",
642
- children: [/* @__PURE__ */ a(L, {
650
+ children: [/* @__PURE__ */ a(B, {
643
651
  chainId: i.chainId,
644
652
  size: 14
645
- }), n && m.state && /* @__PURE__ */ a("span", {
646
- className: `px-2 py-0.5 rounded-full text-xs ${be(m) ? "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400" : m.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"}`,
647
- children: m.state.charAt(0).toUpperCase() + m.state.slice(1)
653
+ }), n && h.state && /* @__PURE__ */ a("span", {
654
+ 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"}`,
655
+ children: h.state.charAt(0).toUpperCase() + h.state.slice(1)
648
656
  })]
649
657
  })]
650
658
  }), n && me && M && /* @__PURE__ */ t("div", {
@@ -658,7 +666,7 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
658
666
  rel: "noopener noreferrer",
659
667
  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",
660
668
  children: [
661
- he && /* @__PURE__ */ t("svg", {
669
+ pe && /* @__PURE__ */ t("svg", {
662
670
  className: "w-4 h-4 text-orange-500",
663
671
  fill: "none",
664
672
  viewBox: "0 0 24 24",
@@ -670,12 +678,12 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
670
678
  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"
671
679
  })]
672
680
  }),
673
- /* @__PURE__ */ a("span", { children: b(m.transactionHash) }),
674
- /* @__PURE__ */ a(x, { className: "w-3 h-3" })
681
+ /* @__PURE__ */ a("span", { children: k(h.transactionHash) }),
682
+ /* @__PURE__ */ a(f, { className: "w-3 h-3" })
675
683
  ]
676
684
  })]
677
685
  })]
678
- }, i.label || s);
686
+ }, i.label || l);
679
687
  })] })]
680
688
  });
681
689
  })(),
@@ -683,9 +691,9 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
683
691
  className: "pt-1 text-[10px] opacity-50 text-gray-600 dark:text-gray-400",
684
692
  children: ["Protocol version: ", _]
685
693
  }),
686
- S && /* @__PURE__ */ a("div", {
694
+ z && /* @__PURE__ */ a("div", {
687
695
  className: "mb-0",
688
- children: S
696
+ children: z
689
697
  })
690
698
  ]
691
699
  })
@@ -698,14 +706,14 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
698
706
  }, N = ({ children: e, className: r = "" }) => /* @__PURE__ */ a("div", {
699
707
  className: `space-y-2 ${r}`,
700
708
  children: e
701
- }), Ne = {
709
+ }), Te = {
702
710
  default: "text-xs text-gray-600 dark:text-gray-400",
703
711
  light: "text-xs text-gray-400 dark:text-gray-600",
704
712
  bold: "text-sm font-semibold text-gray-900 dark:text-white"
705
- }, l = ({ children: e, className: r = "", variant: T = "default" }) => /* @__PURE__ */ a("div", {
706
- className: `flex justify-between items-center ${Ne[T]} ${r}`,
713
+ }, d = ({ children: e, className: r = "", variant: T = "default" }) => /* @__PURE__ */ a("div", {
714
+ className: `flex justify-between items-center ${Te[T]} ${r}`,
707
715
  children: e
708
- }), d = ({ children: e, tooltip: r, className: T = "" }) => /* @__PURE__ */ t("div", {
716
+ }), o = ({ children: e, tooltip: r, className: T = "" }) => /* @__PURE__ */ t("div", {
709
717
  className: `flex items-center gap-1 ${T}`,
710
718
  children: [e, r && /* @__PURE__ */ a(Q, {
711
719
  message: r,
@@ -716,5 +724,5 @@ var He = ({ quote: e, onRampQuote: r, fiatToUsdExchangeRate: T, showContent: ee
716
724
  children: e
717
725
  });
718
726
  export {
719
- He as default
727
+ je as default
720
728
  };