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

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

@@ -0,0 +1,4 @@
+export declare function updateAvatar(avatar: string): Promise<{
+    success: boolean;
+    error?: string;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.35-alpha.2",
+  "version": "0.0.35-alpha.4",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -237,7 +237,7 @@
     "constants"
   ],
   "dependencies": {
-    "@b3dotfun/b3-api": "0.0.48",
+    "@b3dotfun/b3-api": "0.0.49",
     "@b3dotfun/basement-api": "0.0.11",
     "@feathersjs/authentication-client": "5.0.33",
     "@feathersjs/feathers": "5.0.33",
@@ -321,9 +321,10 @@
   "peerDependencies": {
     "@fingerprintjs/fingerprintjs-pro-react": "^2.7.0",
     "@privy-io/react-auth": "^2.8.0",
-    "@react-three/postprocessing": "^2.16.6",
-    "@readyplayerme/visage": "^6.10.0",
-    "@tanstack/react-query": ">=5.55.0",
+    "@react-three/postprocessing": "2.16.6",
+    "@readyplayerme/react-avatar-creator": "0.5.0",
+    "@readyplayerme/visage": "6.10.0",
+    "@tanstack/react-query": "5.55.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-native-mmkv": "^3.2.0",

package/src/global-account/bsmnt.ts

@@ -1,9 +1,12 @@
 import { createClient } from "@b3dotfun/basement-api";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { AuthenticationClient } from "@feathersjs/authentication-client";
 import socketio from "@feathersjs/socketio-client";
 import Cookies from "js-cookie";
 import io from "socket.io-client";
 
+const debug = debugB3React("bsmnt");
+
 // Also use b3 auth token since we are using b3-jwt strategy
 const BSMNT_AUTH_COOKIE_NAME = "b3-auth";
 
@@ -70,4 +73,48 @@ export const resetSocket = () => {
   // reset the socket connection
 };
 
+export function extractAvatarIdFromUrl(url: string): string | null {
+  const regex = /https:\/\/models\.readyplayer\.me\/([a-f0-9]{24})\.[a-zA-Z0-9]+/;
+  const match = url.match(regex);
+  return match ? match[1] : null;
+}
+
+export const authenticateWithB3JWT = async (fullToken: string, params?: Record<string, any>) => {
+  // Do not authenticate if there is no token
+  if (!fullToken) {
+    console.log("No token found, not authenticating");
+    return null;
+  }
+
+  debug("Authenticating with token:12", fullToken);
+  try {
+    const response = await app.authenticate(
+      {
+        strategy: "b3-jwt",
+        accessToken: fullToken,
+      },
+      {
+        query: params || {},
+      },
+    );
+    debug("Authenticated", response);
+
+    // Store streamToken if it exists in the response
+    if (response?.streamToken) {
+      Cookies.set("stream-token", response.streamToken, {
+        expires: new Date(response.authExpires),
+        secure: process.env.NODE_ENV === "production",
+        sameSite: "strict",
+      });
+      debug("Stream token stored in cookies");
+    }
+
+    return response;
+  } catch (error) {
+    debug(`Authentication error:5`, error);
+    debug("Authentication JWT", fullToken);
+    return null;
+  }
+};
+
 export default app;

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

@@ -0,0 +1,90 @@
+"use client";
+
+import { useProfile } from "@b3dotfun/sdk/global-account/react";
+import { useRPMToken } from "@b3dotfun/sdk/global-account/react/hooks/useRPMToken";
+import { updateAvatar } from "@b3dotfun/sdk/global-account/react/utils/updateAvatar";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import {
+  AvatarCreatorConfig,
+  AvatarCreator as AvatarCreatorRPM,
+  AvatarExportedEvent,
+} from "@readyplayerme/react-avatar-creator";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useActiveAccount } from "thirdweb/react";
+
+const debug = debugB3React("AvatarCreator");
+
+const config: AvatarCreatorConfig = {
+  clearCache: true,
+  bodyType: "fullbody",
+  quickStart: true,
+  language: "en",
+};
+
+interface AvatarCreatorProps {
+  onSetAvatar?: () => void;
+  className?: string;
+}
+
+export function AvatarCreator({ onSetAvatar, className }: AvatarCreatorProps) {
+  const { token, refetch: refetchRPMToken } = useRPMToken();
+  const [loading, setIsLoading] = useState(false);
+  const account = useActiveAccount();
+  const { data: profile, refetch: refreshProfile } = useProfile({
+    address: account?.address,
+    fresh: true,
+  });
+
+  const hasAvatar = profile?.avatar;
+
+  const handleOnAvatarExported = async (event: AvatarExportedEvent) => {
+    setIsLoading(true);
+    debug("@@AvatarExportedEvent", event);
+    try {
+      const avatarUpload = await updateAvatar(event.data.url);
+      debug("@@avatarUpload", avatarUpload);
+
+      await refreshProfile();
+      toast.success(
+        hasAvatar ? "Nice look! Your avatar has been updated!" : "Looks great! Your avatar has been saved!",
+      );
+      onSetAvatar?.();
+      await refetchRPMToken(undefined);
+    } catch (e) {
+      debug("@@error:AvatarCreator", e);
+      toast.error("Failed to update avatar. Please try again.");
+    }
+    setIsLoading(false);
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-[80vh] w-full flex-col items-center justify-center gap-4">
+        <div className="border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" />
+        <p className="text-muted-foreground text-sm font-medium">Saving your avatar</p>
+      </div>
+    );
+  }
+
+  if (!token) {
+    return (
+      <div className="flex h-[80vh] w-full flex-col items-center justify-center gap-4">
+        <div className="border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" />
+        <p className="text-muted-foreground text-sm font-medium">Loading avatar creator</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("h-[calc(90vh-2px)] w-full", className)}>
+      <AvatarCreatorRPM
+        className="h-full w-full"
+        subdomain="b3"
+        config={{ ...config, token }}
+        onAvatarExported={handleOnAvatarExported}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,233 @@
+"use client";
+
+import app from "@b3dotfun/sdk/global-account/app";
+import { Button, useB3, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { Check, Loader2, Upload, X } from "lucide-react";
+import { useRef, useState } from "react";
+import { toast } from "sonner";
+import { useActiveAccount } from "thirdweb/react";
+import { upload } from "thirdweb/storage";
+
+const debug = debugB3React("AvatarEditor");
+
+interface AvatarEditorProps {
+  onSetAvatar?: () => void;
+  className?: string;
+}
+
+export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { setUser } = useB3();
+
+  const account = useActiveAccount();
+  const { data: profile, refetch: refreshProfile } = useProfile({
+    address: account?.address,
+    fresh: true,
+  });
+
+  // Thirdweb upload function
+
+  const hasAvatar = profile?.avatar;
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      // Validate file type
+      if (!file.type.startsWith("image/")) {
+        toast.error("Please select an image file");
+        return;
+      }
+
+      // Validate file size (max 5MB)
+      if (file.size > 5 * 1024 * 1024) {
+        toast.error("File size must be less than 5MB");
+        return;
+      }
+
+      setSelectedFile(file);
+
+      // Create preview URL
+      const url = URL.createObjectURL(file);
+      setPreviewUrl(url);
+    }
+  };
+
+  const handleRemoveFile = () => {
+    setSelectedFile(null);
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+      setPreviewUrl(null);
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile) {
+      toast.error("Please select an image first");
+      return;
+    }
+
+    setIsUploading(true);
+    try {
+      debug("Starting upload to IPFS", selectedFile);
+
+      // Upload to IPFS using Thirdweb
+      const ipfsUrl = await upload({
+        client,
+        files: [selectedFile],
+      });
+
+      debug("Upload successful", ipfsUrl);
+
+      // Save avatar URL using profiles service
+      setIsSaving(true);
+      const user = await app.service("users").setAvatar(
+        {
+          avatar: ipfsUrl,
+        },
+        // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
+        {},
+      );
+      // update user
+      // @ts-expect-error this resolved fine, look into why expect-error needed
+      setUser(user);
+
+      // Refresh profile to get updated avatar
+      await refreshProfile();
+
+      toast.success(
+        hasAvatar ? "Nice look! Your avatar has been updated!" : "Looks great! Your avatar has been saved!",
+      );
+
+      onSetAvatar?.();
+
+      // Clean up
+      handleRemoveFile();
+    } catch (error) {
+      debug("Error uploading avatar:", error);
+      toast.error("Failed to upload avatar. Please try again.");
+    } finally {
+      setIsUploading(false);
+      setIsSaving(false);
+    }
+  };
+
+  const handleFileInputClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const isLoading = isUploading || isSaving;
+
+  return (
+    <div className={cn("flex flex-col items-center justify-center space-y-6 p-8", className)}>
+      <div className="space-y-2 text-center">
+        <h2 className="font-neue-montreal-semibold text-b3-grey text-2xl">
+          {hasAvatar ? "Update Your Avatar" : "Set Your Avatar"}
+        </h2>
+        <p className="text-b3-foreground-muted font-neue-montreal-medium">
+          Upload an image to personalize your profile
+        </p>
+      </div>
+
+      {/* Current Avatar Display */}
+      {hasAvatar && !previewUrl && (
+        <div className="relative">
+          <div className="border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4">
+            <img src={profile.avatar} alt="Current avatar" className="h-full w-full object-cover" />
+          </div>
+        </div>
+      )}
+
+      {/* File Upload Area */}
+      <div className="w-full max-w-md">
+        {!selectedFile ? (
+          <div
+            onClick={handleFileInputClick}
+            className="border-b3-line hover:border-b3-primary-blue hover:bg-b3-primary-wash/20 cursor-pointer rounded-xl border-2 border-dashed p-8 text-center transition-colors"
+          >
+            <Upload className="text-b3-grey mx-auto mb-4 h-12 w-12" />
+            <p className="text-b3-grey font-neue-montreal-semibold mb-2">Click to select an image</p>
+            <p className="text-b3-foreground-muted font-neue-montreal-medium text-sm">PNG, JPG, or GIF up to 5MB</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {/* Preview */}
+            <div className="relative">
+              <div className="border-b3-primary-blue mx-auto h-32 w-32 overflow-hidden rounded-full border-4">
+                {previewUrl ? (
+                  <img src={previewUrl} alt="Preview" className="h-full w-full object-cover" />
+                ) : (
+                  <div className="bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full">
+                    <p className="text-b3-grey font-neue-montreal-semibold text-sm">No file selected</p>
+                  </div>
+                )}
+              </div>
+              <button
+                onClick={handleRemoveFile}
+                className="bg-b3-negative absolute -right-2 -top-2 flex h-8 w-8 items-center justify-center rounded-full text-white transition-colors hover:bg-red-600"
+                disabled={isLoading}
+              >
+                <X size={16} />
+              </button>
+            </div>
+
+            {/* File Info */}
+            <div className="space-y-1 text-center">
+              <p className="text-b3-grey font-neue-montreal-semibold text-sm">{selectedFile.name}</p>
+              <p className="text-b3-foreground-muted font-neue-montreal-medium text-xs">
+                {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Hidden file input */}
+        <input ref={fileInputRef} type="file" accept="image/*" onChange={handleFileSelect} className="hidden" />
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex w-full max-w-md gap-3">
+        {selectedFile && (
+          <Button
+            onClick={handleUpload}
+            disabled={isLoading}
+            className="bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white"
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {isUploading ? "Uploading..." : "Saving..."}
+              </>
+            ) : (
+              <>
+                <Check className="mr-2 h-4 w-4" />
+                {hasAvatar ? "Update Avatar" : "Set Avatar"}
+              </>
+            )}
+          </Button>
+        )}
+
+        <Button variant="outline" onClick={handleFileInputClick} disabled={isLoading} className="flex-1">
+          <Upload className="mr-2 h-4 w-4" />
+          {selectedFile ? "Change Image" : "Select Image"}
+        </Button>
+      </div>
+
+      {/* Help Text */}
+      <div className="text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs">
+        <p>
+          Your avatar will be uploaded to IPFS and stored securely. Make sure you have the rights to use this image.
+        </p>
+      </div>
+    </div>
+  );
+}

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/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">