@b3dotfun/sdk 0.0.73-test.3 → 0.0.74-alpha.0

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

@@ -1,3 +1,4 @@
+import "react-easy-crop/react-easy-crop.css";
 interface AvatarEditorProps {
     onSetAvatar?: () => void;
     className?: string;

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

@@ -8,101 +8,337 @@ 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 profileDisplay_1 = require("../../../../global-account/react/utils/profileDisplay");
 const cn_1 = require("../../../../shared/utils/cn");
 const debug_1 = require("../../../../shared/utils/debug");
+const ipfs_1 = require("../../../../shared/utils/ipfs");
 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_easy_crop_1 = __importDefault(require("react-easy-crop"));
+require("react-easy-crop/react-easy-crop.css");
 const react_3 = require("thirdweb/react");
 const storage_1 = require("thirdweb/storage");
+const stores_1 = require("../../stores");
+const ModalHeader_1 = __importDefault(require("../ModalHeader/ModalHeader"));
 const debug = (0, debug_1.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;
+});
 function AvatarEditor({ onSetAvatar, className }) {
+    const [viewStep, setViewStep] = (0, react_2.useState)("select");
+    const [selectedAvatar, setSelectedAvatar] = (0, react_2.useState)(null);
+    const [selectedProfileType, setSelectedProfileType] = (0, react_2.useState)(null); // Track which profile was selected
+    const [hoveredProfile, setHoveredProfile] = (0, react_2.useState)(null);
     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 [isDragging, setIsDragging] = (0, react_2.useState)(false);
+    const [crop, setCrop] = (0, react_2.useState)({ x: 0, y: 0 });
+    const [zoom, setZoom] = (0, react_2.useState)(1);
+    const [croppedAreaPixels, setCroppedAreaPixels] = (0, react_2.useState)(null);
     const fileInputRef = (0, react_2.useRef)(null);
-    const { setUser } = (0, react_1.useB3)();
+    const { setUser, user, partnerId } = (0, react_1.useB3)();
+    const setB3ModalContentType = (0, stores_1.useModalStore)(state => state.setB3ModalContentType);
+    const contentType = (0, stores_1.useModalStore)(state => state.contentType);
     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;
+    // Get raw avatar URLs, convert IPFS URLs, and validate them
+    const rawCurrentAvatar = user?.avatar || profile?.avatar;
+    const currentAvatar = (0, profileDisplay_1.validateImageUrl)(rawCurrentAvatar);
+    const safePreviewUrl = (0, profileDisplay_1.validateImageUrl)(previewUrl);
+    const onCropComplete = (0, react_2.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) {
             // Validate file type
             if (!file.type.startsWith("image/")) {
-                sonner_1.toast.error("Please select an image file");
+                react_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");
+                react_1.toast.error("File size must be less than 5MB");
                 return;
             }
             setSelectedFile(file);
+            // Clear profile type selection when uploading a new file
+            setSelectedProfileType(null);
             // Create preview URL
             const url = URL.createObjectURL(file);
             setPreviewUrl(url);
+            setSelectedAvatar(url);
         }
     };
-    const handleRemoveFile = () => {
+    const handleRemovePreview = () => {
+        setSelectedAvatar(currentAvatar || null);
+        setSelectedProfileType(null);
         setSelectedFile(null);
         if (previewUrl) {
-            URL.revokeObjectURL(previewUrl);
+            // Only revoke blob URLs (from file uploads), not regular URLs (from social profiles)
+            if (previewUrl.startsWith("blob:")) {
+                URL.revokeObjectURL(previewUrl);
+            }
             setPreviewUrl(null);
         }
         if (fileInputRef.current) {
             fileInputRef.current.value = "";
         }
+        // Reset crop state
+        setCrop({ x: 0, y: 0 });
+        setZoom(1);
+        setCroppedAreaPixels(null);
     };
-    const handleUpload = async () => {
-        if (!selectedFile) {
-            sonner_1.toast.error("Please select an image first");
+    const handleSaveChanges = async () => {
+        if (!account?.address) {
+            react_1.toast.error("No account connected");
             return;
         }
-        setIsUploading(true);
+        setIsSaving(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);
+            let fileToUpload = null;
+            // 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);
+                    react_1.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 && previewUrl && croppedAreaPixels) {
+                // User selected from social profile and cropped it
+                debug("Cropping social profile image:", previewUrl);
+                try {
+                    const croppedBlob = await createCroppedImage(previewUrl, croppedAreaPixels);
+                    fileToUpload = new File([croppedBlob], `avatar-${selectedProfileType}-cropped.jpg`, { type: "image/jpeg" });
+                    debug("Successfully cropped social profile image");
+                }
+                catch (error) {
+                    debug("Error cropping social profile image:", error);
+                    react_1.toast.error("Failed to crop image. Please try again.");
+                    setIsSaving(false);
+                    return;
+                }
+            }
+            else if (selectedProfileType && selectedAvatar) {
+                // User selected from existing profile avatars without cropping
+                // Fetch the image from the URL and convert to blob
+                debug("Fetching image from social profile:", selectedAvatar);
+                try {
+                    // Convert IPFS URLs to gateway URLs for fetching
+                    const httpUrl = (0, ipfs_1.getIpfsUrl)(selectedAvatar);
+                    const response = await fetch(httpUrl);
+                    if (!response.ok) {
+                        throw new Error("Failed to fetch image");
+                    }
+                    const blob = await response.blob();
+                    debug("Fetched blob with type:", blob.type);
+                    // Determine the correct extension from the blob's MIME type
+                    // This handles URLs without extensions (like Farcaster images)
+                    const mimeToExtension = {
+                        "image/jpeg": "jpg",
+                        "image/jpg": "jpg",
+                        "image/png": "png",
+                        "image/gif": "gif",
+                        "image/webp": "webp",
+                        "image/svg+xml": "svg",
+                    };
+                    const extension = blob.type ? mimeToExtension[blob.type.toLowerCase()] || "jpg" : "jpg";
+                    const mimeType = blob.type || `image/${extension}`;
+                    fileToUpload = new File([blob], `avatar-${selectedProfileType}.${extension}`, { type: mimeType });
+                    debug("Successfully converted social profile image to file with extension:", extension);
+                }
+                catch (fetchError) {
+                    debug("Error fetching social profile image:", fetchError);
+                    react_1.toast.error("Failed to fetch profile image. Please try uploading manually.");
+                    setIsSaving(false);
+                    return;
+                }
+            }
+            // Upload to IPFS if we have a file
+            if (fileToUpload) {
+                debug("Starting upload to IPFS", fileToUpload);
+                // Upload to IPFS using Thirdweb
+                const ipfsUrl = await (0, storage_1.upload)({
+                    client: thirdweb_1.client,
+                    files: [fileToUpload],
+                });
+                debug("Upload successful", ipfsUrl);
+                // Save avatar URL using profiles service
+                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);
+                react_1.toast.success("Looks great! Your avatar has been saved!");
+            }
             // 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.");
+            debug("Error saving avatar:", error);
+            react_1.toast.error("Failed to save avatar. Please try again.");
         }
         finally {
-            setIsUploading(false);
             setIsSaving(false);
         }
     };
-    const handleFileInputClick = () => {
+    const handleCancel = () => {
+        if (viewStep === "upload") {
+            setViewStep("select");
+            handleRemovePreview();
+        }
+        else {
+            setB3ModalContentType({
+                type: "manageAccount",
+                chain: contentType?.chain,
+                partnerId: partnerId,
+            });
+        }
+    };
+    const handleProfileAvatarSelect = (avatarUrl, profileType) => {
+        setSelectedAvatar(avatarUrl);
+        setSelectedProfileType(profileType);
+        // Convert IPFS URLs to gateway URLs so the cropper can load them
+        const httpUrl = (0, ipfs_1.getIpfsUrl)(avatarUrl, 1);
+        // Set preview URL to the avatar so it shows in the cropper
+        setPreviewUrl(httpUrl);
+        // Clear any selected file since we're selecting from profile
+        setSelectedFile(null);
+        // Move to upload/crop view
+        setViewStep("upload");
+    };
+    const handleUploadImageClick = () => {
+        setViewStep("upload");
+    };
+    const handleOpenFilePicker = () => {
         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." }) })] }));
+    const handleDragEnter = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        const file = e.dataTransfer.files?.[0];
+        if (file) {
+            // Validate file type
+            if (!file.type.startsWith("image/")) {
+                react_1.toast.error("Please select an image file");
+                return;
+            }
+            // Validate file size (max 5MB)
+            if (file.size > 5 * 1024 * 1024) {
+                react_1.toast.error("File size must be less than 5MB");
+                return;
+            }
+            setSelectedFile(file);
+            // Clear profile type selection when uploading a new file
+            setSelectedProfileType(null);
+            // Create preview URL
+            const url = URL.createObjectURL(file);
+            setPreviewUrl(url);
+            setSelectedAvatar(url);
+        }
+    };
+    const handleLinkMoreAccount = () => {
+        setB3ModalContentType({
+            type: "linkAccount",
+            chain: contentType?.chain,
+            partnerId: partnerId,
+        });
+    };
+    const isLoading = isSaving;
+    // Get profile avatars with validated URLs
+    const profileAvatars = profile?.profiles
+        ?.filter(p => p.avatar)
+        .map(p => {
+        const rawAvatarUrl = p?.avatar || "";
+        const validatedUrl = (0, profileDisplay_1.validateImageUrl)(rawAvatarUrl);
+        return {
+            type: p.type,
+            avatar: validatedUrl,
+            name: p.name || p.type,
+        };
+    })
+        .filter(p => p.avatar !== null) || []; // Filter out profiles with invalid avatars
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("b3-modal-avatar-editor flex w-full max-w-md flex-col bg-white", className), children: [viewStep === "upload" && (0, jsx_runtime_1.jsx)(ModalHeader_1.default, { title: "Upload Image" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center p-6", children: [viewStep === "select" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "relative mb-6", children: (0, jsx_runtime_1.jsx)("div", { className: "h-32 w-32 overflow-hidden rounded-full", children: safePreviewUrl || selectedAvatar || currentAvatar ? ((0, jsx_runtime_1.jsx)(react_1.IPFSMediaRenderer, { src: safePreviewUrl || selectedAvatar || currentAvatar || "", alt: "Avatar preview", className: "h-full w-full object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash h-full w-full" })) }) }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "h-4 w-4" }), "Upload image"] }), (0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("h3", { className: "mb-2 text-base font-semibold text-[#18181b]", children: "Select your profile image" }), (0, jsx_runtime_1.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." }), (0, jsx_runtime_1.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;
+                                            return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", onMouseEnter: () => setHoveredProfile(profileAvatar.type), onMouseLeave: () => setHoveredProfile(null), children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => handleProfileAvatarSelect(profileAvatar.avatar || "", profileAvatar.type || ""), className: (0, cn_1.cn)("h-16 w-16 overflow-hidden rounded-full border-2 transition-all", selectedProfileType === profileAvatar.type
+                                                            ? "border-[#3368ef] ring-2 ring-[#3368ef]/20"
+                                                            : "border-transparent hover:border-[#e4e4e7]"), children: (0, jsx_runtime_1.jsx)(react_1.IPFSMediaRenderer, { src: profileAvatar.avatar || "", alt: `${profileAvatar.type} avatar`, className: "h-full w-full object-cover" }) }), hoveredProfile === profileAvatar.type && ((0, jsx_runtime_1.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 }))] }, profileAvatar.type + "-" + index));
+                                        }) }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleLinkMoreAccount, className: "b3-modal-link-more-account font-inter flex items-center gap-2 text-sm font-semibold text-[#3368ef] hover:underline", children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.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 accounts"] })] })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !selectedFile && !previewUrl ? ((0, jsx_runtime_1.jsxs)("div", { onClick: handleOpenFilePicker, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, className: (0, cn_1.cn)("b3-modal-upload-view 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: [(0, jsx_runtime_1.jsxs)("p", { className: "font-inter mb-1 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-semibold text-[#3368ef]", children: "Click to upload" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#71717a]", children: " or drag and drop" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[#71717a]", children: "PNG, JPG or GIF (up to 5MB)" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6 w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative aspect-square w-full overflow-hidden rounded-xl bg-[#f4f4f5]", children: safePreviewUrl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_easy_crop_1.default, { 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",
+                                                    },
+                                                } }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash h-full w-full" })) }), safePreviewUrl && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "shrink-0 text-sm font-semibold text-[#475467]", children: "Zoom" }), (0, jsx_runtime_1.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]" })] }))] })) })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, className: "hidden" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "font-inter flex gap-3 border-t border-[#e4e4e7] p-6 font-semibold", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleCancel, variant: "outline", disabled: isLoading, className: "flex-1 rounded-xl border-[#e4e4e7] text-[#18181b] hover:bg-[#f4f4f5]", children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleSaveChanges, disabled: isLoading || (!selectedFile && !selectedProfileType), className: "b3-modal-save-button flex-1 rounded-xl bg-[#3368ef] text-white hover:bg-[#2952cc]", 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" }), "Saving..."] })) : ("Save changes") })] })] }));
 }

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

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.B3DynamicModal = B3DynamicModal;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -9,26 +12,35 @@ const AnySpendStakeUpsideExactIn_1 = require("../../../anyspend/react/components
 const react_2 = require("../../../global-account/react");
 const cn_1 = require("../../../shared/utils/cn");
 const debug_1 = require("../../../shared/utils/debug");
+const framer_motion_1 = require("framer-motion");
 const react_3 = require("react");
 const react_4 = require("thirdweb/react");
 const AvatarEditor_1 = require("./AvatarEditor/AvatarEditor");
 const useB3_1 = require("./B3Provider/useB3");
+const Deposit_1 = require("./Deposit/Deposit");
 const LinkAccount_1 = require("./LinkAccount/LinkAccount");
-const ProfileEditor_1 = require("./ProfileEditor/ProfileEditor");
+const LinkNewAccount_1 = require("./LinkAccount/LinkNewAccount");
 const ManageAccount_1 = require("./ManageAccount/ManageAccount");
+const NotificationsContent_1 = __importDefault(require("./ManageAccount/NotificationsContent"));
 const RequestPermissions_1 = require("./RequestPermissions/RequestPermissions");
+const Send_1 = require("./Send/Send");
 const SignInWithB3Flow_1 = require("./SignInWithB3/SignInWithB3Flow");
+const index_1 = require("./Toast/index");
 const dialog_1 = require("./ui/dialog");
 const drawer_1 = require("./ui/drawer");
 const AnySpendDepositUpside_1 = require("../../../anyspend/react/components/AnySpendDepositUpside");
 const debug = (0, debug_1.debugB3React)("B3DynamicModal");
 function B3DynamicModal() {
-    const { isOpen, setB3ModalOpen, contentType, history, navigateBack } = (0, react_2.useModalStore)();
+    const isOpen = (0, react_2.useModalStore)(state => state.isOpen);
+    const setB3ModalOpen = (0, react_2.useModalStore)(state => state.setB3ModalOpen);
+    const contentType = (0, react_2.useModalStore)(state => state.contentType);
+    const navigateBack = (0, react_2.useModalStore)(state => state.navigateBack);
     const { theme } = (0, useB3_1.useB3)();
     const isMobile = (0, react_2.useIsMobile)();
     const prevIsOpenRef = (0, react_3.useRef)(isOpen);
     const { wallet } = (0, react_2.useGlobalAccount)();
     const setActiveWallet = (0, react_4.useSetActiveWallet)();
+    const { toasts, removeToast } = (0, index_1.useToastContext)();
     // anyspend cleanup global account chnages by setting account back
     (0, react_3.useEffect)(() => {
         if (prevIsOpenRef.current && !isOpen) {
@@ -54,8 +66,11 @@ function B3DynamicModal() {
         "anySpendSignatureMint",
         "anySpendBondKit",
         "linkAccount",
+        "linkNewAccount",
         "avatarEditor",
-        "profileEditor",
+        "deposit",
+        "send",
+        "notifications",
     ];
     const freestyleTypes = [
         "anySpendNft",
@@ -71,10 +86,10 @@ function B3DynamicModal() {
     ];
     // Check if current content type is in freestyle types
     const isFreestyleType = freestyleTypes.includes(contentType?.type);
-    const hideCloseButton = isFreestyleType;
+    const hideCloseButton = true;
     // Build content class using cn utility
     // eslint-disable-next-line tailwindcss/no-custom-classname
-    const contentClass = (0, cn_1.cn)("b3-modal", theme === "dark" && "dark", fullWidthTypes.includes(contentType?.type) && "w-full", isFreestyleType && "b3-modal-freestyle", contentType?.type === "signInWithB3" && "p-0", contentType?.type === "anySpend" && "md:px-6");
+    const contentClass = (0, cn_1.cn)("b3-modal", theme === "dark" && "dark", fullWidthTypes.includes(contentType?.type) && "w-full", isFreestyleType && "b3-modal-freestyle", contentType?.type === "signInWithB3" && "p-0", contentType?.type === "anySpend" && "md:p-0", contentType?.type === "send" && "p-0", contentType?.type === "manageAccount" && " md:p-0 md:pt-2", contentType?.type === "linkAccount" && "md:p-0");
     debug("contentType", contentType);
     const renderContent = () => {
         if (!contentType)
@@ -97,7 +112,7 @@ function B3DynamicModal() {
             case "anySpendFundTournament":
                 return (0, jsx_runtime_1.jsx)(react_1.AnySpendTournament, { ...contentType, mode: "modal", action: "fund" });
             case "anySpendOrderHistory":
-                return (0, jsx_runtime_1.jsx)(react_1.OrderHistory, { onBack: () => { }, mode: "modal" });
+                return (0, jsx_runtime_1.jsx)(react_1.OrderHistory, { ...contentType, mode: "modal" });
             case "anySpendStakeB3":
                 return (0, jsx_runtime_1.jsx)(react_1.AnySpendStakeB3, { ...contentType, mode: "modal" });
             case "anySpendStakeB3ExactIn":
@@ -116,14 +131,20 @@ function B3DynamicModal() {
                 return (0, jsx_runtime_1.jsx)(react_1.AnySpendBondKit, { ...contentType });
             case "linkAccount":
                 return (0, jsx_runtime_1.jsx)(LinkAccount_1.LinkAccount, { ...contentType });
+            case "linkNewAccount":
+                return (0, jsx_runtime_1.jsx)(LinkNewAccount_1.LinkNewAccount, { ...contentType });
             case "anySpendDepositHype":
                 return (0, jsx_runtime_1.jsx)(AnyspendDepositHype_1.AnySpendDepositHype, { ...contentType, mode: "modal" });
             case "anySpendCollectorClubPurchase":
                 return (0, jsx_runtime_1.jsx)(react_1.AnySpendCollectorClubPurchase, { ...contentType, mode: "modal" });
             case "avatarEditor":
                 return (0, jsx_runtime_1.jsx)(AvatarEditor_1.AvatarEditor, { onSetAvatar: contentType.onSuccess });
-            case "profileEditor":
-                return (0, jsx_runtime_1.jsx)(ProfileEditor_1.ProfileEditor, { onSuccess: contentType.onSuccess });
+            case "deposit":
+                return (0, jsx_runtime_1.jsx)(Deposit_1.Deposit, {});
+            case "send":
+                return (0, jsx_runtime_1.jsx)(Send_1.Send, { ...contentType });
+            case "notifications":
+                return (0, jsx_runtime_1.jsx)(NotificationsContent_1.default, { ...contentType });
             // Add other modal types here
             default:
                 return null;
@@ -133,9 +154,15 @@ 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.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 and profile editor
-                contentType?.type === "avatarEditor" || contentType?.type === "profileEditor"
-                    ? "!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" || contentType?.type === "profileEditor") && ((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" }) }) }))] }));
+    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", (contentType?.type === "manageAccount" ||
+                    contentType?.type === "deposit" ||
+                    contentType?.type === "send" ||
+                    contentType?.type === "avatarEditor" ||
+                    contentType?.type === "notifications") &&
+                    "p-0", "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 flex max-h-[90dvh] flex-col overflow-auto sm:max-h-[80dvh]"), children: [!hideCloseButton && ((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: "font-inter text-sm font-semibold", children: "Back" })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: renderContent() }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: toasts.length > 0 && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0 }, transition: { duration: 0.3, ease: "easeInOut" }, className: "toast-section relative z-10 overflow-hidden bg-white dark:border-gray-800 dark:bg-gray-900", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2, delay: 0.1 }, className: "p-4 pt-0", children: (0, jsx_runtime_1.jsx)(index_1.ToastContainer, { toasts: toasts, onDismiss: removeToast, theme: theme }) }) })) })] })] }), isOpen && ((0, jsx_runtime_1.jsx)("style", { children: `
+          .modal-inner-content {
+            transition: margin-bottom 0.3s ease-in-out;
+            margin-bottom: ${toasts.length > 0 ? "0px" : "23px"} !important;
+          }
+        ` })), 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/B3Provider/B3Provider.d.ts

@@ -9,7 +9,7 @@ import { B3ContextType } from "./types";
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors, createClientReferenceId, }: {
+export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster: _toaster, clientType, rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors, createClientReferenceId, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;

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

@@ -10,11 +10,11 @@ const debug_1 = require("../../../../shared/utils/debug");
 require("@relayprotocol/relay-kit-ui/styles.css");
 const react_query_1 = require("@tanstack/react-query");
 const react_2 = require("react");
-const sonner_1 = require("sonner");
 const react_3 = require("thirdweb/react");
 const wagmi_1 = require("wagmi");
 const client_manager_1 = require("../../../client-manager");
 const StyleRoot_1 = require("../StyleRoot");
+const index_1 = require("../Toast/index");
 const LocalSDKProvider_1 = require("./LocalSDKProvider");
 const types_1 = require("./types");
 const debug = (0, debug_1.debugB3React)("B3Provider");
@@ -32,7 +32,9 @@ const queryClient = new react_query_1.QueryClient();
 /**
  * Main B3Provider component
  */
-function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType = "rest", rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors = false, createClientReferenceId, }) {
+function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, 
+// deprecated since v0.0.87
+toaster: _toaster, clientType = "rest", rpcUrls, partnerId, onConnect, connectors, overrideDefaultConnectors = false, createClientReferenceId, }) {
     // Initialize Google Analytics on mount
     (0, react_2.useEffect)(() => {
         (0, analytics_1.loadGA4Script)();
@@ -42,7 +44,7 @@ function B3Provider({ theme = "light", children, accountOverride, environment, a
         (0, client_manager_1.setClientType)(clientType);
     }, [clientType]);
     const wagmiConfig = (0, createWagmiConfig_1.createWagmiConfig)({ partnerId, rpcUrls, connectors, overrideDefaultConnectors });
-    return ((0, jsx_runtime_1.jsx)(react_3.ThirdwebProvider, { children: (0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config: wagmiConfig, reconnectOnMount: false, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(react_1.TooltipProvider, { children: (0, jsx_runtime_1.jsx)(LocalSDKProvider_1.LocalSDKProvider, { onConnectCallback: onConnect, children: (0, jsx_runtime_1.jsx)(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, clientType: clientType, partnerId: partnerId, createClientReferenceId: createClientReferenceId, children: (0, jsx_runtime_1.jsxs)(react_1.RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, (0, jsx_runtime_1.jsx)(StyleRoot_1.StyleRoot, { id: "b3-root" }), (0, jsx_runtime_1.jsx)(sonner_1.Toaster, { theme: theme, position: toaster?.position, style: toaster?.style })] }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_3.ThirdwebProvider, { children: (0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config: wagmiConfig, reconnectOnMount: false, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(react_1.TooltipProvider, { children: (0, jsx_runtime_1.jsx)(index_1.ToastProvider, { children: (0, jsx_runtime_1.jsx)(LocalSDKProvider_1.LocalSDKProvider, { onConnectCallback: onConnect, children: (0, jsx_runtime_1.jsxs)(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, clientType: clientType, partnerId: partnerId, createClientReferenceId: createClientReferenceId, children: [(0, jsx_runtime_1.jsx)(ToastContextConnector, {}), (0, jsx_runtime_1.jsxs)(react_1.RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, (0, jsx_runtime_1.jsx)(StyleRoot_1.StyleRoot, { id: "b3-root" })] })] }) }) }) }) }) }) }));
 }
 /**
  * Inner provider component that provides the actual B3Context
@@ -107,3 +109,17 @@ function InnerProvider({ children, accountOverride, environment, defaultPermissi
 const InnerProvider2 = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
+/**
+ * Component to connect the toast context to the global toast API
+ */
+function ToastContextConnector() {
+    const toastContext = (0, index_1.useToastContext)();
+    (0, react_2.useEffect)(() => {
+        (0, index_1.setToastContext)({
+            addToast: toastContext.addToast,
+            removeToast: toastContext.removeToast,
+            clearAll: toastContext.clearAll,
+        });
+    }, [toastContext]);
+    return null;
+}

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

@@ -0,0 +1 @@
+export declare function Deposit(): import("react/jsx-runtime").JSX.Element;