@pollar/react 0.11.4-rc.4 → 0.11.5

package/README.md

@@ -3,7 +3,14 @@
 React bindings for [Pollar](https://pollar.xyz) — drop-in authentication UI, transaction modals, and hooks for
 Stellar and Solana applications.
 
-> **0.11.4** (candidate `0.11.4-rc.1` on the `next` tag, which requires `@pollar/core@^0.11.4-rc.1`).
+> **0.11.5** (requires `@pollar/core@^0.11.5`).
+> **Turnkey co-signed wallets**: `<CosignModal>` opens for a request the device did not settle and enables
+> Approve only after it verifies against Turnkey; `useCosign()` exposes the pending requests.
+> `<ConfirmModal>` shows every signature first under `confirmation: 'prompt'`. The ramp widget links the
+> chain a ramp settles on and retries funds in transit; Send takes a Stellar memo (`SendMemoType`). See
+> [UPGRADE.md](../../UPGRADE.md).
+>
+> Earlier: **0.11.4** (requires `@pollar/core@^0.11.4`).
 > **KYC by ramp corridor**: `<RampWidget>` lists routes locked by a requirement step and opens that
 > step - `<KycModal>`, `<RequirementFormModal>`, `<RegistryCheckModal>` or `<ProviderRegistrationModal>`
 > (all exported) - then quotes again; `openKycModal()` without a corridor walks the app's own KYC
@@ -32,6 +39,14 @@ Stellar and Solana applications.
 > pointless KYC poll), and three failures that printed as raw error codes get sentences.
 > `RampWidgetTemplateProps` gains an optional `onboardingStatus`.
 >
+> **Cards**: `<CardModal>`, opened with `openCardModal()` from `usePollar()`, walks the user through
+> the card provider's steps, sign-up and issuing, then shows the card with the app's logo and card
+> label, its balance and movements, funding from the wallet (each funding's step while it is in
+> flight) and the number revealed on the device. **Wallets on demand**: `usePollar()` exposes
+> `hasWallet` and `createWallet`, and signed in without a wallet `<WalletButton>` offers Create wallet
+> to an app that creates wallets on demand. The modals that act on the session close when it ends,
+> and form fields are checked before sending.
+>
 > Earlier: **0.11.3** required `@pollar/core@^0.11.3`. 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

package/dist/index.css

@@ -47,6 +47,8 @@ html.dark .pollar-modal-card {
   --pollar-error-border: #7f1d1d !important;
   --pollar-error-text: #f87171 !important;
   --pollar-success-text: #4ade80 !important;
+  --pollar-logo-on-light-display: none !important;
+  --pollar-logo-on-dark-display: block !important;
 }
 .pollar-input {
   width: 100%;
@@ -262,32 +264,23 @@ html.dark .pollar-modal-card {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
+  margin-top: 1.25rem;
   border-top: 1px solid var(--pollar-border);
-  padding-top: 1.5rem;
+  padding-top: 1rem;
 }
 .pollar-footer-protected {
   font-size: 0.875rem;
   color: var(--pollar-muted);
 }
-.pollar-footer-brand {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
 .pollar-footer-logo {
-  height: 18px;
-  width: 18px;
-  object-fit: contain;
+  height: 16px;
+  width: auto;
 }
-.pollar-footer-logo-svg {
-  display: block;
-  height: 18px;
-  width: 21px;
+.pollar-logo-on-light {
+  display: var(--pollar-logo-on-light-display, block);
 }
-.pollar-footer-name {
-  font-size: 0.875rem;
-  font-weight: 700;
-  color: var(--pollar-text);
+.pollar-logo-on-dark {
+  display: var(--pollar-logo-on-dark-display, none);
 }
 .pollar-footer-version {
   font-size: 0.7rem;
@@ -727,6 +720,22 @@ html.dark .pollar-modal-card {
   line-height: 30px;
   color: var(--Color-Neutral-400, #94a3b8);
 }
+.pollar-send-label-optional {
+  font-weight: 400;
+}
+.pollar-send-memo-row {
+  display: flex;
+  gap: 0.5rem;
+}
+.pollar-send-memo-type {
+  flex: 0 0 5.5rem;
+  padding: 0 0.75rem;
+  cursor: pointer;
+}
+.pollar-send-memo-input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
 .pollar-send-destination-input {
   font-family: "Geist Mono", monospace;
   font-size: 14px;
@@ -792,11 +801,6 @@ html.dark .pollar-send-inline-action {
   border-radius: 999px;
   font-size: 0.9375rem;
 }
-.pollar-send-modal .pollar-footer {
-  justify-content: flex-start;
-  margin-top: 1.25rem;
-  padding-top: 1rem;
-}
 @media (max-width: 480px) {
   .pollar-send-modal {
     max-width: calc(100vw - 2rem);
@@ -2190,10 +2194,6 @@ html.dark .pollar-send-inline-action {
 .pollar-receive-warning svg {
   flex: 0 0 auto;
 }
-.pollar-receive-modal .pollar-footer {
-  margin-top: 0;
-  padding-top: 1rem;
-}
 @media (max-width: 480px) {
   .pollar-receive-modal {
     max-width: calc(100vw - 2rem);
@@ -2779,11 +2779,6 @@ html.dark .pollar-send-inline-action {
   border-radius: 999px;
   font-size: 0.9375rem;
 }
-.pollar-swap-modal .pollar-footer {
-  justify-content: center;
-  margin-top: 1rem;
-  padding-top: 0.875rem;
-}
 @media (max-width: 480px) {
   .pollar-swap-modal {
     max-width: calc(100vw - 2rem);
@@ -3217,7 +3212,6 @@ html.dark .pollar-sessions-modal {
 }
 .pollar-sessions-modal .pollar-footer {
   flex: 0 0 auto;
-  padding-top: 0.75rem;
 }
 .pollar-sessions-logout-all {
   display: flex;
@@ -3265,6 +3259,178 @@ html.dark .pollar-sessions-modal {
   }
 }
 
+/* src/components/cosign-modal/CosignModal.css */
+.pollar-cosign-modal {
+  display: flex;
+  flex-direction: column;
+  width: 420px;
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100dvh - 2rem);
+  overflow: auto;
+  padding-bottom: 0.75rem;
+}
+html.dark .pollar-cosign-modal {
+  --pollar-bg: #1a1a1a !important;
+  --pollar-border: #374151 !important;
+  --pollar-text: #ffffff !important;
+  --pollar-muted: #9ca3af !important;
+  --pollar-input-bg: #374151 !important;
+  --pollar-error-bg: #2a1515 !important;
+  --pollar-error-border: #7f1d1d !important;
+  --pollar-error-text: #f87171 !important;
+  --pollar-success-text: #4ade80 !important;
+}
+.pollar-cosign-muted {
+  color: var(--pollar-muted);
+  font-size: 0.85rem;
+  margin: 0;
+}
+.pollar-cosign-empty {
+  padding: 1.5rem 0.25rem;
+  text-align: center;
+}
+.pollar-cosign-approved-icon {
+  display: block;
+  margin: 0 auto 0.75rem;
+  color: var(--pollar-success-text);
+}
+.pollar-cosign-tx-link {
+  color: var(--pollar-accent);
+  font-family: "Geist Mono", monospace;
+  text-decoration: none;
+}
+.pollar-cosign-tx-link:hover {
+  text-decoration: underline;
+}
+.pollar-cosign-empty-title {
+  margin: 0 0 0.35rem;
+  font-weight: 600;
+  color: var(--pollar-text);
+}
+.pollar-cosign-list {
+  list-style: none;
+  margin: 0 0 0.75rem;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.pollar-cosign-item {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--pollar-border);
+  border-radius: var(--pollar-card-border-radius, 10px);
+  background: transparent;
+  color: var(--pollar-text);
+  cursor: pointer;
+  font: inherit;
+}
+.pollar-cosign-item-active {
+  border-color: var(--pollar-accent);
+  background: color-mix(in srgb, var(--pollar-accent) 7%, var(--pollar-bg));
+}
+.pollar-cosign-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--pollar-border);
+  border-radius: calc(var(--pollar-card-border-radius, 10px) + 2px);
+}
+.pollar-cosign-detail-title {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--pollar-text);
+}
+.pollar-cosign-rows {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.pollar-cosign-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  font-size: 0.9rem;
+}
+.pollar-cosign-row dt {
+  color: var(--pollar-muted);
+}
+.pollar-cosign-row dd {
+  margin: 0;
+  color: var(--pollar-text);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  word-break: break-all;
+}
+.pollar-cosign-verify {
+  padding: 0.55rem 0.7rem;
+  border-radius: var(--pollar-card-border-radius, 10px);
+  font-size: 0.82rem;
+  border: 1px solid var(--pollar-border);
+  color: var(--pollar-muted);
+}
+.pollar-cosign-verify-ok {
+  color: var(--pollar-success-text, #15803d);
+  border-color: color-mix(in srgb, var(--pollar-success-text, #15803d) 40%, var(--pollar-border));
+}
+.pollar-cosign-verify-bad,
+.pollar-cosign-error {
+  color: var(--pollar-error-text);
+  background: var(--pollar-error-bg);
+  border: 1px solid var(--pollar-error-border);
+  border-radius: var(--pollar-card-border-radius, 10px);
+  padding: 0.55rem 0.7rem;
+  font-size: 0.82rem;
+}
+.pollar-cosign-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.pollar-cosign-btn {
+  flex: 1;
+  padding: 0.65rem 0.75rem;
+  border-radius: var(--pollar-button-border-radius, 10px);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid var(--pollar-border);
+}
+.pollar-cosign-btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.pollar-cosign-btn-secondary {
+  background: transparent;
+  color: var(--pollar-text);
+}
+.pollar-cosign-btn-primary {
+  background: var(--pollar-accent);
+  border-color: var(--pollar-accent);
+  color: var(--pollar-accent-text, #fff);
+}
+.pollar-cosign-group {
+  margin: 8px 0 12px;
+  padding: 10px 12px;
+  border-radius: var(--pollar-card-border-radius);
+  border: 1px solid var(--pollar-border);
+}
+.pollar-cosign-group-title {
+  margin: 0 0 4px;
+  font-weight: 600;
+}
+.pollar-cosign-group-steps {
+  margin: 8px 0 0;
+  padding-left: 20px;
+}
+.pollar-cosign-group-step-current {
+  font-weight: 600;
+}
+
 /* src/components/tx-history-modal/TxHistoryModal.css */
 .pollar-hist-modal {
   max-width: 480px;