@coinbase/cdp-react 0.0.108 → 0.0.110

package/dist/components/SignIn/useSignInReducer.js

@@ -1,101 +1,119 @@
-import { useReducer as l } from "react";
+import { useReducer as o } from "react";
 import "@coinbase/cdp-hooks";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
-function u(e, r) {
-  switch (r.type) {
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
+function n(r) {
+  const e = r.status === "pending", u = r.status === "success";
+  return r.isPending === e && r.isSuccess === u ? r : { ...r, isPending: e, isSuccess: u };
+}
+function l(r, e) {
+  switch (e.type) {
     case "SET_AUTH_METHODS":
       return {
-        ...e,
-        authMethods: r.payload.authMethods
+        ...r,
+        authMethods: e.payload.authMethods
       };
     case "SET_AUTH_METHOD":
       return {
-        ...e,
-        authMethod: r.payload.authMethod,
+        ...r,
+        authMethod: e.payload.authMethod,
         step: "credentials",
-        phoneNumber: r.payload.authMethod === "sms" ? "" : e.phoneNumber,
-        email: r.payload.authMethod === "email" ? "" : e.email,
+        status: "idle",
+        phoneNumber: e.payload.authMethod === "sms" ? "" : r.phoneNumber,
+        email: e.payload.authMethod === "email" ? "" : r.email,
         error: null
       };
     case "SET_EMAIL":
-      return { ...e, email: r.payload.email, phoneNumber: "", error: null };
+      return { ...r, email: e.payload.email, phoneNumber: "", error: null };
     case "SUBMIT_EMAIL":
       return {
-        ...e,
-        isPending: !0,
-        email: r.payload.email,
+        ...r,
+        status: "pending",
+        email: e.payload.email,
         phoneNumber: "",
         error: null
       };
     case "SET_PHONE_NUMBER":
-      return { ...e, phoneNumber: r.payload.phoneNumber, email: "", error: null };
+      return { ...r, phoneNumber: e.payload.phoneNumber, email: "", error: null };
     case "SUBMIT_PHONE_NUMBER":
       return {
-        ...e,
-        isPending: !0,
-        phoneNumber: r.payload.phoneNumber,
+        ...r,
+        status: "pending",
+        phoneNumber: e.payload.phoneNumber,
         email: "",
         error: null
       };
     case "SUBMIT_EMAIL_SUCCESS":
     case "SUBMIT_PHONE_NUMBER_SUCCESS":
       return {
-        ...e,
+        ...r,
         error: null,
-        flowId: r.payload.flowId,
+        flowId: e.payload.flowId,
         canResetOTP: !1,
-        isPending: !1,
+        status: "idle",
         otp: "",
         step: "verification"
       };
     case "SUBMIT_EMAIL_FAILURE":
     case "SUBMIT_PHONE_NUMBER_FAILURE":
       return {
-        ...e,
-        error: r.payload.error,
-        isPending: !1
+        ...r,
+        error: e.payload.error,
+        status: "error"
       };
     case "SET_OTP":
-      return { ...e, error: null, otp: r.payload.otp };
+      return { ...r, error: null, otp: e.payload.otp };
     case "SUBMIT_OTP":
-      return { ...e, error: null, isPending: !0, otp: r.payload.otp };
+      return { ...r, error: null, status: "pending", otp: e.payload.otp };
     case "SUBMIT_OTP_SUCCESS":
-      return { ...e, error: null, isPending: !1, isSuccess: !0 };
+      return { ...r, error: null, status: "success" };
     case "SUBMIT_OTP_FAILURE":
       return {
-        ...e,
-        error: r.payload.error,
-        isPending: !1,
-        isSuccess: !1
+        ...r,
+        error: e.payload.error,
+        status: "error"
       };
+    case "SUBMIT_SIWE":
+      return {
+        ...r,
+        error: null,
+        status: "pending",
+        step: "verification",
+        authMethod: e.payload.authMethod
+      };
+    case "SUBMIT_SIWE_SUCCESS":
+      return r.authMethod.startsWith("siwe:") ? { ...r, error: null, status: "success" } : r;
+    case "SUBMIT_SIWE_FAILURE":
+      return r.authMethod.startsWith("siwe:") ? { ...r, error: e.payload.error, status: "error" } : r;
     case "ALLOW_RESET_OTP":
-      return { ...e, canResetOTP: !0 };
+      return { ...r, canResetOTP: !0 };
     case "RESET_OTP":
-      return { ...e, error: null, canResetOTP: !1 };
+      return { ...r, error: null, canResetOTP: !1 };
     case "CLEAR_ERROR":
-      return { ...e, error: null };
+      return { ...r, error: null };
     case "GO_TO_PREVIOUS_STEP":
       return {
-        authMethod: e.authMethod,
-        authMethods: e.authMethods,
+        ...r,
+        // Leaving a SIWE status returns to the default method (its status view has no prior step to
+        // step back to); other flows step back within their own method.
+        authMethod: r.authMethod.startsWith("siwe:") ? r.authMethods?.[0] ?? r.authMethod : r.authMethod,
+        authMethods: r.authMethods,
         canResetOTP: !1,
         error: null,
-        isPending: !1,
-        isSuccess: !1,
-        email: e.email,
+        status: "idle",
+        email: r.email,
         flowId: "",
         otp: "",
-        phoneNumber: e.phoneNumber,
+        phoneNumber: r.phoneNumber,
         step: "credentials"
       };
     case "RESET_STATE":
       return {
-        authMethod: e.authMethod,
-        authMethods: e.authMethods,
+        ...r,
+        authMethod: r.authMethod,
+        authMethods: r.authMethods,
         canResetOTP: !1,
         error: null,
-        isPending: !1,
-        isSuccess: !1,
+        status: "idle",
         email: "",
         flowId: "",
         otp: "",
@@ -106,7 +124,10 @@ function u(e, r) {
       throw new Error("Unknown action type");
   }
 }
-const s = (e) => l(u, e);
+function s(r, e) {
+  return n(l(r, e));
+}
+const t = (r) => o(s, r);
 export {
-  s as useSignInReducer
+  t as useSignInReducer
 };

package/dist/components/SignInModal/index.d.ts

@@ -61,7 +61,7 @@ export declare const SignInModalTrigger: ({ children, className, label, ...props
  *
  * @group Components
  */
-export declare const SignInModalContent: (props: SignInModalContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SignInModalContent: ({ onInteractOutside, ...props }: SignInModalContentProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * A sign-in modal component that wraps the {@link SignIn} component.
  * In the SignIn modal, the description is hidden on the "credentials" step, and the title is hidden on the "verification" step.

package/dist/components/SignInModal/index.js

@@ -1,93 +1,103 @@
-import { jsx as n, jsxs as t, Fragment as c } from "react/jsx-runtime";
+import { jsx as n, jsxs as a, Fragment as m } from "react/jsx-runtime";
 import { u as C } from "../../chunks/useSendComponentCallOnce.BI4daEvm.js";
-import { createContext as b, useMemo as x, useContext as v } from "react";
-import { c as N } from "../../chunks/lite.1fxw3LjI.js";
-import { u as w } from "../../chunks/CDPReactProvider.CFWIUvzR.js";
-import { SignIn as T } from "../SignIn/index.js";
+import { createContext as b, useMemo as x, useCallback as v, useContext as N } from "react";
+import { c as w } from "../../chunks/lite.1fxw3LjI.js";
+import { u as D } from "../../chunks/CDPReactProvider.BWInVuNJ.js";
+import { SignIn as k } from "../SignIn/index.js";
 import "@coinbase/cdp-hooks";
-import { Button as h } from "../ui/Button/index.js";
-import { Modal as k, ModalContent as B, ModalClose as D, ModalTrigger as F, ModalTitle as j, ModalDescription as y } from "../ui/Modal/index.js";
-import { VisuallyHidden as g } from "../ui/VisuallyHidden/index.js";
-import { IconXMark as A } from "../../icons/IconXMark.js";
-import { childrenHasComponent as f } from "../../utils/childrenHasComponent.js";
+import { isWithinBaseAccountDialog as B } from "../SiweStatusView/connectors/baseAccount.js";
+import { Button as S } from "../ui/Button/index.js";
+import { Modal as T, ModalContent as A, ModalClose as j, ModalTrigger as y, ModalTitle as E, ModalDescription as F } from "../ui/Modal/index.js";
+import { VisuallyHidden as u } from "../ui/VisuallyHidden/index.js";
+import { IconXMark as O } from "../../icons/IconXMark.js";
+import { childrenHasComponent as h } from "../../utils/childrenHasComponent.js";
 import { SignInBackButton as V } from "../SignIn/SignInBackButton.js";
-import { SignInImage as z } from "../SignIn/SignInImage.js";
-import { SignInForm as E } from "../SignIn/SignInForm.js";
-import { SignInTitle as _ } from "../SignIn/SignInTitle.js";
-import { SignInDescription as u } from "../SignIn/SignInDescription.js";
-import { SignInAuthMethodButtons as H } from "../SignIn/SignInAuthMethodButtons.js";
-import { SignInFooter as J } from "../SignIn/SignInFooter.js";
-import '../../assets/SignInModal.css';const O = "SignInModal-module__trigger___IcJ8x", X = "SignInModal-module__footer___6qEo2", $ = "SignInModal-module__buttons___jhaVn", e = {
-  trigger: O,
+import { SignInForm as z } from "../SignIn/SignInForm.js";
+import { SignInImage as H } from "../SignIn/SignInImage.js";
+import { SignInTitle as f } from "../SignIn/SignInTitle.js";
+import { SignInDescription as p } from "../SignIn/SignInDescription.js";
+import { SignInAuthMethodButtons as J } from "../SignIn/SignInAuthMethodButtons.js";
+import { SignInFooter as W } from "../SignIn/SignInFooter.js";
+import '../../assets/SignInModal.css';const X = "SignInModal-module__trigger___IcJ8x", $ = "SignInModal-module__footer___6qEo2", q = "SignInModal-module__buttons___jhaVn", t = {
+  trigger: X,
   "sign-in": "SignInModal-module__sign-in___n05-5",
   "no-footer": "SignInModal-module__no-footer___meSt1",
   "title-desc-wrapper": "SignInModal-module__title-desc-wrapper___--XLa",
   "sign-in-form": "SignInModal-module__sign-in-form___Jzx1-",
   "sign-in-image": "SignInModal-module__sign-in-image___DGg7B",
-  footer: X,
-  buttons: $,
+  footer: $,
+  buttons: q,
   "back-button": "SignInModal-module__back-button___nMh2-",
   "close-icon": "SignInModal-module__close-icon___b-gMh"
-}, M = b(null), q = () => {
-  const i = v(M);
-  if (!i)
+}, M = b(null), G = () => {
+  const e = N(M);
+  if (!e)
     throw new Error("useSignInModalContext must be used within a SignInModal");
-  return i;
-}, p = ({
-  children: i,
-  className: o = "",
-  label: a,
-  ...r
-}) => /* @__PURE__ */ n(F, { asChild: !0, children: i || /* @__PURE__ */ n(h, { className: N(e.trigger, o), ...r, children: a || "Sign in" }) }), m = (i) => {
-  const { showCoinbaseFooter: o } = w(), { authMethods: a, onSuccess: r } = q();
-  return /* @__PURE__ */ n(B, { ...i, children: /* @__PURE__ */ n(
-    T,
+  return e;
+}, I = ({
+  children: e,
+  className: i = "",
+  label: l,
+  ...d
+}) => /* @__PURE__ */ n(y, { asChild: !0, children: e || /* @__PURE__ */ n(S, { className: w(t.trigger, i), ...d, children: l || "Sign in" }) }), _ = ({ onInteractOutside: e, ...i }) => {
+  const { showCoinbaseFooter: l } = D(), { authMethods: d, onSuccess: s } = G(), g = v(
+    (o) => {
+      if (B(o.detail.originalEvent.target)) {
+        o.preventDefault();
+        return;
+      }
+      e?.(o);
+    },
+    [e]
+  );
+  return /* @__PURE__ */ n(A, { ...i, onInteractOutside: g, children: /* @__PURE__ */ n(
+    k,
     {
-      authMethods: a,
-      onSuccess: r,
-      className: `${e["sign-in"]} ${o ? "" : e["no-footer"]}`,
+      authMethods: d,
+      onSuccess: s,
+      className: `${t["sign-in"]} ${l ? "" : t["no-footer"]}`,
       ...i,
-      children: /* @__PURE__ */ t(c, { children: [
-        /* @__PURE__ */ n(G, {}),
-        /* @__PURE__ */ t("div", { className: e.buttons, children: [
-          /* @__PURE__ */ n(V, { className: e["back-button"] }),
-          /* @__PURE__ */ n(D, { asChild: !0, children: /* @__PURE__ */ n(h, { "aria-label": "Close", size: "md", variant: "transparentSecondary", children: /* @__PURE__ */ n(A, { className: e["close-icon"] }) }) })
+      children: /* @__PURE__ */ a(m, { children: [
+        /* @__PURE__ */ n(L, {}),
+        /* @__PURE__ */ a("div", { className: t.buttons, children: [
+          /* @__PURE__ */ n(V, { className: t["back-button"] }),
+          /* @__PURE__ */ n(j, { asChild: !0, children: /* @__PURE__ */ n(S, { "aria-label": "Close", size: "md", variant: "transparentSecondary", children: /* @__PURE__ */ n(O, { className: t["close-icon"] }) }) })
         ] }),
-        /* @__PURE__ */ n("div", { className: e["sign-in-image"], children: /* @__PURE__ */ n(z, {}) }),
-        /* @__PURE__ */ n(E, { onSuccess: r, children: ({ authMethod: s, step: l, Form: d }) => /* @__PURE__ */ t(c, { children: [
-          /* @__PURE__ */ t("div", { className: e["title-desc-wrapper"], children: [
-            l === "verification" ? /* @__PURE__ */ n(g, { as: "div", children: /* @__PURE__ */ n(_, {}) }) : /* @__PURE__ */ n(_, {}),
-            l === "credentials" ? /* @__PURE__ */ n(g, { as: "div", children: /* @__PURE__ */ n(u, { authMethod: s }) }) : /* @__PURE__ */ n(u, { authMethod: s })
+        /* @__PURE__ */ n(z, { onSuccess: s, children: ({ authMethod: o, step: r, Form: c }) => o.startsWith("siwe:") && r === "verification" ? c : /* @__PURE__ */ a(m, { children: [
+          /* @__PURE__ */ n("div", { className: t["sign-in-image"], children: /* @__PURE__ */ n(H, { authMethod: o, step: r }) }),
+          /* @__PURE__ */ a("div", { className: t["title-desc-wrapper"], children: [
+            r === "verification" ? /* @__PURE__ */ n(u, { as: "div", children: /* @__PURE__ */ n(f, {}) }) : /* @__PURE__ */ n(f, {}),
+            r === "credentials" ? /* @__PURE__ */ n(u, { as: "div", children: /* @__PURE__ */ n(p, { authMethod: o }) }) : /* @__PURE__ */ n(p, { authMethod: o })
           ] }),
-          /* @__PURE__ */ n("div", { className: e["sign-in-form"], children: d }),
-          l === "credentials" && /* @__PURE__ */ n(H, { activeMethod: s })
+          /* @__PURE__ */ n("div", { className: t["sign-in-form"], children: c }),
+          r === "credentials" && /* @__PURE__ */ n(J, { activeMethod: o, onSuccess: s })
         ] }) }),
-        o && /* @__PURE__ */ n(J, { className: e.footer })
+        l && /* @__PURE__ */ n(W, { className: t.footer })
       ] })
     }
   ) });
-}, mn = ({
-  authMethods: i,
-  children: o,
-  open: a,
-  setIsOpen: r,
+}, un = ({
+  authMethods: e,
+  children: i,
+  open: l,
+  setIsOpen: d,
   onSuccess: s
 }) => {
   C("sign_in_modal");
-  const l = o ? f(o, p) : !1, d = o ? f(o, m) : !1, S = !l && !d, I = x(() => ({ authMethods: i, onSuccess: s }), [i, s]);
-  return /* @__PURE__ */ n(M.Provider, { value: I, children: /* @__PURE__ */ n(k, { open: a, onOpenChange: r, children: S ? /* @__PURE__ */ t(c, { children: [
-    /* @__PURE__ */ n(p, { children: o }),
-    /* @__PURE__ */ n(m, {})
-  ] }) : /* @__PURE__ */ t(c, { children: [
-    o,
-    !d && /* @__PURE__ */ n(m, {})
+  const g = i ? h(i, I) : !1, o = i ? h(i, _) : !1, r = !g && !o, c = x(() => ({ authMethods: e, onSuccess: s }), [e, s]);
+  return /* @__PURE__ */ n(M.Provider, { value: c, children: /* @__PURE__ */ n(T, { open: l, onOpenChange: d, children: r ? /* @__PURE__ */ a(m, { children: [
+    /* @__PURE__ */ n(I, { children: i }),
+    /* @__PURE__ */ n(_, {})
+  ] }) : /* @__PURE__ */ a(m, { children: [
+    i,
+    !o && /* @__PURE__ */ n(_, {})
   ] }) }) });
-}, G = () => /* @__PURE__ */ t(g, { children: [
-  /* @__PURE__ */ n(j, { asChild: !0, children: /* @__PURE__ */ n(_, { as: "span" }) }),
-  /* @__PURE__ */ n(y, { asChild: !0, children: /* @__PURE__ */ n(u, { as: "span" }) })
+}, L = () => /* @__PURE__ */ a(u, { children: [
+  /* @__PURE__ */ n(E, { asChild: !0, children: /* @__PURE__ */ n(f, { as: "span" }) }),
+  /* @__PURE__ */ n(F, { asChild: !0, children: /* @__PURE__ */ n(p, { as: "span" }) })
 ] });
 export {
-  mn as SignInModal,
-  m as SignInModalContent,
-  p as SignInModalTrigger
+  un as SignInModal,
+  _ as SignInModalContent,
+  I as SignInModalTrigger
 };

package/dist/components/SiweStatusView/connectors/baseAccount.d.ts

@@ -0,0 +1,22 @@
+import { EvmAddress } from '@coinbase/cdp-core';
+import { Eip1193RequestProvider, SiweConnector } from './types';
+/**
+ * The result of connecting to a Base account.
+ */
+export interface BaseAccountConnection {
+    /** The connected EIP-1193 provider. */
+    provider: Eip1193RequestProvider;
+    /** The connected account address. */
+    address: EvmAddress;
+    /** The EIP-155 chain ID the wallet is currently on. */
+    chainId: number;
+}
+/**
+ * Whether the given node is inside the Base Account SDK's own dialog. Used so a surrounding modal
+ * (e.g. SignInModal) doesn't treat a click on that dialog as an outside-click and dismiss itself.
+ *
+ * @param target - The event target to check.
+ * @returns {boolean} True if the target is within a Base Account SDK dialog.
+ */
+export declare function isWithinBaseAccountDialog(target: EventTarget | null): boolean;
+export declare const baseAccountConnector: SiweConnector;

package/dist/components/SiweStatusView/connectors/baseAccount.js

@@ -0,0 +1,49 @@
+import "@coinbase/cdp-core";
+import { IconBaseColorLogo as s } from "../../../icons/IconBaseColorLogo.js";
+import { IconBaseLogo as a } from "../../../icons/IconBaseLogo.js";
+import "react";
+const i = 'Sign in with Base requires the optional "@base-org/account" package. Install it with: npm install @base-org/account';
+let n;
+async function u(o) {
+  return n || (n = (async () => {
+    let t;
+    try {
+      ({ createBaseAccountSDK: t } = await import("@base-org/account"));
+    } catch {
+      throw new Error(i);
+    }
+    return t({ appName: o }).getProvider();
+  })().catch((t) => {
+    throw n = void 0, t;
+  })), n;
+}
+async function l(o) {
+  const t = await u(o), [e, r] = await Promise.all([
+    t.request({ method: "eth_requestAccounts" }),
+    t.request({ method: "eth_chainId" })
+  ]), c = e?.[0];
+  if (!c)
+    throw new Error("No account returned from the Base wallet.");
+  return { provider: t, address: c, chainId: Number.parseInt(r, 16) };
+}
+async function h(o, t, e) {
+  return await o.request({
+    method: "personal_sign",
+    params: [t, e]
+  });
+}
+const d = "[class*='-base-acc-sdk']";
+function A(o) {
+  return o instanceof Element && o.closest(d) !== null;
+}
+const I = {
+  label: "Base",
+  icon: a,
+  colorIcon: s,
+  connect: l,
+  sign: h
+};
+export {
+  I as baseAccountConnector,
+  A as isWithinBaseAccountDialog
+};

package/dist/components/SiweStatusView/connectors/siweConnectors.d.ts

@@ -0,0 +1,6 @@
+import { SiweConnector, SiweProviderType } from './types';
+/**
+ * Registry of supported SIWE providers.
+ */
+export declare const siweConnectors: Record<SiweProviderType, SiweConnector>;
+export { type SiweConnector, type SiweProviderType };

package/dist/components/SiweStatusView/connectors/siweConnectors.js

@@ -0,0 +1,9 @@
+import { baseAccountConnector as o } from "./baseAccount.js";
+import "@coinbase/cdp-core";
+import "react";
+const n = {
+  base: o
+};
+export {
+  n as siweConnectors
+};

package/dist/components/SiweStatusView/connectors/types.d.ts

@@ -0,0 +1,45 @@
+import { EvmAddress, Hex } from '@coinbase/cdp-core';
+import { ComponentType, SVGProps } from 'react';
+/**
+ * The minimal EIP-1193 surface used by the SIWE flow. The Base Account SDK
+ * provider satisfies this, as does any injected wallet provider.
+ */
+export interface Eip1193RequestProvider {
+    request: (args: {
+        method: string;
+        params?: unknown[];
+    }) => Promise<unknown>;
+}
+/**
+ * The SIWE providers that can be used as first-party auth methods.
+ * Each maps to a `siwe:<provider>` auth method (e.g. `"siwe:base"`).
+ */
+export type SiweProviderType = "base";
+/**
+ * A wallet connection produced by a {@link SiweConnector}.
+ */
+export interface SiweConnection {
+    /** The connected EIP-1193 provider. */
+    provider: Eip1193RequestProvider;
+    /** The connected account address. */
+    address: EvmAddress;
+    /** The EIP-155 chain ID the wallet is currently on. */
+    chainId: number;
+}
+/**
+ * Configuration for a SIWE provider: how it connects/signs, plus its display metadata.
+ * Adding a new ETH provider only requires implementing this and registering it in
+ * {@link siweConnectors}.
+ */
+export interface SiweConnector {
+    /** The human-readable provider name (e.g. "Base"). */
+    label: string;
+    /** The monochrome logo (uses `currentColor`), used on buttons. */
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    /** The colored logo, used in the status graphic. Falls back to `icon` if omitted. */
+    colorIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /** Connects the wallet and returns the provider, address, and chain ID. */
+    connect: (appName?: string) => Promise<SiweConnection>;
+    /** Signs the SIWE message with the connected wallet. */
+    sign: (provider: Eip1193RequestProvider, message: string, address: EvmAddress) => Promise<Hex>;
+}

package/dist/components/SiweStatusView/connectors/types.js

@@ -0,0 +1,2 @@
+import "@coinbase/cdp-core";
+import "react";

package/dist/components/SiweStatusView/getSiweErrorMessage.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns a user-facing message for a failed SIWE flow, or `undefined` to fall back to the status
+ * view's generic message. Only two cases produce copy worth showing:
+ *  - HTTP 4xx API errors, which carry actionable, server-authored copy (e.g. "This Ethereum address
+ *    is already linked to another account.").
+ *  - A user-rejected wallet request (EIP-1193 code 4001).
+ *
+ * Everything else is suppressed and the SiweStatusView shows the generic error message.
+ *
+ * @param error - The caught error from a SIWE flow.
+ * @returns {string | undefined} A message to display, or `undefined` to use the generic copy.
+ */
+export declare function getSiweErrorMessage(error: unknown): string | undefined;

package/dist/components/SiweStatusView/getSiweErrorMessage.js

@@ -0,0 +1,15 @@
+import { getMessageFromUnknownError as e } from "../../utils/getMessageFromUnknownError.js";
+import { isApiError as n } from "../../utils/isApiError.js";
+import "libphonenumber-js";
+const i = 4001;
+function E(t) {
+  if (t) {
+    if (n(t) && t.statusCode >= 400 && t.statusCode < 500)
+      return e(t, "Something went wrong. Please try again.");
+    if (typeof t == "object" && "code" in t && t.code === i)
+      return "User cancelled the request. Please try again.";
+  }
+}
+export {
+  E as getSiweErrorMessage
+};

package/dist/components/SiweStatusView/index.d.ts

@@ -0,0 +1,36 @@
+import { StatusViewStatus } from '../ui/StatusView';
+import { siweConnectors, SiweProviderType } from './connectors/siweConnectors';
+/**
+ * Props for the SiweStatusView component.
+ */
+export interface SiweStatusViewProps {
+    /** The SIWE provider being authenticated. */
+    provider: SiweProviderType;
+    /** The current status. `"idle"` is ignored (keeps the last status visible while fading out). */
+    status: "idle" | StatusViewStatus;
+    /** Called when the user clicks the "Try again" button in the error state. */
+    onRetry?: () => void;
+    /** A contextual message shown in the error state. Falls back to a generic message when omitted. */
+    errorMessage?: string;
+    /** Whether the status transition animates its height. Defaults to `true`. */
+    animateHeight?: boolean;
+    /** A contextual message shown in the success state. */
+    successMessage?: string;
+}
+/**
+ * Renders the SIWE status (pending/success/error) using the shared {@link StatusView}, with
+ * provider-specific branding and a "Try again" button on error.
+ *
+ * Whether the copy reads as sign-in or account-link is derived from `useIsSignedIn` — the same
+ * signal {@link useSiweFlow} uses to choose between signing in and linking.
+ *
+ * @param {SiweStatusViewProps} props - The props for the component.
+ * @returns {JSX.Element} The SiweStatusView component.
+ *
+ * @group Components
+ */
+export declare const SiweStatusView: ({ provider, status, onRetry, errorMessage, successMessage, animateHeight, }: SiweStatusViewProps) => import("react/jsx-runtime").JSX.Element;
+export { siweConnectors, type SiweProviderType };
+export { useSiweFlow } from './useSiweFlow';
+export { toSiweProvider } from './toSiweProvider';
+export { getSiweErrorMessage } from './getSiweErrorMessage';

package/dist/components/SiweStatusView/index.js

@@ -0,0 +1,71 @@
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { useIsSignedIn as C } from "@coinbase/cdp-hooks";
+import { useRef as s, useState as T, useCallback as $, useEffect as x } from "react";
+import { Button as y } from "../ui/Button/index.js";
+import { StatusView as c } from "../ui/StatusView/index.js";
+import { SwitchFadeTransition as A } from "../ui/SwitchFadeTransition/index.js";
+import { siweConnectors as P } from "./connectors/siweConnectors.js";
+import { useSiweFlow as q } from "./useSiweFlow.js";
+import { toSiweProvider as H } from "./toSiweProvider.js";
+import { getSiweErrorMessage as O } from "./getSiweErrorMessage.js";
+const b = ["pending", "success", "error"], D = ({
+  provider: p,
+  status: t,
+  onRetry: u,
+  errorMessage: e,
+  successMessage: f,
+  animateHeight: g = !0
+}) => {
+  const { isSignedIn: S } = C(), o = s(S).current, { label: n, icon: w, colorIcon: h } = P[p], k = h ?? w, d = s(null), l = s(t === "idle" ? "pending" : t), [a, E] = T(e);
+  t === "error" && e !== a && E(e);
+  const m = $((i) => {
+    i === "idle" || i === l.current || (l.current = i, d.current?.transition.toggle(i));
+  }, []);
+  return x(() => {
+    m(t);
+  }, [t, m]), /* @__PURE__ */ r(
+    A,
+    {
+      animateHeight: g,
+      timeout: 250,
+      items: b,
+      initialEntered: !0,
+      transitionRef: d,
+      children: ({ itemKey: i, ...I }) => /* @__PURE__ */ v("div", { ...I, children: [
+        i === "pending" && /* @__PURE__ */ r(
+          c,
+          {
+            status: "pending",
+            icon: /* @__PURE__ */ r(k, { width: "32", height: "32" }),
+            title: o ? `Linking your ${n} account` : `Signing in with ${n}`,
+            description: "Just a moment..."
+          }
+        ),
+        i === "success" && /* @__PURE__ */ r(
+          c,
+          {
+            status: "success",
+            title: o ? `${n} account linked` : `Signed in with ${n}`,
+            description: f
+          }
+        ),
+        i === "error" && /* @__PURE__ */ r(
+          c,
+          {
+            status: "error",
+            title: o ? "Account linking failed" : "Sign in failed",
+            description: a || "Something went wrong. Please try again.",
+            children: !!u && /* @__PURE__ */ r(y, { variant: "secondary", onClick: u, size: "sm", children: "Try again" })
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  D as SiweStatusView,
+  O as getSiweErrorMessage,
+  P as siweConnectors,
+  H as toSiweProvider,
+  q as useSiweFlow
+};