@pollar/react 0.9.0-rc.0 → 0.9.0-rc.2

package/dist/index.js

@@ -1004,6 +1004,10 @@ var require_QRCode = __commonJS({
 var LOGO_POLLAR = "https://pollar.xyz/assets/logo_pollar.png";
 var LOGO_FREIGHTER = "https://pollar.xyz/assets/logo_freighter.png";
 var LOGO_ALBEDO = "https://pollar.xyz/assets/logo_albedo.svg";
+var _modalLog = console;
+function setModalErrorLogger(logger) {
+  _modalLog = logger;
+}
 var ModalErrorBoundary = class extends react.Component {
   constructor() {
     super(...arguments);
@@ -1013,7 +1017,7 @@ var ModalErrorBoundary = class extends react.Component {
     return { crashed: true };
   }
   componentDidCatch(error) {
-    console.error("[PollarProvider] Modal crashed:", error);
+    _modalLog.error("[PollarProvider] Modal crashed:", error);
   }
   render() {
     if (this.state.crashed) {
@@ -1031,7 +1035,7 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.9.0-rc.0"
+        "0.9.0-rc.2"
       ] })
     ] })
   ] });
@@ -1262,6 +1266,104 @@ function DistributionRulesModal({ onClose }) {
     }
   ) });
 }
+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__ */ jsxRuntime.jsxs("div", { className: "pollar-asset-item", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-asset-info", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-asset-code", children: record.code }),
+      record.name && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-asset-name", children: record.name })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `pollar-asset-trustline${established ? " established" : ""}`, children: established ? "Trustline active" : "Needs trustline" })
+  ] });
+}
+function EnabledAssetsModalTemplate({
+  theme,
+  accentColor,
+  enabledAssets,
+  walletAddress,
+  onRefresh,
+  onClose
+}) {
+  const isDark = theme === "dark";
+  const cssVars = {
+    "--pollar-accent": accentColor,
+    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
+    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
+    "--pollar-text": isDark ? "#ffffff" : "#111827",
+    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
+    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
+    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
+    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
+    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
+    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
+    "--pollar-buttons-border-radius": "6px",
+    "--pollar-buttons-height": "44px",
+    "--pollar-input-height": "44px",
+    "--pollar-input-border-radius": "0.5rem",
+    "--pollar-card-border-radius": "10px"
+  };
+  const isLoading = enabledAssets.step === "loading";
+  const data = enabledAssets.step === "loaded" ? enabledAssets.data : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-card pollar-asset-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-modal-title", children: "Enabled Assets" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header-actions", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "pollar-modal-refresh-btn", onClick: onRefresh, disabled: isLoading, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              className: `pollar-modal-refresh-icon${isLoading ? " spinning" : ""}`,
+              width: "13",
+              height: "13",
+              viewBox: "0 0 13 13",
+              fill: "none",
+              "aria-hidden": true,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.5 6.5a5 5 0 11-1.5-3.536", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 1v3h-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+              ]
+            }
+          ),
+          "Refresh"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 2l12 12M14 2L2 14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })
+      ] })
+    ] }),
+    walletAddress && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-asset-address", children: cropAddress(walletAddress) }),
+    isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
+    enabledAssets.step === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: enabledAssets.message }),
+    data && !data.exists && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-empty", children: [
+      "Account not found on ",
+      data.network,
+      "."
+    ] }),
+    data && data.assets.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "No assets enabled for this application." }),
+    data && data.assets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-asset-list", children: data.assets.map((a) => /* @__PURE__ */ jsxRuntime.jsx(AssetItem, { record: a }, a.code + (a.issuer ?? ""))) }),
+    /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
+  ] });
+}
+function EnabledAssetsModal({ onClose }) {
+  const { enabledAssets, refreshAssets, walletAddress, styles } = usePollar();
+  const { theme = "light", accentColor = "#005DB4" } = styles;
+  react.useEffect(() => {
+    void refreshAssets();
+  }, [refreshAssets]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+    EnabledAssetsModalTemplate,
+    {
+      theme,
+      accentColor,
+      enabledAssets,
+      walletAddress,
+      onRefresh: () => refreshAssets(),
+      onClose
+    }
+  ) });
+}
 var STATUS_CONFIG = {
   none: { label: "Not started", color: "#6b7280", dot: false },
   pending: { label: "Pending review", color: "#f59e0b", dot: true },
@@ -1812,6 +1914,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();
@@ -3469,7 +3574,7 @@ function formatBalance2(balance) {
   const n = parseFloat(balance);
   return isNaN(n) ? balance : n.toLocaleString(void 0, { maximumFractionDigits: 7 });
 }
-function cropAddress(address) {
+function cropAddress2(address) {
   if (address.length <= 16) return address;
   return `${address.slice(0, 8)}...${address.slice(-8)}`;
 }
@@ -3539,7 +3644,7 @@ function WalletBalanceModalTemplate({
         /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 2l12 12M14 2L2 14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })
       ] })
     ] }),
-    walletAddress && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-bal-address", children: cropAddress(walletAddress) }),
+    walletAddress && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-bal-address", children: cropAddress2(walletAddress) }),
     isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
     walletBalance.step === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: walletBalance.message }),
     data && !data.exists && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-empty", children: [
@@ -3652,6 +3757,7 @@ function PollarProvider({
   const [txHistory, setTxHistory] = react.useState({ step: "idle" });
   const [sessions, setSessions] = react.useState({ step: "idle" });
   const [walletBalance, setWalletBalance] = react.useState({ step: "idle" });
+  const [enabledAssets, setEnabledAssets] = react.useState({ step: "idle" });
   const [resolvedConfig, setResolvedConfig] = react.useState(() => appConfigProp ?? DEFAULT_APP_CONFIG);
   react.useEffect(() => {
     return pollarClient.onTransactionStateChange(setTransaction);
@@ -3665,6 +3771,9 @@ function PollarProvider({
   react.useEffect(() => {
     return pollarClient.onWalletBalanceStateChange(setWalletBalance);
   }, [pollarClient]);
+  react.useEffect(() => {
+    return pollarClient.onEnabledAssetsStateChange(setEnabledAssets);
+  }, [pollarClient]);
   react.useEffect(() => {
     return pollarClient.onNetworkStateChange((state) => {
       setNetworkState(state);
@@ -3685,6 +3794,9 @@ function PollarProvider({
       }
     });
   }, [pollarClient]);
+  react.useEffect(() => {
+    setModalErrorLogger(pollarClient.getLogger());
+  }, [pollarClient]);
   react.useEffect(() => {
     if (appConfigProp !== void 0) return;
     let cancelled = false;
@@ -3692,7 +3804,7 @@ function PollarProvider({
       if (cancelled || !fetched) return;
       setResolvedConfig(fetched);
     }).catch((err) => {
-      console.error("[PollarProvider] getAppConfig failed", err);
+      pollarClient.getLogger().error("[PollarProvider] getAppConfig failed", err);
     });
     return () => {
       cancelled = true;
@@ -3705,6 +3817,7 @@ function PollarProvider({
   const [rampModalOpen, setRampModalOpen] = react.useState(false);
   const [txHistoryModalOpen, setTxHistoryModalOpen] = react.useState(false);
   const [walletBalanceModalOpen, setWalletBalanceModalOpen] = react.useState(false);
+  const [enabledAssetsModalOpen, setEnabledAssetsModalOpen] = react.useState(false);
   const [sendModalOpen, setSendModalOpen] = react.useState(false);
   const [receiveModalOpen, setReceiveModalOpen] = react.useState(false);
   const [sessionsModalOpen, setSessionsModalOpen] = react.useState(false);
@@ -3712,6 +3825,7 @@ function PollarProvider({
   const walletAddress = sessionState?.wallet?.address || "";
   const getClient = react.useCallback(() => pollarClient, [pollarClient]);
   const refreshWalletBalance = react.useCallback(() => pollarClient.refreshBalance(), [pollarClient, walletAddress]);
+  const refreshAssets = react.useCallback(() => pollarClient.refreshAssets(), [pollarClient, walletAddress]);
   const renderWallets = ui?.renderWallets;
   const contextValue = react.useMemo(() => {
     const styles = resolvedConfig.styles ?? {};
@@ -3743,6 +3857,10 @@ function PollarProvider({
       walletBalance,
       refreshWalletBalance,
       openWalletBalanceModal: () => setWalletBalanceModalOpen(true),
+      // enabled assets
+      enabledAssets,
+      refreshAssets,
+      openEnabledAssetsModal: () => setEnabledAssetsModalOpen(true),
       // send / receive
       openSendModal: () => setSendModalOpen(true),
       openReceiveModal: () => setReceiveModalOpen(true),
@@ -3777,6 +3895,8 @@ function PollarProvider({
     sessions,
     walletBalance,
     refreshWalletBalance,
+    enabledAssets,
+    refreshAssets,
     networkState,
     resolvedConfig,
     adapters,
@@ -3798,6 +3918,7 @@ function PollarProvider({
     rampModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setRampModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(RampWidget, { onClose: () => setRampModalOpen(false) }) }),
     txHistoryModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setTxHistoryModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(TxHistoryModal, { onClose: () => setTxHistoryModalOpen(false) }) }),
     walletBalanceModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setWalletBalanceModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(WalletBalanceModal, { onClose: () => setWalletBalanceModalOpen(false) }) }),
+    enabledAssetsModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setEnabledAssetsModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(EnabledAssetsModal, { onClose: () => setEnabledAssetsModalOpen(false) }) }),
     sendModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setSendModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(SendModal, { onClose: () => setSendModalOpen(false) }) }),
     receiveModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setReceiveModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(ReceiveModal, { onClose: () => setReceiveModalOpen(false) }) }),
     sessionsModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setSessionsModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(SessionsModal, { onClose: () => setSessionsModalOpen(false) }) }),
@@ -4248,6 +4369,8 @@ function WalletButton() {
 
 exports.DistributionRulesModal = DistributionRulesModal;
 exports.DistributionRulesModalTemplate = DistributionRulesModalTemplate;
+exports.EnabledAssetsModal = EnabledAssetsModal;
+exports.EnabledAssetsModalTemplate = EnabledAssetsModalTemplate;
 exports.KycModal = KycModal;
 exports.KycModalTemplate = KycModalTemplate;
 exports.KycStatus = KycStatus;