@pollar/react 0.11.4-rc.4 → 0.11.4

package/dist/index.mjs

@@ -1036,7 +1036,7 @@ var PollarModalFooter = ({ shield = false }) => {
       /* @__PURE__ */ jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.11.4-rc.4"
+        "0.11.4"
       ] })
     ] })
   ] });
@@ -2262,15 +2262,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;
 }
@@ -2350,7 +2370,8 @@ function FieldInput({
   value,
   language,
   disabled,
-  onChange
+  onChange,
+  onBlur
 }) {
   const id = `pollar-form-${field.key}`;
   const text = typeof value === "string" ? value : "";
@@ -2384,7 +2405,8 @@ function FieldInput({
           value: text,
           disabled,
           maxLength: field.validation?.maxLength,
-          onChange: (e) => onChange(e.target.value)
+          onChange: (e) => onChange(e.target.value),
+          onBlur
         }
       );
     default:
@@ -2400,7 +2422,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
         }
       );
   }
@@ -2431,6 +2454,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);
@@ -2510,7 +2551,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)
                       }
                     )
                   ] }),
@@ -3969,6 +4011,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}",
@@ -3988,6 +4031,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}",
@@ -4310,6 +4354,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);
@@ -7015,7 +7060,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 (isPollarApiError(e)) {
@@ -8631,7 +8677,7 @@ function PollarProvider({
             triggered = false;
             return;
           }
-          if (triggered || sessionRef.current?.wallet?.address) return;
+          if (triggered || sessionRef.current) return;
           triggered = true;
           pollarClient.login({ provider: id });
         })
@@ -8710,6 +8756,7 @@ function PollarProvider({
   );
   const walletAddress = sessionState?.wallet?.address || "";
   const walletProvisioning = sessionState?.wallet?.provisioning;
+  const hasSession = sessionState !== null;
   const getClient = useCallback(() => pollarClient, [pollarClient]);
   const refreshWalletBalance = useCallback(() => pollarClient.refreshBalance(), [pollarClient, walletAddress]);
   const refreshAssets = useCallback(() => pollarClient.refreshAssets(), [pollarClient, walletAddress]);
@@ -8719,7 +8766,9 @@ function PollarProvider({
       // session
       wallet: pollarClient.getWallet(),
       wallets: pollarClient.getWallets(),
-      isAuthenticated: !!walletAddress,
+      isAuthenticated: hasSession,
+      hasWallet: pollarClient.hasWallet(),
+      createWallet: () => pollarClient.createWallet(),
       verified,
       // client
       getClient,
@@ -8807,6 +8856,7 @@ function PollarProvider({
   }, [
     walletAddress,
     walletProvisioning,
+    hasSession,
     verified,
     pollarClient,
     getClient,
@@ -8922,8 +8972,54 @@ function WalletButtonTemplate({
   onRamp,
   onDistributionRules,
   onLogout,
-  onLogin
+  onLogin,
+  signedIn,
+  creatingWallet,
+  createWalletError,
+  onCreateWallet
 }) {
+  if (!walletAddress && signedIn) {
+    return /* @__PURE__ */ jsxs("div", { className: "pollar-wallet-wrapper", ref: wrapperRef, children: [
+      /* @__PURE__ */ jsxs("button", { className: "pollar-wallet-btn", style: { backgroundColor: accentColor }, onClick: onToggleOpen, children: [
+        /* @__PURE__ */ jsx("span", { className: "pollar-wallet-btn-label", children: onCreateWallet ? "No wallet" : "Signed in" }),
+        /* @__PURE__ */ 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__ */ jsx("polyline", { points: "2,4 6,8 10,4" })
+          }
+        )
+      ] }),
+      open && /* @__PURE__ */ jsxs("div", { className: "pollar-wallet-dropdown", style: { backgroundColor: dropdownBg, borderColor: dropdownBorder }, children: [
+        createWalletError && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "pollar-wallet-dropdown-notice", style: { color: itemColor }, role: "status", children: createWalletError }),
+          /* @__PURE__ */ jsx("div", { className: "pollar-wallet-dropdown-divider" })
+        ] }),
+        onCreateWallet && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "pollar-wallet-dropdown-item",
+              style: { color: itemColor },
+              onClick: onCreateWallet,
+              disabled: creatingWallet,
+              children: creatingWallet ? "Creating wallet\u2026" : "Create wallet"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "pollar-wallet-dropdown-divider" })
+        ] }),
+        /* @__PURE__ */ jsx("button", { className: "pollar-wallet-dropdown-item", style: { color: itemColor }, onClick: onSessions, children: "Active sessions" }),
+        /* @__PURE__ */ jsx("div", { className: "pollar-wallet-dropdown-divider" }),
+        /* @__PURE__ */ jsx("button", { className: "pollar-wallet-dropdown-item pollar-danger", onClick: onLogout, children: "Log out" })
+      ] })
+    ] });
+  }
   if (!walletAddress) {
     return /* @__PURE__ */ jsxs("button", { type: "button", className: "pollar-wallet-login-btn", style: { backgroundColor: accentColor }, onClick: onLogin, children: [
       /* @__PURE__ */ jsx(ButtonLogo, {}),
@@ -9244,7 +9340,10 @@ function WalletButton() {
     openKycModal,
     openRampModal,
     openDistributionRulesModal,
-    tx: transaction
+    tx: transaction,
+    isAuthenticated,
+    createWallet,
+    appConfig
   } = usePollar();
   const { primaryChain, primaryAddress } = useChains();
   const walletAddress = primaryAddress || (wallet?.address ?? "");
@@ -9252,6 +9351,8 @@ function WalletButton() {
   const [copied, setCopied] = useState(false);
   const [creating, setCreating] = useState(false);
   const [created, setCreated] = useState(false);
+  const [creatingWallet, setCreatingWallet] = useState(false);
+  const [createWalletError, setCreateWalletError] = useState(null);
   const wrapperRef = useRef(null);
   const copyTimerRef = useRef(null);
   const isInProgress = transaction.step === "building" || transaction.step === "signing";
@@ -9305,6 +9406,21 @@ function WalletButton() {
       setCreating(false);
     }
   }
+  async function handleCreateWallet() {
+    if (creatingWallet) return;
+    setCreatingWallet(true);
+    setCreateWalletError(null);
+    try {
+      await createWallet();
+      setOpen(false);
+    } catch (err) {
+      setCreateWalletError(
+        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();
@@ -9350,6 +9466,10 @@ function WalletButton() {
       wrapperRef,
       isInProgress,
       showCreateAccount: canCreateAccount,
+      signedIn: isAuthenticated,
+      creatingWallet,
+      createWalletError,
+      ...appConfig.application?.walletProvisioning === "NONE" ? {} : { onCreateWallet: handleCreateWallet },
       notReadyReason,
       creatingAccount: creating,
       onToggleOpen: () => setOpen((v) => !v),