@b3dotfun/sdk 0.0.35 → 0.0.36

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

@@ -12,6 +12,7 @@ import { AnySpendDepositHype } from "@b3dotfun/sdk/anyspend/react/components/Any
 import { useIsMobile, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { AvatarEditor } from "./AvatarEditor/AvatarEditor";
 import { useB3 } from "./B3Provider/useB3";
 import { LinkAccount } from "./LinkAccount/LinkAccount";
 import { ManageAccount } from "./ManageAccount/ManageAccount";
@@ -40,6 +41,7 @@ export function B3DynamicModal() {
     "anySpendSignatureMint",
     "anySpendBondKit",
     "linkAccount",
+    "avatarEditor",
   ];
 
   const freestyleTypes = [
@@ -65,6 +67,9 @@ export function B3DynamicModal() {
     isFreestyleType && "b3-modal-freestyle",
     contentType?.type === "signInWithB3" && "p-0",
     contentType?.type === "anySpend" && "md:px-6",
+    // Add specific styles for avatar editor
+    // contentType?.type === "avatarEditor_disabled" &&
+    //   "h-[90dvh] w-[90vw] bg-black p-0 overflow-y-auto overflow-x-hidden max-md:-mt-8 max-md:rounded-t-xl",
   );
 
   debug("contentType", contentType);
@@ -102,6 +107,8 @@ export function B3DynamicModal() {
         return <LinkAccount {...contentType} />;
       case "anySpendDepositHype":
         return <AnySpendDepositHype {...contentType} mode="modal" />;
+      case "avatarEditor":
+        return <AvatarEditor onSetAvatar={contentType.onSuccess} />;
       // Add other modal types here
       default:
         return null;
@@ -120,8 +127,10 @@ export function B3DynamicModal() {
           contentClass,
           "rounded-2xl bg-white shadow-xl dark:bg-gray-900",
           "border border-gray-200 dark:border-gray-800",
-          "mx-auto w-full max-w-md",
-          "sm:max-w-lg sm:rounded-b-none",
+          // Remove default width classes for avatar editor
+          contentType?.type === "avatarEditor"
+            ? "!w-[90vw] !max-w-none" // Use !important to override default styles
+            : "mx-auto w-full max-w-md sm:max-w-lg",
         )}
         hideCloseButton={hideCloseButton}
       >
@@ -155,6 +164,22 @@ export function B3DynamicModal() {
           {renderContent()}
         </div>
       </ModalContent>
+      {contentType?.type === "avatarEditor" && (
+        <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"
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M18 6L6 18M6 6L18 18"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      )}
     </ModalComponent>
   );
 }

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

@@ -1,6 +1,7 @@
+import app from "@b3dotfun/sdk/global-account/app";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
-import { Loader2 } from "lucide-react";
+import { Loader2, Mail, Phone } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { useLinkProfile, useProfiles } from "thirdweb/react";
@@ -8,8 +9,12 @@ import { preAuthenticate } from "thirdweb/wallets";
 import { LinkAccountModalProps, useModalStore } from "../../stores/useModalStore";
 import { getProfileDisplayInfo } from "../../utils/profileDisplay";
 import { useB3 } from "../B3Provider/useB3";
+import { AppleIcon } from "../icons/AppleIcon";
+import { DiscordIcon } from "../icons/DiscordIcon";
+import { FarcasterIcon } from "../icons/FarcasterIcon";
+import { GoogleIcon } from "../icons/GoogleIcon";
+import { XIcon } from "../icons/XIcon";
 import { Button } from "../ui/button";
-import app from "@b3dotfun/sdk/global-account/app";
 type OTPStrategy = "email" | "phone";
 type SocialStrategy = "google" | "x" | "discord" | "apple" | "farcaster";
 type Strategy = OTPStrategy | SocialStrategy;
@@ -18,17 +23,22 @@ interface AuthMethod {
   id: Strategy;
   label: string;
   enabled: boolean;
-  icon?: string;
+  icon: React.ReactNode;
 }
 
 const AUTH_METHODS: AuthMethod[] = [
-  { id: "email", label: "Email", enabled: true },
-  { id: "phone", label: "Phone", enabled: true },
-  { id: "google", label: "Google", enabled: true },
-  { id: "x", label: "X (Twitter)", enabled: true },
-  { id: "discord", label: "Discord", enabled: true },
-  { id: "apple", label: "Apple", enabled: true },
-  { id: "farcaster", label: "Farcaster", enabled: true },
+  { id: "email", label: "Email", enabled: true, icon: <Mail className="text-b3-primary-blue size-6" /> },
+  { id: "phone", label: "Phone", enabled: true, icon: <Phone className="text-b3-primary-blue size-6" /> },
+  { id: "google", label: "Google", enabled: true, icon: <GoogleIcon className="size-6" /> },
+  { id: "x", label: "X (Twitter)", enabled: true, icon: <XIcon className="size-6" /> },
+  { id: "discord", label: "Discord", enabled: true, icon: <DiscordIcon className="size-6" /> },
+  { id: "apple", label: "Apple", enabled: true, icon: <AppleIcon className="size-6" /> },
+  {
+    id: "farcaster",
+    label: "Farcaster",
+    enabled: true,
+    icon: <FarcasterIcon className="size-6" />,
+  },
 ];
 
 export function LinkAccount({
@@ -37,7 +47,8 @@ export function LinkAccount({
   onClose,
   chain,
   partnerId,
-}: LinkAccountModalProps) {
+  className,
+}: LinkAccountModalProps & { className?: string }) {
   const { isLinking, linkingMethod, setLinkingState, navigateBack, setB3ModalContentType } = useModalStore();
   const [selectedMethod, setSelectedMethod] = useState<Strategy | null>(null);
   const [email, setEmail] = useState("");
@@ -288,9 +299,9 @@ export function LinkAccount({
   }
 
   return (
-    <div className="space-y-6 p-6">
-      <div className="flex items-center justify-between">
-        <h2 className="text-b3-grey font-neue-montreal-semibold text-2xl">Link New Account</h2>
+    <div className={`b3-link-account space-y-6 p-6 ${className || ""}`} data-testid="link-account">
+      <div className="b3-link-account-header flex items-center justify-between">
+        <h2 className="b3-link-account-title text-b3-grey font-neue-montreal-semibold text-2xl">Link New Account</h2>
         {selectedMethod && (
           <Button variant="ghost" className="text-b3-grey hover:text-b3-grey/80" onClick={handleBack}>
             Backs
@@ -299,11 +310,13 @@ export function LinkAccount({
       </div>
 
       {!selectedMethod ? (
-        <div className="grid gap-3">
+        <div className="b3-link-account-methods grid gap-3">
           {availableAuthMethods.map(method => (
             <Button
               key={method.id}
-              className="bg-b3-primary-wash hover:bg-b3-primary-wash/70 text-b3-grey font-neue-montreal-semibold h-16 justify-start px-6 text-lg"
+              variant="outline"
+              className="b3-link-account-method-button border-b3-line hover:border-b3-primary-blue/30 hover:bg-b3-primary-blue/5 text-b3-grey font-neue-montreal-medium h-14 justify-start bg-transparent px-6 text-base transition-all duration-200"
+              data-method={method.id}
               onClick={() => {
                 if (method.id === "email" || method.id === "phone") {
                   setSelectedMethod(method.id);
@@ -313,7 +326,16 @@ export function LinkAccount({
               }}
               disabled={linkingMethod === method.id}
             >
-              {isLinking && linkingMethod === method.id ? <Loader2 className="animate-spin" /> : method.label}
+              {isLinking && linkingMethod === method.id ? (
+                <Loader2 className="h-5 w-5 animate-spin" />
+              ) : (
+                <div className="b3-link-account-method-content flex items-center gap-4">
+                  <div className="b3-link-account-method-icon flex items-center justify-center rounded-full">
+                    {method.icon}
+                  </div>
+                  <span className="b3-link-account-method-label font-medium">{method.label}</span>
+                </div>
+              )}
             </Button>
           ))}
           {availableAuthMethods.length === 0 && (
@@ -323,7 +345,7 @@ export function LinkAccount({
           )}
         </div>
       ) : (
-        <div className="space-y-4">
+        <div className="b3-link-account-form space-y-4">
           {selectedMethod === "email" && (
             <div className="space-y-2">
               <label className="text-b3-grey font-neue-montreal-medium text-sm">Email Address</label>

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

@@ -2,6 +2,7 @@ import {
   Button,
   CopyToClipboard,
   useAuthentication,
+  useB3,
   useB3BalanceFromAddresses,
   useModalStore,
   useNativeBalance,
@@ -11,6 +12,7 @@ import { BankIcon } from "@b3dotfun/sdk/global-account/react/components/icons/Ba
 import { SignOutIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SignOutIcon";
 import { SwapIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SwapIcon";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
+import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
 import { Loader2, Pencil } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
@@ -22,6 +24,8 @@ import { TokenBalanceRow } from "./TokenBalanceRow";
 interface BalanceContentProps {
   onLogout?: () => void;
   partnerId: string;
+  showDeposit?: boolean;
+  showSwap?: boolean;
 }
 
 function centerTruncate(str: string, length = 4) {
@@ -29,19 +33,34 @@ function centerTruncate(str: string, length = 4) {
   return `${str.slice(0, length)}...${str.slice(-length)}`;
 }
 
-export function BalanceContent({ onLogout, partnerId }: BalanceContentProps) {
+export function BalanceContent({ onLogout, partnerId, showDeposit = true, showSwap = true }: BalanceContentProps) {
   const account = useActiveAccount();
   const { address: eoaAddress, info: eoaInfo } = useFirstEOA();
   const { data: profile } = useProfile({
     address: eoaAddress || account?.address,
     fresh: true,
   });
-  const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
+  const { user } = useB3();
+  const { setB3ModalOpen, setB3ModalContentType, navigateBack } = useModalStore();
   const { logout } = useAuthentication(partnerId);
   const [logoutLoading, setLogoutLoading] = useState(false);
   const [openAccordions, setOpenAccordions] = useState<string[]>([]);
   const hasExpandedRef = useRef(false);
 
+  const avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profile?.avatar;
+
+  const handleEditAvatar = () => {
+    setB3ModalOpen(true);
+    setB3ModalContentType({
+      type: "avatarEditor",
+      showBackButton: true,
+      onSuccess: () => {
+        // navigate back on success
+        navigateBack();
+      },
+    });
+  };
+
   console.log("eoaAddress", eoaAddress);
   console.log("account?.address", account?.address);
 
@@ -98,14 +117,17 @@ export function BalanceContent({ onLogout, partnerId }: BalanceContentProps) {
       <div className="flex items-center justify-between">
         <div className="global-account-profile flex items-center gap-4">
           <div className="global-account-profile-avatar relative">
-            {profile?.avatar ? (
-              <img src={profile?.avatar} alt="Profile" className="size-24 rounded-full" />
+            {avatarUrl ? (
+              <img src={avatarUrl} alt="Profile" className="size-24 rounded-full" />
             ) : (
               <div className="bg-b3-primary-wash size-24 rounded-full" />
             )}
-            <div className="bg-b3-grey border-b3-background absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4">
+            <button
+              onClick={handleEditAvatar}
+              className="bg-b3-grey border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4 transition-colors"
+            >
               <Pencil size={16} className="text-b3-background" />
-            </div>
+            </button>
           </div>
           <div className="global-account-profile-info">
             <h2 className="text-b3-grey text-xl font-semibold">
@@ -122,35 +144,41 @@ export function BalanceContent({ onLogout, partnerId }: BalanceContentProps) {
       </div>
 
       {/* Quick Actions */}
-      <div className="grid grid-cols-2 gap-3">
-        <Button
-          className="manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl"
-          onClick={() => {
-            setB3ModalOpen(true);
-            setB3ModalContentType({
-              type: "anySpend",
-              defaultActiveTab: "fiat",
-              showBackButton: true,
-            });
-          }}
-        >
-          <BankIcon size={24} className="text-b3-primary-blue shrink-0" />
-          <div className="text-b3-grey font-neue-montreal-semibold">Deposit</div>
-        </Button>
-        <Button
-          className="manage-account-swap bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex h-[84px] w-full flex-col items-start gap-2 rounded-2xl"
-          onClick={() => {
-            setB3ModalOpen(true);
-            setB3ModalContentType({
-              type: "anySpend",
-              showBackButton: true,
-            });
-          }}
-        >
-          <SwapIcon size={24} className="text-b3-primary-blue" />
-          <div className="text-b3-grey font-neue-montreal-semibold">Swap</div>
-        </Button>
-      </div>
+      {(showDeposit || showSwap) && (
+        <div className="grid grid-cols-2 gap-3">
+          {showDeposit && (
+            <Button
+              className="manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl"
+              onClick={() => {
+                setB3ModalOpen(true);
+                setB3ModalContentType({
+                  type: "anySpend",
+                  defaultActiveTab: "fiat",
+                  showBackButton: true,
+                });
+              }}
+            >
+              <BankIcon size={24} className="text-b3-primary-blue shrink-0" />
+              <div className="text-b3-grey font-neue-montreal-semibold">Deposit</div>
+            </Button>
+          )}
+          {showSwap && (
+            <Button
+              className="manage-account-swap bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex h-[84px] w-full flex-col items-start gap-2 rounded-2xl"
+              onClick={() => {
+                setB3ModalOpen(true);
+                setB3ModalContentType({
+                  type: "anySpend",
+                  showBackButton: true,
+                });
+              }}
+            >
+              <SwapIcon size={24} className="text-b3-primary-blue" />
+              <div className="text-b3-grey font-neue-montreal-semibold">Swap</div>
+            </Button>
+          )}
+        </div>
+      )}
 
       {/* Balance Sections with Accordions */}
       <Accordion type="multiple" value={openAccordions} onValueChange={setOpenAccordions} className="space-y-2">