@b3dotfun/sdk 0.0.65-alpha.0 → 0.0.65-test.3

package/src/global-account/react/components/icons/CopyIcon.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from "react";
+
+export function CopyIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M3.33333 3.33333V2C3.33333 1.63181 3.63181 1.33333 4 1.33333H10C10.3682 1.33333 10.6667 1.63181 10.6667 2V8C10.6667 8.36819 10.3682 8.66667 10 8.66667H8.66667M2 3.33333H8C8.36819 3.33333 8.66667 3.63181 8.66667 4V10C8.66667 10.3682 8.36819 10.6667 8 10.6667H2C1.63181 10.6667 1.33333 10.3682 1.33333 10V4C1.33333 3.63181 1.63181 3.33333 2 3.33333Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/global-account/react/components/icons/LinkIcon.tsx

@@ -0,0 +1,15 @@
+import { SVGProps } from "react";
+
+const LinkIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M10.8333 9.16667L15.8333 4.16667M17.5 2.5L15.8333 4.16667L17.5 2.5ZM11.6667 4.16667H15.8333V8.33333L11.6667 4.16667ZM9.16667 10.8333L4.16667 15.8333L9.16667 10.8333ZM8.33333 15.8333H4.16667V11.6667L8.33333 15.8333ZM15.8333 10V15.8333H10L15.8333 10ZM4.16667 4.16667V10L10 4.16667H4.16667Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default LinkIcon;

package/src/global-account/react/components/icons/LockIcon.tsx

@@ -0,0 +1,15 @@
+import { SVGProps } from "react";
+
+const LockIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M14.1667 9.16667V6.66667C14.1667 4.36548 12.3012 2.5 10 2.5C7.69881 2.5 5.83333 4.36548 5.83333 6.66667V9.16667M7.5 14.1667C7.5 15.0871 8.24619 15.8333 9.16667 15.8333H10.8333C11.7538 15.8333 12.5 15.0871 12.5 14.1667C12.5 13.2462 11.7538 12.5 10.8333 12.5H9.16667C8.24619 12.5 7.5 11.7538 7.5 10.8333C7.5 9.91286 8.24619 9.16667 9.16667 9.16667H10.8333C11.7538 9.16667 12.5 9.91286 12.5 10.8333"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default LockIcon;

package/src/global-account/react/components/icons/WalletIcon.tsx

@@ -0,0 +1,21 @@
+import { SVGProps } from "react";
+
+export function WalletIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <rect width="40" height="40" rx="20" fill="#F4F4F5" />
+      <path
+        d="M28 16H27V14C27 13.4696 26.7893 12.9609 26.4142 12.5858C26.0391 12.2107 25.5304 12 25 12H15C14.4696 12 13.9609 12.2107 13.5858 12.5858C13.2107 12.9609 13 13.4696 13 14V26C13 26.5304 13.2107 27.0391 13.5858 27.4142C13.9609 27.7893 14.4696 28 15 28H27C27.5304 28 28.0391 27.7893 28.4142 27.4142C28.7893 27.0391 29 26.5304 29 26V18C29 17.4696 28.7893 16.9609 28.4142 16.5858C28.0391 16.2107 27.5304 16 27 16ZM15 14H25V16H15V14ZM27 22H25C24.7348 22 24.4804 21.8946 24.2929 21.7071C24.1054 21.5196 24 21.2652 24 21C24 20.7348 24.1054 20.4804 24.2929 20.2929C24.4804 20.1054 24.7348 20 25 20H27V22Z"
+        fill="#71717A"
+      />
+    </svg>
+  );
+}

package/src/global-account/react/components/index.ts

@@ -1,3 +1,4 @@
+// TODO woj: Barrel file for all components, this might be reason of bundle size issues
 // Core Components
 export { B3DynamicModal } from "./B3DynamicModal";
 export { B3Provider, InnerProvider } from "./B3Provider/B3Provider";
@@ -19,9 +20,14 @@ export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } fro
 // ManageAccount Components
 export { ManageAccount } from "./ManageAccount/ManageAccount";
 
-// Profile Components
-export { AvatarEditor } from "./AvatarEditor/AvatarEditor";
-export { ProfileEditor } from "./ProfileEditor/ProfileEditor";
+// Deposit Components
+export { Deposit } from "./Deposit/Deposit";
+
+// Send Components
+export { Send } from "./Send/Send";
+
+// Media Components
+export { IPFSMediaRenderer } from "./IPFSMediaRenderer/IPFSMediaRenderer";
 
 // RequestPermissions Components
 export { RequestPermissions } from "./RequestPermissions/RequestPermissions";
@@ -100,12 +106,12 @@ export { ScrollArea, ScrollBar } from "./ui/scroll-area";
 export { ShinyButton } from "./ui/ShinyButton";
 export { Skeleton } from "./ui/skeleton";
 export {
-  TabTrigger as TabTriggerPrimitive,
   TabsContent as TabsContentPrimitive,
   TabsList as TabsListPrimitive,
   Tabs as TabsPrimitive,
+  TabTrigger as TabTriggerPrimitive,
 } from "./ui/Tabs";
-export { TabTrigger, Tabs, TabsContent, TabsList, TabsTransitionWrapper } from "./ui/TabSystem";
+export { Tabs, TabsContent, TabsList, TabsTransitionWrapper, TabTrigger } from "./ui/TabSystem";
 export { TextLoop } from "./ui/text-loop";
 export { TextShimmer } from "./ui/text-shimmer";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";

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

@@ -16,26 +16,18 @@ export const Tabs = ({
 );
 
 export function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
-  return (
-    <TabsPrimitive.List
-      className={cn(
-        "border-b3-react-border bg-b3-react-background inline-flex h-12 w-full items-center justify-center rounded-lg border",
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <TabsPrimitive.List className={cn("", className)} {...props} />;
 }
 
 export function TabTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
   return (
     <TabsPrimitive.Trigger
       className={cn(
-        "inline-flex h-full items-center justify-center whitespace-nowrap px-3 text-sm font-medium transition-all",
+        "text-md inline-flex h-full items-center justify-center whitespace-nowrap px-3 font-semibold transition-all",
         "focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
-        "data-[state=active]:bg-b3-react-subtle data-[state=active]:text-b3-react-primary data-[state=active]:font-bold",
-        "border-b3-react-border hover:text-b3-react-foreground data-[state=inactive]:border-b3-react-border data-[state=inactive]:text-b3-react-muted-foreground",
-        "flex-1 border-r",
+        "data-[state=active]:text-b3-react-primary data-[state=active]:font-bold",
+        "hover:text-b3-react-foreground data-[state=inactive]:text-b3-react-muted-foreground",
+        "flex-1",
         className,
       )}
       {...props}

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

@@ -42,7 +42,7 @@ type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.
 
 const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<DialogContentElement>> =
   React.forwardRef<DialogContentElement, DialogContentProps>(
-    ({ className, children, hideCloseButton = false, closeBtnClassName, ...props }, ref) => {
+    ({ className, children, hideCloseButton = true, closeBtnClassName, ...props }, ref) => {
       const container = typeof window !== "undefined" ? document.getElementById("b3-root") : null;
       return (
         <DialogPortal container={container}>
@@ -50,7 +50,7 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
           <DialogPrimitive.Content
             ref={ref}
             className={cn(
-              "bg-b3-react-background fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg !outline-none",
+              "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border shadow-lg !outline-none",
               "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500",
               "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
               "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
@@ -60,18 +60,36 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
             )}
             {...props}
           >
-            {children}
-            {!hideCloseButton && (
-              <DialogPrimitive.Close
-                className={cn(
-                  "modal-close-button data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400",
-                  closeBtnClassName,
-                )}
-              >
-                <X className="h-5 w-5" />
-                <span className="sr-only">Close</span>
-              </DialogPrimitive.Close>
-            )}
+            <div className="flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)]">
+              {children}
+              {!hideCloseButton && (
+                <DialogPrimitive.Close
+                  className={cn(
+                    "modal-close-button data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400",
+                    closeBtnClassName,
+                  )}
+                >
+                  <X className="h-5 w-5" />
+                  <span className="sr-only">Close</span>
+                </DialogPrimitive.Close>
+              )}
+            </div>
+            {/* Global Account Footer */}
+            <div className="flex items-center justify-center gap-1.5 pt-[10px]">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M2 4.66667C2 3.19391 3.19391 2 4.66667 2H11.3333C12.8061 2 14 3.19391 14 4.66667V11.3333C14 12.8061 12.8061 14 11.3333 14H4.66667C3.19391 14 2 12.8061 2 11.3333V4.66667Z"
+                  fill="#0B57C2"
+                />
+                <path
+                  d="M5.33333 6C5.33333 5.63181 5.63181 5.33333 6 5.33333H10C10.3682 5.33333 10.6667 5.63181 10.6667 6V10C10.6667 10.3682 10.3682 10.6667 10 10.6667H6C5.63181 10.6667 5.33333 10.3682 5.33333 10V6Z"
+                  fill="white"
+                />
+              </svg>
+              <span className="font-neue-montreal-semibold text-xs uppercase leading-none tracking-[0.72px] text-[#0B57C2]">
+                Global Account
+              </span>
+            </div>
           </DialogPrimitive.Content>
         </DialogPortal>
       );

package/src/global-account/react/hooks/index.ts

@@ -26,9 +26,12 @@ export { useOneBalance } from "./useOneBalance";
 export {
   useProfile,
   useProfilePreference,
+  useProfileSettings,
+  useDisplayName,
   type CombinedProfile,
   type PreferenceRequestBody,
   type Profile,
+  type DisplayNameRequestBody,
 } from "./useProfile";
 export { useQueryB3 } from "./useQueryB3";
 export { useQueryBSMNT } from "./useQueryBSMNT";

package/src/global-account/react/hooks/useAccountWallet.tsx

@@ -112,3 +112,29 @@ export function useAccountWallet(): {
 
   return res;
 }
+
+export function useAccountWalletImage(): string {
+  const { account, user } = useB3();
+
+  const activeWallet = useActiveWallet();
+  const connectedWallets = useConnectedWallets();
+
+  const connectedSmartWallet = connectedWallets.find(wallet => wallet.id === ecosystemWalletId);
+  const connectedEOAWallet = connectedWallets.find(wallet => wallet.id !== ecosystemWalletId);
+  const isActiveSmartWallet = activeWallet?.id === connectedSmartWallet?.id;
+
+  const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
+
+  // If not EOA sign in, then we need to show the smart wallet icon
+  const lastAuthProvider = useLastAuthProvider();
+
+  const smartWalletIcon =
+    lastAuthProvider && !connectedEOAWallet
+      ? socialIcons[lastAuthProvider as keyof typeof socialIcons]
+      : "https://gradvatar.com/0x0000000000000000000000000000000000000000"; // show smart wallet of eoa wallet is gradvatar
+
+  const { data: profileData } = useProfile({ address: account?.address });
+  const avatarUrl = user?.avatar || profileData?.avatar;
+
+  return avatarUrl || (isActiveSmartWallet ? smartWalletIcon : walletImage) || "";
+}

package/src/global-account/react/hooks/useB3BalanceFromAddresses.ts

@@ -104,6 +104,7 @@ export function useB3BalanceFromAddresses(
     enabled: (options?.enabled ?? true) && normalizedAddresses.length > 0,
     refetchInterval: options?.refetchInterval ?? 30000, // Default 30s refresh
     staleTime: 10000, // Consider data stale after 10s
+    structuralSharing: false, // Disable structural sharing because data contains BigInt values
   });
 }
 

package/src/global-account/react/stores/index.ts

@@ -1,5 +1,6 @@
 export { useAuthStore } from "./useAuthStore";
 export { useModalStore } from "./useModalStore";
+export { useRecentAddressesStore } from "./useRecentAddressesStore";
 
 export type {
   AnySpendBuySpinProps,

package/src/global-account/react/stores/useModalStore.ts

@@ -82,9 +82,9 @@ export interface ManageAccountModalProps extends BaseModalProps {
   /** Partner ID */
   partnerId: string;
   /** Active Tab */
-  activeTab?: "overview" | "tokens" | "nfts" | "apps" | "settings";
+  activeTab?: "home" | "tokens" | "nfts" | "apps" | "settings" | "swap";
   /** Function to set the active tab */
-  setActiveTab?: (tab: "overview" | "tokens" | "nfts" | "apps" | "settings") => void;
+  setActiveTab?: (tab: "home" | "tokens" | "nfts" | "apps" | "settings" | "swap") => void;
   /** Whether to show the referral information */
   showReferralInfo?: boolean;
   /** Whether to show the swap button */
@@ -345,6 +345,16 @@ export interface LinkAccountModalProps extends BaseModalProps {
   chain: Chain;
 }
 
+export interface LinkNewAccountModalProps extends BaseModalProps {
+  type: "linkNewAccount";
+  showBackButton?: boolean;
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+  onClose?: () => void;
+  partnerId: string;
+  chain: Chain;
+}
+
 export interface AnySpendDepositHypeProps extends BaseModalProps {
   /** Modal type identifier */
   type: "anySpendDepositHype";
@@ -373,13 +383,30 @@ export interface AvatarEditorModalProps extends BaseModalProps {
   onSuccess?: () => void;
 }
 
-export interface ProfileEditorModalProps extends BaseModalProps {
+/**
+ * Props for the Deposit modal
+ * Allows users to deposit tokens into their global account
+ */
+export interface DepositModalProps extends BaseModalProps {
   /** Modal type identifier */
-  type: "profileEditor";
-  /** Callback function called when profile is successfully updated */
+  type: "deposit";
+  /** Callback function called when deposit is successful */
   onSuccess?: () => void;
 }
 
+/**
+ * Props for the Send modal
+ * Allows users to send tokens from their global account to another address
+ */
+export interface SendModalProps extends BaseModalProps {
+  /** Modal type identifier */
+  type: "send";
+  /** Pre-filled recipient address (optional) */
+  recipientAddress?: string;
+  /** Callback function called when send is successful */
+  onSuccess?: (txHash?: string) => void;
+}
+
 /**
  * Union type of all possible modal content types
  */
@@ -401,9 +428,11 @@ export type ModalContentType =
   | AnySpendSignatureMintProps
   | AnySpendBondKitProps
   | LinkAccountModalProps
+  | LinkNewAccountModalProps
   | AnySpendDepositHypeProps
   | AvatarEditorModalProps
-  | ProfileEditorModalProps;
+  | DepositModalProps
+  | SendModalProps;
 // Add other modal types here like: | OtherModalProps | AnotherModalProps
 
 /**

package/src/global-account/react/stores/useRecentAddressesStore.ts

@@ -0,0 +1,55 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface RecentAddress {
+  address: string;
+  timestamp: number;
+}
+
+interface RecentAddressesStore {
+  recentAddresses: RecentAddress[];
+  addRecentAddress: (address: string) => void;
+  clearRecentAddresses: () => void;
+}
+
+/**
+ * Store for managing recently used addresses in the Send flow
+ * Persists to localStorage and keeps the last 6 unique addresses
+ */
+export const useRecentAddressesStore = create<RecentAddressesStore>()(
+  persist(
+    set => ({
+      recentAddresses: [],
+
+      /**
+       * Add a new address to the recent addresses list
+       * Deduplicates and maintains a maximum of 6 addresses
+       */
+      addRecentAddress: (address: string) => {
+        set(state => {
+          // Remove any existing entry with the same address
+          const filtered = state.recentAddresses.filter(item => item.address.toLowerCase() !== address.toLowerCase());
+
+          // Add the new address at the beginning
+          const updated = [{ address, timestamp: Date.now() }, ...filtered];
+
+          // Keep only the last 6 addresses
+          return {
+            recentAddresses: updated.slice(0, 6),
+          };
+        });
+      },
+
+      /**
+       * Clear all recent addresses
+       */
+      clearRecentAddresses: () => {
+        set({ recentAddresses: [] });
+      },
+    }),
+    {
+      name: "b3-recent-addresses-storage",
+    },
+  ),
+);
+

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

@@ -71,6 +71,8 @@ export interface ExtendedProfileDetails {
   name?: string;
   username?: string;
   profileImageUrl?: string;
+  picture?: string; // Google OAuth uses 'picture' field
+  pfpUrl?: string; // Farcaster uses 'pfpUrl' field
 }
 
 export interface ExtendedProfile extends Omit<Profile, "details"> {
@@ -112,7 +114,7 @@ export function getProfileDisplayInfo(profile: ExtendedProfile): ProfileDisplayI
       displayInfo = {
         title: details.name || details.username || "Unknown",
         subtitle: details.username ? `@${details.username}` : "Farcaster Account",
-        imageUrl: validateImageUrl(details.profileImageUrl),
+        imageUrl: validateImageUrl(details.pfpUrl || details.profileImageUrl),
         initial: "F",
         type,
       };
@@ -121,7 +123,7 @@ export function getProfileDisplayInfo(profile: ExtendedProfile): ProfileDisplayI
       displayInfo = {
         title: details.name || details.email || "Unknown",
         subtitle: details.email || "Google Account",
-        imageUrl: validateImageUrl(details.profileImageUrl),
+        imageUrl: validateImageUrl(details.picture || details.profileImageUrl),
         initial: "G",
         type,
       };

package/src/shared/utils/ipfs.ts

@@ -1,7 +1,14 @@
+/**
+ * List of IPFS gateways to use for converting ipfs:// URLs to HTTP URLs
+ * These gateways must match the allowed list in profileDisplay.ts validateImageUrl()
+ */
 const IPFS_GATEWAYS = [
-  "https://ipfs.io/ipfs",
-  "https://cloudflare-ipfs.com/ipfs",
-  // Can add more gateways as needed
+  "https://cloudflare-ipfs.com/ipfs", // Primary gateway - fast and reliable
+  "https://ipfs.io/ipfs", // Fallback gateway
+  "https://gateway.pinata.cloud/ipfs", // Additional option
+  "https://dweb.link/ipfs", // Additional option
+  "https://nftstorage.link/ipfs", // Additional option
+  "https://w3s.link/ipfs", // Additional option
 ] as const;
 
 /**

package/src/styles/index.css

@@ -278,10 +278,15 @@ html[data-theme="dark"] .b3-root,
 
 /* Custom component styles */
 .b3-modal {
-  @apply bg-b3-react-background text-b3-react-foreground rounded-2xl border;
+  @apply text-b3-react-foreground rounded-2xl border;
   border: 1px solid var(--border);
   overflow: hidden;
   outline: none;
+  padding: 10px;
+
+  @media (min-width: 768px) {
+    background: #e4e4e7;
+  }
 }
 
 .b3-modal-freestyle {

package/dist/cjs/global-account/react/components/ProfileEditor/ProfileEditor.d.ts

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

package/dist/cjs/global-account/react/components/ProfileEditor/ProfileEditor.js

@@ -1,141 +0,0 @@
-"use strict";
-"use client";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProfileEditor = ProfileEditor;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const app_1 = __importDefault(require("../../../../global-account/app"));
-const react_1 = require("../../../../global-account/react");
-const profileDisplay_1 = require("../../../../global-account/react/utils/profileDisplay");
-const cn_1 = require("../../../../shared/utils/cn");
-const debug_1 = require("../../../../shared/utils/debug");
-const ipfs_1 = require("../../../../shared/utils/ipfs");
-const thirdweb_1 = require("../../../../shared/utils/thirdweb");
-const lucide_react_1 = require("lucide-react");
-const react_2 = require("react");
-const sonner_1 = require("sonner");
-const react_3 = require("thirdweb/react");
-const storage_1 = require("thirdweb/storage");
-const debug = (0, debug_1.debugB3React)("ProfileEditor");
-function ProfileEditor({ onSuccess, className }) {
-    const [selectedFile, setSelectedFile] = (0, react_2.useState)(null);
-    const [previewUrl, setPreviewUrl] = (0, react_2.useState)(null);
-    const [username, setUsername] = (0, react_2.useState)("");
-    const [isUploading, setIsUploading] = (0, react_2.useState)(false);
-    const [isSaving, setIsSaving] = (0, react_2.useState)(false);
-    const fileInputRef = (0, react_2.useRef)(null);
-    const { user, setUser } = (0, react_1.useB3)();
-    const account = (0, react_3.useActiveAccount)();
-    const { data: profile, refetch: refreshProfile } = (0, react_1.useProfile)({
-        address: account?.address,
-        fresh: true,
-    });
-    const rawAvatarUrl = user?.avatar ? (0, ipfs_1.getIpfsUrl)(user?.avatar) : profile?.avatar;
-    const avatarUrl = (0, profileDisplay_1.validateImageUrl)(rawAvatarUrl);
-    const safePreviewUrl = (0, profileDisplay_1.validateImageUrl)(previewUrl);
-    const hasAvatar = !!avatarUrl;
-    const currentUsername = user?.username || "";
-    const handleFileSelect = (event) => {
-        const file = event.target.files?.[0];
-        if (file) {
-            // Validate file type
-            if (!file.type.startsWith("image/")) {
-                sonner_1.toast.error("Please select an image file");
-                return;
-            }
-            // Validate file size (max 5MB)
-            if (file.size > 5 * 1024 * 1024) {
-                sonner_1.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 handleSave = async () => {
-        // Check if there are any changes
-        const hasAvatarChange = selectedFile !== null;
-        const hasUsernameChange = username.trim() !== "" && username !== currentUsername;
-        if (!hasAvatarChange && !hasUsernameChange) {
-            sonner_1.toast.error("Please make at least one change");
-            return;
-        }
-        setIsSaving(true);
-        try {
-            let ipfsUrl;
-            // Upload avatar if selected
-            if (hasAvatarChange && selectedFile) {
-                debug("Starting upload to IPFS", selectedFile);
-                setIsUploading(true);
-                ipfsUrl = await (0, storage_1.upload)({
-                    client: thirdweb_1.client,
-                    files: [selectedFile],
-                });
-                debug("Upload successful", ipfsUrl);
-                setIsUploading(false);
-            }
-            // Update user profile
-            let updatedUser = user;
-            // If both avatar and username need updating, do them sequentially
-            // Update avatar first if uploaded
-            if (ipfsUrl) {
-                // @ts-expect-error this resolved fine, look into why expect-error needed
-                updatedUser = await app_1.default.service("users").setAvatar({
-                    avatar: ipfsUrl,
-                }, 
-                // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
-                {});
-            }
-            // Update username if changed (this will use the updated user from avatar change if both were updated)
-            if (hasUsernameChange && user?._id) {
-                // @ts-expect-error this resolved fine, look into why expect-error needed
-                updatedUser = await app_1.default.service("users").registerUsername({ username: username }, 
-                // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
-                {});
-            }
-            // Update user state
-            setUser(updatedUser);
-            // Refresh profile to get updated data
-            await refreshProfile();
-            // Show success message
-            const changes = [];
-            if (hasAvatarChange)
-                changes.push("avatar");
-            if (hasUsernameChange)
-                changes.push("username");
-            sonner_1.toast.success(`Successfully updated ${changes.join(" and ")}!`);
-            onSuccess?.();
-            // Clean up
-            handleRemoveFile();
-            setUsername("");
-        }
-        catch (error) {
-            debug("Error updating profile:", error);
-            sonner_1.toast.error("Failed to update profile. Please try again.");
-        }
-        finally {
-            setIsUploading(false);
-            setIsSaving(false);
-        }
-    };
-    const handleFileInputClick = () => {
-        fileInputRef.current?.click();
-    };
-    const isLoading = isUploading || isSaving;
-    const hasChanges = selectedFile !== null || (username.trim() !== "" && username !== currentUsername);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col items-center justify-center space-y-6 p-8", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2 text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "font-neue-montreal-semibold text-b3-grey text-2xl", children: "Edit Your Profile" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium", children: "Update your avatar and username" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "w-full max-w-md space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Avatar" }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: safePreviewUrl || avatarUrl ? ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4", children: (0, jsx_runtime_1.jsx)("img", { src: safePreviewUrl || avatarUrl || "", alt: safePreviewUrl ? "Preview" : "Current avatar", className: "h-full w-full object-cover" }) }), safePreviewUrl && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash h-32 w-32 rounded-full" })) }), !selectedFile && ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "outline", onClick: handleFileInputClick, disabled: isLoading, className: "w-full", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "mr-2 h-4 w-4" }), hasAvatar ? "Change Avatar" : "Upload Avatar"] })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, className: "hidden" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "username", className: "text-b3-grey font-neue-montreal-semibold text-sm", children: "Username" }), (0, jsx_runtime_1.jsx)("input", { id: "username", type: "text", value: username, onChange: e => setUsername(e.target.value), placeholder: currentUsername || "Enter username", className: "border-b3-line bg-b3-background text-b3-grey placeholder:text-b3-foreground-muted font-neue-montreal-medium focus:border-b3-primary-blue w-full rounded-lg border px-4 py-3 transition-colors focus:outline-none", disabled: isLoading }), currentUsername && ((0, jsx_runtime_1.jsxs)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-xs", children: ["Current: ", currentUsername] }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full max-w-md gap-3", children: (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleSave, disabled: isLoading || !hasChanges, className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white disabled:opacity-50", children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isUploading ? "Uploading..." : "Saving..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "mr-2 h-4 w-4" }), "Save Changes"] })) }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs", children: (0, jsx_runtime_1.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/ProfileEditor/ProfileEditor.d.ts

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