@b3dotfun/sdk 0.0.65-test.1 → 0.0.65

package/src/global-account/react/components/AvatarEditor/AvatarEditor.tsx

@@ -4,16 +4,12 @@ import app from "@b3dotfun/sdk/global-account/app";
 import { Button, useB3, useProfile } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
-import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
-import { Loader2, Upload, X } from "lucide-react";
+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";
-import { useModalStore } from "../../stores";
-import ModalHeader from "../ModalHeader/ModalHeader";
 
 const debug = debugB3React("AvatarEditor");
 
@@ -22,23 +18,13 @@ interface AvatarEditorProps {
   className?: string;
 }
 
-type ViewStep = "select" | "upload";
-
 export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
-  const [viewStep, setViewStep] = useState<ViewStep>("select");
-  const [selectedAvatar, setSelectedAvatar] = useState<string | null>(null);
-  const [hoveredProfile, setHoveredProfile] = useState<string | null>(null);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [isUploading, setIsUploading] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
-  const [isDragging, setIsDragging] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  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 { setUser } = useB3();
 
   const account = useActiveAccount();
   const { data: profile, refetch: refreshProfile } = useProfile({
@@ -46,11 +32,9 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
     fresh: true,
   });
 
-  const currentAvatar = user?.avatar
-    ? getIpfsUrl(user?.avatar)
-    : profile?.avatar
-      ? getIpfsUrl(profile.avatar)
-      : undefined;
+  // Thirdweb upload function
+
+  const hasAvatar = profile?.avatar;
 
   const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
@@ -72,12 +56,10 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
       // Create preview URL
       const url = URL.createObjectURL(file);
       setPreviewUrl(url);
-      setSelectedAvatar(url);
     }
   };
 
-  const handleRemovePreview = () => {
-    setSelectedAvatar(currentAvatar || null);
+  const handleRemoveFile = () => {
     setSelectedFile(null);
     if (previewUrl) {
       URL.revokeObjectURL(previewUrl);
@@ -88,323 +70,164 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
     }
   };
 
-  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 {
-      // 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);
+      debug("Starting upload to IPFS", selectedFile);
 
-        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);
+      // Upload to IPFS using Thirdweb
+      const ipfsUrl = await upload({
+        client,
+        files: [selectedFile],
+      });
 
-          // Set preference for this profile type
-          await setPreference(account.address, selectedProfile.type, account.address, async (message: string) => {
-            // Sign the message using the active account
-            const signature = await account.signMessage({ message });
-            return signature;
-          });
-
-          toast.success("Avatar updated successfully!");
-        }
-      }
+      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 as any)?.chain,
-        partnerId: partnerId,
-      });
-    }
-  };
-
-  const handleProfileAvatarSelect = (avatarUrl: string) => {
-    setSelectedAvatar(avatarUrl);
-  };
-
-  const handleUploadImageClick = () => {
-    setViewStep("upload");
-  };
-
-  const handleOpenFilePicker = () => {
+  const handleFileInputClick = () => {
     fileInputRef.current?.click();
   };
 
-  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(true);
-  };
-
-  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(false);
-  };
-
-  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
-    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 as any)?.chain,
-      partnerId: partnerId,
-    });
-  };
-
   const isLoading = isUploading || isSaving;
 
-  // 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 (
-    <div className={cn("flex w-full max-w-md flex-col bg-white", className)}>
-      {/* Header */}
-      {viewStep === "upload" && <ModalHeader title="Upload Image" />}
-
-      {/* Content */}
-      <div className="flex flex-col items-center p-6">
-        {viewStep === "select" ? (
-          <>
-            {/* Avatar Preview */}
-            <div className="relative mb-6">
-              <div className="h-32 w-32 overflow-hidden rounded-full">
-                <img
-                  src={selectedAvatar || currentAvatar || "https://via.placeholder.com/128"}
-                  alt="Avatar preview"
-                  className="h-full w-full object-cover"
-                />
-              </div>
-              {selectedAvatar && (
-                <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]"
-                >
-                  <X className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-
-            {/* Upload Image Button */}
-            <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]"
-            >
-              <Upload className="h-4 w-4" />
-              Upload image
-            </button>
-
-            {/* Select Profile Image Section */}
-            <div className="w-full">
-              <h3 className="mb-2 text-base font-semibold text-[#18181b]">Select your profile image</h3>
-              <p className="mb-4 text-sm font-semibold text-[#475467]">
-                Pick an avatar from your linked profiles, ENS or upload a new one.
-              </p>
-
-              {/* Profile Avatars */}
-              <div className="mb-4 flex gap-3">
-                {profileAvatars.map((profileAvatar, index) => (
-                  <div
-                    key={index}
-                    className="relative"
-                    onMouseEnter={() => setHoveredProfile(profileAvatar.type)}
-                    onMouseLeave={() => setHoveredProfile(null)}
-                  >
-                    <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]",
-                      )}
-                    >
-                      <img
-                        src={profileAvatar.avatar}
-                        alt={`${profileAvatar.type} avatar`}
-                        className="h-full w-full object-cover"
-                      />
-                    </button>
+    <div className={cn("flex flex-col items-center justify-center space-y-6 p-8", className)}>
+      <div className="space-y-2 text-center">
+        <h2 className="font-neue-montreal-semibold text-b3-grey text-2xl">
+          {hasAvatar ? "Update Your Avatar" : "Set Your Avatar"}
+        </h2>
+        <p className="text-b3-foreground-muted font-neue-montreal-medium">
+          Upload an image to personalize your profile
+        </p>
+      </div>
 
-                    {/* Tooltip */}
-                    {hoveredProfile === profileAvatar.type && (
-                      <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">
-                        {profileAvatar.name}
-                      </div>
-                    )}
+      {/* Current Avatar Display */}
+      {hasAvatar && !previewUrl && (
+        <div className="relative">
+          <div className="border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4">
+            <img src={profile.avatar} alt="Current avatar" className="h-full w-full object-cover" />
+          </div>
+        </div>
+      )}
+
+      {/* File Upload Area */}
+      <div className="w-full max-w-md">
+        {!selectedFile ? (
+          <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"
+          >
+            <Upload className="text-b3-grey mx-auto mb-4 h-12 w-12" />
+            <p className="text-b3-grey font-neue-montreal-semibold mb-2">Click to select an image</p>
+            <p className="text-b3-foreground-muted font-neue-montreal-medium text-sm">PNG, JPG, or GIF up to 5MB</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {/* Preview */}
+            <div className="relative">
+              <div className="border-b3-primary-blue mx-auto h-32 w-32 overflow-hidden rounded-full border-4">
+                {previewUrl ? (
+                  <img src={previewUrl} alt="Preview" className="h-full w-full object-cover" />
+                ) : (
+                  <div className="bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full">
+                    <p className="text-b3-grey font-neue-montreal-semibold text-sm">No file selected</p>
                   </div>
-                ))}
+                )}
               </div>
-
-              {/* Link More Account */}
               <button
-                onClick={handleLinkMoreAccount}
-                className="font-inter flex items-center gap-2 text-sm font-semibold text-[#3368ef] hover:underline"
+                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}
               >
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-4 w-4"
-                >
-                  <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"
-                  />
-                </svg>
-                Link more account
+                <X size={16} />
               </button>
             </div>
-          </>
-        ) : (
-          <>
-            {/* Upload View */}
-            {!selectedFile ? (
-              <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]",
-                )}
-              >
-                <p className="font-inter mb-1 text-sm">
-                  <span className="font-semibold text-[#3368ef]">Click to upload</span>
-                  <span className="text-[#71717a]"> or drag and drop</span>
-                </p>
-                <p className="text-xs text-[#71717a]">PNG, JPG or GIF (up to 5MB)</p>
-              </div>
-            ) : (
-              <div className="mb-6 w-full">
-                <div className="aspect-square w-full overflow-hidden rounded-xl bg-[#f4f4f5]">
-                  <img src={previewUrl || ""} alt="Preview" className="h-full w-full object-cover" />
-                </div>
-              </div>
-            )}
-          </>
+
+            {/* File Info */}
+            <div className="space-y-1 text-center">
+              <p className="text-b3-grey font-neue-montreal-semibold text-sm">{selectedFile.name}</p>
+              <p className="text-b3-foreground-muted font-neue-montreal-medium text-xs">
+                {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
+              </p>
+            </div>
+          </div>
         )}
 
         {/* Hidden file input */}
         <input ref={fileInputRef} type="file" accept="image/*" onChange={handleFileSelect} className="hidden" />
       </div>
 
-      {/* Footer Buttons */}
-      <div className="font-inter flex gap-3 border-t border-[#e4e4e7] p-6 font-semibold">
-        <Button
-          onClick={handleCancel}
-          variant="outline"
-          disabled={isLoading}
-          className="flex-1 rounded-xl border-[#e4e4e7] text-[#18181b] hover:bg-[#f4f4f5]"
-        >
-          Cancel
-        </Button>
-        <Button
-          onClick={handleSaveChanges}
-          disabled={isLoading || !selectedAvatar}
-          className="flex-1 rounded-xl bg-[#3368ef] text-white hover:bg-[#2952cc]"
-        >
-          {isLoading ? (
-            <>
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              Saving...
-            </>
-          ) : (
-            "Save changes"
-          )}
+      {/* Action Buttons */}
+      <div className="flex w-full max-w-md gap-3">
+        {selectedFile && (
+          <Button
+            onClick={handleUpload}
+            disabled={isLoading}
+            className="bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white"
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {isUploading ? "Uploading..." : "Saving..."}
+              </>
+            ) : (
+              <>
+                <Check className="mr-2 h-4 w-4" />
+                {hasAvatar ? "Update Avatar" : "Set Avatar"}
+              </>
+            )}
+          </Button>
+        )}
+
+        <Button variant="outline" onClick={handleFileInputClick} disabled={isLoading} className="flex-1">
+          <Upload className="mr-2 h-4 w-4" />
+          {selectedFile ? "Change Image" : "Select Image"}
         </Button>
       </div>
+
+      {/* Help Text */}
+      <div className="text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs">
+        <p>
+          Your avatar will be uploaded to IPFS and stored securely. Make sure you have the rights to use this image.
+        </p>
+      </div>
     </div>
   );
 }

package/src/global-account/react/components/B3DynamicModal.tsx

@@ -19,13 +19,10 @@ import { useEffect, useRef } from "react";
 import { useSetActiveWallet } from "thirdweb/react";
 import { AvatarEditor } from "./AvatarEditor/AvatarEditor";
 import { useB3 } from "./B3Provider/useB3";
-import { Deposit } from "./Deposit/Deposit";
 import { LinkAccount } from "./LinkAccount/LinkAccount";
-import { LinkNewAccount } from "./LinkAccount/LinkNewAccount";
-import { ManageAccount } from "./ManageAccount/ManageAccount";
 import { ProfileEditor } from "./ProfileEditor/ProfileEditor";
+import { ManageAccount } from "./ManageAccount/ManageAccount";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
-import { Send } from "./Send/Send";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./ui/dialog";
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./ui/drawer";
@@ -33,10 +30,7 @@ import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./ui/draw
 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);
@@ -70,10 +64,7 @@ export function B3DynamicModal() {
     "anySpendSignatureMint",
     "anySpendBondKit",
     "linkAccount",
-    "linkNewAccount",
     "avatarEditor",
-    "deposit",
-    "send",
     "profileEditor",
   ];
 
@@ -92,7 +83,7 @@ export function B3DynamicModal() {
 
   // Check if current content type is in freestyle types
   const isFreestyleType = freestyleTypes.includes(contentType?.type as string);
-  const hideCloseButton = true;
+  const hideCloseButton = isFreestyleType;
 
   // Build content class using cn utility
   // eslint-disable-next-line tailwindcss/no-custom-classname
@@ -130,7 +121,7 @@ export function B3DynamicModal() {
       case "anySpendFundTournament":
         return <AnySpendTournament {...contentType} mode="modal" action="fund" />;
       case "anySpendOrderHistory":
-        return <OrderHistory {...contentType} mode="modal" />;
+        return <OrderHistory onBack={() => {}} mode="modal" />;
       case "anySpendStakeB3":
         return <AnySpendStakeB3 {...contentType} mode="modal" />;
       case "anySpendStakeB3ExactIn":
@@ -147,16 +138,10 @@ export function B3DynamicModal() {
         return <AnySpendBondKit {...contentType} />;
       case "linkAccount":
         return <LinkAccount {...contentType} />;
-      case "linkNewAccount":
-        return <LinkNewAccount {...contentType} />;
       case "anySpendDepositHype":
         return <AnySpendDepositHype {...contentType} mode="modal" />;
       case "avatarEditor":
         return <AvatarEditor onSetAvatar={contentType.onSuccess} />;
-      case "deposit":
-        return <Deposit />;
-      case "send":
-        return <Send {...contentType} />;
       case "profileEditor":
         return <ProfileEditor onSuccess={contentType.onSuccess} />;
       // Add other modal types here
@@ -177,12 +162,6 @@ export function B3DynamicModal() {
           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
@@ -192,9 +171,8 @@ export function B3DynamicModal() {
       >
         <ModalTitle className="sr-only hidden">{contentType?.type || "Modal"}</ModalTitle>
         <ModalDescription className="sr-only hidden">{contentType?.type || "Modal Body"}</ModalDescription>
-
         <div className={cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]")}>
-          {(!hideCloseButton || contentType?.showBackButton) && (
+          {history.length > 0 && contentType?.showBackButton && (
             <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"
@@ -215,7 +193,7 @@ export function B3DynamicModal() {
                   strokeLinejoin="round"
                 />
               </svg>
-              <span className="font-inter text-sm font-semibold">Back</span>
+              <span className="text-sm font-medium">Back</span>
             </button>
           )}
           {renderContent()}