@b3dotfun/sdk 0.0.65-test.3 → 0.0.65-test.5

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

@@ -7,7 +7,9 @@ import { cn } from "../../../../shared/utils/cn.js";
 import { debugB3React } from "../../../../shared/utils/debug.js";
 import { client } from "../../../../shared/utils/thirdweb.js";
 import { Loader2, Upload, X } from "lucide-react";
-import { useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
+import Cropper from "react-easy-crop";
+import "react-easy-crop/react-easy-crop.css";
 import { toast } from "sonner";
 import { useActiveAccount } from "thirdweb/react";
 import { upload } from "thirdweb/storage";
@@ -15,6 +17,14 @@ import { useProfileSettings } from "../../hooks/useProfile.js";
 import { useModalStore } from "../../stores/index.js";
 import ModalHeader from "../ModalHeader/ModalHeader.js";
 const debug = debugB3React("AvatarEditor");
+// Helper function to create an image element from a URL
+const createImage = (url) => new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener("load", () => resolve(image));
+    image.addEventListener("error", error => reject(error));
+    image.setAttribute("crossOrigin", "anonymous");
+    image.src = url;
+});
 export function AvatarEditor({ onSetAvatar, className }) {
     const [viewStep, setViewStep] = useState("select");
     const [selectedAvatar, setSelectedAvatar] = useState(null);
@@ -24,6 +34,9 @@ export function AvatarEditor({ onSetAvatar, className }) {
     const [previewUrl, setPreviewUrl] = useState(null);
     const [isSaving, setIsSaving] = useState(false);
     const [isDragging, setIsDragging] = useState(false);
+    const [crop, setCrop] = useState({ x: 0, y: 0 });
+    const [zoom, setZoom] = useState(1);
+    const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
     const fileInputRef = useRef(null);
     const { setUser, user, partnerId } = useB3();
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
@@ -38,6 +51,32 @@ export function AvatarEditor({ onSetAvatar, className }) {
     const rawCurrentAvatar = user?.avatar || profile?.avatar;
     const currentAvatar = validateImageUrl(rawCurrentAvatar);
     const safePreviewUrl = validateImageUrl(previewUrl);
+    const onCropComplete = useCallback((_croppedArea, croppedAreaPixels) => {
+        setCroppedAreaPixels(croppedAreaPixels);
+    }, []);
+    const createCroppedImage = async (imageSrc, pixelCrop) => {
+        const image = await createImage(imageSrc);
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+            throw new Error("Failed to get canvas context");
+        }
+        // Set canvas size to the crop area
+        canvas.width = pixelCrop.width;
+        canvas.height = pixelCrop.height;
+        // Draw the cropped image
+        ctx.drawImage(image, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height);
+        // Return as blob
+        return new Promise((resolve, reject) => {
+            canvas.toBlob(blob => {
+                if (!blob) {
+                    reject(new Error("Canvas is empty"));
+                    return;
+                }
+                resolve(blob);
+            }, "image/jpeg");
+        });
+    };
     const handleFileSelect = (event) => {
         const file = event.target.files?.[0];
         if (file) {
@@ -71,6 +110,10 @@ export function AvatarEditor({ onSetAvatar, className }) {
         if (fileInputRef.current) {
             fileInputRef.current.value = "";
         }
+        // Reset crop state
+        setCrop({ x: 0, y: 0 });
+        setZoom(1);
+        setCroppedAreaPixels(null);
     };
     const handleSaveChanges = async () => {
         if (!account?.address) {
@@ -80,8 +123,22 @@ export function AvatarEditor({ onSetAvatar, className }) {
         setIsSaving(true);
         try {
             let fileToUpload = null;
-            // If user uploaded a new file
-            if (selectedFile) {
+            // If user uploaded a new file and cropped it
+            if (selectedFile && previewUrl && croppedAreaPixels) {
+                try {
+                    const croppedBlob = await createCroppedImage(previewUrl, croppedAreaPixels);
+                    const extension = selectedFile.name.split(".").pop() || "jpg";
+                    fileToUpload = new File([croppedBlob], `avatar-cropped.${extension}`, { type: "image/jpeg" });
+                }
+                catch (error) {
+                    debug("Error cropping image:", error);
+                    toast.error("Failed to crop image. Please try again.");
+                    setIsSaving(false);
+                    return;
+                }
+            }
+            else if (selectedFile) {
+                // Fallback if no crop was made
                 fileToUpload = selectedFile;
             }
             else if (selectedProfileType && selectedAvatar) {
@@ -238,7 +295,7 @@ export function AvatarEditor({ onSetAvatar, className }) {
         };
     })
         .filter(p => p.avatar !== null) || []; // Filter out profiles with invalid avatars
-    return (_jsxs("div", { className: cn("flex w-full max-w-md flex-col bg-white", className), children: [viewStep === "upload" && _jsx(ModalHeader, { title: "Upload Image" }), _jsxs("div", { className: "flex flex-col items-center p-6", children: [viewStep === "select" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative mb-6", children: [_jsx("div", { className: "h-32 w-32 overflow-hidden rounded-full", children: safePreviewUrl || selectedAvatar || currentAvatar ? (_jsx(IPFSMediaRenderer, { src: safePreviewUrl || selectedAvatar || currentAvatar || "", alt: "Avatar preview", className: "h-full w-full object-cover" })) : (_jsx("div", { className: "bg-b3-primary-wash h-full w-full" })) }), (selectedAvatar !== currentAvatar || selectedFile) && (_jsx("button", { onClick: handleRemovePreview, className: "absolute -right-1 -top-1 flex h-8 w-8 items-center justify-center rounded-full bg-[#51525c] text-white transition-colors hover:bg-[#71717a]", children: _jsx(X, { className: "h-4 w-4" }) }))] }), _jsxs("button", { onClick: handleUploadImageClick, className: "font-inter shadow-xs mb-6 flex w-full items-center justify-center gap-2 rounded-xl border border-[#e4e4e7] bg-white px-4 py-3 text-sm font-semibold text-[#18181b] transition-colors hover:bg-[#f4f4f5]", children: [_jsx(Upload, { className: "h-4 w-4" }), "Upload image"] }), _jsxs("div", { className: "w-full", children: [_jsx("h3", { className: "mb-2 text-base font-semibold text-[#18181b]", children: "Select your profile image" }), _jsx("p", { className: "mb-4 text-sm font-semibold text-[#475467]", children: "Pick an avatar from your linked profiles, ENS or upload a new one." }), _jsx("div", { className: "mb-4 flex gap-3", children: profileAvatars.map((profileAvatar, index) => {
+    return (_jsxs("div", { className: cn("flex w-full max-w-md flex-col bg-white", className), children: [viewStep === "upload" && _jsx(ModalHeader, { title: "Upload Image" }), _jsxs("div", { className: "flex flex-col items-center p-6", children: [viewStep === "select" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative mb-6", children: [_jsx("div", { className: "h-32 w-32 overflow-hidden rounded-full", children: safePreviewUrl || selectedAvatar || currentAvatar ? (_jsx(IPFSMediaRenderer, { src: safePreviewUrl || selectedAvatar || currentAvatar || "", alt: "Avatar preview", className: "h-full w-full object-cover" })) : (_jsx("div", { className: "bg-b3-primary-wash h-full w-full" })) }), (selectedAvatar !== currentAvatar || selectedFile) && (_jsx("button", { onClick: handleRemovePreview, className: "absolute -right-1 -top-1 flex h-8 w-8 items-center justify-center rounded-full bg-[#51525c] text-white transition-colors hover:bg-[#71717a]", children: _jsx(X, { className: "h-4 w-4" }) }))] }), _jsxs("button", { onClick: handleUploadImageClick, className: "font-inter mb-6 flex w-full items-center justify-center gap-2 rounded-xl border border-[#e4e4e7] bg-white px-4 py-3 text-sm font-semibold text-[#18181b] shadow-sm transition-colors hover:bg-[#f4f4f5]", children: [_jsx(Upload, { className: "h-4 w-4" }), "Upload image"] }), _jsxs("div", { className: "w-full", children: [_jsx("h3", { className: "mb-2 text-base font-semibold text-[#18181b]", children: "Select your profile image" }), _jsx("p", { className: "mb-4 text-sm font-semibold text-[#475467]", children: "Pick an avatar from your linked profiles, ENS or upload a new one." }), _jsx("div", { className: "mb-4 flex gap-3", children: profileAvatars.map((profileAvatar, index) => {
                                             // Skip if avatar is null (should not happen due to filter, but TypeScript doesn't know that)
                                             if (!profileAvatar.avatar)
                                                 return null;
@@ -247,5 +304,15 @@ export function AvatarEditor({ onSetAvatar, className }) {
                                                             : "border-transparent hover:border-[#e4e4e7]"), children: _jsx("img", { src: profileAvatar.avatar, alt: `${profileAvatar.type} avatar`, className: "h-full w-full object-cover" }) }), hoveredProfile === profileAvatar.type && (_jsx("div", { className: "absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-[#18181b] px-3 py-1.5 text-xs text-white", children: profileAvatar.name }))] }, index));
                                         }) }), _jsxs("button", { onClick: handleLinkMoreAccount, className: "font-inter flex items-center gap-2 text-sm font-semibold text-[#3368ef] hover:underline", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", children: _jsx("path", { d: "M8.75 2.75C8.75 2.33579 8.41421 2 8 2C7.58579 2 7.25 2.33579 7.25 2.75V7.25H2.75C2.33579 7.25 2 7.58579 2 8C2 8.41421 2.33579 8.75 2.75 8.75H7.25V13.25C7.25 13.6642 7.58579 14 8 14C8.41421 14 8.75 13.6642 8.75 13.25V8.75H13.25C13.6642 8.75 14 8.41421 14 8C14 7.58579 13.6642 7.25 13.25 7.25H8.75V2.75Z", fill: "currentColor" }) }), "Link more account"] })] })] })) : (_jsx(_Fragment, { children: !selectedFile ? (_jsxs("div", { onClick: handleOpenFilePicker, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, className: cn("mb-6 flex w-full cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-16 transition-colors", isDragging
                                 ? "border-[#3368ef] bg-[#f0f5ff]"
-                                : "border-[#e4e4e7] hover:border-[#3368ef] hover:bg-[#f0f5ff]"), children: [_jsxs("p", { className: "font-inter mb-1 text-sm", children: [_jsx("span", { className: "font-semibold text-[#3368ef]", children: "Click to upload" }), _jsx("span", { className: "text-[#71717a]", children: " or drag and drop" })] }), _jsx("p", { className: "text-xs text-[#71717a]", children: "PNG, JPG or GIF (up to 5MB)" })] })) : (_jsx("div", { className: "mb-6 w-full", children: _jsx("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-[#f4f4f5]", children: safePreviewUrl ? (_jsx("img", { src: safePreviewUrl, alt: "Preview", className: "h-full w-full object-cover" })) : (_jsx("div", { className: "bg-b3-primary-wash h-full w-full" })) }) })) })), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, className: "hidden" })] }), _jsxs("div", { className: "font-inter flex gap-3 border-t border-[#e4e4e7] p-6 font-semibold", children: [_jsx(Button, { onClick: handleCancel, variant: "outline", disabled: isLoading, className: "flex-1 rounded-xl border-[#e4e4e7] text-[#18181b] hover:bg-[#f4f4f5]", children: "Cancel" }), _jsx(Button, { onClick: handleSaveChanges, disabled: isLoading || (!selectedFile && !selectedProfileType), className: "flex-1 rounded-xl bg-[#3368ef] text-white hover:bg-[#2952cc]", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Saving..."] })) : ("Save changes") })] })] }));
+                                : "border-[#e4e4e7] hover:border-[#3368ef] hover:bg-[#f0f5ff]"), children: [_jsxs("p", { className: "font-inter mb-1 text-sm", children: [_jsx("span", { className: "font-semibold text-[#3368ef]", children: "Click to upload" }), _jsx("span", { className: "text-[#71717a]", children: " or drag and drop" })] }), _jsx("p", { className: "text-xs text-[#71717a]", children: "PNG, JPG or GIF (up to 5MB)" })] })) : (_jsxs("div", { className: "mb-6 w-full", children: [_jsx("div", { className: "relative aspect-square w-full overflow-hidden rounded-xl bg-[#f4f4f5]", children: safePreviewUrl ? (_jsxs(_Fragment, { children: [_jsx(Cropper, { image: safePreviewUrl, crop: crop, zoom: zoom, aspect: 1, onCropChange: setCrop, onCropComplete: onCropComplete, onZoomChange: setZoom, cropShape: "rect", showGrid: false, style: {
+                                                    containerStyle: {
+                                                        width: "100%",
+                                                        height: "100%",
+                                                        backgroundColor: "#f4f4f5",
+                                                    },
+                                                    cropAreaStyle: {
+                                                        border: "2px solid #3368ef",
+                                                        borderRadius: "0px",
+                                                    },
+                                                } }), _jsx("button", { onClick: handleRemovePreview, className: "absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-[#51525c] text-white transition-colors hover:bg-[#71717a]", children: _jsx(X, { className: "h-4 w-4" }) })] })) : (_jsx("div", { className: "bg-b3-primary-wash h-full w-full" })) }), safePreviewUrl && (_jsxs("div", { className: "mt-4 flex items-center gap-3", children: [_jsx("label", { className: "flex-shrink-0 text-sm font-semibold text-[#475467]", children: "Zoom" }), _jsx("input", { type: "range", min: 1, max: 3, step: 0.1, value: zoom, onChange: e => setZoom(Number(e.target.value)), className: "flex-1 accent-[#3368ef]" })] }))] })) })), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, className: "hidden" })] }), _jsxs("div", { className: "font-inter flex gap-3 border-t border-[#e4e4e7] p-6 font-semibold", children: [_jsx(Button, { onClick: handleCancel, variant: "outline", disabled: isLoading, className: "flex-1 rounded-xl border-[#e4e4e7] text-[#18181b] hover:bg-[#f4f4f5]", children: "Cancel" }), _jsx(Button, { onClick: handleSaveChanges, disabled: isLoading || (!selectedFile && !selectedProfileType), className: "flex-1 rounded-xl bg-[#3368ef] text-white hover:bg-[#2952cc]", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Saving..."] })) : ("Save changes") })] })] }));
 }

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

@@ -140,5 +140,5 @@ export function B3DynamicModal() {
                     contentType?.type === "deposit" ||
                     contentType?.type === "send" ||
                     contentType?.type === "avatarEditor") &&
-                    "p-0", "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [(!hideCloseButton || contentType?.showBackButton) && (_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: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "font-inter text-sm font-semibold", children: "Back" })] })), renderContent()] })] }), contentType?.type === "avatarEditor" && (_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: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
+                    "p-0", "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [!hideCloseButton && (_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: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "font-inter text-sm font-semibold", children: "Back" })] })), renderContent()] })] }), contentType?.type === "avatarEditor" && (_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: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
 }

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

@@ -139,7 +139,7 @@ export const LinkAccount = ({ partnerId, onLogout, chain, }) => {
                                                                             ? "font-mono text-sm" // Use monospace font for addresses
                                                                             : "break-words" // Use break-words for emails/names (better than break-all)
                                                                         }`, title: isAddress ? profile.title : undefined, children: displayTitle }), isAddress && (_jsx("button", { onClick: handleCopyAddress, className: "linked-account-copy-button ml-1 rounded p-1 opacity-0 transition-opacity hover:bg-gray-100 group-hover:opacity-100", title: "Copy full address", children: _jsx(Copy, { size: 12, className: "text-gray-500 hover:text-gray-700" }) }))] }));
-                                                        })(), _jsx("span", { className: "linked-account-type text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), _jsx("div", { className: "linked-account-subtitle text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "linked-account-unlink-button text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? (_jsx(Loader2, { className: "linked-account-unlink-loading animate-spin" })) : (_jsx(UnlinkIcon, { size: 16, className: "linked-account-unlink-icon" })) })] }, profile.title))) })) : (_jsx("div", { className: "linked-accounts-empty text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" })), _jsx(Button, { onClick: handleOpenLinkModal, disabled: isLinking, className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 border-white/12 group relative h-12 w-full rounded-xl border-2 px-[18px] text-base font-semibold text-white shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18),inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] transition-all", children: _jsxs("div", { className: "flex items-center justify-center gap-1.5", children: [_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "shrink-0", children: _jsx("path", { d: "M10.0001 13.3333V6.66667M6.66675 10H13.3334M18.3334 10C18.3334 14.6024 14.6025 18.3333 10.0001 18.3333C5.39771 18.3333 1.66675 14.6024 1.66675 10C1.66675 5.39763 5.39771 1.66667 10.0001 1.66667C14.6025 1.66667 18.3334 5.39763 18.3334 10Z", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { children: "Link new account" })] }) })] }), showReferralInfo && (
+                                                        })(), _jsx("span", { className: "linked-account-type text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), _jsx("div", { className: "linked-account-subtitle text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "linked-account-unlink-button text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? (_jsx(Loader2, { className: "linked-account-unlink-loading animate-spin" })) : (_jsx(UnlinkIcon, { size: 16, className: "linked-account-unlink-icon" })) })] }, profile.title))) })) : (_jsx("div", { className: "linked-accounts-empty text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" })), _jsx(Button, { onClick: handleOpenLinkModal, disabled: isLinking, className: "b3-modal-link-new-account-button bg-b3-primary-blue hover:bg-b3-primary-blue/90 border-white/12 group relative h-12 w-full rounded-xl border-2 px-[18px] text-base font-semibold text-white shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18),inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] transition-all", children: _jsxs("div", { className: "flex items-center justify-center gap-1.5", children: [_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "shrink-0", children: _jsx("path", { d: "M10.0001 13.3333V6.66667M6.66675 10H13.3334M18.3334 10C18.3334 14.6024 14.6025 18.3333 10.0001 18.3333C5.39771 18.3333 1.66675 14.6024 1.66675 10C1.66675 5.39763 5.39771 1.66667 10.0001 1.66667C14.6025 1.66667 18.3334 5.39763 18.3334 10Z", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { children: "Link new account" })] }) })] }), showReferralInfo && (
             /* Referral Section */
             _jsxs("div", { className: "referrals-section space-y-4", children: [_jsx("h3", { className: "referrals-title text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), _jsxs("div", { className: "referral-code-container bg-b3-line rounded-xl p-4", children: [isEditingCode && (_jsxs("div", { className: "referral-code-header-editing", children: [_jsx("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsxs("div", { className: "referral-code-content flex items-center justify-between", children: [!isEditingCode && (_jsxs("div", { className: "referral-code-header", children: [_jsx("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsx("div", { className: "referral-code-actions flex items-center gap-2", children: isEditingCode ? (_jsxs("div", { className: "referral-code-edit-form flex items-center gap-2", children: [_jsx("input", { type: "text", value: newReferralCode, onChange: e => setNewReferralCode(e.target.value), className: "referral-code-input rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", placeholder: "Enter new code", ref: referallCodeRef }), _jsx(Button, { size: "sm", className: "referral-code-save-button", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? (_jsx(Loader2, { className: "referral-code-save-loading h-4 w-4 animate-spin" })) : ("Save") }), _jsx(Button, { size: "sm", variant: "ghost", className: "referral-code-cancel-button", onClick: () => {
                                                         setIsEditingCode(false);

package/dist/esm/global-account/react/components/ManageAccount/BottomNavigation.js

@@ -11,7 +11,7 @@ const SettingsIcon = () => {
 };
 const BottomNavigation = () => {
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
-    return (_jsx("div", { className: "sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]", children: _jsxs(TabsListPrimitive, { className: "flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent", children: [_jsxs(TabTriggerPrimitive, { value: "home", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]", children: [_jsx(HomeIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Home" })] }), _jsxs(TabTriggerPrimitive, { value: "swap", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]", onClick: () => {
+    return (_jsx("div", { className: "b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]", children: _jsxs(TabsListPrimitive, { className: "flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent", children: [_jsxs(TabTriggerPrimitive, { value: "home", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]", children: [_jsx(HomeIcon, {}), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: "Home" })] }), _jsxs(TabTriggerPrimitive, { value: "swap", className: "data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]", onClick: () => {
                         setB3ModalContentType({
                             type: "anySpend",
                             showBackButton: true,

package/dist/esm/global-account/react/components/ManageAccount/Header.js

@@ -37,7 +37,7 @@ function WalletItem({ wallet, isActive, onClick }) {
                     : isGlobalAccount
                         ? "Smart Wallet"
                         : "Wallet";
-    return (_jsxs("div", { className: `box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors ${isActive ? "bg-[#F4F4F5]" : "hover:bg-b3-line/50"}`, onClick: onClick, children: [_jsx("div", { className: "relative size-10 shrink-0 overflow-clip rounded-full", children: isGlobalAccount ? (_jsx("div", { className: "flex size-full items-center justify-center p-1", children: _jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "size-full object-contain" }) })) : walletImage ? (_jsx("img", { src: walletImage, alt: walletName, className: "size-full object-contain p-1" })) : (_jsx("div", { className: "flex size-full items-center justify-center", children: _jsx(WalletIcon, {}) })) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("p", { className: "text-b3-grey font-neue-montreal-semibold truncate text-sm", children: walletName }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: centerTruncate(address, 4) })] }), isActive && (_jsx("div", { className: "shrink-0", children: _jsx(CheckIcon, {}) }))] }));
+    return (_jsxs("div", { className: `b3-modal-wallet-item ${isActive ? "b3-modal-wallet-item-active bg-[#F4F4F5]" : "hover:bg-b3-line/50"} box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors`, onClick: onClick, children: [_jsx("div", { className: "relative size-10 shrink-0 overflow-clip rounded-full", children: isGlobalAccount ? (_jsx("div", { className: "flex size-full items-center justify-center p-1", children: _jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "size-full object-contain" }) })) : walletImage ? (_jsx("img", { src: walletImage, alt: walletName, className: "size-full object-contain p-1" })) : (_jsx("div", { className: "flex size-full items-center justify-center", children: _jsx(WalletIcon, {}) })) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("p", { className: "text-b3-grey font-neue-montreal-semibold truncate text-sm", children: walletName }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: centerTruncate(address, 4) })] }), isActive && (_jsx("div", { className: "shrink-0", children: _jsx(CheckIcon, {}) }))] }));
 }
 export function Header({ onLogout }) {
     const activeWallet = useActiveWallet();
@@ -75,7 +75,7 @@ export function Header({ onLogout }) {
             },
         });
     };
-    return (_jsx(AccordionPrimitive.Root, { type: "single", collapsible: true, value: isExpanded ? "wallet-switcher" : "", className: "bg-b3-background border-b3-line relative border-b", onValueChange: (value) => setIsExpanded(value === "wallet-switcher"), children: _jsxs(AccordionPrimitive.Item, { value: "wallet-switcher", className: "border-none", children: [_jsxs(AccordionPrimitive.Trigger, { className: "group flex w-full items-center justify-between border-none bg-transparent px-5 py-3 outline-none", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "relative size-10 shrink-0 overflow-clip rounded-full", children: isActiveGlobalAccount ? (_jsx("div", { className: "flex size-full items-center justify-center p-1", children: _jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "size-full object-contain" }) })) : activeWalletImage ? (_jsx("img", { src: activeWalletImage, alt: "Active Wallet", className: "size-full object-contain p-1" })) : (_jsx("div", { className: "flex size-full items-center justify-center", children: _jsx(WalletIcon, {}) })) }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Active Wallet" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: centerTruncate(address, 4) }), _jsx(CopyToClipboard, { text: address })] })] })] }), _jsx(ChevronDownIcon, { className: "text-b3-grey transition-transform duration-200 group-data-[state=open]:rotate-180" })] }), _jsx(AnimatePresence, { children: isExpanded && (_jsx(AccordionPrimitive.Content, { forceMount: true, className: "absolute left-0 right-0 top-full z-50 overflow-visible", children: _jsxs(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2, ease: "easeInOut" }, className: "flex flex-col gap-3 rounded-bl-3xl rounded-br-3xl bg-white px-2 pb-5 pt-3 shadow-[0px_32px_64px_-12px_rgba(10,13,18,0.14),0px_5px_5px_-2.5px_rgba(10,13,18,0.04)]", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [connectedWallets.map(wallet => (_jsx(WalletItem, { wallet: wallet, isActive: activeWallet?.id === wallet.id, onClick: () => handleWalletSwitch(wallet) }, wallet.id))), _jsxs("div", { className: "hover:bg-b3-line/50 box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors", onClick: handleLinkWallet, children: [_jsx("div", { className: "bg-b3-line flex size-10 shrink-0 items-center justify-center rounded-full", children: _jsx(LinkIcon, { className: "text-b3-grey" }) }), _jsx("div", { className: "flex flex-1 flex-col", children: _jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Link another wallet" }) })] })] }), _jsxs("button", { className: "border-b3-line hover:bg-b3-line bg-b3-background flex items-center justify-center gap-1.5 rounded-xl border border-solid p-2.5 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, style: {
+    return (_jsx(AccordionPrimitive.Root, { type: "single", collapsible: true, value: isExpanded ? "wallet-switcher" : "", className: "b3-modal-wallet-switcher bg-b3-background border-b3-line relative border-b", onValueChange: (value) => setIsExpanded(value === "wallet-switcher"), children: _jsxs(AccordionPrimitive.Item, { value: "wallet-switcher", className: "border-none", children: [_jsxs(AccordionPrimitive.Trigger, { className: "b3-modal-wallet-switcher-trigger group flex w-full items-center justify-between border-none bg-transparent px-5 py-3 outline-none", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "relative size-10 shrink-0 overflow-clip rounded-full", children: isActiveGlobalAccount ? (_jsx("div", { className: "flex size-full items-center justify-center p-1", children: _jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "size-full object-contain" }) })) : activeWalletImage ? (_jsx("img", { src: activeWalletImage, alt: "Active Wallet", className: "size-full object-contain p-1" })) : (_jsx("div", { className: "flex size-full items-center justify-center", children: _jsx(WalletIcon, {}) })) }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Active Wallet" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: centerTruncate(address, 4) }), _jsx(CopyToClipboard, { text: address })] })] })] }), _jsx(ChevronDownIcon, { className: "b3-modal-wallet-switcher-chevron text-b3-grey transition-transform duration-200 group-data-[state=open]:rotate-180" })] }), _jsx(AnimatePresence, { children: isExpanded && (_jsx(AccordionPrimitive.Content, { forceMount: true, className: "absolute left-0 right-0 top-full z-50 overflow-visible", children: _jsxs(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2, ease: "easeInOut" }, className: "b3-modal-wallet-switcher-content flex flex-col gap-3 rounded-bl-3xl rounded-br-3xl bg-white px-2 pb-5 pt-3 shadow-[0px_32px_64px_-12px_rgba(10,13,18,0.14),0px_5px_5px_-2.5px_rgba(10,13,18,0.04)]", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [connectedWallets.map(wallet => (_jsx(WalletItem, { wallet: wallet, isActive: activeWallet?.id === wallet.id, onClick: () => handleWalletSwitch(wallet) }, wallet.id))), _jsxs("div", { className: "b3-modal-link-another-wallet hover:bg-b3-line/50 box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors", onClick: handleLinkWallet, children: [_jsx("div", { className: "bg-b3-line flex size-10 shrink-0 items-center justify-center rounded-full", children: _jsx(LinkIcon, { className: "text-b3-grey" }) }), _jsx("div", { className: "flex flex-1 flex-col", children: _jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Link another wallet" }) })] })] }), _jsxs("button", { className: "b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background flex items-center justify-center gap-1.5 rounded-xl border border-solid p-2.5 transition-colors", onClick: onLogoutEnhanced, disabled: logoutLoading, style: {
                                         boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05)",
                                     }, children: [logoutLoading ? (_jsx(Loader2, { className: "animate-spin", size: 20 })) : (_jsx(SignOutIcon, { size: 20, className: "text-b3-grey" })), _jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-base", children: "Sign out" })] })] }) })) })] }) }));
 }

package/dist/esm/global-account/react/components/ManageAccount/HomeActions.js

@@ -6,12 +6,12 @@ import { cn } from "../../../../shared/utils/index.js";
 const SendIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M17.9958 1.21467C17.666 1.10449 17.359 1.18417 17.2063 1.22851C17.04 1.27683 16.8417 1.35425 16.6428 1.43191L2.51187 6.94641C2.28951 7.03315 2.07413 7.11717 1.9079 7.19936C1.76427 7.27038 1.45899 7.42845 1.28859 7.75646C1.10067 8.11818 1.10092 8.54881 1.28927 8.9103C1.46006 9.23811 1.76552 9.39582 1.90924 9.46667C2.07556 9.54867 2.29099 9.63241 2.51345 9.71889L6.4468 11.2485C6.74023 11.3626 6.88695 11.4197 7.03291 11.4232C7.16193 11.4263 7.2899 11.3994 7.40674 11.3446C7.53893 11.2826 7.65024 11.1713 7.87287 10.9487L11.9107 6.91083C12.2361 6.58539 12.7638 6.58539 13.0892 6.91083C13.4147 7.23626 13.4147 7.7639 13.0892 8.08934L9.05138 12.1272C8.82875 12.3498 8.71744 12.4611 8.65545 12.5933C8.60065 12.7101 8.57374 12.8381 8.57684 12.9671C8.58035 13.1131 8.6374 13.2598 8.75152 13.5532L10.2811 17.4865C10.3676 17.709 10.4514 17.9245 10.5334 18.0908C10.6042 18.2345 10.7619 18.54 11.0897 18.7108C11.4512 18.8991 11.8819 18.8994 12.2436 18.7115C12.5716 18.541 12.7297 18.2358 12.8007 18.0921C12.8829 17.9259 12.9669 17.7106 13.0536 17.4882L18.5681 3.35726C18.6458 3.15833 18.7232 2.96007 18.7715 2.79371C18.8159 2.64105 18.8955 2.334 18.7854 2.00419C18.6609 1.63157 18.3685 1.33915 17.9958 1.21467Z", fill: "#0C68E9" }) }));
 const BuyIcon = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [_jsx("path", { d: "M9.99998 8.75C9.30962 8.75 8.74998 9.30964 8.74998 10C8.74998 10.6904 9.30962 11.25 9.99998 11.25C10.6903 11.25 11.25 10.6904 11.25 10C11.25 9.30964 10.6903 8.75 9.99998 8.75Z", fill: "#0C68E9" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14.1666 2.5C12.3642 2.5 10.8013 2.95205 9.44241 3.37018L9.18862 3.44844C7.90485 3.84476 6.86213 4.16667 5.83332 4.16667C5.09512 4.16667 4.43564 4.08819 3.88041 3.98151L3.85421 3.97647C3.44746 3.89831 3.10585 3.83267 2.84038 3.79758C2.60748 3.76679 2.26236 3.7302 1.94675 3.84126C1.78134 3.89947 1.60242 3.98249 1.43327 4.12224C1.26411 4.26199 1.14882 4.42202 1.06045 4.57348C0.898119 4.85168 0.864329 5.167 0.849347 5.3925C0.833297 5.63407 0.833306 5.94132 0.833317 6.29588L0.833315 15.2922C0.833263 15.4565 0.833201 15.6516 0.932434 15.9263C0.981719 16.0628 1.06288 16.1945 1.10974 16.2664C1.15659 16.3383 1.24436 16.4657 1.34932 16.5659C1.41718 16.6306 1.49456 16.6992 1.58722 16.76C1.67809 16.8196 1.76087 16.8559 1.79699 16.8717L1.80356 16.8746C2.48669 17.1759 3.71203 17.5 5.83332 17.5C7.63579 17.5 9.19862 17.0479 10.5576 16.6298L10.8113 16.5516C12.0951 16.1552 13.1378 15.8333 14.1666 15.8333C14.9048 15.8333 15.5643 15.9118 16.1196 16.0185L16.1458 16.0235C16.5525 16.1017 16.8941 16.1673 17.1596 16.2024C17.3925 16.2332 17.7376 16.2698 18.0532 16.1587C18.2186 16.1005 18.3975 16.0175 18.5667 15.8778C18.7359 15.738 18.8511 15.578 18.9395 15.4265C19.1018 15.1483 19.1356 14.833 19.1506 14.6075C19.1667 14.3659 19.1667 14.0587 19.1666 13.7041L19.1667 4.70776C19.1667 4.54347 19.1668 4.34839 19.0675 4.07365C19.0182 3.9372 18.9371 3.80547 18.8902 3.73359C18.8434 3.6617 18.7556 3.53428 18.6507 3.43412C18.5828 3.36935 18.5054 3.30084 18.4127 3.24003C18.3219 3.1804 18.2391 3.14413 18.203 3.1283L18.1964 3.12542C17.5133 2.82409 16.2879 2.5 14.1666 2.5ZM15.8333 7.5C15.8333 7.03976 15.4602 6.66667 15 6.66667C14.5397 6.66667 14.1666 7.03976 14.1666 7.5V10.8333C14.1666 11.2936 14.5397 11.6667 15 11.6667C15.4602 11.6667 15.8333 11.2936 15.8333 10.8333V7.5ZM7.08331 10C7.08331 8.38917 8.38915 7.08333 9.99998 7.08333C11.6108 7.08333 12.9166 8.38917 12.9166 10C12.9166 11.6108 11.6108 12.9167 9.99998 12.9167C8.38915 12.9167 7.08331 11.6108 7.08331 10ZM4.99998 8.33333C5.46022 8.33333 5.83331 8.70643 5.83331 9.16667V12.5C5.83331 12.9602 5.46022 13.3333 4.99998 13.3333C4.53974 13.3333 4.16665 12.9602 4.16665 12.5V9.16667C4.16665 8.70643 4.53974 8.33333 4.99998 8.33333Z", fill: "#0C68E9" })] }));
 const HomeActionButton = ({ customClass, icon, label, onClick, }) => {
-    return (_jsxs(Button, { className: cn("border-b3-line hover:border-b3-primary-blue shadow-xs flex h-[84px] w-full flex-col items-center justify-center gap-2 rounded-2xl border-[1.5px] bg-[#FAFAFA] hover:bg-[#FAFAFA]", customClass), onClick: onClick, children: [icon, _jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: label })] }));
+    return (_jsxs(Button, { className: cn("border-b3-line hover:border-b3-primary-blue flex h-[84px] w-full flex-col items-center justify-center gap-2 rounded-2xl border-[1.5px] bg-[#FAFAFA] shadow-[0_0_0_1px_rgba(10,13,18,0.18)_inset,0_-2px_0_0_rgba(10,13,18,0.05)_inset,0_1px_2px_0_rgba(10,13,18,0.05)] hover:bg-[#FAFAFA]", customClass), onClick: onClick, children: [icon, _jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: label })] }));
 };
 const HomeActions = ({ showDeposit, showSwap }) => {
     const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
     const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
-    return (_jsxs("div", { className: "border-b3-line grid grid-cols-4 gap-3 border-b px-5 pb-6", children: [showDeposit && (_jsx(HomeActionButton, { customClass: "manage-account-deposit", icon: _jsx(BankIcon, { size: 24, className: "text-b3-primary-blue shrink-0" }), label: "Deposit", onClick: () => {
+    return (_jsxs("div", { className: "b3-modal-home-actions border-b3-line grid grid-cols-4 gap-3 border-b px-5 pb-6", children: [showDeposit && (_jsx(HomeActionButton, { customClass: "manage-account-deposit", icon: _jsx(BankIcon, { size: 24, className: "text-b3-primary-blue shrink-0" }), label: "Deposit", onClick: () => {
                     setB3ModalOpen(true);
                     setB3ModalContentType({
                         type: "deposit",

package/dist/esm/global-account/react/components/ManageAccount/HomeContent.js

@@ -6,5 +6,5 @@ import NFTContent from "./NFTContent.js";
 import ProfileSection from "./ProfileSection.js";
 import TokenContent from "./TokenContent.js";
 export function HomeContent({ showDeposit = false, showSwap = true }) {
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(Header, {}), _jsxs("div", { className: "flex flex-col", children: [_jsx(ProfileSection, {}), _jsx(HomeActions, { showDeposit: showDeposit, showSwap: showSwap }), _jsx("div", { className: "space-y-2 p-5", children: _jsxs(Tabs, { defaultValue: "balance", children: [_jsxs(TabsList, { children: [_jsx(TabTrigger, { value: "balance", className: "font-neue-montreal-semibold p-0 pr-3", children: "Balance" }), _jsx(TabTrigger, { value: "nfts", className: "font-neue-montreal-semibold p-0 pr-3", children: "NFTs" })] }), _jsx(TabsContent, { value: "balance", className: "px-0 pb-4 pt-2", children: _jsx(TokenContent, {}) }), _jsx(TabsContent, { value: "nfts", className: "px-0 pb-4 pt-2", children: _jsx(NFTContent, {}) })] }) })] })] }));
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(Header, {}), _jsxs("div", { className: "flex flex-col", children: [_jsx(ProfileSection, {}), _jsx(HomeActions, { showDeposit: showDeposit, showSwap: showSwap }), _jsx("div", { className: "b3-modal-balance-content space-y-2 p-5", children: _jsxs(Tabs, { defaultValue: "balance", children: [_jsxs(TabsList, { className: "b3-modal-balance-tabs-list", children: [_jsx(TabTrigger, { value: "balance", className: "font-neue-montreal-semibold p-0 pr-3", children: "Balance" }), _jsx(TabTrigger, { value: "nfts", className: "font-neue-montreal-semibold p-0 pr-3", children: "NFTs" })] }), _jsx(TabsContent, { value: "balance", className: "px-0 pb-4 pt-2", children: _jsx(TokenContent, {}) }), _jsx(TabsContent, { value: "nfts", className: "px-0 pb-4 pt-2", children: _jsx(NFTContent, {}) })] }) })] })] }));
 }

package/dist/esm/global-account/react/components/ManageAccount/ProfileSection.js

@@ -40,6 +40,6 @@ const ProfileSection = () => {
     const avatarSrc = user?.avatar || profile?.avatar;
     // Get current username - prioritize user.username, fallback to profile data
     const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
-    return (_jsx("div", { className: "flex items-center justify-between px-5 py-6", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [_jsx(IPFSMediaRenderer, { src: avatarSrc, alt: "Profile Avatar", className: "size-14 rounded-full" }), _jsx("button", { onClick: handleEditAvatar, className: "border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full border-4 bg-[#a0a0ab] transition-colors", children: _jsx(Pencil, { size: 10, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info flex flex-col gap-1", children: [_jsxs("h2", { className: "text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl", children: [_jsx("div", { className: "text-b3-foreground-muted", children: " $" }), _jsx("div", { className: "text-[30px]", children: formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 }) })] }), _jsx("div", { className: "font-neue-montreal-semibold text-base leading-none text-[#0B57C2]", children: currentUsername })] })] }) }));
+    return (_jsx("div", { className: "flex items-center justify-between px-5 py-6", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [_jsx(IPFSMediaRenderer, { src: avatarSrc, alt: "Profile Avatar", className: "border-b3-line border-1 bg-b3-primary-wash size-14 rounded-full border" }), _jsx("button", { onClick: handleEditAvatar, className: "border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full border-4 bg-[#a0a0ab] transition-colors", children: _jsx(Pencil, { size: 10, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info flex flex-col gap-1", children: [_jsxs("h2", { className: "text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl", children: [_jsx("div", { className: "text-b3-foreground-muted", children: " $" }), _jsx("div", { className: "text-[30px]", children: formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 }) })] }), _jsx("div", { className: "b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]", children: currentUsername })] })] }) }));
 };
 export default ProfileSection;

package/dist/esm/global-account/react/components/ManageAccount/SettingsContent.js

@@ -40,6 +40,6 @@ const SettingsContent = ({ partnerId, onLogout, chain, }) => {
         }
         setB3ModalOpen(true);
     };
-    return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [_jsx(ModalHeader, { title: "Settings" }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: _jsx(SettingsProfileCard, {}) }) }), _jsx("div", { className: "space-y-3 px-5", children: _jsx(SettingsMenuItem, { icon: _jsx(LinkIcon, { className: "text-b3-grey-500" }), title: "Linked Accounts", subtitle: "3 connected accounts", onClick: () => handleNavigate("linkAccount") }) })] }));
+    return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [_jsx(ModalHeader, { showBackButton: false, showCloseButton: false, title: "Settings" }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "b3-modal-settings-profile-card flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: _jsx(SettingsProfileCard, {}) }) }), _jsx("div", { className: "space-y-3 px-5", children: _jsx(SettingsMenuItem, { icon: _jsx(LinkIcon, { className: "text-b3-grey-500" }), title: "Linked Accounts", subtitle: "3 connected accounts", onClick: () => handleNavigate("linkAccount") }) })] }));
 };
 export default SettingsContent;

package/dist/esm/global-account/react/components/ManageAccount/SettingsMenuItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
 const SettingsMenuItem = ({ icon, title, subtitle, onClick }) => {
-    return (_jsxs("button", { onClick: onClick, className: "flex w-full items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#f4f4f5]", children: [_jsx("div", { className: "flex size-10 items-center justify-center rounded-full bg-[#f4f4f5]", children: icon }), _jsxs("div", { className: "flex flex-1 flex-col items-start gap-1 text-left", children: [_jsx("span", { className: "font-neue-montreal-semibold text-[14px] leading-none tracking-[-0.28px] text-[#3f3f46]", children: title }), _jsx("span", { className: "font-neue-montreal-medium text-[14px] leading-none tracking-[-0.28px] text-[#70707b]", children: subtitle })] }), _jsx(ChevronRight, { size: 20, className: "text-[#51525c]" })] }));
+    return (_jsxs("button", { onClick: onClick, className: "b3-modal-settings-menu-item flex w-full items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#f4f4f5]", children: [_jsx("div", { className: "flex size-10 items-center justify-center rounded-full bg-[#f4f4f5]", children: icon }), _jsxs("div", { className: "flex flex-1 flex-col items-start gap-1 text-left", children: [_jsx("span", { className: "font-neue-montreal-semibold text-[14px] leading-none tracking-[-0.28px] text-[#3f3f46]", children: title }), _jsx("span", { className: "font-neue-montreal-medium text-[14px] leading-none tracking-[-0.28px] text-[#70707b]", children: subtitle })] }), _jsx(ChevronRight, { size: 20, className: "text-[#51525c]" })] }));
 };
 export default SettingsMenuItem;

package/dist/esm/global-account/react/components/ManageAccount/SettingsProfileCard.js

@@ -96,6 +96,6 @@ const SettingsProfileCard = () => {
                 /* Edit mode - inline input */
                 _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { ref: inputRef, type: "text", value: editedUsername, onChange: e => setEditedUsername(e.target.value), onKeyDown: handleKeyDown, disabled: isSaving, className: "border-b3-line bg-b3-background text-b3-grey placeholder:text-b3-foreground-muted font-neue-montreal-semibold focus:border-b3-primary-blue w-full rounded-md border px-2 py-1 text-lg leading-none transition-colors focus:outline-none disabled:opacity-50", placeholder: "Enter username" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: handleSaveUsername, disabled: isSaving, className: "text-b3-primary-blue hover:text-b3-primary-blue/80 flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50", "aria-label": "Save username", children: isSaving ? _jsx(Loader2, { size: 18, className: "animate-spin" }) : _jsx(Check, { size: 18, strokeWidth: 2.5 }) }), _jsx("button", { onClick: handleCancelEdit, disabled: isSaving, className: "text-b3-foreground-muted hover:text-b3-grey flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50", "aria-label": "Cancel editing", children: _jsx(X, { size: 18, strokeWidth: 2.5 }) })] })] })) : (
                 /* Display mode */
-                _jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("p", { className: "font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]", children: currentUsername }) }), _jsx("button", { onClick: handleEditUsername, className: "flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80", children: _jsx("p", { className: "font-inter text-sm font-semibold leading-5 text-[#51525C]", children: "Edit Username" }) })] })) })] }));
+                _jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("p", { className: "b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]", children: currentUsername }) }), _jsx("button", { onClick: handleEditUsername, className: "flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80", children: _jsx("p", { className: "font-inter text-sm font-semibold leading-5 text-[#51525C]", children: "Edit Username" }) })] })) })] }));
 };
 export default SettingsProfileCard;

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

@@ -1,4 +1,5 @@
-declare const ModalHeader: ({ handleBack, handleClose, title, children, showCloseButton, className, showBackWord, }: {
+declare const ModalHeader: ({ showBackButton, handleBack, handleClose, title, children, showCloseButton, className, showBackWord, }: {
+    showBackButton?: boolean;
     handleBack?: () => void;
     handleClose?: () => void;
     title: string;

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../shared/utils/index.js";
-import { ChevronDown, X } from "lucide-react";
+import { ChevronLeft, X } from "lucide-react";
 import { useModalStore } from "../../stores/index.js";
-const ModalHeader = ({ handleBack, handleClose, title, children, showCloseButton = true, className, showBackWord = false, }) => {
+const ModalHeader = ({ showBackButton = true, handleBack, handleClose, title, children, showCloseButton = true, className, showBackWord = false, }) => {
     const navigateBack = useModalStore(state => state.navigateBack);
     const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
-    return (_jsxs("div", { className: cn("flex h-16 items-center justify-between border-b border-[#e4e4e7] bg-white px-5 py-3", className), children: [_jsxs("button", { onClick: handleBack || navigateBack, className: "flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70", children: [_jsx(ChevronDown, { className: "h-6 w-6 rotate-90 text-[#51525c]" }), showBackWord && _jsx("span", { className: "text-sm font-medium", children: "Back" })] }), _jsx("p", { className: "font-inter text-lg font-semibold leading-7 text-[#18181b]", children: title }), showCloseButton && (_jsx("button", { onClick: handleClose || (() => setB3ModalOpen(false)), className: "flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70", children: _jsx(X, { className: "h-6 w-6 text-[#51525c]" }) })), children] }));
+    return (_jsxs("div", { className: cn("b3-modal-header flex h-16 items-center justify-between border-b border-[#e4e4e7] bg-white px-5 py-3", className), children: [showBackButton ? (_jsxs("button", { onClick: handleBack || navigateBack, className: "flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70", children: [_jsx(ChevronLeft, { className: "h-6 w-6 text-[#51525c]" }), showBackWord && _jsx("span", { className: "text-sm font-medium", children: "Back" })] })) : (_jsx("div", { className: "w-2" })), _jsx("p", { className: "font-inter text-lg font-semibold leading-7 text-[#18181b]", children: title }), showCloseButton ? (_jsx("button", { onClick: handleClose || (() => setB3ModalOpen(false)), className: "flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70", children: _jsx(X, { className: "h-6 w-6 text-[#51525c]" }) })) : (_jsx("div", { className: "w-2" })), children] }));
 };
 export default ModalHeader;

package/dist/esm/global-account/react/components/ui/dialog.js

@@ -12,7 +12,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(D
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef(({ className, children, hideCloseButton = true, closeBtnClassName, ...props }, ref) => {
     const container = typeof window !== "undefined" ? document.getElementById("b3-root") : null;
-    return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border shadow-lg !outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl", "transition-all ease-out", className), ...props, children: [_jsxs("div", { className: "flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)]", children: [children, !hideCloseButton && (_jsxs(DialogPrimitive.Close, { className: cn("modal-close-button data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400", closeBtnClassName), children: [_jsx(X, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] }), _jsxs("div", { className: "flex items-center justify-center gap-1.5 pt-[10px]", children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M2 4.66667C2 3.19391 3.19391 2 4.66667 2H11.3333C12.8061 2 14 3.19391 14 4.66667V11.3333C14 12.8061 12.8061 14 11.3333 14H4.66667C3.19391 14 2 12.8061 2 11.3333V4.66667Z", fill: "#0B57C2" }), _jsx("path", { d: "M5.33333 6C5.33333 5.63181 5.63181 5.33333 6 5.33333H10C10.3682 5.33333 10.6667 5.63181 10.6667 6V10C10.6667 10.3682 10.3682 10.6667 10 10.6667H6C5.63181 10.6667 5.33333 10.3682 5.33333 10V6Z", fill: "white" })] }), _jsx("span", { className: "font-neue-montreal-semibold text-xs uppercase leading-none tracking-[0.72px] text-[#0B57C2]", children: "Global Account" })] })] })] }));
+    return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border shadow-lg !outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl", "transition-all ease-out", className), ...props, children: [_jsxs("div", { className: "modal-inner-content flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)]", children: [children, !hideCloseButton && (_jsxs(DialogPrimitive.Close, { className: cn("modal-close-button data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400", closeBtnClassName), children: [_jsx(X, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] }), _jsxs("div", { className: "b3-modal-ga-branding flex items-center justify-center gap-1.5 pt-[10px]", children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M2 4.66667C2 3.19391 3.19391 2 4.66667 2H11.3333C12.8061 2 14 3.19391 14 4.66667V11.3333C14 12.8061 12.8061 14 11.3333 14H4.66667C3.19391 14 2 12.8061 2 11.3333V4.66667Z", fill: "#0B57C2" }), _jsx("path", { d: "M5.33333 6C5.33333 5.63181 5.63181 5.33333 6 5.33333H10C10.3682 5.33333 10.6667 5.63181 10.6667 6V10C10.6667 10.3682 10.3682 10.6667 10 10.6667H6C5.63181 10.6667 5.33333 10.3682 5.33333 10V6Z", fill: "white" })] }), _jsx("span", { className: "font-neue-montreal-semibold text-xs uppercase leading-none tracking-[0.72px] text-[#0B57C2]", children: "Global Account" })] })] })] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));

package/dist/esm/global-account/react/components/ui/drawer.js

@@ -12,7 +12,7 @@ const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(D
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 const DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => {
     const container = typeof window !== "undefined" ? document.getElementById("b3-root") : null;
-    return (_jsxs(DrawerPortal, { container: container, children: [_jsx(DrawerOverlay, {}), _jsx(DrawerPrimitive.Content, { ref: ref, className: cn("bg-b3-react-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border py-6", className), ...props, children: children })] }));
+    return (_jsxs(DrawerPortal, { container: container, children: [_jsx(DrawerOverlay, {}), _jsx(DrawerPrimitive.Content, { ref: ref, className: cn("bg-b3-react-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border py-6 pt-5", className), ...props, children: children })] }));
 });
 DrawerContent.displayName = "DrawerContent";
 const DrawerHeader = ({ className, ...props }) => (_jsx("div", { className: cn("grid gap-1.5 p-4 text-center sm:text-left", className), ...props }));