@b3dotfun/sdk 0.0.35-alpha.2 → 0.0.35-alpha.4

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

@@ -42,6 +42,8 @@ interface ManageAccountProps {
   chain: Chain;
   partnerId: string;
   containerClassName?: string;
+  showSwap?: boolean;
+  showDeposit?: boolean;
 }
 
 export function ManageAccount({
@@ -50,6 +52,8 @@ export function ManageAccount({
   onDeposit: _onDeposit,
   chain,
   partnerId,
+  showSwap,
+  showDeposit,
 }: ManageAccountProps) {
   const [revokingSignerId, setRevokingSignerId] = useState<string | null>(null);
   const account = useActiveAccount();
@@ -89,7 +93,6 @@ export function ManageAccount({
     setB3ModalOpen(false);
     setLogoutLoading(false);
   };
-
   const AppsContent = () => (
     <div className="space-y-4">
       {signers?.map((signer: TWSignerWithMetadata) => (
@@ -234,53 +237,64 @@ export function ManageAccount({
     };
 
     return (
-      <div className="space-y-8">
+      <div className="linked-accounts-settings space-y-8">
         {/* Linked Accounts Section */}
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <h3 className="text-b3-grey font-neue-montreal-semibold text-xl">Linked Accounts</h3>
+        <div className="linked-accounts-section space-y-4">
+          <div className="linked-accounts-header flex items-center justify-between">
+            <h3 className="text-b3-grey font-neue-montreal-semibold linked-accounts-settings-title text-xl">
+              Linked Accounts
+            </h3>
             <Button
-              className="bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2"
+              className="linked-accounts-settings-button linked-accounts-link-button bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2"
               onClick={handleOpenLinkModal}
               disabled={isLinking}
             >
               {isLinking ? (
-                <Loader2 className="text-b3-primary-blue animate-spin" size={16} />
+                <Loader2 className="linked-accounts-link-loading text-b3-primary-blue animate-spin" size={16} />
               ) : (
-                <LinkIcon size={16} className="text-b3-primary-blue" />
+                <LinkIcon size={16} className="linked-accounts-link-icon text-b3-primary-blue" />
               )}
-              <span className="text-b3-grey font-neue-montreal-semibold">
+              <span className="linked-accounts-link-text text-b3-grey font-neue-montreal-semibold">
                 {isLinking ? "Linking..." : "Link New Account"}
               </span>
             </Button>
           </div>
 
           {isLoadingProfiles ? (
-            <div className="flex justify-center py-8">
+            <div className="linked-accounts-loading flex justify-center py-8">
               <Loader2 className="text-b3-grey animate-spin" />
             </div>
           ) : profiles.length > 0 ? (
-            <div className="space-y-4">
+            <div className="linked-accounts-list space-y-4">
               {profiles.map(profile => (
-                <div key={profile.title} className="bg-b3-line flex items-center justify-between rounded-xl p-4">
-                  <div className="flex items-center gap-3">
+                <div
+                  key={profile.title}
+                  className="linked-account-item bg-b3-line flex items-center justify-between rounded-xl p-4"
+                >
+                  <div className="linked-account-info flex items-center gap-3">
                     {profile.imageUrl ? (
-                      <img src={profile.imageUrl} alt={profile.title} className="size-10 rounded-full" />
+                      <img
+                        src={profile.imageUrl}
+                        alt={profile.title}
+                        className="linked-account-avatar linked-account-avatar-image size-10 rounded-full"
+                      />
                     ) : (
-                      <div className="bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full">
-                        <span className="text-b3-grey font-neue-montreal-semibold text-sm uppercase">
+                      <div className="linked-account-avatar linked-account-avatar-placeholder bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full">
+                        <span className="linked-account-initial text-b3-grey font-neue-montreal-semibold text-sm uppercase">
                           {profile.initial}
                         </span>
                       </div>
                     )}
-                    <div>
-                      <div className="flex items-center gap-2">
-                        <span className="text-b3-grey font-neue-montreal-semibold">{profile.title}</span>
-                        <span className="text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs">
+                    <div className="linked-account-details">
+                      <div className="linked-account-title-row flex items-center gap-2">
+                        <span className="linked-account-title text-b3-grey font-neue-montreal-semibold">
+                          {profile.title}
+                        </span>
+                        <span className="linked-account-type text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs">
                           {profile.type.toUpperCase()}
                         </span>
                       </div>
-                      <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
+                      <div className="linked-account-subtitle text-b3-foreground-muted font-neue-montreal-medium text-sm">
                         {profile.subtitle}
                       </div>
                     </div>
@@ -288,69 +302,79 @@ export function ManageAccount({
                   <Button
                     variant="ghost"
                     size="icon"
-                    className="text-b3-grey hover:text-b3-negative"
+                    className="linked-account-unlink-button text-b3-grey hover:text-b3-negative"
                     onClick={() => handleUnlink(profile)}
                     disabled={unlinkingAccountId === profile.title || isUnlinking}
                   >
                     {unlinkingAccountId === profile.title || isUnlinking ? (
-                      <Loader2 className="animate-spin" />
+                      <Loader2 className="linked-account-unlink-loading animate-spin" />
                     ) : (
-                      <UnlinkIcon size={16} />
+                      <UnlinkIcon size={16} className="linked-account-unlink-icon" />
                     )}
                   </Button>
                 </div>
               ))}
             </div>
           ) : (
-            <div className="text-b3-foreground-muted py-8 text-center">No linked accounts found</div>
+            <div className="linked-accounts-empty text-b3-foreground-muted py-8 text-center">
+              No linked accounts found
+            </div>
           )}
         </div>
 
         {showReferralInfo && (
           /* Referral Section */
-          <div className="space-y-4">
-            <h3 className="text-b3-grey font-neue-montreal-semibold text-xl">Referrals</h3>
+          <div className="referrals-section space-y-4">
+            <h3 className="referrals-title text-b3-grey font-neue-montreal-semibold text-xl">Referrals</h3>
 
             {/* Referral Code */}
-            <div className="bg-b3-line rounded-xl p-4">
+            <div className="referral-code-container bg-b3-line rounded-xl p-4">
               {isEditingCode && (
-                <div>
-                  <div className="text-b3-grey font-neue-montreal-semibold">Your Referral Code</div>
-                  <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
+                <div className="referral-code-header-editing">
+                  <div className="referral-code-title text-b3-grey font-neue-montreal-semibold">Your Referral Code</div>
+                  <div className="referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm">
                     Share this code with friends to earn rewards
                   </div>
                 </div>
               )}
-              <div className="flex items-center justify-between">
+              <div className="referral-code-content flex items-center justify-between">
                 {!isEditingCode && (
-                  <div>
-                    <div className="text-b3-grey font-neue-montreal-semibold">Your Referral Code</div>
-                    <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
+                  <div className="referral-code-header">
+                    <div className="referral-code-title text-b3-grey font-neue-montreal-semibold">
+                      Your Referral Code
+                    </div>
+                    <div className="referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm">
                       Share this code with friends to earn rewards
                     </div>
                   </div>
                 )}
-                <div className="flex items-center gap-2">
+                <div className="referral-code-actions flex items-center gap-2">
                   {isEditingCode ? (
-                    <div className="flex items-center gap-2">
+                    <div className="referral-code-edit-form flex items-center gap-2">
                       <input
                         type="text"
                         value={newReferralCode}
                         onChange={e => setNewReferralCode(e.target.value)}
-                        className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm"
+                        className="referral-code-input rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm"
                         placeholder="Enter new code"
                         ref={referallCodeRef}
                       />
                       <Button
                         size="sm"
+                        className="referral-code-save-button"
                         onClick={handleUpdateReferralCode}
                         disabled={isUpdatingCode || !newReferralCode}
                       >
-                        {isUpdatingCode ? <Loader2 className="h-4 w-4 animate-spin" /> : "Save"}
+                        {isUpdatingCode ? (
+                          <Loader2 className="referral-code-save-loading h-4 w-4 animate-spin" />
+                        ) : (
+                          "Save"
+                        )}
                       </Button>
                       <Button
                         size="sm"
                         variant="ghost"
+                        className="referral-code-cancel-button"
                         onClick={() => {
                           setIsEditingCode(false);
                           setNewReferralCode("");
@@ -361,15 +385,21 @@ export function ManageAccount({
                     </div>
                   ) : (
                     <>
-                      <div className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm">
+                      <div className="referral-code-display rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm">
                         {currentReferralCode}
                       </div>
-                      <Button size="icon" variant="ghost" onClick={handleCopyCode}>
-                        <Copy className="h-4 w-4" />
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        className="referral-code-copy-button"
+                        onClick={handleCopyCode}
+                      >
+                        <Copy className="referral-code-copy-icon h-4 w-4" />
                       </Button>
                       <Button
                         size="icon"
                         variant="ghost"
+                        className="referral-code-edit-button"
                         onClick={() => {
                           setIsEditingCode(true);
                           setTimeout(() => {
@@ -377,7 +407,7 @@ export function ManageAccount({
                           }, 100);
                         }}
                       >
-                        <Pencil className="h-4 w-4" />
+                        <Pencil className="referral-code-edit-icon h-4 w-4" />
                       </Button>
                     </>
                   )}
@@ -386,67 +416,65 @@ export function ManageAccount({
             </div>
 
             {/* Referred Users */}
-            <div className="bg-b3-line rounded-xl p-4">
-              <div className="text-b3-grey font-neue-montreal-semibold mb-4">Referred Users</div>
+            <div className="referred-users-container bg-b3-line rounded-xl p-4">
+              <div className="referred-users-title text-b3-grey font-neue-montreal-semibold mb-4">Referred Users</div>
               {isLoadingReferrals ? (
-                <div className="flex justify-center py-4">
+                <div className="referred-users-loading flex justify-center py-4">
                   <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
                 </div>
               ) : referrals?.data?.length ? (
-                <div className="space-y-3">
+                <div className="referred-users-list space-y-3">
                   {referrals.data.map((referral: Referrals) => (
                     <div
                       key={String(referral._id)}
-                      className="flex items-center justify-between rounded-lg bg-white p-3"
+                      className="referred-user-item flex items-center justify-between rounded-lg bg-white p-3"
                     >
-                      <div className="text-sm font-medium">{referral.referreeId}</div>
-                      <div className="text-sm text-gray-500">{new Date(referral.createdAt).toLocaleDateString()}</div>
+                      <div className="referred-user-id text-sm font-medium">{referral.referreeId}</div>
+                      <div className="referred-user-date text-sm text-gray-500">
+                        {new Date(referral.createdAt).toLocaleDateString()}
+                      </div>
                     </div>
                   ))}
                 </div>
               ) : (
-                <div className="py-4 text-center text-gray-500">No referred users yet</div>
+                <div className="referred-users-empty py-4 text-center text-gray-500">No referred users yet</div>
               )}
             </div>
           </div>
         )}
 
         {/* Additional Settings Sections */}
-        <div className="space-y-4">
-          <h3 className="text-b3-grey font-neue-montreal-semibold text-xl">Account Preferences</h3>
-          <div className="bg-b3-line rounded-xl p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <div className="text-b3-grey font-neue-montreal-semibold">Dark Mode</div>
-                <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
+        <div className="account-preferences-section space-y-4">
+          <h3 className="account-preferences-title text-b3-grey font-neue-montreal-semibold text-xl">
+            Account Preferences
+          </h3>
+          <div className="account-preferences-container bg-b3-line rounded-xl p-4">
+            <div className="account-preference-item flex items-center justify-between">
+              <div className="account-preference-info">
+                <div className="account-preference-title text-b3-grey font-neue-montreal-semibold">Dark Mode</div>
+                <div className="account-preference-description text-b3-foreground-muted font-neue-montreal-medium text-sm">
                   Switch between light and dark theme
                 </div>
               </div>
               {/* Theme toggle placeholder - can be implemented later */}
-              <div className="bg-b3-primary-wash h-6 w-12 rounded-full"></div>
+              <div className="account-preference-toggle theme-toggle-placeholder bg-b3-primary-wash h-6 w-12 rounded-full"></div>
             </div>
           </div>
         </div>
 
-        {/* Global Account Info */}
-        <div className="border-b3-line flex items-center justify-between rounded-2xl border p-4">
-          <div>
-            <div className="flex items-center gap-2">
-              <img src="https://cdn.b3.fun/b3_logo.svg" alt="B3" className="h-4" />
-              <h3 className="font-neue-montreal-semibold text-b3-grey">Global Account</h3>
-            </div>
-
-            <p className="text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm">
-              Your universal account for all B3 apps
-            </p>
+        <button
+          className="logout-button logout-section border-b3-line hover:bg-b3-line relative flex w-full items-center justify-center rounded-2xl border p-4 transition-colors"
+          onClick={onLogoutEnhanced}
+        >
+          <span className="logout-text font-neue-montreal-semibold text-b3-grey">Sign out</span>
+          <div className="logout-icon-container absolute right-4">
+            {logoutLoading ? (
+              <Loader2 className="logout-loading animate-spin" size={16} />
+            ) : (
+              <SignOutIcon size={16} className="logout-icon text-b3-grey" />
+            )}
           </div>
-          <button
-            className="text-b3-grey hover:text-b3-grey/80 hover:bg-b3-line border-b3-line flex size-12 items-center justify-center rounded-full border"
-            onClick={onLogoutEnhanced}
-          >
-            {logoutLoading ? <Loader2 className="animate-spin" /> : <SignOutIcon size={16} className="text-b3-grey" />}
-          </button>
-        </div>
+        </button>
       </div>
     );
   };
@@ -521,7 +549,7 @@ export function ManageAccount({
           </div>
 
           <TabsContentPrimitive value="overview" className="px-4 pb-4 pt-2">
-            <BalanceContent onLogout={onLogout} partnerId={partnerId} />
+            <BalanceContent onLogout={onLogout} partnerId={partnerId} showDeposit={showDeposit} showSwap={showSwap} />
           </TabsContentPrimitive>
 
           <TabsContentPrimitive value="tokens" className="px-4 pb-4 pt-2">

package/src/global-account/react/hooks/useAccountWallet.tsx

@@ -1,6 +1,7 @@
 import { useB3, useProfile } from "@b3dotfun/sdk/global-account/react";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
 import { useEffect, useMemo, useState } from "react";
 import { getLastAuthProvider, useActiveWallet, useConnectedWallets, useWalletImage } from "thirdweb/react";
 import { Account, Wallet } from "thirdweb/wallets";
@@ -43,7 +44,7 @@ export function useAccountWallet(): {
   eoaWalletIcon?: string;
   smartWalletIcon?: string;
 } {
-  const { account } = useB3();
+  const { account, user } = useB3();
 
   const activeWallet = useActiveWallet();
   const connectedWallets = useConnectedWallets();
@@ -72,7 +73,7 @@ export function useAccountWallet(): {
 
   const { data: profileData } = useProfile({ address: account?.address });
   const ensName = profileData?.displayName?.replace(/\.b3\.fun/g, "");
-  const avatarUrl = profileData?.avatar;
+  const avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profileData?.avatar;
 
   const res = useMemo(
     () => ({

package/src/global-account/react/hooks/useAuthentication.ts

@@ -1,4 +1,5 @@
 import app from "@b3dotfun/sdk/global-account/app";
+import { authenticateWithB3JWT } from "@b3dotfun/sdk/global-account/bsmnt";
 import { useAuthStore, useB3 } from "@b3dotfun/sdk/global-account/react";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { b3MainnetThirdWeb } from "@b3dotfun/sdk/shared/constants/chains/supported";
@@ -67,6 +68,10 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
           setIsAuthenticated(true);
           setIsAuthenticatingV2(false);
           debug("Re-authenticated successfully", { userAuth });
+
+          // Authenticate on BSMNT with B3 JWT
+          const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
+          console.log("@@b3Jwt", b3Jwt);
         } catch (error) {
           // If re-authentication fails, try fresh authentication
           debug("Re-authentication failed, attempting fresh authentication");
@@ -75,6 +80,10 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
           setIsAuthenticated(true);
           setIsAuthenticatingV2(false);
           debug("Fresh authentication successful", { userAuth });
+
+          // Authenticate on BSMNT with B3 JWT
+          const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
+          console.log("@@b3Jwt", b3Jwt);
         }
       } catch (error) {
         debug("Auto-connect authentication failed", { error });

package/src/global-account/react/hooks/useProfile.ts

@@ -13,7 +13,7 @@ export interface Profile {
 export interface CombinedProfile {
   name: string | null;
   address: string | null;
-  avatar: string | null;
+  avatar: string | undefined;
   bio: string | null;
   displayName: string | null;
   profiles: Profile[];

package/src/global-account/react/hooks/useRPMToken.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import { useQueryBSMNT } from "@b3dotfun/sdk/global-account/react/hooks/useQueryBSMNT";
+
+export function useRPMToken() {
+  const {
+    data,
+    runQuery: refetch,
+    isLoading,
+    error: isError,
+  } = useQueryBSMNT("profiles", "getReadyPlayerMeToken", undefined, true);
+
+  const token = data?.token || "";
+  const accountId = data?.accountId || "";
+
+  return { token, accountId, refetch, isLoading, isError };
+}

package/src/global-account/react/stores/useModalStore.ts

@@ -89,6 +89,10 @@ export interface ManageAccountModalProps extends BaseModalProps {
   setActiveTab?: (tab: "overview" | "tokens" | "nfts" | "apps" | "settings") => void;
   /** Whether to show the referral information */
   showReferralInfo?: boolean;
+  /** Whether to show the swap button */
+  showSwap?: boolean;
+  /** Whether to show the deposit button */
+  showDeposit?: boolean;
 }
 
 /**
@@ -305,6 +309,13 @@ export interface AnySpendDepositHypeProps extends BaseModalProps {
   onSuccess?: (amount?: string) => void;
 }
 
+export interface AvatarEditorModalProps extends BaseModalProps {
+  /** Modal type identifier */
+  type: "avatarEditor";
+  /** Callback function called when avatar is successfully set */
+  onSuccess?: () => void;
+}
+
 /**
  * Union type of all possible modal content types
  */
@@ -323,7 +334,8 @@ export type ModalContentType =
   | AnySpendSignatureMintProps
   | AnySpendBondKitProps
   | LinkAccountModalProps
-  | AnySpendDepositHypeProps;
+  | AnySpendDepositHypeProps
+  | AvatarEditorModalProps;
 // Add other modal types here like: | OtherModalProps | AnotherModalProps
 
 /**

package/src/global-account/react/utils/updateAvatar.ts

@@ -0,0 +1,21 @@
+import app, { extractAvatarIdFromUrl } from "@b3dotfun/sdk/global-account/bsmnt";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+
+const debug = debugB3React("updateAvatar");
+
+export async function updateAvatar(avatar: string) {
+  try {
+    // Extract avatar ID from URL
+    const avatarID = extractAvatarIdFromUrl(avatar);
+
+    if (!avatarID) {
+      throw new Error("Invalid avatar URL");
+    }
+
+    // Set the avatar in the profiles service
+    return await app.service("profiles").setAvatar({ avatarUrl: String(avatar), avatarID: String(avatarID) }, {});
+  } catch (error) {
+    debug("Failed to update avatar:", error);
+    throw error; // Re-throw to handle in component
+  }
+}