@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.0

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

@@ -0,0 +1,197 @@
+import { ens_normalize } from "@adraffy/ens-normalize";
+import app from "@b3dotfun/sdk/global-account/app";
+import { toast, 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 { Users } from "@b3dotfun/b3-api";
+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 sanitizedUsername = ens_normalize(editedUsername.trim());
+      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
+      const updatedUser = (await app
+        .service("users")
+        .registerUsername(
+          { username: b3Username, message: usernameSignMessage, hash: usernameSignature },
+          {} as any,
+        )) as unknown as Users;
+      // 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-medium focus:border-b3-primary-blue text-md w-full rounded-md border px-2 py-1 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="b3-modal-username 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/TokenBalanceRow.tsx

@@ -1,19 +1,34 @@
-import { Triangle } from "lucide-react";
-import { ReactNode } from "react";
+import { Coins, Triangle } from "lucide-react";
 
 interface TokenBalanceRowProps {
-  icon: ReactNode;
+  tokenLogo: string;
+  chainLogo: string;
   name: string;
   balance: string;
   usdValue: string;
   priceChange?: number | null;
 }
 
-export function TokenBalanceRow({ icon, name, balance, usdValue, priceChange }: TokenBalanceRowProps) {
+export function TokenBalanceRow({ tokenLogo, chainLogo, name, balance, usdValue, priceChange }: TokenBalanceRowProps) {
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-3">
-        <div className="flex h-10 w-10 items-center justify-center rounded-full">{icon}</div>
+        <div className="relative flex h-10 w-10 items-center justify-center">
+          {/* Token logo */}
+          {tokenLogo ? (
+            <img src={tokenLogo} alt={name} className="h-full w-full rounded-full object-cover" />
+          ) : (
+            <div className="flex h-full w-full items-center justify-center rounded-full bg-gray-200">
+              <Coins className="h-5 w-5 text-gray-400" />
+            </div>
+          )}
+          {/* Chain logo badge */}
+          {chainLogo && (
+            <div className="absolute -bottom-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full border-2 border-white bg-white">
+              <img src={chainLogo} alt="chain" className="h-full w-full rounded-full object-cover" />
+            </div>
+          )}
+        </div>
         <div>
           <div className="flex items-center gap-2">
             <span className="text-b3-grey font-neue-montreal-semibold">{name}</span>

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

@@ -0,0 +1,66 @@
+import { useSimBalance } from "@b3dotfun/sdk/global-account/react";
+import { getChainLogo } from "@b3dotfun/sdk/shared/constants/chains/supported";
+import { useActiveWallet } from "thirdweb/react";
+import { TokenBalanceRow } from "./TokenBalanceRow";
+
+// Chain logo URLs mapping
+const CHAIN_LOGOS: Record<number, string> = [1, 8453, 8333].map(chainId => getChainLogo(chainId));
+
+const TokenContent = () => {
+  // Get active wallet state
+  const activeWallet = useActiveWallet();
+  const activeAccount = activeWallet?.getAccount();
+  const activeAddress = activeAccount?.address;
+
+  const { data: simBalance } = useSimBalance(activeAddress, [8453, 8333, 1]);
+  console.log("simBalance :", simBalance);
+
+  if (!activeAddress) {
+    return <div className="col-span-3 py-12 text-center text-gray-500">No tokens found</div>;
+  }
+
+  if (!simBalance?.balances || simBalance.balances.length === 0) {
+    return <div className="col-span-3 py-12 text-center text-gray-500">No tokens found</div>;
+  }
+
+  // Sort by USD value descending
+  const sortedBalances = [...simBalance.balances].sort((a, b) => {
+    const valueA = a.value_usd || 0;
+    const valueB = b.value_usd || 0;
+    return valueB - valueA;
+  });
+
+  return (
+    <div className="flex max-h-[132px] flex-col gap-3 overflow-y-auto">
+      {sortedBalances.map((token, index) => {
+        // Format balance
+        const balance = (Number(token.amount) / Math.pow(10, token.decimals)).toFixed(4);
+        const usdValue = token.value_usd?.toFixed(2) || "0.00";
+
+        // Calculate 24h price change (if available in future API updates)
+        const priceChange = null; // API doesn't provide this yet
+
+        // Determine token logo
+        // For native tokens, use ETH logo instead of chain logo
+        let tokenLogo = token.token_metadata?.logo || "";
+        if (token.address === "native" && token.symbol === "ETH") {
+          tokenLogo = CHAIN_LOGOS[0];
+        }
+
+        return (
+          <TokenBalanceRow
+            key={`${token.chain_id}-${token.address}-${index}`}
+            tokenLogo={tokenLogo}
+            chainLogo={CHAIN_LOGOS[token.chain_id] || ""}
+            name={token.name || token.symbol}
+            balance={`${balance} ${token.symbol}`}
+            usdValue={usdValue}
+            priceChange={priceChange}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default TokenContent;

package/src/global-account/react/components/ManageAccount/channels/DiscordChannel.tsx

@@ -0,0 +1,119 @@
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { useState } from "react";
+import { notificationsAPI } from "../../../utils/notificationsAPI";
+import { useB3 } from "../../B3Provider/useB3";
+import { toast } from "../../Toast/toastApi";
+import { NotificationChannel } from "../NotificationChannel";
+
+const debug = debugB3React("DiscordChannel");
+
+interface DiscordChannelProps {
+  userId: string;
+  jwtToken: string;
+  discordChannel: any;
+  isConnected: boolean;
+  isOptimisticallyConnected: boolean;
+  onConnectionChange: () => void;
+  onToggle: (enabled: boolean) => void;
+}
+
+export const DiscordChannel = ({
+  userId,
+  jwtToken,
+  discordChannel,
+  isConnected,
+  isOptimisticallyConnected,
+  onConnectionChange,
+  onToggle,
+}: DiscordChannelProps) => {
+  const { partnerId } = useB3();
+
+  const [discordId, setDiscordId] = useState("");
+  const [isConnecting, setIsConnecting] = useState(false);
+
+  // Detect if we're disconnecting
+  const isDisconnecting = isConnected && !isOptimisticallyConnected;
+
+  const handleConnect = async () => {
+    if (!discordId || !userId || !jwtToken) return;
+
+    try {
+      setIsConnecting(true);
+      await notificationsAPI.connectDiscord(userId, discordId, jwtToken);
+      await notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+
+      setDiscordId("");
+      toast.success("Discord connected successfully!");
+      onConnectionChange();
+    } catch (err: any) {
+      debug("Error connecting Discord:", err);
+      toast.error("Failed to connect Discord");
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleToggle = () => {
+    onToggle(isConnected);
+  };
+
+  const icon = (
+    <svg id="Discord-Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.644 96">
+      <path
+        id="Discord-Symbol-Blurple"
+        className="fill-[#ffffff]"
+        d="M81.15,0c-1.2376,2.1973-2.3489,4.4704-3.3591,6.794-9.5975-1.4396-19.3718-1.4396-28.9945,0-.985-2.3236-2.1216-4.5967-3.3591-6.794-9.0166,1.5407-17.8059,4.2431-26.1405,8.0568C2.779,32.5304-1.6914,56.3725.5312,79.8863c9.6732,7.1476,20.5083,12.603,32.0505,16.0884,2.6014-3.4854,4.8998-7.1981,6.8698-11.0623-3.738-1.3891-7.3497-3.1318-10.8098-5.1523.9092-.6567,1.7932-1.3386,2.6519-1.9953,20.281,9.547,43.7696,9.547,64.0758,0,.8587.7072,1.7427,1.3891,2.6519,1.9953-3.4601,2.0457-7.0718,3.7632-10.835,5.1776,1.97,3.8642,4.2683,7.5769,6.8698,11.0623,11.5419-3.4854,22.3769-8.9156,32.0509-16.0631,2.626-27.2771-4.496-50.9172-18.817-71.8548C98.9811,4.2684,90.1918,1.5659,81.1752.0505l-.0252-.0505ZM42.2802,65.4144c-6.2383,0-11.4159-5.6575-11.4159-12.6535s4.9755-12.6788,11.3907-12.6788,11.5169,5.708,11.4159,12.6788c-.101,6.9708-5.026,12.6535-11.3907,12.6535ZM84.3576,65.4144c-6.2637,0-11.3907-5.6575-11.3907-12.6535s4.9755-12.6788,11.3907-12.6788,11.4917,5.708,11.3906,12.6788c-.101,6.9708-5.026,12.6535-11.3906,12.6535Z"
+      />
+    </svg>
+  );
+
+  const inputSection = (
+    <div className="mt-1 space-y-2">
+      <input
+        type="text"
+        value={discordId}
+        onChange={e => setDiscordId(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === "Enter" && discordId) {
+            handleConnect();
+          }
+        }}
+        placeholder="Discord User ID"
+        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 font-['Inter',sans-serif] text-sm focus:border-blue-500 focus:outline-none"
+      />
+      <button
+        onClick={handleConnect}
+        disabled={isConnecting || !discordId}
+        className="flex items-center gap-1 disabled:opacity-50"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path
+            d="M8 3.33333V12.6667M3.33333 8H12.6667"
+            stroke="#0c68e9"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        <span className="font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]">
+          {isConnecting ? "Connecting..." : "Add Discord"}
+        </span>
+      </button>
+    </div>
+  );
+
+  return (
+    <NotificationChannel
+      icon={icon}
+      iconClassName="bg-[#5865f2] rounded-xl p-2"
+      title="Discord"
+      isConnected={isOptimisticallyConnected}
+      isConnecting={isConnecting}
+      isDisconnecting={isDisconnecting}
+      connectedInfo={discordChannel?.channel_identifier}
+      inputSection={inputSection}
+      onToggle={handleToggle}
+      showBorder={false}
+    />
+  );
+};

package/src/global-account/react/components/ManageAccount/channels/EmailChannel.tsx

@@ -0,0 +1,168 @@
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { useState } from "react";
+import { notificationsAPI } from "../../../utils/notificationsAPI";
+import { useB3 } from "../../B3Provider/useB3";
+import { toast } from "../../Toast/toastApi";
+import { NotificationChannel } from "../NotificationChannel";
+
+const debug = debugB3React("EmailChannel");
+
+interface EmailChannelProps {
+  userId: string;
+  jwtToken: string;
+  emailChannel: any;
+  isConnected: boolean;
+  isOptimisticallyConnected: boolean;
+  onConnectionChange: () => void;
+  onToggle: (enabled: boolean) => void;
+}
+
+const validateEmail = (email: string): boolean => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};
+
+export const EmailChannel = ({
+  userId,
+  jwtToken,
+  emailChannel,
+  isConnected,
+  isOptimisticallyConnected,
+  onConnectionChange,
+  onToggle,
+}: EmailChannelProps) => {
+  const { partnerId } = useB3();
+
+  const [email, setEmail] = useState("");
+  const [emailError, setEmailError] = useState<string | null>(null);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [showInput, setShowInput] = useState(false);
+
+  // Detect if we're disconnecting by comparing real vs optimistic state
+  const isDisconnecting = isConnected && !isOptimisticallyConnected;
+
+  const handleConnect = async () => {
+    if (!email || !userId || !jwtToken) return;
+
+    if (!validateEmail(email)) {
+      setEmailError("Please enter a valid email address");
+      return;
+    }
+
+    try {
+      setIsConnecting(true);
+      setEmailError(null);
+
+      await notificationsAPI.connectEmail(userId, email, jwtToken);
+      await notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+
+      setEmail("");
+      setShowInput(false);
+      toast.success("Email connected successfully!");
+      onConnectionChange();
+    } catch (err: any) {
+      debug("Error connecting email:", err);
+      toast.error("Failed to connect email");
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleToggle = () => {
+    if (isConnected) {
+      setShowInput(false);
+    }
+    onToggle(isConnected); // Pass current state - parent will handle disconnect if true
+  };
+
+  const icon = (
+    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+      <path
+        d="M3.55588 13.6357C3.056 13.2787 2.80606 13.1001 2.58815 13.077C2.26227 13.0423 1.93568 13.2104 1.77447 13.4957C1.66667 13.6865 1.66668 13.9903 1.66669 14.5978V25.4022C1.66667 26.7438 1.66665 27.8511 1.74035 28.753C1.81689 29.6899 1.98116 30.551 2.39331 31.3599C3.03247 32.6144 4.05234 33.6342 5.30675 34.2734C6.11564 34.6855 6.97682 34.8498 7.91365 34.9263C8.81563 35 9.92288 35 11.2645 35H28.7356C30.0772 35 31.1844 35 32.0864 34.9263C33.0232 34.8498 33.8844 34.6855 34.6933 34.2734C35.9477 33.6342 36.9676 32.6144 37.6067 31.3599C38.0189 30.551 38.1832 29.6899 38.2597 28.753C38.3334 27.8511 38.3334 26.7438 38.3334 25.4022V14.5978C38.3334 14.3 38.3334 14.1511 38.3061 14.0472C38.1828 13.5771 37.6717 13.3094 37.2151 13.4755C37.1141 13.5123 36.9901 13.5981 36.7422 13.7697L23.8386 22.7032C22.9237 23.3386 22.1204 23.8965 21.2078 24.1177C20.4096 24.3112 19.5761 24.305 18.7808 24.0998C17.8716 23.8652 17.0766 23.2956 16.1711 22.6468L3.55588 13.6357Z"
+        fill="#0C68E9"
+      />
+      <path
+        d="M36.888 9.61453C37.1957 9.40153 37.3495 9.29503 37.444 9.12373C37.5174 8.99071 37.5594 8.78007 37.5426 8.62908C37.5209 8.43465 37.4383 8.30628 37.273 8.04955C36.6399 7.06607 35.7288 6.25426 34.6933 5.72663C33.8844 5.31447 33.0232 5.1502 32.0864 5.07366C31.1844 4.99996 30.0771 4.99998 28.7355 5H11.2645C9.92292 4.99998 8.81563 4.99996 7.91365 5.07366C6.97682 5.1502 6.11564 5.31447 5.30675 5.72663C4.37503 6.20136 3.56969 6.88767 2.95729 7.72225C2.76463 7.98482 2.6683 8.1161 2.63656 8.31534C2.61174 8.47116 2.6464 8.68762 2.71862 8.8279C2.81098 9.00727 2.97117 9.1217 3.29156 9.35055L17.9167 19.7971C19.1288 20.6628 19.386 20.8135 19.6136 20.8722C19.8787 20.9406 20.1565 20.9426 20.4226 20.8782C20.651 20.8228 20.9104 20.6759 22.1351 19.8281L36.888 9.61453Z"
+        fill="#0C68E9"
+      />
+    </svg>
+  );
+
+  const addButtonSection = (
+    <button onClick={() => setShowInput(true)} className="mt-1 flex items-center gap-1">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path
+          d="M8 3.33333V12.6667M3.33333 8H12.6667"
+          stroke="#0c68e9"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      <span className="font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]">
+        Add Email
+      </span>
+    </button>
+  );
+
+  const inputSection = showInput ? (
+    <div className="mt-1 space-y-2">
+      <div>
+        <input
+          type="email"
+          value={email}
+          onChange={e => {
+            setEmail(e.target.value);
+            if (emailError) setEmailError(null);
+          }}
+          onKeyDown={e => {
+            if (e.key === "Enter" && email) {
+              handleConnect();
+            }
+          }}
+          placeholder="your@email.com"
+          className={`w-full rounded-lg border px-2 py-1.5 font-['Inter',sans-serif] text-sm focus:outline-none ${
+            emailError ? "border-red-500 focus:border-red-500" : "border-gray-300 focus:border-blue-500"
+          }`}
+        />
+        {emailError && (
+          <p className="mt-1 font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[12px] leading-[16px] text-red-600">
+            {emailError}
+          </p>
+        )}
+      </div>
+      <button
+        onClick={handleConnect}
+        disabled={isConnecting || !email}
+        className="flex items-center gap-1 disabled:opacity-50"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path
+            d="M8 3.33333V12.6667M3.33333 8H12.6667"
+            stroke="#0c68e9"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        <span className="font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]">
+          {isConnecting ? "Connecting..." : "Add Email"}
+        </span>
+      </button>
+    </div>
+  ) : null;
+
+  return (
+    <NotificationChannel
+      icon={icon}
+      title="Email"
+      isConnected={isOptimisticallyConnected}
+      isConnecting={isConnecting}
+      isDisconnecting={isDisconnecting}
+      connectedInfo={emailChannel?.channel_identifier}
+      inputSection={inputSection}
+      addButtonSection={addButtonSection}
+      onToggle={handleToggle}
+    />
+  );
+};