@b3dotfun/sdk 0.0.65-test.5 → 0.0.66-alpha.0

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

@@ -1,82 +1,30 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import app from "../../../../global-account/app.js";
-import { Button, IPFSMediaRenderer, useB3, useProfile } from "../../../../global-account/react/index.js";
-import { validateImageUrl } from "../../../../global-account/react/utils/profileDisplay.js";
+import { Button, useB3, useProfile } from "../../../../global-account/react/index.js";
 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 { useCallback, useRef, useState } from "react";
-import Cropper from "react-easy-crop";
-import "react-easy-crop/react-easy-crop.css";
+import { Check, Loader2, Upload, X } from "lucide-react";
+import { useRef, useState } from "react";
 import { toast } from "sonner";
 import { useActiveAccount } from "thirdweb/react";
 import { upload } from "thirdweb/storage";
-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);
-    const [selectedProfileType, setSelectedProfileType] = useState(null); // Track which profile was selected
-    const [hoveredProfile, setHoveredProfile] = useState(null);
     const [selectedFile, setSelectedFile] = useState(null);
     const [previewUrl, setPreviewUrl] = useState(null);
+    const [isUploading, setIsUploading] = useState(false);
     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);
-    const contentType = useModalStore(state => state.contentType);
-    const { setPreference } = useProfileSettings();
+    const { setUser } = useB3();
     const account = useActiveAccount();
     const { data: profile, refetch: refreshProfile } = useProfile({
         address: account?.address,
         fresh: true,
     });
-    // Get raw avatar URLs, convert IPFS URLs, and validate them
-    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");
-        });
-    };
+    // Thirdweb upload function
+    const hasAvatar = profile?.avatar;
     const handleFileSelect = (event) => {
         const file = event.target.files?.[0];
         if (file) {
@@ -91,17 +39,12 @@ export function AvatarEditor({ onSetAvatar, className }) {
                 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 handleRemovePreview = () => {
-        setSelectedAvatar(currentAvatar || null);
-        setSelectedProfileType(null);
+    const handleRemoveFile = () => {
         setSelectedFile(null);
         if (previewUrl) {
             URL.revokeObjectURL(previewUrl);
@@ -110,209 +53,50 @@ 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) {
-            toast.error("No account connected");
+    const handleUpload = async () => {
+        if (!selectedFile) {
+            toast.error("Please select an image first");
             return;
         }
-        setIsSaving(true);
+        setIsUploading(true);
         try {
-            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);
-                    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) {
-                // User selected from existing profile avatars
-                // Fetch the image from the URL and convert to blob
-                debug("Fetching image from social profile:", selectedAvatar);
-                try {
-                    const response = await fetch(selectedAvatar);
-                    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);
-                    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 upload({
-                    client,
-                    files: [fileToUpload],
-                });
-                debug("Upload successful", ipfsUrl);
-                // Save avatar URL using profiles service
-                const user = await app.service("users").setAvatar({
-                    avatar: ipfsUrl,
-                }, 
-                // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
-                {});
-                // update user
-                // @ts-expect-error this resolved fine, look into why expect-error needed
-                setUser(user);
-                toast.success("Looks great! Your avatar has been saved!");
-            }
+            debug("Starting upload to IPFS", selectedFile);
+            // Upload to IPFS using Thirdweb
+            const ipfsUrl = await upload({
+                client,
+                files: [selectedFile],
+            });
+            debug("Upload successful", ipfsUrl);
+            // Save avatar URL using profiles service
+            setIsSaving(true);
+            const user = await app.service("users").setAvatar({
+                avatar: ipfsUrl,
+            }, 
+            // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
+            {});
+            // update user
+            // @ts-expect-error this resolved fine, look into why expect-error needed
+            setUser(user);
             // Refresh profile to get updated avatar
             await refreshProfile();
+            toast.success(hasAvatar ? "Nice look! Your avatar has been updated!" : "Looks great! Your avatar has been saved!");
             onSetAvatar?.();
+            // Clean up
+            handleRemoveFile();
         }
         catch (error) {
-            debug("Error saving avatar:", error);
-            toast.error("Failed to save avatar. Please try again.");
+            debug("Error uploading avatar:", error);
+            toast.error("Failed to upload avatar. Please try again.");
         }
         finally {
+            setIsUploading(false);
             setIsSaving(false);
         }
     };
-    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);
-        // Clear any selected file since we're selecting from profile
-        setSelectedFile(null);
-        if (previewUrl) {
-            URL.revokeObjectURL(previewUrl);
-            setPreviewUrl(null);
-        }
-    };
-    const handleUploadImageClick = () => {
-        setViewStep("upload");
-    };
-    const handleOpenFilePicker = () => {
+    const handleFileInputClick = () => {
         fileInputRef.current?.click();
     };
-    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/")) {
-                toast.error("Please select an image file");
-                return;
-            }
-            // Validate file size (max 5MB)
-            if (file.size > 5 * 1024 * 1024) {
-                toast.error("File size must be less than 5MB");
-                return;
-            }
-            setSelectedFile(file);
-            // 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 = 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 (_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;
-                                            return (_jsxs("div", { className: "relative", onMouseEnter: () => setHoveredProfile(profileAvatar.type), onMouseLeave: () => setHoveredProfile(null), children: [_jsx("button", { onClick: () => handleProfileAvatarSelect(profileAvatar.avatar || "", profileAvatar.type || ""), className: 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: _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)" })] })) : (_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") })] })] }));
+    const isLoading = isUploading || isSaving;
+    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center space-y-6 p-8", className), children: [_jsxs("div", { className: "space-y-2 text-center", children: [_jsx("h2", { className: "font-neue-montreal-semibold text-b3-grey text-2xl", children: hasAvatar ? "Update Your Avatar" : "Set Your Avatar" }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium", children: "Upload an image to personalize your profile" })] }), hasAvatar && !previewUrl && (_jsx("div", { className: "relative", children: _jsx("div", { className: "border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4", children: _jsx("img", { src: profile.avatar, alt: "Current avatar", className: "h-full w-full object-cover" }) }) })), _jsxs("div", { className: "w-full max-w-md", children: [!selectedFile ? (_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: [_jsx(Upload, { className: "text-b3-grey mx-auto mb-4 h-12 w-12" }), _jsx("p", { className: "text-b3-grey font-neue-montreal-semibold mb-2", children: "Click to select an image" }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "PNG, JPG, or GIF up to 5MB" })] })) : (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "border-b3-primary-blue mx-auto h-32 w-32 overflow-hidden rounded-full border-4", children: previewUrl ? (_jsx("img", { src: previewUrl, alt: "Preview", className: "h-full w-full object-cover" })) : (_jsx("div", { className: "bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full", children: _jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "No file selected" }) })) }), _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: _jsx(X, { size: 16 }) })] }), _jsxs("div", { className: "space-y-1 text-center", children: [_jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: selectedFile.name }), _jsxs("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-xs", children: [(selectedFile.size / 1024 / 1024).toFixed(2), " MB"] })] })] })), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, className: "hidden" })] }), _jsxs("div", { className: "flex w-full max-w-md gap-3", children: [selectedFile && (_jsx(Button, { onClick: handleUpload, disabled: isLoading, className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isUploading ? "Uploading..." : "Saving..."] })) : (_jsxs(_Fragment, { children: [_jsx(Check, { className: "mr-2 h-4 w-4" }), hasAvatar ? "Update Avatar" : "Set Avatar"] })) })), _jsxs(Button, { variant: "outline", onClick: handleFileInputClick, disabled: isLoading, className: "flex-1", children: [_jsx(Upload, { className: "mr-2 h-4 w-4" }), selectedFile ? "Change Image" : "Select Image"] })] }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs", children: _jsx("p", { children: "Your avatar will be uploaded to IPFS and stored securely. Make sure you have the rights to use this image." }) })] }));
 }

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

@@ -10,21 +10,17 @@ import { useEffect, useRef } from "react";
 import { useSetActiveWallet } from "thirdweb/react";
 import { AvatarEditor } from "./AvatarEditor/AvatarEditor.js";
 import { useB3 } from "./B3Provider/useB3.js";
-import { Deposit } from "./Deposit/Deposit.js";
 import { LinkAccount } from "./LinkAccount/LinkAccount.js";
-import { LinkNewAccount } from "./LinkAccount/LinkNewAccount.js";
+import { ProfileEditor } from "./ProfileEditor/ProfileEditor.js";
 import { ManageAccount } from "./ManageAccount/ManageAccount.js";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions.js";
-import { Send } from "./Send/Send.js";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow.js";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./ui/dialog.js";
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./ui/drawer.js";
+import { AnySpendDepositUpside } from "../../../anyspend/react/components/AnySpendDepositUpside.js";
 const debug = debugB3React("B3DynamicModal");
 export function B3DynamicModal() {
-    const isOpen = useModalStore(state => state.isOpen);
-    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
-    const contentType = useModalStore(state => state.contentType);
-    const navigateBack = useModalStore(state => state.navigateBack);
+    const { isOpen, setB3ModalOpen, contentType, history, navigateBack } = useModalStore();
     const { theme } = useB3();
     const isMobile = useIsMobile();
     const prevIsOpenRef = useRef(isOpen);
@@ -55,10 +51,8 @@ export function B3DynamicModal() {
         "anySpendSignatureMint",
         "anySpendBondKit",
         "linkAccount",
-        "linkNewAccount",
         "avatarEditor",
-        "deposit",
-        "send",
+        "profileEditor",
     ];
     const freestyleTypes = [
         "anySpendNft",
@@ -74,7 +68,7 @@ export function B3DynamicModal() {
     ];
     // Check if current content type is in freestyle types
     const isFreestyleType = freestyleTypes.includes(contentType?.type);
-    const hideCloseButton = true;
+    const hideCloseButton = isFreestyleType;
     // Build content class using cn utility
     // eslint-disable-next-line tailwindcss/no-custom-classname
     const contentClass = 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");
@@ -100,7 +94,7 @@ export function B3DynamicModal() {
             case "anySpendFundTournament":
                 return _jsx(AnySpendTournament, { ...contentType, mode: "modal", action: "fund" });
             case "anySpendOrderHistory":
-                return _jsx(OrderHistory, { ...contentType, mode: "modal" });
+                return _jsx(OrderHistory, { onBack: () => { }, mode: "modal" });
             case "anySpendStakeB3":
                 return _jsx(AnySpendStakeB3, { ...contentType, mode: "modal" });
             case "anySpendStakeB3ExactIn":
@@ -109,6 +103,8 @@ export function B3DynamicModal() {
                 return _jsx(AnySpendStakeUpside, { ...contentType, mode: "modal" });
             case "anySpendStakeUpsideExactIn":
                 return _jsx(AnySpendStakeUpsideExactIn, { ...contentType, mode: "modal" });
+            case "anySpendDepositUpside":
+                return _jsx(AnySpendDepositUpside, { ...contentType, mode: "modal" });
             case "anySpendBuySpin":
                 return _jsx(AnySpendBuySpin, { ...contentType, mode: "modal" });
             case "anySpendSignatureMint":
@@ -117,16 +113,12 @@ export function B3DynamicModal() {
                 return _jsx(AnySpendBondKit, { ...contentType });
             case "linkAccount":
                 return _jsx(LinkAccount, { ...contentType });
-            case "linkNewAccount":
-                return _jsx(LinkNewAccount, { ...contentType });
             case "anySpendDepositHype":
                 return _jsx(AnySpendDepositHype, { ...contentType, mode: "modal" });
             case "avatarEditor":
                 return _jsx(AvatarEditor, { onSetAvatar: contentType.onSuccess });
-            case "deposit":
-                return _jsx(Deposit, {});
-            case "send":
-                return _jsx(Send, { ...contentType });
+            case "profileEditor":
+                return _jsx(ProfileEditor, { onSuccess: contentType.onSuccess });
             // Add other modal types here
             default:
                 return null;
@@ -136,9 +128,9 @@ export function B3DynamicModal() {
     const ModalContent = isMobile ? DrawerContent : DialogContent;
     const ModalTitle = isMobile ? DrawerTitle : DialogTitle;
     const ModalDescription = isMobile ? DrawerDescription : DialogDescription;
-    return (_jsxs(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: [_jsxs(ModalContent, { className: 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") &&
-                    "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" }) }) }))] }));
+    return (_jsxs(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: [_jsxs(ModalContent, { className: 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: [_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: [history.length > 0 && 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: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }), (contentType?.type === "avatarEditor" || contentType?.type === "profileEditor") && (_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.d.ts

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