@pollar/react 0.11.1 → 0.11.3-rc.1

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.css

@@ -15,7 +15,7 @@
 .pollar-overlay {
   position: fixed;
   inset: 0;
-  z-index: 50;
+  z-index: var(--pollar-overlay-z-index, 50);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -27,7 +27,7 @@
 .pollar-modal-card {
   position: relative;
   width: 100%;
-  border-radius: 1rem;
+  border-radius: var(--pollar-modal-border-radius, 1rem);
   border: 1px solid var(--pollar-border);
   padding: var(--pollar-modal-padding, 1.75rem);
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
@@ -130,7 +130,7 @@
   border: none;
   border-radius: var(--pollar-buttons-border-radius, 0.5rem);
   background-color: var(--pollar-accent);
-  color: #fff;
+  color: var(--pollar-btn-primary-fg, #fff);
   font-size: 0.9375rem;
   font-weight: 700;
   cursor: pointer;
@@ -152,8 +152,8 @@
   padding: 0 1rem;
   border: 1px solid var(--pollar-border);
   border-radius: var(--pollar-buttons-border-radius, 0.5rem);
-  background-color: transparent;
-  color: var(--pollar-muted);
+  background-color: var(--pollar-btn-secondary-bg, transparent);
+  color: var(--pollar-btn-secondary-fg, var(--pollar-muted));
   font-size: 0.9375rem;
   font-weight: 600;
   cursor: pointer;
@@ -180,8 +180,8 @@
   border-width: 2px;
 }
 .pollar-btn-primary .pollar-spinner {
-  border-color: rgba(255, 255, 255, 0.35);
-  border-top-color: #fff;
+  border-color: color-mix(in srgb, var(--pollar-btn-primary-fg, #fff) 35%, transparent);
+  border-top-color: var(--pollar-btn-primary-fg, #fff);
 }
 .pollar-spinner-current {
   border-color: color-mix(in srgb, currentColor 25%, transparent);
@@ -760,7 +760,7 @@
   padding: 0.875rem 1rem;
   border-radius: var(--pollar-card-border-radius, 10px);
   border: 1px solid var(--pollar-border);
-  background-color: var(--pollar-input-bg);
+  background-color: var(--pollar-btn-secondary-bg, var(--pollar-input-bg));
   cursor: pointer;
   transition: all 0.15s;
   box-sizing: border-box;
@@ -776,7 +776,7 @@
 .pollar-kyc-provider-name {
   font-size: 0.9375rem;
   font-weight: 600;
-  color: var(--pollar-text);
+  color: var(--pollar-btn-secondary-fg, var(--pollar-text));
 }
 .pollar-kyc-provider-flow {
   font-size: 0.75rem;
@@ -1092,7 +1092,7 @@
   gap: 0.75rem;
   border-radius: var(--pollar-buttons-border-radius, 0.5rem);
   border: 1px solid var(--pollar-border);
-  background-color: var(--pollar-input-bg);
+  background-color: var(--pollar-btn-secondary-bg, var(--pollar-input-bg));
   padding: 0 1rem;
   cursor: pointer;
   transition: all 0.15s;
@@ -1112,7 +1112,7 @@
 .pollar-social-btn-text {
   font-size: 1rem;
   font-weight: 600;
-  color: var(--pollar-text);
+  color: var(--pollar-btn-secondary-fg, var(--pollar-text));
 }
 .pollar-wallet-section {
   display: flex;
@@ -1135,8 +1135,8 @@
   padding: 0 1rem;
   border-radius: var(--pollar-buttons-border-radius, 0.5rem);
   border: 1px solid var(--pollar-border);
-  background-color: var(--pollar-input-bg);
-  color: var(--pollar-text);
+  background-color: var(--pollar-btn-secondary-bg, var(--pollar-input-bg));
+  color: var(--pollar-btn-secondary-fg, var(--pollar-text));
   font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
@@ -1185,8 +1185,8 @@
   gap: 0.75rem;
   border-radius: var(--pollar-buttons-border-radius, 0.5rem);
   border: 1px solid var(--pollar-border);
-  background-color: var(--pollar-input-bg);
-  color: var(--pollar-text);
+  background-color: var(--pollar-btn-secondary-bg, var(--pollar-input-bg));
+  color: var(--pollar-btn-secondary-fg, var(--pollar-text));
   padding: 0 1rem;
   font-size: 1rem;
   font-weight: 500;
@@ -1214,8 +1214,8 @@
   gap: 0.75rem;
   border-radius: var(--pollar-buttons-border-radius, 0.5rem);
   border: 1px solid var(--pollar-border);
-  background-color: var(--pollar-input-bg);
-  color: var(--pollar-text);
+  background-color: var(--pollar-btn-secondary-bg, var(--pollar-input-bg));
+  color: var(--pollar-btn-secondary-fg, var(--pollar-text));
   padding: 0 1rem;
   font-size: 1rem;
   font-weight: 500;
@@ -1297,6 +1297,33 @@
   font-size: var(--pollar-modal-subtitle-size, 0.9rem);
   color: var(--pollar-muted);
 }
+.pollar-ramp-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1.25rem;
+}
+.pollar-ramp-steps-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--pollar-muted);
+}
+.pollar-ramp-steps-track {
+  display: flex;
+  gap: 0.375rem;
+}
+.pollar-ramp-steps-segment {
+  flex: 1;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--pollar-border);
+  transition: background-color 0.2s;
+}
+.pollar-ramp-steps-segment[data-done] {
+  background: var(--pollar-accent);
+}
 .pollar-ramp-field {
   margin-bottom: 1rem;
 }
@@ -1331,6 +1358,17 @@
   font-size: 0.75rem;
   color: var(--pollar-error-text, #dc2626);
 }
+.pollar-ramp-field-hint {
+  display: block;
+  margin-top: 0.375rem;
+  font-size: 0.75rem;
+  color: var(--pollar-muted);
+}
+.pollar-ramp-field-optional {
+  font-weight: 400;
+  text-transform: none;
+  color: var(--pollar-muted);
+}
 .pollar-ramp-input-row {
   display: flex;
   gap: 0.625rem;
@@ -1398,11 +1436,19 @@
   transition: all 0.15s;
   box-sizing: border-box;
 }
+.pollar-ramp-route-card[data-busy] {
+  cursor: wait;
+  border-color: var(--pollar-accent);
+}
+.pollar-ramp-route-card[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 .pollar-ramp-route-card[data-recommended=true] {
   border-color: var(--pollar-accent);
   background-color: color-mix(in srgb, var(--pollar-accent) 5%, var(--pollar-input-bg));
 }
-.pollar-ramp-route-card:hover {
+.pollar-ramp-route-card:not([data-disabled]):hover {
   border-color: var(--pollar-accent);
 }
 .pollar-ramp-route-left {
@@ -1475,6 +1521,18 @@
   letter-spacing: 0.03em;
   font-family: monospace;
 }
+.pollar-ramp-qr {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  color: var(--pollar-text);
+}
+.pollar-ramp-qr svg {
+  width: 100%;
+  max-width: 220px;
+  height: auto;
+  display: block;
+}
 .pollar-ramp-copy-btn {
   padding: 0.25rem 0.625rem;
   border-radius: var(--pollar-buttons-border-radius, 6px);