@coinbase/cdp-react 0.0.108 → 0.0.110

package/dist/components/LinkAuthModal/index.js

@@ -1,69 +1,79 @@
-import { jsx as o, jsxs as n, Fragment as d } from "react/jsx-runtime";
+import { jsx as o, jsxs as l, Fragment as d } from "react/jsx-runtime";
 import { u as p } from "../../chunks/useSendComponentCallOnce.BI4daEvm.js";
-import { createContext as f, useMemo as L, useContext as g } from "react";
-import { c as A } from "../../chunks/lite.1fxw3LjI.js";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
-import { LinkAuth as C, LinkAuthError as x } from "../LinkAuth/index.js";
-import { Button as m } from "../ui/Button/index.js";
-import { Modal as b, ModalContent as v, ModalTitle as w, ModalClose as N, ModalTrigger as T } from "../ui/Modal/index.js";
-import { VisuallyHidden as y } from "../ui/VisuallyHidden/index.js";
+import { createContext as M, useMemo as g, useCallback as L, useContext as A } from "react";
+import { c as C } from "../../chunks/lite.1fxw3LjI.js";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
+import { LinkAuth as x, LinkAuthError as b } from "../LinkAuth/index.js";
+import { isWithinBaseAccountDialog as v } from "../SiweStatusView/connectors/baseAccount.js";
+import { Button as h } from "../ui/Button/index.js";
+import { Modal as w, ModalContent as N, ModalTitle as T, ModalClose as y, ModalTrigger as B } from "../ui/Modal/index.js";
+import { VisuallyHidden as D } from "../ui/VisuallyHidden/index.js";
 import { IconXMark as F } from "../../icons/IconXMark.js";
-import { childrenHasComponent as c } from "../../utils/childrenHasComponent.js";
+import { childrenHasComponent as u } from "../../utils/childrenHasComponent.js";
 import { LinkAuthTitle as H } from "../LinkAuth/LinkAuthTitle.js";
 import { LinkAuthFlowBackButton as j } from "../LinkAuth/LinkAuthFlowBackButton.js";
-import { a as B } from "../../chunks/LinkAuthFlow.S1XbYaG5.js";
-import '../../assets/LinkAuthModal.css';const S = "LinkAuthModal-module__header___qoco6", D = "LinkAuthModal-module__error___Srl7H", E = "LinkAuthModal-module__trigger___aHDfG", r = {
-  header: S,
-  error: D,
+import { a as E } from "../../chunks/LinkAuthFlow.0FnIchwa.js";
+import '../../assets/LinkAuthModal.css';const O = "LinkAuthModal-module__header___qoco6", S = "LinkAuthModal-module__error___Srl7H", I = "LinkAuthModal-module__trigger___aHDfG", i = {
+  header: O,
+  error: S,
   "close-icon": "LinkAuthModal-module__close-icon___Fe02C",
   "close-button": "LinkAuthModal-module__close-button___x6j3c",
-  trigger: E
-}, h = f(null), O = () => {
-  const e = g(h);
-  if (!e)
+  trigger: I
+}, _ = M(null), V = () => {
+  const t = A(_);
+  if (!t)
     throw new Error("useLinkAuthModalContext must be used within a LinkAuthModal");
-  return e;
-}, u = ({
-  children: e,
-  className: t = "",
-  label: i,
-  ...a
-}) => /* @__PURE__ */ o(T, { asChild: !0, children: e || /* @__PURE__ */ o(m, { className: A(r.trigger, t), ...a, children: i || "Link accounts" }) }), l = (e) => {
-  const { onLinkSuccess: t } = O();
-  return /* @__PURE__ */ n(v, { "aria-describedby": void 0, ...e, children: [
-    /* @__PURE__ */ o(y, { children: /* @__PURE__ */ o(w, { children: "Link a profile" }) }),
-    /* @__PURE__ */ n(C, { onLinkSuccess: t, children: [
-      /* @__PURE__ */ n("div", { className: r.header, children: [
+  return t;
+}, m = ({
+  children: t,
+  className: r = "",
+  label: n,
+  ...e
+}) => /* @__PURE__ */ o(B, { asChild: !0, children: t || /* @__PURE__ */ o(h, { className: C(i.trigger, r), ...e, children: n || "Link accounts" }) }), s = ({ onInteractOutside: t, ...r }) => {
+  const { onLinkSuccess: n } = V(), e = L(
+    (a) => {
+      if (v(a.detail.originalEvent.target)) {
+        a.preventDefault();
+        return;
+      }
+      t?.(a);
+    },
+    [t]
+  );
+  return /* @__PURE__ */ l(N, { "aria-describedby": void 0, ...r, onInteractOutside: e, children: [
+    /* @__PURE__ */ o(D, { children: /* @__PURE__ */ o(T, { children: "Link a profile" }) }),
+    /* @__PURE__ */ l(x, { onLinkSuccess: n, children: [
+      /* @__PURE__ */ l("div", { className: i.header, children: [
         /* @__PURE__ */ o(H, {}),
         /* @__PURE__ */ o(j, {}),
-        /* @__PURE__ */ o(N, { asChild: !0, children: /* @__PURE__ */ o(
-          m,
+        /* @__PURE__ */ o(y, { asChild: !0, children: /* @__PURE__ */ o(
+          h,
           {
-            className: r["close-button"],
+            className: i["close-button"],
             "aria-label": "Close",
             size: "md",
             variant: "transparentSecondary",
-            children: /* @__PURE__ */ o(F, { className: r["close-icon"] })
+            children: /* @__PURE__ */ o(F, { className: i["close-icon"] })
           }
         ) })
       ] }),
-      /* @__PURE__ */ o("div", { className: r.error, children: /* @__PURE__ */ o(x, {}) }),
-      /* @__PURE__ */ o(B, {})
+      /* @__PURE__ */ o("div", { className: i.error, children: /* @__PURE__ */ o(b, {}) }),
+      /* @__PURE__ */ o(E, {})
     ] })
   ] });
-}, Z = ({ children: e, open: t, setIsOpen: i, onLinkSuccess: a }) => {
+}, to = ({ children: t, open: r, setIsOpen: n, onLinkSuccess: e }) => {
   p("manage_auth_modal");
-  const _ = e ? c(e, u) : !1, s = e ? c(e, l) : !1, k = !_ && !s, M = L(() => ({ onLinkSuccess: a }), [a]);
-  return /* @__PURE__ */ o(h.Provider, { value: M, children: /* @__PURE__ */ o(b, { open: t, onOpenChange: i, children: k ? /* @__PURE__ */ n(d, { children: [
-    /* @__PURE__ */ o(u, { children: e }),
-    /* @__PURE__ */ o(l, {})
-  ] }) : /* @__PURE__ */ n(d, { children: [
-    e,
-    !s && /* @__PURE__ */ o(l, {})
+  const a = t ? u(t, m) : !1, c = t ? u(t, s) : !1, f = !a && !c, k = g(() => ({ onLinkSuccess: e }), [e]);
+  return /* @__PURE__ */ o(_.Provider, { value: k, children: /* @__PURE__ */ o(w, { open: r, onOpenChange: n, children: f ? /* @__PURE__ */ l(d, { children: [
+    /* @__PURE__ */ o(m, { children: t }),
+    /* @__PURE__ */ o(s, {})
+  ] }) : /* @__PURE__ */ l(d, { children: [
+    t,
+    !c && /* @__PURE__ */ o(s, {})
   ] }) }) });
 };
 export {
-  Z as LinkAuthModal,
-  l as LinkAuthModalContent,
-  u as LinkAuthModalTrigger
+  to as LinkAuthModal,
+  s as LinkAuthModalContent,
+  m as LinkAuthModalTrigger
 };

package/dist/components/OAuthStatusModal/index.js

@@ -1,162 +1,140 @@
-import { jsx as s, jsxs as r, Fragment as f } from "react/jsx-runtime";
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
 import "@coinbase/cdp-core";
-import { useOAuthState as N } from "@coinbase/cdp-hooks";
-import { u as b } from "../../chunks/useSendComponentCallOnce.BI4daEvm.js";
-import { useState as A, useEffect as g, useRef as I, useCallback as S } from "react";
-import { a as v } from "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import { useOAuthState as w } from "@coinbase/cdp-hooks";
+import { u as N } from "../../chunks/useSendComponentCallOnce.BI4daEvm.js";
+import { useState as T, useEffect as f, useRef as S, useCallback as _ } from "react";
+import { a as v } from "../../chunks/CDPReactProvider.BWInVuNJ.js";
 import { CoinbaseFooter as k } from "../ui/CoinbaseFooter/index.js";
-import { LoadingSpinner as w } from "../ui/LoadingSpinner/index.js";
-import { Modal as L, ModalContent as E, ModalTitle as y, ModalDescription as R } from "../ui/Modal/index.js";
-import { SwitchFadeTransition as P } from "../ui/SwitchFadeTransition/index.js";
-import { VisuallyHidden as M } from "../ui/VisuallyHidden/index.js";
+import { Modal as y, ModalContent as R, ModalTitle as $, ModalDescription as P } from "../ui/Modal/index.js";
+import { StatusView as O } from "../ui/StatusView/index.js";
+import { SwitchFadeTransition as H } from "../ui/SwitchFadeTransition/index.js";
+import { VisuallyHidden as C } from "../ui/VisuallyHidden/index.js";
 import { useTimer as U } from "../../hooks/useTimer.js";
-import { IconAppleLogo as K } from "../../icons/IconAppleLogo.js";
-import { IconCheck as x } from "../../icons/IconCheck.js";
-import { IconGoogleColorLogo as G } from "../../icons/IconGoogleColorLogo.js";
-import { IconTelegramLogo as H } from "../../icons/IconTelegramLogo.js";
-import { IconXLogo as q } from "../../icons/IconXLogo.js";
-import { IconXMark as Y } from "../../icons/IconXMark.js";
-import { capitalize as _ } from "../../utils/capitalize.js";
-import '../../assets/OAuthStatusModal.css';const j = "OAuthStatusModal-module__status___vU6x7", D = "OAuthStatusModal-module__graphic___2fKoa", F = "OAuthStatusModal-module__pad___oooMz", z = "OAuthStatusModal-module__spinner___Q3dYq", V = "OAuthStatusModal-module__icon___Lj5Gf", W = "OAuthStatusModal-module__subhead___Pg9GI", X = "OAuthStatusModal-module__description___0qOZY", J = "OAuthStatusModal-module__ring___mKwSb", Q = "OAuthStatusModal-module__invisible___IeRd0", t = {
+import { IconAppleLogo as x } from "../../icons/IconAppleLogo.js";
+import { IconGoogleColorLogo as K } from "../../icons/IconGoogleColorLogo.js";
+import { IconTelegramLogo as D } from "../../icons/IconTelegramLogo.js";
+import { IconXLogo as G } from "../../icons/IconXLogo.js";
+import { capitalize as m } from "../../utils/capitalize.js";
+import '../../assets/OAuthStatusModal.css';const V = "OAuthStatusModal-module__status___vU6x7", g = {
   "oauth-status-modal": "OAuthStatusModal-module__oauth-status-modal___I69Ii",
   "transition-wrapper": "OAuthStatusModal-module__transition-wrapper___TmPRh",
-  status: j,
-  graphic: D,
-  pad: F,
-  spinner: z,
-  icon: V,
-  "icon-success": "OAuthStatusModal-module__icon-success___gqMWr",
-  "icon-error": "OAuthStatusModal-module__icon-error___psI7m",
-  subhead: W,
-  description: X,
-  ring: J,
-  "ring-success": "OAuthStatusModal-module__ring-success___unyM9",
-  "ring-error": "OAuthStatusModal-module__ring-error___OsgqU",
-  invisible: Q
-}, p = "cdp-react-sign-in-with-oauth-provider-name", h = "cdp-react-sign-in-with-oauth-is-account-link", Z = ["pending", "success", "error"], vt = () => {
-  const n = v() || "", o = S(
-    (a) => {
-      sessionStorage.setItem(p, n), sessionStorage.setItem(
-        h,
-        a ? "true" : "false"
+  status: V
+}, d = "cdp-react-sign-in-with-oauth-provider-name", p = "cdp-react-sign-in-with-oauth-is-account-link", b = ["pending", "success", "error"], dt = () => {
+  const o = v() || "", s = _(
+    (n) => {
+      sessionStorage.setItem(d, o), sessionStorage.setItem(
+        p,
+        n ? "true" : "false"
       );
     },
-    [n]
-  ), e = S(() => {
-    sessionStorage.removeItem(p), sessionStorage.removeItem(h);
+    [o]
+  ), t = _(() => {
+    sessionStorage.removeItem(d), sessionStorage.removeItem(p);
   }, []);
-  return { persistOAuthState: o, cleanupOAuthState: e };
-}, $t = () => {
-  b("oauth_status_modal");
-  const [n, o] = A(!1), { oauthState: e } = N(), [a, i] = A(!1), u = v(), l = e?.providerType || "google";
-  return g(() => {
-    if (e?.status === "pending" || e?.status === "error" || e?.status === "success") {
-      const d = sessionStorage.getItem(p);
-      if (d === null || d !== u)
+  return { persistOAuthState: s, cleanupOAuthState: t };
+}, pt = () => {
+  N("oauth_status_modal");
+  const [o, s] = T(!1), { oauthState: t } = w(), [n, r] = T(!1), a = v(), u = t?.providerType || "google";
+  return f(() => {
+    if (t?.status === "pending" || t?.status === "error" || t?.status === "success") {
+      const c = sessionStorage.getItem(d);
+      if (c === null || c !== a)
         return;
-      sessionStorage.removeItem(p), o(!0);
-      const m = sessionStorage.getItem(h) === "true";
-      sessionStorage.removeItem(h), i(m);
+      sessionStorage.removeItem(d), s(!0);
+      const l = sessionStorage.getItem(p) === "true";
+      sessionStorage.removeItem(p), r(l);
     }
-  }, [e?.status, u]), /* @__PURE__ */ s(L, { open: n, onOpenChange: o, children: /* @__PURE__ */ r(E, { children: [
-    /* @__PURE__ */ s(M, { children: /* @__PURE__ */ s(y, { children: "OAuth Status" }) }),
-    /* @__PURE__ */ s(M, { children: /* @__PURE__ */ r(R, { children: [
-      a ? `Linking your ${l} account` : `Signing in with ${l}`,
+  }, [t?.status, a]), /* @__PURE__ */ e(y, { open: o, onOpenChange: s, children: /* @__PURE__ */ h(R, { children: [
+    /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e($, { children: "OAuth Status" }) }),
+    /* @__PURE__ */ e(C, { children: /* @__PURE__ */ h(P, { children: [
+      n ? `Linking your ${u} account` : `Signing in with ${u}`,
       " ",
-      e?.status ? `${e?.status === "success" ? "successful" : e?.status === "error" ? "failed" : "pending"}` : ""
+      t?.status ? `${t?.status === "success" ? "successful" : t?.status === "error" ? "failed" : "pending"}` : ""
     ] }) }),
-    /* @__PURE__ */ s(B, { isAccountLink: a, handleClose: () => o(!1) })
+    /* @__PURE__ */ e(j, { isAccountLink: n, handleClose: () => s(!1) })
   ] }) });
-}, B = ({
-  isAccountLink: n,
-  handleClose: o
+}, j = ({
+  isAccountLink: o,
+  handleClose: s
 }) => {
-  const { oauthState: e } = N(), a = e?.providerType || "google", { timeRemaining: i, start: u, reset: l } = U(), d = I(null), m = I(null), $ = 250, O = S((c) => {
-    m.current === c || c === void 0 || (m.current = c, d.current?.transition.toggle(c));
+  const { oauthState: t } = w(), n = t?.providerType || "google", { timeRemaining: r, start: a, reset: u } = U(), c = S(null), l = S(t?.status ?? null), E = 250, A = S(t?.status).current, I = _((i) => {
+    l.current === i || i === void 0 || (l.current = i, c.current?.transition.toggle(i));
   }, []);
-  return g(() => {
-    O(e?.status), e?.status === "success" && u(3);
-  }, [e?.status, O, u]), g(() => {
-    i !== null && i <= 0 && (l(), o());
-  }, [i, l, o]), /* @__PURE__ */ r("div", { className: t["oauth-status-modal"], children: [
-    /* @__PURE__ */ s(
-      P,
+  return f(() => {
+    I(t?.status), t?.status === "success" && a(1);
+  }, [t?.status, I, a]), f(() => {
+    r !== null && r <= 0 && (u(), s());
+  }, [r, u, s]), /* @__PURE__ */ h("div", { className: g["oauth-status-modal"], children: [
+    /* @__PURE__ */ e(
+      H,
       {
         animateHeight: !1,
-        timeout: $,
-        items: Z,
-        initialEntered: !1,
-        transitionRef: d,
-        className: t["transition-wrapper"],
-        children: ({ itemKey: c, ...T }) => {
-          const C = ot[c];
-          return /* @__PURE__ */ s("div", { ...T, className: t.status, children: /* @__PURE__ */ s(
-            C,
+        timeout: E,
+        items: b,
+        initialEntered: !!A,
+        initialItem: A,
+        transitionRef: c,
+        className: g["transition-wrapper"],
+        children: ({ itemKey: i, ...L }) => {
+          const M = J[i];
+          return /* @__PURE__ */ e("div", { ...L, className: g.status, children: /* @__PURE__ */ e(
+            M,
             {
-              isAccountLink: n,
-              timeRemaining: i,
-              provider: a
+              isAccountLink: o,
+              timeRemaining: r,
+              provider: n
             }
           ) });
         }
       }
     ),
-    /* @__PURE__ */ s(k, {})
+    /* @__PURE__ */ e(k, {})
   ] });
-}, tt = ({ isAccountLink: n, provider: o }) => {
-  const e = nt[o];
-  return /* @__PURE__ */ r(f, { children: [
-    /* @__PURE__ */ r("div", { className: t.graphic, children: [
-      /* @__PURE__ */ s(
-        w,
-        {
-          strokeWidth: "5%",
-          staticStroke: !0,
-          staticStrokeColor: "var(--cdp-web-colors-line-default)",
-          className: t.spinner
-        }
-      ),
-      e && /* @__PURE__ */ s("span", { className: t.icon, children: /* @__PURE__ */ s(e, {}) })
-    ] }),
-    /* @__PURE__ */ s("p", { className: t.subhead, children: n ? `Linking your ${_(o)} account` : `Signing in with ${_(o)}` }),
-    /* @__PURE__ */ s("p", { className: t.description, children: "Just a moment..." })
-  ] });
-}, st = ({
-  isAccountLink: n,
-  timeRemaining: o,
-  provider: e
-}) => /* @__PURE__ */ r(f, { children: [
-  /* @__PURE__ */ r("div", { className: t.graphic, children: [
-    /* @__PURE__ */ s("span", { className: `${t.ring} ${t["ring-success"]}` }),
-    /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-success"]}`, children: /* @__PURE__ */ s(x, {}) })
-  ] }),
-  /* @__PURE__ */ s("p", { className: t.subhead, children: n ? `${_(e)} account linked` : `Signed in with ${_(e)}` }),
-  /* @__PURE__ */ r("p", { className: `${t.description} ${o === null ? t.invisible : ""}`, children: [
-    "This window will automatically close in ",
-    o ?? "soon"
-  ] })
-] }), et = ({ isAccountLink: n }) => /* @__PURE__ */ r(f, { children: [
-  /* @__PURE__ */ r("div", { className: `${t.graphic} ${t.pad}`, children: [
-    /* @__PURE__ */ s("span", { className: `${t.ring} ${t["ring-error"]}` }),
-    /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-error"]}`, children: /* @__PURE__ */ s(Y, {}) })
-  ] }),
-  /* @__PURE__ */ s("p", { className: t.subhead, children: n ? "Account linking failed" : "Sign in failed" }),
-  /* @__PURE__ */ s("p", { className: t.description, children: "Something went wrong. Please try again." })
-] }), ot = {
-  pending: tt,
-  success: st,
-  error: et
-}, nt = {
-  google: G,
-  apple: K,
-  x: q,
-  telegram: H
+}, F = ({ isAccountLink: o, provider: s }) => {
+  const t = X[s];
+  return /* @__PURE__ */ e(
+    O,
+    {
+      status: "pending",
+      icon: t ? /* @__PURE__ */ e(t, { width: "32", height: "32" }) : void 0,
+      title: o ? `Linking your ${m(s)} account` : `Signing in with ${m(s)}`,
+      description: "Just a moment..."
+    }
+  );
+}, Y = ({
+  isAccountLink: o,
+  timeRemaining: s,
+  provider: t
+}) => /* @__PURE__ */ e(
+  O,
+  {
+    status: "success",
+    title: o ? `${m(t)} account linked` : `Signed in with ${m(t)}`,
+    description: `This window will automatically close in ${s ?? "soon"}`,
+    descriptionHidden: s === null
+  }
+), z = ({ isAccountLink: o }) => /* @__PURE__ */ e(
+  O,
+  {
+    status: "error",
+    title: o ? "Account linking failed" : "Sign in failed",
+    description: "Something went wrong. Please try again."
+  }
+), J = {
+  pending: F,
+  success: Y,
+  error: z
+}, X = {
+  google: K,
+  apple: x,
+  x: G,
+  telegram: D
 };
 export {
-  h as OAUTH_IS_ACCOUNT_LINK_SESSION_STORAGE_KEY,
-  p as OAUTH_PROVIDER_SESSION_STORAGE_KEY,
-  $t as OAuthStatusModal,
-  B as OAuthStatusModalContent,
-  $t as default,
-  vt as useOauthStatusModal
+  p as OAUTH_IS_ACCOUNT_LINK_SESSION_STORAGE_KEY,
+  d as OAUTH_PROVIDER_SESSION_STORAGE_KEY,
+  pt as OAuthStatusModal,
+  j as OAuthStatusModalContent,
+  pt as default,
+  dt as useOauthStatusModal
 };

package/dist/components/SignIn/SignInAuthMethodButtons.d.ts

@@ -27,14 +27,17 @@ export interface SignInAuthMethodButtonProps {
 export interface SignInAuthMethodButtonsProps {
     /** The active auth method. */
     activeMethod?: AuthMethod;
+    /** Called when an auth method (e.g. SIWE) completes successfully from this surface. */
+    onSuccess?: () => void;
 }
 /**
  * The AuthMethodButtons component.
  *
- * @param {AuthMethodButtonProps} props - The props for the AuthMethodButtons component.
+ * @param {SignInAuthMethodButtonsProps} props - The props for the AuthMethodButtons component.
  * @param {AuthMethod} [props.activeMethod] - The active auth method.
+ * @param {() => void} [props.onSuccess] - Called when an auth method completes successfully.
  * @returns {JSX.Element} The AuthMethodButtons component.
  *
  * @group Components
  */
-export declare const SignInAuthMethodButtons: ({ activeMethod }: SignInAuthMethodButtonsProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SignInAuthMethodButtons: ({ activeMethod, onSuccess, }: SignInAuthMethodButtonsProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SignIn/SignInAuthMethodButtons.js

@@ -1,98 +1,129 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { useCallback as v, useMemo as y } from "react";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
-import { useSignInWithOAuth as C } from "./hooks/useSignInWithOAuth.js";
-import { useSignInContext as g } from "./SignInProvider.js";
-import { Button as S } from "../ui/Button/index.js";
-import { ServerError as M } from "../ui/ServerError/index.js";
-import { IconAppleLogo as k } from "../../icons/IconAppleLogo.js";
-import { IconEnvelope as B } from "../../icons/IconEnvelope.js";
-import { IconGoogleLogo as E } from "../../icons/IconGoogleLogo.js";
-import { IconPhone as P } from "../../icons/IconPhone.js";
-import { IconTelegramLogo as O } from "../../icons/IconTelegramLogo.js";
-import { IconXLogo as w } from "../../icons/IconXLogo.js";
-import { toOAuthProviderType as b } from "../../utils/toOAuthProviderType.js";
-import '../../assets/SignInAuthMethodButtons.css';const T = "SignInAuthMethodButtons-module__divider___zphEh", o = {
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import { useMemo as S, useCallback as w } from "react";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
+import { useSignInWithOAuth as B } from "./hooks/useSignInWithOAuth.js";
+import { useStartSiwe as M } from "./hooks/useStartSiwe.js";
+import { useSignInContext as E } from "./SignInProvider.js";
+import "@coinbase/cdp-hooks";
+import { Button as O } from "../ui/Button/index.js";
+import { siweConnectors as P } from "../SiweStatusView/connectors/siweConnectors.js";
+import "libphonenumber-js";
+import { toSiweProvider as k } from "../SiweStatusView/toSiweProvider.js";
+import { ServerError as W } from "../ui/ServerError/index.js";
+import { IconAppleLogo as j } from "../../icons/IconAppleLogo.js";
+import { IconEnvelope as T } from "../../icons/IconEnvelope.js";
+import { IconGoogleLogo as x } from "../../icons/IconGoogleLogo.js";
+import { IconPhone as L } from "../../icons/IconPhone.js";
+import { IconTelegramLogo as N } from "../../icons/IconTelegramLogo.js";
+import { IconXLogo as D } from "../../icons/IconXLogo.js";
+import { toOAuthProviderType as I } from "../../utils/toOAuthProviderType.js";
+import '../../assets/SignInAuthMethodButtons.css';const H = "SignInAuthMethodButtons-module__divider___zphEh", e = {
   "auth-method-buttons": "SignInAuthMethodButtons-module__auth-method-buttons___jYEH7",
   "auth-btn": "SignInAuthMethodButtons-module__auth-btn___o1a09",
   "auth-btn-icon": "SignInAuthMethodButtons-module__auth-btn-icon___VjvFY",
   "auth-btn-label": "SignInAuthMethodButtons-module__auth-btn-label___mEWd3",
-  divider: T
-}, _ = {
+  divider: H
+}, G = Object.fromEntries(
+  Object.entries(P).map(([r, i]) => {
+    const a = i.icon;
+    return [`siwe:${r}`, { label: `Continue with ${i.label}`, icon: /* @__PURE__ */ n(a, {}) }];
+  })
+), A = {
   email: {
     label: "Continue with email",
-    icon: /* @__PURE__ */ n(B, {})
+    icon: /* @__PURE__ */ n(T, {})
   },
   sms: {
     label: "Continue with phone",
-    icon: /* @__PURE__ */ n(P, {})
+    icon: /* @__PURE__ */ n(L, {})
   },
   "oauth:google": {
     label: "Continue with Google",
-    icon: /* @__PURE__ */ n(E, {})
+    icon: /* @__PURE__ */ n(x, {})
   },
   "oauth:apple": {
     label: "Continue with Apple",
-    icon: /* @__PURE__ */ n(k, {})
+    icon: /* @__PURE__ */ n(j, {})
   },
   "oauth:x": {
     label: "Continue with X",
-    icon: /* @__PURE__ */ n(w, {})
+    icon: /* @__PURE__ */ n(D, {})
   },
   "oauth:telegram": {
     label: "Continue with Telegram",
-    icon: /* @__PURE__ */ n(O, {})
-  }
-}, q = ({ activeMethod: a }) => {
+    icon: /* @__PURE__ */ n(N, {})
+  },
+  ...G
+}, st = ({
+  activeMethod: r,
+  onSuccess: i
+}) => {
   const {
-    state: { authMethods: l }
-  } = g(), {
-    signInWithOAuth: u,
-    isPending: s,
-    error: h,
-    oauthProvider: c
-  } = C(), m = v(
+    state: { authMethods: a },
+    dispatch: u
+  } = E(), {
+    signInWithOAuth: h,
+    isPending: c,
+    error: m,
+    oauthProvider: p
+  } = B(), d = M("base"), b = S(
+    () => ({ base: d }),
+    [d]
+  ), g = w(
     async (t) => {
-      const i = b(t);
-      i && u(i);
+      const o = I(t);
+      o && h(o);
+    },
+    [h]
+  ), _ = w(
+    (t) => {
+      const o = k(t);
+      o && b[o](i);
     },
-    [u]
-  ), { dispatch: p } = g(), e = y(() => (l || ["email"]).map((t) => {
-    if (!_[t])
+    [b, i]
+  ), s = S(() => (a || ["email"]).map((t) => {
+    if (!A[t])
       return null;
-    const { label: i, icon: f } = _[t], d = t.startsWith("oauth:"), A = d ? () => m(t) : () => p({ type: "SET_AUTH_METHOD", payload: { authMethod: t } }), I = d && c.current === b(t) && s;
+    const { label: o, icon: v } = A[t], f = t.startsWith("oauth:"), C = t.startsWith("siwe:") ? () => _(t) : f ? () => g(t) : () => u({ type: "SET_AUTH_METHOD", payload: { authMethod: t } }), y = f && p.current === I(t) && c;
     return {
       key: t,
-      label: i,
-      icon: f,
-      onClick: A,
-      isPending: I
+      label: o,
+      icon: v,
+      onClick: C,
+      isPending: y
     };
-  }).filter((t) => t !== null), [l, p, m, s, c]);
-  return !e.length || e.length === 1 && e[0].key === a ? null : /* @__PURE__ */ r("div", { className: o["auth-method-buttons"], children: [
-    /* @__PURE__ */ r("div", { className: o.divider, children: [
+  }).filter((t) => t !== null), [
+    a,
+    u,
+    g,
+    _,
+    c,
+    p
+  ]);
+  return !s.length || s.length === 1 && s[0].key === r ? null : /* @__PURE__ */ l("div", { className: e["auth-method-buttons"], children: [
+    /* @__PURE__ */ l("div", { className: e.divider, children: [
       /* @__PURE__ */ n("hr", {}),
       /* @__PURE__ */ n("span", { children: "or" })
     ] }),
-    e.map((t) => t.key === a ? null : /* @__PURE__ */ r(
-      S,
+    s.map((t) => t.key === r ? null : /* @__PURE__ */ l(
+      O,
       {
         "aria-label": t.ariaLabel,
-        className: o["auth-btn"],
+        className: e["auth-btn"],
         type: "button",
         variant: "secondary",
         onClick: t.onClick,
         isPending: t.isPending,
         children: [
-          /* @__PURE__ */ n("span", { className: o["auth-btn-icon"], children: t.icon }),
-          /* @__PURE__ */ n("span", { className: o["auth-btn-label"], children: t.label })
+          /* @__PURE__ */ n("span", { className: e["auth-btn-icon"], children: t.icon }),
+          /* @__PURE__ */ n("span", { className: e["auth-btn-label"], children: t.label })
         ]
       },
       t.key
     )),
-    h && /* @__PURE__ */ n(M, { error: h })
+    m && /* @__PURE__ */ n(W, { error: m })
   ] });
 };
 export {
-  q as SignInAuthMethodButtons
+  st as SignInAuthMethodButtons
 };

package/dist/components/SignIn/SignInBackButton.js

@@ -5,7 +5,7 @@ import { IconArrowLeft as S } from "../../icons/IconArrowLeft.js";
 import "../../theme/theme.js";
 import { useSignInContext as d } from "./SignInProvider.js";
 import "@coinbase/cdp-hooks";
-import "../../chunks/CDPReactProvider.CFWIUvzR.js";
+import "../../chunks/CDPReactProvider.BWInVuNJ.js";
 import '../../assets/SignInBackButton.css';const B = "SignInBackButton-module__icon___stNFS", k = {
   icon: B
 }, E = ({