0xtrails 0.16.0 → 0.16.2

package/dist/widget/components/WaasFeeOptions.js

@@ -1,238 +1,242 @@
 import { logger as N } from "../../logger/index.js";
-import { normalizeAddress as K, truncateAddress as C } from "../../utils/address.js";
-import { formatAmountDisplay as G } from "../../utils/format.js";
-import J from "./CopyButton.js";
-import U from "./TokenImage.js";
-import Q from "./Tooltip.js";
-import { useTrails as X } from "../providers/TrailsProvider.js";
-import { formatUnits as Y } from "viem";
-import { useCallback as B, useEffect as L, useMemo as M, useState as S } from "react";
-import { Fragment as T, jsx as r, jsxs as s } from "react/jsx-runtime";
-import { ChevronDown as Z, ChevronUp as _ } from "lucide-react";
-var x = (l) => "hasEnoughBalanceForFee" in l && "balance" in l, O = (l) => l?.contractAddress ? C(l.contractAddress) : "Native Token", E = ({ option: l, chainId: i, feeDisplay: d, isSelected: u = !1, isDisabled: c = !1, showRadio: o = !1, radioName: a = "feeOption", onSelect: w }) => {
-  const f = (n) => {
-    n?.stopPropagation(), !c && w?.();
+import { normalizeAddress as X, truncateAddress as Y } from "../../utils/address.js";
+import { formatAmountDisplay as Z } from "../../utils/format.js";
+import _ from "./CopyButton.js";
+import V from "./TokenImage.js";
+import ee from "./Tooltip.js";
+import { useTrails as re } from "../providers/TrailsProvider.js";
+import { formatUnits as se } from "viem";
+import { useCallback as j, useEffect as I, useMemo as P, useRef as te, useState as w } from "react";
+import { Fragment as R, jsx as r, jsxs as t } from "react/jsx-runtime";
+import { ChevronDown as ae, ChevronUp as le } from "lucide-react";
+var F = (a) => "hasEnoughBalanceForFee" in a && "balance" in a, ne = (a) => a?.contractAddress ? Y(a.contractAddress) : "Native Token", W = ({ option: a, chainId: i, feeDisplay: n, isSelected: u = !1, isDisabled: o = !1, showRadio: d = !1, radioName: l = "feeOption", onSelect: A }) => {
+  const h = (c) => {
+    c?.stopPropagation(), !o && A?.();
   };
   return /* @__PURE__ */ r("div", {
-    className: `px-4 py-3 flex flex-col space-y-3 border border-gray-200 dark:border-gray-800 rounded-lg transition-all duration-200 ${c ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900/30" : "bg-white dark:bg-gray-900 hover:shadow-sm"}`,
-    role: o ? "radio" : void 0,
-    tabIndex: o && !c ? 0 : void 0,
-    "aria-disabled": c,
-    onClick: o ? f : void 0,
-    onKeyDown: o ? (n) => {
-      (n.key === "Enter" || n.key === " ") && (n.preventDefault(), f());
+    className: `px-4 py-3 flex flex-col space-y-3 border border-gray-200 dark:border-gray-800 rounded-lg transition-all duration-200 ${o ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900/30" : "bg-white dark:bg-gray-900 hover:shadow-sm"}`,
+    role: d ? "radio" : void 0,
+    tabIndex: d && !o ? 0 : void 0,
+    "aria-disabled": o,
+    onClick: d ? h : void 0,
+    onKeyDown: d ? (c) => {
+      (c.key === "Enter" || c.key === " ") && (c.preventDefault(), h());
     } : void 0,
-    children: /* @__PURE__ */ s("div", {
+    children: /* @__PURE__ */ t("div", {
       className: "flex items-start justify-between gap-3",
-      children: [/* @__PURE__ */ s("div", {
+      children: [/* @__PURE__ */ t("div", {
         className: "flex items-center space-x-3",
-        children: [/* @__PURE__ */ r(U, {
-          symbol: l.token.symbol,
-          imageUrl: l.token.logoURL,
+        children: [/* @__PURE__ */ r(V, {
+          symbol: a.token.symbol,
+          imageUrl: a.token.logoURL,
           chainId: i,
           size: 32
-        }), /* @__PURE__ */ s("div", {
+        }), /* @__PURE__ */ t("div", {
           className: "ml-2 text-left",
           children: [/* @__PURE__ */ r("div", {
             className: "text-sm font-semibold",
-            children: l.token.symbol
+            children: a.token.symbol
           }), /* @__PURE__ */ r("div", {
             className: "text-xs trails-text-muted",
-            children: O(l.token)
+            children: ne(a.token)
           })]
         })]
-      }), /* @__PURE__ */ s("div", {
+      }), /* @__PURE__ */ t("div", {
         className: "flex items-center space-x-3",
-        children: [/* @__PURE__ */ s("div", {
+        children: [/* @__PURE__ */ t("div", {
           className: "text-right",
           children: [/* @__PURE__ */ r("div", {
             className: "text-[10px] uppercase tracking-wide trails-text-muted",
             children: "Fee to pay"
-          }), /* @__PURE__ */ s("div", {
+          }), /* @__PURE__ */ t("div", {
             className: "text-base font-semibold",
             children: [
-              d.feeAmountFormatted,
+              n.feeAmountFormatted,
               " ",
-              l.token.symbol
+              a.token.symbol
             ]
           })]
-        }), o && /* @__PURE__ */ r("input", {
+        }), d && /* @__PURE__ */ r("input", {
           type: "radio",
-          name: a,
+          name: l,
           checked: u,
-          disabled: c,
-          onChange: f,
+          disabled: o,
+          onChange: h,
           className: "w-4 h-4 text-trails-primary focus:ring-trails-primary"
         })]
       })]
     })
   });
-}, ee = ({ chainId: l, originToken: i, originTokenAmount: d, setIsFeeOptionConfirmed: u, onFeeOptionsLoaded: c, setIsError: o, pendingFeeOptionConfirmation: a, confirmPendingFeeOption: w, rejectPendingFeeOption: f }) => {
-  const [n, y] = S(), [g, q] = S(!1), [h, k] = S(!1), V = !!a && (!a.options || a.options.length === 0), F = M(() => i?.contractAddress?.toLowerCase() || null, [i?.contractAddress]), p = M(() => {
-    if (!d) return null;
+}, O = () => /* @__PURE__ */ r("div", {
+  className: "flex items-center justify-center py-8",
+  children: /* @__PURE__ */ r("p", {
+    className: "text-sm trails-text-muted",
+    children: "Loading fee options..."
+  })
+}), oe = ({ chainId: a, originToken: i, originTokenAmount: n, setIsFeeOptionConfirmed: u, onFeeOptionsLoaded: o, setIsError: d, pendingFeeOptionConfirmation: l, confirmPendingFeeOption: A, rejectPendingFeeOption: h }) => {
+  const [c, x] = w(), S = te(void 0), [y, H] = w(!1), [f, g] = w(!1), [$, T] = w(!1), K = !!l && (!l.options || l.options.length === 0), B = P(() => i?.contractAddress?.toLowerCase() || null, [i?.contractAddress]), p = P(() => {
+    if (!n) return null;
     try {
-      return BigInt(d);
+      return BigInt(n);
     } catch (e) {
       return N.console.error("[trails-sdk] Failed to parse origin token amount for fee comparison", {
-        originTokenAmount: d,
+        originTokenAmount: n,
         error: e
       }), null;
     }
-  }, [d]), D = B((e) => {
+  }, [n]), z = j((e) => {
     if (!i || !e?.token) return !1;
-    const t = e.token.contractAddress ? K(e.token.contractAddress) : null;
-    return F && t ? F === t : !1;
-  }, [i, F]), j = B((e) => {
-    if (!p || p <= 0n || !D(e) || !e?.balance || !e?.value) return !1;
+    const s = e.token.contractAddress ? X(e.token.contractAddress) : null;
+    return B && s ? B === s : !1;
+  }, [i, B]), v = j((e) => {
+    if (!p || p <= 0n || !z(e) || !e?.balance || !e?.value) return !1;
     try {
       return BigInt(e.balance) < BigInt(e.value) + p;
-    } catch (t) {
+    } catch (s) {
       return N.console.error("[trails-sdk] Failed to compare origin amount plus fee with balance", {
         balance: e?.balance,
         value: e?.value,
-        originAmount: d,
-        error: t
+        originAmount: n,
+        error: s
       }), !1;
     }
   }, [
-    D,
+    z,
     p,
-    d
-  ]), P = B((e) => {
-    const t = e.token.decimals ?? 18, b = e.value || "0";
-    let I = "0";
+    n
+  ]), M = j((e) => {
+    const s = e.token.decimals ?? 18, b = e.value || "0";
+    let C = "0";
     try {
-      I = G(Y(BigInt(b), t), {
-        maxFractionDigits: Math.min(t, 6),
+      C = Z(se(BigInt(b), s), {
+        maxFractionDigits: Math.min(s, 6),
         minFractionDigits: 0
       });
-    } catch (H) {
+    } catch (Q) {
       N.console.warn("[trails-sdk] Failed to format fee option amount", {
-        error: H,
+        error: Q,
         value: b,
-        decimals: t,
+        decimals: s,
         token: e?.token?.symbol
       });
     }
-    return { feeAmountFormatted: I };
-  }, []);
-  L(() => {
-    if (a && (N.console.log("[trails-sdk] Pending fee options: ", a.options), c && a.options?.length > 0 && a.options.find((e) => x(e) && e.hasEnoughBalanceForFee) && c(), a.options.length > 0 && !n)) {
-      const e = a.options.find((t) => x(t) && t.hasEnoughBalanceForFee);
-      e?.token?.symbol && y(e.token.symbol);
+    return { feeAmountFormatted: C };
+  }, []), L = P(() => {
+    const e = (l?.options ?? []).filter(F).filter((s) => s.hasEnoughBalanceForFee);
+    return e.find((s) => !v(s)) ?? e[0];
+  }, [l?.options, v]), E = L?.token?.symbol;
+  I(() => {
+    const e = l?.id;
+    if (!e) {
+      S.current = void 0;
+      return;
     }
+    S.current !== e && (S.current = e, T(!1), u(!1), x(void 0));
+  }, [l?.id, u]), I(() => {
+    l && (N.console.log("[trails-sdk] Pending fee options: ", l.options), L && o && o(), !c && E && x(E));
   }, [
-    a,
-    c,
-    n
-  ]), L(() => {
-    a?.id && (u(!1), y(void 0));
-  }, [a?.id, u]);
-  const R = async (e) => {
-    if (a && !h) {
-      k(!0);
+    L,
+    E,
+    o,
+    l,
+    c
+  ]);
+  const G = async (e) => {
+    if (l && !f) {
+      g(!0);
       try {
-        w(a.id, e), u(!0);
+        T(!0), u(!0), A(l.id, e);
       } finally {
-        k(!1);
+        g(!1);
       }
     }
-  }, $ = async () => {
-    if (a && !h) {
-      k(!0);
+  }, J = async () => {
+    if (l && !f) {
+      g(!0);
       try {
-        f(a.id);
+        h(l.id);
       } finally {
-        k(!1);
+        g(!1);
       }
     }
   };
-  if (!a) return null;
-  if (V) return /* @__PURE__ */ r("div", {
-    className: "flex items-center justify-center py-8",
-    children: /* @__PURE__ */ s("div", {
-      className: "flex flex-col items-center space-y-3",
-      children: [/* @__PURE__ */ r("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-trails-primary" }), /* @__PURE__ */ r("p", {
-        className: "text-sm trails-text-muted",
-        children: "Loading fee options..."
-      })]
-    })
-  });
-  const v = a.options, m = v.filter(x).filter((e) => e.hasEnoughBalanceForFee).find((e) => e.token.symbol === n), W = m ? P(m) : null, A = m ? j(m) : !1, z = v.find((e) => x(e) && e.hasEnoughBalanceForFee);
-  return z || o?.(!0), z ? /* @__PURE__ */ s("div", {
+  if (!l) return $ ? null : /* @__PURE__ */ r(O, {});
+  if (K) return /* @__PURE__ */ r(O, {});
+  const k = l.options, m = k.filter(F).filter((e) => e.hasEnoughBalanceForFee).find((e) => e.token.symbol === c), U = m ? M(m) : null, D = m ? v(m) : !1, q = k.find((e) => F(e) && e.hasEnoughBalanceForFee);
+  return q || d?.(!0), q ? /* @__PURE__ */ t("div", {
     className: "space-y-2",
     children: [
-      /* @__PURE__ */ s("div", {
+      /* @__PURE__ */ t("div", {
         className: "flex items-center justify-between",
         children: [/* @__PURE__ */ r("div", {
           className: "text-sm font-medium trails-text-primary",
           children: "Select Fee Payment Token"
-        }), /* @__PURE__ */ s("button", {
+        }), /* @__PURE__ */ t("button", {
           type: "button",
-          onClick: () => q(!g),
+          onClick: () => H(!y),
           className: "flex items-center space-x-1 text-xs trails-text-muted hover:trails-text-primary transition-colors cursor-pointer",
-          children: [/* @__PURE__ */ s("span", { children: [g ? "Hide" : "Show", " options"] }), g ? /* @__PURE__ */ r(_, { className: "w-3 h-3" }) : /* @__PURE__ */ r(Z, { className: "w-3 h-3" })]
+          children: [/* @__PURE__ */ t("span", { children: [y ? "Hide" : "Show", " options"] }), y ? /* @__PURE__ */ r(le, { className: "w-3 h-3" }) : /* @__PURE__ */ r(ae, { className: "w-3 h-3" })]
         })]
       }),
-      m?.hasEnoughBalanceForFee && W && /* @__PURE__ */ r(E, {
+      m?.hasEnoughBalanceForFee && U && /* @__PURE__ */ r(W, {
         option: m,
-        chainId: l,
-        feeDisplay: W,
+        chainId: a,
+        feeDisplay: U,
         isSelected: !0,
-        isDisabled: A,
+        isDisabled: D,
         showRadio: !1
       }),
-      g && /* @__PURE__ */ r("div", {
+      y && /* @__PURE__ */ r("div", {
         className: "space-y-2",
-        children: v.filter(x).filter((e) => e.hasEnoughBalanceForFee).map((e) => {
-          const t = j(e), b = P(e);
-          return t ? /* @__PURE__ */ r(Q, {
+        children: k.filter(F).filter((e) => e.hasEnoughBalanceForFee).map((e) => {
+          const s = v(e), b = M(e);
+          return s ? /* @__PURE__ */ r(ee, {
             message: "Not enough balance to cover sell amount and fee",
-            children: /* @__PURE__ */ r(E, {
+            children: /* @__PURE__ */ r(W, {
               option: e,
-              chainId: l,
+              chainId: a,
               feeDisplay: b,
-              isSelected: n === e.token.symbol,
-              isDisabled: t,
+              isSelected: c === e.token.symbol,
+              isDisabled: s,
               showRadio: !0,
-              onSelect: () => y(e.token.symbol)
+              onSelect: () => x(e.token.symbol)
             }, e.token.symbol || e.token.contractAddress)
-          }, e.token.symbol) : /* @__PURE__ */ r(E, {
+          }, e.token.symbol) : /* @__PURE__ */ r(W, {
             option: e,
-            chainId: l,
+            chainId: a,
             feeDisplay: b,
-            isSelected: n === e.token.symbol,
-            isDisabled: t,
+            isSelected: c === e.token.symbol,
+            isDisabled: s,
             showRadio: !0,
-            onSelect: () => y(e.token.symbol)
+            onSelect: () => x(e.token.symbol)
           }, e.token.symbol || e.token.contractAddress);
         })
       }),
-      /* @__PURE__ */ s("div", {
+      /* @__PURE__ */ t("div", {
         className: "flex flex-col space-y-3 sm:flex-row sm:space-y-0 sm:space-x-3",
-        children: [!A && /* @__PURE__ */ r("div", {
+        children: [!D && /* @__PURE__ */ r("div", {
           className: "flex-1",
           children: /* @__PURE__ */ r("button", {
             type: "button",
-            onClick: () => R(m?.token.contractAddress || null),
-            disabled: !m || h,
+            onClick: () => G(m?.token.contractAddress || null),
+            disabled: !m || f,
             className: "w-full py-3 px-6 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 disabled:text-gray-500 text-white font-semibold rounded-lg transition-all duration-200 cursor-pointer disabled:cursor-not-allowed shadow-sm hover:shadow-md disabled:shadow-none flex items-center justify-center",
-            children: h ? /* @__PURE__ */ s(T, { children: [/* @__PURE__ */ r("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" }), "Processing..."] }) : "Confirm Fee"
+            children: f ? /* @__PURE__ */ t(R, { children: [/* @__PURE__ */ r("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" }), "Processing..."] }) : "Confirm Fee"
           })
         }), /* @__PURE__ */ r("button", {
           type: "button",
-          onClick: $,
-          disabled: h,
-          className: `px-6 py-3 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 text-gray-700 font-semibold rounded-lg transition-all duration-200 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 flex items-center justify-center border border-gray-300 ${A ? "w-full sm:flex-1" : ""}`,
-          children: h ? /* @__PURE__ */ s(T, { children: [/* @__PURE__ */ r("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-gray-500 mr-2" }), "Processing..."] }) : "Cancel"
+          onClick: J,
+          disabled: f,
+          className: `px-6 py-3 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 text-gray-700 font-semibold rounded-lg transition-all duration-200 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 flex items-center justify-center border border-gray-300 ${D ? "w-full sm:flex-1" : ""}`,
+          children: f ? /* @__PURE__ */ t(R, { children: [/* @__PURE__ */ r("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-gray-500 mr-2" }), "Processing..."] }) : "Cancel"
         })]
       })
     ]
-  }) : /* @__PURE__ */ s("div", {
+  }) : /* @__PURE__ */ t("div", {
     className: "space-y-4 py-6",
     children: [/* @__PURE__ */ r("div", {
       className: "p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg",
-      children: /* @__PURE__ */ s("div", {
+      children: /* @__PURE__ */ t("div", {
         className: "flex items-start space-x-2",
         children: [/* @__PURE__ */ r("svg", {
           "aria-hidden": "true",
@@ -253,34 +257,34 @@ var x = (l) => "hasEnoughBalanceForFee" in l && "balance" in l, O = (l) => l?.co
       })
     }), /* @__PURE__ */ r("div", {
       className: "flex flex-col space-y-2",
-      children: v.map((e) => {
-        const t = e.token.contractAddress;
-        return /* @__PURE__ */ s("div", {
+      children: k.map((e) => {
+        const s = e.token.contractAddress;
+        return /* @__PURE__ */ t("div", {
           className: "flex items-center space-x-3 p-3 trails-bg-secondary trails-border-radius-container border border-transparent",
           children: [/* @__PURE__ */ r("div", {
             className: "flex items-center shrink-0",
-            children: /* @__PURE__ */ r(U, {
+            children: /* @__PURE__ */ r(V, {
               symbol: e.token.symbol,
               imageUrl: e.token.logoURL,
-              chainId: l,
+              chainId: a,
               size: 32
             })
-          }), /* @__PURE__ */ s("div", {
+          }), /* @__PURE__ */ t("div", {
             className: "flex-1 min-w-0 flex flex-col items-start",
             children: [/* @__PURE__ */ r("span", {
               className: "text-sm font-bold trails-text-primary leading-tight",
               children: e.token.symbol
-            }), t ? /* @__PURE__ */ s("div", {
+            }), s ? /* @__PURE__ */ t("div", {
               className: "flex items-center space-x-1.5 mt-0.5",
-              children: [/* @__PURE__ */ s("span", {
+              children: [/* @__PURE__ */ t("span", {
                 className: "text-xs trails-text-muted leading-tight",
                 children: [
-                  t.slice(0, 4),
+                  s.slice(0, 4),
                   "...",
-                  t.slice(-4)
+                  s.slice(-4)
                 ]
-              }), /* @__PURE__ */ r(J, {
-                text: t,
+              }), /* @__PURE__ */ r(_, {
+                text: s,
                 stopPropagation: !0,
                 className: "shrink-0 p-0.5",
                 size: "sm"
@@ -290,15 +294,15 @@ var x = (l) => "hasEnoughBalanceForFee" in l && "balance" in l, O = (l) => l?.co
               children: "Native Token"
             })]
           })]
-        }, e.token.symbol || t);
+        }, e.token.symbol || s);
       })
     })]
   });
-}, re = () => /* @__PURE__ */ r("div", {
+}, ce = () => /* @__PURE__ */ r("div", {
   className: "space-y-4 py-6",
   children: /* @__PURE__ */ r("div", {
     className: "p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg",
-    children: /* @__PURE__ */ s("div", {
+    children: /* @__PURE__ */ t("div", {
       className: "flex items-start space-x-2",
       children: [/* @__PURE__ */ r("svg", {
         "aria-hidden": "true",
@@ -312,7 +316,7 @@ var x = (l) => "hasEnoughBalanceForFee" in l && "balance" in l, O = (l) => l?.co
           strokeWidth: 2,
           d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
         })
-      }), /* @__PURE__ */ s("p", {
+      }), /* @__PURE__ */ t("p", {
         className: "text-sm text-red-800 dark:text-red-200 font-medium",
         children: [
           "Sequence fee options require adapter-owned Sequence support. Pass the matching wagmi adapter through ",
@@ -328,18 +332,18 @@ var x = (l) => "hasEnoughBalanceForFee" in l && "balance" in l, O = (l) => l?.co
       })]
     })
   })
-}), he = (l) => {
-  const { sequenceSupport: i } = X(), d = i?.WaasFeeOptionsController, { chainId: u, setIsError: c } = l;
-  return L(() => {
-    d || c?.(!0);
-  }, [d, c]), d ? /* @__PURE__ */ r(d, {
+}), ve = (a) => {
+  const { sequenceSupport: i } = re(), n = i?.WaasFeeOptionsController, { chainId: u, setIsError: o } = a;
+  return I(() => {
+    n || o?.(!0);
+  }, [n, o]), n ? /* @__PURE__ */ r(n, {
     chainId: u,
-    children: (o) => /* @__PURE__ */ r(ee, {
-      ...l,
-      ...o
+    children: (d) => /* @__PURE__ */ r(oe, {
+      ...a,
+      ...d
     })
-  }) : /* @__PURE__ */ r(re, {});
+  }) : /* @__PURE__ */ r(ce, {});
 };
 export {
-  he as default
+  ve as default
 };