@b3dotfun/sdk 0.1.69-alpha.2 → 0.1.69-alpha.20

package/src/global-account/react/components/ManageAccount/SessionDurationContent.tsx

@@ -0,0 +1,107 @@
+import app from "@b3dotfun/sdk/global-account/app";
+import { useAuthentication, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import {
+  getSessionDurationDays,
+  SESSION_DURATION_LABELS,
+  SESSION_DURATION_OPTIONS,
+  SessionDurationDays,
+  setSessionDurationDays,
+} from "@b3dotfun/sdk/shared/utils/session-duration";
+import { useState } from "react";
+import ModalHeader from "../ModalHeader/ModalHeader";
+
+interface SessionDurationContentProps {
+  partnerId: string;
+}
+
+const DESCRIPTIONS: Record<SessionDurationDays, string> = {
+  0: "Sign out when browser closes",
+  1: "Stay signed in for 1 day",
+  7: "Stay signed in for 7 days",
+  14: "Stay signed in for 2 weeks",
+  30: "Stay signed in for 30 days",
+};
+
+const SessionDurationContent = ({ partnerId }: SessionDurationContentProps) => {
+  const { user, setUser } = useAuthentication(partnerId);
+  const navigateBack = useModalStore(state => state.navigateBack);
+  const [sessionDays, setSessionDays] = useState<SessionDurationDays>(() =>
+    getSessionDurationDays(user?.preferences, partnerId),
+  );
+  const [saving, setSaving] = useState(false);
+
+  const handleSelect = async (days: SessionDurationDays) => {
+    const previous = sessionDays;
+    setSessionDurationDays(days, partnerId);
+    setSessionDays(days);
+    if (user?.userId) {
+      setSaving(true);
+      try {
+        const updated = await app.service("users").patch(user.userId, {
+          preferences: {
+            ...user.preferences,
+            [partnerId]: {
+              ...((((user.preferences as Record<string, unknown>) ?? {})[partnerId] as Record<string, unknown>) ?? {}),
+              sessionDuration: days,
+            },
+          },
+        });
+        setUser(updated);
+      } catch (error) {
+        console.error("Failed to save session duration preference:", error);
+        // Revert optimistic update so UI stays consistent with server state
+        setSessionDays(previous);
+        setSessionDurationDays(previous, partnerId);
+      } finally {
+        setSaving(false);
+      }
+    }
+  };
+
+  return (
+    <div className="flex h-[470px] flex-col">
+      <ModalHeader showBackButton={true} showCloseButton={false} title="Stay signed in" handleBack={navigateBack} />
+
+      <div className="flex flex-col gap-2 p-5">
+        {SESSION_DURATION_OPTIONS.map(days => (
+          <button
+            type="button"
+            key={days}
+            onClick={() => handleSelect(days)}
+            disabled={saving}
+            className={`flex items-center justify-between rounded-xl border px-4 py-3 transition-colors ${
+              sessionDays === days
+                ? "border-[#3f3f46] bg-[#f4f4f5] dark:border-white dark:bg-white/10"
+                : "border-[#e4e4e7] bg-transparent hover:bg-[#f4f4f5] dark:border-white/10 dark:hover:bg-white/5"
+            }`}
+          >
+            <div className="flex flex-col items-start gap-0.5">
+              <span className="font-neue-montreal-semibold text-[14px] leading-none tracking-[-0.28px] text-[#3f3f46] dark:text-white">
+                {SESSION_DURATION_LABELS[days]}
+              </span>
+              <span className="font-neue-montreal-medium text-[13px] leading-none tracking-[-0.26px] text-[#70707b] dark:text-white/50">
+                {DESCRIPTIONS[days]}
+              </span>
+            </div>
+            {sessionDays === days && (
+              <div className="flex size-5 items-center justify-center rounded-full bg-[#3f3f46] dark:bg-white">
+                <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
+                  <path
+                    d="M1 4L3.5 6.5L9 1"
+                    stroke="white"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="dark:stroke-[#3f3f46]"
+                  />
+                </svg>
+              </div>
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SessionDurationContent;

package/src/global-account/react/components/ManageAccount/SettingsContent.tsx

@@ -1,5 +1,6 @@
 import { useAuthentication, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { getSessionDurationDays, SESSION_DURATION_LABELS } from "@b3dotfun/sdk/shared/utils/session-duration";
 import { Loader2 } from "lucide-react";
 import { useState } from "react";
 import { Chain } from "thirdweb";
@@ -20,46 +21,29 @@ const SettingsContent = ({
 }) => {
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
-  const { logout } = useAuthentication(partnerId);
+  const { logout, user } = useAuthentication(partnerId);
   const [logoutLoading, setLogoutLoading] = useState(false);
 
-  const { data: profilesRaw = [] } = useProfiles({ client });
+  const sessionDays = getSessionDurationDays(user?.preferences, partnerId);
 
+  const { data: profilesRaw = [] } = useProfiles({ client });
   const profiles = profilesRaw.filter((profile: any) => !["custom_auth_endpoint"].includes(profile.type));
 
-  const handleNavigate = (type: "home" | "swap" | "linkAccount" | "avatarEditor" | "notifications") => {
+  const handleNavigate = (
+    type: "home" | "swap" | "linkAccount" | "avatarEditor" | "notifications" | "sessionDuration",
+  ) => {
     if (type === "home") {
-      setB3ModalContentType({
-        type: "manageAccount",
-        chain,
-        partnerId,
-        onLogout,
-        activeTab: "home",
-      });
+      setB3ModalContentType({ type: "manageAccount", chain, partnerId, onLogout, activeTab: "home" });
     } else if (type === "swap") {
-      setB3ModalContentType({
-        type: "manageAccount",
-        chain,
-        partnerId,
-        onLogout,
-        activeTab: "tokens",
-      });
+      setB3ModalContentType({ type: "manageAccount", chain, partnerId, onLogout, activeTab: "tokens" });
     } else if (type === "linkAccount") {
-      setB3ModalContentType({
-        type: "linkAccount",
-        chain,
-        partnerId,
-      });
+      setB3ModalContentType({ type: "linkAccount", chain, partnerId });
     } else if (type === "notifications") {
-      setB3ModalContentType({
-        type: "notifications",
-        chain,
-        partnerId,
-      });
+      setB3ModalContentType({ type: "notifications", chain, partnerId });
+    } else if (type === "sessionDuration") {
+      setB3ModalContentType({ type: "sessionDuration", chain, partnerId });
     } else {
-      setB3ModalContentType({
-        type: "avatarEditor",
-      });
+      setB3ModalContentType({ type: "avatarEditor" });
     }
     setB3ModalOpen(true);
   };
@@ -111,11 +95,25 @@ const SettingsContent = ({
           subtitle="Manage your notifications"
           onClick={() => handleNavigate("notifications")}
         />
+        <SettingsMenuItem
+          icon={
+            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <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"
+              />
+            </svg>
+          }
+          title="Stay signed in"
+          subtitle={SESSION_DURATION_LABELS[sessionDays] ?? `${sessionDays} days`}
+          onClick={() => handleNavigate("sessionDuration")}
+        />
       </div>
 
       {/* Logout Section */}
       <div className="mt-auto px-5 pb-5">
         <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}

package/src/global-account/react/components/ManageAccount/SettingsProfileCard.tsx

@@ -1,6 +1,7 @@
 import { ens_normalize } from "@adraffy/ens-normalize";
 import app from "@b3dotfun/sdk/global-account/app";
 import { toast, useAuthentication, useB3Config, useModalStore, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { Check, Loader2, Pencil, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
@@ -29,8 +30,7 @@ const SettingsProfileCard = () => {
   const [isSaving, setIsSaving] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  // IPFSMediaRenderer will handle IPFS URL conversion and validation
-  const avatarSrc = user?.avatar || profile?.avatar;
+  const avatarSrc = validateImageUrl(user?.avatar) || validateImageUrl(profile?.avatar);
 
   // Get current username - prioritize user.username, fallback to profile data
   const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");

package/src/global-account/react/components/Send/Send.tsx

@@ -9,6 +9,7 @@ import {
   useSimBalance,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
 import { formatDisplayNumber, formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
 import { CircleHelp, Clock, Loader2, Send as SendIcon, Wallet } from "lucide-react";
@@ -32,6 +33,7 @@ type SendStep = "recipient" | "token" | "amount" | "confirm" | "success";
 // Component for displaying a recent address with profile data
 function RecentAddressItem({ address, onClick }: { address: string; onClick: () => void }) {
   const { data: profileData } = useProfile({ address });
+  const validatedAvatar = validateImageUrl(profileData?.avatar);
 
   return (
     <button
@@ -39,8 +41,8 @@ function RecentAddressItem({ address, onClick }: { address: string; onClick: ()
       className="flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]"
     >
       {/* Avatar */}
-      {profileData?.avatar ? (
-        <img src={profileData.avatar} alt={profileData.name || address} className="h-10 w-10 rounded-full" />
+      {validatedAvatar ? (
+        <img src={validatedAvatar} alt={profileData?.name || address} className="h-10 w-10 rounded-full" />
       ) : (
         <div className="flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]">
           <Wallet className="h-5 w-5 text-[#a0a0ab]" />
@@ -84,6 +86,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
   const { data: validatedProfileData } = useProfile({
     address: showValidatedResult && recipientAddress && isAddress(recipientAddress) ? recipientAddress : undefined,
   });
+  const validatedRecipientAvatar = validateImageUrl(validatedProfileData?.avatar);
 
   // Address validation
   const handleRecipientAddressChange = (value: string) => {
@@ -290,10 +293,10 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
                   className="dark:bg-b3-background dark:border-b3-line flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]"
                 >
                   {/* Avatar */}
-                  {validatedProfileData?.avatar ? (
+                  {validatedRecipientAvatar ? (
                     <img
-                      src={validatedProfileData.avatar}
-                      alt={validatedProfileData.name || recipientAddress}
+                      src={validatedRecipientAvatar}
+                      alt={validatedProfileData?.name || recipientAddress}
                       className="h-10 w-10 rounded-full"
                     />
                   ) : (

package/src/global-account/react/components/SignInWithB3/BetterAuthResetPassword.tsx

@@ -0,0 +1,146 @@
+import { Button, Input } from "@b3dotfun/sdk/global-account/react";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { useState } from "react";
+import { useBetterAuth } from "../../hooks/useBetterAuth";
+
+const debug = debugB3React("BetterAuthResetPassword");
+
+export interface BetterAuthResetPasswordProps {
+  /** The reset token from the URL query param */
+  token: string;
+  /** Called after password is successfully reset */
+  onSuccess?: () => void;
+  /** Called on error */
+  onError?: (error: Error) => void;
+  /** Optional class name */
+  className?: string;
+}
+
+/**
+ * Standalone reset password form. Render this on your reset password page.
+ * Reads the token from props (extract it from the URL query string).
+ *
+ * Usage:
+ * ```tsx
+ * const token = new URLSearchParams(window.location.search).get("token");
+ * <BetterAuthResetPassword token={token} onSuccess={() => navigate("/login")} />
+ * ```
+ */
+export function BetterAuthResetPassword({ token, onSuccess, onError, className }: BetterAuthResetPasswordProps) {
+  const { resetPassword } = useBetterAuth();
+
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!password) {
+      setError("Please enter a new password");
+      return;
+    }
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters");
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+      await resetPassword(password, token);
+      setSuccess(true);
+      debug("Password reset successful");
+      onSuccess?.();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Password reset failed";
+      setError(message);
+      debug("Password reset failed", err);
+      onError?.(err as Error);
+    } finally {
+      setPassword("");
+      setConfirmPassword("");
+      setIsLoading(false);
+    }
+  };
+
+  if (!token) {
+    return (
+      <div className={`w-full max-w-[400px] px-6 text-center ${className || ""}`}>
+        <p className="text-sm text-red-500">Invalid or missing reset token.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`w-full max-w-[400px] px-6 ${className || ""}`}>
+      <div className="mb-10 text-center">
+        <h1 className="text-[28px] font-semibold tracking-tight text-gray-900 dark:text-gray-100">
+          {success ? "Password reset" : "Set new password"}
+        </h1>
+        <p className="mt-3 text-[15px] text-gray-500 dark:text-gray-400">
+          {success ? "Your password has been updated." : "Enter your new password below."}
+        </p>
+      </div>
+
+      {success ? (
+        <div className="space-y-4 text-center">
+          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+            <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-5">
+          <div>
+            <label className="mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300">
+              New password
+            </label>
+            <Input
+              type="password"
+              placeholder="At least 8 characters"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              disabled={isLoading}
+              className="h-11 px-4 text-[15px]"
+            />
+          </div>
+
+          <div>
+            <label className="mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300">
+              Confirm password
+            </label>
+            <Input
+              type="password"
+              placeholder="Repeat your password"
+              value={confirmPassword}
+              onChange={e => setConfirmPassword(e.target.value)}
+              disabled={isLoading}
+              onKeyDown={e => {
+                if (e.key === "Enter") handleSubmit();
+              }}
+              className="h-11 px-4 text-[15px]"
+            />
+          </div>
+
+          {error && <p className="text-sm text-red-500">{error}</p>}
+
+          <Button
+            onClick={handleSubmit}
+            disabled={isLoading}
+            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"
+          >
+            {isLoading ? "Resetting..." : "Reset password"}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}