@pollar/react 0.11.2 → 0.11.3

package/README.md

@@ -3,7 +3,24 @@
 React bindings for [Pollar](https://pollar.xyz) — drop-in authentication UI, transaction modals, and hooks for
 Stellar and Solana applications.
 
-> **0.11.2** requires `@pollar/core@^0.11.2`. The **Transaction History modal
+> **0.11.3** requires `@pollar/core@^0.11.3`. Non-breaking. A **pre-built `PollarClient`
+> passed to `PollarProvider` no longer loses passkey support**: the provider installs the
+> browser passkey ceremony on every path (via core's new `setPasskeyDefaults()`), and an
+> explicit `passkey: undefined` no longer wipes the default. `browserPasskeyCeremony` and
+> `browserPasskeySigner` are now exported for consumers who build their own client or want
+> to wrap the ceremony. Also, **StrictMode no longer leaves an orphaned `PollarClient`
+> running**: the provider keys the client it builds on the config object, so StrictMode's
+> second render pass reuses the first pass's instance instead of constructing a second
+> client whose refresh loop could clear the session the real login just wrote (dev only,
+> no API change). Packaging: **`@pollar/core` moved from `dependencies` to
+> `peerDependencies`**, so npm no longer installs a package-local duplicate of core (the
+> configuration that broke `instanceof` and split the live-client registry); the provider
+> now discriminates with core's new `isPollarClient()` guard, which works across copies.
+> npm 7+ installs peers automatically; on npm 6, Yarn 1 or `--legacy-peer-deps`, add
+> `@pollar/core` to your own dependencies. If you pin exact versions, keep both packages
+> on the same version.
+>
+> Earlier: **0.11.2** required `@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

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);