@b3dotfun/sdk 0.0.64-alpha.2 → 0.0.65-test.1

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,74 @@
+import { useAccountWallet, useB3, useModalStore, useProfile, useSimBalance } from "@b3dotfun/sdk/global-account/react";
+import { formatUsername } from "@b3dotfun/sdk/shared/utils";
+import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
+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";
+
+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 avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profile?.avatar;
+
+  const handleEditAvatar = () => {
+    setB3ModalOpen(true);
+    setB3ModalContentType({
+      type: "avatarEditor",
+      onSuccess: () => {
+        // navigate back on success
+        navigateBack();
+      },
+    });
+  };
+
+  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">
+          {avatarUrl ? (
+            <img src={avatarUrl} alt="Profile" className="size-14 rounded-full" />
+          ) : (
+            <div className="bg-b3-primary-wash 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]">
+            {profile?.displayName || formatUsername(profile?.name || "")}
+          </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,74 @@
+import { useB3, useModalStore, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { formatUsername } from "@b3dotfun/sdk/shared/utils";
+import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
+import { Pencil } from "lucide-react";
+import { useActiveAccount } from "thirdweb/react";
+import { useFirstEOA } from "../../hooks/useFirstEOA";
+
+const SettingsProfileCard = () => {
+  const account = useActiveAccount();
+  const { address: eoaAddress } = useFirstEOA();
+  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 avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profile?.avatar;
+
+  const handleEditAvatar = () => {
+    setB3ModalOpen(true);
+    setB3ModalContentType({
+      type: "avatarEditor",
+      onSuccess: () => {
+        // navigate back on success
+        navigateBack();
+      },
+    });
+  };
+
+  const handleEditUsername = () => {
+    // TODO: Implement edit username functionality
+    console.log("Edit username clicked");
+  };
+
+  return (
+    <div className="flex w-full items-center gap-3">
+      {/* Avatar with edit badge */}
+      <div className="relative shrink-0">
+        {avatarUrl ? (
+          <img src={avatarUrl} alt="Profile" className="border-black/8 size-14 rounded-full border object-cover" />
+        ) : (
+          <div className="bg-b3-primary-wash border-black/8 size-14 rounded-full border" />
+        )}
+        <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">
+        <div className="flex items-center gap-1">
+          <p className="font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]">
+            {profile?.displayName || formatUsername(profile?.name || "")}
+          </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;