@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.0

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

@@ -0,0 +1,227 @@
+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("PhoneChannel");
+
+interface PhoneChannelProps {
+  userId: string;
+  jwtToken: string;
+  smsChannel: any;
+  whatsappChannel: any;
+  isSMSConnected: boolean;
+  isWhatsAppConnected: boolean;
+  isOptimisticallySMSConnected: boolean;
+  isOptimisticallyWhatsAppConnected: boolean;
+  onConnectionChange: () => void;
+  onToggle: (type: "sms" | "whatsapp", enabled: boolean) => void;
+}
+
+export const PhoneChannel = ({
+  userId,
+  jwtToken,
+  smsChannel,
+  whatsappChannel,
+  isSMSConnected,
+  isWhatsAppConnected,
+  isOptimisticallySMSConnected,
+  isOptimisticallyWhatsAppConnected,
+  onConnectionChange,
+  onToggle,
+}: PhoneChannelProps) => {
+  const { partnerId } = useB3();
+
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [isConnectingSMS, setIsConnectingSMS] = useState(false);
+  const [isConnectingWhatsApp, setIsConnectingWhatsApp] = useState(false);
+  const [showInput, setShowInput] = useState(false);
+
+  // Detect if we're disconnecting
+  const isDisconnecting =
+    (isSMSConnected && !isOptimisticallySMSConnected) || (isWhatsAppConnected && !isOptimisticallyWhatsAppConnected);
+
+  const handleConnectSMS = async () => {
+    if (!phoneNumber || !userId || !jwtToken) return;
+
+    try {
+      setIsConnectingSMS(true);
+      await notificationsAPI.connectSMS(userId, phoneNumber, jwtToken);
+      await notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+
+      setPhoneNumber("");
+      setShowInput(false);
+      toast.success("SMS connected successfully!");
+      onConnectionChange();
+    } catch (err: any) {
+      debug("Error connecting SMS:", err);
+      toast.error("Failed to connect SMS");
+    } finally {
+      setIsConnectingSMS(false);
+    }
+  };
+
+  const handleConnectWhatsApp = async () => {
+    if (!phoneNumber || !userId || !jwtToken) return;
+
+    try {
+      setIsConnectingWhatsApp(true);
+      await notificationsAPI.connectWhatsApp(userId, phoneNumber, jwtToken);
+      await notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+
+      setPhoneNumber("");
+      setShowInput(false);
+      toast.success("WhatsApp connected successfully!");
+      onConnectionChange();
+    } catch (err: any) {
+      debug("Error connecting WhatsApp:", err);
+      toast.error("Failed to connect WhatsApp");
+    } finally {
+      setIsConnectingWhatsApp(false);
+    }
+  };
+
+  const handleToggle = () => {
+    if (isSMSConnected || isWhatsAppConnected) {
+      setShowInput(false);
+    }
+    if (isSMSConnected) onToggle("sms", true);
+    if (isWhatsAppConnected) onToggle("whatsapp", true);
+  };
+
+  const icon = (
+    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M26.7596 36.4673C21.4375 34.9568 16.416 32.1062 12.2299 27.9201C8.04385 23.7341 5.19327 18.7125 3.68271 13.3905C3.67375 13.3589 3.66487 13.3277 3.65605 13.2966C3.4102 12.4316 3.21956 11.7608 3.21682 10.841C3.21369 9.78971 3.5562 8.47265 4.07108 7.55607C4.95655 5.97979 6.85783 3.9597 8.50003 3.12908C9.91893 2.4114 11.5946 2.4114 13.0135 3.12908C14.4172 3.83908 15.9806 5.42835 16.8521 6.76878C17.9296 8.42601 17.9296 10.5625 16.8521 12.2197C16.5633 12.6638 16.1518 13.0746 15.674 13.5516C15.5253 13.7001 15.3615 13.8074 15.4702 14.0339C16.5499 16.2827 18.0224 18.392 19.8902 20.2598C21.758 22.1276 23.8674 23.6001 26.1162 24.6798C26.3506 24.7924 26.443 24.6317 26.5985 24.476C27.0754 23.9983 27.4863 23.5867 27.9304 23.298C29.5876 22.2205 31.724 22.2205 33.3813 23.298C34.6858 24.1462 36.3165 25.7438 37.021 27.1365C37.7386 28.5554 37.7386 30.2311 37.021 31.65C36.1903 33.2922 34.1703 35.1935 32.594 36.079C31.6774 36.5938 30.3603 36.9364 29.309 36.9332C28.3892 36.9305 27.7184 36.7398 26.8534 36.494C26.8224 36.4852 26.7911 36.4763 26.7596 36.4673Z"
+        fill="#0C68E9"
+      />
+    </svg>
+  );
+
+  const addButtonSection = (
+    <div className="mt-1 flex gap-2">
+      <button onClick={() => setShowInput(true)} className="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 SMS
+        </span>
+      </button>
+      <span className="text-[11px] text-gray-400">|</span>
+      <button onClick={() => setShowInput(true)} className="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 WhatsApp
+        </span>
+      </button>
+    </div>
+  );
+
+  const inputSection = showInput ? (
+    <div className="mt-1 space-y-2">
+      <input
+        type="tel"
+        value={phoneNumber}
+        onChange={e => setPhoneNumber(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === "Enter" && phoneNumber) {
+            handleConnectSMS();
+          }
+        }}
+        placeholder="+1 (555) 123-4567"
+        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"
+      />
+      <div className="flex gap-2">
+        <button
+          onClick={handleConnectSMS}
+          disabled={isConnectingSMS || !phoneNumber}
+          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]">
+            {isConnectingSMS ? "Connecting..." : "Add SMS"}
+          </span>
+        </button>
+        <span className="text-[11px] text-gray-400">|</span>
+        <button
+          onClick={handleConnectWhatsApp}
+          disabled={isConnectingWhatsApp || !phoneNumber}
+          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]">
+            {isConnectingWhatsApp ? "Connecting..." : "Add WhatsApp"}
+          </span>
+        </button>
+      </div>
+    </div>
+  ) : null;
+
+  const connectedInfo = (
+    <>
+      {isSMSConnected && (
+        <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c]">
+          {smsChannel?.channel_identifier}
+        </p>
+      )}
+      {isWhatsAppConnected && (
+        <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c]">
+          {whatsappChannel?.channel_identifier}
+        </p>
+      )}
+    </>
+  );
+
+  return (
+    <NotificationChannel
+      icon={icon}
+      title="SMS/WhatsApp"
+      isConnected={isOptimisticallySMSConnected || isOptimisticallyWhatsAppConnected}
+      isConnecting={isConnectingSMS || isConnectingWhatsApp}
+      isDisconnecting={isDisconnecting}
+      connectedInfo={
+        isSMSConnected || isWhatsAppConnected ? (
+          <div className="mt-1 flex flex-col gap-1">{connectedInfo}</div>
+        ) : undefined
+      }
+      inputSection={inputSection}
+      addButtonSection={addButtonSection}
+      onToggle={handleToggle}
+    />
+  );
+};

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

@@ -0,0 +1,150 @@
+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("TelegramChannel");
+
+interface TelegramChannelProps {
+  userId: string;
+  jwtToken: string;
+  telegramChannel: any;
+  isConnected: boolean;
+  isOptimisticallyConnected: boolean;
+  onConnectionChange: () => void;
+  onToggle: (enabled: boolean) => void;
+}
+
+export const TelegramChannel = ({
+  userId,
+  jwtToken,
+  telegramChannel,
+  isConnected,
+  isOptimisticallyConnected,
+  onConnectionChange,
+  onToggle,
+}: TelegramChannelProps) => {
+  const { partnerId } = useB3();
+
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [status, setStatus] = useState<"idle" | "pending" | "connected">("idle");
+
+  // Detect if we're disconnecting
+  const isDisconnecting = isConnected && !isOptimisticallyConnected;
+
+  const handleConnect = async () => {
+    if (!userId || !jwtToken) return;
+
+    try {
+      setIsConnecting(true);
+      const { deepLink } = await notificationsAPI.getTelegramLink(jwtToken);
+      window.open(deepLink, "_blank");
+      setStatus("pending");
+
+      // Poll for connection using nested timeouts to avoid overlapping requests
+      const startTime = Date.now();
+      const maxDuration = 120000; // 2 minutes
+      let timeoutId: NodeJS.Timeout | null = null;
+
+      const pollStatus = async () => {
+        try {
+          const { connected } = await notificationsAPI.checkTelegramStatus(userId, jwtToken);
+          if (connected) {
+            if (timeoutId) clearTimeout(timeoutId);
+            setStatus("connected");
+            await notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+            toast.success("Telegram connected successfully!");
+            onConnectionChange();
+            return;
+          }
+        } catch (err) {
+          debug("Error checking Telegram status:", err);
+        }
+
+        // Check if we've exceeded max duration
+        if (Date.now() - startTime < maxDuration) {
+          // Schedule next check after previous one completes
+          timeoutId = setTimeout(pollStatus, 2000);
+        } else {
+          setStatus("idle");
+        }
+      };
+
+      // Start polling
+      timeoutId = setTimeout(pollStatus, 2000);
+    } catch (err: any) {
+      debug("Error connecting Telegram:", err);
+      toast.error("Failed to connect Telegram");
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleToggle = () => {
+    if (isConnected) {
+      setStatus("idle");
+      onToggle(true);
+    } else {
+      handleConnect();
+    }
+  };
+
+  const icon = (
+    <svg width="1000px" height="1000px" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <g id="Telegram" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path
+          d="M226.328419,494.722069 C372.088573,431.216685 469.284839,389.350049 517.917216,369.122161 C656.772535,311.36743 685.625481,301.334815 704.431427,301.003532 C708.567621,300.93067 717.815839,301.955743 723.806446,306.816707 C728.864797,310.92121 730.256552,316.46581 730.922551,320.357329 C731.588551,324.248848 732.417879,333.113828 731.758626,340.040666 C724.234007,419.102486 691.675104,610.964674 675.110982,699.515267 C668.10208,736.984342 654.301336,749.547532 640.940618,750.777006 C611.904684,753.448938 589.856115,731.588035 561.733393,713.153237 C517.726886,684.306416 492.866009,666.349181 450.150074,638.200013 C400.78442,605.66878 432.786119,587.789048 460.919462,558.568563 C468.282091,550.921423 596.21508,434.556479 598.691227,424.000355 C599.00091,422.680135 599.288312,417.758981 596.36474,415.160431 C593.441168,412.561881 589.126229,413.450484 586.012448,414.157198 C581.598758,415.158943 511.297793,461.625274 375.109553,553.556189 C355.154858,567.258623 337.080515,573.934908 320.886524,573.585046 C303.033948,573.199351 268.692754,563.490928 243.163606,555.192408 C211.851067,545.013936 186.964484,539.632504 189.131547,522.346309 C190.260287,513.342589 202.659244,504.134509 226.328419,494.722069 Z"
+          id="Path-3"
+          fill="#FFFFFF"
+        ></path>
+      </g>
+    </svg>
+  );
+
+  const inputSection =
+    status === "pending" ? (
+      <div className="mt-1">
+        <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-yellow-700">
+          Waiting for connection...
+        </p>
+        <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[12px] text-yellow-600">
+          Send /start to @b3_notifications_bot
+        </p>
+      </div>
+    ) : (
+      <button
+        onClick={handleConnect}
+        disabled={isConnecting}
+        className="mt-1 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 ? "Opening..." : "Add Telegram"}
+        </span>
+      </button>
+    );
+
+  return (
+    <NotificationChannel
+      icon={icon}
+      iconClassName="bg-[#24A1DE] rounded-xl"
+      title="Telegram"
+      isConnected={isOptimisticallyConnected || status === "connected"}
+      isConnecting={isConnecting}
+      isDisconnecting={isDisconnecting}
+      connectedInfo={telegramChannel?.channel_identifier || "Connected"}
+      inputSection={inputSection}
+      onToggle={handleToggle}
+    />
+  );
+};

package/src/global-account/react/components/ManageAccount/channels/index.ts

@@ -0,0 +1,4 @@
+export { DiscordChannel } from "./DiscordChannel";
+export { EmailChannel } from "./EmailChannel";
+export { PhoneChannel } from "./PhoneChannel";
+export { TelegramChannel } from "./TelegramChannel";

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

@@ -0,0 +1,61 @@
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import { ChevronLeft, X } from "lucide-react";
+import { useModalStore } from "../../stores";
+
+const ModalHeader = ({
+  showBackButton = true,
+  handleBack,
+  handleClose,
+  title,
+  children,
+  showCloseButton = true,
+  className,
+  showBackWord = false,
+}: {
+  showBackButton?: boolean;
+  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(
+        "b3-modal-header flex h-16 items-center justify-between border-b border-[#e4e4e7] bg-white px-5 py-3",
+        className,
+      )}
+    >
+      {showBackButton ? (
+        <button
+          onClick={handleBack || navigateBack}
+          className="flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70"
+        >
+          <ChevronLeft className="h-6 w-6 text-[#51525c]" />
+          {showBackWord && <span className="text-sm font-medium">Back</span>}
+        </button>
+      ) : (
+        <div className="w-2" />
+      )}
+      <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 className="w-2" />
+      ) : undefined}
+      {children}
+    </div>
+  );
+};
+
+export default ModalHeader;