@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.0

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/NotificationChannel.tsx

@@ -0,0 +1,94 @@
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import { ReactNode } from "react";
+
+interface NotificationChannelProps {
+  icon: ReactNode;
+  title: string;
+  isConnected: boolean;
+  isConnecting: boolean;
+  isDisconnecting: boolean;
+  connectedInfo?: ReactNode;
+  inputSection?: ReactNode;
+  addButtonSection?: ReactNode;
+  iconClassName?: string;
+  onToggle: () => void;
+  showBorder?: boolean;
+}
+
+export const NotificationChannel = ({
+  icon,
+  title,
+  isConnected,
+  isConnecting,
+  isDisconnecting,
+  connectedInfo,
+  inputSection,
+  addButtonSection,
+  iconClassName,
+  onToggle,
+  showBorder = true,
+}: NotificationChannelProps) => {
+  return (
+    <div className={`flex items-start gap-3 p-[15px] ${showBorder ? "border-b border-[#e4e4e7]" : ""}`}>
+      <div className={cn("flex h-10 w-10 shrink-0 items-center justify-center", iconClassName)}>{icon}</div>
+      <div className="flex-1">
+        <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] font-semibold leading-[20px] text-[#3f3f46]">
+          {title}
+        </p>
+        {isConnecting ? (
+          <div className="mt-1">
+            <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c]">
+              Connecting...
+            </p>
+          </div>
+        ) : isDisconnecting ? (
+          <div className="mt-1">
+            <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c]">
+              Disconnecting...
+            </p>
+          </div>
+        ) : isConnected && connectedInfo ? (
+          <div className="mt-1">
+            <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c]">
+              {connectedInfo}
+            </p>
+          </div>
+        ) : inputSection ? (
+          inputSection
+        ) : (
+          addButtonSection
+        )}
+      </div>
+      <ToggleSwitch enabled={isConnected} onChange={onToggle} />
+    </div>
+  );
+};
+
+// Toggle Switch Component
+const ToggleSwitch = ({
+  enabled,
+  onChange,
+  disabled,
+}: {
+  enabled: boolean;
+  onChange: () => void;
+  disabled?: boolean;
+}) => {
+  return (
+    <button
+      onClick={onChange}
+      disabled={disabled}
+      className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none disabled:opacity-50 ${
+        enabled ? "bg-[#0c68e9]" : "bg-gray-200"
+      }`}
+      role="switch"
+      aria-checked={enabled}
+    >
+      <span
+        className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out ${
+          enabled ? "translate-x-4" : "translate-x-0"
+        }`}
+      />
+    </button>
+  );
+};

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

@@ -0,0 +1,268 @@
+import { useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { getAuthToken } from "@b3dotfun/sdk/shared/utils/auth-token";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { useCallback, useEffect, useState } from "react";
+import { Chain } from "thirdweb";
+import { useUserQuery } from "../../hooks/useUserQuery";
+import { notificationsAPI, UserData } from "../../utils/notificationsAPI";
+import ModalHeader from "../ModalHeader/ModalHeader";
+import { toast } from "../Toast/toastApi";
+import { DiscordChannel, EmailChannel, PhoneChannel, TelegramChannel } from "./channels";
+
+const debug = debugB3React("NotificationsContent");
+
+interface NotificationsContentProps {
+  partnerId: string;
+  chain: Chain;
+  onSuccess?: () => void;
+}
+
+const NotificationsContent = ({ partnerId, chain, onSuccess }: NotificationsContentProps) => {
+  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+  const { user } = useUserQuery();
+
+  const [userData, setUserData] = useState<UserData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isSendingTest, setIsSendingTest] = useState(false);
+  const [testSuccess, setTestSuccess] = useState(false);
+
+  // Optimistic UI state
+  const [optimisticChannelStates, setOptimisticChannelStates] = useState<Record<string, boolean>>({});
+
+  const userId = (user as any)?.userId;
+  const jwtToken = getAuthToken();
+
+  const fetchUserData = useCallback(
+    async (showLoading = true) => {
+      if (!userId || !jwtToken) {
+        if (showLoading) setLoading(false);
+        return;
+      }
+
+      try {
+        if (showLoading) setLoading(true);
+        const data = await notificationsAPI.getUser(userId, jwtToken);
+        setUserData(data);
+        setError(null);
+      } catch (err: any) {
+        debug("Error loading user data:", err);
+        // Try to register the user if they don't exist
+        try {
+          await notificationsAPI.registerUser(jwtToken);
+          const data = await notificationsAPI.getUser(userId, jwtToken);
+          setUserData(data);
+          setError(null);
+        } catch (registerErr: any) {
+          debug("Error registering user:", registerErr);
+          setError("Failed to load notification settings");
+        }
+      } finally {
+        if (showLoading) setLoading(false);
+      }
+    },
+    [userId, jwtToken],
+  );
+
+  useEffect(() => {
+    fetchUserData(true);
+  }, [fetchUserData]);
+
+  const handleConnectionChange = () => {
+    fetchUserData(false); // Refresh without showing loading screen
+    onSuccess?.();
+  };
+
+  const handleToggleChannel = async (channelType: string, shouldDisconnect: boolean) => {
+    if (!userId || !jwtToken) return;
+
+    if (shouldDisconnect) {
+      // Optimistically update UI
+      setOptimisticChannelStates(prev => ({ ...prev, [channelType]: false }));
+
+      try {
+        await notificationsAPI.disconnectChannel(userId, channelType, jwtToken);
+        await fetchUserData(false); // Refresh without showing loading screen
+        setOptimisticChannelStates(prev => {
+          const newState = { ...prev };
+          delete newState[channelType];
+          return newState;
+        });
+        toast.success(`${channelType.charAt(0).toUpperCase() + channelType.slice(1)} disconnected successfully!`);
+      } catch (err: any) {
+        debug("Error disconnecting channel:", err);
+        setError(`Failed to disconnect ${channelType}`);
+        toast.error(`Failed to disconnect ${channelType}`);
+        // Revert optimistic update
+        setOptimisticChannelStates(prev => {
+          const newState = { ...prev };
+          delete newState[channelType];
+          return newState;
+        });
+      }
+    }
+  };
+
+  const handleSendTestNotification = async () => {
+    if (!userId || !jwtToken) return;
+
+    try {
+      setIsSendingTest(true);
+      setTestSuccess(false);
+      await notificationsAPI.sendTestNotification(userId, partnerId, jwtToken);
+      setTestSuccess(true);
+      setTimeout(() => setTestSuccess(false), 5000);
+    } catch (err: any) {
+      debug("Error sending test notification:", err);
+      setError("Failed to send test notification. Make sure you have at least one channel connected.");
+    } finally {
+      setIsSendingTest(false);
+    }
+  };
+
+  const handleBack = () => {
+    setB3ModalContentType({
+      type: "manageAccount",
+      chain,
+      partnerId,
+      activeTab: "settings",
+    });
+    setB3ModalOpen(true);
+  };
+
+  const emailChannel = userData?.channels?.find(c => c.channel_type === "email");
+  const smsChannel = userData?.channels?.find(c => c.channel_type === "sms");
+  const whatsappChannel = userData?.channels?.find(c => c.channel_type === "whatsapp");
+  const telegramChannel = userData?.channels?.find(c => c.channel_type === "telegram");
+  const discordChannel = userData?.channels?.find(c => c.channel_type === "discord");
+
+  // Real connection states
+  const emailConnected = emailChannel?.enabled === 1;
+  const smsConnected = smsChannel?.enabled === 1;
+  const whatsappConnected = whatsappChannel?.enabled === 1;
+  const telegramConnected = telegramChannel?.enabled === 1;
+  const discordConnected = discordChannel?.enabled === 1;
+
+  // Apply optimistic updates
+  const optimisticEmailConnected =
+    optimisticChannelStates["email"] !== undefined ? optimisticChannelStates["email"] : emailConnected;
+  const optimisticSMSConnected =
+    optimisticChannelStates["sms"] !== undefined ? optimisticChannelStates["sms"] : smsConnected;
+  const optimisticWhatsAppConnected =
+    optimisticChannelStates["whatsapp"] !== undefined ? optimisticChannelStates["whatsapp"] : whatsappConnected;
+  const optimisticTelegramConnected =
+    optimisticChannelStates["telegram"] !== undefined ? optimisticChannelStates["telegram"] : telegramConnected;
+  const optimisticDiscordConnected =
+    optimisticChannelStates["discord"] !== undefined ? optimisticChannelStates["discord"] : discordConnected;
+
+  const hasAnyChannelConnected =
+    optimisticEmailConnected ||
+    optimisticSMSConnected ||
+    optimisticWhatsAppConnected ||
+    optimisticTelegramConnected ||
+    optimisticDiscordConnected;
+
+  if (loading) {
+    return (
+      <div className="flex h-[470px] flex-col">
+        <ModalHeader showBackButton={true} showCloseButton={false} title="Notifications" handleBack={handleBack} />
+        <div className="flex flex-1 items-center justify-center">
+          <div className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-gray-500">
+            Loading...
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-[470px] flex-col">
+      <ModalHeader showBackButton={true} showCloseButton={false} title="Notifications" handleBack={handleBack} />
+
+      <div className="flex-1 space-y-2 overflow-y-auto px-5 py-6">
+        {/* Header */}
+
+        {error && (
+          <div className="mb-3 rounded-lg bg-red-50 p-3 font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-red-600 dark:bg-red-900/20 dark:text-red-400">
+            {error}
+          </div>
+        )}
+
+        {/* Notification Channels Container */}
+        {userId && jwtToken && (
+          <div className="rounded-[20px] bg-[#f4f4f5]">
+            <PhoneChannel
+              userId={userId}
+              jwtToken={jwtToken}
+              smsChannel={smsChannel}
+              whatsappChannel={whatsappChannel}
+              isSMSConnected={smsConnected}
+              isWhatsAppConnected={whatsappConnected}
+              isOptimisticallySMSConnected={optimisticSMSConnected}
+              isOptimisticallyWhatsAppConnected={optimisticWhatsAppConnected}
+              onConnectionChange={handleConnectionChange}
+              onToggle={(type, shouldDisconnect) => handleToggleChannel(type, shouldDisconnect)}
+            />
+            <EmailChannel
+              userId={userId}
+              jwtToken={jwtToken}
+              emailChannel={emailChannel}
+              isConnected={emailConnected}
+              isOptimisticallyConnected={optimisticEmailConnected}
+              onConnectionChange={handleConnectionChange}
+              onToggle={enabled => handleToggleChannel("email", enabled)}
+            />
+            <TelegramChannel
+              userId={userId}
+              jwtToken={jwtToken}
+              telegramChannel={telegramChannel}
+              isConnected={telegramConnected}
+              isOptimisticallyConnected={optimisticTelegramConnected}
+              onConnectionChange={handleConnectionChange}
+              onToggle={enabled => handleToggleChannel("telegram", enabled)}
+            />
+            <DiscordChannel
+              userId={userId}
+              jwtToken={jwtToken}
+              discordChannel={discordChannel}
+              isConnected={discordConnected}
+              isOptimisticallyConnected={optimisticDiscordConnected}
+              onConnectionChange={handleConnectionChange}
+              onToggle={enabled => handleToggleChannel("discord", enabled)}
+            />
+          </div>
+        )}
+
+        {/* Test Notification Section */}
+        {process.env.NODE_ENV === "development" && hasAnyChannelConnected && (
+          <div className="mt-6 rounded-xl border border-[#e4e4e7] bg-white p-4">
+            <div className="mb-3 flex items-center gap-2">
+              <div className="text-lg">🧪</div>
+              <h3 className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] font-semibold leading-[20px] text-gray-900">
+                Test Notifications
+              </h3>
+            </div>
+            <p className="mb-3 font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-gray-600">
+              Send a test notification to all your connected channels to verify they're working correctly.
+            </p>
+            <button
+              onClick={handleSendTestNotification}
+              disabled={isSendingTest}
+              className="w-full rounded-lg bg-purple-600 px-4 py-2 font-['Inter',sans-serif] text-[14px] font-semibold leading-[20px] text-white transition-colors hover:bg-purple-700 disabled:opacity-50"
+            >
+              {isSendingTest ? "Sending..." : "Send Test Notification"}
+            </button>
+            {testSuccess && (
+              <div className="mt-3 rounded-lg bg-green-50 p-3 font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-green-700">
+                ✓ Test notification sent! Check your connected channels.
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default NotificationsContent;

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

@@ -0,0 +1,79 @@
+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="border-b3-line border-1 bg-b3-primary-wash size-14 rounded-full border"
+          />
+
+          <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="b3-modal-username 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,106 @@
+import { useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { Chain } from "thirdweb";
+import { useProfiles } from "thirdweb/react";
+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 { data: profilesRaw = [] } = useProfiles({ client });
+
+  const profiles = profilesRaw.filter((profile: any) => !["custom_auth_endpoint"].includes(profile.type));
+
+  const handleNavigate = (type: "home" | "swap" | "linkAccount" | "avatarEditor" | "notifications") => {
+    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 if (type === "notifications") {
+      setB3ModalContentType({
+        type: "notifications",
+        chain,
+        partnerId,
+      });
+    } else {
+      setB3ModalContentType({
+        type: "avatarEditor",
+      });
+    }
+    setB3ModalOpen(true);
+  };
+
+  return (
+    <div className="flex h-[470px] flex-col">
+      <ModalHeader showBackButton={false} showCloseButton={false} title="Settings" />
+
+      {/* Profile Section */}
+      <div className="p-5">
+        <div className="b3-modal-settings-profile-card 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={
+            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z"
+                fill="#F4F4F5"
+              />
+            </svg>
+          }
+          title="Linked Accounts"
+          subtitle={`${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`}
+          onClick={() => handleNavigate("linkAccount")}
+        />
+        <SettingsMenuItem
+          icon={
+            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z"
+                fill="#F4F4F5"
+              />
+            </svg>
+          }
+          title="Notifications"
+          subtitle="Manage your notifications"
+          onClick={() => handleNavigate("notifications")}
+        />
+      </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="b3-modal-settings-menu-item 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;