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

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/LinkAccount/LinkAccount.d.ts

@@ -1,2 +1,4 @@
 import { LinkAccountModalProps } from "../../stores/useModalStore";
-export declare function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, }: LinkAccountModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, className, }: LinkAccountModalProps & {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkAccount = LinkAccount;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const app_1 = __importDefault(require("../../../../global-account/app"));
 const constants_1 = require("../../../../shared/constants");
 const thirdweb_1 = require("../../../../shared/utils/thirdweb");
 const lucide_react_1 = require("lucide-react");
@@ -15,18 +16,27 @@ const wallets_1 = require("thirdweb/wallets");
 const useModalStore_1 = require("../../stores/useModalStore");
 const profileDisplay_1 = require("../../utils/profileDisplay");
 const useB3_1 = require("../B3Provider/useB3");
+const AppleIcon_1 = require("../icons/AppleIcon");
+const DiscordIcon_1 = require("../icons/DiscordIcon");
+const FarcasterIcon_1 = require("../icons/FarcasterIcon");
+const GoogleIcon_1 = require("../icons/GoogleIcon");
+const XIcon_1 = require("../icons/XIcon");
 const button_1 = require("../ui/button");
-const app_1 = __importDefault(require("../../../../global-account/app"));
 const AUTH_METHODS = [
-    { id: "email", label: "Email", enabled: true },
-    { id: "phone", label: "Phone", enabled: true },
-    { id: "google", label: "Google", enabled: true },
-    { id: "x", label: "X (Twitter)", enabled: true },
-    { id: "discord", label: "Discord", enabled: true },
-    { id: "apple", label: "Apple", enabled: true },
-    { id: "farcaster", label: "Farcaster", enabled: true },
+    { id: "email", label: "Email", enabled: true, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { className: "text-b3-primary-blue size-6" }) },
+    { id: "phone", label: "Phone", enabled: true, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Phone, { className: "text-b3-primary-blue size-6" }) },
+    { id: "google", label: "Google", enabled: true, icon: (0, jsx_runtime_1.jsx)(GoogleIcon_1.GoogleIcon, { className: "size-6" }) },
+    { id: "x", label: "X (Twitter)", enabled: true, icon: (0, jsx_runtime_1.jsx)(XIcon_1.XIcon, { className: "size-6" }) },
+    { id: "discord", label: "Discord", enabled: true, icon: (0, jsx_runtime_1.jsx)(DiscordIcon_1.DiscordIcon, { className: "size-6" }) },
+    { id: "apple", label: "Apple", enabled: true, icon: (0, jsx_runtime_1.jsx)(AppleIcon_1.AppleIcon, { className: "size-6" }) },
+    {
+        id: "farcaster",
+        label: "Farcaster",
+        enabled: true,
+        icon: (0, jsx_runtime_1.jsx)(FarcasterIcon_1.FarcasterIcon, { className: "size-6" }),
+    },
 ];
-function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, }) {
+function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, className, }) {
     const { isLinking, linkingMethod, setLinkingState, navigateBack, setB3ModalContentType } = (0, useModalStore_1.useModalStore)();
     const [selectedMethod, setSelectedMethod] = (0, react_1.useState)(null);
     const [email, setEmail] = (0, react_1.useState)("");
@@ -245,12 +255,12 @@ function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, pa
     if (!account) {
         return (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted py-8 text-center", children: "Please connect your account first" });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6 p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-b3-grey font-neue-montreal-semibold text-2xl", children: "Link New Account" }), selectedMethod && ((0, jsx_runtime_1.jsx)(button_1.Button, { variant: "ghost", className: "text-b3-grey hover:text-b3-grey/80", onClick: handleBack, children: "Backs" }))] }), !selectedMethod ? ((0, jsx_runtime_1.jsxs)("div", { className: "grid gap-3", children: [availableAuthMethods.map(method => ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "bg-b3-primary-wash hover:bg-b3-primary-wash/70 text-b3-grey font-neue-montreal-semibold h-16 justify-start px-6 text-lg", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `b3-link-account space-y-6 p-6 ${className || ""}`, "data-testid": "link-account", children: [(0, jsx_runtime_1.jsxs)("div", { className: "b3-link-account-header flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "b3-link-account-title text-b3-grey font-neue-montreal-semibold text-2xl", children: "Link New Account" }), selectedMethod && ((0, jsx_runtime_1.jsx)(button_1.Button, { variant: "ghost", className: "text-b3-grey hover:text-b3-grey/80", onClick: handleBack, children: "Backs" }))] }), !selectedMethod ? ((0, jsx_runtime_1.jsxs)("div", { className: "b3-link-account-methods grid gap-3", children: [availableAuthMethods.map(method => ((0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", className: "b3-link-account-method-button border-b3-line hover:border-b3-primary-blue/30 hover:bg-b3-primary-blue/5 text-b3-grey font-neue-montreal-medium h-14 justify-start bg-transparent px-6 text-base transition-all duration-200", "data-method": method.id, onClick: () => {
                             if (method.id === "email" || method.id === "phone") {
                                 setSelectedMethod(method.id);
                             }
                             else {
                                 handleSocialLink(method.id);
                             }
-                        }, disabled: linkingMethod === method.id, children: isLinking && linkingMethod === method.id ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin" }) : method.label }, method.id))), availableAuthMethods.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted py-8 text-center", children: "All available authentication methods have been connected" }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [selectedMethod === "email" && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Email Address" }), (0, jsx_runtime_1.jsx)("input", { type: "email", placeholder: "Enter your email", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: email, onChange: e => setEmail(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "email") })] })), selectedMethod === "phone" && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Phone Number" }), (0, jsx_runtime_1.jsx)("input", { type: "tel", placeholder: "Enter your phone number", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: phone, onChange: e => setPhone(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "phone") }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Include country code (e.g., +1 for US)" })] })), error && (0, jsx_runtime_1.jsx)("div", { className: "text-b3-negative font-neue-montreal-medium py-2 text-sm", children: error }), otpSent ? ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Verification Code" }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Enter verification code", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: otp, onChange: e => setOtp(e.target.value) })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleLinkAccount, children: "Link Account" })] })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleSendOTP, disabled: (!email && !phone) || (isLinking && linkingMethod === selectedMethod), children: isLinking && linkingMethod === selectedMethod ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin" })) : ("Send Verification Code") }))] }))] }));
+                        }, disabled: linkingMethod === method.id, children: isLinking && linkingMethod === method.id ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin" })) : ((0, jsx_runtime_1.jsxs)("div", { className: "b3-link-account-method-content flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "b3-link-account-method-icon flex items-center justify-center rounded-full", children: method.icon }), (0, jsx_runtime_1.jsx)("span", { className: "b3-link-account-method-label font-medium", children: method.label })] })) }, method.id))), availableAuthMethods.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted py-8 text-center", children: "All available authentication methods have been connected" }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "b3-link-account-form space-y-4", children: [selectedMethod === "email" && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Email Address" }), (0, jsx_runtime_1.jsx)("input", { type: "email", placeholder: "Enter your email", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: email, onChange: e => setEmail(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "email") })] })), selectedMethod === "phone" && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Phone Number" }), (0, jsx_runtime_1.jsx)("input", { type: "tel", placeholder: "Enter your phone number", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: phone, onChange: e => setPhone(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "phone") }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Include country code (e.g., +1 for US)" })] })), error && (0, jsx_runtime_1.jsx)("div", { className: "text-b3-negative font-neue-montreal-medium py-2 text-sm", children: error }), otpSent ? ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Verification Code" }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Enter verification code", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: otp, onChange: e => setOtp(e.target.value) })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleLinkAccount, children: "Link Account" })] })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleSendOTP, disabled: (!email && !phone) || (isLinking && linkingMethod === selectedMethod), children: isLinking && linkingMethod === selectedMethod ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin" })) : ("Send Verification Code") }))] }))] }));
 }

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/components/icons/AppleIcon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface AppleIconProps {
+    className?: string;
+    size?: number;
+    color?: string;
+    style?: React.CSSProperties;
+}
+export declare function AppleIcon({ className, size, color, style }: AppleIconProps): import("react/jsx-runtime").JSX.Element;
+export default AppleIcon;

package/dist/cjs/global-account/react/components/icons/AppleIcon.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppleIcon = AppleIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function AppleIcon({ className, size = 24, color = "currentColor", style }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 41.5 51", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M40.2,17.4c-3.4,2.1-5.5,5.7-5.5,9.7c0,4.5,2.7,8.6,6.8,10.3c-0.8,2.6-2,5-3.5,7.2c-2.2,3.1-4.5,6.3-7.9,6.3s-4.4-2-8.4-2\n\t\tc-3.9,0-5.3,2.1-8.5,2.1s-5.4-2.9-7.9-6.5C2,39.5,0.1,33.7,0,27.6c0-9.9,6.4-15.2,12.8-15.2c3.4,0,6.2,2.2,8.3,2.2\n\t\tc2,0,5.2-2.3,9-2.3C34.1,12.2,37.9,14.1,40.2,17.4z M28.3,8.1C30,6.1,30.9,3.6,31,1c0-0.3,0-0.7-0.1-1c-2.9,0.3-5.6,1.7-7.5,3.9\n\t\tc-1.7,1.9-2.7,4.3-2.8,6.9c0,0.3,0,0.6,0.1,0.9c0.2,0,0.5,0.1,0.7,0.1C24.1,11.6,26.6,10.2,28.3,8.1z" }) }) }));
+}
+exports.default = AppleIcon;

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

@@ -0,0 +1,9 @@
+import React from "react";
+export interface DiscordIconProps {
+    className?: string;
+    size?: number;
+    color?: string;
+    style?: React.CSSProperties;
+}
+export declare function DiscordIcon({ className, size, color, style }: DiscordIconProps): import("react/jsx-runtime").JSX.Element;
+export default DiscordIcon;

package/dist/cjs/global-account/react/components/icons/DiscordIcon.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiscordIcon = DiscordIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function DiscordIcon({ className, size = 24, color = "#5865F2", style }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 -28.5 256 256", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, preserveAspectRatio: "xMidYMid", children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z", fill: color, fillRule: "nonzero" }) }) }));
+}
+exports.default = DiscordIcon;

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

@@ -0,0 +1,9 @@
+import React from "react";
+export interface FarcasterIconProps {
+    className?: string;
+    size?: number;
+    color?: string;
+    style?: React.CSSProperties;
+}
+export declare function FarcasterIcon({ className, size, color, style }: FarcasterIconProps): import("react/jsx-runtime").JSX.Element;
+export default FarcasterIcon;

package/dist/cjs/global-account/react/components/icons/FarcasterIcon.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FarcasterIcon = FarcasterIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function FarcasterIcon({ className, size = 24, color = "#855DCD", style }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 1000 1000", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: [(0, jsx_runtime_1.jsx)("rect", { width: "1000", height: "1000", rx: "200", fill: color }), (0, jsx_runtime_1.jsx)("path", { d: "M257.778 155.556H742.222V844.444H671.111V528.889H670.414C662.554 441.677 589.258 373.333 500 373.333C410.742 373.333 337.446 441.677 329.586 528.889H328.889V844.444H257.778V155.556Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M128.889 253.333L157.778 351.111H182.222V746.667C169.949 746.667 160 756.616 160 768.889V795.556H155.556C143.283 795.556 133.333 805.505 133.333 817.778V844.444H382.222V817.778C382.222 805.505 372.273 795.556 360 795.556H355.556V768.889C355.556 756.616 345.606 746.667 333.333 746.667H306.667V253.333H128.889Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M675.556 746.667C663.283 746.667 653.333 756.616 653.333 768.889V795.556H648.889C636.616 795.556 626.667 805.505 626.667 817.778V844.444H875.556V817.778C875.556 805.505 865.606 795.556 853.333 795.556H848.889V768.889C848.889 756.616 838.94 746.667 826.667 746.667V351.111H851.111L880 253.333H702.222V746.667H675.556Z", fill: "white" })] }));
+}
+exports.default = FarcasterIcon;

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

@@ -0,0 +1,8 @@
+import React from "react";
+export interface GoogleIconProps {
+    className?: string;
+    size?: number;
+    style?: React.CSSProperties;
+}
+export declare function GoogleIcon({ className, size, style }: GoogleIconProps): import("react/jsx-runtime").JSX.Element;
+export default GoogleIcon;

package/dist/cjs/global-account/react/components/icons/GoogleIcon.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GoogleIcon = GoogleIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function GoogleIcon({ className, size = 24, style }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: [(0, jsx_runtime_1.jsx)("path", { fill: "#EA4335", d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#4285F4", d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#FBBC05", d: "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#34A853", d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" }), (0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h48v48H0z" })] }));
+}
+exports.default = GoogleIcon;

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

@@ -0,0 +1,9 @@
+import React from "react";
+export interface XIconProps {
+    className?: string;
+    size?: number;
+    color?: string;
+    style?: React.CSSProperties;
+}
+export declare function XIcon({ className, size, color, style }: XIconProps): import("react/jsx-runtime").JSX.Element;
+export default XIcon;

package/dist/cjs/global-account/react/components/icons/XIcon.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XIcon = XIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function XIcon({ className, size = 24, color = "currentColor", style }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 300 300.251", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: (0, jsx_runtime_1.jsx)("path", { d: "M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66", fill: color }) }));
+}
+exports.default = XIcon;

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[];