@pollar/react 0.10.1-rc.9 → 0.10.1

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.10.1-rc.9"
+        "0.10.1"
       ] })
     ] })
   ] });
@@ -1158,7 +1158,10 @@ function RuleCard({
         validity
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "pollar-dist-item-action", children: isClaimed ? /* @__PURE__ */ jsx("span", { className: "pollar-dist-item-status", "data-kind": "claimed", children: "Claimed" }) : effectivelyClaimable ? /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-btn-primary pollar-dist-claim-btn", onClick: onClaim, disabled: isClaiming, children: isClaiming ? "Claiming\u2026" : "Claim" }) : /* @__PURE__ */ jsx("span", { className: "pollar-dist-item-status", "data-kind": "unavailable", children: reasonLabel(rule.reason) }) }),
+    /* @__PURE__ */ jsx("div", { className: "pollar-dist-item-action", children: isClaimed ? /* @__PURE__ */ jsx("span", { className: "pollar-dist-item-status", "data-kind": "claimed", children: "Claimed" }) : effectivelyClaimable ? /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-btn-primary pollar-dist-claim-btn", onClick: onClaim, disabled: isClaiming, children: isClaiming ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm" }),
+      "Claiming\u2026"
+    ] }) : "Claim" }) : /* @__PURE__ */ jsx("span", { className: "pollar-dist-item-status", "data-kind": "unavailable", children: reasonLabel(rule.reason) }) }),
     errorMessage && /* @__PURE__ */ jsx("div", { className: "pollar-dist-item-error", children: errorMessage })
   ] });
 }
@@ -1204,29 +1207,46 @@ function DistributionRulesModalTemplate({
         /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header", children: [
           /* @__PURE__ */ jsx("h2", { className: "pollar-modal-title", children: "Distribution Rules" }),
           /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header-actions", children: [
-            /* @__PURE__ */ jsxs("button", { className: "pollar-modal-refresh-btn", onClick: onRefresh, disabled: isLoading, children: [
-              /* @__PURE__ */ 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__ */ jsx("path", { d: "M11.5 6.5a5 5 0 11-1.5-3.536", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
-                    /* @__PURE__ */ jsx("path", { d: "M10 1v3h-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-                  ]
-                }
-              ),
-              "Refresh"
-            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "pollar-modal-close",
+                onClick: onRefresh,
+                disabled: isLoading,
+                "aria-label": "Refresh",
+                title: "Refresh",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: isLoading ? "pollar-modal-refresh-icon pollar-spinning" : "pollar-modal-refresh-icon",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2v3h-3",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
             /* @__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__ */ jsxs("div", { className: "pollar-dist-list", children: [
-          isLoading && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
+          isLoading && /* @__PURE__ */ jsxs("div", { className: "pollar-loading-block", children: [
+            /* @__PURE__ */ jsx("div", { className: "pollar-spinner" }),
+            /* @__PURE__ */ jsx("span", { children: "Loading\u2026" })
+          ] }),
           state.step === "error" && /* @__PURE__ */ jsx("div", { className: "pollar-modal-error", children: state.message }),
           state.step === "loaded" && rules.length === 0 && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "No distribution rules available." }),
           rules.map((rule) => /* @__PURE__ */ jsx(
@@ -1351,14 +1371,14 @@ function AssetItem({
       !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" }),
+      /* @__PURE__ */ jsx("span", { className: `pollar-asset-trustline${established ? " pollar-established" : ""}`, children: established ? "Trustline active" : "Needs trustline" }),
       !isNative && /* @__PURE__ */ jsx(
         "button",
         {
-          className: `pollar-asset-btn${established ? " danger" : ""}`,
+          className: `pollar-asset-btn${established ? " pollar-danger" : ""}`,
           onClick: () => onToggle(record),
           disabled: busy || disabled,
-          children: busy ? "\u2026" : established ? "Disable" : "Enable"
+          children: busy ? /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm pollar-spinner-current" }) : established ? "Disable" : "Enable"
         }
       )
     ] })
@@ -1391,29 +1411,46 @@ function EnabledAssetsModalTemplate({
         /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header", children: [
           /* @__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 || busy, children: [
-              /* @__PURE__ */ 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__ */ jsx("path", { d: "M11.5 6.5a5 5 0 11-1.5-3.536", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
-                    /* @__PURE__ */ jsx("path", { d: "M10 1v3h-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-                  ]
-                }
-              ),
-              "Refresh"
-            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "pollar-modal-close",
+                onClick: onRefresh,
+                disabled: isLoading || busy,
+                "aria-label": "Refresh",
+                title: "Refresh",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: isLoading ? "pollar-modal-refresh-icon pollar-spinning" : "pollar-modal-refresh-icon",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2v3h-3",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
             /* @__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" }) }) })
           ] })
         ] }),
         walletAddress && /* @__PURE__ */ jsx("div", { className: "pollar-asset-address", children: cropAddress(walletAddress) }),
-        isLoading && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
+        isLoading && /* @__PURE__ */ jsxs("div", { className: "pollar-loading-block", children: [
+          /* @__PURE__ */ jsx("div", { className: "pollar-spinner" }),
+          /* @__PURE__ */ jsx("span", { 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: [
@@ -1472,7 +1509,7 @@ function CustomTrustlineModalTemplate({
       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("button", { className: "pollar-modal-close", 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" }) }) })
@@ -1533,7 +1570,10 @@ function CustomTrustlineModalTemplate({
           )
         ] }),
         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("div", { className: "pollar-modal-actions", children: /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-btn-primary", onClick: submit, disabled: !canSubmit, children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm" }),
+          "Enabling\u2026"
+        ] }) : "Enable trustline" }) }),
         /* @__PURE__ */ jsx(PollarModalFooter, {})
       ]
     }
@@ -1654,6 +1694,7 @@ function KycModalTemplate({
   isLoading,
   onSelectProvider,
   onDoneVerifying,
+  onRefresh,
   onClose
 }) {
   const isDark = theme === "dark";
@@ -1678,16 +1719,56 @@ function KycModalTemplate({
     "--pollar-modal-subtitle-size": "0.9rem"
   };
   return /* @__PURE__ */ jsxs("div", { className: "pollar-modal-card pollar-kyc-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs("div", { className: "pollar-kyc-header", children: [
-      /* @__PURE__ */ jsx("h2", { className: "pollar-kyc-title", children: "Identity verification" }),
-      /* @__PURE__ */ jsxs("p", { className: "pollar-kyc-subtitle", children: [
-        step === "select_provider" && "Choose your verification provider",
-        step === "verifying" && `Verifying with ${selectedProvider?.name}`,
-        step === "polling" && "Waiting for verification result",
-        step === "done" && "Verification complete"
+    /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "pollar-kyc-header-text", children: [
+        /* @__PURE__ */ jsx("h2", { className: "pollar-modal-title", children: "Identity verification" }),
+        /* @__PURE__ */ jsxs("p", { className: "pollar-kyc-subtitle", children: [
+          step === "select_provider" && "Choose your verification provider",
+          step === "verifying" && `Verifying with ${selectedProvider?.name}`,
+          step === "polling" && "Waiting for verification result",
+          step === "done" && "Verification complete"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header-actions", children: [
+        step === "select_provider" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "pollar-modal-close",
+            onClick: onRefresh,
+            disabled: isLoading,
+            "aria-label": "Refresh",
+            title: "Refresh providers",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: isLoading ? "pollar-modal-refresh-icon pollar-spinning" : "pollar-modal-refresh-icon",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                "aria-hidden": true,
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2v3h-3",
+                    stroke: "currentColor",
+                    strokeWidth: "1.6",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "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" }) }) })
       ] })
     ] }),
-    step === "select_provider" && /* @__PURE__ */ jsxs("div", { className: "pollar-kyc-providers", children: [
+    step === "select_provider" && (isLoading && providers.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "pollar-loading-block", children: [
+      /* @__PURE__ */ jsx("div", { className: "pollar-spinner" }),
+      /* @__PURE__ */ jsx("span", { children: "Loading providers\u2026" })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "pollar-kyc-providers", children: [
       providers.length === 0 && /* @__PURE__ */ jsx("p", { style: { color: "var(--pollar-muted)", textAlign: "center" }, children: "No providers available for your country." }),
       providers.map((p) => /* @__PURE__ */ jsxs(
         "button",
@@ -1703,7 +1784,7 @@ function KycModalTemplate({
         },
         p.id
       ))
-    ] }),
+    ] })),
     step === "verifying" && selectedProvider && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: "pollar-kyc-iframe-wrap", children: session?.kycUrl ? /* @__PURE__ */ jsx("iframe", { className: "pollar-kyc-iframe", src: session.kycUrl, title: "KYC verification", allow: "camera; microphone" }) : /* @__PURE__ */ jsxs("div", { className: "pollar-kyc-iframe-mock", children: [
         /* @__PURE__ */ jsx("span", { children: "\u{1F512}" }),
@@ -1736,10 +1817,13 @@ function KycModal({ onClose, country = "MX", level = "basic", onApproved }) {
   const [isLoading, setIsLoading] = useState(false);
   const client = getClient();
   const { theme = "light", accentColor = "#005DB4" } = styles;
-  useEffect(() => {
+  const loadProviders = useCallback(() => {
     setIsLoading(true);
-    getClient().getKycProviders(country).then((result) => setProviders(result.providers)).catch(() => setProviders([])).finally(() => setIsLoading(false));
+    return getClient().getKycProviders(country).then((result) => setProviders(result.providers)).catch(() => setProviders([])).finally(() => setIsLoading(false));
   }, [getClient, country]);
+  useEffect(() => {
+    void loadProviders();
+  }, [loadProviders]);
   async function handleSelectProvider(provider) {
     setSelectedProvider(provider);
     setIsLoading(true);
@@ -1785,6 +1869,7 @@ function KycModal({ onClose, country = "MX", level = "basic", onApproved }) {
       isLoading,
       onSelectProvider: handleSelectProvider,
       onDoneVerifying: handleDoneVerifying,
+      onRefresh: () => void loadProviders(),
       onClose
     }
   ) });
@@ -1840,8 +1925,8 @@ function EmailCodeInput({ email, onSubmit }) {
   ] });
 }
 var GithubButton = ({ disabled, onClick }) => {
-  return /* @__PURE__ */ jsxs("button", { className: "github-button", disabled, onClick, children: [
-    /* @__PURE__ */ jsx("svg", { className: "github-button-icon", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("button", { className: "pollar-github-button", disabled, onClick, children: [
+    /* @__PURE__ */ jsx("svg", { className: "pollar-github-button-icon", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx(
       "path",
       {
         fillRule: "evenodd",
@@ -1849,14 +1934,14 @@ var GithubButton = ({ disabled, onClick }) => {
         clipRule: "evenodd"
       }
     ) }),
-    /* @__PURE__ */ jsx("span", { className: "github-button-contents", children: "GitHub" })
+    /* @__PURE__ */ jsx("span", { className: "pollar-github-button-contents", children: "GitHub" })
   ] });
 };
 var GoogleButton = ({ disabled, onClick }) => {
-  return /* @__PURE__ */ jsxs("button", { className: "gsi-material-button", disabled, onClick, children: [
-    /* @__PURE__ */ jsx("div", { className: "gsi-material-button-state" }),
-    /* @__PURE__ */ jsxs("div", { className: "gsi-material-button-content-wrapper", children: [
-      /* @__PURE__ */ jsx("div", { className: "gsi-material-button-icon", children: /* @__PURE__ */ jsxs("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", style: { display: "block" }, children: [
+  return /* @__PURE__ */ jsxs("button", { className: "pollar-gsi-material-button", disabled, onClick, children: [
+    /* @__PURE__ */ jsx("div", { className: "pollar-gsi-material-button-state" }),
+    /* @__PURE__ */ jsxs("div", { className: "pollar-gsi-material-button-content-wrapper", children: [
+      /* @__PURE__ */ jsx("div", { className: "pollar-gsi-material-button-icon", children: /* @__PURE__ */ jsxs("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", style: { display: "block" }, children: [
         /* @__PURE__ */ jsx(
           "path",
           {
@@ -1887,7 +1972,7 @@ var GoogleButton = ({ disabled, onClick }) => {
         ),
         /* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h48v48H0z" })
       ] }) }),
-      /* @__PURE__ */ jsx("span", { className: "gsi-material-button-contents", children: "Google" }),
+      /* @__PURE__ */ jsx("span", { className: "pollar-gsi-material-button-contents", children: "Google" }),
       /* @__PURE__ */ jsx("span", { style: { display: "none" }, children: "Google" })
     ] })
   ] });
@@ -2093,7 +2178,7 @@ function LoginModalTemplate({
             placeholder: "you@email.com",
             value: email,
             disabled: isLoading,
-            className: "pollar-email-input",
+            className: "pollar-input",
             onChange: (e) => onEmailChange?.(e.target.value),
             onKeyDown: (e) => e.key === "Enter" && onEmailSubmit?.()
           }
@@ -2322,7 +2407,7 @@ function PrivyLoginSubmodal({
             placeholder: "you@email.com",
             value: email,
             disabled: isLoading,
-            className: "pollar-email-input",
+            className: "pollar-input",
             onChange: (e) => setEmail(e.target.value),
             onKeyDown: (e) => e.key === "Enter" && handleEmailSubmit()
           }
@@ -2572,7 +2657,7 @@ function flattenInstructions(instr) {
       }
       continue;
     }
-    let value = "";
+    let value;
     if (typeof v === "string" || typeof v === "number") value = String(v);
     else if (Array.isArray(v)) value = v.filter((x) => typeof x === "string" || typeof x === "number").join(", ");
     else continue;
@@ -2667,7 +2752,7 @@ function RampWidgetTemplate({
         /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-modal-close", onClick: onRefresh, disabled: refreshing, "aria-label": "Refresh", children: /* @__PURE__ */ jsx(
           "svg",
           {
-            className: refreshing ? "pollar-modal-refresh-icon spinning" : "pollar-modal-refresh-icon",
+            className: refreshing ? "pollar-modal-refresh-icon pollar-spinning" : "pollar-modal-refresh-icon",
             width: "16",
             height: "16",
             viewBox: "0 0 16 16",
@@ -2689,12 +2774,12 @@ function RampWidgetTemplate({
       ] })
     ] }),
     step === "input" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "pollar-ramp-tabs", children: [
+      /* @__PURE__ */ jsxs("div", { className: "pollar-tabs", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            className: "pollar-ramp-tab",
+            className: "pollar-tab",
             "data-active": direction === "onramp",
             onClick: () => onDirectionChange("onramp"),
             children: "Buy"
@@ -2704,7 +2789,7 @@ function RampWidgetTemplate({
           "button",
           {
             type: "button",
-            className: "pollar-ramp-tab",
+            className: "pollar-tab",
             "data-active": direction === "offramp",
             onClick: () => onDirectionChange("offramp"),
             children: "Sell"
@@ -2713,7 +2798,10 @@ function RampWidgetTemplate({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "pollar-ramp-field", children: [
         /* @__PURE__ */ jsx("label", { className: "pollar-ramp-label", children: "Country" }),
-        countriesLoading ? /* @__PURE__ */ jsx("div", { className: "pollar-ramp-input pollar-ramp-input-loading", children: "Loading countries\u2026" }) : countries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "pollar-modal-error", children: "No ramp providers available on this network yet." }) : /* @__PURE__ */ jsx("select", { className: "pollar-ramp-input", value: country, onChange: (e) => onCountryChange(e.target.value), children: countries.map((c) => /* @__PURE__ */ jsxs("option", { value: c.code, children: [
+        countriesLoading ? /* @__PURE__ */ jsxs("div", { className: "pollar-ramp-input pollar-select-loading", children: [
+          /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm" }),
+          /* @__PURE__ */ jsx("span", { children: "Loading countries\u2026" })
+        ] }) : countries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "pollar-modal-error", children: "No ramp providers available on this network yet." }) : /* @__PURE__ */ jsx("select", { className: "pollar-ramp-input", value: country, onChange: (e) => onCountryChange(e.target.value), children: countries.map((c) => /* @__PURE__ */ jsxs("option", { value: c.code, children: [
           flagEmoji(c.code),
           " ",
           c.code,
@@ -2751,10 +2839,13 @@ function RampWidgetTemplate({
         )
       ] })
     ] }),
-    step === "loading_quote" && /* @__PURE__ */ jsx("div", { className: "pollar-ramp-loading", children: LOADING_STEPS.map((text, i) => /* @__PURE__ */ jsxs("div", { className: "pollar-ramp-loading-row", children: [
-      /* @__PURE__ */ jsx("div", { className: "pollar-ramp-loading-dot" }),
-      /* @__PURE__ */ jsx("span", { children: text })
-    ] }, i)) }),
+    step === "loading_quote" && /* @__PURE__ */ jsxs("div", { className: "pollar-ramp-loading", children: [
+      /* @__PURE__ */ jsx("div", { className: "pollar-spinner pollar-ramp-loading-spinner" }),
+      LOADING_STEPS.map((text, i) => /* @__PURE__ */ jsxs("div", { className: "pollar-ramp-loading-row", children: [
+        /* @__PURE__ */ jsx("div", { className: "pollar-ramp-loading-dot" }),
+        /* @__PURE__ */ jsx("span", { children: text })
+      ] }, i))
+    ] }),
     step === "select_route" && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: "pollar-ramp-route-list", children: quotes.map((q, i) => /* @__PURE__ */ jsx(RouteDisplay, { quote: q, onSelect: onSelectQuote }, i)) }),
       /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onClose, children: "Cancel" })
@@ -2794,7 +2885,10 @@ function RampWidgetTemplate({
             className: "pollar-btn-primary",
             disabled: requiredFields.some((f) => !isFieldValid(f, fieldValues[f.key])) || isLoading,
             onClick: onContactContinue,
-            children: isLoading ? "Starting\u2026" : "Continue"
+            children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm" }),
+              "Starting\u2026"
+            ] }) : "Continue"
           }
         )
       ] })
@@ -2806,7 +2900,10 @@ function RampWidgetTemplate({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "pollar-ramp-payment-field", children: [
         /* @__PURE__ */ jsx("span", { className: "pollar-ramp-payment-label", children: "Status" }),
-        /* @__PURE__ */ jsx("div", { className: "pollar-ramp-payment-value", children: /* @__PURE__ */ jsx("code", { style: { color: txStatus === "completed" ? "var(--pollar-success-text)" : void 0 }, children: txStatus ? STATUS_LABEL[txStatus] : "Processing" }) })
+        /* @__PURE__ */ jsxs("div", { className: "pollar-ramp-payment-value", children: [
+          /* @__PURE__ */ jsx("code", { style: { color: txStatus === "completed" ? "var(--pollar-success-text)" : void 0 }, children: txStatus ? STATUS_LABEL[txStatus] : "Processing" }),
+          txStatus !== "completed" && txStatus !== "failed" && /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm", "aria-label": "Checking status" })
+        ] })
       ] }),
       stellarTxHash && /* @__PURE__ */ jsxs("div", { className: "pollar-ramp-payment-field", children: [
         /* @__PURE__ */ jsx("span", { className: "pollar-ramp-payment-label", children: "Stellar tx" }),
@@ -2827,8 +2924,26 @@ function RampWidgetTemplate({
               "aria-label": "View on Stellar Expert",
               title: "View on Stellar Expert",
               children: /* @__PURE__ */ jsxs("svg", { width: "13", height: "13", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: [
-                /* @__PURE__ */ jsx("path", { d: "M6 3H3v8h8V8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-                /* @__PURE__ */ jsx("path", { d: "M8.5 2.5h3v3M11 3L6.5 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M6 3H3v8h8V8",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M8.5 2.5h3v3M11 3L6.5 7.5",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
               ] })
             }
           )
@@ -2856,7 +2971,10 @@ function RampWidgetTemplate({
         "Continue at ",
         provider
       ] }),
-      canComplete && /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-btn-primary", disabled: completing, onClick: onCompleteWithdraw, children: completing ? "Submitting\u2026" : "I've completed KYC \u2014 withdraw" }),
+      canComplete && /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-btn-primary", disabled: completing, onClick: onCompleteWithdraw, children: completing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm" }),
+        "Submitting\u2026"
+      ] }) : "I've completed KYC \u2014 withdraw" }),
       errorMsg && /* @__PURE__ */ jsx("p", { className: "pollar-ramp-payment-note", style: { color: "var(--pollar-error-text)" }, children: errorMsg }),
       /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onClose, children: txStatus === "completed" ? "Done" : "Close" })
     ] }),
@@ -3309,6 +3427,7 @@ function AssetSelect({
   options,
   onChange,
   loading = false,
+  loadingLabel,
   disabled = false,
   appGroupLabel = "App assets",
   otherGroupLabel = "Other assets",
@@ -3318,7 +3437,10 @@ function AssetSelect({
   const otherAssets = options.filter((o) => !o.enabledInApp);
   return /* @__PURE__ */ jsxs("div", { className: "pollar-send-field", children: [
     /* @__PURE__ */ jsx("label", { className: "pollar-send-label", children: label }),
-    loading ? /* @__PURE__ */ jsx("div", { className: "pollar-send-skeleton" }) : /* @__PURE__ */ jsxs(
+    loading ? loadingLabel ? /* @__PURE__ */ jsxs("div", { className: "pollar-input pollar-select-loading", children: [
+      /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm" }),
+      /* @__PURE__ */ jsx("span", { children: loadingLabel })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "pollar-send-skeleton" }) : /* @__PURE__ */ jsxs(
       "select",
       {
         className: "pollar-input pollar-send-select",
@@ -3559,6 +3681,7 @@ function SendModalTemplate({
   isInProgress,
   onClose,
   onBack,
+  onRefresh,
   onSelectAsset,
   onAmountChange,
   onDestinationChange,
@@ -3603,7 +3726,41 @@ function SendModalTemplate({
             showBack && /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-modal-close", onClick: onBack, "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: title })
           ] }),
-          !isInProgress && /* @__PURE__ */ jsx("div", { className: "pollar-modal-header-actions", children: /* @__PURE__ */ jsx("button", { type: "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" }) }) }) })
+          !isInProgress && /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header-actions", children: [
+            step === "form" && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "pollar-modal-close",
+                onClick: onRefresh,
+                disabled: isLoadingBalance,
+                "aria-label": "Refresh",
+                title: "Refresh balances",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: isLoadingBalance ? "pollar-modal-refresh-icon pollar-spinning" : "pollar-modal-refresh-icon",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2v3h-3",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("button", { type: "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" }) }) })
+          ] })
         ] }),
         step === "form" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
@@ -3612,6 +3769,7 @@ function SendModalTemplate({
               label: "Asset",
               value: selectedKey,
               loading: isLoadingBalance,
+              loadingLabel: "Loading assets\u2026",
               options: assets.map((a) => ({
                 key: assetKey3(a),
                 code: a.code,
@@ -3813,6 +3971,7 @@ function SendModal({ onClose }) {
       isInProgress,
       onClose,
       onBack: handleBack,
+      onRefresh: () => void refreshWalletBalance(),
       onSelectAsset: setSelectedAsset,
       onAmountChange: setAmount,
       onDestinationChange: setDestination,
@@ -3955,7 +4114,6 @@ function SwapModalTemplate({
             /* @__PURE__ */ jsx("button", { type: "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" }) }) })
           ] })
         ] }),
-        step === "form" && configLoading && /* @__PURE__ */ jsx("div", { className: "pollar-send-hint", children: "Loading swap options\u2026" }),
         step === "form" && !configLoading && swapUnavailable && /* @__PURE__ */ jsx("div", { className: "pollar-modal-error", children: "Swap is not available for this app." }),
         step === "form" && !swapUnavailable && /* @__PURE__ */ jsxs(Fragment, { children: [
           smartUnsupported && /* @__PURE__ */ jsx("div", { className: "pollar-modal-error", children: "Swaps are not yet available for smart (passkey) wallets." }),
@@ -3964,7 +4122,8 @@ function SwapModalTemplate({
             {
               label: "You pay",
               value: sellKey,
-              loading: isLoadingData,
+              loading: isLoadingData || configLoading,
+              loadingLabel: "Loading assets\u2026",
               disabled: configLoading,
               options: sellOptions.map((o) => ({
                 key: assetOptionKey(o),
@@ -4006,7 +4165,8 @@ function SwapModalTemplate({
             {
               label: "You receive",
               value: buyKey,
-              loading: isLoadingData,
+              loading: isLoadingData || configLoading,
+              loadingLabel: "Loading assets\u2026",
               disabled: configLoading,
               options: buyOptions.map((o) => ({
                 key: assetOptionKey(o),
@@ -4068,18 +4228,24 @@ function SwapModalTemplate({
           ),
           /* @__PURE__ */ jsxs("div", { className: "pollar-send-field", children: [
             /* @__PURE__ */ jsx("label", { className: "pollar-send-label", children: "Route" }),
-            /* @__PURE__ */ jsx(
+            configLoading ? /* @__PURE__ */ jsxs("div", { className: "pollar-input pollar-select-loading", children: [
+              /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm" }),
+              /* @__PURE__ */ jsx("span", { children: "Loading routes\u2026" })
+            ] }) : /* @__PURE__ */ jsx(
               "select",
               {
                 className: "pollar-input pollar-send-select",
                 value: provider,
-                disabled: configLoading || providers.length === 0,
+                disabled: providers.length === 0,
                 onChange: (e) => onProviderChange(e.target.value),
-                children: providers.length === 0 ? /* @__PURE__ */ jsx("option", { value: provider, children: configLoading ? "Loading\u2026" : PROVIDER_LABELS[provider] }) : providers.map((p) => /* @__PURE__ */ jsx("option", { value: p, children: PROVIDER_LABELS[p] }, p))
+                children: providers.length === 0 ? /* @__PURE__ */ jsx("option", { value: provider, children: PROVIDER_LABELS[provider] }) : providers.map((p) => /* @__PURE__ */ jsx("option", { value: p, children: PROVIDER_LABELS[p] }, p))
               }
             )
           ] }),
-          quoteLoading && /* @__PURE__ */ jsx("div", { className: "pollar-send-hint", children: "Fetching best price\u2026" }),
+          quoteLoading && /* @__PURE__ */ jsxs("div", { className: "pollar-send-hint pollar-inline-loading", children: [
+            /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm" }),
+            "Fetching best price\u2026"
+          ] }),
           !quoteLoading && quoteError && /* @__PURE__ */ jsx("div", { className: "pollar-modal-error", children: quoteError }),
           !quoteLoading && !quoteError && quote && selectedBuy && /* @__PURE__ */ jsxs("div", { className: "pollar-swap-quote", children: [
             /* @__PURE__ */ jsxs("div", { className: "pollar-swap-quote-row", children: [
@@ -4413,7 +4579,14 @@ var PROVIDER_LABELS2 = {
   blend: "Blend",
   defindex: "DeFindex"
 };
-var IN_FLIGHT_STEPS2 = ["building", "signing", "submitting", "submitted", "signing-submitting", "building-signing-submitting"];
+var IN_FLIGHT_STEPS2 = [
+  "building",
+  "signing",
+  "submitting",
+  "submitted",
+  "signing-submitting",
+  "building-signing-submitting"
+];
 function formatAmount4(value) {
   const n = parseFloat(value);
   return isNaN(n) ? value : n.toLocaleString(void 0, { maximumFractionDigits: 7 });
@@ -4427,6 +4600,11 @@ function EarnModal({ onClose }) {
     earnWithdraw,
     tx: transaction,
     wallet,
+    walletBalance,
+    refreshWalletBalance,
+    enabledAssets,
+    refreshAssets,
+    setTrustline,
     network,
     styles
   } = usePollar();
@@ -4444,6 +4622,7 @@ function EarnModal({ onClose }) {
   const [amount, setAmount] = useState("");
   const [loadingOpps, setLoadingOpps] = useState(false);
   const [formError, setFormError] = useState("");
+  const [refreshing, setRefreshing] = useState(false);
   const [showXdr, setShowXdr] = useState(false);
   const [copied, setCopied] = useState(false);
   const copyTimerRef = useRef(null);
@@ -4457,6 +4636,10 @@ function EarnModal({ onClose }) {
   useEffect(() => {
     void loadProviders();
   }, [loadProviders]);
+  useEffect(() => {
+    void refreshWalletBalance();
+    void refreshAssets();
+  }, [refreshWalletBalance, refreshAssets]);
   useEffect(() => {
     if (!provider) return;
     let cancelled = false;
@@ -4500,6 +4683,22 @@ function EarnModal({ onClose }) {
   const withdrawUnit = position?.withdrawUnit ?? "asset";
   const assetCode = selectedOpportunity?.asset.code ?? "";
   const amountUnitLabel = tab === "deposit" ? assetCode : withdrawUnit === "shares" ? "shares" : assetCode;
+  const walletAvailable = (() => {
+    if (!selectedOpportunity) return null;
+    const balances = walletBalance.step === "loaded" ? walletBalance.data.balances : [];
+    const issuer = selectedOpportunity.asset.issuer;
+    const rec = balances.find(
+      (b) => issuer === null ? b.type === "native" : b.code === assetCode && b.issuer === issuer
+    );
+    return rec ? rec.available : null;
+  })();
+  const depositAssetRecord = (() => {
+    if (!selectedOpportunity?.asset.issuer || enabledAssets.step !== "loaded") return void 0;
+    return enabledAssets.data.assets.find(
+      (a) => a.code === assetCode && a.issuer === selectedOpportunity.asset.issuer
+    );
+  })();
+  const depositNeedsTrustline = tab === "deposit" && !smartUnsupported && !!selectedOpportunity?.asset.issuer && !depositAssetRecord?.trustlineEstablished;
   const hash = transaction.step === "success" ? transaction.hash : null;
   const buildData = "buildData" in transaction ? transaction.buildData : null;
   const explorerNetwork = buildData?.summary.network?.toLowerCase().includes("testnet") ? "testnet" : buildData ? "public" : network === "testnet" ? "testnet" : "public";
@@ -4507,7 +4706,9 @@ function EarnModal({ onClose }) {
   const isInProgress = IN_FLIGHT_STEPS2.includes(transaction.step);
   const showBack = step === "tx" && (transaction.step === "error" || transaction.step === "success") && !isInProgress;
   const txTitle = isInProgress ? tab === "deposit" ? "Depositing\u2026" : "Withdrawing\u2026" : transaction.step === "success" ? "Done!" : transaction.step === "error" ? tab === "deposit" ? "Deposit failed" : "Withdraw failed" : "Confirm";
-  const canSubmit = !smartUnsupported && !!provider && !!opportunityId && !!amount && parseFloat(amount) > 0 && !providersLoading && !loadingOpps;
+  const parsedAmount = parseFloat(amount);
+  const exceedsAvailable = tab === "deposit" ? walletAvailable != null && parsedAmount > parseFloat(walletAvailable) : position != null && parsedAmount > parseFloat(position.withdrawable);
+  const canSubmit = !smartUnsupported && !!provider && !!opportunityId && !!amount && parsedAmount > 0 && !exceedsAvailable && !providersLoading && !loadingOpps;
   const cssVars = {
     "--pollar-accent": accentColor,
     "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
@@ -4540,11 +4741,27 @@ function EarnModal({ onClose }) {
       setFormError("Enter a valid amount");
       return;
     }
+    if (tab === "deposit" && walletAvailable != null && parsed > parseFloat(walletAvailable)) {
+      setFormError("Amount exceeds your wallet balance");
+      return;
+    }
     if (tab === "withdraw" && position && parsed > parseFloat(position.withdrawable)) {
       setFormError("Amount exceeds your position");
       return;
     }
     setStep("tx");
+    if (tab === "deposit" && depositNeedsTrustline && selectedOpportunity?.asset.issuer) {
+      const tl = await setTrustline(
+        { code: assetCode, issuer: selectedOpportunity.asset.issuer },
+        depositAssetRecord?.sponsored ? { sponsored: true } : void 0
+      );
+      if (tl.status === "error") {
+        setFormError(`Trustline for ${assetCode} failed: ${tl.details ?? "unknown error"}`);
+        setStep("form");
+        return;
+      }
+      await refreshAssets();
+    }
     const params = { provider, opportunity: opportunityId, amount };
     const outcome = tab === "deposit" ? await earnDeposit(params) : await earnWithdraw(params);
     if (outcome.status === "success" || outcome.status === "pending") {
@@ -4575,146 +4792,217 @@ function EarnModal({ onClose }) {
     setCopied(false);
     refreshPosition();
   }
+  async function handleRefresh() {
+    if (refreshing || !provider) return;
+    setRefreshing(true);
+    try {
+      void refreshWalletBalance();
+      const opps = await getEarnOpportunities(provider);
+      setOpportunities(opps);
+      setOpportunityId((cur) => opps.some((o) => o.id === cur) ? cur : opps[0]?.id ?? "");
+      refreshPosition();
+    } catch {
+    } finally {
+      setRefreshing(false);
+    }
+  }
   const title = step === "form" ? "Earn" : txTitle;
-  return /* @__PURE__ */ jsx("div", { className: "pollar-overlay", onClick: !isInProgress ? onClose : void 0, children: /* @__PURE__ */ jsxs("div", { className: "pollar-modal-card pollar-send-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header", children: [
-      /* @__PURE__ */ jsxs("div", { className: "pollar-send-header-left", children: [
-        showBack && /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-modal-close", onClick: handleBack, "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: title })
-      ] }),
-      !isInProgress && /* @__PURE__ */ jsx("button", { type: "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" }) }) })
-    ] }),
-    step === "form" && providersLoading && /* @__PURE__ */ jsx("div", { className: "pollar-send-hint", children: "Loading Earn options\u2026" }),
-    step === "form" && earnUnavailable && /* @__PURE__ */ jsx("div", { className: "pollar-modal-error", children: "Earn is not available for this app." }),
-    step === "form" && !earnUnavailable && /* @__PURE__ */ jsxs(Fragment, { children: [
-      smartUnsupported && /* @__PURE__ */ jsx("div", { className: "pollar-modal-error", children: "Earn is not yet available for smart (passkey) wallets." }),
-      /* @__PURE__ */ jsxs("div", { className: "pollar-earn-tabs", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: `pollar-earn-tab${tab === "deposit" ? " pollar-earn-tab-active" : ""}`,
-            onClick: () => {
-              setTab("deposit");
-              setFormError("");
-            },
-            children: "Deposit"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: `pollar-earn-tab${tab === "withdraw" ? " pollar-earn-tab-active" : ""}`,
-            onClick: () => {
-              setTab("withdraw");
-              setFormError("");
-            },
-            children: "Withdraw"
-          }
-        )
-      ] }),
-      providers && providers.length > 1 && /* @__PURE__ */ jsxs("div", { className: "pollar-send-field", children: [
-        /* @__PURE__ */ jsx("label", { className: "pollar-send-label", children: "Provider" }),
-        /* @__PURE__ */ jsx(
-          "select",
-          {
-            className: "pollar-input pollar-send-select",
-            value: provider ?? "",
-            onChange: (e) => setProvider(e.target.value),
-            children: providers.map((p) => /* @__PURE__ */ jsx("option", { value: p, children: PROVIDER_LABELS2[p] }, p))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "pollar-send-field", children: [
-        /* @__PURE__ */ jsx("label", { className: "pollar-send-label", children: provider === "defindex" ? "Vault" : "Pool" }),
-        /* @__PURE__ */ jsx(
-          "select",
-          {
-            className: "pollar-input pollar-send-select",
-            value: opportunityId,
-            disabled: loadingOpps || opportunities.length === 0,
-            onChange: (e) => setOpportunityId(e.target.value),
-            children: opportunities.length === 0 ? /* @__PURE__ */ jsx("option", { value: "", children: loadingOpps ? "Loading\u2026" : "None available" }) : opportunities.map((o) => /* @__PURE__ */ jsxs("option", { value: o.id, children: [
-              o.name,
-              " \xB7 ",
-              o.apy.toFixed(2),
-              "% APY"
-            ] }, o.id))
-          }
-        )
-      ] }),
-      selectedOpportunity && /* @__PURE__ */ jsxs("div", { className: "pollar-swap-quote", children: [
-        /* @__PURE__ */ jsxs("div", { className: "pollar-swap-quote-row", children: [
-          /* @__PURE__ */ jsx("span", { className: "pollar-send-hint", children: "Your position" }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            position ? formatAmount4(position.balance) : "\u2026",
-            " ",
-            assetCode
+  return /* @__PURE__ */ jsx("div", { className: "pollar-overlay", onClick: !isInProgress ? onClose : void 0, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "pollar-modal-card pollar-send-modal",
+      "data-theme": theme,
+      style: cssVars,
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header", children: [
+          /* @__PURE__ */ jsxs("div", { className: "pollar-send-header-left", children: [
+            showBack && /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-modal-close", onClick: handleBack, "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: title })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header-actions", children: [
+            step === "form" && !earnUnavailable && !smartUnsupported && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "pollar-modal-close",
+                onClick: () => void handleRefresh(),
+                disabled: refreshing || providersLoading,
+                "aria-label": "Refresh",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: refreshing ? "pollar-modal-refresh-icon pollar-spinning" : "pollar-modal-refresh-icon",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2v3h-3",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            !isInProgress && /* @__PURE__ */ jsx("button", { type: "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__ */ jsxs("div", { className: "pollar-swap-quote-row", children: [
-          /* @__PURE__ */ jsx("span", { className: "pollar-send-hint", children: "APY" }),
-          /* @__PURE__ */ jsxs("span", { className: "pollar-earn-live", children: [
-            selectedOpportunity.apy.toFixed(2),
-            "%"
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "pollar-send-field", children: [
-        /* @__PURE__ */ jsxs("div", { className: "pollar-send-label-row", children: [
-          /* @__PURE__ */ jsx("label", { className: "pollar-send-label", children: tab === "deposit" ? "Amount" : "Withdraw amount" }),
-          tab === "withdraw" && position && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: "pollar-swap-custom-toggle",
-              onClick: () => setAmount(position.withdrawable),
-              children: [
+        step === "form" && earnUnavailable && /* @__PURE__ */ jsx("div", { className: "pollar-modal-error", children: "Earn is not available for this app." }),
+        step === "form" && !earnUnavailable && /* @__PURE__ */ jsxs(Fragment, { children: [
+          smartUnsupported && /* @__PURE__ */ jsx("div", { className: "pollar-modal-error", children: "Earn is not yet available for smart (passkey) wallets." }),
+          /* @__PURE__ */ jsxs("div", { className: "pollar-tabs", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "pollar-tab",
+                "data-active": tab === "deposit",
+                onClick: () => {
+                  setTab("deposit");
+                  setFormError("");
+                },
+                children: "Deposit"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "pollar-tab",
+                "data-active": tab === "withdraw",
+                onClick: () => {
+                  setTab("withdraw");
+                  setFormError("");
+                },
+                children: "Withdraw"
+              }
+            )
+          ] }),
+          providers && providers.length > 1 && /* @__PURE__ */ jsxs("div", { className: "pollar-send-field", children: [
+            /* @__PURE__ */ jsx("label", { className: "pollar-send-label", children: "Provider" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: "pollar-input pollar-send-select",
+                value: provider ?? "",
+                onChange: (e) => setProvider(e.target.value),
+                children: providers.map((p) => /* @__PURE__ */ jsx("option", { value: p, children: PROVIDER_LABELS2[p] }, p))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "pollar-send-field", children: [
+            /* @__PURE__ */ jsx("label", { className: "pollar-send-label", children: provider === "defindex" ? "Vault" : "Pool" }),
+            loadingOpps || providersLoading ? /* @__PURE__ */ jsxs("div", { className: "pollar-input pollar-select-loading", children: [
+              /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm" }),
+              /* @__PURE__ */ jsx("span", { children: "Loading options\u2026" })
+            ] }) : /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: "pollar-input pollar-send-select",
+                value: opportunityId,
+                disabled: opportunities.length === 0,
+                onChange: (e) => setOpportunityId(e.target.value),
+                children: opportunities.length === 0 ? /* @__PURE__ */ jsx("option", { value: "", children: "None available" }) : opportunities.map((o) => /* @__PURE__ */ jsxs("option", { value: o.id, children: [
+                  o.name,
+                  " \xB7 ",
+                  o.apy.toFixed(2),
+                  "% APY"
+                ] }, o.id))
+              }
+            )
+          ] }),
+          selectedOpportunity && /* @__PURE__ */ jsxs("div", { className: "pollar-swap-quote", children: [
+            tab === "deposit" && /* @__PURE__ */ jsxs("div", { className: "pollar-swap-quote-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "pollar-send-hint", children: "In your wallet" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                walletAvailable != null ? formatAmount4(walletAvailable) : "\u2026",
+                " ",
+                assetCode
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "pollar-swap-quote-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "pollar-send-hint", children: "Your position" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                position ? formatAmount4(position.balance) : "\u2026",
+                " ",
+                assetCode
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "pollar-swap-quote-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "pollar-send-hint", children: "APY" }),
+              /* @__PURE__ */ jsxs("span", { className: "pollar-earn-live", children: [
+                selectedOpportunity.apy.toFixed(2),
+                "%"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "pollar-send-field", children: [
+            /* @__PURE__ */ jsxs("div", { className: "pollar-send-label-row", children: [
+              /* @__PURE__ */ jsx("label", { className: "pollar-send-label", children: tab === "deposit" ? "Amount" : "Withdraw amount" }),
+              tab === "deposit" && walletAvailable != null && /* @__PURE__ */ jsxs("button", { type: "button", className: "pollar-swap-custom-toggle", onClick: () => setAmount(walletAvailable), children: [
+                "Max: ",
+                formatAmount4(walletAvailable),
+                " ",
+                amountUnitLabel
+              ] }),
+              tab === "withdraw" && position && /* @__PURE__ */ jsxs("button", { type: "button", className: "pollar-swap-custom-toggle", onClick: () => setAmount(position.withdrawable), children: [
                 "Max: ",
                 formatAmount4(position.withdrawable),
                 " ",
                 amountUnitLabel
-              ]
-            }
-          )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "pollar-earn-amount", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className: "pollar-input",
+                  type: "text",
+                  inputMode: "decimal",
+                  placeholder: "0.00",
+                  value: amount,
+                  onChange: (e) => setAmount(e.target.value)
+                }
+              ),
+              amountUnitLabel && /* @__PURE__ */ jsx("span", { className: "pollar-earn-amount-unit", children: amountUnitLabel })
+            ] })
+          ] }),
+          formError && /* @__PURE__ */ jsx("div", { className: "pollar-modal-error", children: formError }),
+          depositNeedsTrustline && selectedOpportunity && /* @__PURE__ */ jsxs("div", { className: "pollar-swap-trustline-notice", children: [
+            "To deposit ",
+            assetCode,
+            " your wallet needs a trustline. This will create it first (~0.5 XLM reserve, refundable if you later remove it), then deposit \u2014 two signatures."
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "pollar-modal-actions", children: /* @__PURE__ */ jsx("button", { className: "pollar-btn-primary", onClick: () => void handleSubmit(), disabled: !canSubmit, children: tab === "deposit" ? depositNeedsTrustline ? "Enable trustline & deposit" : "Deposit" : "Withdraw" }) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "pollar-earn-amount", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              className: "pollar-input",
-              type: "text",
-              inputMode: "decimal",
-              placeholder: "0.00",
-              value: amount,
-              onChange: (e) => setAmount(e.target.value)
-            }
-          ),
-          amountUnitLabel && /* @__PURE__ */ jsx("span", { className: "pollar-earn-amount-unit", children: amountUnitLabel })
-        ] })
-      ] }),
-      formError && /* @__PURE__ */ jsx("div", { className: "pollar-modal-error", children: formError }),
-      /* @__PURE__ */ jsx("div", { className: "pollar-modal-actions", children: /* @__PURE__ */ jsx("button", { className: "pollar-btn-primary", onClick: () => void handleSubmit(), disabled: !canSubmit, children: tab === "deposit" ? "Deposit" : "Withdraw" }) })
-    ] }),
-    step === "tx" && /* @__PURE__ */ jsx(
-      TxStatusView,
-      {
-        transaction,
-        showXdr,
-        copied,
-        explorerUrl,
-        walletType,
-        onSignAndSend: () => {
-        },
-        onToggleXdr: () => setShowXdr((v) => !v),
-        onCopyHash: handleCopyHash,
-        onRetry: () => void handleRetry(),
-        onDone: onClose
-      }
-    ),
-    /* @__PURE__ */ jsx(PollarModalFooter, {})
-  ] }) });
+        step === "tx" && /* @__PURE__ */ jsx(
+          TxStatusView,
+          {
+            transaction,
+            showXdr,
+            copied,
+            explorerUrl,
+            walletType,
+            onSignAndSend: () => {
+            },
+            onToggleXdr: () => setShowXdr((v) => !v),
+            onCopyHash: handleCopyHash,
+            onRetry: () => void handleRetry(),
+            onDone: onClose
+          }
+        ),
+        /* @__PURE__ */ jsx(PollarModalFooter, {})
+      ]
+    }
+  ) });
 }
 function describeDevice(s) {
   if (s.deviceLabel) return s.deviceLabel;
@@ -4807,30 +5095,46 @@ function SessionsModalTemplate({
         /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header", children: [
           /* @__PURE__ */ jsx("h2", { className: "pollar-modal-title", children: "Active sessions" }),
           /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header-actions", children: [
-            /* @__PURE__ */ jsxs("button", { className: "pollar-modal-refresh-btn", onClick: onRefresh, disabled: isLoading, children: [
-              /* @__PURE__ */ 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__ */ jsx("path", { d: "M11.5 6.5a5 5 0 11-1.5-3.536", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
-                    /* @__PURE__ */ jsx("path", { d: "M10 1v3h-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-                  ]
-                }
-              ),
-              "Refresh"
-            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "pollar-modal-close",
+                onClick: onRefresh,
+                disabled: isLoading,
+                "aria-label": "Refresh",
+                title: "Refresh",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: isLoading ? "pollar-modal-refresh-icon pollar-spinning" : "pollar-modal-refresh-icon",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2v3h-3",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
             /* @__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__ */ jsxs("div", { className: "pollar-sessions-list", children: [
-          state.step === "idle" && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
-          isLoading && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
+          (state.step === "idle" || isLoading) && /* @__PURE__ */ jsxs("div", { className: "pollar-loading-block", children: [
+            /* @__PURE__ */ jsx("div", { className: "pollar-spinner" }),
+            /* @__PURE__ */ jsx("span", { children: "Loading\u2026" })
+          ] }),
           state.step === "error" && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: state.message }),
           state.step === "loaded" && sessions.length === 0 && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "No active sessions." }),
           sessions.map((s) => {
@@ -4859,7 +5163,10 @@ function SessionsModalTemplate({
                   className: "pollar-sessions-item-revoke",
                   onClick: () => onRevoke(s.familyId),
                   disabled: isRevoking || signingOutEverywhere,
-                  children: isRevoking ? "Revoking\u2026" : "Revoke"
+                  children: isRevoking ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm pollar-spinner-current" }),
+                    "Revoking\u2026"
+                  ] }) : "Revoke"
                 }
               )
             ] }, s.familyId);
@@ -4872,7 +5179,10 @@ function SessionsModalTemplate({
             onClick: onLogoutEverywhere,
             disabled: signingOutEverywhere || otherCount === 0,
             title: otherCount === 0 ? "No other devices to sign out" : void 0,
-            children: signingOutEverywhere ? "Signing out\u2026" : "Sign out everywhere"
+            children: signingOutEverywhere ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm pollar-spinner-current" }),
+              "Signing out\u2026"
+            ] }) : "Sign out everywhere"
           }
         ) }),
         /* @__PURE__ */ jsx(PollarModalFooter, {})
@@ -5089,7 +5399,7 @@ function renderSummary(summary) {
     last = m.index + address.length;
   }
   if (parts.length === 0) return /* @__PURE__ */ jsx("span", { className: "pollar-hist-item-title", children: summary });
-  if (last < summary.length) parts.push(/* @__PURE__ */ jsx("span", { children: summary.slice(last) }, key++));
+  if (last < summary.length) parts.push(/* @__PURE__ */ jsx("span", { children: summary.slice(last) }, key));
   return parts;
 }
 function TxHistoryModalTemplate({
@@ -5137,30 +5447,47 @@ function TxHistoryModalTemplate({
         /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header", children: [
           /* @__PURE__ */ jsx("h2", { className: "pollar-modal-title", children: "Transaction History" }),
           /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header-actions", children: [
-            /* @__PURE__ */ jsxs("button", { className: "pollar-modal-refresh-btn", onClick: onRefresh, disabled: isLoading, children: [
-              /* @__PURE__ */ 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__ */ jsx("path", { d: "M11.5 6.5a5 5 0 11-1.5-3.536", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
-                    /* @__PURE__ */ jsx("path", { d: "M10 1v3h-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-                  ]
-                }
-              ),
-              "Refresh"
-            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "pollar-modal-close",
+                onClick: onRefresh,
+                disabled: isLoading,
+                "aria-label": "Refresh",
+                title: "Refresh",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: isLoading ? "pollar-modal-refresh-icon pollar-spinning" : "pollar-modal-refresh-icon",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2v3h-3",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
             /* @__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__ */ jsxs("div", { className: "pollar-hist-list", children: [
           txHistory.step === "idle" && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "Click Refresh to load transactions." }),
-          isLoading && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
+          isLoading && /* @__PURE__ */ jsxs("div", { className: "pollar-loading-block", children: [
+            /* @__PURE__ */ jsx("div", { className: "pollar-spinner" }),
+            /* @__PURE__ */ jsx("span", { children: "Loading\u2026" })
+          ] }),
           txHistory.step === "error" && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: txHistory.message }),
           txHistory.step === "loaded" && records.length === 0 && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "No transactions yet." }),
           records.map((record) => {
@@ -5353,24 +5680,38 @@ function WalletBalanceModalTemplate({
     /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header", children: [
       /* @__PURE__ */ jsx("h2", { className: "pollar-modal-title", children: "Wallet Balance" }),
       /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header-actions", children: [
-        /* @__PURE__ */ jsxs("button", { className: "pollar-modal-refresh-btn", onClick: onRefresh, disabled: isLoading, children: [
-          /* @__PURE__ */ 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__ */ jsx("path", { d: "M11.5 6.5a5 5 0 11-1.5-3.536", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
-                /* @__PURE__ */ jsx("path", { d: "M10 1v3h-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-              ]
-            }
-          ),
-          "Refresh"
-        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "pollar-modal-close",
+            onClick: onRefresh,
+            disabled: isLoading,
+            "aria-label": "Refresh",
+            title: "Refresh",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: isLoading ? "pollar-modal-refresh-icon pollar-spinning" : "pollar-modal-refresh-icon",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                "aria-hidden": true,
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2v3h-3",
+                    stroke: "currentColor",
+                    strokeWidth: "1.6",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          }
+        ),
         /* @__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" }) }) })
       ] })
     ] }),
@@ -5378,7 +5719,10 @@ function WalletBalanceModalTemplate({
       /* @__PURE__ */ jsx("span", { className: "pollar-bal-address", children: cropAddress2(walletAddress) }),
       /* @__PURE__ */ jsx(CopyButton, { value: walletAddress, label: "Copy wallet address" })
     ] }),
-    isLoading && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
+    isLoading && /* @__PURE__ */ jsxs("div", { className: "pollar-loading-block", children: [
+      /* @__PURE__ */ jsx("div", { className: "pollar-spinner" }),
+      /* @__PURE__ */ jsx("span", { children: "Loading\u2026" })
+    ] }),
     walletBalance.step === "error" && /* @__PURE__ */ jsx("div", { className: "pollar-modal-error", children: walletBalance.message }),
     data && !data.exists && /* @__PURE__ */ jsxs("div", { className: "pollar-modal-empty", children: [
       "Account not found on ",
@@ -5589,6 +5933,9 @@ function PollarProvider({
   const [sendModalOpen, setSendModalOpen] = useState(false);
   const [swapModalOpen, setSwapModalOpen] = useState(false);
   const [earnModalOpen, setEarnModalOpen] = useState(false);
+  const [sendModalKey, setSendModalKey] = useState(0);
+  const [swapModalKey, setSwapModalKey] = useState(0);
+  const [earnModalKey, setEarnModalKey] = useState(0);
   const [receiveModalOpen, setReceiveModalOpen] = useState(false);
   const [sessionsModalOpen, setSessionsModalOpen] = useState(false);
   const [distributionRulesModalOpen, setDistributionRulesModalOpen] = useState(false);
@@ -5631,21 +5978,33 @@ function PollarProvider({
       setTrustline: (asset, opts) => pollarClient.setTrustline(asset, opts),
       openEnabledAssetsModal: () => setEnabledAssetsModalOpen(true),
       // send / receive
-      openSendModal: () => setSendModalOpen(true),
+      openSendModal: () => {
+        pollarClient.resetTransactionState();
+        setSendModalKey((k) => k + 1);
+        setSendModalOpen(true);
+      },
       openReceiveModal: () => setReceiveModalOpen(true),
       // swap
       getSwapConfig: () => pollarClient.getSwapConfig(),
       getSwapTokens: () => pollarClient.getSwapTokens(),
       getSwapQuote: (params) => pollarClient.getSwapQuote(params),
       swap: (quote, opts) => pollarClient.swap(quote, opts),
-      openSwapModal: () => setSwapModalOpen(true),
+      openSwapModal: () => {
+        pollarClient.resetTransactionState();
+        setSwapModalKey((k) => k + 1);
+        setSwapModalOpen(true);
+      },
       // earn
       getEarnProviders: () => pollarClient.getEarnProviders(),
       getEarnOpportunities: (provider) => pollarClient.getEarnOpportunities(provider),
       getEarnPosition: (params) => pollarClient.getEarnPosition(params),
       earnDeposit: (params) => pollarClient.earnDeposit(params),
       earnWithdraw: (params) => pollarClient.earnWithdraw(params),
-      openEarnModal: () => setEarnModalOpen(true),
+      openEarnModal: () => {
+        pollarClient.resetTransactionState();
+        setEarnModalKey((k) => k + 1);
+        setEarnModalOpen(true);
+      },
       // sessions
       sessions,
       openSessionsModal: () => setSessionsModalOpen(true),
@@ -5699,9 +6058,9 @@ function PollarProvider({
     txHistoryModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setTxHistoryModalOpen(false), children: /* @__PURE__ */ jsx(TxHistoryModal, { onClose: () => setTxHistoryModalOpen(false) }) }),
     walletBalanceModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setWalletBalanceModalOpen(false), children: /* @__PURE__ */ jsx(WalletBalanceModal, { onClose: () => setWalletBalanceModalOpen(false) }) }),
     enabledAssetsModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setEnabledAssetsModalOpen(false), children: /* @__PURE__ */ jsx(EnabledAssetsModal, { onClose: () => setEnabledAssetsModalOpen(false) }) }),
-    sendModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setSendModalOpen(false), children: /* @__PURE__ */ jsx(SendModal, { onClose: () => setSendModalOpen(false) }) }),
-    swapModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setSwapModalOpen(false), children: /* @__PURE__ */ jsx(SwapModal, { onClose: () => setSwapModalOpen(false) }) }),
-    earnModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setEarnModalOpen(false), children: /* @__PURE__ */ jsx(EarnModal, { onClose: () => setEarnModalOpen(false) }) }),
+    sendModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setSendModalOpen(false), children: /* @__PURE__ */ jsx(SendModal, { onClose: () => setSendModalOpen(false) }) }, sendModalKey),
+    swapModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setSwapModalOpen(false), children: /* @__PURE__ */ jsx(SwapModal, { onClose: () => setSwapModalOpen(false) }) }, swapModalKey),
+    earnModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setEarnModalOpen(false), children: /* @__PURE__ */ jsx(EarnModal, { onClose: () => setEarnModalOpen(false) }) }, earnModalKey),
     receiveModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setReceiveModalOpen(false), children: /* @__PURE__ */ jsx(ReceiveModal, { onClose: () => setReceiveModalOpen(false) }) }),
     sessionsModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setSessionsModalOpen(false), children: /* @__PURE__ */ jsx(SessionsModal, { onClose: () => setSessionsModalOpen(false) }) }),
     distributionRulesModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setDistributionRulesModalOpen(false), children: /* @__PURE__ */ jsx(DistributionRulesModal, { onClose: () => setDistributionRulesModalOpen(false) }) })
@@ -5735,7 +6094,7 @@ function createPollarAdapterHook(key) {
   };
 }
 function ButtonLogo() {
-  return /* @__PURE__ */ jsx("img", { src: LOGO_POLLAR, alt: "Pollar", width: 22, height: 22, className: "wallet-btn-logo" });
+  return /* @__PURE__ */ jsx("img", { src: LOGO_POLLAR, alt: "Pollar", width: 22, height: 22, className: "pollar-wallet-btn-logo" });
 }
 function cropWallet(address) {
   if (address.length <= 12) return address;
@@ -5768,23 +6127,23 @@ function WalletButtonTemplate({
   onLogin
 }) {
   if (!walletAddress) {
-    return /* @__PURE__ */ jsxs("button", { type: "button", className: "wallet-login-btn", style: { backgroundColor: accentColor }, onClick: onLogin, children: [
+    return /* @__PURE__ */ jsxs("button", { type: "button", className: "pollar-wallet-login-btn", style: { backgroundColor: accentColor }, onClick: onLogin, children: [
       /* @__PURE__ */ jsx(ButtonLogo, {}),
       "Login with Pollar"
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "wallet-wrapper", ref: wrapperRef, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "pollar-wallet-wrapper", ref: wrapperRef, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
-        className: "wallet-btn",
+        className: "pollar-wallet-btn",
         style: { backgroundColor: accentColor },
         onClick: isInProgress ? void 0 : onToggleOpen,
         disabled: isInProgress,
         "aria-busy": isInProgress,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "wallet-btn-label", children: cropWallet(walletAddress) }),
-          isInProgress ? /* @__PURE__ */ jsxs("svg", { className: "wallet-btn-spinner", viewBox: "0 0 12 12", width: "12", height: "12", fill: "none", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("span", { className: "pollar-wallet-btn-label", children: cropWallet(walletAddress) }),
+          isInProgress ? /* @__PURE__ */ jsxs("svg", { className: "pollar-wallet-btn-spinner", viewBox: "0 0 12 12", width: "12", height: "12", fill: "none", "aria-hidden": true, children: [
             /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "4.5", stroke: "rgba(255,255,255,0.35)", strokeWidth: "1.5" }),
             /* @__PURE__ */ jsx(
               "circle",
@@ -5802,7 +6161,7 @@ function WalletButtonTemplate({
           ] }) : /* @__PURE__ */ jsx(
             "svg",
             {
-              className: `wallet-chevron${open ? " open" : ""}`,
+              className: `pollar-wallet-chevron${open ? " pollar-open" : ""}`,
               viewBox: "0 0 12 12",
               fill: "none",
               stroke: "currentColor",
@@ -5815,12 +6174,12 @@ function WalletButtonTemplate({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs("div", { className: "wallet-dropdown", style: { backgroundColor: dropdownBg, borderColor: dropdownBorder }, children: [
+    open && /* @__PURE__ */ jsxs("div", { className: "pollar-wallet-dropdown", style: { backgroundColor: dropdownBg, borderColor: dropdownBorder }, children: [
       showCreateAccount && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(
           "button",
           {
-            className: "wallet-dropdown-item",
+            className: "pollar-wallet-dropdown-item",
             style: { color: itemColor },
             onClick: onCreateAccount,
             disabled: creatingAccount,
@@ -5848,9 +6207,9 @@ function WalletButtonTemplate({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "wallet-dropdown-divider" })
+        /* @__PURE__ */ jsx("div", { className: "pollar-wallet-dropdown-divider" })
       ] }),
-      /* @__PURE__ */ jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onSend, children: [
+      /* @__PURE__ */ jsxs("button", { className: "pollar-wallet-dropdown-item", style: { color: itemColor }, onClick: onSend, children: [
         /* @__PURE__ */ jsxs(
           "svg",
           {
@@ -5870,7 +6229,7 @@ function WalletButtonTemplate({
         ),
         "Send"
       ] }),
-      /* @__PURE__ */ jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onReceive, children: [
+      /* @__PURE__ */ jsxs("button", { className: "pollar-wallet-dropdown-item", style: { color: itemColor }, onClick: onReceive, children: [
         /* @__PURE__ */ jsxs(
           "svg",
           {
@@ -5891,8 +6250,8 @@ function WalletButtonTemplate({
         ),
         "Receive"
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "wallet-dropdown-divider" }),
-      /* @__PURE__ */ jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onCopy, children: [
+      /* @__PURE__ */ jsx("div", { className: "pollar-wallet-dropdown-divider" }),
+      /* @__PURE__ */ jsxs("button", { className: "pollar-wallet-dropdown-item", style: { color: itemColor }, onClick: onCopy, children: [
         /* @__PURE__ */ jsxs(
           "svg",
           {
@@ -5912,7 +6271,7 @@ function WalletButtonTemplate({
         ),
         copied ? "Copied!" : "Copy address"
       ] }),
-      /* @__PURE__ */ jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onWalletBalance, children: [
+      /* @__PURE__ */ jsxs("button", { className: "pollar-wallet-dropdown-item", style: { color: itemColor }, onClick: onWalletBalance, children: [
         /* @__PURE__ */ jsxs(
           "svg",
           {
@@ -5933,7 +6292,7 @@ function WalletButtonTemplate({
         ),
         "Wallet balance"
       ] }),
-      /* @__PURE__ */ jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onTxHistory, children: [
+      /* @__PURE__ */ jsxs("button", { className: "pollar-wallet-dropdown-item", style: { color: itemColor }, onClick: onTxHistory, children: [
         /* @__PURE__ */ jsxs(
           "svg",
           {
@@ -5956,8 +6315,8 @@ function WalletButtonTemplate({
         ),
         "Transaction history"
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "wallet-dropdown-divider" }),
-      /* @__PURE__ */ jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onRamp, children: [
+      /* @__PURE__ */ jsx("div", { className: "pollar-wallet-dropdown-divider" }),
+      /* @__PURE__ */ jsxs("button", { className: "pollar-wallet-dropdown-item", style: { color: itemColor }, onClick: onRamp, children: [
         /* @__PURE__ */ jsxs(
           "svg",
           {
@@ -5979,7 +6338,7 @@ function WalletButtonTemplate({
         ),
         "Buy / Sell"
       ] }),
-      /* @__PURE__ */ jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onKyc, children: [
+      /* @__PURE__ */ jsxs("button", { className: "pollar-wallet-dropdown-item", style: { color: itemColor }, onClick: onKyc, children: [
         /* @__PURE__ */ jsxs(
           "svg",
           {
@@ -6000,7 +6359,7 @@ function WalletButtonTemplate({
         ),
         "Identity verification"
       ] }),
-      /* @__PURE__ */ jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onDistributionRules, children: [
+      /* @__PURE__ */ jsxs("button", { className: "pollar-wallet-dropdown-item", style: { color: itemColor }, onClick: onDistributionRules, children: [
         /* @__PURE__ */ jsxs(
           "svg",
           {
@@ -6023,7 +6382,7 @@ function WalletButtonTemplate({
         ),
         "Distribution rules"
       ] }),
-      /* @__PURE__ */ jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onSessions, children: [
+      /* @__PURE__ */ jsxs("button", { className: "pollar-wallet-dropdown-item", style: { color: itemColor }, onClick: onSessions, children: [
         /* @__PURE__ */ jsxs(
           "svg",
           {
@@ -6044,8 +6403,8 @@ function WalletButtonTemplate({
         ),
         "Active sessions"
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "wallet-dropdown-divider" }),
-      /* @__PURE__ */ jsxs("button", { className: "wallet-dropdown-item danger", onClick: onLogout, children: [
+      /* @__PURE__ */ jsx("div", { className: "pollar-wallet-dropdown-divider" }),
+      /* @__PURE__ */ jsxs("button", { className: "pollar-wallet-dropdown-item pollar-danger", onClick: onLogout, children: [
         /* @__PURE__ */ jsxs(
           "svg",
           {