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

package/dist/types/global-account/react/components/icons/XIcon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface XIconProps {
+    className?: string;
+    size?: number;
+    color?: string;
+    style?: React.CSSProperties;
+}
+export declare function XIcon({ className, size, color, style }: XIconProps): import("react/jsx-runtime").JSX.Element;
+export default XIcon;

package/dist/types/global-account/react/hooks/useProfile.d.ts

@@ -9,7 +9,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/dist/types/global-account/react/hooks/useRPMToken.d.ts

@@ -0,0 +1,7 @@
+export declare function useRPMToken(): {
+    token: string;
+    accountId: string;
+    refetch: (queryParams: undefined) => Promise<any>;
+    isLoading: boolean;
+    isError: Error | null;
+};

package/dist/types/global-account/react/stores/useModalStore.d.ts

@@ -291,10 +291,16 @@ export interface AnySpendDepositHypeProps extends BaseModalProps {
     /** Callback function called when the deposit is successful */
     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
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps;
 /**
  * State interface for the modal store
  */

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.3",
+  "version": "0.0.35-alpha.5",
   "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/LinkAccount/LinkAccount.tsx

@@ -1,6 +1,7 @@
+import app from "@b3dotfun/sdk/global-account/app";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
-import { Loader2 } from "lucide-react";
+import { Loader2, Mail, Phone } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { useLinkProfile, useProfiles } from "thirdweb/react";
@@ -8,8 +9,12 @@ import { preAuthenticate } from "thirdweb/wallets";
 import { LinkAccountModalProps, useModalStore } from "../../stores/useModalStore";
 import { getProfileDisplayInfo } from "../../utils/profileDisplay";
 import { useB3 } from "../B3Provider/useB3";
+import { AppleIcon } from "../icons/AppleIcon";
+import { DiscordIcon } from "../icons/DiscordIcon";
+import { FarcasterIcon } from "../icons/FarcasterIcon";
+import { GoogleIcon } from "../icons/GoogleIcon";
+import { XIcon } from "../icons/XIcon";
 import { Button } from "../ui/button";
-import app from "@b3dotfun/sdk/global-account/app";
 type OTPStrategy = "email" | "phone";
 type SocialStrategy = "google" | "x" | "discord" | "apple" | "farcaster";
 type Strategy = OTPStrategy | SocialStrategy;
@@ -18,17 +23,22 @@ interface AuthMethod {
   id: Strategy;
   label: string;
   enabled: boolean;
-  icon?: string;
+  icon: React.ReactNode;
 }
 
 const AUTH_METHODS: AuthMethod[] = [
-  { id: "email", label: "Email", enabled: true },
-  { id: "phone", label: "Phone", enabled: true },
-  { id: "google", label: "Google", enabled: true },
-  { id: "x", label: "X (Twitter)", enabled: true },
-  { id: "discord", label: "Discord", enabled: true },
-  { id: "apple", label: "Apple", enabled: true },
-  { id: "farcaster", label: "Farcaster", enabled: true },
+  { id: "email", label: "Email", enabled: true, icon: <Mail className="text-b3-primary-blue size-6" /> },
+  { id: "phone", label: "Phone", enabled: true, icon: <Phone className="text-b3-primary-blue size-6" /> },
+  { id: "google", label: "Google", enabled: true, icon: <GoogleIcon className="size-6" /> },
+  { id: "x", label: "X (Twitter)", enabled: true, icon: <XIcon className="size-6" /> },
+  { id: "discord", label: "Discord", enabled: true, icon: <DiscordIcon className="size-6" /> },
+  { id: "apple", label: "Apple", enabled: true, icon: <AppleIcon className="size-6" /> },
+  {
+    id: "farcaster",
+    label: "Farcaster",
+    enabled: true,
+    icon: <FarcasterIcon className="size-6" />,
+  },
 ];
 
 export function LinkAccount({
@@ -37,7 +47,8 @@ export function LinkAccount({
   onClose,
   chain,
   partnerId,
-}: LinkAccountModalProps) {
+  className,
+}: LinkAccountModalProps & { className?: string }) {
   const { isLinking, linkingMethod, setLinkingState, navigateBack, setB3ModalContentType } = useModalStore();
   const [selectedMethod, setSelectedMethod] = useState<Strategy | null>(null);
   const [email, setEmail] = useState("");
@@ -288,9 +299,9 @@ export function LinkAccount({
   }
 
   return (
-    <div className="space-y-6 p-6">
-      <div className="flex items-center justify-between">
-        <h2 className="text-b3-grey font-neue-montreal-semibold text-2xl">Link New Account</h2>
+    <div className={`b3-link-account space-y-6 p-6 ${className || ""}`} data-testid="link-account">
+      <div className="b3-link-account-header flex items-center justify-between">
+        <h2 className="b3-link-account-title text-b3-grey font-neue-montreal-semibold text-2xl">Link New Account</h2>
         {selectedMethod && (
           <Button variant="ghost" className="text-b3-grey hover:text-b3-grey/80" onClick={handleBack}>
             Backs
@@ -299,11 +310,13 @@ export function LinkAccount({
       </div>
 
       {!selectedMethod ? (
-        <div className="grid gap-3">
+        <div className="b3-link-account-methods grid gap-3">
           {availableAuthMethods.map(method => (
             <Button
               key={method.id}
-              className="bg-b3-primary-wash hover:bg-b3-primary-wash/70 text-b3-grey font-neue-montreal-semibold h-16 justify-start px-6 text-lg"
+              variant="outline"
+              className="b3-link-account-method-button border-b3-line hover:border-b3-primary-blue/30 hover:bg-b3-primary-blue/5 text-b3-grey font-neue-montreal-medium h-14 justify-start bg-transparent px-6 text-base transition-all duration-200"
+              data-method={method.id}
               onClick={() => {
                 if (method.id === "email" || method.id === "phone") {
                   setSelectedMethod(method.id);
@@ -313,7 +326,16 @@ export function LinkAccount({
               }}
               disabled={linkingMethod === method.id}
             >
-              {isLinking && linkingMethod === method.id ? <Loader2 className="animate-spin" /> : method.label}
+              {isLinking && linkingMethod === method.id ? (
+                <Loader2 className="h-5 w-5 animate-spin" />
+              ) : (
+                <div className="b3-link-account-method-content flex items-center gap-4">
+                  <div className="b3-link-account-method-icon flex items-center justify-center rounded-full">
+                    {method.icon}
+                  </div>
+                  <span className="b3-link-account-method-label font-medium">{method.label}</span>
+                </div>
+              )}
             </Button>
           ))}
           {availableAuthMethods.length === 0 && (
@@ -323,7 +345,7 @@ export function LinkAccount({
           )}
         </div>
       ) : (
-        <div className="space-y-4">
+        <div className="b3-link-account-form space-y-4">
           {selectedMethod === "email" && (
             <div className="space-y-2">
               <label className="text-b3-grey font-neue-montreal-medium text-sm">Email Address</label>