@pollar/react 0.9.0-rc.1 → 0.9.0-rc.3

package/dist/index.mjs

@@ -1033,7 +1033,7 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.9.0-rc.1"
+        "0.9.0-rc.3"
       ] })
     ] })
   ] });
@@ -1268,26 +1268,9 @@ function cropAddress(address) {
   if (address.length <= 16) return address;
   return `${address.slice(0, 8)}...${address.slice(-8)}`;
 }
-function AssetItem({ record }) {
-  const established = record.trustlineEstablished;
-  return /* @__PURE__ */ jsxs("div", { className: "pollar-asset-item", children: [
-    /* @__PURE__ */ jsxs("div", { className: "pollar-asset-info", children: [
-      /* @__PURE__ */ jsx("span", { className: "pollar-asset-code", children: record.code }),
-      record.name && /* @__PURE__ */ jsx("span", { className: "pollar-asset-name", children: record.name })
-    ] }),
-    /* @__PURE__ */ jsx("span", { className: `pollar-asset-trustline${established ? " established" : ""}`, children: established ? "Trustline active" : "Needs trustline" })
-  ] });
-}
-function EnabledAssetsModalTemplate({
-  theme,
-  accentColor,
-  enabledAssets,
-  walletAddress,
-  onRefresh,
-  onClose
-}) {
+function cssVarsFor(theme, accentColor) {
   const isDark = theme === "dark";
-  const cssVars = {
+  return {
     "--pollar-accent": accentColor,
     "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
     "--pollar-border": isDark ? "#374151" : "#e5e7eb",
@@ -1304,13 +1287,62 @@ function EnabledAssetsModalTemplate({
     "--pollar-input-border-radius": "0.5rem",
     "--pollar-card-border-radius": "10px"
   };
+}
+function assetKey(record) {
+  return record.code + (record.issuer ?? "");
+}
+function AssetItem({
+  record,
+  busy,
+  disabled,
+  onToggle
+}) {
+  const established = record.trustlineEstablished;
+  const isNative = record.type === "native";
+  return /* @__PURE__ */ jsxs("div", { className: "pollar-asset-item", children: [
+    /* @__PURE__ */ jsxs("div", { className: "pollar-asset-info", children: [
+      /* @__PURE__ */ jsxs("div", { className: "pollar-asset-code-row", children: [
+        /* @__PURE__ */ jsx("span", { className: "pollar-asset-code", children: record.code }),
+        record.enabledInApp && /* @__PURE__ */ jsx("span", { className: "pollar-asset-tag", children: "App" })
+      ] }),
+      record.name && /* @__PURE__ */ jsx("span", { className: "pollar-asset-name", children: record.name }),
+      !isNative && record.enabledInApp && /* @__PURE__ */ jsx("span", { className: "pollar-asset-sponsor", children: record.sponsored ? "Reserve sponsored by the app" : "You pay the reserve (~0.5 XLM)" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "pollar-asset-actions", children: [
+      /* @__PURE__ */ jsx("span", { className: `pollar-asset-trustline${established ? " established" : ""}`, children: established ? "Trustline active" : "Needs trustline" }),
+      !isNative && /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `pollar-asset-btn${established ? " danger" : ""}`,
+          onClick: () => onToggle(record),
+          disabled: busy || disabled,
+          children: busy ? "\u2026" : established ? "Disable" : "Enable"
+        }
+      )
+    ] })
+  ] });
+}
+function EnabledAssetsModalTemplate({
+  theme,
+  accentColor,
+  enabledAssets,
+  walletAddress,
+  busyKey,
+  actionError,
+  onRefresh,
+  onClose,
+  onToggleTrustline,
+  onAddCustom
+}) {
+  const cssVars = cssVarsFor(theme, accentColor);
   const isLoading = enabledAssets.step === "loading";
   const data = enabledAssets.step === "loaded" ? enabledAssets.data : null;
+  const busy = busyKey !== null;
   return /* @__PURE__ */ jsxs("div", { className: "pollar-modal-card pollar-asset-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header", children: [
-      /* @__PURE__ */ jsx("h2", { className: "pollar-modal-title", children: "Enabled Assets" }),
+      /* @__PURE__ */ jsx("h2", { className: "pollar-modal-title", children: "Trustlines" }),
       /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header-actions", children: [
-        /* @__PURE__ */ jsxs("button", { className: "pollar-modal-refresh-btn", onClick: onRefresh, disabled: isLoading, children: [
+        /* @__PURE__ */ jsxs("button", { className: "pollar-modal-refresh-btn", onClick: onRefresh, disabled: isLoading || busy, children: [
           /* @__PURE__ */ jsxs(
             "svg",
             {
@@ -1334,31 +1366,199 @@ function EnabledAssetsModalTemplate({
     walletAddress && /* @__PURE__ */ jsx("div", { className: "pollar-asset-address", children: cropAddress(walletAddress) }),
     isLoading && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
     enabledAssets.step === "error" && /* @__PURE__ */ jsx("div", { className: "pollar-modal-error", children: enabledAssets.message }),
+    actionError && /* @__PURE__ */ jsx("div", { className: "pollar-modal-action-error", children: actionError }),
     data && !data.exists && /* @__PURE__ */ jsxs("div", { className: "pollar-modal-empty", children: [
       "Account not found on ",
       data.network,
       "."
     ] }),
-    data && data.assets.length === 0 && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "No assets enabled for this application." }),
-    data && data.assets.length > 0 && /* @__PURE__ */ jsx("div", { className: "pollar-asset-list", children: data.assets.map((a) => /* @__PURE__ */ jsx(AssetItem, { record: a }, a.code + (a.issuer ?? ""))) }),
+    data && data.assets.length === 0 && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "No trustlines found." }),
+    data && data.assets.length > 0 && /* @__PURE__ */ jsx("div", { className: "pollar-asset-list", children: data.assets.map((a) => /* @__PURE__ */ jsx(
+      AssetItem,
+      {
+        record: a,
+        busy: busyKey === assetKey(a),
+        disabled: busy && busyKey !== assetKey(a),
+        onToggle: onToggleTrustline
+      },
+      assetKey(a)
+    )) }),
+    /* @__PURE__ */ jsx("button", { className: "pollar-asset-add-custom", onClick: onAddCustom, disabled: busy, children: "+ Add custom trustline" }),
     /* @__PURE__ */ jsx(PollarModalFooter, {})
   ] });
 }
+function isValidIssuer(issuer) {
+  return issuer.length === 56 && issuer.startsWith("G");
+}
+function CustomTrustlineModalTemplate({
+  theme,
+  accentColor,
+  busy,
+  actionError,
+  onBack,
+  onClose,
+  onSubmit
+}) {
+  const cssVars = cssVarsFor(theme, accentColor);
+  const [code, setCode] = useState("");
+  const [issuer, setIssuer] = useState("");
+  const [limit, setLimit] = useState("");
+  const codeOk = code.trim().length >= 1 && code.trim().length <= 12;
+  const issuerOk = isValidIssuer(issuer.trim());
+  const canSubmit = codeOk && issuerOk && !busy;
+  const submit = () => {
+    if (!canSubmit) return;
+    const trimmedLimit = limit.trim();
+    onSubmit({ code: code.trim(), issuer: issuer.trim(), ...trimmedLimit ? { limit: trimmedLimit } : {} });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "pollar-modal-card pollar-asset-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header-actions", children: [
+        /* @__PURE__ */ jsx("button", { className: "pollar-modal-back", onClick: onBack, disabled: busy, "aria-label": "Back", children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M10 3L5 8l5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+        /* @__PURE__ */ jsx("h2", { className: "pollar-modal-title", children: "Add custom trustline" })
+      ] }),
+      /* @__PURE__ */ jsx("button", { className: "pollar-modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M2 2l12 12M14 2L2 14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "pollar-asset-custom-hint", children: "Custom trustlines aren't sponsored \u2014 your wallet pays the 0.5 XLM reserve and the transaction fee." }),
+    /* @__PURE__ */ jsxs("div", { className: "pollar-field", children: [
+      /* @__PURE__ */ jsx("label", { className: "pollar-label", htmlFor: "pollar-trustline-code", children: "Asset code" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "pollar-trustline-code",
+          className: "pollar-input",
+          value: code,
+          onChange: (e) => setCode(e.target.value),
+          placeholder: "USDC",
+          maxLength: 12,
+          autoComplete: "off",
+          spellCheck: false,
+          disabled: busy
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "pollar-field", children: [
+      /* @__PURE__ */ jsx("label", { className: "pollar-label", htmlFor: "pollar-trustline-issuer", children: "Issuer" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "pollar-trustline-issuer",
+          className: "pollar-input",
+          value: issuer,
+          onChange: (e) => setIssuer(e.target.value),
+          placeholder: "G\u2026",
+          autoComplete: "off",
+          spellCheck: false,
+          disabled: busy
+        }
+      ),
+      issuer.trim().length > 0 && !issuerOk && /* @__PURE__ */ jsx("span", { className: "pollar-field-error", children: "Issuer must be a 56-character Stellar address starting with G." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "pollar-field", children: [
+      /* @__PURE__ */ jsxs("label", { className: "pollar-label", htmlFor: "pollar-trustline-limit", children: [
+        "Limit ",
+        /* @__PURE__ */ jsx("span", { className: "pollar-label-optional", children: "(optional)" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: "pollar-trustline-limit",
+          className: "pollar-input",
+          value: limit,
+          onChange: (e) => setLimit(e.target.value),
+          placeholder: "Maximum",
+          inputMode: "decimal",
+          autoComplete: "off",
+          spellCheck: false,
+          disabled: busy
+        }
+      )
+    ] }),
+    actionError && /* @__PURE__ */ jsx("div", { className: "pollar-modal-action-error", children: actionError }),
+    /* @__PURE__ */ jsx("button", { className: "pollar-asset-submit", onClick: submit, disabled: !canSubmit, children: busy ? "Enabling\u2026" : "Enable trustline" }),
+    /* @__PURE__ */ jsx(PollarModalFooter, {})
+  ] });
+}
+function assetKey2(record) {
+  return record.code + (record.issuer ?? "");
+}
 function EnabledAssetsModal({ onClose }) {
-  const { enabledAssets, refreshAssets, walletAddress, styles } = usePollar();
+  const { enabledAssets, refreshAssets, setTrustline, walletAddress, styles } = usePollar();
   const { theme = "light", accentColor = "#005DB4" } = styles;
+  const [view, setView] = useState("list");
+  const [busyKey, setBusyKey] = useState(null);
+  const [actionError, setActionError] = useState(null);
   useEffect(() => {
     void refreshAssets();
   }, [refreshAssets]);
-  return /* @__PURE__ */ jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsx(
+  const runAction = useCallback(
+    async (key, asset, opts) => {
+      setBusyKey(key);
+      setActionError(null);
+      const res = await setTrustline(asset, opts);
+      if (res.status === "error") {
+        setActionError(res.details || "Trustline update failed. Please try again.");
+        setBusyKey(null);
+        return false;
+      }
+      await refreshAssets();
+      setBusyKey(null);
+      return true;
+    },
+    [setTrustline, refreshAssets]
+  );
+  const handleToggle = useCallback(
+    (record) => {
+      const removing = record.trustlineEstablished;
+      void runAction(
+        assetKey2(record),
+        { code: record.code, issuer: record.issuer ?? "" },
+        { ...removing ? { limit: "0" } : {}, sponsored: record.sponsored ?? false }
+      );
+    },
+    [runAction]
+  );
+  const handleCustomSubmit = useCallback(
+    async (input) => {
+      const ok = await runAction(
+        "custom",
+        { code: input.code, issuer: input.issuer },
+        { ...input.limit ? { limit: input.limit } : {}, sponsored: false }
+      );
+      if (ok) setView("list");
+    },
+    [runAction]
+  );
+  return /* @__PURE__ */ jsx("div", { className: "pollar-overlay", onClick: onClose, children: view === "list" ? /* @__PURE__ */ jsx(
     EnabledAssetsModalTemplate,
     {
       theme,
       accentColor,
       enabledAssets,
       walletAddress,
+      busyKey,
+      actionError,
       onRefresh: () => refreshAssets(),
-      onClose
+      onClose,
+      onToggleTrustline: handleToggle,
+      onAddCustom: () => {
+        setActionError(null);
+        setView("custom");
+      }
+    }
+  ) : /* @__PURE__ */ jsx(
+    CustomTrustlineModalTemplate,
+    {
+      theme,
+      accentColor,
+      busy: busyKey === "custom",
+      actionError,
+      onBack: () => {
+        setActionError(null);
+        setView("list");
+      },
+      onClose,
+      onSubmit: handleCustomSubmit
     }
   ) });
 }
@@ -1711,7 +1911,8 @@ function LoginModalTemplate({
   onEmailSubmit,
   onSocialLogin,
   onWalletConnect,
-  onSmartWallet,
+  onLoginSmartWallet,
+  onCreateSmartWallet,
   renderWallets,
   authState,
   codeInputKey,
@@ -1721,6 +1922,7 @@ function LoginModalTemplate({
   onRetry
 }) {
   const [showWalletPicker, setShowWalletPicker] = useState(false);
+  const [showPasskeyChooser, setShowPasskeyChooser] = useState(false);
   const isDark = theme === "dark";
   const enabledSocial = Object.entries(providers).filter(([, enabled]) => enabled);
   const cssVars = {
@@ -1791,6 +1993,31 @@ function LoginModalTemplate({
       renderWallets ? renderWallets({ onConnect: onWalletConnect ?? (() => {
       }), authState }) : /* @__PURE__ */ jsx(DefaultFreighterAlbedoButtons, { onConnect: onWalletConnect ?? (() => {
       }), isLoading })
+    ] }) : showPasskeyChooser ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(BackButton, { onClick: () => setShowPasskeyChooser(false) }),
+      /* @__PURE__ */ jsxs("div", { className: "pollar-wallet-section", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: isLoading,
+            className: "pollar-btn-primary",
+            style: { width: "100%" },
+            onClick: onCreateSmartWallet,
+            children: "Create a new wallet"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: isLoading,
+            className: "pollar-wallet-entry-btn",
+            onClick: onLoginSmartWallet,
+            children: "Log in with an existing wallet"
+          }
+        )
+      ] })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       emailEnabled && /* @__PURE__ */ jsxs("div", { className: "pollar-email-section", children: [
         /* @__PURE__ */ jsx(
@@ -1858,7 +2085,7 @@ function LoginModalTemplate({
             type: "button",
             disabled: isLoading,
             className: "pollar-wallet-entry-btn",
-            onClick: onSmartWallet,
+            onClick: () => setShowPasskeyChooser(true),
             children: [
               /* @__PURE__ */ jsx(
                 "svg",
@@ -1912,6 +2139,9 @@ function LoginModal({ onClose }) {
         setCodeInputKey((k) => k + 1);
       }
       if (next.step === "authenticated") {
+        if (autoCloseTimer.current !== null) {
+          clearTimeout(autoCloseTimer.current);
+        }
         autoCloseTimer.current = setTimeout(() => {
           autoCloseTimer.current = null;
           onCloseRef.current();
@@ -1926,8 +2156,8 @@ function LoginModal({ onClose }) {
       }
     };
   }, [getClient]);
-  const { theme = "light", accentColor = "#005DB4", logoUrl, emailEnabled, embeddedWallets, providers } = styles;
-  const smartWallet = styles.smartWallet ?? true;
+  const { theme = "light", accentColor = "#005DB4", logoUrl, emailEnabled, embeddedWallets, smartWallet, providers } = styles;
+  const smartWalletEnabled = smartWallet ?? false;
   function handleClose() {
     setEmail("");
     getClient().cancelLogin();
@@ -1944,9 +2174,12 @@ function LoginModal({ onClose }) {
   function handleWalletConnect(type) {
     getClient().loginWallet(type);
   }
-  function handleSmartWallet() {
+  function handleLoginSmartWallet() {
     getClient().loginSmartWallet();
   }
+  function handleCreateSmartWallet() {
+    getClient().createSmartWallet();
+  }
   function handleVerifyCode(code) {
     getClient().verifyEmailCode(code);
   }
@@ -1968,7 +2201,7 @@ function LoginModal({ onClose }) {
       logoUrl: logoUrl ?? null,
       emailEnabled: !!emailEnabled,
       embeddedWallets: !!embeddedWallets,
-      smartWallet,
+      smartWallet: smartWalletEnabled,
       providers: {
         google: !!providers?.google,
         discord: !!providers?.discord,
@@ -1982,7 +2215,8 @@ function LoginModal({ onClose }) {
       onEmailSubmit: handleEmailSubmit,
       onSocialLogin: handleSocialLogin,
       onWalletConnect: handleWalletConnect,
-      onSmartWallet: handleSmartWallet,
+      onLoginSmartWallet: handleLoginSmartWallet,
+      onCreateSmartWallet: handleCreateSmartWallet,
       ...renderWallets !== void 0 && { renderWallets },
       authState,
       codeInputKey,
@@ -2745,7 +2979,7 @@ function formatBalance(balance) {
   const n = parseFloat(balance);
   return isNaN(n) ? balance : n.toLocaleString(void 0, { maximumFractionDigits: 7 });
 }
-function assetKey(record) {
+function assetKey3(record) {
   return `${record.code}:${record.issuer ?? "native"}`;
 }
 function SendModalTemplate({
@@ -2798,7 +3032,7 @@ function SendModalTemplate({
   };
   const enabledAssets = assets.filter((a) => a.enabledInApp);
   const otherAssets = assets.filter((a) => !a.enabledInApp);
-  const selectedKey = selectedAsset ? assetKey(selectedAsset) : "";
+  const selectedKey = selectedAsset ? assetKey3(selectedAsset) : "";
   const canSubmit = !!selectedAsset && !!amount && !!destination.trim() && !isLoadingBalance;
   const title = step === "form" ? "Send" : txTitle;
   return /* @__PURE__ */ jsxs(
@@ -2826,23 +3060,23 @@ function SendModalTemplate({
                 value: selectedKey,
                 onChange: (e) => {
                   const all = [...enabledAssets, ...otherAssets];
-                  const found = all.find((a) => assetKey(a) === e.target.value);
+                  const found = all.find((a) => assetKey3(a) === e.target.value);
                   if (found) onSelectAsset(found);
                 },
                 children: [
                   /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select asset" }),
-                  enabledAssets.length > 0 && /* @__PURE__ */ jsx("optgroup", { label: "App assets", children: enabledAssets.map((a) => /* @__PURE__ */ jsxs("option", { value: assetKey(a), children: [
+                  enabledAssets.length > 0 && /* @__PURE__ */ jsx("optgroup", { label: "App assets", children: enabledAssets.map((a) => /* @__PURE__ */ jsxs("option", { value: assetKey3(a), children: [
                     a.code,
                     " \u2014 ",
                     formatBalance(a.available),
                     " available"
-                  ] }, assetKey(a))) }),
-                  otherAssets.length > 0 && /* @__PURE__ */ jsx("optgroup", { label: "Other assets", children: otherAssets.map((a) => /* @__PURE__ */ jsxs("option", { value: assetKey(a), children: [
+                  ] }, assetKey3(a))) }),
+                  otherAssets.length > 0 && /* @__PURE__ */ jsx("optgroup", { label: "Other assets", children: otherAssets.map((a) => /* @__PURE__ */ jsxs("option", { value: assetKey3(a), children: [
                     a.code,
                     " \u2014 ",
                     formatBalance(a.available),
                     " available"
-                  ] }, assetKey(a))) })
+                  ] }, assetKey3(a))) })
                 ]
               }
             )
@@ -3684,14 +3918,13 @@ function randomUserId() {
   for (const b of bytes) bin += String.fromCharCode(b);
   return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 }
-var browserPasskeyCeremony = async ({ challenge }) => {
+var browserPasskeyCeremony = async ({ challenge, mode }) => {
   const rpId = window.location.hostname;
-  try {
+  if (mode === "login") {
     const response2 = await startAuthentication({
       optionsJSON: { challenge, rpId, userVerification: "required" }
     });
     return { kind: "login", response: response2 };
-  } catch {
   }
   const userId = randomUserId();
   const response = await startRegistration({
@@ -3855,6 +4088,7 @@ function PollarProvider({
       // enabled assets
       enabledAssets,
       refreshAssets,
+      setTrustline: (asset, opts) => pollarClient.setTrustline(asset, opts),
       openEnabledAssetsModal: () => setEnabledAssetsModalOpen(true),
       // send / receive
       openSendModal: () => setSendModalOpen(true),