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

package/src/anyspend/react/components/common/RecipientSelection.tsx

@@ -88,7 +88,7 @@ export function RecipientSelection({
   const canConfirm = recipientAddress && isAddressValid;
 
   return (
-    <div className="recipient-selection mx-auto w-[460px] max-w-full px-5">
+    <div className="recipient-selection mx-auto w-[460px] max-w-full p-5">
       <div className="flex flex-col gap-6">
         {/* Header */}
         <div className="flex justify-around">

package/src/anyspend/react/hooks/useConnectedWalletDisplay.ts

@@ -32,7 +32,8 @@ export function useConnectedWalletDisplay(
 
   // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
   const shouldShowConnectedEOA = !!connectedEOAWallet;
-  const shouldShowWagmiWallet = wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
+  // this is disabled because we don't want to display In-App Wallet as a payment method
+  const shouldShowWagmiWallet = false; // wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
 
   // Determine which address to use based on payment method
   let walletAddress: string | undefined;

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

@@ -15,6 +15,26 @@ interface GroupedNFTs {
 
 export function AccountAssets({ nfts, isLoading }: AccountAssetsProps) {
   // Initialize with all collections expanded
+  // Group NFTs by collection
+  const groupedNFTs = nfts?.nfts?.reduce(
+    (acc, nft) => {
+      const collectionId = nft.collection?.collection_id || "unknown";
+      if (!acc[collectionId]) {
+        acc[collectionId] = {
+          collection_id: collectionId,
+          collection_name: nft.collection?.name || "Unknown Collection",
+          collection_image: nft.collection?.image_url || nft.previews?.image_small_url || "",
+          nfts: [],
+        };
+      }
+      acc[collectionId].nfts.push(nft);
+      return acc;
+    },
+    {} as Record<string, GroupedNFTs>,
+  );
+
+  const collections = Object.values(groupedNFTs || {});
+
   const [expandedCollections, setExpandedCollections] = useState<Set<string>>(
     () => new Set(collections.map(c => c.collection_id)),
   );
@@ -39,26 +59,6 @@ export function AccountAssets({ nfts, isLoading }: AccountAssetsProps) {
     return <div className="text-b3-react-muted-foreground py-8 text-center">No NFTs found</div>;
   }
 
-  // Group NFTs by collection
-  const groupedNFTs = nfts.nfts.reduce(
-    (acc, nft) => {
-      const collectionId = nft.collection?.collection_id || "unknown";
-      if (!acc[collectionId]) {
-        acc[collectionId] = {
-          collection_id: collectionId,
-          collection_name: nft.collection?.name || "Unknown Collection",
-          collection_image: nft.collection?.image_url || nft.previews?.image_small_url || "",
-          nfts: [],
-        };
-      }
-      acc[collectionId].nfts.push(nft);
-      return acc;
-    },
-    {} as Record<string, GroupedNFTs>,
-  );
-
-  const collections = Object.values(groupedNFTs);
-
   const toggleCollection = (collectionId: string) => {
     setExpandedCollections(prev => {
       const next = new Set(prev);

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

@@ -359,7 +359,7 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
       .filter(p => p.avatar !== null) || []; // Filter out profiles with invalid avatars
 
   return (
-    <div className={cn("flex w-full max-w-md flex-col bg-white", className)}>
+    <div className={cn("b3-modal-avatar-editor flex w-full max-w-md flex-col bg-white", className)}>
       {/* Header */}
       {viewStep === "upload" && <ModalHeader title="Upload Image" />}
 
@@ -449,7 +449,7 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
               {/* Link More Account */}
               <button
                 onClick={handleLinkMoreAccount}
-                className="font-inter flex items-center gap-2 text-sm font-semibold text-[#3368ef] hover:underline"
+                className="b3-modal-link-more-account font-inter flex items-center gap-2 text-sm font-semibold text-[#3368ef] hover:underline"
               >
                 <svg
                   width="16"
@@ -479,7 +479,7 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
                 onDragOver={handleDragOver}
                 onDrop={handleDrop}
                 className={cn(
-                  "mb-6 flex w-full cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-16 transition-colors",
+                  "b3-modal-upload-view mb-6 flex w-full cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-16 transition-colors",
                   isDragging
                     ? "border-[#3368ef] bg-[#f0f5ff]"
                     : "border-[#e4e4e7] hover:border-[#3368ef] hover:bg-[#f0f5ff]",
@@ -565,7 +565,7 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
         <Button
           onClick={handleSaveChanges}
           disabled={isLoading || (!selectedFile && !selectedProfileType)}
-          className="flex-1 rounded-xl bg-[#3368ef] text-white hover:bg-[#2952cc]"
+          className="b3-modal-save-button flex-1 rounded-xl bg-[#3368ef] text-white hover:bg-[#2952cc]"
         >
           {isLoading ? (
             <>

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

@@ -90,6 +90,7 @@ export function B3DynamicModal() {
 
   // Check if current content type is in freestyle types
   const isFreestyleType = freestyleTypes.includes(contentType?.type as string);
+  console.log("contentType :", contentType);
   const hideCloseButton = true;
 
   // Build content class using cn utility
@@ -100,7 +101,10 @@ export function B3DynamicModal() {
     fullWidthTypes.includes(contentType?.type as string) && "w-full",
     isFreestyleType && "b3-modal-freestyle",
     contentType?.type === "signInWithB3" && "p-0",
-    contentType?.type === "anySpend" && "md:px-6",
+    contentType?.type === "anySpend" && "md:p-0",
+    contentType?.type === "send" && "p-0",
+    contentType?.type === "manageAccount" && " md:p-0 md:pt-2",
+    contentType?.type === "linkAccount" && "md:p-0",
     // 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",

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

@@ -59,7 +59,7 @@ export function IPFSMediaRenderer({
   if (!src) {
     return (
       <div className={className} style={style} aria-label={alt}>
-        <div className="bg-b3-primary-wash flex h-full w-full items-center justify-center">
+        <div className="bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full">
           <span className="text-b3-grey font-neue-montreal-semibold text-xs">{alt.charAt(0).toUpperCase()}</span>
         </div>
       </div>

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

@@ -3,7 +3,7 @@ import { Button, ManageAccountModalProps, useB3, useModalStore, useQueryB3 } fro
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { truncateAddress } from "@b3dotfun/sdk/shared/utils/truncateAddress";
 import { Copy, Loader2, Pencil, UnlinkIcon } from "lucide-react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { useProfiles, useUnlinkProfile } from "thirdweb/react";
 
@@ -41,6 +41,7 @@ export const LinkAccount = ({
   chain: Chain;
 }) => {
   const [unlinkingAccountId, setUnlinkingAccountId] = useState<string | null>(null);
+  const [profileToUnlink, setProfileToUnlink] = useState<any>(null);
   const { data: profilesRaw = [], isLoading: isLoadingProfiles } = useProfiles({ client });
   const { mutate: unlinkProfile, isPending: isUnlinking } = useUnlinkProfile();
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
@@ -115,15 +116,33 @@ export const LinkAccount = ({
       ...getProfileDisplayInfo(profile),
       originalProfile: profile,
     }));
+  console.log("profiles :", profiles);
 
-  const handleUnlink = async (profile: any) => {
-    setUnlinkingAccountId(profile.title);
-    try {
-      unlinkProfile({ client, profileToUnlink: profile.originalProfile }, mutationOptions);
-    } catch (error) {
-      console.error("Error unlinking account:", error);
-    } finally {
-      setUnlinkingAccountId(null);
+  // Reset confirmation state after 3 seconds
+  useEffect(() => {
+    if (profileToUnlink) {
+      const timer = setTimeout(() => {
+        setProfileToUnlink(null);
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [profileToUnlink]);
+
+  const handleUnlinkClick = (profile: any) => {
+    // If this profile is already pending confirmation, perform the unlink
+    if (profileToUnlink?.title === profile.title) {
+      setUnlinkingAccountId(profile.title);
+      try {
+        unlinkProfile({ client, profileToUnlink: profile.originalProfile }, mutationOptions);
+      } catch (error) {
+        console.error("Error unlinking account:", error);
+      } finally {
+        setUnlinkingAccountId(null);
+        setProfileToUnlink(null);
+      }
+    } else {
+      // First click - set pending confirmation
+      setProfileToUnlink(profile);
     }
   };
 
@@ -225,13 +244,22 @@ export const LinkAccount = ({
                 </div>
                 <Button
                   variant="ghost"
-                  size="icon"
-                  className="linked-account-unlink-button text-b3-grey hover:text-b3-negative"
-                  onClick={() => handleUnlink(profile)}
+                  size={profileToUnlink?.title === profile.title ? "sm" : "icon"}
+                  className={`linked-account-unlink-button transition-all ${
+                    profileToUnlink?.title === profile.title
+                      ? "bg-b3-negative hover:bg-b3-negative/90 text-white"
+                      : "text-b3-grey hover:text-b3-negative"
+                  }`}
+                  onClick={() => handleUnlinkClick(profile)}
                   disabled={unlinkingAccountId === profile.title || isUnlinking}
                 >
                   {unlinkingAccountId === profile.title || isUnlinking ? (
-                    <Loader2 className="linked-account-unlink-loading animate-spin" />
+                    <Loader2 className="linked-account-unlink-loading h-4 w-4 animate-spin" />
+                  ) : profileToUnlink?.title === profile.title ? (
+                    <div className="flex items-center gap-1.5">
+                      <UnlinkIcon size={14} className="linked-account-unlink-icon" />
+                      <span className="text-xs font-semibold">Unlink</span>
+                    </div>
                   ) : (
                     <UnlinkIcon size={16} className="linked-account-unlink-icon" />
                   )}
@@ -240,7 +268,7 @@ export const LinkAccount = ({
             ))}
           </div>
         ) : (
-          <div className="linked-accounts-empty text-b3-foreground-muted py-8 text-center">
+          <div className="linked-accounts-empty font-neue-montreal-medium text-b3-foreground-muted py-8 text-center">
             No linked accounts found
           </div>
         )}

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

@@ -157,7 +157,7 @@ export function Header({ onLogout }: { onLogout?: () => void }) {
               )}
             </div>
             <div className="flex flex-col gap-0.5">
-              <p className="text-b3-grey font-neue-montreal-semibold text-sm">Active Wallet</p>
+              <p className="text-b3-grey font-neue-montreal-semibold text-left text-sm">Active Wallet</p>
               <div className="flex items-center gap-1">
                 <p className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
                   {centerTruncate(address, 4)}

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

@@ -1,5 +1,7 @@
 import { useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { Chain } from "thirdweb";
+import { useProfiles } from "thirdweb/react";
 import LinkIcon from "../icons/LinkIcon";
 import ModalHeader from "../ModalHeader/ModalHeader";
 import SettingsMenuItem from "./SettingsMenuItem";
@@ -17,6 +19,10 @@ const SettingsContent = ({
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
 
+  const { data: profilesRaw = [] } = useProfiles({ client });
+
+  const profiles = profilesRaw.filter((profile: any) => !["custom_auth_endpoint"].includes(profile.type));
+
   const handleNavigate = (type: "home" | "swap" | "linkAccount" | "avatarEditor") => {
     if (type === "home") {
       setB3ModalContentType({
@@ -64,7 +70,7 @@ const SettingsContent = ({
         <SettingsMenuItem
           icon={<LinkIcon className="text-b3-grey-500" />}
           title="Linked Accounts"
-          subtitle="3 connected accounts"
+          subtitle={`${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`}
           onClick={() => handleNavigate("linkAccount")}
         />
         {/* <SettingsMenuItem

package/src/global-account/react/components/SignInWithB3/SignIn.tsx

@@ -124,7 +124,7 @@ export function SignIn(props: SignInWithB3Props) {
                         <div className="ml-4 grow">
                           {ensName && <div>{ensName}</div>}
                           <div>{truncateAddress(globalAddress)}</div>
-                          <div>{walletInfo?.name}</div>
+                          {/* <div>{walletInfo?.name}</div> */}
                         </div>
                       </div>
                       {isActiveEOAWallet && <Icon className="fill-b3-react-primary" name="check" />}

package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx

@@ -217,7 +217,7 @@ export function SignInWithB3Flow({
   if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
     return (
       <LoginStepContainer partnerId={partnerId}>
-        <div className="mt-8 flex items-center justify-center">
+        <div className="my-8 flex min-h-[350px] items-center justify-center">
           <Loading variant="white" size="lg" />
         </div>
       </LoginStepContainer>

package/src/global-account/react/components/ui/Tabs.tsx

@@ -25,7 +25,7 @@ export function TabTrigger({ className, ...props }: React.ComponentProps<typeof
       className={cn(
         "text-md inline-flex h-full items-center justify-center whitespace-nowrap px-3 font-semibold transition-all",
         "focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
-        "data-[state=active]:text-b3-react-primary data-[state=active]:font-bold",
+        "data-[state=active]:font-bold data-[state=active]:text-[#0B57C2]",
         "hover:text-b3-react-foreground data-[state=inactive]:text-b3-react-muted-foreground",
         "flex-1",
         className,

package/src/global-account/react/components/ui/dialog.tsx

@@ -76,16 +76,7 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
             </div>
             {/* Global Account Footer */}
             <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"
-                  fill="#0B57C2"
-                />
-                <path
-                  d="M5.33333 6C5.33333 5.63181 5.63181 5.33333 6 5.33333H10C10.3682 5.33333 10.6667 5.63181 10.6667 6V10C10.6667 10.3682 10.3682 10.6667 10 10.6667H6C5.63181 10.6667 5.33333 10.3682 5.33333 10V6Z"
-                  fill="white"
-                />
-              </svg>
+              <img src="https://cdn.b3.fun/b3_logo.svg" alt="B3" className="h-4 w-4" />
               <span className="font-neue-montreal-semibold text-xs uppercase leading-none tracking-[0.72px] text-[#0B57C2]">
                 Global Account
               </span>

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

@@ -64,6 +64,7 @@ export function validateImageUrl(url: string | null | undefined): string | null
 }
 
 export interface ExtendedProfileDetails {
+  fid?: string;
   id?: string;
   email?: string;
   phone?: string;
@@ -112,7 +113,7 @@ export function getProfileDisplayInfo(profile: ExtendedProfile): ProfileDisplayI
       break;
     case "farcaster":
       displayInfo = {
-        title: details.name || details.username || "Unknown",
+        title: details.name || details.username || "FID:" + details?.fid || "Unknown",
         subtitle: details.username ? `@${details.username}` : "Farcaster Account",
         imageUrl: validateImageUrl(details.pfpUrl || details.profileImageUrl),
         initial: "F",

package/src/styles/index.css

@@ -390,6 +390,8 @@ Dark version
 }
 
 .b3-login-step {
+  padding-bottom: 10px;
+
   & > div > div > div > div > div > div > div > img {
     display: none;
   }
@@ -662,3 +664,7 @@ Dark version
 .animate-accordion-up {
   animation: accordion-up 0.2s ease-out;
 }
+
+.tw-header {
+  display: none !important; /* Hide the TW "BSMNT" header */
+}