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

package/dist/types/global-account/react/utils/profileDisplay.d.ts

@@ -6,6 +6,7 @@ import { type Profile } from "thirdweb/wallets";
  */
 export declare function validateImageUrl(url: string | null | undefined): string | null;
 export interface ExtendedProfileDetails {
+    fid?: string;
     id?: string;
     email?: string;
     phone?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.65-test.4",
+  "version": "0.0.65-test.6",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/react/components/AnySpend.tsx

@@ -989,7 +989,7 @@ function AnySpendInner({
   );
 
   const orderDetailsView = (
-    <div className={"mx-auto w-[460px] max-w-full px-5"}>
+    <div className={"mx-auto w-[460px] max-w-full p-5"}>
       <div className="relative flex flex-col gap-4">
         {oat && (
           <OrderDetails

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
+import { IPFSMediaRenderer, useAccountWallet } from "@b3dotfun/sdk/global-account/react";
 import { useAccountWalletImage } from "@b3dotfun/sdk/global-account/react/hooks/useAccountWallet";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
@@ -53,6 +53,7 @@ export function CryptoPaymentMethod({
 
   // Use custom hook to determine wallet display logic
   const { shouldShowConnectedEOA, shouldShowWagmiWallet } = useConnectedWalletDisplay(selectedPaymentMethod);
+  console.log("shouldShowWagmiWallet :", shouldShowWagmiWallet);
 
   // Map wagmi connector names to thirdweb wallet IDs
   const getThirdwebWalletId = (connectorName: string): WalletId | null => {
@@ -335,7 +336,11 @@ export function CryptoPaymentMethod({
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-3">
                         {walletImage ? (
-                          <img src={walletImage} alt="Global Account" className="h-10 w-10 rounded-full" />
+                          <IPFSMediaRenderer
+                            src={walletImage}
+                            alt="Global Account"
+                            className="h-10 w-10 rounded-full"
+                          />
                         ) : (
                           <div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100">
                             <Wallet className="h-5 w-5 text-purple-600" />

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

@@ -81,7 +81,7 @@ export function FiatPaymentMethodComponent({
   // Show loading state while checking geo availability
   if (isLoadingGeoOnramp) {
     return (
-      <div className="fiat-payment-method mx-auto w-[460px] max-w-full px-5">
+      <div className="fiat-payment-method mx-auto w-[460px] max-w-full p-5">
         <div className="flex flex-col gap-6">
           <div className="flex items-center gap-4">
             <button
@@ -104,7 +104,7 @@ export function FiatPaymentMethodComponent({
   }
 
   return (
-    <div className="fiat-payment-method mx-auto w-[460px] max-w-full px-5">
+    <div className="fiat-payment-method mx-auto w-[460px] max-w-full p-5">
       <div className="flex flex-col gap-6">
         {/* Header */}
         <div className="flex items-center gap-4">

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

@@ -1086,7 +1086,10 @@ export const OrderDetails = memo(function OrderDetails({
         />
       )}
 
-      <button className="order-details-cancel-btn flex w-full items-center justify-center gap-2" onClick={handleBack}>
+      <button
+        className="text-b3-primary-blue hover:text-b3-primary-blue/50 order-details-cancel-btn flex w-full items-center justify-center gap-2 underline"
+        onClick={handleBack}
+      >
         <RefreshCcw className="ml-2 h-4 w-4" /> Cancel and start over
       </button>
 

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

@@ -42,7 +42,7 @@ export function OrderHistory({ mode, onBack, onSelectOrder }: OrderHistoryProps)
           <p className="text-as-secondary text-sm">No order history found</p>
         </div>
       ) : (
-        <div className="mb-12 w-full space-y-3 px-5 pt-5">
+        <div className="mb-12 w-full px-5 pt-5">
           {[...orderHistory]
             .sort((a, b) => b.createdAt - a.createdAt)
             .map(order => (

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

@@ -1,11 +1,11 @@
 import { ALL_CHAINS, getChainName, getStatusDisplay } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { Badge, useIsMobile } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { getVendorDisplayName } from "@b3dotfun/sdk/shared/utils/payment.utils";
 import { ArrowRight } from "lucide-react";
 import TimeAgo from "react-timeago";
-import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 interface OrderHistoryItemProps {
   order: components["schemas"]["Order"];
@@ -39,8 +39,8 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
     <div
       key={`anyspend-${order.id}`}
       className={cn(
-        "bg-as-surface-secondary hover:bg-as-surface-tertiary rounded-xl p-4 transition-all",
-        onSelectOrder && "cursor-pointer",
+        "font-inter border-as-border-secondary border-b py-5 font-medium transition-all last:border-b-0",
+        onSelectOrder && "hover:bg-as-surface-secondary/50 cursor-pointer",
       )}
       onClick={() => onSelectOrder?.(order.id)}
     >
@@ -49,7 +49,7 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
         <div className="flex items-center gap-2">
           <div
             className={cn(
-              "text-xs font-semibold",
+              "text-xs",
               orderDisplayStatus === "processing" && "text-yellow-600",
               orderDisplayStatus === "success" && "text-green-600",
               orderDisplayStatus === "failure" && "text-red-600",

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

@@ -13,6 +13,8 @@ import { FiatPaymentMethod } from "./FiatPaymentMethod";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat";
 import { PointsBadge } from "./PointsBadge";
 
+const ONE_CHAR_WIDTH = 30;
+
 export function PanelOnramp({
   srcAmountOnRamp,
   setSrcAmountOnRamp,
@@ -126,6 +128,7 @@ export function PanelOnramp({
   const handleQuickAmount = (value: string) => {
     setSrcAmountOnRamp(value);
   };
+  console.log("srcAmountOnRamp :", srcAmountOnRamp.length);
 
   return (
     <div className="panel-onramp bg-as-surface-primary flex w-full flex-col">
@@ -176,9 +179,9 @@ export function PanelOnramp({
               value={srcAmountOnRamp}
               onChange={handleAmountChange}
               placeholder="5"
-              className="text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0"
+              className="text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0"
               style={{
-                width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
+                width: `${Math.max(ONE_CHAR_WIDTH, srcAmountOnRamp.length * ONE_CHAR_WIDTH)}px`,
               }}
             />
           </div>

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>
         )}
@@ -249,7 +277,7 @@ export const LinkAccount = ({
         <Button
           onClick={handleOpenLinkModal}
           disabled={isLinking}
-          className="bg-b3-primary-blue hover:bg-b3-primary-blue/90 border-white/12 group relative h-12 w-full rounded-xl border-2 px-[18px] text-base font-semibold text-white shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18),inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] transition-all"
+          className="b3-modal-link-new-account-button bg-b3-primary-blue hover:bg-b3-primary-blue/90 border-white/12 group relative h-12 w-full rounded-xl border-2 px-[18px] text-base font-semibold text-white shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18),inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] transition-all"
         >
           <div className="flex items-center justify-center gap-1.5">
             <svg

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

@@ -44,7 +44,7 @@ const BottomNavigation = () => {
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
 
   return (
-    <div className="sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]">
+    <div className="b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]">
       <TabsListPrimitive className="flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent">
         <TabTriggerPrimitive
           value="home"

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

@@ -58,9 +58,9 @@ function WalletItem({ wallet, isActive, onClick }: { wallet: Wallet; isActive: b
 
   return (
     <div
-      className={`box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors ${
-        isActive ? "bg-[#F4F4F5]" : "hover:bg-b3-line/50"
-      }`}
+      className={`b3-modal-wallet-item ${
+        isActive ? "b3-modal-wallet-item-active bg-[#F4F4F5]" : "hover:bg-b3-line/50"
+      } box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors`}
       onClick={onClick}
     >
       <div className="relative size-10 shrink-0 overflow-clip rounded-full">
@@ -137,11 +137,11 @@ export function Header({ onLogout }: { onLogout?: () => void }) {
       type="single"
       collapsible
       value={isExpanded ? "wallet-switcher" : ""}
-      className="bg-b3-background border-b3-line relative border-b"
+      className="b3-modal-wallet-switcher bg-b3-background border-b3-line relative border-b"
       onValueChange={(value: string) => setIsExpanded(value === "wallet-switcher")}
     >
       <AccordionPrimitive.Item value="wallet-switcher" className="border-none">
-        <AccordionPrimitive.Trigger className="group flex w-full items-center justify-between border-none bg-transparent px-5 py-3 outline-none">
+        <AccordionPrimitive.Trigger className="b3-modal-wallet-switcher-trigger group flex w-full items-center justify-between border-none bg-transparent px-5 py-3 outline-none">
           <div className="flex items-center gap-2">
             <div className="relative size-10 shrink-0 overflow-clip rounded-full">
               {isActiveGlobalAccount ? (
@@ -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)}
@@ -166,7 +166,7 @@ export function Header({ onLogout }: { onLogout?: () => void }) {
               </div>
             </div>
           </div>
-          <ChevronDownIcon className="text-b3-grey transition-transform duration-200 group-data-[state=open]:rotate-180" />
+          <ChevronDownIcon className="b3-modal-wallet-switcher-chevron text-b3-grey transition-transform duration-200 group-data-[state=open]:rotate-180" />
         </AccordionPrimitive.Trigger>
 
         <AnimatePresence>
@@ -177,7 +177,7 @@ export function Header({ onLogout }: { onLogout?: () => void }) {
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: -10 }}
                 transition={{ duration: 0.2, ease: "easeInOut" }}
-                className="flex flex-col gap-3 rounded-bl-3xl rounded-br-3xl bg-white px-2 pb-5 pt-3 shadow-[0px_32px_64px_-12px_rgba(10,13,18,0.14),0px_5px_5px_-2.5px_rgba(10,13,18,0.04)]"
+                className="b3-modal-wallet-switcher-content flex flex-col gap-3 rounded-bl-3xl rounded-br-3xl bg-white px-2 pb-5 pt-3 shadow-[0px_32px_64px_-12px_rgba(10,13,18,0.14),0px_5px_5px_-2.5px_rgba(10,13,18,0.04)]"
               >
                 {/* Connected Wallets */}
                 <div className="flex flex-col gap-3">
@@ -192,7 +192,7 @@ export function Header({ onLogout }: { onLogout?: () => void }) {
 
                   {/* Link Another Wallet */}
                   <div
-                    className="hover:bg-b3-line/50 box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors"
+                    className="b3-modal-link-another-wallet hover:bg-b3-line/50 box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors"
                     onClick={handleLinkWallet}
                   >
                     <div className="bg-b3-line flex size-10 shrink-0 items-center justify-center rounded-full">
@@ -206,7 +206,7 @@ export function Header({ onLogout }: { onLogout?: () => void }) {
 
                 {/* Sign Out Button */}
                 <button
-                  className="border-b3-line hover:bg-b3-line bg-b3-background flex items-center justify-center gap-1.5 rounded-xl border border-solid p-2.5 transition-colors"
+                  className="b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background flex items-center justify-center gap-1.5 rounded-xl border border-solid p-2.5 transition-colors"
                   onClick={onLogoutEnhanced}
                   disabled={logoutLoading}
                   style={{

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

@@ -57,7 +57,7 @@ const HomeActions = ({ showDeposit, showSwap }: { showDeposit: boolean; showSwap
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
 
   return (
-    <div className="border-b3-line grid grid-cols-4 gap-3 border-b px-5 pb-6">
+    <div className="b3-modal-home-actions border-b3-line grid grid-cols-4 gap-3 border-b px-5 pb-6">
       {showDeposit && (
         <HomeActionButton
           customClass="manage-account-deposit"

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

@@ -18,9 +18,9 @@ export function HomeContent({ showDeposit = false, showSwap = true }: HomeConten
         <ProfileSection />
 
         <HomeActions showDeposit={showDeposit} showSwap={showSwap} />
-        <div className="space-y-2 p-5">
+        <div className="b3-modal-balance-content space-y-2 p-5">
           <Tabs defaultValue={"balance"}>
-            <TabsList>
+            <TabsList className="b3-modal-balance-tabs-list">
               <TabTrigger value="balance" className="font-neue-montreal-semibold p-0 pr-3">
                 Balance
               </TabTrigger>

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

@@ -67,7 +67,9 @@ const ProfileSection = () => {
             <div className="text-b3-foreground-muted"> $</div>
             <div className="text-[30px]">{formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 })}</div>
           </h2>
-          <div className="font-neue-montreal-semibold text-base leading-none text-[#0B57C2]">{currentUsername}</div>
+          <div className="b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]">
+            {currentUsername}
+          </div>
         </div>
       </div>
     </div>

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({
@@ -54,7 +60,7 @@ const SettingsContent = ({
 
       {/* Profile Section */}
       <div className="p-5">
-        <div className="flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4">
+        <div className="b3-modal-settings-profile-card flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4">
           <SettingsProfileCard />
         </div>
       </div>
@@ -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/ManageAccount/SettingsMenuItem.tsx

@@ -12,7 +12,7 @@ const SettingsMenuItem = ({ icon, title, subtitle, onClick }: SettingsMenuItemPr
   return (
     <button
       onClick={onClick}
-      className="flex w-full items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#f4f4f5]"
+      className="b3-modal-settings-menu-item flex w-full items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#f4f4f5]"
     >
       <div className="flex size-10 items-center justify-center rounded-full bg-[#f4f4f5]">{icon}</div>
       <div className="flex flex-1 flex-col items-start gap-1 text-left">

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

@@ -162,7 +162,9 @@ const SettingsProfileCard = () => {
           /* Display mode */
           <>
             <div className="flex items-center gap-1">
-              <p className="font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]">{currentUsername}</p>
+              <p className="b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]">
+                {currentUsername}
+              </p>
             </div>
             <button
               onClick={handleEditUsername}

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

@@ -1,5 +1,5 @@
 import { cn } from "@b3dotfun/sdk/shared/utils";
-import { ChevronDown, X } from "lucide-react";
+import { ChevronLeft, X } from "lucide-react";
 import { useModalStore } from "../../stores";
 
 const ModalHeader = ({
@@ -26,14 +26,17 @@ const ModalHeader = ({
 
   return (
     <div
-      className={cn("flex h-16 items-center justify-between border-b border-[#e4e4e7] bg-white px-5 py-3", className)}
+      className={cn(
+        "b3-modal-header flex h-16 items-center justify-between border-b border-[#e4e4e7] bg-white px-5 py-3",
+        className,
+      )}
     >
       {showBackButton ? (
         <button
           onClick={handleBack || navigateBack}
           className="flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70"
         >
-          <ChevronDown className="h-6 w-6 rotate-90 text-[#51525c]" />
+          <ChevronLeft className="h-6 w-6 text-[#51525c]" />
           {showBackWord && <span className="text-sm font-medium">Back</span>}
         </button>
       ) : (

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>