@b3dotfun/sdk 0.0.35-alpha.3 → 0.0.35-alpha.4

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

@@ -0,0 +1,90 @@
+"use client";
+
+import { useProfile } from "@b3dotfun/sdk/global-account/react";
+import { useRPMToken } from "@b3dotfun/sdk/global-account/react/hooks/useRPMToken";
+import { updateAvatar } from "@b3dotfun/sdk/global-account/react/utils/updateAvatar";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import {
+  AvatarCreatorConfig,
+  AvatarCreator as AvatarCreatorRPM,
+  AvatarExportedEvent,
+} from "@readyplayerme/react-avatar-creator";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useActiveAccount } from "thirdweb/react";
+
+const debug = debugB3React("AvatarCreator");
+
+const config: AvatarCreatorConfig = {
+  clearCache: true,
+  bodyType: "fullbody",
+  quickStart: true,
+  language: "en",
+};
+
+interface AvatarCreatorProps {
+  onSetAvatar?: () => void;
+  className?: string;
+}
+
+export function AvatarCreator({ onSetAvatar, className }: AvatarCreatorProps) {
+  const { token, refetch: refetchRPMToken } = useRPMToken();
+  const [loading, setIsLoading] = useState(false);
+  const account = useActiveAccount();
+  const { data: profile, refetch: refreshProfile } = useProfile({
+    address: account?.address,
+    fresh: true,
+  });
+
+  const hasAvatar = profile?.avatar;
+
+  const handleOnAvatarExported = async (event: AvatarExportedEvent) => {
+    setIsLoading(true);
+    debug("@@AvatarExportedEvent", event);
+    try {
+      const avatarUpload = await updateAvatar(event.data.url);
+      debug("@@avatarUpload", avatarUpload);
+
+      await refreshProfile();
+      toast.success(
+        hasAvatar ? "Nice look! Your avatar has been updated!" : "Looks great! Your avatar has been saved!",
+      );
+      onSetAvatar?.();
+      await refetchRPMToken(undefined);
+    } catch (e) {
+      debug("@@error:AvatarCreator", e);
+      toast.error("Failed to update avatar. Please try again.");
+    }
+    setIsLoading(false);
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-[80vh] w-full flex-col items-center justify-center gap-4">
+        <div className="border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" />
+        <p className="text-muted-foreground text-sm font-medium">Saving your avatar</p>
+      </div>
+    );
+  }
+
+  if (!token) {
+    return (
+      <div className="flex h-[80vh] w-full flex-col items-center justify-center gap-4">
+        <div className="border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" />
+        <p className="text-muted-foreground text-sm font-medium">Loading avatar creator</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("h-[calc(90vh-2px)] w-full", className)}>
+      <AvatarCreatorRPM
+        className="h-full w-full"
+        subdomain="b3"
+        config={{ ...config, token }}
+        onAvatarExported={handleOnAvatarExported}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,233 @@
+"use client";
+
+import app from "@b3dotfun/sdk/global-account/app";
+import { Button, useB3, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { Check, Loader2, Upload, X } from "lucide-react";
+import { useRef, useState } from "react";
+import { toast } from "sonner";
+import { useActiveAccount } from "thirdweb/react";
+import { upload } from "thirdweb/storage";
+
+const debug = debugB3React("AvatarEditor");
+
+interface AvatarEditorProps {
+  onSetAvatar?: () => void;
+  className?: string;
+}
+
+export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { setUser } = useB3();
+
+  const account = useActiveAccount();
+  const { data: profile, refetch: refreshProfile } = useProfile({
+    address: account?.address,
+    fresh: true,
+  });
+
+  // Thirdweb upload function
+
+  const hasAvatar = profile?.avatar;
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      // Validate file type
+      if (!file.type.startsWith("image/")) {
+        toast.error("Please select an image file");
+        return;
+      }
+
+      // Validate file size (max 5MB)
+      if (file.size > 5 * 1024 * 1024) {
+        toast.error("File size must be less than 5MB");
+        return;
+      }
+
+      setSelectedFile(file);
+
+      // Create preview URL
+      const url = URL.createObjectURL(file);
+      setPreviewUrl(url);
+    }
+  };
+
+  const handleRemoveFile = () => {
+    setSelectedFile(null);
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+      setPreviewUrl(null);
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile) {
+      toast.error("Please select an image first");
+      return;
+    }
+
+    setIsUploading(true);
+    try {
+      debug("Starting upload to IPFS", selectedFile);
+
+      // Upload to IPFS using Thirdweb
+      const ipfsUrl = await upload({
+        client,
+        files: [selectedFile],
+      });
+
+      debug("Upload successful", ipfsUrl);
+
+      // Save avatar URL using profiles service
+      setIsSaving(true);
+      const user = await app.service("users").setAvatar(
+        {
+          avatar: ipfsUrl,
+        },
+        // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
+        {},
+      );
+      // update user
+      // @ts-expect-error this resolved fine, look into why expect-error needed
+      setUser(user);
+
+      // Refresh profile to get updated avatar
+      await refreshProfile();
+
+      toast.success(
+        hasAvatar ? "Nice look! Your avatar has been updated!" : "Looks great! Your avatar has been saved!",
+      );
+
+      onSetAvatar?.();
+
+      // Clean up
+      handleRemoveFile();
+    } catch (error) {
+      debug("Error uploading avatar:", error);
+      toast.error("Failed to upload avatar. Please try again.");
+    } finally {
+      setIsUploading(false);
+      setIsSaving(false);
+    }
+  };
+
+  const handleFileInputClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const isLoading = isUploading || isSaving;
+
+  return (
+    <div className={cn("flex flex-col items-center justify-center space-y-6 p-8", className)}>
+      <div className="space-y-2 text-center">
+        <h2 className="font-neue-montreal-semibold text-b3-grey text-2xl">
+          {hasAvatar ? "Update Your Avatar" : "Set Your Avatar"}
+        </h2>
+        <p className="text-b3-foreground-muted font-neue-montreal-medium">
+          Upload an image to personalize your profile
+        </p>
+      </div>
+
+      {/* Current Avatar Display */}
+      {hasAvatar && !previewUrl && (
+        <div className="relative">
+          <div className="border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4">
+            <img src={profile.avatar} alt="Current avatar" className="h-full w-full object-cover" />
+          </div>
+        </div>
+      )}
+
+      {/* File Upload Area */}
+      <div className="w-full max-w-md">
+        {!selectedFile ? (
+          <div
+            onClick={handleFileInputClick}
+            className="border-b3-line hover:border-b3-primary-blue hover:bg-b3-primary-wash/20 cursor-pointer rounded-xl border-2 border-dashed p-8 text-center transition-colors"
+          >
+            <Upload className="text-b3-grey mx-auto mb-4 h-12 w-12" />
+            <p className="text-b3-grey font-neue-montreal-semibold mb-2">Click to select an image</p>
+            <p className="text-b3-foreground-muted font-neue-montreal-medium text-sm">PNG, JPG, or GIF up to 5MB</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {/* Preview */}
+            <div className="relative">
+              <div className="border-b3-primary-blue mx-auto h-32 w-32 overflow-hidden rounded-full border-4">
+                {previewUrl ? (
+                  <img src={previewUrl} alt="Preview" className="h-full w-full object-cover" />
+                ) : (
+                  <div className="bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full">
+                    <p className="text-b3-grey font-neue-montreal-semibold text-sm">No file selected</p>
+                  </div>
+                )}
+              </div>
+              <button
+                onClick={handleRemoveFile}
+                className="bg-b3-negative absolute -right-2 -top-2 flex h-8 w-8 items-center justify-center rounded-full text-white transition-colors hover:bg-red-600"
+                disabled={isLoading}
+              >
+                <X size={16} />
+              </button>
+            </div>
+
+            {/* File Info */}
+            <div className="space-y-1 text-center">
+              <p className="text-b3-grey font-neue-montreal-semibold text-sm">{selectedFile.name}</p>
+              <p className="text-b3-foreground-muted font-neue-montreal-medium text-xs">
+                {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Hidden file input */}
+        <input ref={fileInputRef} type="file" accept="image/*" onChange={handleFileSelect} className="hidden" />
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex w-full max-w-md gap-3">
+        {selectedFile && (
+          <Button
+            onClick={handleUpload}
+            disabled={isLoading}
+            className="bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white"
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {isUploading ? "Uploading..." : "Saving..."}
+              </>
+            ) : (
+              <>
+                <Check className="mr-2 h-4 w-4" />
+                {hasAvatar ? "Update Avatar" : "Set Avatar"}
+              </>
+            )}
+          </Button>
+        )}
+
+        <Button variant="outline" onClick={handleFileInputClick} disabled={isLoading} className="flex-1">
+          <Upload className="mr-2 h-4 w-4" />
+          {selectedFile ? "Change Image" : "Select Image"}
+        </Button>
+      </div>
+
+      {/* Help Text */}
+      <div className="text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs">
+        <p>
+          Your avatar will be uploaded to IPFS and stored securely. Make sure you have the rights to use this image.
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -12,6 +12,7 @@ import { AnySpendDepositHype } from "@b3dotfun/sdk/anyspend/react/components/Any
 import { useIsMobile, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { AvatarEditor } from "./AvatarEditor/AvatarEditor";
 import { useB3 } from "./B3Provider/useB3";
 import { LinkAccount } from "./LinkAccount/LinkAccount";
 import { ManageAccount } from "./ManageAccount/ManageAccount";
@@ -40,6 +41,7 @@ export function B3DynamicModal() {
     "anySpendSignatureMint",
     "anySpendBondKit",
     "linkAccount",
+    "avatarEditor",
   ];
 
   const freestyleTypes = [
@@ -65,6 +67,9 @@ export function B3DynamicModal() {
     isFreestyleType && "b3-modal-freestyle",
     contentType?.type === "signInWithB3" && "p-0",
     contentType?.type === "anySpend" && "md:px-6",
+    // Add specific styles for avatar editor
+    // contentType?.type === "avatarEditor_disabled" &&
+    //   "h-[90dvh] w-[90vw] bg-black p-0 overflow-y-auto overflow-x-hidden max-md:-mt-8 max-md:rounded-t-xl",
   );
 
   debug("contentType", contentType);
@@ -102,6 +107,8 @@ export function B3DynamicModal() {
         return <LinkAccount {...contentType} />;
       case "anySpendDepositHype":
         return <AnySpendDepositHype {...contentType} mode="modal" />;
+      case "avatarEditor":
+        return <AvatarEditor onSetAvatar={contentType.onSuccess} />;
       // Add other modal types here
       default:
         return null;
@@ -120,8 +127,10 @@ export function B3DynamicModal() {
           contentClass,
           "rounded-2xl bg-white shadow-xl dark:bg-gray-900",
           "border border-gray-200 dark:border-gray-800",
-          "mx-auto w-full max-w-md",
-          "sm:max-w-lg sm:rounded-b-none",
+          // Remove default width classes for avatar editor
+          contentType?.type === "avatarEditor"
+            ? "!w-[90vw] !max-w-none" // Use !important to override default styles
+            : "mx-auto w-full max-w-md sm:max-w-lg",
         )}
         hideCloseButton={hideCloseButton}
       >
@@ -155,6 +164,22 @@ export function B3DynamicModal() {
           {renderContent()}
         </div>
       </ModalContent>
+      {contentType?.type === "avatarEditor" && (
+        <button
+          onClick={() => setB3ModalOpen(false)}
+          className="fixed right-5 top-5 z-[100] cursor-pointer text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M18 6L6 18M6 6L18 18"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      )}
     </ModalComponent>
   );
 }

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

@@ -2,6 +2,7 @@ import {
   Button,
   CopyToClipboard,
   useAuthentication,
+  useB3,
   useB3BalanceFromAddresses,
   useModalStore,
   useNativeBalance,
@@ -11,6 +12,7 @@ import { BankIcon } from "@b3dotfun/sdk/global-account/react/components/icons/Ba
 import { SignOutIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SignOutIcon";
 import { SwapIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SwapIcon";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
+import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
 import { Loader2, Pencil } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
@@ -38,12 +40,27 @@ export function BalanceContent({ onLogout, partnerId, showDeposit = true, showSw
     address: eoaAddress || account?.address,
     fresh: true,
   });
-  const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
+  const { user } = useB3();
+  const { setB3ModalOpen, setB3ModalContentType, navigateBack } = useModalStore();
   const { logout } = useAuthentication(partnerId);
   const [logoutLoading, setLogoutLoading] = useState(false);
   const [openAccordions, setOpenAccordions] = useState<string[]>([]);
   const hasExpandedRef = useRef(false);
 
+  const avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profile?.avatar;
+
+  const handleEditAvatar = () => {
+    setB3ModalOpen(true);
+    setB3ModalContentType({
+      type: "avatarEditor",
+      showBackButton: true,
+      onSuccess: () => {
+        // navigate back on success
+        navigateBack();
+      },
+    });
+  };
+
   console.log("eoaAddress", eoaAddress);
   console.log("account?.address", account?.address);
 
@@ -100,14 +117,17 @@ export function BalanceContent({ onLogout, partnerId, showDeposit = true, showSw
       <div className="flex items-center justify-between">
         <div className="global-account-profile flex items-center gap-4">
           <div className="global-account-profile-avatar relative">
-            {profile?.avatar ? (
-              <img src={profile?.avatar} alt="Profile" className="size-24 rounded-full" />
+            {avatarUrl ? (
+              <img src={avatarUrl} alt="Profile" className="size-24 rounded-full" />
             ) : (
               <div className="bg-b3-primary-wash size-24 rounded-full" />
             )}
-            <div className="bg-b3-grey border-b3-background absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4">
+            <button
+              onClick={handleEditAvatar}
+              className="bg-b3-grey border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4 transition-colors"
+            >
               <Pencil size={16} className="text-b3-background" />
-            </div>
+            </button>
           </div>
           <div className="global-account-profile-info">
             <h2 className="text-b3-grey text-xl font-semibold">

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

@@ -93,7 +93,6 @@ export function ManageAccount({
     setB3ModalOpen(false);
     setLogoutLoading(false);
   };
-
   const AppsContent = () => (
     <div className="space-y-4">
       {signers?.map((signer: TWSignerWithMetadata) => (

package/src/global-account/react/hooks/useAccountWallet.tsx

@@ -1,6 +1,7 @@
 import { useB3, useProfile } from "@b3dotfun/sdk/global-account/react";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
 import { useEffect, useMemo, useState } from "react";
 import { getLastAuthProvider, useActiveWallet, useConnectedWallets, useWalletImage } from "thirdweb/react";
 import { Account, Wallet } from "thirdweb/wallets";
@@ -43,7 +44,7 @@ export function useAccountWallet(): {
   eoaWalletIcon?: string;
   smartWalletIcon?: string;
 } {
-  const { account } = useB3();
+  const { account, user } = useB3();
 
   const activeWallet = useActiveWallet();
   const connectedWallets = useConnectedWallets();
@@ -72,7 +73,7 @@ export function useAccountWallet(): {
 
   const { data: profileData } = useProfile({ address: account?.address });
   const ensName = profileData?.displayName?.replace(/\.b3\.fun/g, "");
-  const avatarUrl = profileData?.avatar;
+  const avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profileData?.avatar;
 
   const res = useMemo(
     () => ({

package/src/global-account/react/hooks/useAuthentication.ts

@@ -1,4 +1,5 @@
 import app from "@b3dotfun/sdk/global-account/app";
+import { authenticateWithB3JWT } from "@b3dotfun/sdk/global-account/bsmnt";
 import { useAuthStore, useB3 } from "@b3dotfun/sdk/global-account/react";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { b3MainnetThirdWeb } from "@b3dotfun/sdk/shared/constants/chains/supported";
@@ -67,6 +68,10 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
           setIsAuthenticated(true);
           setIsAuthenticatingV2(false);
           debug("Re-authenticated successfully", { userAuth });
+
+          // Authenticate on BSMNT with B3 JWT
+          const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
+          console.log("@@b3Jwt", b3Jwt);
         } catch (error) {
           // If re-authentication fails, try fresh authentication
           debug("Re-authentication failed, attempting fresh authentication");
@@ -75,6 +80,10 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
           setIsAuthenticated(true);
           setIsAuthenticatingV2(false);
           debug("Fresh authentication successful", { userAuth });
+
+          // Authenticate on BSMNT with B3 JWT
+          const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
+          console.log("@@b3Jwt", b3Jwt);
         }
       } catch (error) {
         debug("Auto-connect authentication failed", { error });

package/src/global-account/react/hooks/useProfile.ts

@@ -13,7 +13,7 @@ export interface Profile {
 export interface CombinedProfile {
   name: string | null;
   address: string | null;
-  avatar: string | null;
+  avatar: string | undefined;
   bio: string | null;
   displayName: string | null;
   profiles: Profile[];

package/src/global-account/react/hooks/useRPMToken.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import { useQueryBSMNT } from "@b3dotfun/sdk/global-account/react/hooks/useQueryBSMNT";
+
+export function useRPMToken() {
+  const {
+    data,
+    runQuery: refetch,
+    isLoading,
+    error: isError,
+  } = useQueryBSMNT("profiles", "getReadyPlayerMeToken", undefined, true);
+
+  const token = data?.token || "";
+  const accountId = data?.accountId || "";
+
+  return { token, accountId, refetch, isLoading, isError };
+}

package/src/global-account/react/stores/useModalStore.ts

@@ -309,6 +309,13 @@ export interface AnySpendDepositHypeProps extends BaseModalProps {
   onSuccess?: (amount?: string) => void;
 }
 
+export interface AvatarEditorModalProps extends BaseModalProps {
+  /** Modal type identifier */
+  type: "avatarEditor";
+  /** Callback function called when avatar is successfully set */
+  onSuccess?: () => void;
+}
+
 /**
  * Union type of all possible modal content types
  */
@@ -327,7 +334,8 @@ export type ModalContentType =
   | AnySpendSignatureMintProps
   | AnySpendBondKitProps
   | LinkAccountModalProps
-  | AnySpendDepositHypeProps;
+  | AnySpendDepositHypeProps
+  | AvatarEditorModalProps;
 // Add other modal types here like: | OtherModalProps | AnotherModalProps
 
 /**

package/src/global-account/react/utils/updateAvatar.ts

@@ -0,0 +1,21 @@
+import app, { extractAvatarIdFromUrl } from "@b3dotfun/sdk/global-account/bsmnt";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+
+const debug = debugB3React("updateAvatar");
+
+export async function updateAvatar(avatar: string) {
+  try {
+    // Extract avatar ID from URL
+    const avatarID = extractAvatarIdFromUrl(avatar);
+
+    if (!avatarID) {
+      throw new Error("Invalid avatar URL");
+    }
+
+    // Set the avatar in the profiles service
+    return await app.service("profiles").setAvatar({ avatarUrl: String(avatar), avatarID: String(avatarID) }, {});
+  } catch (error) {
+    debug("Failed to update avatar:", error);
+    throw error; // Re-throw to handle in component
+  }
+}