@b3dotfun/sdk 0.0.35-alpha.3 → 0.0.35-alpha.5

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";
@@ -38,12 +40,27 @@ export function BalanceContent({ onLogout, partnerId, showDeposit = true, showSw
     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);
 
@@ -100,14 +117,17 @@ export function BalanceContent({ onLogout, partnerId, showDeposit = true, showSw
       <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">

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

@@ -93,7 +93,6 @@ export function ManageAccount({
     setB3ModalOpen(false);
     setLogoutLoading(false);
   };
-
   const AppsContent = () => (
     <div className="space-y-4">
       {signers?.map((signer: TWSignerWithMetadata) => (

package/src/global-account/react/components/icons/AppleIcon.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+export interface AppleIconProps {
+  className?: string;
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export function AppleIcon({ className, size = 24, color = "currentColor", style }: AppleIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 41.5 51"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <g>
+        <path
+          fill={color}
+          d="M40.2,17.4c-3.4,2.1-5.5,5.7-5.5,9.7c0,4.5,2.7,8.6,6.8,10.3c-0.8,2.6-2,5-3.5,7.2c-2.2,3.1-4.5,6.3-7.9,6.3s-4.4-2-8.4-2
+		c-3.9,0-5.3,2.1-8.5,2.1s-5.4-2.9-7.9-6.5C2,39.5,0.1,33.7,0,27.6c0-9.9,6.4-15.2,12.8-15.2c3.4,0,6.2,2.2,8.3,2.2
+		c2,0,5.2-2.3,9-2.3C34.1,12.2,37.9,14.1,40.2,17.4z M28.3,8.1C30,6.1,30.9,3.6,31,1c0-0.3,0-0.7-0.1-1c-2.9,0.3-5.6,1.7-7.5,3.9
+		c-1.7,1.9-2.7,4.3-2.8,6.9c0,0.3,0,0.6,0.1,0.9c0.2,0,0.5,0.1,0.7,0.1C24.1,11.6,26.6,10.2,28.3,8.1z"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default AppleIcon;

package/src/global-account/react/components/icons/DiscordIcon.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+export interface DiscordIconProps {
+  className?: string;
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export function DiscordIcon({ className, size = 24, color = "#5865F2", style }: DiscordIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 -28.5 256 256"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+      preserveAspectRatio="xMidYMid"
+    >
+      <g>
+        <path
+          d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
+          fill={color}
+          fillRule="nonzero"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default DiscordIcon;

package/src/global-account/react/components/icons/FarcasterIcon.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+export interface FarcasterIconProps {
+  className?: string;
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export function FarcasterIcon({ className, size = 24, color = "#855DCD", style }: FarcasterIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 1000 1000"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <rect width="1000" height="1000" rx="200" fill={color} />
+      <path
+        d="M257.778 155.556H742.222V844.444H671.111V528.889H670.414C662.554 441.677 589.258 373.333 500 373.333C410.742 373.333 337.446 441.677 329.586 528.889H328.889V844.444H257.778V155.556Z"
+        fill="white"
+      />
+      <path
+        d="M128.889 253.333L157.778 351.111H182.222V746.667C169.949 746.667 160 756.616 160 768.889V795.556H155.556C143.283 795.556 133.333 805.505 133.333 817.778V844.444H382.222V817.778C382.222 805.505 372.273 795.556 360 795.556H355.556V768.889C355.556 756.616 345.606 746.667 333.333 746.667H306.667V253.333H128.889Z"
+        fill="white"
+      />
+      <path
+        d="M675.556 746.667C663.283 746.667 653.333 756.616 653.333 768.889V795.556H648.889C636.616 795.556 626.667 805.505 626.667 817.778V844.444H875.556V817.778C875.556 805.505 865.606 795.556 853.333 795.556H848.889V768.889C848.889 756.616 838.94 746.667 826.667 746.667V351.111H851.111L880 253.333H702.222V746.667H675.556Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export default FarcasterIcon;

package/src/global-account/react/components/icons/GoogleIcon.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+export interface GoogleIconProps {
+  className?: string;
+  size?: number;
+  style?: React.CSSProperties;
+}
+
+export function GoogleIcon({ className, size = 24, style }: GoogleIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 48 48"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <path
+        fill="#EA4335"
+        d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+      />
+      <path
+        fill="#4285F4"
+        d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+      />
+      <path
+        fill="#34A853"
+        d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+      />
+      <path fill="none" d="M0 0h48v48H0z" />
+    </svg>
+  );
+}
+
+export default GoogleIcon;

package/src/global-account/react/components/icons/XIcon.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export interface XIconProps {
+  className?: string;
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export function XIcon({ className, size = 24, color = "currentColor", style }: XIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 300 300.251"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <path
+        d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66"
+        fill={color}
+      />
+    </svg>
+  );
+}
+
+export default XIcon;

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

@@ -309,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
  */
@@ -327,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
+  }
+}