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

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

@@ -0,0 +1,24 @@
+import { useActiveWallet } from "thirdweb/react";
+import { AccountAssets } from "..";
+import { useAccountAssets } from "../../hooks";
+
+const NFTContent = () => {
+  // Get active wallet state
+  const activeWallet = useActiveWallet();
+  const activeAccount = activeWallet?.getAccount();
+  const activeAddress = activeAccount?.address;
+
+  const { data: nfts, isLoading } = useAccountAssets(activeAddress);
+
+  return (
+    <div style={{ minHeight: "100px" }}>
+      {nfts?.nftResponse ? (
+        <AccountAssets nfts={nfts.nftResponse} isLoading={isLoading} />
+      ) : (
+        <div className="py-12 text-center text-gray-500">No NFTs found</div>
+      )}
+    </div>
+  );
+};
+
+export default NFTContent;

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

@@ -0,0 +1,72 @@
+import { useAccountWallet, useB3, useModalStore, useProfile, useSimBalance } from "@b3dotfun/sdk/global-account/react";
+import { formatUsername } from "@b3dotfun/sdk/shared/utils";
+import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
+import { Pencil } from "lucide-react";
+import { useMemo } from "react";
+import { useActiveAccount } from "thirdweb/react";
+import { useFirstEOA } from "../../hooks/useFirstEOA";
+import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
+
+const ProfileSection = () => {
+  const account = useActiveAccount();
+  const { address: eoaAddress } = useFirstEOA();
+  const { address: smartWalletAddress } = useAccountWallet();
+  const { data: profile } = useProfile({
+    address: eoaAddress || account?.address,
+    fresh: true,
+  });
+  const { user } = useB3();
+  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+  const navigateBack = useModalStore(state => state.navigateBack);
+
+  const { data: simBalance } = useSimBalance(smartWalletAddress);
+
+  // Calculate total balance in USD
+  const totalBalanceUsd = useMemo(() => {
+    if (!simBalance?.balances) return 0;
+    return simBalance.balances.reduce((sum, token) => sum + (token.value_usd || 0), 0);
+  }, [simBalance]);
+
+  const handleEditAvatar = () => {
+    setB3ModalOpen(true);
+    setB3ModalContentType({
+      type: "avatarEditor",
+      onSuccess: () => {
+        // navigate back on success
+        navigateBack();
+      },
+    });
+  };
+
+  // IPFSMediaRenderer will handle IPFS URL conversion and validation
+  const avatarSrc = user?.avatar || profile?.avatar;
+
+  // Get current username - prioritize user.username, fallback to profile data
+  const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
+
+  return (
+    <div className="flex items-center justify-between px-5 py-6">
+      <div className="global-account-profile flex items-center gap-4">
+        <div className="global-account-profile-avatar relative">
+          <IPFSMediaRenderer src={avatarSrc} alt="Profile Avatar" className="size-14 rounded-full" />
+          <button
+            onClick={handleEditAvatar}
+            className="border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full border-4 bg-[#a0a0ab] transition-colors"
+          >
+            <Pencil size={10} className="text-b3-background" />
+          </button>
+        </div>
+        <div className="global-account-profile-info flex flex-col gap-1">
+          <h2 className="text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl">
+            <div className="text-b3-foreground-muted"> $</div>
+            <div className="text-[30px]">{formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 })}</div>
+          </h2>
+          <div className="font-neue-montreal-semibold text-base leading-none text-[#0B57C2]">{currentUsername}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileSection;

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

@@ -0,0 +1,87 @@
+import { useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { Chain } from "thirdweb";
+import LinkIcon from "../icons/LinkIcon";
+import ModalHeader from "../ModalHeader/ModalHeader";
+import SettingsMenuItem from "./SettingsMenuItem";
+import SettingsProfileCard from "./SettingsProfileCard";
+
+const SettingsContent = ({
+  partnerId,
+  onLogout,
+  chain,
+}: {
+  partnerId: string;
+  onLogout?: () => void;
+  chain: Chain;
+}) => {
+  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+
+  const handleNavigate = (type: "home" | "swap" | "linkAccount" | "avatarEditor") => {
+    if (type === "home") {
+      setB3ModalContentType({
+        type: "manageAccount",
+        chain,
+        partnerId,
+        onLogout,
+        activeTab: "home",
+      });
+    } else if (type === "swap") {
+      setB3ModalContentType({
+        type: "manageAccount",
+        chain,
+        partnerId,
+        onLogout,
+        activeTab: "tokens",
+      });
+    } else if (type === "linkAccount") {
+      setB3ModalContentType({
+        type: "linkAccount",
+        chain,
+        partnerId,
+      });
+    } else {
+      setB3ModalContentType({
+        type: "avatarEditor",
+      });
+    }
+    setB3ModalOpen(true);
+  };
+
+  return (
+    <div className="flex h-[470px] flex-col">
+      <ModalHeader title="Settings" />
+
+      {/* Profile Section */}
+      <div className="p-5">
+        <div className="flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4">
+          <SettingsProfileCard />
+        </div>
+      </div>
+
+      {/* Menu Items */}
+      <div className="space-y-3 px-5">
+        <SettingsMenuItem
+          icon={<LinkIcon className="text-b3-grey-500" />}
+          title="Linked Accounts"
+          subtitle="3 connected accounts"
+          onClick={() => handleNavigate("linkAccount")}
+        />
+        {/* <SettingsMenuItem
+          icon={<BellIcon className="text-b3-grey-500" />}
+          title="Notifications"
+          subtitle="Manage your notifications"
+          onClick={() => handleNavigate("avatarEditor")}
+        />
+        <SettingsMenuItem
+          icon={<LockIcon className="text-b3-grey-500" />}
+          title="Permissions"
+          subtitle="Security & apps"
+          onClick={() => handleNavigate("avatarEditor")}
+        /> */}
+      </div>
+    </div>
+  );
+};
+
+export default SettingsContent;

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

@@ -0,0 +1,31 @@
+import { ChevronRight } from "lucide-react";
+import { ReactNode } from "react";
+
+interface SettingsMenuItemProps {
+  icon: ReactNode;
+  title: string;
+  subtitle: string;
+  onClick?: () => void;
+}
+
+const SettingsMenuItem = ({ icon, title, subtitle, onClick }: SettingsMenuItemProps) => {
+  return (
+    <button
+      onClick={onClick}
+      className="flex w-full items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#f4f4f5]"
+    >
+      <div className="flex size-10 items-center justify-center rounded-full bg-[#f4f4f5]">{icon}</div>
+      <div className="flex flex-1 flex-col items-start gap-1 text-left">
+        <span className="font-neue-montreal-semibold text-[14px] leading-none tracking-[-0.28px] text-[#3f3f46]">
+          {title}
+        </span>
+        <span className="font-neue-montreal-medium text-[14px] leading-none tracking-[-0.28px] text-[#70707b]">
+          {subtitle}
+        </span>
+      </div>
+      <ChevronRight size={20} className="text-[#51525c]" />
+    </button>
+  );
+};
+
+export default SettingsMenuItem;

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

@@ -0,0 +1,180 @@
+import app from "@b3dotfun/sdk/global-account/app";
+import { useB3, useModalStore, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { formatUsername } from "@b3dotfun/sdk/shared/utils";
+import { Check, Loader2, Pencil, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { useActiveAccount } from "thirdweb/react";
+import { useFirstEOA } from "../../hooks/useFirstEOA";
+import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer";
+
+const SettingsProfileCard = () => {
+  const account = useActiveAccount();
+  const { address: eoaAddress } = useFirstEOA();
+  const { data: profile, refetch: refreshProfile } = useProfile({
+    address: eoaAddress || account?.address,
+    fresh: true,
+  });
+  const { user, setUser } = useB3();
+  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+  const navigateBack = useModalStore(state => state.navigateBack);
+
+  // State for inline username editing
+  const [isEditingUsername, setIsEditingUsername] = useState(false);
+  const [editedUsername, setEditedUsername] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // IPFSMediaRenderer will handle IPFS URL conversion and validation
+  const avatarSrc = user?.avatar || profile?.avatar;
+
+  // Get current username - prioritize user.username, fallback to profile data
+  const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
+
+  // Focus input when entering edit mode
+  useEffect(() => {
+    if (isEditingUsername && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditingUsername]);
+
+  const handleEditAvatar = () => {
+    setB3ModalOpen(true);
+    setB3ModalContentType({
+      type: "avatarEditor",
+      onSuccess: () => {
+        // navigate back on success
+        navigateBack();
+      },
+    });
+  };
+
+  const handleEditUsername = () => {
+    setEditedUsername(currentUsername || "");
+    setIsEditingUsername(true);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditingUsername(false);
+    setEditedUsername("");
+  };
+
+  const handleSaveUsername = async () => {
+    if (!editedUsername.trim()) {
+      toast.error("Username cannot be empty");
+      return;
+    }
+
+    if (editedUsername === currentUsername) {
+      // No change, just exit edit mode
+      handleCancelEdit();
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const updatedUser = await app.service("users").registerUsername(
+        { username: editedUsername.trim() },
+        // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
+        {},
+      );
+
+      // Update user state - registerUsername returns an array with single user
+      setUser(Array.isArray(updatedUser) ? updatedUser[0] : updatedUser);
+
+      // Refresh profile to get updated data
+      await refreshProfile();
+
+      toast.success("Username updated successfully!");
+      setIsEditingUsername(false);
+      setEditedUsername("");
+    } catch (error) {
+      console.error("Error updating username:", error);
+      toast.error("Failed to update username. Please try again.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleSaveUsername();
+    } else if (e.key === "Escape") {
+      handleCancelEdit();
+    }
+  };
+
+  return (
+    <div className="flex w-full items-center gap-3">
+      {/* Avatar with edit badge */}
+      <div className="relative shrink-0">
+        <IPFSMediaRenderer
+          src={avatarSrc}
+          alt="Profile"
+          className="border-black/8 size-14 rounded-full border object-cover"
+        />
+        <button
+          onClick={handleEditAvatar}
+          className="absolute -bottom-0.5 -right-0.5 flex size-[18px] items-center justify-center rounded-full border-[1.5px] border-white bg-[#a0a0ab] transition-colors hover:bg-[#a0a0ab]/80"
+          aria-label="Edit avatar"
+        >
+          <Pencil size={10} className="text-white" strokeWidth={2.5} />
+        </button>
+      </div>
+
+      {/* Username and edit link */}
+      <div className="flex shrink-0 flex-col gap-1">
+        {isEditingUsername ? (
+          /* Edit mode - inline input */
+          <div className="flex items-center gap-2">
+            <input
+              ref={inputRef}
+              type="text"
+              value={editedUsername}
+              onChange={e => setEditedUsername(e.target.value)}
+              onKeyDown={handleKeyDown}
+              disabled={isSaving}
+              className="border-b3-line bg-b3-background text-b3-grey placeholder:text-b3-foreground-muted font-neue-montreal-semibold focus:border-b3-primary-blue w-full rounded-md border px-2 py-1 text-lg leading-none transition-colors focus:outline-none disabled:opacity-50"
+              placeholder="Enter username"
+            />
+            <div className="flex items-center gap-1">
+              <button
+                onClick={handleSaveUsername}
+                disabled={isSaving}
+                className="text-b3-primary-blue hover:text-b3-primary-blue/80 flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50"
+                aria-label="Save username"
+              >
+                {isSaving ? <Loader2 size={18} className="animate-spin" /> : <Check size={18} strokeWidth={2.5} />}
+              </button>
+              <button
+                onClick={handleCancelEdit}
+                disabled={isSaving}
+                className="text-b3-foreground-muted hover:text-b3-grey flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50"
+                aria-label="Cancel editing"
+              >
+                <X size={18} strokeWidth={2.5} />
+              </button>
+            </div>
+          </div>
+        ) : (
+          /* Display mode */
+          <>
+            <div className="flex items-center gap-1">
+              <p className="font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]">{currentUsername}</p>
+            </div>
+            <button
+              onClick={handleEditUsername}
+              className="flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80"
+            >
+              <p className="font-inter text-sm font-semibold leading-5 text-[#51525C]">Edit Username</p>
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SettingsProfileCard;

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

@@ -0,0 +1,41 @@
+import { useB3BalanceFromAddresses, useNativeBalance } from "@b3dotfun/sdk/global-account/react";
+import { useActiveWallet } from "thirdweb/react";
+import { B3TokenIcon, EthereumTokenIcon } from "../TokenIcon";
+import { TokenBalanceRow } from "./TokenBalanceRow";
+
+const TokenContent = () => {
+  // Get active wallet state
+  const activeWallet = useActiveWallet();
+  //const globalAccountWallet = useGlobalWalletState(state => state.globalAccountWallet);
+  const activeAccount = activeWallet?.getAccount();
+  const activeAddress = activeAccount?.address;
+
+  // Balance data fetching - use active wallet address
+  const { data: activeNativeBalance } = useNativeBalance(activeAddress);
+  const { data: activeB3Balance } = useB3BalanceFromAddresses(activeAddress);
+
+  if (!activeAddress) {
+    return <div className="col-span-3 py-12 text-center text-gray-500">No tokens found</div>;
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <TokenBalanceRow
+        icon={<B3TokenIcon className="size-10" />}
+        name="B3"
+        balance={`${activeB3Balance?.formattedTotal || "0.00"} B3`}
+        usdValue={activeB3Balance?.balanceUsdFormatted || "0.00"}
+        priceChange={activeB3Balance?.priceChange24h}
+      />
+      <TokenBalanceRow
+        icon={<EthereumTokenIcon className="size-10" />}
+        name="Ethereum"
+        balance={`${activeNativeBalance?.formattedTotal || "0.00"} ETH`}
+        usdValue={activeNativeBalance?.formattedTotalUsd || "0.00"}
+        priceChange={activeNativeBalance?.priceChange24h}
+      />
+    </div>
+  );
+};
+
+export default TokenContent;

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

@@ -0,0 +1,50 @@
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import { ChevronDown, X } from "lucide-react";
+import { useModalStore } from "../../stores";
+
+const ModalHeader = ({
+  handleBack,
+  handleClose,
+  title,
+  children,
+  showCloseButton = true,
+  className,
+  showBackWord = false,
+}: {
+  handleBack?: () => void;
+  handleClose?: () => void;
+  title: string;
+  children?: React.ReactNode;
+  showCloseButton?: boolean;
+  className?: string;
+  showBackWord?: boolean;
+}) => {
+  const navigateBack = useModalStore(state => state.navigateBack);
+  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+
+  return (
+    <div
+      className={cn("flex h-16 items-center justify-between border-b border-[#e4e4e7] bg-white px-5 py-3", className)}
+    >
+      <button
+        onClick={handleBack || navigateBack}
+        className="flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70"
+      >
+        <ChevronDown className="h-6 w-6 rotate-90 text-[#51525c]" />
+        {showBackWord && <span className="text-sm font-medium">Back</span>}
+      </button>
+      <p className="font-inter text-lg font-semibold leading-7 text-[#18181b]">{title}</p>
+      {showCloseButton && (
+        <button
+          onClick={handleClose || (() => setB3ModalOpen(false))}
+          className="flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70"
+        >
+          <X className="h-6 w-6 text-[#51525c]" />
+        </button>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default ModalHeader;