@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.0

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

@@ -1,258 +0,0 @@
-import {
-  Button,
-  CopyToClipboard,
-  useAuthentication,
-  useB3,
-  useB3BalanceFromAddresses,
-  useGlobalAccount,
-  useModalStore,
-  useNativeBalance,
-  useProfile,
-} from "@b3dotfun/sdk/global-account/react";
-import { BankIcon } from "@b3dotfun/sdk/global-account/react/components/icons/BankIcon";
-import { SignOutIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SignOutIcon";
-import { SwapIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SwapIcon";
-import { formatUsername } from "@b3dotfun/sdk/shared/utils";
-import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
-import { Loader2, Pencil } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { useActiveAccount } from "thirdweb/react";
-import { useFirstEOA } from "../../hooks/useFirstEOA";
-import { B3TokenIcon, EthereumTokenIcon } from "../TokenIcon";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion";
-import { TokenBalanceRow } from "./TokenBalanceRow";
-
-interface BalanceContentProps {
-  onLogout?: () => void;
-  showDeposit?: boolean;
-  showSwap?: boolean;
-}
-
-function centerTruncate(str: string, length = 4) {
-  if (str.length <= length * 2) return str;
-  return `${str.slice(0, length)}...${str.slice(-length)}`;
-}
-
-export function BalanceContent({ onLogout, showDeposit = true, showSwap = true }: BalanceContentProps) {
-  const account = useActiveAccount();
-  const globalAccount = useGlobalAccount();
-  const { address: eoaAddress, info: eoaInfo } = useFirstEOA();
-  const { data: profile } = useProfile({
-    address: eoaAddress || account?.address,
-    fresh: true,
-  });
-  const { user, partnerId } = useB3();
-  const { setB3ModalOpen, setB3ModalContentType, navigateBack } = useModalStore();
-  const { logout } = useAuthentication(partnerId);
-  const [logoutLoading, setLogoutLoading] = useState(false);
-  const [openAccordions, setOpenAccordions] = useState<string[]>([]);
-  const hasExpandedRef = useRef(false);
-
-  const avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profile?.avatar;
-
-  const handleEditProfile = () => {
-    setB3ModalOpen(true);
-    setB3ModalContentType({
-      type: "profileEditor",
-      showBackButton: true,
-      onSuccess: () => {
-        // navigate back on success
-        navigateBack();
-      },
-    });
-  };
-
-  console.log("eoaAddress", eoaAddress);
-  console.log("account?.address", account?.address);
-  console.log("globalAccount", globalAccount);
-
-  // Balance data fetching
-  const { data: eoaNativeBalance, isLoading: eoaNativeLoading } = useNativeBalance(eoaAddress);
-  const { data: eoaB3Balance, isLoading: eoaB3Loading } = useB3BalanceFromAddresses(eoaAddress);
-  const { data: b3Balance, isLoading: b3Loading } = useB3BalanceFromAddresses(globalAccount?.address);
-  const { data: nativeBalance, isLoading: nativeLoading } = useNativeBalance(globalAccount?.address);
-
-  // Calculate total USD values for comparison
-  const globalAccountTotalUsd = (b3Balance?.balanceUsd || 0) + (nativeBalance?.totalUsd || 0);
-  const eoaTotalUsd = (eoaB3Balance?.balanceUsd || 0) + (eoaNativeBalance?.totalUsd || 0);
-
-  // Check if both data sets are ready (not loading and have data)
-  const isGlobalDataReady = !b3Loading && !nativeLoading && b3Balance !== undefined && nativeBalance !== undefined;
-  const isEoaDataReady =
-    !eoaAddress || (!eoaB3Loading && !eoaNativeLoading && eoaB3Balance !== undefined && eoaNativeBalance !== undefined);
-  const isBothDataReady = isGlobalDataReady && isEoaDataReady;
-
-  // Reset expansion flag when component mounts
-  useEffect(() => {
-    hasExpandedRef.current = false;
-    setOpenAccordions([]);
-  }, []);
-
-  // Auto-expand the appropriate section when data becomes ready
-  useEffect(() => {
-    if (isBothDataReady && !hasExpandedRef.current && eoaAddress && account?.address) {
-      hasExpandedRef.current = true;
-
-      // Determine which section to expand based on higher balance
-      if (globalAccountTotalUsd === 0 && eoaTotalUsd === 0) {
-        // If both have 0 balance, expand global account by default
-        setOpenAccordions(["global-account"]);
-      } else if (globalAccountTotalUsd >= eoaTotalUsd) {
-        setOpenAccordions(["global-account"]);
-      } else {
-        setOpenAccordions(["eoa-account"]);
-      }
-    }
-  }, [isBothDataReady, globalAccountTotalUsd, eoaTotalUsd, eoaAddress, account?.address]);
-
-  const onLogoutEnhanced = async () => {
-    setLogoutLoading(true);
-    await logout();
-    onLogout?.();
-    setB3ModalOpen(false);
-    setLogoutLoading(false);
-  };
-
-  return (
-    <div className="flex flex-col gap-6">
-      {/* Profile Section */}
-      <div className="flex items-center justify-between">
-        <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-24 rounded-full" />
-            ) : (
-              <div className="bg-b3-primary-wash size-24 rounded-full" />
-            )}
-            <button
-              onClick={handleEditProfile}
-              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"
-            >
-              <Pencil size={16} className="text-b3-background" />
-            </button>
-          </div>
-          <div className="global-account-profile-info">
-            <h2 className="text-b3-grey text-xl font-semibold">
-              {user?.username || profile?.displayName || formatUsername(profile?.name || "")}
-            </h2>
-            <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">
-              <span className="text-b3-foreground-muted font-mono text-xs">
-                {centerTruncate(account?.address || "", 6)}
-              </span>
-              <CopyToClipboard text={account?.address || ""} />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Quick Actions */}
-      {(showDeposit || showSwap) && (
-        <div className="grid grid-cols-2 gap-3">
-          {showDeposit && (
-            <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",
-                  defaultActiveTab: "fiat",
-                  showBackButton: true,
-                });
-              }}
-            >
-              <BankIcon size={24} className="text-b3-primary-blue shrink-0" />
-              <div className="text-b3-grey font-neue-montreal-semibold">Deposit</div>
-            </Button>
-          )}
-          {showSwap && (
-            <Button
-              className="manage-account-swap bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex h-[84px] w-full flex-col items-start gap-2 rounded-2xl"
-              onClick={() => {
-                setB3ModalOpen(true);
-                setB3ModalContentType({
-                  type: "anySpend",
-                  showBackButton: true,
-                });
-              }}
-            >
-              <SwapIcon size={24} className="text-b3-primary-blue" />
-              <div className="text-b3-grey font-neue-montreal-semibold">Swap</div>
-            </Button>
-          )}
-        </div>
-      )}
-
-      {/* Balance Sections with Accordions */}
-      <Accordion type="multiple" value={openAccordions} onValueChange={setOpenAccordions} className="space-y-2">
-        {/* Global Account Balance Section */}
-        <AccordionItem value="global-account" className="border-none">
-          <AccordionTrigger className="text-b3-grey font-neue-montreal-semibold py-2 hover:no-underline">
-            <span>Smart Account Balance</span>
-          </AccordionTrigger>
-          <AccordionContent className="space-y-4">
-            <TokenBalanceRow
-              icon={<B3TokenIcon className="size-10" />}
-              name="B3"
-              balance={`${b3Balance?.formattedTotal || "0.00"} B3`}
-              usdValue={b3Balance?.balanceUsdFormatted || "0.00"}
-              priceChange={b3Balance?.priceChange24h}
-            />
-            <TokenBalanceRow
-              icon={<EthereumTokenIcon className="size-10" />}
-              name="Ethereum"
-              balance={`${nativeBalance?.formattedTotal || "0.00"} ETH`}
-              usdValue={nativeBalance?.formattedTotalUsd || "0.00"}
-              priceChange={nativeBalance?.priceChange24h}
-            />
-          </AccordionContent>
-        </AccordionItem>
-
-        {/* EOA Account Balance Section */}
-        {eoaAddress && (
-          <AccordionItem value="eoa-account" className="border-none">
-            <AccordionTrigger className="text-b3-grey font-neue-montreal-semibold py-2 hover:no-underline">
-              <div className="flex items-center gap-3">
-                <span>{eoaInfo?.data?.name || "Wallet"}</span>
-                <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">
-                  <span className="text-b3-foreground-muted font-mono text-xs">{centerTruncate(eoaAddress, 6)}</span>
-                  <CopyToClipboard text={eoaAddress} />
-                </div>
-              </div>
-            </AccordionTrigger>
-            <AccordionContent className="space-y-4">
-              <TokenBalanceRow
-                icon={<B3TokenIcon className="size-10" />}
-                name="B3"
-                balance={`${eoaB3Balance?.formattedTotal || "0.00"} B3`}
-                usdValue={eoaB3Balance?.balanceUsdFormatted || "0.00"}
-                priceChange={eoaB3Balance?.priceChange24h}
-              />
-              <TokenBalanceRow
-                icon={<EthereumTokenIcon className="size-10" />}
-                name="Ethereum"
-                balance={`${eoaNativeBalance?.formattedTotal || "0.00"} ETH`}
-                usdValue={eoaNativeBalance?.formattedTotalUsd || "0.00"}
-                priceChange={eoaNativeBalance?.priceChange24h}
-              />
-            </AccordionContent>
-          </AccordionItem>
-        )}
-      </Accordion>
-
-      {/* Sign Out */}
-      <button
-        className="logout-button border-b3-line hover:bg-b3-line relative flex w-full items-center justify-center rounded-2xl border p-4 transition-colors"
-        onClick={onLogoutEnhanced}
-      >
-        <span className="font-neue-montreal-semibold text-b3-grey">Sign out</span>
-        <div className="absolute right-4">
-          {logoutLoading ? (
-            <Loader2 className="animate-spin" size={16} />
-          ) : (
-            <SignOutIcon size={16} className="text-b3-grey" />
-          )}
-        </div>
-      </button>
-    </div>
-  );
-}

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

@@ -1,279 +0,0 @@
-"use client";
-
-import { ens_normalize } from "@adraffy/ens-normalize";
-import { Users } from "@b3dotfun/b3-api";
-import app from "@b3dotfun/sdk/global-account/app";
-import { Button, useB3, useProfile } from "@b3dotfun/sdk/global-account/react";
-import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
-import { cn } from "@b3dotfun/sdk/shared/utils/cn";
-import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
-import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
-import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
-import { Check, Loader2, Upload, X } from "lucide-react";
-import { useRef, useState } from "react";
-import { toast } from "sonner";
-import { useActiveAccount } from "thirdweb/react";
-import { upload } from "thirdweb/storage";
-
-const debug = debugB3React("ProfileEditor");
-
-interface ProfileEditorProps {
-  onSuccess?: () => void;
-  className?: string;
-}
-
-export function ProfileEditor({ onSuccess, className }: ProfileEditorProps) {
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-  const [username, setUsername] = useState<string>("");
-  const [isUploading, setIsUploading] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const { user, setUser } = useB3();
-
-  const account = useActiveAccount();
-  const { data: profile, refetch: refreshProfile } = useProfile({
-    address: account?.address,
-    fresh: true,
-  });
-
-  const rawAvatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profile?.avatar;
-  const avatarUrl = validateImageUrl(rawAvatarUrl);
-  const safePreviewUrl = validateImageUrl(previewUrl);
-  const hasAvatar = !!avatarUrl;
-  const currentUsername = user?.username || "";
-
-  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      // Validate file type
-      if (!file.type.startsWith("image/")) {
-        toast.error("Please select an image file");
-        return;
-      }
-
-      // Validate file size (max 5MB)
-      if (file.size > 5 * 1024 * 1024) {
-        toast.error("File size must be less than 5MB");
-        return;
-      }
-
-      setSelectedFile(file);
-
-      // Create preview URL
-      const url = URL.createObjectURL(file);
-      setPreviewUrl(url);
-    }
-  };
-
-  const handleRemoveFile = () => {
-    setSelectedFile(null);
-    if (previewUrl) {
-      URL.revokeObjectURL(previewUrl);
-      setPreviewUrl(null);
-    }
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  };
-
-  const handleSave = async () => {
-    // Check if there are any changes
-    const hasAvatarChange = selectedFile !== null;
-    const hasUsernameChange = username.trim() !== "" && username !== currentUsername;
-
-    if (!hasAvatarChange && !hasUsernameChange) {
-      toast.error("Please make at least one change");
-      return;
-    }
-
-    setIsSaving(true);
-    try {
-      let ipfsUrl: string | undefined;
-
-      // Upload avatar if selected
-      if (hasAvatarChange && selectedFile) {
-        debug("Starting upload to IPFS", selectedFile);
-        setIsUploading(true);
-
-        ipfsUrl = await upload({
-          client,
-          files: [selectedFile],
-        });
-
-        debug("Upload successful", ipfsUrl);
-        setIsUploading(false);
-      }
-
-      // Update user profile
-      let updatedUser = user as Users | undefined;
-
-      // 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.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) {
-        const sanitizedUsername = ens_normalize(username);
-        const b3Username = `${sanitizedUsername}.b3.fun`;
-        const usernameSignMessage = `Register "${b3Username}"`;
-        const usernameSignature = await account?.signMessage({ message: usernameSignMessage });
-
-        if (!usernameSignature) {
-          throw new Error("Failed to sign username registration message");
-        }
-
-        console.log("@@usernameSignature", usernameSignature);
-
-        // Register username with ENS
-        // Note: Type assertion needed until @b3dotfun/b3-api package is updated with RegisterUsername type
-        updatedUser = (await app
-          .service("users")
-          .registerUsername(
-            { username, message: usernameSignMessage, hash: usernameSignature },
-            {} as any,
-          )) as unknown as Users;
-      }
-
-      // 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");
-      toast.success(`Successfully updated ${changes.join(" and ")}!`);
-
-      onSuccess?.();
-
-      // Clean up
-      handleRemoveFile();
-      setUsername("");
-    } catch (error) {
-      debug("Error updating profile:", error);
-      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 (
-    <div className={cn("flex flex-col items-center justify-center space-y-6 p-8", className)}>
-      <div className="space-y-2 text-center">
-        <h2 className="font-neue-montreal-semibold text-b3-grey text-2xl">Edit Your Profile</h2>
-        <p className="text-b3-foreground-muted font-neue-montreal-medium">Update your avatar and username</p>
-      </div>
-
-      {/* Avatar Section */}
-      <div className="w-full max-w-md space-y-4">
-        <div className="space-y-2">
-          <label className="text-b3-grey font-neue-montreal-semibold text-sm">Avatar</label>
-
-          {/* Current/Preview Avatar */}
-          <div className="flex justify-center">
-            {safePreviewUrl || avatarUrl ? (
-              <div className="relative">
-                <div className="border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4">
-                  <img
-                    src={safePreviewUrl || avatarUrl || ""}
-                    alt={safePreviewUrl ? "Preview" : "Current avatar"}
-                    className="h-full w-full object-cover"
-                  />
-                </div>
-                {safePreviewUrl && (
-                  <button
-                    onClick={handleRemoveFile}
-                    className="bg-b3-negative absolute -right-2 -top-2 flex h-8 w-8 items-center justify-center rounded-full text-white transition-colors hover:bg-red-600"
-                    disabled={isLoading}
-                  >
-                    <X size={16} />
-                  </button>
-                )}
-              </div>
-            ) : (
-              <div className="bg-b3-primary-wash h-32 w-32 rounded-full" />
-            )}
-          </div>
-
-          {/* Upload Button */}
-          {!selectedFile && (
-            <Button variant="outline" onClick={handleFileInputClick} disabled={isLoading} className="w-full">
-              <Upload className="mr-2 h-4 w-4" />
-              {hasAvatar ? "Change Avatar" : "Upload Avatar"}
-            </Button>
-          )}
-
-          {/* Hidden file input */}
-          <input ref={fileInputRef} type="file" accept="image/*" onChange={handleFileSelect} className="hidden" />
-        </div>
-
-        {/* Username Section */}
-        <div className="space-y-2">
-          <label htmlFor="username" className="text-b3-grey font-neue-montreal-semibold text-sm">
-            Username
-          </label>
-          <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 && (
-            <p className="text-b3-foreground-muted font-neue-montreal-medium text-xs">Current: {currentUsername}</p>
-          )}
-        </div>
-      </div>
-
-      {/* Action Buttons */}
-      <div className="flex w-full max-w-md gap-3">
-        <Button
-          onClick={handleSave}
-          disabled={isLoading || !hasChanges}
-          className="bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white disabled:opacity-50"
-        >
-          {isLoading ? (
-            <>
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              {isUploading ? "Uploading..." : "Saving..."}
-            </>
-          ) : (
-            <>
-              <Check className="mr-2 h-4 w-4" />
-              Save Changes
-            </>
-          )}
-        </Button>
-      </div>
-
-      {/* Help Text */}
-      <div className="text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs">
-        <p>
-          Your avatar will be uploaded to IPFS and stored securely. Make sure you have the rights to use this image.
-        </p>
-      </div>
-    </div>
-  );
-}