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

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/LinkAccount/LinkAccount.tsx

@@ -249,7 +249,7 @@ export const LinkAccount = ({
         <Button
           onClick={handleOpenLinkModal}
           disabled={isLinking}
-          className="bg-b3-primary-blue hover:bg-b3-primary-blue/90 border-white/12 group relative h-12 w-full rounded-xl border-2 px-[18px] 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)] transition-all"
+          className="b3-modal-link-new-account-button bg-b3-primary-blue hover:bg-b3-primary-blue/90 border-white/12 group relative h-12 w-full rounded-xl border-2 px-[18px] 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)] transition-all"
         >
           <div className="flex items-center justify-center gap-1.5">
             <svg

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

@@ -44,7 +44,7 @@ const BottomNavigation = () => {
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
 
   return (
-    <div className="sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]">
+    <div className="b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]">
       <TabsListPrimitive className="flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent">
         <TabTriggerPrimitive
           value="home"

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

@@ -58,9 +58,9 @@ function WalletItem({ wallet, isActive, onClick }: { wallet: Wallet; isActive: b
 
   return (
     <div
-      className={`box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors ${
-        isActive ? "bg-[#F4F4F5]" : "hover:bg-b3-line/50"
-      }`}
+      className={`b3-modal-wallet-item ${
+        isActive ? "b3-modal-wallet-item-active bg-[#F4F4F5]" : "hover:bg-b3-line/50"
+      } box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors`}
       onClick={onClick}
     >
       <div className="relative size-10 shrink-0 overflow-clip rounded-full">
@@ -137,11 +137,11 @@ export function Header({ onLogout }: { onLogout?: () => void }) {
       type="single"
       collapsible
       value={isExpanded ? "wallet-switcher" : ""}
-      className="bg-b3-background border-b3-line relative border-b"
+      className="b3-modal-wallet-switcher bg-b3-background border-b3-line relative border-b"
       onValueChange={(value: string) => setIsExpanded(value === "wallet-switcher")}
     >
       <AccordionPrimitive.Item value="wallet-switcher" className="border-none">
-        <AccordionPrimitive.Trigger className="group flex w-full items-center justify-between border-none bg-transparent px-5 py-3 outline-none">
+        <AccordionPrimitive.Trigger className="b3-modal-wallet-switcher-trigger group flex w-full items-center justify-between border-none bg-transparent px-5 py-3 outline-none">
           <div className="flex items-center gap-2">
             <div className="relative size-10 shrink-0 overflow-clip rounded-full">
               {isActiveGlobalAccount ? (
@@ -166,7 +166,7 @@ export function Header({ onLogout }: { onLogout?: () => void }) {
               </div>
             </div>
           </div>
-          <ChevronDownIcon className="text-b3-grey transition-transform duration-200 group-data-[state=open]:rotate-180" />
+          <ChevronDownIcon className="b3-modal-wallet-switcher-chevron text-b3-grey transition-transform duration-200 group-data-[state=open]:rotate-180" />
         </AccordionPrimitive.Trigger>
 
         <AnimatePresence>
@@ -177,7 +177,7 @@ export function Header({ onLogout }: { onLogout?: () => void }) {
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: -10 }}
                 transition={{ duration: 0.2, ease: "easeInOut" }}
-                className="flex flex-col gap-3 rounded-bl-3xl rounded-br-3xl bg-white px-2 pb-5 pt-3 shadow-[0px_32px_64px_-12px_rgba(10,13,18,0.14),0px_5px_5px_-2.5px_rgba(10,13,18,0.04)]"
+                className="b3-modal-wallet-switcher-content flex flex-col gap-3 rounded-bl-3xl rounded-br-3xl bg-white px-2 pb-5 pt-3 shadow-[0px_32px_64px_-12px_rgba(10,13,18,0.14),0px_5px_5px_-2.5px_rgba(10,13,18,0.04)]"
               >
                 {/* Connected Wallets */}
                 <div className="flex flex-col gap-3">
@@ -192,7 +192,7 @@ export function Header({ onLogout }: { onLogout?: () => void }) {
 
                   {/* Link Another Wallet */}
                   <div
-                    className="hover:bg-b3-line/50 box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors"
+                    className="b3-modal-link-another-wallet hover:bg-b3-line/50 box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors"
                     onClick={handleLinkWallet}
                   >
                     <div className="bg-b3-line flex size-10 shrink-0 items-center justify-center rounded-full">
@@ -206,7 +206,7 @@ export function Header({ onLogout }: { onLogout?: () => void }) {
 
                 {/* Sign Out Button */}
                 <button
-                  className="border-b3-line hover:bg-b3-line bg-b3-background flex items-center justify-center gap-1.5 rounded-xl border border-solid p-2.5 transition-colors"
+                  className="b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background flex items-center justify-center gap-1.5 rounded-xl border border-solid p-2.5 transition-colors"
                   onClick={onLogoutEnhanced}
                   disabled={logoutLoading}
                   style={{

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}
@@ -57,7 +57,7 @@ const HomeActions = ({ showDeposit, showSwap }: { showDeposit: boolean; showSwap
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
 
   return (
-    <div className="border-b3-line grid grid-cols-4 gap-3 border-b px-5 pb-6">
+    <div className="b3-modal-home-actions border-b3-line grid grid-cols-4 gap-3 border-b px-5 pb-6">
       {showDeposit && (
         <HomeActionButton
           customClass="manage-account-deposit"

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

@@ -18,9 +18,9 @@ export function HomeContent({ showDeposit = false, showSwap = true }: HomeConten
         <ProfileSection />
 
         <HomeActions showDeposit={showDeposit} showSwap={showSwap} />
-        <div className="space-y-2 p-5">
+        <div className="b3-modal-balance-content space-y-2 p-5">
           <Tabs defaultValue={"balance"}>
-            <TabsList>
+            <TabsList className="b3-modal-balance-tabs-list">
               <TabTrigger value="balance" className="font-neue-montreal-semibold p-0 pr-3">
                 Balance
               </TabTrigger>

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"
@@ -62,7 +67,9 @@ const ProfileSection = () => {
             <div className="text-b3-foreground-muted"> $</div>
             <div className="text-[30px]">{formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 })}</div>
           </h2>
-          <div className="font-neue-montreal-semibold text-base leading-none text-[#0B57C2]">{currentUsername}</div>
+          <div className="b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]">
+            {currentUsername}
+          </div>
         </div>
       </div>
     </div>

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

@@ -50,11 +50,11 @@ 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">
-        <div className="flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4">
+        <div className="b3-modal-settings-profile-card flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4">
           <SettingsProfileCard />
         </div>
       </div>

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

@@ -12,7 +12,7 @@ const SettingsMenuItem = ({ icon, title, subtitle, onClick }: SettingsMenuItemPr
   return (
     <button
       onClick={onClick}
-      className="flex w-full items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#f4f4f5]"
+      className="b3-modal-settings-menu-item flex w-full items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#f4f4f5]"
     >
       <div className="flex size-10 items-center justify-center rounded-full bg-[#f4f4f5]">{icon}</div>
       <div className="flex flex-1 flex-col items-start gap-1 text-left">

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

@@ -162,7 +162,9 @@ const SettingsProfileCard = () => {
           /* Display mode */
           <>
             <div className="flex items-center gap-1">
-              <p className="font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]">{currentUsername}</p>
+              <p className="b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]">
+                {currentUsername}
+              </p>
             </div>
             <button
               onClick={handleEditUsername}

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

@@ -1,8 +1,9 @@
 import { cn } from "@b3dotfun/sdk/shared/utils";
-import { ChevronDown, X } from "lucide-react";
+import { ChevronLeft, 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;
@@ -24,23 +26,32 @@ const ModalHeader = ({
 
   return (
     <div
-      className={cn("flex h-16 items-center justify-between border-b border-[#e4e4e7] bg-white px-5 py-3", className)}
+      className={cn(
+        "b3-modal-header 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"
+        >
+          <ChevronLeft className="h-6 w-6 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/dialog.tsx

@@ -60,7 +60,7 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
             )}
             {...props}
           >
-            <div className="flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)]">
+            <div className="modal-inner-content flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)]">
               {children}
               {!hideCloseButton && (
                 <DialogPrimitive.Close
@@ -75,7 +75,7 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
               )}
             </div>
             {/* Global Account Footer */}
-            <div className="flex items-center justify-center gap-1.5 pt-[10px]">
+            <div className="b3-modal-ga-branding flex items-center justify-center gap-1.5 pt-[10px]">
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M2 4.66667C2 3.19391 3.19391 2 4.66667 2H11.3333C12.8061 2 14 3.19391 14 4.66667V11.3333C14 12.8061 12.8061 14 11.3333 14H4.66667C3.19391 14 2 12.8061 2 11.3333V4.66667Z"

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}