@b3dotfun/sdk 0.0.65-test.5 → 0.0.66

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

@@ -19,23 +19,19 @@ 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 { 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";
+import { AnySpendDepositUpside } from "@b3dotfun/sdk/anyspend/react/components/AnySpendDepositUpside";
 
 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);
@@ -69,10 +65,8 @@ export function B3DynamicModal() {
     "anySpendSignatureMint",
     "anySpendBondKit",
     "linkAccount",
-    "linkNewAccount",
     "avatarEditor",
-    "deposit",
-    "send",
+    "profileEditor",
   ];
 
   const freestyleTypes = [
@@ -90,7 +84,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
@@ -128,7 +122,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":
@@ -137,6 +131,8 @@ export function B3DynamicModal() {
         return <AnySpendStakeUpside {...contentType} mode="modal" />;
       case "anySpendStakeUpsideExactIn":
         return <AnySpendStakeUpsideExactIn {...contentType} mode="modal" />;
+      case "anySpendDepositUpside":
+        return <AnySpendDepositUpside {...contentType} mode="modal" />;
       case "anySpendBuySpin":
         return <AnySpendBuySpin {...contentType} mode="modal" />;
       case "anySpendSignatureMint":
@@ -145,16 +141,12 @@ 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
       default:
         return null;
@@ -173,20 +165,17 @@ 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",
+          // 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}
       >
         <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 && (
+          {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"
@@ -207,13 +196,13 @@ 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()}
         </div>
       </ModalContent>
-      {contentType?.type === "avatarEditor" && (
+      {(contentType?.type === "avatarEditor" || contentType?.type === "profileEditor") && (
         <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"