@pollar/react 0.11.1 → 0.11.2

package/README.md

@@ -3,14 +3,20 @@
 React bindings for [Pollar](https://pollar.xyz) — drop-in authentication UI, transaction modals, and hooks for
 Stellar and Solana applications.
 
-> **0.11.1** requires `@pollar/core@^0.11.1`. Headline feature: a **network
-> picker** (`<ChainSelect>`) across the wallet-balance, enabled-assets, send and
-> receive modals - each scopes its rows to the selected chain instead of tagging
-> every row, and the filter is local (the backend returns every chain in one
-> payload, so switching networks costs no request). Balances now format against
-> each token's own `decimals`, and a `null` balance renders as a dash rather than
-> as `0`, because `null` means the chain could not be read. The login modal shows
-> loading / error state when the app config fails to load. See the
+> **0.11.2** requires `@pollar/core@^0.11.2`. The **Transaction History modal
+> goes multichain**: the same network picker and address chip as the Balance /
+> Send modals, a server-side chain filter (pagination is server-side, so
+> switching networks refetches and resets to page 1), per-chain explorer links
+> (stellar.expert for Stellar, explorer.solana.com for Solana), and the unified
+> `{ amount, unit }` fee, so a Solana row reads "5000 lamports". The picker
+> hides itself on a single-chain app. Non-breaking.
+>
+> Earlier: **0.11.1** added the network picker (`<ChainSelect>`) across the
+> wallet-balance, enabled-assets, send and receive modals - each scopes its rows
+> to the selected chain instead of tagging every row, with a local filter (the
+> backend returns every chain in one payload). Balances format against each
+> token's own `decimals`, and a `null` balance renders as a dash rather than as
+> `0`, because `null` means the chain could not be read. See the
 > [CHANGELOG](../../CHANGELOG.md) and [UPGRADE.md](../../UPGRADE.md) for the full
 > version history before upgrading.
 
@@ -97,11 +103,11 @@ Context provider that initialises the Pollar client and makes it available to ch
 </PollarProvider>
 ```
 
-| Prop        | Type                                 | Required | Description                                                                                                                                                                                     |
-| ----------- | ------------------------------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `client`    | `PollarClient \| PollarClientConfig` | Yes      | Either a pre-built `PollarClient` (testing, reuse outside React) or a `PollarClientConfig` the provider will construct one from. **Locked at first render** — swapping after mount is ignored   |
-| `appConfig` | `PollarConfig`                       | No       | Local override of `/applications/config`. **Presence is the opt-out switch**: pass it (even `{}`) and the remote fetch is skipped. Omit it to keep the existing remote-fetch-on-mount behaviour |
-| `adapters`  | `PollarAdapters`                     | No       | Named set of `PollarAdapter` objects (e.g. Trustless Work). See below                                                                                                                           |
+| Prop        | Type                                 | Required | Description                                                                                                                                                                                                                                                                                                                                   |
+| ----------- | ------------------------------------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `client`    | `PollarClient \| PollarClientConfig` | Yes      | Either a pre-built `PollarClient` (testing, reuse outside React) or a `PollarClientConfig` the provider will construct one from. **Locked at first render** — swapping after mount is ignored                                                                                                                                                 |
+| `appConfig` | `PollarConfig`                       | No       | Local override of `/applications/config`. **Presence is the opt-out switch**: pass it (even `{}`) and the remote fetch is skipped. Omit it to keep the existing remote-fetch-on-mount behaviour. Unlike `client`, it can be added or swapped after mount — the context re-applies it (compared by value, so an inline object literal is fine) |
+| `adapters`  | `PollarAdapters`                     | No       | Named set of `PollarAdapter` objects (e.g. Trustless Work). See below                                                                                                                                                                                                                                                                         |
 
 ---
 
@@ -296,7 +302,7 @@ already wired inside `<PollarProvider>` — and most are exported in case you wa
 | `<SwapModal>`              | On-chain asset-to-asset swap: pick from/to assets and amount, quote across venues, execute (auto-trustline on the buy asset when needed); paste a custom buy token (code + issuer)                                                                                                                                                                                                       |
 | `<EarnModal>`              | Deposit/withdraw across DeFindex vaults and Blend pools: provider + opportunity selection with live APY, wallet balance, over-spend guards, and auto-trustline on deposit                                                                                                                                                                                                                |
 | `<ReceiveModal>`           | Wallet address as QR code with copy-to-clipboard (no external QR dependency required)                                                                                                                                                                                                                                                                                                    |
-| `<TxHistoryModal>`         | Paginated transaction history with auto-fetch on open and stellar.expert explorer links                                                                                                                                                                                                                                                                                                  |
+| `<TxHistoryModal>`         | Paginated multichain transaction history with auto-fetch on open. A `<ChainSelect>` in the header filters server-side (switching networks refetches and resets to page 1); rows link to their own chain's explorer (stellar.expert for Stellar, explorer.solana.com for Solana) and show the unified `{ amount, unit }` fee                                                              |
 | `<WalletBalanceModal>`     | Multichain wallet balances (Stellar, Polygon, Solana). A `<ChainSelect>` in the header picks the network and the rows are filtered to it; shows that chain's address plus a refresh button. An unreadable chain's balance renders as a dash, never as `0`. On Solana testnet each row offers a faucet hint — a devnet SOL faucet on the native row, Circle's USDC faucet on the USDC row |
 | `<EnabledAssetsModal>`     | The application's dashboard-enabled assets for the network picked in the header, with per-asset trustline state; establish/remove trustlines (Stellar only - other chains are informational)                                                                                                                                                                                             |
 | `<DistributionRulesModal>` | Manage the wallet's distribution rules                                                                                                                                                                                                                                                                                                                                                   |

package/dist/index.d.mts

@@ -535,12 +535,18 @@ interface TxHistoryModalTemplateProps {
     accentColor: string;
     txHistory: TxHistoryState;
     offset: number;
+    /** Networks the user holds a wallet on; the first one is the default. */
+    chains: WalletChain[];
+    selectedChain: WalletChain | null;
+    /** Address of the wallet on {@link selectedChain}. */
+    walletAddress: string;
+    onSelectChain: (chain: WalletChain) => void;
     onRefresh: () => void;
     onPrev: () => void;
     onNext: () => void;
     onClose: () => void;
 }
-declare function TxHistoryModalTemplate({ theme, accentColor, txHistory, offset, onRefresh, onPrev, onNext, onClose, }: TxHistoryModalTemplateProps): react_jsx_runtime.JSX.Element;
+declare function TxHistoryModalTemplate({ theme, accentColor, txHistory, offset, chains, selectedChain, walletAddress, onSelectChain, onRefresh, onPrev, onNext, onClose, }: TxHistoryModalTemplateProps): react_jsx_runtime.JSX.Element;
 
 interface WalletBalanceModalTemplateProps {
     theme: string;

package/dist/index.d.ts

@@ -535,12 +535,18 @@ interface TxHistoryModalTemplateProps {
     accentColor: string;
     txHistory: TxHistoryState;
     offset: number;
+    /** Networks the user holds a wallet on; the first one is the default. */
+    chains: WalletChain[];
+    selectedChain: WalletChain | null;
+    /** Address of the wallet on {@link selectedChain}. */
+    walletAddress: string;
+    onSelectChain: (chain: WalletChain) => void;
     onRefresh: () => void;
     onPrev: () => void;
     onNext: () => void;
     onClose: () => void;
 }
-declare function TxHistoryModalTemplate({ theme, accentColor, txHistory, offset, onRefresh, onPrev, onNext, onClose, }: TxHistoryModalTemplateProps): react_jsx_runtime.JSX.Element;
+declare function TxHistoryModalTemplate({ theme, accentColor, txHistory, offset, chains, selectedChain, walletAddress, onSelectChain, onRefresh, onPrev, onNext, onClose, }: TxHistoryModalTemplateProps): react_jsx_runtime.JSX.Element;
 
 interface WalletBalanceModalTemplateProps {
     theme: string;

package/dist/index.js

@@ -1035,7 +1035,7 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.11.1"
+        "0.11.2"
       ] })
     ] })
   ] });
@@ -4151,6 +4151,11 @@ function SendModal({ onClose }) {
       setFormError("Enter a destination address");
       return;
     }
+    const isNativeAsset = selectedAsset.type === "native";
+    if (isBaseUnitChain && !isNativeAsset && (!selectedAsset.issuer || selectedAsset.decimals === void 0)) {
+      setFormError("This token is missing its mint or decimals and cannot be sent.");
+      return;
+    }
     let sendAmount = amount;
     if (isBaseUnitChain) {
       try {
@@ -4166,8 +4171,9 @@ function SendModal({ onClose }) {
         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 }
+        // Native SOL carries no mint; an SPL token's mint rides in `issuer`,
+        // which the guard above proved is present.
+        ...isNativeAsset ? {} : { mint: selectedAsset.issuer }
       });
       return;
     }
@@ -4639,7 +4645,7 @@ function SwapModal({ onClose }) {
   const assetRecords = enabledAssets.step === "loaded" ? enabledAssets.data.assets : [];
   const isLoadingData = walletBalance.step === "loading" || enabledAssets.step === "loading";
   const sellOptions = balances.filter(
-    (b) => b.type != null && (b.type === "native" || !b.trustlineRemoved)
+    (b) => (b.chain === void 0 || b.chain === "STELLAR") && (b.type === "native" || (b.type === "credit_alphanum4" || b.type === "credit_alphanum12") && !b.trustlineRemoved)
   ).map((b) => ({
     ref: toRef(b),
     code: b.code,
@@ -4952,9 +4958,7 @@ function EarnModal({ onClose }) {
     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
-    );
+    const rec = balances.find((b) => issuer === null ? b.type === "native" : b.code === assetCode && b.issuer === issuer);
     return rec ? rec.available : null;
   })();
   const depositAssetRecord = (() => {
@@ -5631,6 +5635,12 @@ function TransactionModal({ onClose }) {
   ) });
 }
 var PAGE_SIZE = 10;
+function explorerUrlFor(chain, hash, network) {
+  if (chain === "SOLANA") {
+    return `https://explorer.solana.com/tx/${hash}${network === "testnet" ? "?cluster=devnet" : ""}`;
+  }
+  return `https://stellar.expert/explorer/${network === "testnet" ? "testnet" : "public"}/tx/${hash}`;
+}
 function StatusBadge({ status }) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-hist-item-badge", "data-status": status, children: status });
 }
@@ -5669,6 +5679,10 @@ function TxHistoryModalTemplate({
   accentColor,
   txHistory,
   offset,
+  chains,
+  selectedChain,
+  walletAddress,
+  onSelectChain,
   onRefresh,
   onPrev,
   onNext,
@@ -5744,6 +5758,11 @@ function TxHistoryModalTemplate({
             /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 2l12 12M14 2L2 14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })
           ] })
         ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ChainSelect, { value: selectedChain, options: chains, onChange: onSelectChain, disabled: isLoading }),
+        walletAddress && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-address-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-address", children: cropAddress(walletAddress) }),
+          /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: walletAddress, label: "Copy wallet address" })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-hist-list", children: [
           txHistory.step === "idle" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "Click Refresh to load transactions." }),
           isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-loading-block", children: [
@@ -5754,7 +5773,7 @@ function TxHistoryModalTemplate({
           txHistory.step === "loaded" && records.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "No transactions yet." }),
           records.map((record) => {
             const hash = typeof record.hash === "string" && record.hash.length > 0 ? record.hash : void 0;
-            const explorerUrl = hash ? `https://stellar.expert/explorer/${record.network === "testnet" ? "testnet" : "public"}/tx/${hash}` : void 0;
+            const explorerUrl = hash ? explorerUrlFor(record.chain, hash, record.network) : void 0;
             const asset = typeof record.details?.asset === "string" ? record.details.asset : void 0;
             const colon = asset ? asset.indexOf(":") : -1;
             const trustline = record.operation === "change_trust" && asset && colon > 0 ? {
@@ -5788,10 +5807,11 @@ function TxHistoryModalTemplate({
                   "\xB7 ",
                   record.details.sponsored ? "Sponsored" : "Self-paid"
                 ] }),
-                record.feeXlm && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                record.fee && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                   "\xB7 ",
-                  record.feeXlm,
-                  " XLM"
+                  record.fee.amount,
+                  " ",
+                  record.fee.unit
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-hist-item-footer", children: [
@@ -5807,7 +5827,7 @@ function TxHistoryModalTemplate({
                       href: explorerUrl,
                       target: "_blank",
                       rel: "noopener noreferrer",
-                      "aria-label": "View on Stellar Explorer",
+                      "aria-label": "View on block explorer",
                       children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 13 13", fill: "none", "aria-hidden": true, children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           "path",
@@ -5856,19 +5876,29 @@ function TxHistoryModalTemplate({
 }
 var PAGE_SIZE2 = 10;
 function TxHistoryModal({ onClose }) {
-  const { getClient, styles, txHistory } = usePollar();
+  const { getClient, styles, txHistory, wallets } = usePollar();
   const { theme = "light", accentColor = "#005DB4" } = styles;
   const [offset, setOffset] = react.useState(0);
+  const { chains } = useChains();
+  const [selectedChain, setSelectedChain] = react.useState(null);
+  react.useEffect(() => {
+    if (selectedChain === null && chains.length > 0) setSelectedChain(chains[0]);
+  }, [chains, selectedChain]);
+  const walletAddress = addressForChain(wallets, selectedChain);
   const load = react.useCallback(
-    (nextOffset) => {
+    (nextOffset, chain) => {
       setOffset(nextOffset);
-      void getClient().fetchTxHistory({ limit: PAGE_SIZE2, offset: nextOffset });
+      void getClient().fetchTxHistory({ limit: PAGE_SIZE2, offset: nextOffset, chain });
     },
     [getClient]
   );
   react.useEffect(() => {
-    load(0);
-  }, [load]);
+    if (selectedChain) load(0, selectedChain);
+  }, [selectedChain, load]);
+  const onSelectChain = (chain) => setSelectedChain(chain);
+  const paged = (nextOffset) => {
+    if (selectedChain) load(nextOffset, selectedChain);
+  };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
     TxHistoryModalTemplate,
     {
@@ -5876,9 +5906,13 @@ function TxHistoryModal({ onClose }) {
       accentColor,
       txHistory,
       offset,
-      onRefresh: () => load(offset),
-      onPrev: () => load(Math.max(0, offset - PAGE_SIZE2)),
-      onNext: () => load(offset + PAGE_SIZE2),
+      chains,
+      selectedChain,
+      walletAddress,
+      onSelectChain,
+      onRefresh: () => paged(offset),
+      onPrev: () => paged(Math.max(0, offset - PAGE_SIZE2)),
+      onNext: () => paged(offset + PAGE_SIZE2),
       onClose
     }
   ) });
@@ -6147,6 +6181,9 @@ function PollarProvider({
   );
   const [configRetry, setConfigRetry] = react.useState(0);
   const retryConfig = react.useCallback(() => setConfigRetry((n) => n + 1), []);
+  const appConfigKey = appConfigProp === void 0 ? "" : JSON.stringify(appConfigProp);
+  const appConfigPropRef = react.useRef(appConfigProp);
+  appConfigPropRef.current = appConfigProp;
   react.useEffect(() => {
     return pollarClient.onTransactionStateChange(setTransaction);
   }, [pollarClient]);
@@ -6210,7 +6247,9 @@ function PollarProvider({
     setModalErrorLogger(pollarClient.getLogger());
   }, [pollarClient]);
   react.useEffect(() => {
-    if (appConfigProp !== void 0) {
+    const localConfig = appConfigPropRef.current;
+    if (localConfig !== void 0) {
+      setResolvedConfig(localConfig ?? DEFAULT_APP_CONFIG);
       setConfigStatus("ready");
       return;
     }
@@ -6232,7 +6271,7 @@ function PollarProvider({
     return () => {
       cancelled = true;
     };
-  }, [pollarClient, appConfigProp, configRetry]);
+  }, [pollarClient, appConfigKey, configRetry]);
   const [loginModalOpen, setLoginModalOpen] = react.useState(false);
   const [transactionModalOpen, setTransactionModalOpen] = react.useState(false);
   const [kycModalOpen, setKycModalOpen] = react.useState(false);