@pollar/react 0.11.4-rc.4 → 0.11.4

package/README.md

@@ -3,7 +3,7 @@
 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.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 +32,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.d.mts

@@ -37,6 +37,14 @@ interface PollarContextValue {
     getClient: () => PollarClient;
     openLoginModal: () => void;
     isAuthenticated: boolean;
+    /**
+     * Whether the signed-in user has a wallet. False for an app that creates
+     * wallets on demand until {@link createWallet} runs, and always for one that
+     * creates none.
+     */
+    hasWallet: boolean;
+    /** Create the signed-in user's wallet; see `PollarClient.createWallet`. */
+    createWallet: () => Promise<WalletInfo>;
     /**
      * `true` once the server has confirmed the session (login / refresh /
      * `/auth/session/resume`). `false` while a cold-start session is still
@@ -305,6 +313,16 @@ interface WalletButtonTemplateProps {
      */
     notReadyReason?: string | null;
     creatingAccount: boolean;
+    /**
+     * Signed in with no wallet yet (an app that creates wallets on demand, or
+     * none). The button then shows the account menu instead of Login, with Create
+     * wallet only when `onCreateWallet` is set. Optional, so a custom template
+     * written before this existed keeps compiling.
+     */
+    signedIn?: boolean;
+    creatingWallet?: boolean;
+    createWalletError?: string | null;
+    onCreateWallet?: () => void;
     onToggleOpen: () => void;
     onCreateAccount: () => void;
     onCopy: () => void;
@@ -319,7 +337,7 @@ interface WalletButtonTemplateProps {
     onLogout: () => void;
     onLogin: () => void;
 }
-declare function WalletButtonTemplate({ walletAddress, accentColor, open, copied, dropdownBg, dropdownBorder, itemColor, wrapperRef, isInProgress, showCreateAccount, notReadyReason, creatingAccount, onToggleOpen, onCreateAccount, onCopy, onWalletBalance, onTxHistory, onSend, onReceive, onSessions, onKyc, onRamp, onDistributionRules, onLogout, onLogin, }: WalletButtonTemplateProps): react_jsx_runtime.JSX.Element;
+declare function WalletButtonTemplate({ walletAddress, accentColor, open, copied, dropdownBg, dropdownBorder, itemColor, wrapperRef, isInProgress, showCreateAccount, notReadyReason, creatingAccount, onToggleOpen, onCreateAccount, onCopy, onWalletBalance, onTxHistory, onSend, onReceive, onSessions, onKyc, onRamp, onDistributionRules, onLogout, onLogin, signedIn, creatingWallet, createWalletError, onCreateWallet, }: WalletButtonTemplateProps): react_jsx_runtime.JSX.Element;
 
 /**
  * The chain a record lives on, with the legacy shape folded in: sessions and

package/dist/index.d.ts

@@ -37,6 +37,14 @@ interface PollarContextValue {
     getClient: () => PollarClient;
     openLoginModal: () => void;
     isAuthenticated: boolean;
+    /**
+     * Whether the signed-in user has a wallet. False for an app that creates
+     * wallets on demand until {@link createWallet} runs, and always for one that
+     * creates none.
+     */
+    hasWallet: boolean;
+    /** Create the signed-in user's wallet; see `PollarClient.createWallet`. */
+    createWallet: () => Promise<WalletInfo>;
     /**
      * `true` once the server has confirmed the session (login / refresh /
      * `/auth/session/resume`). `false` while a cold-start session is still
@@ -305,6 +313,16 @@ interface WalletButtonTemplateProps {
      */
     notReadyReason?: string | null;
     creatingAccount: boolean;
+    /**
+     * Signed in with no wallet yet (an app that creates wallets on demand, or
+     * none). The button then shows the account menu instead of Login, with Create
+     * wallet only when `onCreateWallet` is set. Optional, so a custom template
+     * written before this existed keeps compiling.
+     */
+    signedIn?: boolean;
+    creatingWallet?: boolean;
+    createWalletError?: string | null;
+    onCreateWallet?: () => void;
     onToggleOpen: () => void;
     onCreateAccount: () => void;
     onCopy: () => void;
@@ -319,7 +337,7 @@ interface WalletButtonTemplateProps {
     onLogout: () => void;
     onLogin: () => void;
 }
-declare function WalletButtonTemplate({ walletAddress, accentColor, open, copied, dropdownBg, dropdownBorder, itemColor, wrapperRef, isInProgress, showCreateAccount, notReadyReason, creatingAccount, onToggleOpen, onCreateAccount, onCopy, onWalletBalance, onTxHistory, onSend, onReceive, onSessions, onKyc, onRamp, onDistributionRules, onLogout, onLogin, }: WalletButtonTemplateProps): react_jsx_runtime.JSX.Element;
+declare function WalletButtonTemplate({ walletAddress, accentColor, open, copied, dropdownBg, dropdownBorder, itemColor, wrapperRef, isInProgress, showCreateAccount, notReadyReason, creatingAccount, onToggleOpen, onCreateAccount, onCopy, onWalletBalance, onTxHistory, onSend, onReceive, onSessions, onKyc, onRamp, onDistributionRules, onLogout, onLogin, signedIn, creatingWallet, createWalletError, onCreateWallet, }: WalletButtonTemplateProps): react_jsx_runtime.JSX.Element;
 
 /**
  * The chain a record lives on, with the legacy shape folded in: sessions and

package/dist/index.js

@@ -1038,7 +1038,7 @@ var PollarModalFooter = ({ shield = false }) => {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.11.4-rc.4"
+        "0.11.4"
       ] })
     ] })
   ] });
@@ -2264,15 +2264,35 @@ function initialValues(fields, answers) {
   return values;
 }
 var DATE = /^\d{4}-\d{2}-\d{2}$/;
+function localFieldError(field, value) {
+  if (typeof value !== "string" || !value.trim()) return null;
+  const text = value.trim();
+  const rules = field.validation ?? {};
+  if (field.type === "number") {
+    const number = Number(text);
+    if (!Number.isFinite(number)) return "invalid_type";
+    if (rules.min !== void 0 && number < rules.min) return "too_small";
+    if (rules.max !== void 0 && number > rules.max) return "too_large";
+    return null;
+  }
+  if (field.type === "date") {
+    return DATE.test(text) && !Number.isNaN(Date.parse(`${text}T00:00:00Z`)) ? null : "invalid_format";
+  }
+  if (field.type === "select" || field.type === "multiselect" || field.type === "checkbox") return null;
+  if (rules.maxLength !== void 0 && text.length > rules.maxLength) return "too_long";
+  if (rules.pattern) {
+    try {
+      if (!new RegExp(rules.pattern).test(text)) return "pattern";
+    } catch {
+    }
+  }
+  return null;
+}
 function localFieldErrors(fields, values) {
   const errors = {};
   for (const field of fields) {
-    const value = values[field.key];
-    if (typeof value !== "string" || !value.trim()) continue;
-    if (field.type === "number" && !Number.isFinite(Number(value))) errors[field.key] = "invalid_type";
-    if (field.type === "date" && (!DATE.test(value.trim()) || Number.isNaN(Date.parse(`${value.trim()}T00:00:00Z`)))) {
-      errors[field.key] = "invalid_format";
-    }
+    const error = localFieldError(field, values[field.key]);
+    if (error) errors[field.key] = error;
   }
   return errors;
 }
@@ -2352,7 +2372,8 @@ function FieldInput({
   value,
   language,
   disabled,
-  onChange
+  onChange,
+  onBlur
 }) {
   const id = `pollar-form-${field.key}`;
   const text = typeof value === "string" ? value : "";
@@ -2386,7 +2407,8 @@ function FieldInput({
           value: text,
           disabled,
           maxLength: field.validation?.maxLength,
-          onChange: (e) => onChange(e.target.value)
+          onChange: (e) => onChange(e.target.value),
+          onBlur
         }
       );
     default:
@@ -2402,7 +2424,8 @@ function FieldInput({
           min: field.validation?.min,
           max: field.validation?.max,
           maxLength: field.validation?.maxLength,
-          onChange: (e) => onChange(e.target.value)
+          onChange: (e) => onChange(e.target.value),
+          onBlur
         }
       );
   }
@@ -2433,6 +2456,24 @@ function RequirementFormModal({ formId, progress, onClose, onSubmitted }) {
       setValues(initialValues(loaded.fields, loaded.answers));
     }).catch(() => mounted.current && setError(copy.loadError));
   }, [formId]);
+  function recheck(field, value, onlyIfShown) {
+    if (typeof value === "string" && !value.trim()) return;
+    setFieldErrors((errors) => {
+      if (onlyIfShown && !(field.key in errors)) return errors;
+      const next = { ...errors };
+      const error2 = localFieldError(field, value);
+      if (error2) next[field.key] = error2;
+      else delete next[field.key];
+      return next;
+    });
+  }
+  function change(field, value) {
+    setValues((v) => ({ ...v, [field.key]: value }));
+    recheck(field, value, true);
+  }
+  function blur(field) {
+    recheck(field, values[field.key], false);
+  }
   async function submit() {
     if (!form) return;
     setError(null);
@@ -2512,7 +2553,8 @@ function RequirementFormModal({ formId, progress, onClose, onSubmitted }) {
                         value: values[field.key] ?? "",
                         language,
                         disabled: submitting,
-                        onChange: (value) => setValues((v) => ({ ...v, [field.key]: value }))
+                        onChange: (value) => change(field, value),
+                        onBlur: () => blur(field)
                       }
                     )
                   ] }),
@@ -3971,6 +4013,7 @@ var REGISTRATION_COPY = {
     incomplete: "Your registration with the provider did not finish. Register again to complete it.",
     providerDown: "The provider is not responding right now. Please try again in a few minutes.",
     ipNotSupported: "The provider cannot accept your current connection (IPv6). Please try again from another network, for example Wi-Fi.",
+    emailTaken: "This email is already registered with the provider through another app. Use a different email to register here.",
     loadError: "Could not load the registration. Please try again.",
     submitError: "Could not register you. Please try again.",
     step: "Step {n} of {total}",
@@ -3990,6 +4033,7 @@ var REGISTRATION_COPY = {
     incomplete: "Tu registro con el proveedor no se complet\xF3. Reg\xEDstrate de nuevo para terminarlo.",
     providerDown: "El proveedor no responde en este momento. Intenta de nuevo en unos minutos.",
     ipNotSupported: "El proveedor no acepta tu conexi\xF3n actual (IPv6). Intenta desde otra red, por ejemplo Wi-Fi.",
+    emailTaken: "Este email ya est\xE1 registrado con el proveedor desde otra app. Usa otro email para registrarte aqu\xED.",
     loadError: "No se pudo cargar el registro. Intenta de nuevo.",
     submitError: "No se pudo completar el registro. Intenta de nuevo.",
     step: "Paso {n} de {total}",
@@ -4312,6 +4356,7 @@ function ProviderRegistrationModal({
       } else if (code === "KYC_REGISTRATION_STEPS_PENDING") setError(copy.notReady);
       else if (code === "SDK_CARDS_PROVIDER_ERROR") setError(copy.providerDown);
       else if (code === "SDK_CARDS_IP_NOT_SUPPORTED") setError(copy.ipNotSupported);
+      else if (code === "SDK_CARDS_PROVIDER_USER_TAKEN") setError(copy.emailTaken);
       else setError(copy.submitError);
     } finally {
       if (mounted.current) setSubmitting(false);
@@ -7017,7 +7062,8 @@ function groupPan(pan) {
 }
 var CARD_ERROR_COPY = {
   SDK_CARDS_PROVIDER_ERROR: "The card provider is not responding right now. Please try again in a few minutes.",
-  SDK_CARDS_IP_NOT_SUPPORTED: "The card provider cannot accept your current connection (IPv6). Please try again from another network, for example Wi-Fi."
+  SDK_CARDS_IP_NOT_SUPPORTED: "The card provider cannot accept your current connection (IPv6). Please try again from another network, for example Wi-Fi.",
+  SDK_CARDS_PROVIDER_USER_TAKEN: "This email is already registered with the card provider through another app. Use a different email to get a card here."
 };
 function errorText(e, fallback) {
   if (core.isPollarApiError(e)) {
@@ -8633,7 +8679,7 @@ function PollarProvider({
             triggered = false;
             return;
           }
-          if (triggered || sessionRef.current?.wallet?.address) return;
+          if (triggered || sessionRef.current) return;
           triggered = true;
           pollarClient.login({ provider: id });
         })
@@ -8712,6 +8758,7 @@ function PollarProvider({
   );
   const walletAddress = sessionState?.wallet?.address || "";
   const walletProvisioning = sessionState?.wallet?.provisioning;
+  const hasSession = sessionState !== null;
   const getClient = react.useCallback(() => pollarClient, [pollarClient]);
   const refreshWalletBalance = react.useCallback(() => pollarClient.refreshBalance(), [pollarClient, walletAddress]);
   const refreshAssets = react.useCallback(() => pollarClient.refreshAssets(), [pollarClient, walletAddress]);
@@ -8721,7 +8768,9 @@ function PollarProvider({
       // session
       wallet: pollarClient.getWallet(),
       wallets: pollarClient.getWallets(),
-      isAuthenticated: !!walletAddress,
+      isAuthenticated: hasSession,
+      hasWallet: pollarClient.hasWallet(),
+      createWallet: () => pollarClient.createWallet(),
       verified,
       // client
       getClient,
@@ -8809,6 +8858,7 @@ function PollarProvider({
   }, [
     walletAddress,
     walletProvisioning,
+    hasSession,
     verified,
     pollarClient,
     getClient,
@@ -8924,8 +8974,54 @@ function WalletButtonTemplate({
   onRamp,
   onDistributionRules,
   onLogout,
-  onLogin
+  onLogin,
+  signedIn,
+  creatingWallet,
+  createWalletError,
+  onCreateWallet
 }) {
+  if (!walletAddress && signedIn) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-wallet-wrapper", ref: wrapperRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "pollar-wallet-btn", style: { backgroundColor: accentColor }, onClick: onToggleOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-wallet-btn-label", children: onCreateWallet ? "No wallet" : "Signed in" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: `pollar-wallet-chevron${open ? " pollar-open" : ""}`,
+            viewBox: "0 0 12 12",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2,4 6,8 10,4" })
+          }
+        )
+      ] }),
+      open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-wallet-dropdown", style: { backgroundColor: dropdownBg, borderColor: dropdownBorder }, children: [
+        createWalletError && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-wallet-dropdown-notice", style: { color: itemColor }, role: "status", children: createWalletError }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-wallet-dropdown-divider" })
+        ] }),
+        onCreateWallet && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: "pollar-wallet-dropdown-item",
+              style: { color: itemColor },
+              onClick: onCreateWallet,
+              disabled: creatingWallet,
+              children: creatingWallet ? "Creating wallet\u2026" : "Create wallet"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-wallet-dropdown-divider" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-wallet-dropdown-item", style: { color: itemColor }, onClick: onSessions, children: "Active sessions" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-wallet-dropdown-divider" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-wallet-dropdown-item pollar-danger", onClick: onLogout, children: "Log out" })
+      ] })
+    ] });
+  }
   if (!walletAddress) {
     return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "pollar-wallet-login-btn", style: { backgroundColor: accentColor }, onClick: onLogin, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ButtonLogo, {}),
@@ -9246,7 +9342,10 @@ function WalletButton() {
     openKycModal,
     openRampModal,
     openDistributionRulesModal,
-    tx: transaction
+    tx: transaction,
+    isAuthenticated,
+    createWallet,
+    appConfig
   } = usePollar();
   const { primaryChain, primaryAddress } = useChains();
   const walletAddress = primaryAddress || (wallet?.address ?? "");
@@ -9254,6 +9353,8 @@ function WalletButton() {
   const [copied, setCopied] = react.useState(false);
   const [creating, setCreating] = react.useState(false);
   const [created, setCreated] = react.useState(false);
+  const [creatingWallet, setCreatingWallet] = react.useState(false);
+  const [createWalletError, setCreateWalletError] = react.useState(null);
   const wrapperRef = react.useRef(null);
   const copyTimerRef = react.useRef(null);
   const isInProgress = transaction.step === "building" || transaction.step === "signing";
@@ -9307,6 +9408,21 @@ function WalletButton() {
       setCreating(false);
     }
   }
+  async function handleCreateWallet() {
+    if (creatingWallet) return;
+    setCreatingWallet(true);
+    setCreateWalletError(null);
+    try {
+      await createWallet();
+      setOpen(false);
+    } catch (err) {
+      setCreateWalletError(
+        core.isPollarApiError(err) && err.code === "SDK_WALLET_PROVISIONING_DISABLED" ? "This app does not create wallets." : "Could not create the wallet. Try again."
+      );
+    } finally {
+      setCreatingWallet(false);
+    }
+  }
   function handleWalletBalance() {
     setOpen(false);
     openWalletBalanceModal();
@@ -9352,6 +9468,10 @@ function WalletButton() {
       wrapperRef,
       isInProgress,
       showCreateAccount: canCreateAccount,
+      signedIn: isAuthenticated,
+      creatingWallet,
+      createWalletError,
+      ...appConfig.application?.walletProvisioning === "NONE" ? {} : { onCreateWallet: handleCreateWallet },
       notReadyReason,
       creatingAccount: creating,
       onToggleOpen: () => setOpen((v) => !v),