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

package/dist/cjs/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/cjs/global-account/react/hooks/useRPMToken.js

@@ -0,0 +1,11 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRPMToken = useRPMToken;
+const useQueryBSMNT_1 = require("../../../global-account/react/hooks/useQueryBSMNT");
+function useRPMToken() {
+    const { data, runQuery: refetch, isLoading, error: isError, } = (0, useQueryBSMNT_1.useQueryBSMNT)("profiles", "getReadyPlayerMeToken", undefined, true);
+    const token = data?.token || "";
+    const accountId = data?.accountId || "";
+    return { token, accountId, refetch, isLoading, isError };
+}

package/dist/cjs/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/cjs/global-account/react/utils/updateAvatar.d.ts

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

package/dist/cjs/global-account/react/utils/updateAvatar.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateAvatar = updateAvatar;
+const bsmnt_1 = __importStar(require("../../../global-account/bsmnt"));
+const debug_1 = require("../../../shared/utils/debug");
+const debug = (0, debug_1.debugB3React)("updateAvatar");
+async function updateAvatar(avatar) {
+    try {
+        // Extract avatar ID from URL
+        const avatarID = (0, bsmnt_1.extractAvatarIdFromUrl)(avatar);
+        if (!avatarID) {
+            throw new Error("Invalid avatar URL");
+        }
+        // Set the avatar in the profiles service
+        return await bsmnt_1.default.service("profiles").setAvatar({ avatarUrl: String(avatar), avatarID: String(avatarID) }, {});
+    }
+    catch (error) {
+        debug("Failed to update avatar:", error);
+        throw error; // Re-throw to handle in component
+    }
+}

package/dist/esm/global-account/bsmnt.d.ts

@@ -1,4 +1,6 @@
 declare const app: import("@b3dotfun/basement-api").ClientApplication;
 export declare const authenticate: (accessToken: string, identityToken: string, params?: Record<string, any>) => Promise<import("@feathersjs/authentication").AuthenticationResult | null>;
 export declare const resetSocket: () => void;
+export declare function extractAvatarIdFromUrl(url: string): string | null;
+export declare const authenticateWithB3JWT: (fullToken: string, params?: Record<string, any>) => Promise<import("@feathersjs/authentication").AuthenticationResult | null>;
 export default app;

package/dist/esm/global-account/bsmnt.js

@@ -1,8 +1,10 @@
 import { createClient } from "@b3dotfun/basement-api";
+import { debugB3React } from "../shared/utils/debug.js";
 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";
 const BSMNT_API_URL = process.env.EXPO_PUBLIC_BSMNT_API ||
@@ -58,4 +60,41 @@ export const resetSocket = () => {
     socket.connect();
     // reset the socket connection
 };
+export function extractAvatarIdFromUrl(url) {
+    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, params) => {
+    // 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/dist/esm/global-account/react/components/AvatarCreator/AvatarCreator.d.ts

@@ -0,0 +1,6 @@
+interface AvatarCreatorProps {
+    onSetAvatar?: () => void;
+    className?: string;
+}
+export declare function AvatarCreator({ onSetAvatar, className }: AvatarCreatorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/global-account/react/components/AvatarCreator/AvatarCreator.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProfile } from "../../../../global-account/react/index.js";
+import { useRPMToken } from "../../../../global-account/react/hooks/useRPMToken.js";
+import { updateAvatar } from "../../../../global-account/react/utils/updateAvatar.js";
+import { cn } from "../../../../shared/utils/cn.js";
+import { debugB3React } from "../../../../shared/utils/debug.js";
+import { AvatarCreator as AvatarCreatorRPM, } from "@readyplayerme/react-avatar-creator";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useActiveAccount } from "thirdweb/react";
+const debug = debugB3React("AvatarCreator");
+const config = {
+    clearCache: true,
+    bodyType: "fullbody",
+    quickStart: true,
+    language: "en",
+};
+export function AvatarCreator({ onSetAvatar, className }) {
+    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) => {
+        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 (_jsxs("div", { className: "flex h-[80vh] w-full flex-col items-center justify-center gap-4", children: [_jsx("div", { className: "border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: "Saving your avatar" })] }));
+    }
+    if (!token) {
+        return (_jsxs("div", { className: "flex h-[80vh] w-full flex-col items-center justify-center gap-4", children: [_jsx("div", { className: "border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: "Loading avatar creator" })] }));
+    }
+    return (_jsx("div", { className: cn("h-[calc(90vh-2px)] w-full", className), children: _jsx(AvatarCreatorRPM, { className: "h-full w-full", subdomain: "b3", config: { ...config, token }, onAvatarExported: handleOnAvatarExported }) }));
+}

package/dist/esm/global-account/react/components/AvatarEditor/AvatarEditor.d.ts

@@ -0,0 +1,6 @@
+interface AvatarEditorProps {
+    onSetAvatar?: () => void;
+    className?: string;
+}
+export declare function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/global-account/react/components/AvatarEditor/AvatarEditor.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import app from "../../../../global-account/app.js";
+import { Button, useB3, useProfile } from "../../../../global-account/react/index.js";
+import { cn } from "../../../../shared/utils/cn.js";
+import { debugB3React } from "../../../../shared/utils/debug.js";
+import { client } from "../../../../shared/utils/thirdweb.js";
+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");
+export function AvatarEditor({ onSetAvatar, className }) {
+    const [selectedFile, setSelectedFile] = useState(null);
+    const [previewUrl, setPreviewUrl] = useState(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const fileInputRef = useRef(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) => {
+        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 (_jsxs("div", { className: cn("flex flex-col items-center justify-center space-y-6 p-8", className), children: [_jsxs("div", { className: "space-y-2 text-center", children: [_jsx("h2", { className: "font-neue-montreal-semibold text-b3-grey text-2xl", children: hasAvatar ? "Update Your Avatar" : "Set Your Avatar" }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium", children: "Upload an image to personalize your profile" })] }), hasAvatar && !previewUrl && (_jsx("div", { className: "relative", children: _jsx("div", { className: "border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4", children: _jsx("img", { src: profile.avatar, alt: "Current avatar", className: "h-full w-full object-cover" }) }) })), _jsxs("div", { className: "w-full max-w-md", children: [!selectedFile ? (_jsxs("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", children: [_jsx(Upload, { className: "text-b3-grey mx-auto mb-4 h-12 w-12" }), _jsx("p", { className: "text-b3-grey font-neue-montreal-semibold mb-2", children: "Click to select an image" }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "PNG, JPG, or GIF up to 5MB" })] })) : (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "border-b3-primary-blue mx-auto h-32 w-32 overflow-hidden rounded-full border-4", children: previewUrl ? (_jsx("img", { src: previewUrl, alt: "Preview", className: "h-full w-full object-cover" })) : (_jsx("div", { className: "bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full", children: _jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "No file selected" }) })) }), _jsx("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, children: _jsx(X, { size: 16 }) })] }), _jsxs("div", { className: "space-y-1 text-center", children: [_jsx("p", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: selectedFile.name }), _jsxs("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-xs", children: [(selectedFile.size / 1024 / 1024).toFixed(2), " MB"] })] })] })), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, className: "hidden" })] }), _jsxs("div", { className: "flex w-full max-w-md gap-3", children: [selectedFile && (_jsx(Button, { onClick: handleUpload, disabled: isLoading, className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white", children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isUploading ? "Uploading..." : "Saving..."] })) : (_jsxs(_Fragment, { children: [_jsx(Check, { className: "mr-2 h-4 w-4" }), hasAvatar ? "Update Avatar" : "Set Avatar"] })) })), _jsxs(Button, { variant: "outline", onClick: handleFileInputClick, disabled: isLoading, className: "flex-1", children: [_jsx(Upload, { className: "mr-2 h-4 w-4" }), selectedFile ? "Change Image" : "Select Image"] })] }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs", children: _jsx("p", { children: "Your avatar will be uploaded to IPFS and stored securely. Make sure you have the rights to use this image." }) })] }));
+}

package/dist/esm/global-account/react/components/B3DynamicModal.js

@@ -4,6 +4,7 @@ import { AnySpendDepositHype } from "../../../anyspend/react/components/Anyspend
 import { useIsMobile, useModalStore } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/cn.js";
 import { debugB3React } from "../../../shared/utils/debug.js";
+import { AvatarEditor } from "./AvatarEditor/AvatarEditor.js";
 import { useB3 } from "./B3Provider/useB3.js";
 import { LinkAccount } from "./LinkAccount/LinkAccount.js";
 import { ManageAccount } from "./ManageAccount/ManageAccount.js";
@@ -29,6 +30,7 @@ export function B3DynamicModal() {
         "anySpendSignatureMint",
         "anySpendBondKit",
         "linkAccount",
+        "avatarEditor",
     ];
     const freestyleTypes = [
         "anySpendNft",
@@ -80,6 +82,8 @@ export function B3DynamicModal() {
                 return _jsx(LinkAccount, { ...contentType });
             case "anySpendDepositHype":
                 return _jsx(AnySpendDepositHype, { ...contentType, mode: "modal" });
+            case "avatarEditor":
+                return _jsx(AvatarEditor, { onSetAvatar: contentType.onSuccess });
             // Add other modal types here
             default:
                 return null;
@@ -89,5 +93,9 @@ export function B3DynamicModal() {
     const ModalContent = isMobile ? DrawerContent : DialogContent;
     const ModalTitle = isMobile ? DrawerTitle : DialogTitle;
     const ModalDescription = isMobile ? DrawerDescription : DialogDescription;
-    return (_jsx(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: _jsxs(ModalContent, { className: cn(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"), hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [history.length > 0 && contentType?.showBackButton && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }) }));
+    return (_jsxs(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: [_jsxs(ModalContent, { className: cn(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", 
+                // 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, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [history.length > 0 && contentType?.showBackButton && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }), contentType?.type === "avatarEditor" && (_jsx("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", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
 }

package/dist/esm/global-account/react/components/LinkAccount/LinkAccount.d.ts

@@ -1,2 +1,4 @@
 import { LinkAccountModalProps } from "../../stores/useModalStore";
-export declare function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, }: LinkAccountModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, className, }: LinkAccountModalProps & {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/global-account/react/components/LinkAccount/LinkAccount.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import app from "../../../../global-account/app.js";
 import { ecosystemWalletId } from "../../../../shared/constants/index.js";
 import { client } from "../../../../shared/utils/thirdweb.js";
-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";
@@ -9,18 +10,27 @@ import { preAuthenticate } from "thirdweb/wallets";
 import { useModalStore } from "../../stores/useModalStore.js";
 import { getProfileDisplayInfo } from "../../utils/profileDisplay.js";
 import { useB3 } from "../B3Provider/useB3.js";
+import { AppleIcon } from "../icons/AppleIcon.js";
+import { DiscordIcon } from "../icons/DiscordIcon.js";
+import { FarcasterIcon } from "../icons/FarcasterIcon.js";
+import { GoogleIcon } from "../icons/GoogleIcon.js";
+import { XIcon } from "../icons/XIcon.js";
 import { Button } from "../ui/button.js";
-import app from "../../../../global-account/app.js";
 const AUTH_METHODS = [
-    { 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: _jsx(Mail, { className: "text-b3-primary-blue size-6" }) },
+    { id: "phone", label: "Phone", enabled: true, icon: _jsx(Phone, { className: "text-b3-primary-blue size-6" }) },
+    { id: "google", label: "Google", enabled: true, icon: _jsx(GoogleIcon, { className: "size-6" }) },
+    { id: "x", label: "X (Twitter)", enabled: true, icon: _jsx(XIcon, { className: "size-6" }) },
+    { id: "discord", label: "Discord", enabled: true, icon: _jsx(DiscordIcon, { className: "size-6" }) },
+    { id: "apple", label: "Apple", enabled: true, icon: _jsx(AppleIcon, { className: "size-6" }) },
+    {
+        id: "farcaster",
+        label: "Farcaster",
+        enabled: true,
+        icon: _jsx(FarcasterIcon, { className: "size-6" }),
+    },
 ];
-export function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, }) {
+export function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, className, }) {
     const { isLinking, linkingMethod, setLinkingState, navigateBack, setB3ModalContentType } = useModalStore();
     const [selectedMethod, setSelectedMethod] = useState(null);
     const [email, setEmail] = useState("");
@@ -239,12 +249,12 @@ export function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, ch
     if (!account) {
         return _jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "Please connect your account first" });
     }
-    return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-b3-grey font-neue-montreal-semibold text-2xl", children: "Link New Account" }), selectedMethod && (_jsx(Button, { variant: "ghost", className: "text-b3-grey hover:text-b3-grey/80", onClick: handleBack, children: "Backs" }))] }), !selectedMethod ? (_jsxs("div", { className: "grid gap-3", children: [availableAuthMethods.map(method => (_jsx(Button, { 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", onClick: () => {
+    return (_jsxs("div", { className: `b3-link-account space-y-6 p-6 ${className || ""}`, "data-testid": "link-account", children: [_jsxs("div", { className: "b3-link-account-header flex items-center justify-between", children: [_jsx("h2", { className: "b3-link-account-title text-b3-grey font-neue-montreal-semibold text-2xl", children: "Link New Account" }), selectedMethod && (_jsx(Button, { variant: "ghost", className: "text-b3-grey hover:text-b3-grey/80", onClick: handleBack, children: "Backs" }))] }), !selectedMethod ? (_jsxs("div", { className: "b3-link-account-methods grid gap-3", children: [availableAuthMethods.map(method => (_jsx(Button, { 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);
                             }
                             else {
                                 handleSocialLink(method.id);
                             }
-                        }, disabled: linkingMethod === method.id, children: isLinking && linkingMethod === method.id ? _jsx(Loader2, { className: "animate-spin" }) : method.label }, method.id))), availableAuthMethods.length === 0 && (_jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "All available authentication methods have been connected" }))] })) : (_jsxs("div", { className: "space-y-4", children: [selectedMethod === "email" && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Email Address" }), _jsx("input", { type: "email", placeholder: "Enter your email", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: email, onChange: e => setEmail(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "email") })] })), selectedMethod === "phone" && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Phone Number" }), _jsx("input", { type: "tel", placeholder: "Enter your phone number", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: phone, onChange: e => setPhone(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "phone") }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Include country code (e.g., +1 for US)" })] })), error && _jsx("div", { className: "text-b3-negative font-neue-montreal-medium py-2 text-sm", children: error }), otpSent ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Verification Code" }), _jsx("input", { type: "text", placeholder: "Enter verification code", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: otp, onChange: e => setOtp(e.target.value) })] }), _jsx(Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleLinkAccount, children: "Link Account" })] })) : (_jsx(Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleSendOTP, disabled: (!email && !phone) || (isLinking && linkingMethod === selectedMethod), children: isLinking && linkingMethod === selectedMethod ? (_jsx(Loader2, { className: "animate-spin" })) : ("Send Verification Code") }))] }))] }));
+                        }, disabled: linkingMethod === method.id, children: isLinking && linkingMethod === method.id ? (_jsx(Loader2, { className: "h-5 w-5 animate-spin" })) : (_jsxs("div", { className: "b3-link-account-method-content flex items-center gap-4", children: [_jsx("div", { className: "b3-link-account-method-icon flex items-center justify-center rounded-full", children: method.icon }), _jsx("span", { className: "b3-link-account-method-label font-medium", children: method.label })] })) }, method.id))), availableAuthMethods.length === 0 && (_jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "All available authentication methods have been connected" }))] })) : (_jsxs("div", { className: "b3-link-account-form space-y-4", children: [selectedMethod === "email" && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Email Address" }), _jsx("input", { type: "email", placeholder: "Enter your email", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: email, onChange: e => setEmail(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "email") })] })), selectedMethod === "phone" && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Phone Number" }), _jsx("input", { type: "tel", placeholder: "Enter your phone number", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: phone, onChange: e => setPhone(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "phone") }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Include country code (e.g., +1 for US)" })] })), error && _jsx("div", { className: "text-b3-negative font-neue-montreal-medium py-2 text-sm", children: error }), otpSent ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Verification Code" }), _jsx("input", { type: "text", placeholder: "Enter verification code", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: otp, onChange: e => setOtp(e.target.value) })] }), _jsx(Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleLinkAccount, children: "Link Account" })] })) : (_jsx(Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleSendOTP, disabled: (!email && !phone) || (isLinking && linkingMethod === selectedMethod), children: isLinking && linkingMethod === selectedMethod ? (_jsx(Loader2, { className: "animate-spin" })) : ("Send Verification Code") }))] }))] }));
 }

package/dist/esm/global-account/react/components/ManageAccount/BalanceContent.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, CopyToClipboard, useAuthentication, useB3BalanceFromAddresses, useModalStore, useNativeBalance, useProfile, } from "../../../../global-account/react/index.js";
+import { Button, CopyToClipboard, useAuthentication, useB3, useB3BalanceFromAddresses, useModalStore, useNativeBalance, useProfile, } from "../../../../global-account/react/index.js";
 import { BankIcon } from "../../../../global-account/react/components/icons/BankIcon.js";
 import { SignOutIcon } from "../../../../global-account/react/components/icons/SignOutIcon.js";
 import { SwapIcon } from "../../../../global-account/react/components/icons/SwapIcon.js";
 import { formatUsername } from "../../../../shared/utils/index.js";
+import { getIpfsUrl } from "../../../../shared/utils/ipfs.js";
 import { Loader2, Pencil } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
@@ -23,11 +24,24 @@ export function BalanceContent({ onLogout, partnerId, showDeposit = true, showSw
         address: eoaAddress || account?.address,
         fresh: true,
     });
-    const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
+    const { user } = useB3();
+    const { setB3ModalOpen, setB3ModalContentType, navigateBack } = useModalStore();
     const { logout } = useAuthentication(partnerId);
     const [logoutLoading, setLogoutLoading] = useState(false);
     const [openAccordions, setOpenAccordions] = useState([]);
     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);
     // Balance data fetching
@@ -71,7 +85,7 @@ export function BalanceContent({ onLogout, partnerId, showDeposit = true, showSw
         setB3ModalOpen(false);
         setLogoutLoading(false);
     };
-    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [profile?.avatar ? (_jsx("img", { src: profile?.avatar, alt: "Profile", className: "size-24 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash size-24 rounded-full" })), _jsx("div", { className: "bg-b3-grey border-b3-background absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4", children: _jsx(Pencil, { size: 16, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info", children: [_jsx("h2", { className: "text-b3-grey text-xl font-semibold", children: profile?.displayName || formatUsername(profile?.name || "") }), _jsxs("div", { className: "address-button border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [_jsx("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(account?.address || "", 6) }), _jsx(CopyToClipboard, { text: account?.address || "" })] })] })] }) }), (showDeposit || showSwap) && (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [showDeposit && (_jsxs(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: () => {
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "Profile", className: "size-24 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash size-24 rounded-full" })), _jsx("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", children: _jsx(Pencil, { size: 16, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info", children: [_jsx("h2", { className: "text-b3-grey text-xl font-semibold", children: profile?.displayName || formatUsername(profile?.name || "") }), _jsxs("div", { className: "address-button border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [_jsx("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(account?.address || "", 6) }), _jsx(CopyToClipboard, { text: account?.address || "" })] })] })] }) }), (showDeposit || showSwap) && (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [showDeposit && (_jsxs(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",

package/dist/esm/global-account/react/components/icons/AppleIcon.d.ts

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

package/dist/esm/global-account/react/components/icons/AppleIcon.js

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

package/dist/esm/global-account/react/components/icons/DiscordIcon.d.ts

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

package/dist/esm/global-account/react/components/icons/DiscordIcon.js

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

package/dist/esm/global-account/react/components/icons/FarcasterIcon.d.ts

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

package/dist/esm/global-account/react/components/icons/FarcasterIcon.js

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

package/dist/esm/global-account/react/components/icons/GoogleIcon.d.ts

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

package/dist/esm/global-account/react/components/icons/GoogleIcon.js

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

package/dist/esm/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/esm/global-account/react/components/icons/XIcon.js

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