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

package/dist/cjs/global-account/bsmnt.d.ts

@@ -1,4 +1,6 @@
 declare const app: import("@b3dotfun/basement-api").ClientApplication;
 export declare const authenticate: (accessToken: string, identityToken: string, params?: Record<string, any>) => Promise<import("@feathersjs/authentication").AuthenticationResult | null>;
 export declare const resetSocket: () => void;
+export declare function extractAvatarIdFromUrl(url: string): string | null;
+export declare const authenticateWithB3JWT: (fullToken: string, params?: Record<string, any>) => Promise<import("@feathersjs/authentication").AuthenticationResult | null>;
 export default app;

package/dist/cjs/global-account/bsmnt.js

@@ -3,12 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resetSocket = exports.authenticate = void 0;
+exports.authenticateWithB3JWT = exports.resetSocket = exports.authenticate = void 0;
+exports.extractAvatarIdFromUrl = extractAvatarIdFromUrl;
 const basement_api_1 = require("@b3dotfun/basement-api");
+const debug_1 = require("../shared/utils/debug");
 const authentication_client_1 = require("@feathersjs/authentication-client");
 const socketio_client_1 = __importDefault(require("@feathersjs/socketio-client"));
 const js_cookie_1 = __importDefault(require("js-cookie"));
 const socket_io_client_1 = __importDefault(require("socket.io-client"));
+const debug = (0, debug_1.debugB3React)("bsmnt");
 // Also use b3 auth token since we are using b3-jwt strategy
 const BSMNT_AUTH_COOKIE_NAME = "b3-auth";
 const BSMNT_API_URL = process.env.EXPO_PUBLIC_BSMNT_API ||
@@ -66,4 +69,42 @@ const resetSocket = () => {
     // reset the socket connection
 };
 exports.resetSocket = resetSocket;
+function extractAvatarIdFromUrl(url) {
+    const regex = /https:\/\/models\.readyplayer\.me\/([a-f0-9]{24})\.[a-zA-Z0-9]+/;
+    const match = url.match(regex);
+    return match ? match[1] : null;
+}
+const authenticateWithB3JWT = async (fullToken, params) => {
+    // Do not authenticate if there is no token
+    if (!fullToken) {
+        console.log("No token found, not authenticating");
+        return null;
+    }
+    debug("Authenticating with token:12", fullToken);
+    try {
+        const response = await app.authenticate({
+            strategy: "b3-jwt",
+            accessToken: fullToken,
+        }, {
+            query: params || {},
+        });
+        debug("Authenticated", response);
+        // Store streamToken if it exists in the response
+        if (response?.streamToken) {
+            js_cookie_1.default.set("stream-token", response.streamToken, {
+                expires: new Date(response.authExpires),
+                secure: process.env.NODE_ENV === "production",
+                sameSite: "strict",
+            });
+            debug("Stream token stored in cookies");
+        }
+        return response;
+    }
+    catch (error) {
+        debug(`Authentication error:5`, error);
+        debug("Authentication JWT", fullToken);
+        return null;
+    }
+};
+exports.authenticateWithB3JWT = authenticateWithB3JWT;
 exports.default = app;

package/dist/cjs/global-account/react/components/AvatarCreator/AvatarCreator.d.ts

@@ -0,0 +1,6 @@
+interface AvatarCreatorProps {
+    onSetAvatar?: () => void;
+    className?: string;
+}
+export declare function AvatarCreator({ onSetAvatar, className }: AvatarCreatorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/global-account/react/components/AvatarCreator/AvatarCreator.js

@@ -0,0 +1,55 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarCreator = AvatarCreator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("../../../../global-account/react");
+const useRPMToken_1 = require("../../../../global-account/react/hooks/useRPMToken");
+const updateAvatar_1 = require("../../../../global-account/react/utils/updateAvatar");
+const cn_1 = require("../../../../shared/utils/cn");
+const debug_1 = require("../../../../shared/utils/debug");
+const react_avatar_creator_1 = require("@readyplayerme/react-avatar-creator");
+const react_2 = require("react");
+const sonner_1 = require("sonner");
+const react_3 = require("thirdweb/react");
+const debug = (0, debug_1.debugB3React)("AvatarCreator");
+const config = {
+    clearCache: true,
+    bodyType: "fullbody",
+    quickStart: true,
+    language: "en",
+};
+function AvatarCreator({ onSetAvatar, className }) {
+    const { token, refetch: refetchRPMToken } = (0, useRPMToken_1.useRPMToken)();
+    const [loading, setIsLoading] = (0, react_2.useState)(false);
+    const account = (0, react_3.useActiveAccount)();
+    const { data: profile, refetch: refreshProfile } = (0, react_1.useProfile)({
+        address: account?.address,
+        fresh: true,
+    });
+    const hasAvatar = profile?.avatar;
+    const handleOnAvatarExported = async (event) => {
+        setIsLoading(true);
+        debug("@@AvatarExportedEvent", event);
+        try {
+            const avatarUpload = await (0, updateAvatar_1.updateAvatar)(event.data.url);
+            debug("@@avatarUpload", avatarUpload);
+            await refreshProfile();
+            sonner_1.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);
+            sonner_1.toast.error("Failed to update avatar. Please try again.");
+        }
+        setIsLoading(false);
+    };
+    if (loading) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-[80vh] w-full flex-col items-center justify-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted-foreground text-sm font-medium", children: "Saving your avatar" })] }));
+    }
+    if (!token) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-[80vh] w-full flex-col items-center justify-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted-foreground text-sm font-medium", children: "Loading avatar creator" })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("h-[calc(90vh-2px)] w-full", className), children: (0, jsx_runtime_1.jsx)(react_avatar_creator_1.AvatarCreator, { className: "h-full w-full", subdomain: "b3", config: { ...config, token }, onAvatarExported: handleOnAvatarExported }) }));
+}

package/dist/cjs/global-account/react/components/AvatarEditor/AvatarEditor.d.ts

@@ -0,0 +1,6 @@
+interface AvatarEditorProps {
+    onSetAvatar?: () => void;
+    className?: string;
+}
+export declare function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/global-account/react/components/AvatarEditor/AvatarEditor.js

@@ -0,0 +1,108 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarEditor = AvatarEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const app_1 = __importDefault(require("../../../../global-account/app"));
+const react_1 = require("../../../../global-account/react");
+const cn_1 = require("../../../../shared/utils/cn");
+const debug_1 = require("../../../../shared/utils/debug");
+const thirdweb_1 = require("../../../../shared/utils/thirdweb");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("react");
+const sonner_1 = require("sonner");
+const react_3 = require("thirdweb/react");
+const storage_1 = require("thirdweb/storage");
+const debug = (0, debug_1.debugB3React)("AvatarEditor");
+function AvatarEditor({ onSetAvatar, className }) {
+    const [selectedFile, setSelectedFile] = (0, react_2.useState)(null);
+    const [previewUrl, setPreviewUrl] = (0, react_2.useState)(null);
+    const [isUploading, setIsUploading] = (0, react_2.useState)(false);
+    const [isSaving, setIsSaving] = (0, react_2.useState)(false);
+    const fileInputRef = (0, react_2.useRef)(null);
+    const { setUser } = (0, react_1.useB3)();
+    const account = (0, react_3.useActiveAccount)();
+    const { data: profile, refetch: refreshProfile } = (0, react_1.useProfile)({
+        address: account?.address,
+        fresh: true,
+    });
+    // Thirdweb upload function
+    const hasAvatar = profile?.avatar;
+    const handleFileSelect = (event) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            // Validate file type
+            if (!file.type.startsWith("image/")) {
+                sonner_1.toast.error("Please select an image file");
+                return;
+            }
+            // Validate file size (max 5MB)
+            if (file.size > 5 * 1024 * 1024) {
+                sonner_1.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) {
+            sonner_1.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 (0, storage_1.upload)({
+                client: thirdweb_1.client,
+                files: [selectedFile],
+            });
+            debug("Upload successful", ipfsUrl);
+            // Save avatar URL using profiles service
+            setIsSaving(true);
+            const user = await app_1.default.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();
+            sonner_1.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);
+            sonner_1.toast.error("Failed to upload avatar. Please try again.");
+        }
+        finally {
+            setIsUploading(false);
+            setIsSaving(false);
+        }
+    };
+    const handleFileInputClick = () => {
+        fileInputRef.current?.click();
+    };
+    const isLoading = isUploading || isSaving;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col items-center justify-center space-y-6 p-8", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2 text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "font-neue-montreal-semibold text-b3-grey text-2xl", children: hasAvatar ? "Update Your Avatar" : "Set Your Avatar" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium", children: "Upload an image to personalize your profile" })] }), hasAvatar && !previewUrl && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("div", { className: "border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4", children: (0, jsx_runtime_1.jsx)("img", { src: profile.avatar, alt: "Current avatar", className: "h-full w-full object-cover" }) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "w-full max-w-md", children: [!selectedFile ? ((0, jsx_runtime_1.jsxs)("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", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "text-b3-grey mx-auto mb-4 h-12 w-12" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold mb-2", children: "Click to select an image" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "PNG, JPG, or GIF up to 5MB" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "border-b3-primary-blue mx-auto h-32 w-32 overflow-hidden rounded-full border-4", children: previewUrl ? ((0, jsx_runtime_1.jsx)("img", { src: previewUrl, alt: "Preview", className: "h-full w-full object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "No file selected" }) })) }), (0, jsx_runtime_1.jsx)("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, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1 text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: selectedFile.name }), (0, jsx_runtime_1.jsxs)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-xs", children: [(selectedFile.size / 1024 / 1024).toFixed(2), " MB"] })] })] })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, className: "hidden" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-md gap-3", children: [selectedFile && ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleUpload, disabled: isLoading, className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white", children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isUploading ? "Uploading..." : "Saving..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "mr-2 h-4 w-4" }), hasAvatar ? "Update Avatar" : "Set Avatar"] })) })), (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", onClick: handleFileInputClick, disabled: isLoading, className: "flex-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "mr-2 h-4 w-4" }), selectedFile ? "Change Image" : "Select Image"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs", children: (0, jsx_runtime_1.jsx)("p", { children: "Your avatar will be uploaded to IPFS and stored securely. Make sure you have the rights to use this image." }) })] }));
+}

package/dist/cjs/global-account/react/components/B3DynamicModal.js

@@ -7,6 +7,7 @@ const AnyspendDepositHype_1 = require("../../../anyspend/react/components/Anyspe
 const react_2 = require("../../../global-account/react");
 const cn_1 = require("../../../shared/utils/cn");
 const debug_1 = require("../../../shared/utils/debug");
+const AvatarEditor_1 = require("./AvatarEditor/AvatarEditor");
 const useB3_1 = require("./B3Provider/useB3");
 const LinkAccount_1 = require("./LinkAccount/LinkAccount");
 const ManageAccount_1 = require("./ManageAccount/ManageAccount");
@@ -32,6 +33,7 @@ function B3DynamicModal() {
         "anySpendSignatureMint",
         "anySpendBondKit",
         "linkAccount",
+        "avatarEditor",
     ];
     const freestyleTypes = [
         "anySpendNft",
@@ -83,6 +85,8 @@ function B3DynamicModal() {
                 return (0, jsx_runtime_1.jsx)(LinkAccount_1.LinkAccount, { ...contentType });
             case "anySpendDepositHype":
                 return (0, jsx_runtime_1.jsx)(AnyspendDepositHype_1.AnySpendDepositHype, { ...contentType, mode: "modal" });
+            case "avatarEditor":
+                return (0, jsx_runtime_1.jsx)(AvatarEditor_1.AvatarEditor, { onSetAvatar: contentType.onSuccess });
             // Add other modal types here
             default:
                 return null;
@@ -92,5 +96,9 @@ function B3DynamicModal() {
     const ModalContent = isMobile ? drawer_1.DrawerContent : dialog_1.DialogContent;
     const ModalTitle = isMobile ? drawer_1.DrawerTitle : dialog_1.DialogTitle;
     const ModalDescription = isMobile ? drawer_1.DrawerDescription : dialog_1.DialogDescription;
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: (0, jsx_runtime_1.jsxs)(ModalContent, { className: (0, cn_1.cn)(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"), hideCloseButton: hideCloseButton, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [history.length > 0 && contentType?.showBackButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: [(0, jsx_runtime_1.jsxs)(ModalContent, { className: (0, cn_1.cn)(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", 
+                // 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, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [history.length > 0 && contentType?.showBackButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }), contentType?.type === "avatarEditor" && ((0, jsx_runtime_1.jsx)("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", children: (0, jsx_runtime_1.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
 }

package/dist/cjs/global-account/react/components/ManageAccount/BalanceContent.js

@@ -7,6 +7,7 @@ const BankIcon_1 = require("../../../../global-account/react/components/icons/Ba
 const SignOutIcon_1 = require("../../../../global-account/react/components/icons/SignOutIcon");
 const SwapIcon_1 = require("../../../../global-account/react/components/icons/SwapIcon");
 const utils_1 = require("../../../../shared/utils");
+const ipfs_1 = require("../../../../shared/utils/ipfs");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const react_3 = require("thirdweb/react");
@@ -26,11 +27,24 @@ function BalanceContent({ onLogout, partnerId, showDeposit = true, showSwap = tr
         address: eoaAddress || account?.address,
         fresh: true,
     });
-    const { setB3ModalOpen, setB3ModalContentType } = (0, react_1.useModalStore)();
+    const { user } = (0, react_1.useB3)();
+    const { setB3ModalOpen, setB3ModalContentType, navigateBack } = (0, react_1.useModalStore)();
     const { logout } = (0, react_1.useAuthentication)(partnerId);
     const [logoutLoading, setLogoutLoading] = (0, react_2.useState)(false);
     const [openAccordions, setOpenAccordions] = (0, react_2.useState)([]);
     const hasExpandedRef = (0, react_2.useRef)(false);
+    const avatarUrl = user?.avatar ? (0, ipfs_1.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);
     // Balance data fetching
@@ -74,7 +88,7 @@ function BalanceContent({ onLogout, partnerId, showDeposit = true, showSwap = tr
         setB3ModalOpen(false);
         setLogoutLoading(false);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-avatar relative", children: [profile?.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: profile?.avatar, alt: "Profile", className: "size-24 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash size-24 rounded-full" })), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-grey border-b3-background absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 16, className: "text-b3-background" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-info", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-b3-grey text-xl font-semibold", children: profile?.displayName || (0, utils_1.formatUsername)(profile?.name || "") }), (0, jsx_runtime_1.jsxs)("div", { className: "address-button border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(account?.address || "", 6) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: account?.address || "" })] })] })] }) }), (showDeposit || showSwap) && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [showDeposit && ((0, jsx_runtime_1.jsxs)(react_1.Button, { className: "manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-avatar relative", children: [avatarUrl ? ((0, jsx_runtime_1.jsx)("img", { src: avatarUrl, alt: "Profile", className: "size-24 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash size-24 rounded-full" })), (0, jsx_runtime_1.jsx)("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", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 16, className: "text-b3-background" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-info", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-b3-grey text-xl font-semibold", children: profile?.displayName || (0, utils_1.formatUsername)(profile?.name || "") }), (0, jsx_runtime_1.jsxs)("div", { className: "address-button border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(account?.address || "", 6) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: account?.address || "" })] })] })] }) }), (showDeposit || showSwap) && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [showDeposit && ((0, jsx_runtime_1.jsxs)(react_1.Button, { className: "manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl", onClick: () => {
                             setB3ModalOpen(true);
                             setB3ModalContentType({
                                 type: "anySpend",

package/dist/cjs/global-account/react/hooks/useAccountWallet.js

@@ -4,6 +4,7 @@ exports.useAccountWallet = useAccountWallet;
 const react_1 = require("../../../global-account/react");
 const constants_1 = require("../../../shared/constants");
 const debug_1 = require("../../../shared/utils/debug");
+const ipfs_1 = require("../../../shared/utils/ipfs");
 const react_2 = require("react");
 const react_3 = require("thirdweb/react");
 const in_app_1 = require("thirdweb/wallets/in-app");
@@ -20,7 +21,7 @@ function useLastAuthProvider() {
     return lastAuthProvider;
 }
 function useAccountWallet() {
-    const { account } = (0, react_1.useB3)();
+    const { account, user } = (0, react_1.useB3)();
     const activeWallet = (0, react_3.useActiveWallet)();
     const connectedWallets = (0, react_3.useConnectedWallets)();
     const connectedSmartWallet = connectedWallets.find(wallet => wallet.id === constants_1.ecosystemWalletId);
@@ -41,7 +42,7 @@ function useAccountWallet() {
         : "https://gradvatar.com/0x0000000000000000000000000000000000000000"; // show smart wallet of eoa wallet is gradvatar
     const { data: profileData } = (0, react_1.useProfile)({ address: account?.address });
     const ensName = profileData?.displayName?.replace(/\.b3\.fun/g, "");
-    const avatarUrl = profileData?.avatar;
+    const avatarUrl = user?.avatar ? (0, ipfs_1.getIpfsUrl)(user?.avatar) : profileData?.avatar;
     const res = (0, react_2.useMemo)(() => ({
         wallet: {
             ...account,

package/dist/cjs/global-account/react/hooks/useAuthentication.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAuthentication = useAuthentication;
 const app_1 = __importDefault(require("../../../global-account/app"));
+const bsmnt_1 = require("../../../global-account/bsmnt");
 const react_1 = require("../../../global-account/react");
 const constants_1 = require("../../../shared/constants");
 const supported_1 = require("../../../shared/constants/chains/supported");
@@ -66,6 +67,9 @@ function useAuthentication(partnerId, loginWithSiwe) {
                     setIsAuthenticated(true);
                     setIsAuthenticatingV2(false);
                     debug("Re-authenticated successfully", { userAuth });
+                    // Authenticate on BSMNT with B3 JWT
+                    const b3Jwt = await (0, bsmnt_1.authenticateWithB3JWT)(userAuth.accessToken);
+                    console.log("@@b3Jwt", b3Jwt);
                 }
                 catch (error) {
                     // If re-authentication fails, try fresh authentication
@@ -75,6 +79,9 @@ function useAuthentication(partnerId, loginWithSiwe) {
                     setIsAuthenticated(true);
                     setIsAuthenticatingV2(false);
                     debug("Fresh authentication successful", { userAuth });
+                    // Authenticate on BSMNT with B3 JWT
+                    const b3Jwt = await (0, bsmnt_1.authenticateWithB3JWT)(userAuth.accessToken);
+                    console.log("@@b3Jwt", b3Jwt);
                 }
             }
             catch (error) {

package/dist/cjs/global-account/react/hooks/useProfile.d.ts

@@ -9,7 +9,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/dist/cjs/global-account/react/hooks/useRPMToken.d.ts

@@ -0,0 +1,7 @@
+export declare function useRPMToken(): {
+    token: string;
+    accountId: string;
+    refetch: (queryParams: undefined) => Promise<any>;
+    isLoading: boolean;
+    isError: Error | null;
+};

package/dist/cjs/global-account/react/hooks/useRPMToken.js

@@ -0,0 +1,11 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRPMToken = useRPMToken;
+const useQueryBSMNT_1 = require("../../../global-account/react/hooks/useQueryBSMNT");
+function useRPMToken() {
+    const { data, runQuery: refetch, isLoading, error: isError, } = (0, useQueryBSMNT_1.useQueryBSMNT)("profiles", "getReadyPlayerMeToken", undefined, true);
+    const token = data?.token || "";
+    const accountId = data?.accountId || "";
+    return { token, accountId, refetch, isLoading, isError };
+}

package/dist/cjs/global-account/react/stores/useModalStore.d.ts

@@ -291,10 +291,16 @@ export interface AnySpendDepositHypeProps extends BaseModalProps {
     /** Callback function called when the deposit is successful */
     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
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps;
 /**
  * State interface for the modal store
  */

package/dist/cjs/global-account/react/utils/updateAvatar.d.ts

@@ -0,0 +1,4 @@
+export declare function updateAvatar(avatar: string): Promise<{
+    success: boolean;
+    error?: string;
+}>;

package/dist/cjs/global-account/react/utils/updateAvatar.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateAvatar = updateAvatar;
+const bsmnt_1 = __importStar(require("../../../global-account/bsmnt"));
+const debug_1 = require("../../../shared/utils/debug");
+const debug = (0, debug_1.debugB3React)("updateAvatar");
+async function updateAvatar(avatar) {
+    try {
+        // Extract avatar ID from URL
+        const avatarID = (0, bsmnt_1.extractAvatarIdFromUrl)(avatar);
+        if (!avatarID) {
+            throw new Error("Invalid avatar URL");
+        }
+        // Set the avatar in the profiles service
+        return await bsmnt_1.default.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
+    }
+}

package/dist/esm/global-account/bsmnt.d.ts

@@ -1,4 +1,6 @@
 declare const app: import("@b3dotfun/basement-api").ClientApplication;
 export declare const authenticate: (accessToken: string, identityToken: string, params?: Record<string, any>) => Promise<import("@feathersjs/authentication").AuthenticationResult | null>;
 export declare const resetSocket: () => void;
+export declare function extractAvatarIdFromUrl(url: string): string | null;
+export declare const authenticateWithB3JWT: (fullToken: string, params?: Record<string, any>) => Promise<import("@feathersjs/authentication").AuthenticationResult | null>;
 export default app;

package/dist/esm/global-account/bsmnt.js

@@ -1,8 +1,10 @@
 import { createClient } from "@b3dotfun/basement-api";
+import { debugB3React } from "../shared/utils/debug.js";
 import { AuthenticationClient } from "@feathersjs/authentication-client";
 import socketio from "@feathersjs/socketio-client";
 import Cookies from "js-cookie";
 import io from "socket.io-client";
+const debug = debugB3React("bsmnt");
 // Also use b3 auth token since we are using b3-jwt strategy
 const BSMNT_AUTH_COOKIE_NAME = "b3-auth";
 const BSMNT_API_URL = process.env.EXPO_PUBLIC_BSMNT_API ||
@@ -58,4 +60,41 @@ export const resetSocket = () => {
     socket.connect();
     // reset the socket connection
 };
+export function extractAvatarIdFromUrl(url) {
+    const regex = /https:\/\/models\.readyplayer\.me\/([a-f0-9]{24})\.[a-zA-Z0-9]+/;
+    const match = url.match(regex);
+    return match ? match[1] : null;
+}
+export const authenticateWithB3JWT = async (fullToken, params) => {
+    // Do not authenticate if there is no token
+    if (!fullToken) {
+        console.log("No token found, not authenticating");
+        return null;
+    }
+    debug("Authenticating with token:12", fullToken);
+    try {
+        const response = await app.authenticate({
+            strategy: "b3-jwt",
+            accessToken: fullToken,
+        }, {
+            query: params || {},
+        });
+        debug("Authenticated", response);
+        // Store streamToken if it exists in the response
+        if (response?.streamToken) {
+            Cookies.set("stream-token", response.streamToken, {
+                expires: new Date(response.authExpires),
+                secure: process.env.NODE_ENV === "production",
+                sameSite: "strict",
+            });
+            debug("Stream token stored in cookies");
+        }
+        return response;
+    }
+    catch (error) {
+        debug(`Authentication error:5`, error);
+        debug("Authentication JWT", fullToken);
+        return null;
+    }
+};
 export default app;

package/dist/esm/global-account/react/components/AvatarCreator/AvatarCreator.d.ts

@@ -0,0 +1,6 @@
+interface AvatarCreatorProps {
+    onSetAvatar?: () => void;
+    className?: string;
+}
+export declare function AvatarCreator({ onSetAvatar, className }: AvatarCreatorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/global-account/react/components/AvatarCreator/AvatarCreator.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProfile } from "../../../../global-account/react/index.js";
+import { useRPMToken } from "../../../../global-account/react/hooks/useRPMToken.js";
+import { updateAvatar } from "../../../../global-account/react/utils/updateAvatar.js";
+import { cn } from "../../../../shared/utils/cn.js";
+import { debugB3React } from "../../../../shared/utils/debug.js";
+import { AvatarCreator as AvatarCreatorRPM, } from "@readyplayerme/react-avatar-creator";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useActiveAccount } from "thirdweb/react";
+const debug = debugB3React("AvatarCreator");
+const config = {
+    clearCache: true,
+    bodyType: "fullbody",
+    quickStart: true,
+    language: "en",
+};
+export function AvatarCreator({ onSetAvatar, className }) {
+    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) => {
+        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 (_jsxs("div", { className: "flex h-[80vh] w-full flex-col items-center justify-center gap-4", children: [_jsx("div", { className: "border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: "Saving your avatar" })] }));
+    }
+    if (!token) {
+        return (_jsxs("div", { className: "flex h-[80vh] w-full flex-col items-center justify-center gap-4", children: [_jsx("div", { className: "border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: "Loading avatar creator" })] }));
+    }
+    return (_jsx("div", { className: cn("h-[calc(90vh-2px)] w-full", className), children: _jsx(AvatarCreatorRPM, { className: "h-full w-full", subdomain: "b3", config: { ...config, token }, onAvatarExported: handleOnAvatarExported }) }));
+}