@b3dotfun/sdk 0.0.65-alpha.0 → 0.0.65-test.3

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

@@ -8,6 +8,7 @@ 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 thirdweb_1 = require("../../../../shared/utils/thirdweb");
@@ -16,21 +17,33 @@ const react_2 = require("react");
 const sonner_1 = require("sonner");
 const react_3 = require("thirdweb/react");
 const storage_1 = require("thirdweb/storage");
+const useProfile_1 = require("../../hooks/useProfile");
+const stores_1 = require("../../stores");
+const ModalHeader_1 = __importDefault(require("../ModalHeader/ModalHeader"));
 const debug = (0, debug_1.debugB3React)("AvatarEditor");
 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 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 { setPreference } = (0, useProfile_1.useProfileSettings)();
     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 handleFileSelect = (event) => {
         const file = event.target.files?.[0];
         if (file) {
@@ -45,12 +58,17 @@ 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 handleRemoveFile = () => {
+    const handleRemovePreview = () => {
+        setSelectedAvatar(currentAvatar || null);
+        setSelectedProfileType(null);
         setSelectedFile(null);
         if (previewUrl) {
             URL.revokeObjectURL(previewUrl);
@@ -60,49 +78,180 @@ function AvatarEditor({ onSetAvatar, className }) {
             fileInputRef.current.value = "";
         }
     };
-    const handleUpload = async () => {
-        if (!selectedFile) {
-            sonner_1.toast.error("Please select an image first");
+    const handleSaveChanges = async () => {
+        if (!account?.address) {
+            sonner_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
+            if (selectedFile) {
+                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);
+                    sonner_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);
+                sonner_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);
+            sonner_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);
+        // 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 = () => {
         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/")) {
+                sonner_1.toast.error("Please select an image file");
+                return;
+            }
+            // Validate file size (max 5MB)
+            if (file.size > 5 * 1024 * 1024) {
+                sonner_1.toast.error("File size must be less than 5MB");
+                return;
+            }
+            setSelectedFile(file);
+            // 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)("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.jsxs)("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" })) }), (selectedAvatar !== currentAvatar || selectedFile) && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) }))] }), (0, jsx_runtime_1.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: [(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)("img", { 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 }))] }, index));
+                                        }) }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleLinkMoreAccount, className: "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 account"] })] })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !selectedFile ? ((0, jsx_runtime_1.jsxs)("div", { onClick: handleOpenFilePicker, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, className: (0, cn_1.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: [(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.jsx)("div", { className: "mb-6 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-[#f4f4f5]", children: safePreviewUrl ? ((0, jsx_runtime_1.jsx)("img", { src: safePreviewUrl, alt: "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.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: "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

@@ -13,16 +13,21 @@ 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 RequestPermissions_1 = require("./RequestPermissions/RequestPermissions");
+const Send_1 = require("./Send/Send");
 const SignInWithB3Flow_1 = require("./SignInWithB3/SignInWithB3Flow");
 const dialog_1 = require("./ui/dialog");
 const drawer_1 = require("./ui/drawer");
 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);
@@ -53,8 +58,10 @@ function B3DynamicModal() {
         "anySpendSignatureMint",
         "anySpendBondKit",
         "linkAccount",
+        "linkNewAccount",
         "avatarEditor",
-        "profileEditor",
+        "deposit",
+        "send",
     ];
     const freestyleTypes = [
         "anySpendNft",
@@ -70,7 +77,7 @@ 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");
@@ -96,7 +103,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":
@@ -113,12 +120,16 @@ 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 "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 });
             // Add other modal types here
             default:
                 return null;
@@ -128,9 +139,9 @@ function B3DynamicModal() {
     const ModalContent = isMobile ? drawer_1.DrawerContent : dialog_1.DialogContent;
     const ModalTitle = isMobile ? drawer_1.DrawerTitle : dialog_1.DialogTitle;
     const ModalDescription = isMobile ? drawer_1.DrawerDescription : dialog_1.DialogDescription;
-    return ((0, jsx_runtime_1.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") &&
+                    "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 max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [(!hideCloseButton || 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: "font-inter text-sm font-semibold", children: "Back" })] })), renderContent()] })] }), contentType?.type === "avatarEditor" && ((0, jsx_runtime_1.jsx)("button", { onClick: () => setB3ModalOpen(false), className: "fixed right-5 top-5 z-[100] cursor-pointer text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: (0, jsx_runtime_1.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
 }

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

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

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

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Deposit = Deposit;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("../../../../anyspend/constants");
+const chain_1 = require("../../../../anyspend/utils/chain");
+const react_1 = require("../../../../global-account/react");
+const relay_kit_ui_1 = require("@relayprotocol/relay-kit-ui");
+const lucide_react_1 = require("lucide-react");
+const qrcode_react_1 = require("qrcode.react");
+const react_2 = require("react");
+const sonner_1 = require("sonner");
+const chains_1 = require("thirdweb/chains");
+const ModalHeader_1 = __importDefault(require("../ModalHeader/ModalHeader"));
+const button_1 = require("../ui/button");
+const dropdown_menu_1 = require("../ui/dropdown-menu");
+// Coinbase logo SVG
+const CoinbaseLogo = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z", fill: "#0052FF" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.00065 11.3337C6.16065 11.3337 4.66732 9.84033 4.66732 8.00033C4.66732 6.16033 6.16065 4.66699 8.00065 4.66699C9.47399 4.66699 10.734 5.64699 11.1607 7.00033H13.2273C12.774 4.54699 10.6273 2.66699 8.00065 2.66699C5.05399 2.66699 2.66732 5.05366 2.66732 8.00033C2.66732 10.947 5.05399 13.3337 8.00065 13.3337C10.6273 13.3337 12.774 11.4537 13.2273 9.00033H11.1607C10.734 10.3537 9.47399 11.3337 8.00065 11.3337Z", fill: "white" })] }));
+function Deposit() {
+    const { address } = (0, react_1.useAccountWallet)();
+    const navigateBack = (0, react_1.useModalStore)(state => state.navigateBack);
+    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
+    const history = (0, react_1.useModalStore)(state => state.history);
+    const [selectedChainId, setSelectedChainId] = (0, react_2.useState)(chains_1.base.id);
+    const [selectedToken, setSelectedToken] = (0, react_2.useState)({
+        address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
+        chainId: chains_1.base.id,
+        decimals: 6,
+        symbol: "USDC",
+        name: "USD Coin",
+        metadata: {
+            logoURI: "https://assets.relay.link/icons/1/light/usdc.png",
+        },
+    });
+    // Get the selected chain object
+    const selectedChain = (0, react_2.useMemo)(() => chain_1.ALL_CHAINS[selectedChainId], [selectedChainId]);
+    // Get all supported chains for the dropdown
+    const supportedChains = (0, react_2.useMemo)(() => Object.values(chain_1.ALL_CHAINS), []);
+    // The deposit address is the user's active wallet address
+    const depositAddress = address || "0x0000000000000000000000000000000000000000";
+    const handleTokenSelect = (token) => {
+        setSelectedChainId(token.chainId);
+        setSelectedToken({
+            address: token.address,
+            chainId: token.chainId,
+            decimals: token.decimals,
+            metadata: { logoURI: token.logoURI },
+            name: token.name,
+            symbol: token.symbol,
+        });
+    };
+    const handleCopyAddress = async () => {
+        try {
+            await navigator.clipboard.writeText(depositAddress);
+            sonner_1.toast.success("Address copied to clipboard");
+        }
+        catch (error) {
+            sonner_1.toast.error("Failed to copy address");
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { title: "Deposit", showCloseButton: false }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col pb-5 pt-5", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 px-5", children: (0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-medium text-base leading-snug text-[#3f3f46]", children: "Send any accepted token and we'll convert it to B3 on Base for you to use." }) }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3 px-5", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1.5 block text-sm font-medium text-[#3f3f46]", children: "Chain" }), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { className: "flex h-10 w-full items-center justify-between rounded-lg border border-[#d1d1d6] bg-white px-2.5 py-2 transition-colors hover:bg-[#fafafa]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedChain?.logoUrl && ((0, jsx_runtime_1.jsx)("img", { src: selectedChain.logoUrl, alt: selectedChain.name, className: "h-6 w-6 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-base text-[#18181b]", children: selectedChain?.name || "Select Chain" })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4 text-[#51525c]" })] }) }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuContent, { className: "max-h-[300px] w-full overflow-y-auto", children: supportedChains.map(chain => ((0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuItem, { onClick: () => setSelectedChainId(chain.id), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [chain.logoUrl && (0, jsx_runtime_1.jsx)("img", { src: chain.logoUrl, alt: chain.name, className: "h-6 w-6 rounded-full" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#18181b]", children: chain.name })] }) }, chain.id))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1.5 block text-sm font-medium text-[#3f3f46]", children: "Accepted tokens" }), (0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: [selectedChainId], context: "from", fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: [selectedChainId], multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, constants_1.RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)("button", { className: "flex h-10 w-full items-center justify-between rounded-lg border border-[#d1d1d6] bg-white px-2.5 py-2 transition-colors hover:bg-[#fafafa]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedToken?.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: selectedToken.metadata.logoURI, alt: selectedToken.symbol, className: "h-6 w-6 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-base text-[#18181b]", children: selectedToken.symbol })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4 text-[#51525c]" })] }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mx-5 mt-4 flex items-start rounded-xl border border-[#e4e4e7] bg-[#fafafa]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col items-center gap-2 px-5 pb-3 pt-5", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex w-full items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "flex aspect-[144/146] w-full flex-col items-center justify-center overflow-hidden", children: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: depositAddress, size: 144, level: "M" }) }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold leading-[18px] text-[#0b57c2]", children: "SCAN WITH" }), (0, jsx_runtime_1.jsx)(CoinbaseLogo, {})] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex flex-1 flex-col gap-2 self-stretch border-l border-[#e4e4e7] p-6", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm font-medium leading-5 text-[#3f3f46]", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-wrap items-center gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "h-[74px] flex-1 overflow-hidden text-ellipsis whitespace-pre-wrap break-all pr-6 text-base font-semibold leading-6 text-[#18181b]", children: depositAddress }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: "absolute bottom-0 right-0 h-4 w-4 transition-opacity hover:opacity-70", "aria-label": "Copy address", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-full w-full text-[#51525c]" }) })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "mx-5 mt-4", children: (0, jsx_runtime_1.jsxs)("p", { className: "font-neue-montreal-italic text-center text-sm leading-[1.3] text-[#3f3f46]", children: ["Do not send any tokens other than the ones specified.", (0, jsx_runtime_1.jsx)("br", {}), "Tokens not accepted will not be converted."] }) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4 px-5", children: (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleCopyAddress, className: "h-12 w-full rounded-xl bg-[#0c68e9] 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)] hover:bg-[#0b5fd4]", children: "Copy deposit address" }) })] })] }));
+}

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

@@ -0,0 +1,39 @@
+import type { ThirdwebClient } from "thirdweb";
+interface IPFSMediaRendererProps {
+    /** The source URL - can be IPFS URL (ipfs://...) or HTTP URL */
+    src: string | null | undefined;
+    /** Alt text for the media */
+    alt?: string;
+    /** CSS class name */
+    className?: string;
+    /** Thirdweb client instance (optional, uses default if not provided) */
+    client?: ThirdwebClient;
+    /** Width of the media */
+    width?: string | number;
+    /** Height of the media */
+    height?: string | number;
+    /** Controls property for video/audio */
+    controls?: boolean;
+    /** Style object */
+    style?: React.CSSProperties;
+}
+/**
+ * IPFSMediaRenderer - A wrapper around Thirdweb's MediaRenderer that configures
+ * the IPFS gateway URL to use our validated gateway.
+ *
+ * Features:
+ * - Configures MediaRenderer to use cloudflare-ipfs.com gateway
+ * - Gateway matches our allowed list in profileDisplay.ts
+ * - Provides fallback for missing sources
+ *
+ * @example
+ * ```tsx
+ * <IPFSMediaRenderer
+ *   src="ipfs://QmX..."
+ *   alt="Profile Avatar"
+ *   className="size-14 rounded-full"
+ * />
+ * ```
+ */
+export declare function IPFSMediaRenderer({ src, alt, className, client, width, height, controls, style, }: IPFSMediaRendererProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,37 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IPFSMediaRenderer = IPFSMediaRenderer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const thirdweb_1 = require("../../../../shared/utils/thirdweb");
+const react_1 = require("thirdweb/react");
+// Primary IPFS gateway URL - matches our allowed list in profileDisplay.ts
+// Note: MediaRenderer expects the base gateway URL without /ipfs path
+const IPFS_GATEWAY_URL = "https://cloudflare-ipfs.com";
+/**
+ * IPFSMediaRenderer - A wrapper around Thirdweb's MediaRenderer that configures
+ * the IPFS gateway URL to use our validated gateway.
+ *
+ * Features:
+ * - Configures MediaRenderer to use cloudflare-ipfs.com gateway
+ * - Gateway matches our allowed list in profileDisplay.ts
+ * - Provides fallback for missing sources
+ *
+ * @example
+ * ```tsx
+ * <IPFSMediaRenderer
+ *   src="ipfs://QmX..."
+ *   alt="Profile Avatar"
+ *   className="size-14 rounded-full"
+ * />
+ * ```
+ */
+function IPFSMediaRenderer({ src, alt = "Media", className, client = thirdweb_1.client, width, height, controls, style, }) {
+    // If no source, render fallback
+    if (!src) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, style: style, "aria-label": alt, children: (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash flex h-full w-full items-center justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: alt.charAt(0).toUpperCase() }) }) }));
+    }
+    // Convert IPFS URLs to HTTP gateway URLs if needed
+    // This handles both ipfs:// URLs and existing HTTP gateway URLs
+    return ((0, jsx_runtime_1.jsx)(react_1.MediaRenderer, { src: src, client: client, alt: alt, className: className, width: width ? width.toString() : undefined, height: height ? height.toString() : undefined, controls: controls, style: style }));
+}

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

@@ -1,4 +1,6 @@
-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;
+import { Chain } from "thirdweb";
+export declare const LinkAccount: ({ partnerId, onLogout, chain, }: {
+    partnerId: string;
+    onLogout?: () => void;
+    chain: Chain;
+}) => import("react/jsx-runtime").JSX.Element;