@b3dotfun/sdk 0.0.64-alpha.2 → 0.0.65-test.1

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

@@ -4,27 +4,42 @@ import app from "../../../../global-account/app.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 { getIpfsUrl } from "../../../../shared/utils/ipfs.js";
 import { client } from "../../../../shared/utils/thirdweb.js";
-import { Check, Loader2, Upload, X } from "lucide-react";
+import { 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");
 export function AvatarEditor({ onSetAvatar, className }) {
+    const [viewStep, setViewStep] = useState("select");
+    const [selectedAvatar, setSelectedAvatar] = useState(null);
+    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 fileInputRef = useRef(null);
-    const { setUser } = useB3();
+    const { setUser, user, partnerId } = useB3();
+    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const contentType = useModalStore(state => state.contentType);
+    const { setPreference } = useProfileSettings();
     const account = useActiveAccount();
     const { data: profile, refetch: refreshProfile } = useProfile({
         address: account?.address,
         fresh: true,
     });
-    // Thirdweb upload function
-    const hasAvatar = profile?.avatar;
+    const currentAvatar = user?.avatar
+        ? getIpfsUrl(user?.avatar)
+        : profile?.avatar
+            ? getIpfsUrl(profile.avatar)
+            : undefined;
     const handleFileSelect = (event) => {
         const file = event.target.files?.[0];
         if (file) {
@@ -42,9 +57,11 @@ export function AvatarEditor({ onSetAvatar, className }) {
             // Create preview URL
             const url = URL.createObjectURL(file);
             setPreviewUrl(url);
+            setSelectedAvatar(url);
         }
     };
-    const handleRemoveFile = () => {
+    const handleRemovePreview = () => {
+        setSelectedAvatar(currentAvatar || null);
         setSelectedFile(null);
         if (previewUrl) {
             URL.revokeObjectURL(previewUrl);
@@ -54,49 +71,138 @@ export function AvatarEditor({ onSetAvatar, className }) {
             fileInputRef.current.value = "";
         }
     };
-    const handleUpload = async () => {
-        if (!selectedFile) {
-            toast.error("Please select an image first");
+    const handleSaveChanges = async () => {
+        if (!account?.address) {
+            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 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);
+            // If user uploaded a new file
+            if (selectedFile) {
+                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
+                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!");
+            }
+            else if (selectedAvatar && selectedAvatar !== currentAvatar) {
+                // User selected from existing profile avatars
+                // Find the profile that matches the selected avatar
+                const selectedProfile = profile?.profiles?.find(p => p.avatar === selectedAvatar);
+                if (selectedProfile && selectedProfile.type) {
+                    debug("Setting profile preference to:", selectedProfile.type);
+                    // Set preference for this profile type
+                    await setPreference(account.address, selectedProfile.type, account.address, async (message) => {
+                        // Sign the message using the active account
+                        const signature = await account.signMessage({ message });
+                        return signature;
+                    });
+                    toast.success("Avatar updated successfully!");
+                }
+            }
             // 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 uploading avatar:", error);
-            toast.error("Failed to upload avatar. Please try again.");
+            debug("Error saving avatar:", error);
+            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) => {
+        setSelectedAvatar(avatarUrl);
+    };
+    const handleUploadImageClick = () => {
+        setViewStep("upload");
+    };
+    const handleOpenFilePicker = () => {
         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);
+            // Create preview URL
+            const url = URL.createObjectURL(file);
+            setPreviewUrl(url);
+            setSelectedAvatar(url);
+        }
+    };
+    const handleLinkMoreAccount = () => {
+        setB3ModalContentType({
+            type: "linkAccount",
+            chain: contentType?.chain,
+            partnerId: partnerId,
+        });
+    };
     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." }) })] }));
+    // Get profile avatars
+    const profileAvatars = profile?.profiles
+        ?.filter(p => p.avatar)
+        .map(p => ({
+        type: p.type,
+        avatar: getIpfsUrl(p?.avatar || ""),
+        name: p.name || p.type,
+    })) || [];
+    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: _jsx("img", { src: selectedAvatar || currentAvatar || "https://via.placeholder.com/128", alt: "Avatar preview", className: "h-full w-full object-cover" }) }), selectedAvatar && (_jsx("button", { onClick: handleRemovePreview, className: "absolute -right-1 -top-1 flex h-8 w-8 items-center justify-center rounded-full bg-[#51525c] text-white transition-colors hover:bg-[#71717a]", children: _jsx(X, { className: "h-4 w-4" }) }))] }), _jsxs("button", { onClick: handleUploadImageClick, className: "font-inter shadow-xs mb-6 flex w-full items-center justify-center gap-2 rounded-xl border border-[#e4e4e7] bg-white px-4 py-3 text-sm font-semibold text-[#18181b] transition-colors hover:bg-[#f4f4f5]", children: [_jsx(Upload, { className: "h-4 w-4" }), "Upload image"] }), _jsxs("div", { className: "w-full", children: [_jsx("h3", { className: "mb-2 text-base font-semibold text-[#18181b]", children: "Select your profile image" }), _jsx("p", { className: "mb-4 text-sm font-semibold text-[#475467]", children: "Pick an avatar from your linked profiles, ENS or upload a new one." }), _jsx("div", { className: "mb-4 flex gap-3", children: profileAvatars.map((profileAvatar, index) => (_jsxs("div", { className: "relative", onMouseEnter: () => setHoveredProfile(profileAvatar.type), onMouseLeave: () => setHoveredProfile(null), children: [_jsx("button", { onClick: () => handleProfileAvatarSelect(profileAvatar.avatar), className: cn("h-16 w-16 overflow-hidden rounded-full border-2 transition-all", selectedAvatar === profileAvatar.avatar
+                                                        ? "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)" })] })) : (_jsx("div", { className: "mb-6 w-full", children: _jsx("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-[#f4f4f5]", children: _jsx("img", { src: previewUrl || "", alt: "Preview", className: "h-full w-full object-cover" }) }) })) })), _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 || !selectedAvatar, className: "flex-1 rounded-xl bg-[#3368ef] text-white hover:bg-[#2952cc]", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Saving..."] })) : ("Save changes") })] })] }));
 }

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

@@ -10,16 +10,22 @@ 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 { ProfileEditor } from "./ProfileEditor/ProfileEditor.js";
+import { LinkNewAccount } from "./LinkAccount/LinkNewAccount.js";
 import { ManageAccount } from "./ManageAccount/ManageAccount.js";
+import { ProfileEditor } from "./ProfileEditor/ProfileEditor.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";
 const debug = debugB3React("B3DynamicModal");
 export function B3DynamicModal() {
-    const { isOpen, setB3ModalOpen, contentType, history, navigateBack } = useModalStore();
+    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 { theme } = useB3();
     const isMobile = useIsMobile();
     const prevIsOpenRef = useRef(isOpen);
@@ -50,7 +56,10 @@ export function B3DynamicModal() {
         "anySpendSignatureMint",
         "anySpendBondKit",
         "linkAccount",
+        "linkNewAccount",
         "avatarEditor",
+        "deposit",
+        "send",
         "profileEditor",
     ];
     const freestyleTypes = [
@@ -67,7 +76,7 @@ export 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 = 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");
@@ -93,7 +102,7 @@ export function B3DynamicModal() {
             case "anySpendFundTournament":
                 return _jsx(AnySpendTournament, { ...contentType, mode: "modal", action: "fund" });
             case "anySpendOrderHistory":
-                return _jsx(OrderHistory, { onBack: () => { }, mode: "modal" });
+                return _jsx(OrderHistory, { ...contentType, mode: "modal" });
             case "anySpendStakeB3":
                 return _jsx(AnySpendStakeB3, { ...contentType, mode: "modal" });
             case "anySpendStakeB3ExactIn":
@@ -110,10 +119,16 @@ 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
@@ -125,9 +140,13 @@ 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", 
+    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", // TODO CHECK THIS
                 // 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" }) }) }))] }));
+                    : "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [(!hideCloseButton || contentType?.showBackButton) && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "font-inter text-sm font-semibold", children: "Back" })] })), renderContent()] })] }), (contentType?.type === "avatarEditor" || 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/Deposit/Deposit.d.ts

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

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RELAY_SOLANA_MAINNET_CHAIN_ID } from "../../../../anyspend/constants/index.js";
+import { ALL_CHAINS } from "../../../../anyspend/utils/chain.js";
+import { useAccountWallet, useModalStore } from "../../../../global-account/react/index.js";
+import { TokenSelector } from "@relayprotocol/relay-kit-ui";
+import { ChevronDown, Copy } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { base } from "thirdweb/chains";
+import ModalHeader from "../ModalHeader/ModalHeader.js";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+// Coinbase logo SVG
+const CoinbaseLogo = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_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" }), _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" })] }));
+export function Deposit() {
+    const { address } = useAccountWallet();
+    const navigateBack = useModalStore(state => state.navigateBack);
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const history = useModalStore(state => state.history);
+    const [selectedChainId, setSelectedChainId] = useState(base.id);
+    const [selectedToken, setSelectedToken] = useState({
+        address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
+        chainId: 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 = useMemo(() => ALL_CHAINS[selectedChainId], [selectedChainId]);
+    // Get all supported chains for the dropdown
+    const supportedChains = useMemo(() => Object.values(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);
+            toast.success("Address copied to clipboard");
+        }
+        catch (error) {
+            toast.error("Failed to copy address");
+        }
+    };
+    return (_jsxs("div", { className: "flex w-full flex-col", children: [_jsx(ModalHeader, { title: "Deposit", showCloseButton: false }), _jsxs("div", { className: "flex flex-col pb-5 pt-5", children: [_jsx("div", { className: "mb-4 px-5", children: _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." }) }), _jsxs("div", { className: "space-y-3 px-5", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1.5 block text-sm font-medium text-[#3f3f46]", children: "Chain" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _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: [_jsxs("div", { className: "flex items-center gap-2", children: [selectedChain?.logoUrl && (_jsx("img", { src: selectedChain.logoUrl, alt: selectedChain.name, className: "h-6 w-6 rounded-full" })), _jsx("span", { className: "text-base text-[#18181b]", children: selectedChain?.name || "Select Chain" })] }), _jsx(ChevronDown, { className: "h-4 w-4 text-[#51525c]" })] }) }), _jsx(DropdownMenuContent, { className: "max-h-[300px] w-full overflow-y-auto", children: supportedChains.map(chain => (_jsx(DropdownMenuItem, { onClick: () => setSelectedChainId(chain.id), children: _jsxs("div", { className: "flex items-center gap-2", children: [chain.logoUrl && _jsx("img", { src: chain.logoUrl, alt: chain.name, className: "h-6 w-6 rounded-full" }), _jsx("span", { className: "text-[#18181b]", children: chain.name })] }) }, chain.id))) })] })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1.5 block text-sm font-medium text-[#3f3f46]", children: "Accepted tokens" }), _jsx(TokenSelector, { address: address, chainIdsFilter: [selectedChainId], context: "from", fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: [selectedChainId], multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: _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: [_jsxs("div", { className: "flex items-center gap-2", children: [selectedToken?.metadata?.logoURI && (_jsx("img", { src: selectedToken.metadata.logoURI, alt: selectedToken.symbol, className: "h-6 w-6 rounded-full" })), _jsx("span", { className: "text-base text-[#18181b]", children: selectedToken.symbol })] }), _jsx(ChevronDown, { className: "h-4 w-4 text-[#51525c]" })] }) })] })] }), _jsxs("div", { className: "mx-5 mt-4 flex items-start rounded-xl border border-[#e4e4e7] bg-[#fafafa]", children: [_jsxs("div", { className: "flex flex-1 flex-col items-center gap-2 px-5 pb-3 pt-5", children: [_jsx("div", { className: "flex w-full items-center justify-center", children: _jsx("div", { className: "w-full", children: _jsx("div", { className: "flex aspect-[144/146] w-full flex-col items-center justify-center overflow-hidden", children: _jsx(QRCodeSVG, { value: depositAddress, size: 144, level: "M" }) }) }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-semibold leading-[18px] text-[#0b57c2]", children: "SCAN WITH" }), _jsx(CoinbaseLogo, {})] })] }), _jsxs("div", { className: "relative flex flex-1 flex-col gap-2 self-stretch border-l border-[#e4e4e7] p-6", children: [_jsx("label", { className: "text-sm font-medium leading-5 text-[#3f3f46]", children: "Deposit address:" }), _jsxs("div", { className: "relative flex w-full flex-wrap items-center gap-2", children: [_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 }), _jsx("button", { onClick: handleCopyAddress, className: "absolute bottom-0 right-0 h-4 w-4 transition-opacity hover:opacity-70", "aria-label": "Copy address", children: _jsx(Copy, { className: "h-full w-full text-[#51525c]" }) })] })] })] }), _jsx("div", { className: "mx-5 mt-4", children: _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.", _jsx("br", {}), "Tokens not accepted will not be converted."] }) }), _jsx("div", { className: "mt-4 px-5", children: _jsx(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/esm/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;