@b3dotfun/sdk 0.0.65-test.3 → 0.0.65-test.4

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

@@ -7,7 +7,10 @@ import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { Loader2, Upload, X } from "lucide-react";
-import { useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
+import type { Area } from "react-easy-crop";
+import Cropper from "react-easy-crop";
+import "react-easy-crop/react-easy-crop.css";
 import { toast } from "sonner";
 import { useActiveAccount } from "thirdweb/react";
 import { upload } from "thirdweb/storage";
@@ -17,6 +20,16 @@ import ModalHeader from "../ModalHeader/ModalHeader";
 
 const debug = debugB3React("AvatarEditor");
 
+// Helper function to create an image element from a URL
+const createImage = (url: string): Promise<HTMLImageElement> =>
+  new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener("load", () => resolve(image));
+    image.addEventListener("error", error => reject(error));
+    image.setAttribute("crossOrigin", "anonymous");
+    image.src = url;
+  });
+
 interface AvatarEditorProps {
   onSetAvatar?: () => void;
   className?: string;
@@ -33,6 +46,9 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [isSaving, setIsSaving] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { setUser, user, partnerId } = useB3();
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
@@ -50,6 +66,48 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
   const currentAvatar = validateImageUrl(rawCurrentAvatar);
   const safePreviewUrl = validateImageUrl(previewUrl);
 
+  const onCropComplete = useCallback((_croppedArea: Area, croppedAreaPixels: Area) => {
+    setCroppedAreaPixels(croppedAreaPixels);
+  }, []);
+
+  const createCroppedImage = async (imageSrc: string, pixelCrop: Area): Promise<Blob> => {
+    const image = await createImage(imageSrc);
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+
+    if (!ctx) {
+      throw new Error("Failed to get canvas context");
+    }
+
+    // Set canvas size to the crop area
+    canvas.width = pixelCrop.width;
+    canvas.height = pixelCrop.height;
+
+    // Draw the cropped image
+    ctx.drawImage(
+      image,
+      pixelCrop.x,
+      pixelCrop.y,
+      pixelCrop.width,
+      pixelCrop.height,
+      0,
+      0,
+      pixelCrop.width,
+      pixelCrop.height,
+    );
+
+    // Return as blob
+    return new Promise((resolve, reject) => {
+      canvas.toBlob(blob => {
+        if (!blob) {
+          reject(new Error("Canvas is empty"));
+          return;
+        }
+        resolve(blob);
+      }, "image/jpeg");
+    });
+  };
+
   const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file) {
@@ -87,6 +145,10 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
+    // Reset crop state
+    setCrop({ x: 0, y: 0 });
+    setZoom(1);
+    setCroppedAreaPixels(null);
   };
 
   const handleSaveChanges = async () => {
@@ -99,8 +161,20 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
     try {
       let fileToUpload: File | null = null;
 
-      // If user uploaded a new file
-      if (selectedFile) {
+      // If user uploaded a new file and cropped it
+      if (selectedFile && previewUrl && croppedAreaPixels) {
+        try {
+          const croppedBlob = await createCroppedImage(previewUrl, croppedAreaPixels);
+          const extension = selectedFile.name.split(".").pop() || "jpg";
+          fileToUpload = new File([croppedBlob], `avatar-cropped.${extension}`, { type: "image/jpeg" });
+        } catch (error) {
+          debug("Error cropping image:", error);
+          toast.error("Failed to crop image. Please try again.");
+          setIsSaving(false);
+          return;
+        }
+      } else if (selectedFile) {
+        // Fallback if no crop was made
         fileToUpload = selectedFile;
       } else if (selectedProfileType && selectedAvatar) {
         // User selected from existing profile avatars
@@ -319,7 +393,7 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
             {/* 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]"
+              className="font-inter mb-6 flex w-full items-center justify-center gap-2 rounded-xl border border-[#e4e4e7] bg-white px-4 py-3 text-sm font-semibold text-[#18181b] shadow-sm transition-colors hover:bg-[#f4f4f5]"
             >
               <Upload className="h-4 w-4" />
               Upload image
@@ -419,13 +493,56 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
               </div>
             ) : (
               <div className="mb-6 w-full">
-                <div className="aspect-square w-full overflow-hidden rounded-xl bg-[#f4f4f5]">
+                <div className="relative aspect-square w-full overflow-hidden rounded-xl bg-[#f4f4f5]">
                   {safePreviewUrl ? (
-                    <img src={safePreviewUrl} alt="Preview" className="h-full w-full object-cover" />
+                    <>
+                      <Cropper
+                        image={safePreviewUrl}
+                        crop={crop}
+                        zoom={zoom}
+                        aspect={1}
+                        onCropChange={setCrop}
+                        onCropComplete={onCropComplete}
+                        onZoomChange={setZoom}
+                        cropShape="rect"
+                        showGrid={false}
+                        style={{
+                          containerStyle: {
+                            width: "100%",
+                            height: "100%",
+                            backgroundColor: "#f4f4f5",
+                          },
+                          cropAreaStyle: {
+                            border: "2px solid #3368ef",
+                            borderRadius: "0px",
+                          },
+                        }}
+                      />
+                      <button
+                        onClick={handleRemovePreview}
+                        className="absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-[#51525c] text-white transition-colors hover:bg-[#71717a]"
+                      >
+                        <X className="h-4 w-4" />
+                      </button>
+                    </>
                   ) : (
                     <div className="bg-b3-primary-wash h-full w-full" />
                   )}
                 </div>
+                {safePreviewUrl && (
+                  <div className="mt-4 flex items-center gap-3">
+                    <label className="flex-shrink-0 text-sm font-semibold text-[#475467]">Zoom</label>
+                    <input
+                      type="range"
+                      min={1}
+                      max={3}
+                      step={0.1}
+                      value={zoom}
+                      onChange={e => setZoom(Number(e.target.value))}
+                      className="flex-1 accent-[#3368ef]"
+                    />
+                  </div>
+                )}
               </div>
             )}
           </>

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

@@ -186,7 +186,7 @@ export function B3DynamicModal() {
         <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) && (
+          {!hideCloseButton && (
             <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"

package/src/global-account/react/components/ManageAccount/HomeActions.tsx

@@ -41,7 +41,7 @@ const HomeActionButton = ({
   return (
     <Button
       className={cn(
-        "border-b3-line hover:border-b3-primary-blue shadow-xs flex h-[84px] w-full flex-col items-center justify-center gap-2 rounded-2xl border-[1.5px] bg-[#FAFAFA] hover:bg-[#FAFAFA]",
+        "border-b3-line hover:border-b3-primary-blue flex h-[84px] w-full flex-col items-center justify-center gap-2 rounded-2xl border-[1.5px] bg-[#FAFAFA] shadow-[0_0_0_1px_rgba(10,13,18,0.18)_inset,0_-2px_0_0_rgba(10,13,18,0.05)_inset,0_1px_2px_0_rgba(10,13,18,0.05)] hover:bg-[#FAFAFA]",
         customClass,
       )}
       onClick={onClick}

package/src/global-account/react/components/ManageAccount/ProfileSection.tsx

@@ -49,7 +49,12 @@ const ProfileSection = () => {
     <div className="flex items-center justify-between px-5 py-6">
       <div className="global-account-profile flex items-center gap-4">
         <div className="global-account-profile-avatar relative">
-          <IPFSMediaRenderer src={avatarSrc} alt="Profile Avatar" className="size-14 rounded-full" />
+          <IPFSMediaRenderer
+            src={avatarSrc}
+            alt="Profile Avatar"
+            className="border-b3-line border-1 bg-b3-primary-wash size-14 rounded-full border"
+          />
+
           <button
             onClick={handleEditAvatar}
             className="border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full border-4 bg-[#a0a0ab] transition-colors"

package/src/global-account/react/components/ManageAccount/SettingsContent.tsx

@@ -50,7 +50,7 @@ const SettingsContent = ({
 
   return (
     <div className="flex h-[470px] flex-col">
-      <ModalHeader title="Settings" />
+      <ModalHeader showBackButton={false} showCloseButton={false} title="Settings" />
 
       {/* Profile Section */}
       <div className="p-5">

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

@@ -3,6 +3,7 @@ import { ChevronDown, X } from "lucide-react";
 import { useModalStore } from "../../stores";
 
 const ModalHeader = ({
+  showBackButton = true,
   handleBack,
   handleClose,
   title,
@@ -11,6 +12,7 @@ const ModalHeader = ({
   className,
   showBackWord = false,
 }: {
+  showBackButton?: boolean;
   handleBack?: () => void;
   handleClose?: () => void;
   title: string;
@@ -26,21 +28,27 @@ const ModalHeader = ({
     <div
       className={cn("flex h-16 items-center justify-between border-b border-[#e4e4e7] bg-white px-5 py-3", className)}
     >
-      <button
-        onClick={handleBack || navigateBack}
-        className="flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70"
-      >
-        <ChevronDown className="h-6 w-6 rotate-90 text-[#51525c]" />
-        {showBackWord && <span className="text-sm font-medium">Back</span>}
-      </button>
+      {showBackButton ? (
+        <button
+          onClick={handleBack || navigateBack}
+          className="flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70"
+        >
+          <ChevronDown className="h-6 w-6 rotate-90 text-[#51525c]" />
+          {showBackWord && <span className="text-sm font-medium">Back</span>}
+        </button>
+      ) : (
+        <div className="w-2" />
+      )}
       <p className="font-inter text-lg font-semibold leading-7 text-[#18181b]">{title}</p>
-      {showCloseButton && (
+      {showCloseButton ? (
         <button
           onClick={handleClose || (() => setB3ModalOpen(false))}
           className="flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70"
         >
           <X className="h-6 w-6 text-[#51525c]" />
         </button>
+      ) : (
+        <div className="w-2" />
       )}
       {children}
     </div>

package/src/global-account/react/components/ui/drawer.tsx

@@ -35,7 +35,7 @@ const DrawerContent = React.forwardRef<
       <DrawerPrimitive.Content
         ref={ref}
         className={cn(
-          "bg-b3-react-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border py-6",
+          "bg-b3-react-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border py-6 pt-5",
           className,
         )}
         {...props}