0xtrails 0.16.2 → 0.17.0

package/dist/widget/components/Pay.js

@@ -1,649 +0,0 @@
-import { logger as h } from "../../logger/index.js";
-import { getChainInfo as J } from "../../chains.js";
-import { addressEqual as fe } from "../../utils/address.js";
-import { getSupportedChains as kt } from "../shared/destinationSupport.js";
-import { useOriginSelectedToken as vt } from "../../hooks/useOriginSelectedToken.js";
-import { useDestinationSelectedToken as Nt } from "../../hooks/useDestinationSelectedToken.js";
-import { isValidNumber as pe } from "../../utils/validation.js";
-import { formatUsdAmountLocaleDisplay as ue } from "../../utils/format.js";
-import { useSelectedRecipient as St } from "../../hooks/useSelectedRecipient.js";
-import { useSwapAmount as wt } from "../../hooks/useSwapAmount.js";
-import { TradeType as Tt } from "../../transactionIntent/types.js";
-import { useSwapState as Ct } from "../../hooks/useSwapState.js";
-import { useViewManager as At } from "../../hooks/useViewManager.js";
-import { useClickTracking as Dt } from "../../hooks/useClickTracking.js";
-import { ScreenHeader as V } from "./ScreenHeader.js";
-import { useAccountTokenBalanceOnchain as Ft } from "../../query/balance.hooks.js";
-import { AddressWalletIcon as he } from "./AddressWalletIcon.js";
-import It from "./TokenImage.js";
-import { TokenSelector as ge } from "./TokenSelector.js";
-import { ChainList as be } from "./ChainList.js";
-import { useDynamicInputStyles as Lt } from "./DynamicInputStyles.js";
-import Ot from "./DynamicSizeInputField.js";
-import { isPassthroughEligible as Bt } from "../../utils/passthrough.js";
-import Pt from "./QuoteDetails.js";
-import { ErrorDisplay as Rt } from "./ErrorDisplay.js";
-import { AddressOrEnsName as ye } from "./AddressOrEnsName.js";
-import P from "./LoadingSpinner.js";
-import { PercentageMaxButtons as Ut } from "./PercentageMaxButtons.js";
-import { useTargetAmount as jt } from "../../hooks/useTargetAmount.js";
-import { useDefaultOriginToken as qt } from "../../hooks/useDefaultOriginToken.js";
-import { useSendForm as Et } from "../../hooks/useSendForm.js";
-import { isFeeOptionDisabled as $t } from "./FeeOption.js";
-import Vt from "./FeeOptions.js";
-import xe from "./FundingMethodSelectorButton.js";
-import { TokenSelectorButton as ke } from "./TokenSelectorButton.js";
-import { useDefaultDestinationToken as zt } from "../../hooks/useDefaultDestinationToken.js";
-import { RefundWarning as Wt } from "./RefundWarning.js";
-import { usePayMessage as Qt } from "../../hooks/usePayMessage.js";
-import { RequiredPropsError as Gt } from "./RequiredPropsError.js";
-import { useCallback as Y, useEffect as x, useMemo as ve, useRef as Ne, useState as S } from "react";
-import { Fragment as w, jsx as e, jsxs as a } from "react/jsx-runtime";
-import { ArrowLeftRight as Se, ChevronRight as we, Search as Kt } from "lucide-react";
-var Ra = ({ selectedToken: Te, onBack: Z, account: d, walletClient: Ce, onTransactionStateChange: Ae, onError: z, onWaitingForWalletConfirm: De, onConfirm: Fe, onComplete: Ie, onSend: Le, isSequenceWallet: Oe = !1, setWalletConfirmRetryHandler: Be, swapProvider: Pe, bridgeProvider: Re, swapProviderFallback: Ue, bridgeProviderFallback: je, fundMethod: i, checkoutOnHandlers: qe, recentTokens: M, onRecentTokenSelect: ee, onTrackToken: R, toRecipient: m, toAmount: n, toChainId: T, toToken: y, toCalldata: Ee, onAmountUpdate: W }) => {
-  const { mode: $e, navigate: U } = At(), { selectedToken: Ve, setSelectedToken: F } = vt(), { selectedToken: o, setSelectedToken: k, isControlledByProps: j, availableDestinationTokens: ze, availableDestinationTokenKeys: We, availableDestinationTokenRestrictedChainIds: Qe, availableDestinationChainIds: Q } = Nt(), Ge = ve(() => kt(Q), [Q]), { selectedRecipient: p, setSelectedRecipient: G } = St(), { setAmount: I, clearAmount: Ke } = wt(), { targetAmountUsd: te } = jt(), { enterFormMode: ae } = Ct();
-  x(() => {
-    n ? ae("pay") : ae("pay") && Ke();
-  }, []);
-  const s = Ve || Te, { defaultOriginToken: q, isLoading: se } = qt(), { defaultDestinationToken: E, isLoading: re } = zt(s), { message: He } = Qt(), [u, C] = S(""), [K, H] = S(""), [_e, v] = S(!1), [Xe, ie] = S(!1), ne = m || p || null, oe = !!ne && !!d?.address && !fe(ne, d.address), [Je, A] = S(!1), [Ye, le] = S(!1), [Ze, Me] = S(!1), _ = Ne(null), { trackClick: et } = Dt(), tt = Ne(null), { token: c, isLoadingBalance: at } = Ft(s, d?.address), L = p || m || d?.address, de = ve(() => {
-    if (!s || !o || !L || !d?.address) return !1;
-    const t = s.contractAddress?.toLowerCase() === o.contractAddress?.toLowerCase() && s.chainId === o.chainId, f = fe(L, d.address);
-    return t && f;
-  }, [
-    s,
-    o,
-    L,
-    d?.address
-  ]), { amountUsdDisplay: st, amountUsdLocaleDisplay: rt, isLoadingQuote: g, prepareSendQuote: r, setAmount: O, handleSubmit: it, isSubmitting: ce, buttonText: D, isValidRecipient: nt, selectedDestToken: l, setSelectedDestToken: N, setSelectedDestinationChain: b, quoteError: ot, quoteErrorPrettified: lt, destinationTokenAddress: dt, isValidCustomToken: ct, isSenderContractOnOrigin: mt, isSenderContractOnDestination: ft, processedFeeOptions: me, selectedFeeOption: $, setSelectedFeeOption: pt } = Et({
-    account: d,
-    toAmount: u || n,
-    toRecipient: L,
-    toChainId: T,
-    toToken: y,
-    toCalldata: Ee,
-    walletClient: Ce,
-    onTransactionStateChange: Ae,
-    onError: z,
-    onWaitingForWalletConfirm: De,
-    onConfirm: Fe,
-    onComplete: Ie,
-    onSend: Le,
-    selectedToken: s,
-    setWalletConfirmRetryHandler: Be,
-    tradeType: Tt.EXACT_OUTPUT,
-    swapProvider: Pe,
-    bridgeProvider: Re,
-    swapProviderFallback: Ue,
-    bridgeProviderFallback: je,
-    fundMethod: i,
-    mode: $e,
-    checkoutOnHandlers: qe,
-    skipFeeBalanceFetch: i === "onramp-meld" || i === "direct-transfer" || i === "onramp-mesh"
-  });
-  x(() => {
-    !s && !se && q && (h.console.log("[trails-sdk] Auto-selecting origin token:", q), F(q));
-  }, [
-    s,
-    se,
-    q,
-    F
-  ]), x(() => {
-    if (o && (N(o), b)) {
-      const t = J(o.chainId);
-      t && b(t);
-    }
-  }, [
-    o,
-    N,
-    b
-  ]), x(() => {
-    if (!j || !l || !y) return;
-    const t = l.chainId === Number(T), f = l.contractAddress?.toLowerCase() === y.toLowerCase() || l.symbol?.toLowerCase() === y.toLowerCase();
-    t && f && (o && o.chainId === l.chainId && o.contractAddress?.toLowerCase() === l.contractAddress?.toLowerCase() || (h.console.log("[trails-sdk] Syncing resolved token from useSendForm to global provider:", l.symbol), k(l)));
-  }, [
-    j,
-    l,
-    o,
-    k,
-    y,
-    T
-  ]), x(() => {
-    h.console.log("[trails-sdk] toRecipient prop effect:", {
-      toRecipient: m,
-      selectedRecipient: p,
-      accountAddress: d?.address
-    }), m ? (h.console.log("[trails-sdk] Setting selectedRecipient to toRecipient:", m), G(m)) : !p && d?.address && (h.console.log("[trails-sdk] Setting selectedRecipient to account address:", d.address), G(d.address));
-  }, [
-    m,
-    p,
-    G,
-    d?.address
-  ]), x(() => {
-    h.console.log("[trails-sdk] Pay component toAmount effect:", {
-      toAmount: n,
-      tokenAmountForBackend: u,
-      inputDisplayValue: K,
-      willUpdate: !!n && n !== u
-    }), n && n !== u && (h.console.log("[trails-sdk] Updating amount from toAmount prop:", n), C(n), H(n), O(n), I(n));
-  }, [
-    n,
-    u,
-    K,
-    O,
-    I
-  ]), x(() => {
-    if (j || l?.symbol) return;
-    const t = o || E;
-    if (t && !re && (h.console.log("[trails-sdk] Initializing destination token:", {
-      symbol: t.symbol,
-      chainId: t.chainId,
-      name: t.name,
-      contractAddress: t.contractAddress
-    }), !o && E && k(E), N(t), b && t.chainId)) {
-      const f = J(t.chainId);
-      f && b(f);
-    }
-  }, [
-    j,
-    o,
-    E,
-    re,
-    l?.symbol,
-    k,
-    N,
-    b
-  ]), x(() => {
-    _.current && _.current.focus();
-  }, []);
-  const ut = Y((t) => {
-    if (t === "") {
-      H(""), C(""), O(""), I(""), W?.("");
-      return;
-    }
-    t.length > 16 || t.match(/^\d*\.?\d{0,8}$/) && (H(t), C(t), O(t), I(t), W?.(t));
-  }, [
-    O,
-    I,
-    W
-  ]), X = K, ht = Lt({ inputValue: X }), gt = Y((t) => {
-    F(t), v(!1), h.console.log("[trails-sdk] selected origin token", t), R?.(t);
-  }, [F, R]), bt = Y((t) => {
-    if (k(t), N(t), b && t.chainId) {
-      const f = J(t.chainId);
-      f && b(f);
-    }
-    A(!1), h.console.log("[trails-sdk] selected destination token", t), R?.(t);
-  }, [
-    k,
-    N,
-    b,
-    R
-  ]);
-  if (Xe) return /* @__PURE__ */ e(be, { onBack: () => {
-    ie(!1), v(!0);
-  } });
-  if (Ye) return /* @__PURE__ */ e(be, {
-    chains: Ge,
-    onBack: () => {
-      le(!1), A(!0);
-    }
-  });
-  if (_e) return /* @__PURE__ */ a("div", {
-    className: "space-y-2",
-    children: [/* @__PURE__ */ e(V, {
-      onBack: () => v(!1),
-      headerContent: "Select Token",
-      headerContentAlign: "left"
-    }), /* @__PURE__ */ e(ge, {
-      onTokenSelect: gt,
-      targetAmountUsd: te,
-      onError: z,
-      fundMethod: i,
-      showContinueButton: !1,
-      compactMode: !1,
-      recentTokens: M,
-      onRecentTokenSelect: (t) => {
-        F(t), v(!1), ee?.(t);
-      },
-      allSupportedTokens: !1,
-      chainListScreen: !0,
-      onNavigateToChainList: () => {
-        v(!1), ie(!0);
-      },
-      onNavigateToFundMethods: () => {
-        U("payment-methods");
-      }
-    })]
-  });
-  if (Je) return /* @__PURE__ */ a("div", {
-    className: "space-y-2",
-    children: [/* @__PURE__ */ e(V, {
-      onBack: () => A(!1),
-      headerContent: "Select Token",
-      headerContentAlign: "left"
-    }), /* @__PURE__ */ e(ge, {
-      onTokenSelect: bt,
-      targetAmountUsd: te,
-      onError: z,
-      fundMethod: i,
-      allowedTokens: ze,
-      allowedTokenKeys: We,
-      allowedTokenRestrictedChainIds: Qe,
-      allowedChainIds: Q,
-      showContinueButton: !1,
-      compactMode: !1,
-      recentTokens: M,
-      onRecentTokenSelect: (t) => {
-        k(t), N(t), A(!1), ee?.(t);
-      },
-      allSupportedTokens: !0,
-      accountAddress: L,
-      accountHeaderLabel: "Receiver",
-      chainListScreen: !0,
-      onNavigateToChainList: () => {
-        A(!1), le(!0);
-      }
-    })]
-  });
-  const B = [], yt = !!y;
-  n || B.push("toAmount"), yt || B.push("toToken"), m || B.push("toAddress");
-  const xt = !!(y && n && T && m);
-  return B.length > 0 ? /* @__PURE__ */ a("div", {
-    className: "space-y-4",
-    children: [/* @__PURE__ */ e(V, {
-      onBack: Z,
-      headerContent: "Pay",
-      headerContentAlign: "left",
-      showAccountActions: !0,
-      customActions: /* @__PURE__ */ a("button", {
-        type: "button",
-        onClick: () => U("swap", { backTarget: "send-form" }),
-        className: "flex h-8 px-3 justify-center items-center gap-1.5 rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600",
-        title: "Swap",
-        children: [/* @__PURE__ */ e(Se, { className: "h-4 w-4" }), /* @__PURE__ */ e("span", {
-          className: "text-sm font-medium",
-          children: "Swap"
-        })]
-      })
-    }), /* @__PURE__ */ e(Gt, {
-      missingProps: B,
-      componentName: "Pay"
-    })]
-  }) : /* @__PURE__ */ a("div", {
-    className: "space-y-2",
-    children: [
-      /* @__PURE__ */ e(V, {
-        onBack: Z,
-        headerContent: "Pay",
-        headerContentAlign: "left",
-        showAccountActions: !0,
-        customActions: /* @__PURE__ */ a("button", {
-          type: "button",
-          onClick: () => U("swap", { backTarget: "send-form" }),
-          className: "flex h-8 px-3 justify-center items-center gap-1.5 rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600",
-          title: "Swap",
-          children: [/* @__PURE__ */ e(Se, { className: "h-4 w-4" }), /* @__PURE__ */ e("span", {
-            className: "text-sm font-medium",
-            children: "Swap"
-          })]
-        })
-      }),
-      xt ? /* @__PURE__ */ a(w, { children: [/* @__PURE__ */ e("div", {
-        className: "space-y-1 trails-bg-secondary p-3 border bg-white dark:bg-gray-800",
-        style: {
-          borderColor: "var(--trails-bg-secondary-hover)",
-          borderWidth: "1px",
-          borderStyle: "solid",
-          borderRadius: "var(--trails-border-radius-large-button)"
-        },
-        children: /* @__PURE__ */ e("div", {
-          className: "flex justify-start",
-          children: /* @__PURE__ */ e("div", {
-            className: "flex items-center font-medium trails-text-primary text-sm flex-wrap whitespace-break-spaces break-all min-w-full",
-            children: He
-          })
-        })
-      }), /* @__PURE__ */ e("div", {
-        className: "mb-4",
-        children: /* @__PURE__ */ a("div", {
-          className: "pt-4 pb-4 trails-border-radius-container p-3 group transition-all duration-200 border bg-white dark:bg-gray-800 min-h-[120px] flex flex-col",
-          style: {
-            borderColor: "var(--trails-bg-secondary-hover)",
-            borderWidth: "1px",
-            borderStyle: "solid"
-          },
-          children: [
-            /* @__PURE__ */ a("div", {
-              className: "mb-4 flex justify-between items-center",
-              children: [/* @__PURE__ */ a("div", {
-                className: "text-sm font-medium trails-text-secondary text-left m-0",
-                children: ["Pay with", i === "direct-transfer" ? "" : i === "onramp-mesh" ? " Exchange" : i === "onramp-meld" ? " Onramp Provider" : ""]
-              }), /* @__PURE__ */ e(xe, {})]
-            }),
-            /* @__PURE__ */ a("div", {
-              className: "flex items-center space-x-2 flex-1",
-              children: [/* @__PURE__ */ e("div", {
-                className: "flex-1",
-                children: /* @__PURE__ */ a("div", {
-                  className: "flex items-center space-x-2",
-                  children: [/* @__PURE__ */ e(Ot, {
-                    ref: tt,
-                    value: r?.originAmountFormattedLocale || r?.originAmountFormatted || "",
-                    readOnly: !0,
-                    isLoading: g,
-                    variant: "default",
-                    inputSize: "standard"
-                  }), g && /* @__PURE__ */ e(P, {})]
-                })
-              }), /* @__PURE__ */ e("div", {
-                className: "relative",
-                children: /* @__PURE__ */ e(ke, {
-                  token: s,
-                  chainId: s?.chainId,
-                  onSelect: () => v(!0)
-                })
-              })]
-            }),
-            /* @__PURE__ */ a("div", {
-              className: "mt-4 flex justify-between items-center",
-              children: [/* @__PURE__ */ e("div", {
-                className: "text-xs text-gray-500 dark:text-gray-400",
-                title: r?.originAmountUsdDisplay || void 0,
-                children: s?.symbol && r?.originAmountFormatted ? r?.originAmountUsdDisplay === "$0.00" || r?.originAmountUsdDisplay === "$0" ? /* @__PURE__ */ a(w, { children: [
-                  r.originAmountFormatted,
-                  " ",
-                  s.symbol
-                ] }) : /* @__PURE__ */ a("span", {
-                  className: "notranslate",
-                  translate: "no",
-                  children: [
-                    "≈ ",
-                    r?.originAmountUsdLocaleDisplay || r?.originAmountUsdDisplay || ue(0),
-                    " ",
-                    r?.fees?.totalFeeAmountUsd && parseFloat(r.fees.totalFeeAmountUsd) > 0 ? /* @__PURE__ */ e("button", {
-                      type: "button",
-                      onClick: () => Me(!0),
-                      className: "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer transition-colors",
-                      children: /* @__PURE__ */ a("span", {
-                        className: "notranslate",
-                        translate: "no",
-                        children: [
-                          "(incl.",
-                          " ",
-                          r.fees.totalFeeAmountUsdLocaleDisplay || r.fees.totalFeeAmountUsdDisplay,
-                          " ",
-                          "fees)"
-                        ]
-                      })
-                    }) : null
-                  ]
-                }) : /* @__PURE__ */ e("span", { children: " " })
-              }), s && i !== "direct-transfer" && i !== "onramp-mesh" && /* @__PURE__ */ a("div", {
-                className: "flex items-center space-x-2",
-                children: [/* @__PURE__ */ e("button", {
-                  type: "button",
-                  className: "text-xs text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 transition-colors bg-transparent border-none p-0",
-                  onClick: () => {
-                    if (c?.balanceFormatted) {
-                      const t = parseFloat(c.balanceFormatted);
-                      pe(t) && C(t.toFixed(6));
-                    }
-                  },
-                  onKeyDown: (t) => {
-                    if ((t.key === "Enter" || t.key === " ") && (t.preventDefault(), c?.balanceFormatted)) {
-                      const f = parseFloat(c.balanceFormatted);
-                      pe(f) && C(f.toFixed(6));
-                    }
-                  },
-                  title: "Click to use full balance",
-                  disabled: !c?.balanceFormatted,
-                  children: /* @__PURE__ */ a("span", {
-                    translate: "no",
-                    children: [
-                      "Balance:",
-                      " ",
-                      at ? /* @__PURE__ */ e("span", { className: "inline-block w-12 h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }) : c?.balanceLocaleDisplay || c?.balanceFormatted || ""
-                    ]
-                  })
-                }), !n && c?.balanceFormatted && /* @__PURE__ */ e(Ut, {
-                  userBalance: c.balanceFormatted,
-                  userBalanceRaw: c.balance ?? "0",
-                  decimals: c.decimals ?? 18,
-                  isNativeToken: s.isNativeToken ?? !1,
-                  gasCostFormatted: r?.gasCostFormatted,
-                  chainId: s.chainId,
-                  onAmountSelect: (t) => {
-                    C(t);
-                  },
-                  className: "opacity-100"
-                })]
-              })]
-            })
-          ]
-        })
-      })] }) : /* @__PURE__ */ a(w, { children: [/* @__PURE__ */ a("div", {
-        className: "space-y-1 trails-bg-secondary trails-border-radius-container p-3",
-        children: [/* @__PURE__ */ e("div", {
-          className: "relative",
-          children: m ? /* @__PURE__ */ a("div", {
-            className: `w-full flex items-center justify-between space-x-3 trails-border-radius-list-button px-4 py-2 ${oe ? "bg-amber-500/10 border border-solid border-amber-500/30" : "trails-bg-secondary"}`,
-            children: [/* @__PURE__ */ e("div", {
-              className: "text-left",
-              children: /* @__PURE__ */ e("div", {
-                className: "font-medium trails-text-primary text-sm",
-                children: "Recipient address"
-              })
-            }), /* @__PURE__ */ a("div", {
-              className: "flex items-center space-x-2",
-              children: [/* @__PURE__ */ e(ye, {
-                address: m,
-                className: "font-medium trails-text-primary text-sm"
-              }), /* @__PURE__ */ e(he, {
-                walletAddress: m,
-                size: 20,
-                className: "shrink-0"
-              })]
-            })]
-          }) : /* @__PURE__ */ a("button", {
-            type: "button",
-            onClick: () => U("recipients"),
-            className: `w-full flex items-center justify-between space-x-3 trails-border-radius-list-button px-4 py-2 transition-all duration-200 cursor-pointer ${oe ? "bg-amber-500/10 border border-solid border-amber-500/30 hover:bg-amber-500/15" : "hover:trails-hover-bg hover:bg-gray-50 dark:hover:bg-gray-700"}`,
-            children: [/* @__PURE__ */ e("div", {
-              className: "text-left",
-              children: /* @__PURE__ */ e("div", {
-                className: "font-medium trails-text-primary text-sm",
-                children: "Recipient address"
-              })
-            }), /* @__PURE__ */ a("div", {
-              className: "flex items-center space-x-2",
-              children: [p ? /* @__PURE__ */ a(w, { children: [/* @__PURE__ */ e(ye, {
-                address: p,
-                className: "font-medium trails-text-primary text-sm"
-              }), /* @__PURE__ */ e(he, {
-                walletAddress: p,
-                size: 20,
-                className: "shrink-0"
-              })] }) : /* @__PURE__ */ a(w, { children: [/* @__PURE__ */ e("div", {
-                className: "font-medium text-gray-900 dark:text-white text-sm",
-                children: "Select address"
-              }), /* @__PURE__ */ e("div", {
-                className: "w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center",
-                children: /* @__PURE__ */ e("div", { className: "w-4 h-4 rounded-full bg-gray-400 dark:bg-gray-500" })
-              })] }), /* @__PURE__ */ e(we, { className: "w-4 h-4 trails-text-muted flex-shrink-0" })]
-            })]
-          })
-        }), /* @__PURE__ */ e("div", {
-          className: "relative",
-          children: /* @__PURE__ */ a("button", {
-            type: "button",
-            onClick: () => v(!0),
-            className: "w-full flex items-center justify-between space-x-3 hover:trails-hover-bg hover:bg-gray-50 dark:hover:bg-gray-700 trails-border-radius-list-button px-4 py-2 transition-all duration-200 cursor-pointer",
-            children: [/* @__PURE__ */ e("div", {
-              className: "text-left",
-              children: /* @__PURE__ */ e("div", {
-                className: "font-medium trails-text-primary text-sm",
-                children: "Payment method"
-              })
-            }), /* @__PURE__ */ a("div", {
-              className: "flex items-center space-x-2",
-              children: [s ? /* @__PURE__ */ a(w, { children: [/* @__PURE__ */ e("div", {
-                className: "font-medium trails-text-primary text-sm",
-                children: g ? /* @__PURE__ */ e("div", { className: "h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }) : r?.originAmountFormatted ? /* @__PURE__ */ a("span", { children: [
-                  r.originAmountFormatted,
-                  " ",
-                  s.symbol
-                ] }) : ""
-              }), /* @__PURE__ */ e(It, {
-                symbol: s.symbol,
-                imageUrl: s.imageUrl,
-                chainId: s.chainId,
-                size: 20
-              })] }) : /* @__PURE__ */ a(w, { children: [/* @__PURE__ */ e("div", {
-                className: "font-medium text-gray-900 dark:text-white text-sm",
-                children: "Select payment token"
-              }), /* @__PURE__ */ e("div", {
-                className: "w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center",
-                children: /* @__PURE__ */ e(Kt, { className: "w-4 h-4 text-gray-400" })
-              })] }), /* @__PURE__ */ e(we, { className: "w-4 h-4 trails-text-muted flex-shrink-0" })]
-            })]
-          })
-        })]
-      }), /* @__PURE__ */ e("div", {
-        className: "space-y-1",
-        children: /* @__PURE__ */ a("div", {
-          className: "pt-4 pb-4 p-3 group transition-all duration-200 border min-h-[120px] flex flex-col ",
-          style: {
-            borderColor: "var(--trails-bg-secondary-hover)",
-            borderWidth: "1px",
-            borderStyle: "solid",
-            borderRadius: "var(--trails-border-radius-large-button)"
-          },
-          children: [
-            /* @__PURE__ */ a("div", {
-              className: "mb-4 flex justify-between items-center",
-              children: [/* @__PURE__ */ e("div", {
-                className: "text-sm font-medium trails-text-secondary text-left m-0",
-                children: "Recipient receives"
-              }), /* @__PURE__ */ e(xe, {})]
-            }),
-            /* @__PURE__ */ a("div", {
-              className: "flex items-center space-x-2 flex-1",
-              children: [/* @__PURE__ */ e("div", {
-                className: "flex-1",
-                children: /* @__PURE__ */ a("div", {
-                  className: "flex items-center space-x-2",
-                  children: [/* @__PURE__ */ e("input", {
-                    ref: _,
-                    type: "text",
-                    value: X,
-                    onChange: (t) => ut(t.target.value),
-                    placeholder: `0 ${l?.symbol || ""}`,
-                    readOnly: !!n,
-                    autoComplete: "off",
-                    className: `w-full bg-transparent font-bold trails-text-primary placeholder:trails-text-muted border-none outline-none ${g ? "animate-pulse" : ""}`,
-                    style: ht
-                  }), g && /* @__PURE__ */ e(P, {})]
-                })
-              }), /* @__PURE__ */ e("div", {
-                className: "relative",
-                children: /* @__PURE__ */ e(ke, {
-                  token: l,
-                  chainId: o?.chainId || T,
-                  onSelect: () => A(!0),
-                  unselectable: !!y
-                })
-              })]
-            }),
-            /* @__PURE__ */ e("div", {
-              className: "mt-4 flex justify-between items-center",
-              children: /* @__PURE__ */ e("div", {
-                className: "text-xs text-gray-500 dark:text-gray-400",
-                children: l?.symbol && X ? /* @__PURE__ */ a("span", {
-                  className: "notranslate",
-                  translate: "no",
-                  children: [
-                    "≈",
-                    " ",
-                    rt || st || ue(0)
-                  ]
-                }) : /* @__PURE__ */ e("span", { children: " " })
-              })
-            })
-          ]
-        })
-      })] }),
-      /* @__PURE__ */ e(Wt, {
-        fundMethod: i,
-        isSenderContractOnOrigin: mt,
-        isSenderContractOnDestination: ft,
-        isSequenceWallet: Oe
-      }),
-      /* @__PURE__ */ e(Rt, {
-        errorPrettified: lt,
-        error: ot,
-        severity: "warning"
-      }),
-      i !== "direct-transfer" && i !== "onramp-mesh" && s && /* @__PURE__ */ e(Vt, {
-        processedFeeOptions: me,
-        selectedFeeOption: $,
-        setSelectedFeeOption: (t) => pt(t),
-        chainId: s.chainId,
-        isRefetching: g,
-        originTokenInfo: s ? {
-          originToken: s,
-          originTokenBalance: c?.balance ?? "0",
-          originTokenAmount: r?.originAmountFormatted ?? "0"
-        } : void 0
-      }),
-      r && /* @__PURE__ */ e("div", {
-        className: "mb-4",
-        children: /* @__PURE__ */ e(Pt, {
-          quote: r,
-          showContent: !0,
-          isRefetching: g,
-          initialExpanded: Ze,
-          isPassthrough: Bt(r.passthroughEligible, $, me)
-        })
-      }),
-      /* @__PURE__ */ e("form", {
-        onSubmit: (t) => {
-          et({
-            component: "PayWidget",
-            action: "submit_payment",
-            label: D || "Pay",
-            metadata: {
-              originToken: s?.symbol || "",
-              destinationToken: l?.symbol || "",
-              amount: u || "",
-              recipient: p || "",
-              fundMethod: i || "",
-              chainId: T?.toString() || ""
-            }
-          }), it(t);
-        },
-        children: /* @__PURE__ */ e("button", {
-          type: "submit",
-          disabled: !u || parseFloat(u) <= 0 || ce || g || !nt || !dt || !ct || de || i !== "direct-transfer" && r?.noSufficientBalance || !r || i !== "direct-transfer" && ($ && s ? $t($, {
-            originToken: s,
-            originTokenBalance: c?.balance ?? "0",
-            originTokenAmount: r?.originAmountFormatted ?? "0"
-          }) : !1),
-          className: "w-full font-semibold py-4 px-4 trails-border-radius-button transition-colors bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 text-white disabled:text-gray-500 disabled:cursor-not-allowed cursor-pointer relative",
-          children: ce ? /* @__PURE__ */ a("div", {
-            className: "flex items-center justify-center",
-            children: [/* @__PURE__ */ e(P, { className: "mr-2" }), /* @__PURE__ */ e("span", { children: D })]
-          }) : d?.address ? i !== "direct-transfer" && r?.noSufficientBalance ? "Insufficient Balance" : p ? s ? l ? !u || parseFloat(u) <= 0 ? "Enter an amount" : de ? "No quote available" : g ? /* @__PURE__ */ a("div", {
-            className: "flex items-center justify-center",
-            children: [/* @__PURE__ */ e(P, { className: "mr-2" }), /* @__PURE__ */ e("span", { children: "Getting quote..." })]
-          }) : D === "Getting quote..." || D === "No quote available" ? /* @__PURE__ */ a("div", {
-            className: "flex items-center justify-center",
-            children: [/* @__PURE__ */ e(P, { className: "mr-2" }), /* @__PURE__ */ e("span", { children: D })]
-          }) : D || "Pay" : "Select destination token" : "Select payment token" : "Select recipient address" : "Connect your wallet"
-        })
-      })
-    ]
-  });
-};
-export {
-  Ra as default
-};

package/dist/widget/components/PaymentMethods.d.ts

@@ -1,10 +0,0 @@
-import { default as React } from 'react';
-export interface PaymentMethodsProps {
-    onBack?: () => void;
-    onSelectWalletConnect: () => void;
-    onSelectConnectedAccount: () => void;
-    onSelectQrCode: () => void;
-}
-declare const PaymentMethods: React.FC<PaymentMethodsProps>;
-export default PaymentMethods;
-//# sourceMappingURL=PaymentMethods.d.ts.map

package/dist/widget/components/PaymentMethods.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PaymentMethods.d.ts","sourceRoot":"","sources":["../../../src/widget/components/PaymentMethods.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,qBAAqB,EAAE,MAAM,IAAI,CAAA;IACjC,wBAAwB,EAAE,MAAM,IAAI,CAAA;IACpC,cAAc,EAAE,MAAM,IAAI,CAAA;CAC3B;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgJjD,CAAA;AAED,eAAe,cAAc,CAAA"}