@b3dotfun/sdk 0.1.69-alpha.23 → 0.1.69-alpha.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/dist/cjs/global-account/react/components/AvatarEditor/AvatarEditor.js +3 -1
  2. package/dist/cjs/global-account/react/components/ManageAccount/BottomNavigation.js +4 -2
  3. package/dist/cjs/global-account/react/components/ManageAccount/Header.js +37 -4
  4. package/dist/cjs/global-account/react/components/ManageAccount/HomeContent.js +4 -1
  5. package/dist/cjs/global-account/react/components/ManageAccount/ProfileSection.js +5 -3
  6. package/dist/cjs/global-account/react/components/ManageAccount/SettingsContent.js +3 -1
  7. package/dist/cjs/global-account/react/components/ManageAccount/SettingsProfileCard.js +25 -14
  8. package/dist/cjs/global-account/react/components/SignInWithB3/BetterAuthSignIn.d.ts +6 -1
  9. package/dist/cjs/global-account/react/components/SignInWithB3/BetterAuthSignIn.js +2 -2
  10. package/dist/cjs/global-account/react/components/SignInWithB3/BetterAuthVerifyEmail.d.ts +37 -0
  11. package/dist/cjs/global-account/react/components/SignInWithB3/BetterAuthVerifyEmail.js +85 -0
  12. package/dist/cjs/global-account/react/components/SignInWithB3/SignIn.js +14 -4
  13. package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Flow.d.ts +1 -1
  14. package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Flow.js +2 -2
  15. package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.d.ts +3 -1
  16. package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.js +2 -2
  17. package/dist/cjs/global-account/react/components/index.d.ts +1 -0
  18. package/dist/cjs/global-account/react/components/index.js +5 -3
  19. package/dist/cjs/global-account/react/hooks/useBetterAuth.d.ts +1 -1
  20. package/dist/cjs/global-account/react/hooks/useBetterAuth.js +5 -4
  21. package/dist/cjs/global-account/react/stores/useModalStore.d.ts +2 -0
  22. package/dist/cjs/shared/constants/index.d.ts +1 -0
  23. package/dist/cjs/shared/constants/index.js +2 -1
  24. package/dist/esm/global-account/react/components/AvatarEditor/AvatarEditor.js +3 -1
  25. package/dist/esm/global-account/react/components/ManageAccount/BottomNavigation.js +5 -3
  26. package/dist/esm/global-account/react/components/ManageAccount/Header.js +38 -5
  27. package/dist/esm/global-account/react/components/ManageAccount/HomeContent.js +4 -1
  28. package/dist/esm/global-account/react/components/ManageAccount/ProfileSection.js +6 -4
  29. package/dist/esm/global-account/react/components/ManageAccount/SettingsContent.js +4 -2
  30. package/dist/esm/global-account/react/components/ManageAccount/SettingsProfileCard.js +25 -14
  31. package/dist/esm/global-account/react/components/SignInWithB3/BetterAuthSignIn.d.ts +6 -1
  32. package/dist/esm/global-account/react/components/SignInWithB3/BetterAuthSignIn.js +2 -2
  33. package/dist/esm/global-account/react/components/SignInWithB3/BetterAuthVerifyEmail.d.ts +37 -0
  34. package/dist/esm/global-account/react/components/SignInWithB3/BetterAuthVerifyEmail.js +82 -0
  35. package/dist/esm/global-account/react/components/SignInWithB3/SignIn.js +16 -6
  36. package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.d.ts +1 -1
  37. package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.js +2 -2
  38. package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.d.ts +3 -1
  39. package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.js +2 -2
  40. package/dist/esm/global-account/react/components/index.d.ts +1 -0
  41. package/dist/esm/global-account/react/components/index.js +1 -0
  42. package/dist/esm/global-account/react/hooks/useBetterAuth.d.ts +1 -1
  43. package/dist/esm/global-account/react/hooks/useBetterAuth.js +5 -4
  44. package/dist/esm/global-account/react/stores/useModalStore.d.ts +2 -0
  45. package/dist/esm/shared/constants/index.d.ts +1 -0
  46. package/dist/esm/shared/constants/index.js +1 -0
  47. package/dist/styles/index.css +1 -1
  48. package/dist/types/global-account/react/components/SignInWithB3/BetterAuthSignIn.d.ts +6 -1
  49. package/dist/types/global-account/react/components/SignInWithB3/BetterAuthVerifyEmail.d.ts +37 -0
  50. package/dist/types/global-account/react/components/SignInWithB3/SignInWithB3Flow.d.ts +1 -1
  51. package/dist/types/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.d.ts +3 -1
  52. package/dist/types/global-account/react/components/index.d.ts +1 -0
  53. package/dist/types/global-account/react/hooks/useBetterAuth.d.ts +1 -1
  54. package/dist/types/global-account/react/stores/useModalStore.d.ts +2 -0
  55. package/dist/types/shared/constants/index.d.ts +1 -0
  56. package/package.json +1 -1
  57. package/src/global-account/react/components/AvatarEditor/AvatarEditor.tsx +3 -1
  58. package/src/global-account/react/components/ManageAccount/BottomNavigation.tsx +18 -14
  59. package/src/global-account/react/components/ManageAccount/Header.tsx +74 -4
  60. package/src/global-account/react/components/ManageAccount/HomeContent.tsx +25 -19
  61. package/src/global-account/react/components/ManageAccount/ProfileSection.tsx +14 -7
  62. package/src/global-account/react/components/ManageAccount/SettingsContent.tsx +18 -14
  63. package/src/global-account/react/components/ManageAccount/SettingsProfileCard.tsx +29 -20
  64. package/src/global-account/react/components/SignInWithB3/BetterAuthSignIn.tsx +7 -1
  65. package/src/global-account/react/components/SignInWithB3/BetterAuthVerifyEmail.tsx +155 -0
  66. package/src/global-account/react/components/SignInWithB3/SignIn.tsx +43 -14
  67. package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx +8 -1
  68. package/src/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.tsx +4 -2
  69. package/src/global-account/react/components/index.ts +5 -0
  70. package/src/global-account/react/hooks/useBetterAuth.ts +5 -4
  71. package/src/global-account/react/stores/useModalStore.ts +2 -0
  72. package/src/shared/constants/index.ts +2 -0
@@ -73,7 +73,7 @@ function useBetterAuth() {
73
73
  throw error;
74
74
  }
75
75
  }, [exchangeForFeathersJWT, setIsAuthenticating, setHasStartedConnecting]);
76
- const signUpWithEmail = (0, react_2.useCallback)(async (email, password, name) => {
76
+ const signUpWithEmail = (0, react_2.useCallback)(async (email, password, name, verifyCallbackURL) => {
77
77
  debug("Signing up with email", { email, name });
78
78
  setHasStartedConnecting(true);
79
79
  setIsAuthenticating(true);
@@ -84,11 +84,12 @@ function useBetterAuth() {
84
84
  }
85
85
  const token = result.data?.token;
86
86
  if (!token) {
87
- // requireEmailVerification is enabled — send verification email
88
- // with the client's origin as callbackURL so the user returns here
87
+ // requireEmailVerification is enabled — send verification email with
88
+ // a callbackURL Better Auth redirects to after server-side verify.
89
+ // Pass verifyCallbackURL to land on a dedicated confirmation page.
89
90
  await better_auth_client_1.betterAuthClient.sendVerificationEmail({
90
91
  email,
91
- callbackURL: `${window.location.origin}?authStrategy=better-auth`,
92
+ callbackURL: verifyCallbackURL || `${window.location.origin}?authStrategy=better-auth`,
92
93
  });
93
94
  throw new EmailVerificationRequiredError();
94
95
  }
@@ -41,6 +41,8 @@ export interface SignInWithB3ModalProps extends BaseModalProps {
41
41
  source?: "signInWithB3Button" | "requestPermissions";
42
42
  /** Whether to show the signers enabled modal */
43
43
  signersEnabled?: boolean;
44
+ /** URL Better Auth redirects to after server-side email verification. */
45
+ verifyEmailRedirectTo?: string;
44
46
  }
45
47
  /**
46
48
  * Props for the Request Permissions modal
@@ -16,3 +16,4 @@ export declare const CLIENT_APP_BUNDLE_ID: string;
16
16
  export declare const B3_AUTH_COOKIE_NAME = "b3-auth";
17
17
  export declare const ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
18
18
  export declare const PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";
19
+ export declare const AVATAR_COLORS: string[];
@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
14
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.PUBLIC_BASE_RPC_URL = exports.ENS_GATEWAY_URL = exports.B3_AUTH_COOKIE_NAME = exports.CLIENT_APP_BUNDLE_ID = exports.THIRDWEB_CLIENT_ID = exports.THIRDWEB_SECRET_KEY = exports.tokenIcons = exports.ecosystemWalletId = exports.b3CoinIcon = exports.siteURL = void 0;
17
+ exports.AVATAR_COLORS = exports.PUBLIC_BASE_RPC_URL = exports.ENS_GATEWAY_URL = exports.B3_AUTH_COOKIE_NAME = exports.CLIENT_APP_BUNDLE_ID = exports.THIRDWEB_CLIENT_ID = exports.THIRDWEB_SECRET_KEY = exports.tokenIcons = exports.ecosystemWalletId = exports.b3CoinIcon = exports.siteURL = void 0;
18
18
  __exportStar(require("./currency"), exports);
19
19
  exports.siteURL = "https://basement.fun";
20
20
  exports.b3CoinIcon = "https://cdn.b3.fun/b3-coin-3d.png";
@@ -38,3 +38,4 @@ exports.CLIENT_APP_BUNDLE_ID = process.env.EXPO_PUBLIC_B3_BUNDLE_ID || "";
38
38
  exports.B3_AUTH_COOKIE_NAME = "b3-auth";
39
39
  exports.ENS_GATEWAY_URL = "https://ens-gateway.b3.fun/";
40
40
  exports.PUBLIC_BASE_RPC_URL = "https://base-rpc.publicnode.com";
41
+ exports.AVATAR_COLORS = ["#3368ef", "#272727", "#6366f1", "#06b6d4", "#eeb0d9", "#ba3fbf", "#ff777b", "#dfbb53"];
@@ -41,6 +41,8 @@ export function AvatarEditor({ onSetAvatar, className }) {
41
41
  const { user, setUser } = useAuthentication(partnerId);
42
42
  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
43
43
  const contentType = useModalStore(state => state.contentType);
44
+ const { authStrategy } = useB3Config();
45
+ const isBetterAuth = authStrategy === "better-auth";
44
46
  const account = useActiveAccount();
45
47
  const { data: profile, refetch: refreshProfile } = useProfile({
46
48
  address: account?.address,
@@ -118,7 +120,7 @@ export function AvatarEditor({ onSetAvatar, className }) {
118
120
  setCroppedAreaPixels(null);
119
121
  };
120
122
  const handleSaveChanges = async () => {
121
- if (!account?.address) {
123
+ if (!isBetterAuth && !account?.address) {
122
124
  toast.error("No account connected");
123
125
  return;
124
126
  }
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { TabsListPrimitive, TabTriggerPrimitive, useModalStore } from "../../../../global-account/react/index.js";
2
+ import { TabsListPrimitive, TabTriggerPrimitive, useB3Config, useModalStore } from "../../../../global-account/react/index.js";
3
3
  const HomeIcon = () => {
4
4
  return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.5227 1.33636C12.1804 1.24368 11.8196 1.24368 11.4773 1.33636C11.08 1.44395 10.7454 1.7066 10.4784 1.91623L10.4038 1.97465L3.54376 7.31012C3.16713 7.6024 2.83532 7.85991 2.58806 8.19421C2.37107 8.48759 2.20942 8.8181 2.11106 9.1695C1.99898 9.56992 1.99943 9.98993 1.99995 10.4667L2.00002 17.8385C2 18.3657 1.99998 18.8204 2.03059 19.195C2.06289 19.5904 2.1342 19.9836 2.327 20.362C2.61462 20.9264 3.07356 21.3854 3.63805 21.673C4.01643 21.8658 4.40964 21.9371 4.80499 21.9694C5.17956 22 5.63431 22 6.16145 22H17.8386C18.3657 22 18.8205 22 19.195 21.9694C19.5904 21.9371 19.9836 21.8658 20.362 21.673C20.9265 21.3854 21.3854 20.9264 21.673 20.362C21.8658 19.9836 21.9371 19.5904 21.9694 19.195C22.0001 18.8204 22 18.3657 22 17.8386L22.0001 10.4667C22.0006 9.98993 22.0011 9.56992 21.889 9.1695C21.7906 8.8181 21.629 8.48759 21.412 8.19421C21.1647 7.8599 20.8329 7.6024 20.4563 7.31011L13.5963 1.97465L13.5216 1.91623C13.2546 1.7066 12.9201 1.44395 12.5227 1.33636ZM8.00003 16C7.44775 16 7.00003 16.4477 7.00003 17C7.00003 17.5523 7.44775 18 8.00003 18H16C16.5523 18 17 17.5523 17 17C17 16.4477 16.5523 16 16 16H8.00003Z", fill: "currentColor" }) }));
5
5
  };
@@ -11,11 +11,13 @@ const SettingsIcon = () => {
11
11
  };
12
12
  const BottomNavigation = () => {
13
13
  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
14
- return (_jsx("div", { className: "b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]", children: _jsxs(TabsListPrimitive, { className: "flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent", children: [_jsxs(TabTriggerPrimitive, { value: "home", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", children: [_jsx(HomeIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Home" })] }), _jsxs(TabTriggerPrimitive, { value: "swap", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", onClick: () => {
14
+ const { authStrategy } = useB3Config();
15
+ const isBetterAuth = authStrategy === "better-auth";
16
+ return (_jsx("div", { className: "b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]", children: _jsxs(TabsListPrimitive, { className: "flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent", children: [_jsxs(TabTriggerPrimitive, { value: "home", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", children: [_jsx(HomeIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Home" })] }), !isBetterAuth && (_jsxs(TabTriggerPrimitive, { value: "swap", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", onClick: () => {
15
17
  setB3ModalContentType({
16
18
  type: "anySpend",
17
19
  showBackButton: true,
18
20
  });
19
- }, children: [_jsx(SwapIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Swap" })] }), _jsxs(TabTriggerPrimitive, { value: "settings", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", children: [_jsx(SettingsIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Settings" })] })] }) }));
21
+ }, children: [_jsx(SwapIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Swap" })] })), _jsxs(TabTriggerPrimitive, { value: "settings", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B] dark:data-[state=active]:text-white", children: [_jsx(SettingsIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Settings" })] })] }) }));
20
22
  };
21
23
  export default BottomNavigation;
@@ -1,7 +1,9 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { CopyToClipboard, useAuthentication, useModalStore, } from "../../../../global-account/react/index.js";
2
+ import { CopyToClipboard, useAuthentication, useB3Config, useModalStore, } from "../../../../global-account/react/index.js";
3
+ import { AVATAR_COLORS } from "../../../../shared/constants/index.js";
3
4
  import * as AccordionPrimitive from "@radix-ui/react-accordion";
4
5
  import { AnimatePresence, motion } from "framer-motion";
6
+ import Avatar from "boring-avatars";
5
7
  import { Loader2 } from "lucide-react";
6
8
  import { useState } from "react";
7
9
  import { useActiveWallet, useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
@@ -39,7 +41,34 @@ function WalletItem({ wallet, isActive, onClick }) {
39
41
  : "Wallet";
40
42
  return (_jsxs("div", { className: `b3-modal-wallet-item ${isActive ? "b3-modal-wallet-item-active dark:bg-b3-line bg-[#F4F4F5]" : "hover:bg-b3-line/50"} box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors`, onClick: onClick, children: [_jsx("div", { className: "relative size-10 shrink-0 text-clip rounded-full", children: isGlobalAccount ? (_jsx("div", { className: "flex size-full items-center justify-center p-1", children: _jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "size-full object-contain" }) })) : walletImage ? (_jsx("img", { src: walletImage, alt: walletName, className: "size-full object-contain p-1" })) : (_jsx("div", { className: "flex size-full items-center justify-center", children: _jsx(WalletIcon, {}) })) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("p", { className: "text-b3-grey font-neue-montreal-semibold truncate text-sm", children: walletName }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: centerTruncate(address, 4) })] }), isActive && (_jsx("div", { className: "shrink-0", children: _jsx(CheckIcon, {}) }))] }));
41
43
  }
44
+ function BetterAuthHeader({ onLogout }) {
45
+ const contentType = useModalStore(state => state.contentType);
46
+ const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
47
+ const partnerId = contentType?.partnerId;
48
+ const { logout, user } = useAuthentication(partnerId);
49
+ const [logoutLoading, setLogoutLoading] = useState(false);
50
+ const displayName = user?.username || user?.email || "Account";
51
+ const onLogoutEnhanced = async () => {
52
+ setLogoutLoading(true);
53
+ try {
54
+ await logout();
55
+ onLogout?.();
56
+ }
57
+ finally {
58
+ setB3ModalOpen(false);
59
+ setLogoutLoading(false);
60
+ }
61
+ };
62
+ return (_jsxs("div", { className: "bg-b3-background border-b3-line flex items-center justify-between border-b px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "size-10 shrink-0 overflow-hidden rounded-full", children: _jsx(Avatar, { name: displayName, variant: "beam", size: 40, colors: AVATAR_COLORS }) }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [user?.username && (_jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-left text-sm", children: user.username })), user?.email && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: user.email }), _jsx(CopyToClipboard, { text: user.email })] }))] })] }), _jsxs("button", { className: "border-b3-line hover:bg-b3-line flex items-center justify-center gap-1.5 rounded-xl border border-solid px-3 py-2 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, children: [logoutLoading ? (_jsx(Loader2, { className: "animate-spin", size: 16 })) : (_jsx(SignOutIcon, { size: 16, className: "text-b3-grey" })), _jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Sign out" })] })] }));
63
+ }
42
64
  export function Header({ onLogout }) {
65
+ const { authStrategy } = useB3Config();
66
+ if (authStrategy === "better-auth") {
67
+ return _jsx(BetterAuthHeader, { onLogout: onLogout });
68
+ }
69
+ return _jsx(WalletHeader, { onLogout: onLogout });
70
+ }
71
+ function WalletHeader({ onLogout }) {
43
72
  const activeWallet = useActiveWallet();
44
73
  const connectedWallets = useConnectedWallets();
45
74
  const setActiveWallet = useSetActiveWallet();
@@ -56,10 +85,14 @@ export function Header({ onLogout }) {
56
85
  const isActiveGlobalAccount = activeWallet?.id.includes("ecosystem");
57
86
  const onLogoutEnhanced = async () => {
58
87
  setLogoutLoading(true);
59
- await logout();
60
- onLogout?.();
61
- setB3ModalOpen(false);
62
- setLogoutLoading(false);
88
+ try {
89
+ await logout();
90
+ onLogout?.();
91
+ }
92
+ finally {
93
+ setB3ModalOpen(false);
94
+ setLogoutLoading(false);
95
+ }
63
96
  };
64
97
  const handleWalletSwitch = (wallet) => {
65
98
  setActiveWallet(wallet);
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useB3Config } from "../../../../global-account/react/index.js";
2
3
  import { Tabs, TabsContent, TabsList, TabTrigger } from "../ui/Tabs.js";
3
4
  import { Header } from "./Header.js";
4
5
  import HomeActions from "./HomeActions.js";
@@ -6,5 +7,7 @@ import NFTContent from "./NFTContent.js";
6
7
  import ProfileSection from "./ProfileSection.js";
7
8
  import TokenContent from "./TokenContent.js";
8
9
  export function HomeContent({ showDeposit = false, showSwap = true }) {
9
- return (_jsxs("div", { className: "flex flex-col", children: [_jsx(Header, {}), _jsxs("div", { className: "flex flex-col", children: [_jsx(ProfileSection, {}), _jsx(HomeActions, { showDeposit: showDeposit, showSwap: showSwap }), _jsx("div", { className: "b3-modal-balance-content space-y-2 p-5", children: _jsxs(Tabs, { defaultValue: "balance", children: [_jsxs(TabsList, { className: "b3-modal-balance-tabs-list", children: [_jsx(TabTrigger, { value: "balance", className: "font-neue-montreal-semibold p-0 pr-3", children: "Balance" }), _jsx(TabTrigger, { value: "nfts", className: "font-neue-montreal-semibold p-0 pr-3", children: "NFTs" })] }), _jsx(TabsContent, { value: "balance", className: "px-0 pb-4 pt-2", children: _jsx(TokenContent, {}) }), _jsx(TabsContent, { value: "nfts", className: "px-0 pb-4 pt-2", children: _jsx(NFTContent, {}) })] }) })] })] }));
10
+ const { authStrategy } = useB3Config();
11
+ const isBetterAuth = authStrategy === "better-auth";
12
+ return (_jsxs("div", { className: "flex flex-col", children: [_jsx(Header, {}), _jsxs("div", { className: "flex flex-col", children: [_jsx(ProfileSection, {}), !isBetterAuth && _jsx(HomeActions, { showDeposit: showDeposit, showSwap: showSwap }), !isBetterAuth && (_jsx("div", { className: "b3-modal-balance-content space-y-2 p-5", children: _jsxs(Tabs, { defaultValue: "balance", children: [_jsxs(TabsList, { className: "b3-modal-balance-tabs-list", children: [_jsx(TabTrigger, { value: "balance", className: "font-neue-montreal-semibold p-0 pr-3", children: "Balance" }), _jsx(TabTrigger, { value: "nfts", className: "font-neue-montreal-semibold p-0 pr-3", children: "NFTs" })] }), _jsx(TabsContent, { value: "balance", className: "px-0 pb-4 pt-2", children: _jsx(TokenContent, {}) }), _jsx(TabsContent, { value: "nfts", className: "px-0 pb-4 pt-2", children: _jsx(NFTContent, {}) })] }) }))] })] }));
10
13
  }
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useAccountWallet, useModalStore, useProfile, useSimBalance, useUser, } from "../../../../global-account/react/index.js";
2
+ import { useAccountWallet, useB3Config, useModalStore, useProfile, useSimBalance, useUser, } from "../../../../global-account/react/index.js";
3
3
  import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
4
+ import { AVATAR_COLORS } from "../../../../shared/constants/index.js";
4
5
  import { formatUsername } from "../../../../shared/utils/index.js";
5
6
  import { formatDisplayNumber } from "../../../../shared/utils/number.js";
6
7
  import Avatar from "boring-avatars";
@@ -9,8 +10,9 @@ import { useCallback, useEffect, useMemo, useState } from "react";
9
10
  import { useActiveAccount } from "thirdweb/react";
10
11
  import { useFirstEOA } from "../../hooks/useFirstEOA.js";
11
12
  import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer.js";
12
- const AVATAR_COLORS = ["#3368ef", "#272727", "#6366f1", "#06b6d4", "#eeb0d9", "#ba3fbf", "#ff777b", "#dfbb53"];
13
13
  const ProfileSection = () => {
14
+ const { authStrategy } = useB3Config();
15
+ const isBetterAuth = authStrategy === "better-auth";
14
16
  const account = useActiveAccount();
15
17
  const { address: eoaAddress } = useFirstEOA();
16
18
  const { address: smartWalletAddress } = useAccountWallet();
@@ -45,7 +47,7 @@ const ProfileSection = () => {
45
47
  setImgError(false);
46
48
  }, [avatarSrc]);
47
49
  const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
48
- const avatarSeed = eoaAddress || account?.address || smartWalletAddress || currentUsername || "user";
49
- return (_jsx("div", { className: "flex items-center justify-between px-5 py-6", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [_jsx("div", { className: "border-b3-line border-1 bg-b3-primary-wash size-14 overflow-hidden rounded-full border", children: avatarSrc && !imgError ? (_jsx(IPFSMediaRenderer, { src: avatarSrc, alt: "Profile Avatar", className: "h-full w-full object-cover", onError: handleImgError })) : (_jsx(Avatar, { name: avatarSeed, variant: "beam", size: 56, colors: AVATAR_COLORS })) }), _jsx("button", { onClick: handleEditAvatar, className: "border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full border-4 bg-[#a0a0ab] transition-colors", children: _jsx(Pencil, { size: 10, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info flex flex-col gap-1", children: [_jsxs("h2", { className: "text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl", children: [_jsx("div", { className: "text-b3-foreground-muted", children: " $" }), _jsx("div", { className: "text-[30px]", children: formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 }) })] }), _jsx("div", { className: "b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]", children: currentUsername })] })] }) }));
50
+ const avatarSeed = eoaAddress || account?.address || smartWalletAddress || currentUsername || user?.email || "user";
51
+ return (_jsx("div", { className: "flex items-center justify-between px-5 py-6", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [_jsx("div", { className: "border-b3-line border-1 bg-b3-primary-wash size-14 overflow-hidden rounded-full border", children: avatarSrc && !imgError ? (_jsx(IPFSMediaRenderer, { src: avatarSrc, alt: "Profile Avatar", className: "h-full w-full object-cover", onError: handleImgError })) : (_jsx(Avatar, { name: avatarSeed, variant: "beam", size: 56, colors: AVATAR_COLORS })) }), _jsx("button", { onClick: handleEditAvatar, className: "border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full border-4 bg-[#a0a0ab] transition-colors", children: _jsx(Pencil, { size: 10, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info flex flex-col gap-1", children: [!isBetterAuth && (_jsxs("h2", { className: "text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl", children: [_jsx("div", { className: "text-b3-foreground-muted", children: " $" }), _jsx("div", { className: "text-[30px]", children: formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 }) })] })), _jsx("div", { className: "b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]", children: currentUsername }), isBetterAuth && user?.email && (_jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: user.email }))] })] }) }));
50
52
  };
51
53
  export default ProfileSection;
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useAuthentication, useModalStore } from "../../../../global-account/react/index.js";
2
+ import { useAuthentication, useB3Config, useModalStore } from "../../../../global-account/react/index.js";
3
3
  import { client } from "../../../../shared/utils/thirdweb.js";
4
4
  import { getSessionDurationDays, SESSION_DURATION_LABELS } from "../../../../shared/utils/session-duration.js";
5
5
  import { Loader2 } from "lucide-react";
@@ -10,6 +10,8 @@ import ModalHeader from "../ModalHeader/ModalHeader.js";
10
10
  import SettingsMenuItem from "./SettingsMenuItem.js";
11
11
  import SettingsProfileCard from "./SettingsProfileCard.js";
12
12
  const SettingsContent = ({ partnerId, onLogout, chain, }) => {
13
+ const { authStrategy } = useB3Config();
14
+ const isBetterAuth = authStrategy === "better-auth";
13
15
  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
14
16
  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
15
17
  const { logout, user } = useAuthentication(partnerId);
@@ -45,7 +47,7 @@ const SettingsContent = ({ partnerId, onLogout, chain, }) => {
45
47
  setB3ModalOpen(false);
46
48
  setLogoutLoading(false);
47
49
  };
48
- return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [_jsx(ModalHeader, { showBackButton: false, showCloseButton: false, title: "Settings" }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "b3-modal-settings-profile-card dark:border-b3-line dark:bg-b3-background flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: _jsx(SettingsProfileCard, {}) }) }), _jsxs("div", { className: "space-y-3 px-5", children: [_jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Linked Accounts", subtitle: `${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`, onClick: () => handleNavigate("linkAccount") }), _jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Notifications", subtitle: "Manage your notifications", onClick: () => handleNavigate("notifications") }), _jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Stay signed in", subtitle: SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`, onClick: () => handleNavigate("sessionDuration") })] }), _jsx("div", { className: "mt-auto px-5 pb-5", children: _jsxs("button", { type: "button", className: "b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background dark:bg-b3-background dark:border-b3-line dark:hover:bg-b3-line/80 flex w-full items-center justify-center gap-1.5 rounded-xl border border-solid p-3 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, style: {
50
+ return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [_jsx(ModalHeader, { showBackButton: false, showCloseButton: false, title: "Settings" }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "b3-modal-settings-profile-card dark:border-b3-line dark:bg-b3-background flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: _jsx(SettingsProfileCard, {}) }) }), _jsxs("div", { className: "space-y-3 px-5", children: [!isBetterAuth && (_jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Linked Accounts", subtitle: `${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`, onClick: () => handleNavigate("linkAccount") })), _jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Notifications", subtitle: "Manage your notifications", onClick: () => handleNavigate("notifications") }), _jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Stay signed in", subtitle: SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`, onClick: () => handleNavigate("sessionDuration") })] }), _jsx("div", { className: "mt-auto px-5 pb-5", children: _jsxs("button", { type: "button", className: "b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background dark:bg-b3-background dark:border-b3-line dark:hover:bg-b3-line/80 flex w-full items-center justify-center gap-1.5 rounded-xl border border-solid p-3 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, style: {
49
51
  boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05)",
50
52
  }, children: [logoutLoading ? (_jsx(Loader2, { className: "text-b3-grey animate-spin", size: 20 })) : (_jsx(SignOutIcon, { size: 20, className: "text-b3-grey", color: "currentColor" })), _jsx("p", { className: "text-b3-grey dark:text-b3-foreground-muted font-neue-montreal-semibold text-base", children: "Sign out" })] }) })] }));
51
53
  };
@@ -16,7 +16,8 @@ const SettingsProfileCard = () => {
16
16
  address: eoaAddress || account?.address,
17
17
  fresh: true,
18
18
  });
19
- const { partnerId } = useB3Config();
19
+ const { partnerId, authStrategy } = useB3Config();
20
+ const isBetterAuth = authStrategy === "better-auth";
20
21
  const { user, setUser } = useAuthentication(partnerId);
21
22
  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
22
23
  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
@@ -66,19 +67,29 @@ const SettingsProfileCard = () => {
66
67
  }
67
68
  setIsSaving(true);
68
69
  try {
69
- const sanitizedUsername = ens_normalize(editedUsername.trim());
70
- const b3Username = `${sanitizedUsername}.b3.fun`;
71
- const usernameSignMessage = `Register "${b3Username}"`;
72
- const usernameSignature = await account?.signMessage({ message: usernameSignMessage });
73
- if (!usernameSignature) {
74
- throw new Error("Failed to sign username registration message");
70
+ let updatedUser;
71
+ if (isBetterAuth) {
72
+ // Better Auth: register username without wallet signing (DB-only, no ENS)
73
+ // Skip ens_normalize it rejects underscores/mixed-case that are valid non-ENS usernames
74
+ const sanitizedUsername = editedUsername.trim().toLowerCase();
75
+ // Type assertion needed: b3-mono now accepts message/hash as optional for Better Auth users
76
+ updatedUser = (await app
77
+ .service("users")
78
+ .registerUsername({ username: sanitizedUsername }, {}));
79
+ }
80
+ else {
81
+ // Thirdweb: register username with wallet signature + on-chain ENS
82
+ const sanitizedUsername = ens_normalize(editedUsername.trim());
83
+ const b3Username = `${sanitizedUsername}.b3.fun`;
84
+ const usernameSignMessage = `Register "${b3Username}"`;
85
+ const usernameSignature = await account?.signMessage({ message: usernameSignMessage });
86
+ if (!usernameSignature) {
87
+ throw new Error("Failed to sign username registration message");
88
+ }
89
+ updatedUser = (await app
90
+ .service("users")
91
+ .registerUsername({ username: sanitizedUsername, message: usernameSignMessage, hash: usernameSignature }, {}));
75
92
  }
76
- console.log("@@usernameSignature", usernameSignature);
77
- // Register username with ENS
78
- // Note: Type assertion needed until @b3dotfun/b3-api package is updated with RegisterUsername type
79
- const updatedUser = (await app
80
- .service("users")
81
- .registerUsername({ username: sanitizedUsername, message: usernameSignMessage, hash: usernameSignature }, {}));
82
93
  // Update user state - registerUsername returns an array with single user
83
94
  setUser(Array.isArray(updatedUser) ? updatedUser[0] : updatedUser);
84
95
  // Refresh profile to get updated data
@@ -107,6 +118,6 @@ const SettingsProfileCard = () => {
107
118
  /* Edit mode - inline input */
108
119
  _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { ref: inputRef, type: "text", value: editedUsername, onChange: e => setEditedUsername(e.target.value), onKeyDown: handleKeyDown, disabled: isSaving, className: "border-b3-line bg-b3-background text-b3-grey placeholder:text-b3-foreground-muted font-neue-montreal-medium focus:border-b3-primary-blue text-md w-full rounded-md border px-2 py-1 leading-none transition-colors focus:outline-none disabled:opacity-50", placeholder: "Enter username" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: handleSaveUsername, disabled: isSaving, className: "text-b3-primary-blue hover:text-b3-primary-blue/80 flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50", "aria-label": "Save username", children: isSaving ? _jsx(Loader2, { size: 18, className: "animate-spin" }) : _jsx(Check, { size: 18, strokeWidth: 2.5 }) }), _jsx("button", { onClick: handleCancelEdit, disabled: isSaving, className: "text-b3-foreground-muted hover:text-b3-grey flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50", "aria-label": "Cancel editing", children: _jsx(X, { size: 18, strokeWidth: 2.5 }) })] })] })) : (
109
120
  /* Display mode */
110
- _jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("p", { className: "b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]", children: currentUsername }) }), _jsx("button", { onClick: handleEditUsername, className: "flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80", children: _jsx("p", { className: "font-inter text-sm font-semibold leading-5 text-[#51525C] dark:text-white", children: "Edit Username" }) })] })) })] }));
121
+ _jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("p", { className: "b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]", children: currentUsername || user?.email }) }), _jsx("button", { onClick: handleEditUsername, className: "flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80", children: _jsx("p", { className: "font-inter text-sm font-semibold leading-5 text-[#51525C] dark:text-white", children: "Edit Username" }) })] })) })] }));
111
122
  };
112
123
  export default SettingsProfileCard;
@@ -10,6 +10,11 @@ export interface BetterAuthSignInProps {
10
10
  showEmail?: boolean;
11
11
  /** URL to redirect to after password reset link is clicked. Token is appended as ?token=... */
12
12
  passwordResetRedirectTo?: string;
13
+ /**
14
+ * URL Better Auth redirects to after server-side email verification. Render
15
+ * `BetterAuthVerifyEmail` at this route so the user gets a confirmation page.
16
+ */
17
+ verifyEmailRedirectTo?: string;
13
18
  /** Called after successful authentication */
14
19
  onSuccess?: () => void;
15
20
  /** Called on authentication error */
@@ -31,4 +36,4 @@ export interface BetterAuthSignInProps {
31
36
  * />
32
37
  * ```
33
38
  */
34
- export declare function BetterAuthSignIn({ title, subtitle, socialProviders, showEmail, passwordResetRedirectTo, onSuccess, onError, className, }: BetterAuthSignInProps): import("react/jsx-runtime").JSX.Element | null;
39
+ export declare function BetterAuthSignIn({ title, subtitle, socialProviders, showEmail, passwordResetRedirectTo, verifyEmailRedirectTo, onSuccess, onError, className, }: BetterAuthSignInProps): import("react/jsx-runtime").JSX.Element | null;
@@ -28,7 +28,7 @@ const DEFAULT_SOCIAL_PROVIDERS = [
28
28
  * />
29
29
  * ```
30
30
  */
31
- export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to access your account", socialProviders = DEFAULT_SOCIAL_PROVIDERS.map(p => p.id), showEmail = true, passwordResetRedirectTo, onSuccess, onError, className, }) {
31
+ export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to access your account", socialProviders = DEFAULT_SOCIAL_PROVIDERS.map(p => p.id), showEmail = true, passwordResetRedirectTo, verifyEmailRedirectTo, onSuccess, onError, className, }) {
32
32
  const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = useBetterAuth();
33
33
  const isAuthenticated = useAuthStore(state => state.isAuthenticated);
34
34
  const isAuthenticating = useAuthStore(state => state.isAuthenticating);
@@ -98,7 +98,7 @@ export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to
98
98
  setIsLoading(true);
99
99
  setError(null);
100
100
  if (mode === "sign-up") {
101
- await signUpWithEmail(normalizedEmail, password, name.trim());
101
+ await signUpWithEmail(normalizedEmail, password, name.trim(), verifyEmailRedirectTo);
102
102
  }
103
103
  else {
104
104
  await signInWithEmail(normalizedEmail, password);
@@ -0,0 +1,37 @@
1
+ export type BetterAuthVerifyEmailState = "success" | "expired" | "invalid" | "already-verified" | "error";
2
+ export interface BetterAuthVerifyEmailProps {
3
+ /**
4
+ * Error code from the callback URL's `?error=` query param. Pass `null` /
5
+ * `undefined` when the user landed here cleanly (successful verification).
6
+ * Better Auth appends this param when server-side verification fails.
7
+ */
8
+ errorCode?: string | null;
9
+ /** Called when the user clicks the "Go to sign in" button. */
10
+ onGoToSignIn?: () => void;
11
+ /** Fallback href used when `onGoToSignIn` is not provided. Defaults to "/login". */
12
+ signInHref?: string;
13
+ /** Optional override for the success headline. */
14
+ successTitle?: string;
15
+ /** Optional override for the success body text. */
16
+ successMessage?: string;
17
+ /** Optional class name for the root container. */
18
+ className?: string;
19
+ }
20
+ /**
21
+ * Standalone email-verification confirmation page. Render on the route you
22
+ * set as `callbackURL` when calling `betterAuthClient.sendVerificationEmail`
23
+ * (or the `verifyCallbackURL` arg on `useBetterAuth().signUpWithEmail`).
24
+ *
25
+ * Better Auth verifies the token server-side before redirecting here. This
26
+ * component only displays the outcome based on the `?error=` query param.
27
+ *
28
+ * Usage:
29
+ * ```tsx
30
+ * const error = new URLSearchParams(window.location.search).get("error");
31
+ * <BetterAuthVerifyEmail
32
+ * errorCode={error}
33
+ * onGoToSignIn={() => router.push("/login")}
34
+ * />
35
+ * ```
36
+ */
37
+ export declare function BetterAuthVerifyEmail({ errorCode, onGoToSignIn, signInHref, successTitle, successMessage, className, }: BetterAuthVerifyEmailProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,82 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Button } from "../../../../global-account/react/index.js";
3
+ import { debugB3React } from "../../../../shared/utils/debug.js";
4
+ const debug = debugB3React("BetterAuthVerifyEmail");
5
+ function classifyError(code) {
6
+ if (!code)
7
+ return "success";
8
+ const normalized = code.toLowerCase();
9
+ // Exact matches for Better Auth's documented verification error codes.
10
+ if (normalized === "expired_token")
11
+ return "expired";
12
+ if (normalized === "invalid_token")
13
+ return "invalid";
14
+ if (normalized === "already_verified" || normalized === "email_already_verified")
15
+ return "already-verified";
16
+ // Loose fallbacks for close variants. Order matters — check "already" before
17
+ // "verified" so `email_already_verified` maps to already-verified, not invalid.
18
+ if (normalized.includes("expired"))
19
+ return "expired";
20
+ if (normalized.includes("already"))
21
+ return "already-verified";
22
+ if (normalized.includes("invalid"))
23
+ return "invalid";
24
+ return "error";
25
+ }
26
+ const COPY = {
27
+ success: {
28
+ title: "Email verified",
29
+ message: "Your email is confirmed. You can now sign in to your account.",
30
+ },
31
+ expired: {
32
+ title: "Link expired",
33
+ message: "This verification link has expired. Request a new one from the sign-in page.",
34
+ },
35
+ invalid: {
36
+ title: "Invalid link",
37
+ message: "This verification link is invalid or has already been used. Try signing in or request a new link.",
38
+ },
39
+ "already-verified": {
40
+ title: "Already verified",
41
+ message: "Your email was already confirmed. You can sign in now.",
42
+ },
43
+ error: {
44
+ title: "Verification failed",
45
+ message: "We couldn't verify your email. Request a new link from the sign-in page.",
46
+ },
47
+ };
48
+ /**
49
+ * Standalone email-verification confirmation page. Render on the route you
50
+ * set as `callbackURL` when calling `betterAuthClient.sendVerificationEmail`
51
+ * (or the `verifyCallbackURL` arg on `useBetterAuth().signUpWithEmail`).
52
+ *
53
+ * Better Auth verifies the token server-side before redirecting here. This
54
+ * component only displays the outcome based on the `?error=` query param.
55
+ *
56
+ * Usage:
57
+ * ```tsx
58
+ * const error = new URLSearchParams(window.location.search).get("error");
59
+ * <BetterAuthVerifyEmail
60
+ * errorCode={error}
61
+ * onGoToSignIn={() => router.push("/login")}
62
+ * />
63
+ * ```
64
+ */
65
+ export function BetterAuthVerifyEmail({ errorCode, onGoToSignIn, signInHref = "/login", successTitle, successMessage, className, }) {
66
+ const state = classifyError(errorCode);
67
+ const isSuccess = state === "success" || state === "already-verified";
68
+ const copy = COPY[state];
69
+ const title = isSuccess && successTitle ? successTitle : copy.title;
70
+ const message = isSuccess && successMessage ? successMessage : copy.message;
71
+ debug("Rendering verify-email state", { state, errorCode });
72
+ const handleClick = () => {
73
+ if (onGoToSignIn) {
74
+ onGoToSignIn();
75
+ return;
76
+ }
77
+ if (typeof window !== "undefined") {
78
+ window.location.href = signInHref;
79
+ }
80
+ };
81
+ return (_jsx("div", { className: `w-full max-w-[400px] px-6 ${className || ""}`, children: _jsxs("div", { className: "space-y-6 text-center", children: [_jsx("div", { className: `mx-auto flex h-12 w-12 items-center justify-center rounded-full ${isSuccess ? "bg-green-100" : "bg-red-100"}`, children: isSuccess ? (_jsx("svg", { className: "h-6 w-6 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })) : (_jsx("svg", { className: "h-6 w-6 text-red-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })) }), _jsxs("div", { children: [_jsx("h1", { className: "text-[28px] font-semibold tracking-tight text-gray-900 dark:text-gray-100", children: title }), _jsx("p", { className: "mt-3 text-[15px] text-gray-500 dark:text-gray-400", children: message })] }), _jsx(Button, { onClick: handleClick, className: "h-11 w-full bg-gray-900 text-[15px] font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100", children: isSuccess ? "Go to sign in" : "Back to sign in" })] }) }));
82
+ }
@@ -1,15 +1,18 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { IPFSMediaRenderer, SignInWithB3, StyleRoot, useAccountWallet, useAuthentication, useB3Config, useIsMobile, } from "../../../../global-account/react/index.js";
2
+ import { IPFSMediaRenderer, SignInWithB3, StyleRoot, useAccountWallet, useAuthStore, useAuthentication, useB3Config, useIsMobile, } from "../../../../global-account/react/index.js";
3
3
  import Icon from "../../../../global-account/react/components/custom/Icon.js";
4
- import { ecosystemWalletId } from "../../../../shared/constants/index.js";
4
+ import { AVATAR_COLORS, ecosystemWalletId } from "../../../../shared/constants/index.js";
5
5
  import { cn, truncateAddress } from "../../../../shared/utils/index.js";
6
6
  import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
7
+ import Avatar from "boring-avatars";
7
8
  import { useEffect } from "react";
8
9
  import { useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
10
+ import { useUser } from "../../hooks/useUser.js";
9
11
  import { ManageAccountButton } from "../custom/ManageAccountButton.js";
10
12
  export function SignIn(props) {
11
13
  const { className } = props;
12
- const { automaticallySetFirstEoa, partnerId } = useB3Config();
14
+ const { automaticallySetFirstEoa, partnerId, authStrategy } = useB3Config();
15
+ const isBetterAuth = authStrategy === "better-auth";
13
16
  const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, } = useAccountWallet();
14
17
  const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
15
18
  const isMobile = useIsMobile();
@@ -19,6 +22,10 @@ export function SignIn(props) {
19
22
  };
20
23
  const connectedWallets = useConnectedWallets();
21
24
  const setActiveWallet = useSetActiveWallet();
25
+ // Better Auth state
26
+ const isAuthenticated = useAuthStore(state => state.isAuthenticated);
27
+ const { user } = useUser();
28
+ const userDisplayName = user?.username || user?.email || "Account";
22
29
  const handleSetActiveAccount = (selectedWalletId) => {
23
30
  if (!selectedWalletId ||
24
31
  !connectedWallets ||
@@ -34,12 +41,15 @@ export function SignIn(props) {
34
41
  setActiveWallet(connectedEOAWallet);
35
42
  }
36
43
  }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
44
+ const isLoggedIn = isBetterAuth ? isAuthenticated : !!globalAddress;
37
45
  // Desktop version - original dropdown menu
38
- return (_jsx(StyleRoot, { children: _jsx(Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: globalAddress ? (_jsxs(_Fragment, { children: [_jsxs(MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [!!walletImage && (_jsx(IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" })), _jsx("div", { className: "text-as-primary", children: ensName ? ensName : truncateAddress(globalAddress) })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsx(MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false,
46
+ return (_jsx(StyleRoot, { children: _jsx(Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: isLoggedIn ? (_jsxs(_Fragment, { children: [_jsxs(MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [isBetterAuth ? (_jsx(Avatar, { name: userDisplayName, variant: "beam", size: 24, colors: AVATAR_COLORS })) : (!!walletImage && (_jsx(IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" }))), _jsx("div", { className: "text-as-primary", children: isBetterAuth ? userDisplayName : ensName ? ensName : truncateAddress(globalAddress ?? "") })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsx(MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false,
39
47
  // TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
40
- anchor: isMobile ? "top end" : undefined, children: _jsxs("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? (_jsxs("div", { className: cn("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: walletImage, alt: connectedEOAWallet?.id }), _jsxs("div", { className: "ml-4 grow", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) })] })] }), isActiveEOAWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && (_jsxs("div", { className: cn("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
48
+ anchor: isMobile ? "top end" : undefined, children: _jsxs("div", { className: "bg-b3-react-background", children: [isBetterAuth ? (
49
+ /* Better Auth: show user info instead of wallet switching */
50
+ _jsxs("div", { className: "flex items-center gap-3 rounded-xl p-3", children: [_jsx(Avatar, { name: userDisplayName, variant: "beam", size: 48, colors: AVATAR_COLORS }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [user?.username && _jsx("div", { className: "text-b3-react-primary font-semibold", children: user.username }), user?.email && _jsx("div", { className: "text-b3-react-secondary text-sm", children: user.email })] })] })) : connectedEOAWallet ? (_jsxs("div", { className: cn("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: walletImage, alt: connectedEOAWallet?.id }), _jsxs("div", { className: "ml-4 grow", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress ?? "") })] })] }), isActiveEOAWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && (_jsxs("div", { className: cn("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
41
51
  ? "bg-b3-react-background"
42
- : "bg-b3-react-background hover:bg-b3-react-background"), onClick: () => handleSetActiveAccount(connectedSmartWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), _jsxs("div", { className: "grow pl-4", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) }), _jsx("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] }))), _jsx("div", { className: "ml-3", children: _jsx(ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), _jsx("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: _jsxs("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [_jsx(Icon, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), _jsx("div", { className: "text-b3-react-primary mr-auto transition-colors", children: "Disconnect" })] }) })] }) }) })] })) : (_jsx(SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
52
+ : "bg-b3-react-background hover:bg-b3-react-background"), onClick: () => handleSetActiveAccount(connectedSmartWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), _jsxs("div", { className: "grow pl-4", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress ?? "") }), _jsx("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] }))), _jsx("div", { className: "ml-3", children: _jsx(ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), _jsx("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: _jsxs("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [_jsx(Icon, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), _jsx("div", { className: "text-b3-react-primary mr-auto transition-colors", children: isBetterAuth ? "Sign out" : "Disconnect" })] }) })] }) }) })] })) : (_jsx(SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
43
53
  console.log("User authenticated with Global Account!", globalAccount);
44
54
  }, ...props })) }) }));
45
55
  }
@@ -3,4 +3,4 @@ import { SignInWithB3ModalProps } from "../../../../global-account/react";
3
3
  * Component that manages the authentication flow for Sign In With B3
4
4
  * Handles different login providers, authentication steps, and session key management
5
5
  */
6
- export declare function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin, source, signersEnabled, }: SignInWithB3ModalProps): import("react/jsx-runtime").JSX.Element | null;
6
+ export declare function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin, source, signersEnabled, verifyEmailRedirectTo, }: SignInWithB3ModalProps): import("react/jsx-runtime").JSX.Element | null;
@@ -13,7 +13,7 @@ const MAX_REFETCH_ATTEMPTS = 20;
13
13
  * Component that manages the authentication flow for Sign In With B3
14
14
  * Handles different login providers, authentication steps, and session key management
15
15
  */
16
- export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin = false, source = "signInWithB3Button", signersEnabled = false, }) {
16
+ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin = false, source = "signInWithB3Button", signersEnabled = false, verifyEmailRedirectTo, }) {
17
17
  const { automaticallySetFirstEoa, authStrategy } = useB3Config();
18
18
  // skipAutoConnect: this component intentionally logs out on mount to show a fresh login screen.
19
19
  // AuthenticationProvider is the sole owner of useAutoConnect to avoid competing auth cycles.
@@ -244,7 +244,7 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
244
244
  // Better Auth manages its own loading/verification states internally.
245
245
  // Don't gate on isAuthenticating — it would unmount the component
246
246
  // and lose verification state when setIsAuthenticating(false) fires.
247
- content = _jsx(LoginStepBetterAuth, { onSuccess: () => handleLoginSuccess({}), onError: onError });
247
+ content = (_jsx(LoginStepBetterAuth, { onSuccess: () => handleLoginSuccess({}), onError: onError, verifyEmailRedirectTo: verifyEmailRedirectTo }));
248
248
  }
249
249
  else if (!readyToShowLogin || isAuthenticating || isFetchingSigners) {
250
250
  content = (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: _jsx(Loading, { variant: "white", size: "lg" }) }) }));
@@ -1,6 +1,8 @@
1
1
  interface LoginStepBetterAuthProps {
2
2
  onSuccess?: () => void;
3
3
  onError?: (error: Error) => Promise<void>;
4
+ /** URL Better Auth redirects to after server-side email verification. */
5
+ verifyEmailRedirectTo?: string;
4
6
  }
5
- export declare function LoginStepBetterAuth({ onSuccess, onError }: LoginStepBetterAuthProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare function LoginStepBetterAuth({ onSuccess, onError, verifyEmailRedirectTo }: LoginStepBetterAuthProps): import("react/jsx-runtime").JSX.Element;
6
8
  export {};