@pollar/react 0.11.1-rc.1 → 0.11.1

package/dist/index.mjs

@@ -1,6 +1,6 @@
 'use client';
-import { AUTH_ERROR_CODES, WalletType, PollarClient, isInteractiveAuthAdapter } from '@pollar/core';
-import { forwardRef, createContext, useState, useCallback, useEffect, useRef, useMemo, useContext, Component } from 'react';
+import { AUTH_ERROR_CODES, WalletType, PollarClient, isInteractiveAuthAdapter, toBaseUnits } from '@pollar/core';
+import { forwardRef, createContext, useState, useCallback, useEffect, useMemo, useRef, useContext, Component } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { startAuthentication, startRegistration } from '@simplewebauthn/browser';
 
@@ -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.11.1-rc.1"
+        "0.11.1"
       ] })
     ] })
   ] });
@@ -1099,6 +1099,36 @@ function ModalStatusBanner({ message, status, onCancel, onRetry }) {
     status === "ERROR" && onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-status-cancel", onClick: onRetry, children: "Retry" })
   ] });
 }
+function cropAddress(address) {
+  if (address.length <= 16) return address;
+  return `${address.slice(0, 8)}...${address.slice(-8)}`;
+}
+function useStickyData(data) {
+  const lastRef = useRef(null);
+  if (data !== null) lastRef.current = data;
+  return data ?? lastRef.current;
+}
+function BusyOverlay({ label = "Loading\u2026" }) {
+  return /* @__PURE__ */ jsx("div", { className: "pollar-busy-overlay", "aria-busy": "true", "aria-live": "polite", children: /* @__PURE__ */ jsxs("div", { className: "pollar-busy-overlay-inner", children: [
+    /* @__PURE__ */ jsx("div", { className: "pollar-spinner" }),
+    /* @__PURE__ */ jsx("span", { children: label })
+  ] }) });
+}
+function Toggle({ checked, onChange, disabled = false, busy = false, label }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": label,
+      className: `pollar-switch${checked ? " pollar-switch-on" : ""}${busy ? " pollar-switch-busy" : ""}`,
+      onClick: onChange,
+      disabled: disabled || busy,
+      children: /* @__PURE__ */ jsx("span", { className: "pollar-switch-knob", children: busy && /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm pollar-spinner-current" }) })
+    }
+  );
+}
 var PERIOD_LABEL = {
   DAY: "every 24h",
   DAY_CALENDAR: "daily",
@@ -1326,9 +1356,66 @@ function DistributionRulesModal({ onClose }) {
     }
   ) });
 }
-function cropAddress(address) {
-  if (address.length <= 16) return address;
-  return `${address.slice(0, 8)}...${address.slice(-8)}`;
+var CHAIN_LABEL = {
+  STELLAR: "Stellar",
+  POLYGON: "Polygon",
+  SOLANA: "Solana"
+};
+function resolveChain(chain) {
+  return chain ?? "STELLAR";
+}
+function chainsOf(wallets, order) {
+  const held = [];
+  for (const w of wallets) {
+    const chain = resolveChain(w.chain);
+    if (!held.includes(chain)) held.push(chain);
+  }
+  if (!order || order.length === 0) return held;
+  return order.filter((c) => held.includes(c));
+}
+function addressForChain(wallets, chain) {
+  if (!chain) return "";
+  return wallets.find((w) => resolveChain(w.chain) === chain)?.address ?? "";
+}
+function ChainSelect({ label = "Network", value, options, onChange, disabled = false }) {
+  if (options.length < 2) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "pollar-send-field pollar-chain-field", children: [
+    /* @__PURE__ */ jsx("label", { className: "pollar-send-label", children: label }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: "pollar-input pollar-send-select",
+        value: value ?? "",
+        disabled,
+        onChange: (e) => onChange(e.target.value),
+        children: [
+          value === null && /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true }),
+          options.map((chain) => /* @__PURE__ */ jsx("option", { value: chain, children: CHAIN_LABEL[chain] ?? chain }, chain))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/useChains.ts
+function useChains() {
+  const { wallets, appConfig, configStatus } = usePollar();
+  const configured = appConfig?.application?.chains;
+  const ready = configStatus === "ready";
+  return useMemo(() => {
+    if (!ready) {
+      const fallback = chainsOf(wallets);
+      return {
+        chains: [],
+        primaryChain: null,
+        primaryAddress: addressForChain(wallets, fallback[0] ?? null),
+        ready: false
+      };
+    }
+    const chains = chainsOf(wallets, configured);
+    const primaryChain = chains[0] ?? null;
+    return { chains, primaryChain, primaryAddress: addressForChain(wallets, primaryChain), ready: true };
+  }, [wallets, configured, ready]);
 }
 function cssVarsFor(theme, accentColor) {
   const isDark = theme === "dark";
@@ -1353,14 +1440,18 @@ function cssVarsFor(theme, accentColor) {
 function assetKey(record) {
   return record.code + (record.issuer ?? "");
 }
+function rowKey(record) {
+  return (record.chain ?? "") + assetKey(record);
+}
 function AssetItem({
   record,
   busy,
   disabled,
   onToggle
 }) {
-  const established = record.trustlineEstablished;
+  const established = record.trustlineEstablished ?? false;
   const isNative = record.type === "native";
+  const isStellar = resolveChain(record.chain) === "STELLAR";
   return /* @__PURE__ */ jsxs("div", { className: "pollar-asset-item", children: [
     /* @__PURE__ */ jsxs("div", { className: "pollar-asset-info", children: [
       /* @__PURE__ */ jsxs("div", { className: "pollar-asset-code-row", children: [
@@ -1368,17 +1459,22 @@ function AssetItem({
         record.enabledInApp && /* @__PURE__ */ jsx("span", { className: "pollar-asset-tag", children: "App" })
       ] }),
       record.name && /* @__PURE__ */ jsx("span", { className: "pollar-asset-name", children: record.name }),
-      !isNative && record.enabledInApp && /* @__PURE__ */ jsx("span", { className: "pollar-asset-sponsor", children: record.sponsored ? "Reserve sponsored by the app" : "You pay the reserve (~0.5 XLM)" })
+      record.issuer && /* @__PURE__ */ jsxs("span", { className: "pollar-issuer", children: [
+        /* @__PURE__ */ jsx("span", { className: "pollar-issuer-addr", children: cropAddress(record.issuer) }),
+        /* @__PURE__ */ jsx(CopyButton, { value: record.issuer, label: "Copy issuer address", className: "pollar-copy-btn-sm" })
+      ] }),
+      isStellar && !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 ? " pollar-established" : ""}`, children: established ? "Trustline active" : "Needs trustline" }),
-      !isNative && /* @__PURE__ */ jsx(
-        "button",
+    isStellar && /* @__PURE__ */ jsxs("div", { className: "pollar-asset-actions", children: [
+      /* @__PURE__ */ jsx("span", { className: "pollar-asset-trustline-label", children: "Trustline" }),
+      /* @__PURE__ */ jsx(
+        Toggle,
         {
-          className: `pollar-asset-btn${established ? " pollar-danger" : ""}`,
-          onClick: () => onToggle(record),
-          disabled: busy || disabled,
-          children: busy ? /* @__PURE__ */ jsx("span", { className: "pollar-spinner pollar-spinner-sm pollar-spinner-current" }) : established ? "Disable" : "Enable"
+          checked: established,
+          busy,
+          disabled: isNative || disabled,
+          onChange: () => onToggle(record),
+          label: `${established ? "Disable" : "Enable"} ${record.code} trustline`
         }
       )
     ] })
@@ -1389,6 +1485,9 @@ function EnabledAssetsModalTemplate({
   accentColor,
   enabledAssets,
   walletAddress,
+  chains,
+  selectedChain,
+  onSelectChain,
   busyKey,
   actionError,
   onRefresh,
@@ -1398,8 +1497,10 @@ function EnabledAssetsModalTemplate({
 }) {
   const cssVars = cssVarsFor(theme, accentColor);
   const isLoading = enabledAssets.step === "loading";
-  const data = enabledAssets.step === "loaded" ? enabledAssets.data : null;
+  const data = useStickyData(enabledAssets.step === "loaded" ? enabledAssets.data : null);
   const busy = busyKey !== null;
+  const assets = (data?.assets ?? []).filter((a) => resolveChain(a.chain) === selectedChain);
+  const isStellarSelected = selectedChain === "STELLAR";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1408,8 +1509,9 @@ function EnabledAssetsModalTemplate({
       style: cssVars,
       onClick: (e) => e.stopPropagation(),
       children: [
+        isLoading && data && /* @__PURE__ */ jsx(BusyOverlay, { label: "Refreshing assets\u2026" }),
         /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header", children: [
-          /* @__PURE__ */ jsx("h2", { className: "pollar-modal-title", children: "Trustlines" }),
+          /* @__PURE__ */ jsx("h2", { className: "pollar-modal-title", children: "Assets" }),
           /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header-actions", children: [
             /* @__PURE__ */ jsx(
               "button",
@@ -1446,8 +1548,12 @@ function EnabledAssetsModalTemplate({
             /* @__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__ */ jsxs("div", { className: "pollar-loading-block", children: [
+        /* @__PURE__ */ jsx(ChainSelect, { value: selectedChain, options: chains, onChange: onSelectChain, disabled: isLoading || busy }),
+        walletAddress && /* @__PURE__ */ jsxs("div", { className: "pollar-address-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "pollar-address", children: cropAddress(walletAddress) }),
+          /* @__PURE__ */ jsx(CopyButton, { value: walletAddress, label: "Copy wallet address" })
+        ] }),
+        isLoading && !data && /* @__PURE__ */ jsxs("div", { className: "pollar-loading-block", children: [
           /* @__PURE__ */ jsx("div", { className: "pollar-spinner" }),
           /* @__PURE__ */ jsx("span", { children: "Loading\u2026" })
         ] }),
@@ -1458,8 +1564,8 @@ function EnabledAssetsModalTemplate({
           data.network,
           "."
         ] }),
-        data && data.assets.length === 0 && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "No trustlines found." }),
-        data && data.assets.length > 0 && /* @__PURE__ */ jsx("div", { className: "pollar-asset-list", children: data.assets.map((a) => /* @__PURE__ */ jsx(
+        data && assets.length === 0 && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "No assets found on this network." }),
+        data && assets.length > 0 && /* @__PURE__ */ jsx("div", { className: "pollar-asset-list", children: assets.map((a) => /* @__PURE__ */ jsx(
           AssetItem,
           {
             record: a,
@@ -1467,9 +1573,9 @@ function EnabledAssetsModalTemplate({
             disabled: busy && busyKey !== assetKey(a),
             onToggle: onToggleTrustline
           },
-          assetKey(a)
+          rowKey(a)
         )) }),
-        /* @__PURE__ */ jsx("button", { className: "pollar-asset-add-custom", onClick: onAddCustom, disabled: busy, children: "+ Add custom trustline" }),
+        isStellarSelected && /* @__PURE__ */ jsx("button", { className: "pollar-asset-add-custom", onClick: onAddCustom, disabled: busy, children: "+ Add custom trustline" }),
         /* @__PURE__ */ jsx(PollarModalFooter, {})
       ]
     }
@@ -1583,9 +1689,14 @@ function assetKey2(record) {
   return record.code + (record.issuer ?? "");
 }
 function EnabledAssetsModal({ onClose }) {
-  const { enabledAssets, refreshAssets, setTrustline, wallet, styles } = usePollar();
-  const walletAddress = wallet?.address ?? "";
+  const { enabledAssets, refreshAssets, setTrustline, wallets, styles } = usePollar();
   const { theme = "light", accentColor = "#005DB4" } = styles;
+  const { chains } = useChains();
+  const [selectedChain, setSelectedChain] = useState(null);
+  useEffect(() => {
+    if (selectedChain === null && chains.length > 0) setSelectedChain(chains[0]);
+  }, [chains, selectedChain]);
+  const walletAddress = addressForChain(wallets, selectedChain);
   const [view, setView] = useState("list");
   const [busyKey, setBusyKey] = useState(null);
   const [actionError, setActionError] = useState(null);
@@ -1614,7 +1725,7 @@ function EnabledAssetsModal({ onClose }) {
       void runAction(
         assetKey2(record),
         { code: record.code, issuer: record.issuer ?? "" },
-        { ...removing ? { limit: "0" } : {}, sponsored: record.sponsored ?? false }
+        { ...removing ? { limit: "0" } : {} }
       );
     },
     [runAction]
@@ -1624,7 +1735,7 @@ function EnabledAssetsModal({ onClose }) {
       const ok = await runAction(
         "custom",
         { code: input.code, issuer: input.issuer },
-        { ...input.limit ? { limit: input.limit } : {}, sponsored: false }
+        { ...input.limit ? { limit: input.limit } : {}, skipSponsorship: true }
       );
       if (ok) setView("list");
     },
@@ -1637,6 +1748,9 @@ function EnabledAssetsModal({ onClose }) {
       accentColor,
       enabledAssets,
       walletAddress,
+      chains,
+      selectedChain,
+      onSelectChain: setSelectedChain,
       busyKey,
       actionError,
       onRefresh: () => refreshAssets(),
@@ -3355,10 +3469,18 @@ var QRCode = forwardRef(function QRCode2({ bgColor = "#FFFFFF", fgColor = "#0000
     }
   );
 });
+var CHAIN_NAME = {
+  STELLAR: "Stellar",
+  POLYGON: "Polygon",
+  SOLANA: "Solana"
+};
 function ReceiveModalTemplate({
   theme,
   accentColor,
   walletAddress,
+  chains,
+  selectedChain,
+  onSelectChain,
   copied,
   onCopy,
   onClose
@@ -3381,6 +3503,7 @@ function ReceiveModalTemplate({
     "--pollar-input-border-radius": "0.5rem",
     "--pollar-card-border-radius": "10px"
   };
+  const chainName = selectedChain ? CHAIN_NAME[selectedChain] ?? selectedChain : "wallet";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3393,9 +3516,16 @@ function ReceiveModalTemplate({
           /* @__PURE__ */ jsx("h2", { className: "pollar-modal-title", children: "Receive" }),
           /* @__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" }) }) }) })
         ] }),
+        /* @__PURE__ */ jsx(ChainSelect, { value: selectedChain, options: chains, onChange: onSelectChain }),
         walletAddress ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("div", { className: "pollar-receive-qr", children: /* @__PURE__ */ jsx(QRCode, { value: walletAddress, size: 180, fgColor: isDark ? "#ffffff" : "#111827", bgColor: "transparent" }) }),
-          /* @__PURE__ */ jsx("p", { className: "pollar-receive-instructions", children: "Share your Stellar address to receive any asset. Only send Stellar assets to this address." }),
+          /* @__PURE__ */ jsxs("p", { className: "pollar-receive-instructions", children: [
+            "Share your ",
+            chainName,
+            " address to receive any asset. Only send ",
+            chainName,
+            " assets to this address. Funds sent from another network are lost."
+          ] }),
           /* @__PURE__ */ jsxs("div", { className: "pollar-receive-address-row", children: [
             /* @__PURE__ */ jsx("span", { className: "pollar-receive-address", children: walletAddress }),
             /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-receive-copy-btn", onClick: onCopy, "aria-label": "Copy address", children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3436,11 +3566,16 @@ function ReceiveModalTemplate({
   );
 }
 function ReceiveModal({ onClose }) {
-  const { wallet, styles } = usePollar();
-  const walletAddress = wallet?.address ?? "";
+  const { wallets, styles } = usePollar();
   const { theme = "light", accentColor = "#005DB4" } = styles;
   const [copied, setCopied] = useState(false);
   const copyTimerRef = useRef(null);
+  const { chains } = useChains();
+  const [selectedChain, setSelectedChain] = useState(null);
+  useEffect(() => {
+    if (selectedChain === null && chains.length > 0) setSelectedChain(chains[0]);
+  }, [chains, selectedChain]);
+  const walletAddress = addressForChain(wallets, selectedChain);
   useEffect(
     () => () => {
       if (copyTimerRef.current !== null) clearTimeout(copyTimerRef.current);
@@ -3464,6 +3599,12 @@ function ReceiveModal({ onClose }) {
       theme,
       accentColor,
       walletAddress,
+      chains,
+      selectedChain,
+      onSelectChain: (chain) => {
+        setCopied(false);
+        setSelectedChain(chain);
+      },
       copied,
       onCopy: handleCopy,
       onClose
@@ -3709,6 +3850,7 @@ function TxStatusView({
   ] });
 }
 function formatBalance(balance) {
+  if (balance === null) return "\u2014";
   const n = parseFloat(balance);
   return isNaN(n) ? balance : n.toLocaleString(void 0, { maximumFractionDigits: 7 });
 }
@@ -3722,6 +3864,11 @@ function SendModalTemplate({
   txTitle,
   assets,
   selectedAsset,
+  chains,
+  selectedChain,
+  walletAddress,
+  canSendOnChain,
+  onSelectChain,
   amount,
   destination,
   formError,
@@ -3765,7 +3912,7 @@ function SendModalTemplate({
     "--pollar-card-border-radius": "10px"
   };
   const selectedKey = selectedAsset ? assetKey3(selectedAsset) : "";
-  const canSubmit = !!selectedAsset && !!amount && !!destination.trim() && !isLoadingBalance;
+  const canSubmit = canSendOnChain && !!selectedAsset && !!amount && !!destination.trim() && !isLoadingBalance;
   const title = step === "form" ? "Send" : txTitle;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -3817,6 +3964,12 @@ function SendModalTemplate({
           ] })
         ] }),
         step === "form" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ChainSelect, { value: selectedChain, options: chains, onChange: onSelectChain, disabled: isLoadingBalance }),
+          walletAddress && /* @__PURE__ */ jsxs("div", { className: "pollar-address-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "pollar-address", children: cropAddress(walletAddress) }),
+            /* @__PURE__ */ jsx(CopyButton, { value: walletAddress, label: "Copy wallet address" })
+          ] }),
+          !canSendOnChain && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "Sending is not available on this network yet." }),
           /* @__PURE__ */ jsx(
             AssetSelect,
             {
@@ -3827,7 +3980,9 @@ function SendModalTemplate({
               options: assets.map((a) => ({
                 key: assetKey3(a),
                 code: a.code,
-                available: a.available,
+                // Unreadable (null) drops the "— X available" suffix instead of
+                // claiming a zero balance.
+                available: a.available ?? void 0,
                 enabledInApp: a.enabledInApp
               })),
               onChange: (key) => {
@@ -3906,9 +4061,11 @@ function SendModal({ onClose }) {
     walletBalance,
     refreshWalletBalance,
     buildTx,
+    sendPayment,
     signAndSubmitTx,
     tx: transaction,
     wallet,
+    wallets,
     network,
     styles
   } = usePollar();
@@ -3922,6 +4079,14 @@ function SendModal({ onClose }) {
   const [copied, setCopied] = useState(false);
   const [formError, setFormError] = useState("");
   const copyTimerRef = useRef(null);
+  const { chains } = useChains();
+  const [selectedChain, setSelectedChain] = useState(null);
+  useEffect(() => {
+    if (selectedChain === null && chains.length > 0) setSelectedChain(chains[0]);
+  }, [chains, selectedChain]);
+  const walletAddress = addressForChain(wallets, selectedChain);
+  const canSendOnChain = selectedChain === "STELLAR" || selectedChain === "SOLANA";
+  const isBaseUnitChain = selectedChain === "SOLANA";
   useEffect(() => {
     void refreshWalletBalance();
   }, [refreshWalletBalance]);
@@ -3932,18 +4097,24 @@ function SendModal({ onClose }) {
     []
   );
   const balanceData = walletBalance.step === "loaded" ? walletBalance.data : null;
-  const allAssets = (balanceData?.balances ?? []).filter((b) => b.chain === void 0 || b.chain === "STELLAR");
+  const allAssets = (balanceData?.balances ?? []).filter((b) => resolveChain(b.chain) === selectedChain);
   const sortedAssets = [
     ...allAssets.filter((b) => b.enabledInApp),
-    ...allAssets.filter((b) => !b.enabledInApp && (b.type === "native" || parseFloat(b.balance) > 0))
+    // An unreadable balance (null) is not a positive one, so it stays out.
+    ...allAssets.filter((b) => !b.enabledInApp && (b.type === "native" || parseFloat(b.balance ?? "0") > 0))
   ];
   useEffect(() => {
+    const stranded = selectedAsset !== null && resolveChain(selectedAsset.chain) !== selectedChain;
+    if (stranded) {
+      setSelectedAsset(sortedAssets[0] ?? null);
+      return;
+    }
     if (!selectedAsset && sortedAssets.length > 0) setSelectedAsset(sortedAssets[0]);
-  }, [sortedAssets, selectedAsset]);
+  }, [sortedAssets, selectedAsset, selectedChain]);
   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";
-  const explorerUrl = hash ? `https://stellar.expert/explorer/${explorerNetwork}/tx/${hash}` : null;
+  const explorerUrl = !hash ? null : selectedChain === "SOLANA" ? `https://explorer.solana.com/tx/${hash}${explorerNetwork === "testnet" ? "?cluster=devnet" : ""}` : `https://stellar.expert/explorer/${explorerNetwork}/tx/${hash}`;
   const IN_FLIGHT_STEPS3 = [
     "building",
     "signing",
@@ -3957,6 +4128,10 @@ function SendModal({ onClose }) {
   const txTitle = isInProgress ? "Sending\u2026" : transaction.step === "success" ? "Sent!" : transaction.step === "error" ? "Send failed" : "Confirm Send";
   async function handleSubmit() {
     setFormError("");
+    if (!canSendOnChain) {
+      setFormError("Sending is not available on this network yet.");
+      return;
+    }
     if (!selectedAsset) {
       setFormError("Select an asset");
       return;
@@ -3966,7 +4141,7 @@ function SendModal({ onClose }) {
       setFormError("Enter a valid amount");
       return;
     }
-    if (parsed > parseFloat(selectedAsset.available)) {
+    if (parsed > parseFloat(selectedAsset.available ?? "0")) {
       setFormError("Insufficient balance");
       return;
     }
@@ -3974,7 +4149,26 @@ function SendModal({ onClose }) {
       setFormError("Enter a destination address");
       return;
     }
+    let sendAmount = amount;
+    if (isBaseUnitChain) {
+      try {
+        sendAmount = toBaseUnits(amount, selectedAsset.decimals ?? 9);
+      } catch (e) {
+        setFormError(e instanceof Error ? e.message : "Invalid amount");
+        return;
+      }
+    }
     setStep("tx");
+    if (selectedChain === "SOLANA") {
+      await sendPayment({
+        chain: "SOLANA",
+        destination: destination.trim(),
+        amount: sendAmount,
+        // Native SOL carries no mint; an SPL token's mint rides in `issuer`.
+        ...selectedAsset.type === "native" ? {} : { mint: selectedAsset.issuer ?? null }
+      });
+      return;
+    }
     await buildTx("payment", { destination: destination.trim(), amount, asset: assetParam(selectedAsset) });
   }
   function handleSignAndSend() {
@@ -4012,6 +4206,11 @@ function SendModal({ onClose }) {
       txTitle,
       assets: sortedAssets,
       selectedAsset,
+      chains,
+      selectedChain,
+      walletAddress,
+      canSendOnChain,
+      onSelectChain: setSelectedChain,
       amount,
       destination,
       formError,
@@ -4439,10 +4638,18 @@ function SwapModal({ onClose }) {
   const isLoadingData = walletBalance.step === "loading" || enabledAssets.step === "loading";
   const sellOptions = balances.filter(
     (b) => b.type != null && (b.type === "native" || !b.trustlineRemoved)
-  ).map((b) => ({ ref: toRef(b), code: b.code, issuer: b.issuer, available: b.available, enabledInApp: b.enabledInApp }));
+  ).map((b) => ({
+    ref: toRef(b),
+    code: b.code,
+    issuer: b.issuer,
+    available: b.available ?? void 0,
+    enabledInApp: b.enabledInApp
+  }));
   const buyKeyOfSell = selectedSell ? `${selectedSell.code}:${selectedSell.issuer ?? "native"}` : "";
   const optKey = (o) => `${o.code}:${o.issuer ?? "native"}`;
-  const enabledBuy = assetRecords.map((a) => ({
+  const enabledBuy = assetRecords.filter(
+    (a) => (a.chain === void 0 || a.chain === "STELLAR") && (a.type === "native" || a.type === "credit_alphanum4" || a.type === "credit_alphanum12")
+  ).map((a) => ({
     ref: toRef(a),
     code: a.code,
     issuer: a.issuer,
@@ -4751,7 +4958,7 @@ function EarnModal({ onClose }) {
   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
+      (a) => (a.chain === void 0 || a.chain === "STELLAR") && a.code === assetCode && a.issuer === selectedOpportunity.asset.issuer
     );
   })();
   const depositNeedsTrustline = tab === "deposit" && !smartUnsupported && !!selectedOpportunity?.asset.issuer && !depositAssetRecord?.trustlineEstablished;
@@ -4807,10 +5014,7 @@ function EarnModal({ onClose }) {
     }
     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
-      );
+      const tl = await setTrustline({ code: assetCode, issuer: selectedOpportunity.asset.issuer });
       if (tl.status === "error") {
         setFormError(`Trustline for ${assetCode} failed: ${tl.details ?? "unknown error"}`);
         setStep("form");
@@ -5677,40 +5881,37 @@ function TxHistoryModal({ onClose }) {
     }
   ) });
 }
-function formatBalance2(balance) {
+function formatBalance2(balance, decimals = 7) {
+  if (balance === null) return "\u2014";
+  const digits = Math.min(decimals, 7);
   const n = parseFloat(balance);
-  return isNaN(n) ? balance : n.toLocaleString(void 0, { minimumFractionDigits: 7, maximumFractionDigits: 7 });
-}
-function cropAddress2(address) {
-  if (address.length <= 16) return address;
-  return `${address.slice(0, 8)}...${address.slice(-8)}`;
+  return isNaN(n) ? balance : n.toLocaleString(void 0, { minimumFractionDigits: digits, maximumFractionDigits: digits });
 }
-var CHAIN_TAG = {
-  STELLAR: { label: "Stellar", color: "#7d00ff" },
-  POLYGON: { label: "Polygon", color: "#8247e5" },
-  SOLANA: { label: "Solana", color: "#14f195" }
-};
-function ChainTag({ chain }) {
-  const tag = CHAIN_TAG[chain] ?? { label: chain, color: "#6b7280" };
-  return /* @__PURE__ */ jsx("span", { className: "pollar-bal-chain-tag", style: { "--pollar-chain-color": tag.color }, children: tag.label });
+function faucetFor(record) {
+  if (record.type === "native") return { url: "https://faucet.solana.com/", label: "Get test SOL" };
+  if (record.code === "USDC") return { url: "https://faucet.circle.com/", label: "Get test USDC" };
+  return null;
 }
-function BalanceItem({ record, showChain }) {
+function BalanceItem({ record, faucet }) {
   const balanceDiffers = record.balance !== record.available;
   return /* @__PURE__ */ jsxs("div", { className: "pollar-bal-item", children: [
     /* @__PURE__ */ jsxs("div", { className: "pollar-bal-asset-info", children: [
-      /* @__PURE__ */ jsxs("span", { className: "pollar-bal-asset-code-row", children: [
-        /* @__PURE__ */ jsx("span", { className: "pollar-bal-asset", children: record.code }),
-        showChain && record.chain && /* @__PURE__ */ jsx(ChainTag, { chain: record.chain })
-      ] }),
-      record.issuer && /* @__PURE__ */ jsxs("span", { className: "pollar-bal-issuer", children: [
-        /* @__PURE__ */ jsx("span", { className: "pollar-bal-issuer-addr", children: cropAddress2(record.issuer) }),
+      /* @__PURE__ */ jsx("span", { className: "pollar-bal-asset-code-row", children: /* @__PURE__ */ jsx("span", { className: "pollar-bal-asset", children: record.code }) }),
+      record.issuer && /* @__PURE__ */ jsxs("span", { className: "pollar-issuer", children: [
+        /* @__PURE__ */ jsx("span", { className: "pollar-issuer-addr", children: cropAddress(record.issuer) }),
         /* @__PURE__ */ jsx(CopyButton, { value: record.issuer, label: "Copy issuer address", className: "pollar-copy-btn-sm" })
+      ] }),
+      faucet && /* @__PURE__ */ jsxs("span", { className: "pollar-bal-faucet-hint", children: [
+        "Need more?",
+        " ",
+        /* @__PURE__ */ jsx("a", { href: faucet.url, target: "_blank", rel: "noopener noreferrer", children: faucet.label }),
+        /* @__PURE__ */ jsx("span", { className: "pollar-bal-faucet-net", children: " (devnet)" })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "pollar-bal-amounts", children: [
-      /* @__PURE__ */ jsx("span", { className: "pollar-bal-amount", children: formatBalance2(record.balance) }),
+      /* @__PURE__ */ jsx("span", { className: "pollar-bal-amount", children: formatBalance2(record.balance, record.decimals) }),
       balanceDiffers && /* @__PURE__ */ jsxs("span", { className: "pollar-bal-available", children: [
-        formatBalance2(record.available),
+        formatBalance2(record.available, record.decimals),
         " available"
       ] })
     ] })
@@ -5721,6 +5922,10 @@ function WalletBalanceModalTemplate({
   accentColor,
   walletBalance,
   walletAddress,
+  chains,
+  selectedChain,
+  network,
+  onSelectChain,
   onRefresh,
   onClose
 }) {
@@ -5743,8 +5948,11 @@ function WalletBalanceModalTemplate({
     "--pollar-card-border-radius": "10px"
   };
   const isLoading = walletBalance.step === "loading";
-  const data = walletBalance.step === "loaded" ? walletBalance.data : null;
+  const data = useStickyData(walletBalance.step === "loaded" ? walletBalance.data : null);
+  const balances = (data?.balances ?? []).filter((b) => resolveChain(b.chain) === selectedChain);
+  const showFaucets = selectedChain === "SOLANA" && network === "testnet";
   return /* @__PURE__ */ jsxs("div", { className: "pollar-modal-card pollar-bal-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+    isLoading && data && /* @__PURE__ */ jsx(BusyOverlay, { label: "Refreshing balances\u2026" }),
     /* @__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: [
@@ -5783,11 +5991,12 @@ function WalletBalanceModalTemplate({
         /* @__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__ */ jsxs("div", { className: "pollar-bal-address-row", children: [
-      /* @__PURE__ */ jsx("span", { className: "pollar-bal-address", children: cropAddress2(walletAddress) }),
+    /* @__PURE__ */ jsx(ChainSelect, { value: selectedChain, options: chains, onChange: onSelectChain, disabled: isLoading }),
+    walletAddress && /* @__PURE__ */ jsxs("div", { className: "pollar-address-row", children: [
+      /* @__PURE__ */ jsx("span", { className: "pollar-address", children: cropAddress(walletAddress) }),
       /* @__PURE__ */ jsx(CopyButton, { value: walletAddress, label: "Copy wallet address" })
     ] }),
-    isLoading && /* @__PURE__ */ jsxs("div", { className: "pollar-loading-block", children: [
+    isLoading && !data && /* @__PURE__ */ jsxs("div", { className: "pollar-loading-block", children: [
       /* @__PURE__ */ jsx("div", { className: "pollar-spinner" }),
       /* @__PURE__ */ jsx("span", { children: "Loading\u2026" })
     ] }),
@@ -5797,15 +6006,27 @@ function WalletBalanceModalTemplate({
       data.network,
       "."
     ] }),
-    data?.exists && data.balances.length === 0 && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "No balances found." }),
-    data?.exists && data.balances.length > 0 && /* @__PURE__ */ jsx("div", { className: "pollar-bal-list", children: data.balances.map((b) => /* @__PURE__ */ jsx(BalanceItem, { record: b, showChain: data.multichain === true }, (b.chain ?? "") + b.code + (b.issuer ?? ""))) }),
+    data?.exists && balances.length === 0 && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "No balances found on this network." }),
+    data?.exists && balances.length > 0 && /* @__PURE__ */ jsx("div", { className: "pollar-bal-list", children: balances.map((b) => /* @__PURE__ */ jsx(
+      BalanceItem,
+      {
+        record: b,
+        faucet: showFaucets ? faucetFor(b) : null
+      },
+      (b.chain ?? "") + b.code + (b.issuer ?? "")
+    )) }),
     /* @__PURE__ */ jsx(PollarModalFooter, {})
   ] });
 }
 function WalletBalanceModal({ onClose }) {
-  const { walletBalance, refreshWalletBalance, wallet, styles } = usePollar();
-  const walletAddress = wallet?.address ?? "";
+  const { walletBalance, refreshWalletBalance, wallets, network, styles } = usePollar();
   const { theme = "light", accentColor = "#005DB4" } = styles;
+  const { chains } = useChains();
+  const [selectedChain, setSelectedChain] = useState(null);
+  useEffect(() => {
+    if (selectedChain === null && chains.length > 0) setSelectedChain(chains[0]);
+  }, [chains, selectedChain]);
+  const walletAddress = addressForChain(wallets, selectedChain);
   useEffect(() => {
     void refreshWalletBalance();
   }, [refreshWalletBalance]);
@@ -5816,6 +6037,10 @@ function WalletBalanceModal({ onClose }) {
       accentColor,
       walletBalance,
       walletAddress,
+      chains,
+      selectedChain,
+      network,
+      onSelectChain: setSelectedChain,
       onRefresh: () => refreshWalletBalance(),
       onClose
     }
@@ -5875,7 +6100,7 @@ var browserPasskeySigner = async ({ credentialId, challenge }) => {
   };
 };
 var DEFAULT_APP_CONFIG = {
-  application: { name: "" },
+  application: { name: "", network: "testnet", chains: [] },
   styles: {}
 };
 function sessionsEqual(a, b) {
@@ -6032,6 +6257,7 @@ function PollarProvider({
     return {
       // session
       wallet: pollarClient.getWallet(),
+      wallets: pollarClient.getWallets(),
       isAuthenticated: !!walletAddress,
       verified,
       // client
@@ -6048,6 +6274,7 @@ function PollarProvider({
       submitTx: (signedXdr) => pollarClient.submitTx(signedXdr),
       buildAndSignAndSubmitTx: (operation, params, options) => pollarClient.buildAndSignAndSubmitTx(operation, params, options),
       runTx: (operation, params, options) => pollarClient.runTx(operation, params, options),
+      sendPayment: (params) => pollarClient.sendPayment(params),
       openTxModal: () => setTransactionModalOpen(true),
       // tx history
       txHistory,
@@ -6532,7 +6759,8 @@ function WalletButton() {
     openDistributionRulesModal,
     tx: transaction
   } = usePollar();
-  const walletAddress = wallet?.address ?? "";
+  const { primaryAddress } = useChains();
+  const walletAddress = primaryAddress || (wallet?.address ?? "");
   const walletType = wallet?.custody === "external" ? wallet.provider : null;
   const [open, setOpen] = useState(false);
   const [copied, setCopied] = useState(false);
@@ -6654,6 +6882,6 @@ function WalletButton() {
   );
 }
 
-export { DistributionRulesModal, DistributionRulesModalTemplate, EarnModal, EnabledAssetsModal, EnabledAssetsModalTemplate, KycModal, KycModalTemplate, KycStatus, LoginModalTemplate, PollarProvider, RampWidget, RampWidgetTemplate, ReceiveModal, ReceiveModalTemplate, RouteDisplay, SendModal, SendModalTemplate, SessionsModal, SessionsModalTemplate, SwapModal, SwapModalTemplate, TransactionModalTemplate, TxHistoryModalTemplate, TxStatusView, WalletBalanceModal, WalletBalanceModalTemplate, WalletButton, WalletButtonTemplate, createPollarAdapterHook, usePollar };
+export { ChainSelect, DistributionRulesModal, DistributionRulesModalTemplate, EarnModal, EnabledAssetsModal, EnabledAssetsModalTemplate, KycModal, KycModalTemplate, KycStatus, LoginModalTemplate, PollarProvider, RampWidget, RampWidgetTemplate, ReceiveModal, ReceiveModalTemplate, RouteDisplay, SendModal, SendModalTemplate, SessionsModal, SessionsModalTemplate, SwapModal, SwapModalTemplate, TransactionModalTemplate, TxHistoryModalTemplate, TxStatusView, WalletBalanceModal, WalletBalanceModalTemplate, WalletButton, WalletButtonTemplate, addressForChain, chainsOf, createPollarAdapterHook, resolveChain, useChains, usePollar };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map