@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.1

package/src/global-account/react/components/LinkAccount/LinkNewAccount.tsx

@@ -0,0 +1,480 @@
+import app from "@b3dotfun/sdk/global-account/app";
+import { toast } from "@b3dotfun/sdk/global-account/react";
+import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
+import { thirdwebB3Mainnet } from "@b3dotfun/sdk/shared/constants/chains/b3Chain";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { Loader2, Mail, Phone, WalletIcon } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+import { useLinkProfile, useProfiles } from "thirdweb/react";
+import { createWallet, preAuthenticate, WalletId } from "thirdweb/wallets";
+import { WalletRow } from "../..";
+import { LinkNewAccountModalProps, useModalStore } from "../../stores/useModalStore";
+import { getProfileDisplayInfo } from "../../utils/profileDisplay";
+import { useB3 } from "../B3Provider/useB3";
+import { AppleIcon } from "../icons/AppleIcon";
+import { DiscordIcon } from "../icons/DiscordIcon";
+import { FarcasterIcon } from "../icons/FarcasterIcon";
+import { GoogleIcon } from "../icons/GoogleIcon";
+import { XIcon } from "../icons/XIcon";
+import ModalHeader from "../ModalHeader/ModalHeader";
+import { Button } from "../ui/button";
+type OTPStrategy = "email" | "phone";
+type SocialStrategy = "google" | "x" | "discord" | "apple" | "farcaster";
+type Strategy = OTPStrategy | SocialStrategy | "wallet";
+
+interface AuthMethod {
+  id: Strategy;
+  label: string;
+  enabled: boolean;
+  icon: React.ReactNode;
+  walletType?: WalletId;
+}
+
+const AUTH_METHODS: AuthMethod[] = [
+  { id: "email", label: "Email", enabled: true, icon: <Mail className="text-b3-primary-blue size-6" /> },
+  { id: "phone", label: "Phone", enabled: true, icon: <Phone className="text-b3-primary-blue size-6" /> },
+  { id: "google", label: "Google", enabled: true, icon: <GoogleIcon className="size-6" /> },
+  { id: "x", label: "X (Twitter)", enabled: true, icon: <XIcon className="size-6" /> },
+  { id: "discord", label: "Discord", enabled: true, icon: <DiscordIcon className="size-6" /> },
+  { id: "apple", label: "Apple", enabled: true, icon: <AppleIcon className="size-6" /> },
+  {
+    id: "farcaster",
+    label: "Farcaster",
+    enabled: true,
+    icon: <FarcasterIcon className="size-6" />,
+  },
+];
+
+const WALLET_METHODS: AuthMethod[] = [
+  {
+    id: "wallet",
+    label: "Wallet",
+    enabled: true,
+    icon: <WalletIcon className="size-6" />,
+    walletType: "com.coinbase.wallet",
+  },
+  { id: "wallet", label: "Wallet", enabled: true, icon: <WalletIcon className="size-6" />, walletType: "io.metamask" },
+  {
+    id: "wallet",
+    label: "Wallet",
+    enabled: true,
+    icon: <WalletIcon className="size-6" />,
+    walletType: "me.rainbow",
+  },
+  {
+    id: "wallet",
+    label: "Wallet",
+    enabled: true,
+    icon: <WalletIcon className="size-6" />,
+    walletType: "app.phantom",
+  },
+  { id: "wallet", label: "Wallet", enabled: true, icon: <WalletIcon className="size-6" />, walletType: "io.rabby" },
+  {
+    id: "wallet",
+    label: "Wallet",
+    enabled: true,
+    icon: <WalletIcon className="size-6" />,
+    walletType: "walletConnect",
+  },
+];
+
+export function LinkNewAccount({
+  onSuccess: onSuccessCallback,
+  onError,
+  onClose,
+  chain,
+  partnerId,
+  className,
+}: LinkNewAccountModalProps & { className?: string }) {
+  const isLinking = useModalStore(state => state.isLinking);
+  const linkingMethod = useModalStore(state => state.linkingMethod);
+  const setLinkingState = useModalStore(state => state.setLinkingState);
+  const navigateBack = useModalStore(state => state.navigateBack);
+  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+  const [selectedMethod, setSelectedMethod] = useState<Strategy | null>(null);
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [otp, setOtp] = useState("");
+  const [otpSent, setOtpSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { data: profilesRaw = [] } = useProfiles({ client });
+
+  // Get connected auth methods
+  const connectedAuthMethods = profilesRaw
+    .filter((profile: any) => !["custom_auth_endpoint"].includes(profile.type))
+    .map((profile: any) => profile.type as Strategy);
+
+  // Filter available auth methods
+  const availableAuthMethods = AUTH_METHODS.filter(
+    method => !connectedAuthMethods.includes(method.id) && method.enabled,
+  );
+
+  const profiles = profilesRaw
+    .filter((profile: any) => !["custom_auth_endpoint"].includes(profile.type))
+    .map((profile: any) => ({
+      ...getProfileDisplayInfo(profile),
+      originalProfile: profile,
+    }));
+
+  const { account } = useB3();
+  const { mutate: linkProfile } = useLinkProfile();
+
+  const onSuccess = useCallback(async () => {
+    await onSuccessCallback?.();
+  }, [onSuccessCallback]);
+
+  // Reset linking state when component unmounts
+  useEffect(() => {
+    return () => {
+      if (isLinking) {
+        setLinkingState(false);
+      }
+    };
+  }, [isLinking, setLinkingState]);
+
+  const mutationOptions = {
+    onError: (error: Error) => {
+      console.error("Error linking account:", error);
+      toast.error(error.message);
+      setLinkingState(false);
+      onError?.(error);
+    },
+    onSuccess: async (data: any) => {
+      console.log("Raw Link Account Data:", data);
+      try {
+        console.log("Sync user data...");
+        await app.service("users").syncTwProfiles({});
+      } catch (refreshError) {
+        console.warn("⚠️ Could not sync user data:", refreshError);
+      }
+    },
+  };
+
+  const validateInput = () => {
+    if (selectedMethod === "email") {
+      if (!email) {
+        setError("Please enter your email address");
+        return false;
+      }
+      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        setError("Please enter a valid email address");
+        return false;
+      }
+    } else if (selectedMethod === "phone") {
+      if (!phone) {
+        setError("Please enter your phone number");
+        return false;
+      }
+      if (!/^\+?[\d\s-]{10,}$/.test(phone)) {
+        setError("Please enter a valid phone number");
+        return false;
+      }
+    }
+    setError(null);
+    return true;
+  };
+
+  const handleSendOTP = async () => {
+    if (!validateInput()) return;
+
+    try {
+      setLinkingState(true, selectedMethod);
+      setError(null);
+
+      if (selectedMethod === "email") {
+        await preAuthenticate({
+          client,
+          strategy: "email",
+          email,
+          ecosystem: {
+            id: ecosystemWalletId,
+            partnerId: partnerId,
+          },
+        });
+      } else if (selectedMethod === "phone") {
+        await preAuthenticate({
+          client,
+          strategy: "phone",
+          phoneNumber: phone,
+          ecosystem: {
+            id: ecosystemWalletId,
+            partnerId: partnerId,
+          },
+        });
+      }
+
+      setOtpSent(true);
+    } catch (error) {
+      console.error("Error sending OTP:", error);
+      setError(error instanceof Error ? error.message : "Failed to send OTP");
+      onError?.(error as Error);
+      setLinkingState(false);
+    }
+  };
+
+  const handleLinkAccount = async () => {
+    if (!otp) {
+      console.error("No OTP entered");
+      setError("Please enter the verification code");
+      return;
+    }
+
+    try {
+      setOtpSent(false);
+      setLinkingState(true, selectedMethod);
+      setError(null);
+
+      if (selectedMethod === "email") {
+        await linkProfile(
+          {
+            client,
+            strategy: "email",
+            email,
+            verificationCode: otp,
+          },
+          mutationOptions,
+        );
+      } else if (selectedMethod === "phone") {
+        await linkProfile(
+          {
+            client,
+            strategy: "phone",
+            phoneNumber: phone,
+            verificationCode: otp,
+          },
+          mutationOptions,
+        );
+      }
+    } catch (error) {
+      console.error("Error linking account:", error);
+      setError(error instanceof Error ? error.message : "Failed to link account");
+      onError?.(error as Error);
+    }
+  };
+
+  const handleLinkWallet = async (walletType: WalletId) => {
+    setLinkingState(true, "wallet");
+    console.log("selectedMethod", walletType);
+    try {
+      if (!walletType) {
+        throw new Error("Wallet type not found");
+      }
+      await linkProfile(
+        {
+          client,
+          strategy: "wallet",
+          wallet: createWallet(walletType),
+          chain: thirdwebB3Mainnet,
+        },
+        mutationOptions,
+      );
+    } catch (error) {
+      console.error("Error linking account:", error);
+      setError(error instanceof Error ? error.message : "Failed to link account");
+      onError?.(error as Error);
+    }
+  };
+
+  const handleSocialLink = async (strategy: SocialStrategy) => {
+    try {
+      console.log("handleSocialLink", strategy);
+      setLinkingState(true, strategy);
+      setError(null);
+
+      const result = await linkProfile(
+        {
+          client,
+          strategy,
+        },
+        mutationOptions,
+      );
+
+      console.log("result", result);
+
+      // Don't close the modal yet, wait for auth to complete
+      onSuccess?.();
+    } catch (error) {
+      console.error("Error linking with social:", error);
+      setError(error instanceof Error ? error.message : "Failed to link social account");
+      onError?.(error as Error);
+      setLinkingState(false);
+    }
+  };
+
+  // Add effect to handle social auth completion
+  useEffect(() => {
+    if (isLinking && linkingMethod && !selectedMethod) {
+      // This means we're in a social auth flow
+      const checkAuthStatus = async () => {
+        try {
+          // Wait a bit to ensure auth is complete
+          await new Promise(resolve => setTimeout(resolve, 1000));
+          onClose?.();
+        } catch (error) {
+          console.error("Error checking auth status:", error);
+          setLinkingState(false);
+        }
+      };
+
+      checkAuthStatus();
+    }
+  }, [isLinking, linkingMethod, selectedMethod, onClose, setLinkingState]);
+
+  const handleFinishedLinking = useCallback(
+    (success: boolean) => {
+      if (success) {
+        onSuccess?.();
+        onClose?.();
+      }
+
+      setLinkingState(false);
+      navigateBack();
+      setB3ModalContentType({
+        type: "manageAccount",
+        activeTab: "settings",
+        setActiveTab: () => {},
+        chain,
+        partnerId,
+      });
+    },
+    [chain, navigateBack, partnerId, setB3ModalContentType, setLinkingState, onSuccess, onClose],
+  );
+
+  useEffect(() => {
+    if (isLinking) {
+      handleFinishedLinking(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [profiles.length]);
+
+  if (!account) {
+    return <div className="text-b3-foreground-muted py-8 text-center">Please connect your account first</div>;
+  }
+
+  return (
+    <div className={`b3-link-account space-y-6 ${className || ""}`} data-testid="link-account">
+      <ModalHeader title="Link New Account" />
+
+      {!selectedMethod ? (
+        <div className="b3-link-account-methods grid gap-3 px-5">
+          {availableAuthMethods.map(method => (
+            <Button
+              key={method.id}
+              variant="outline"
+              className="b3-link-account-method-button border-b3-line hover:border-b3-primary-blue/30 hover:bg-b3-primary-blue/5 text-b3-grey font-neue-montreal-medium h-14 justify-start bg-transparent px-6 text-base transition-all duration-200"
+              data-method={method.id}
+              onClick={() => {
+                if (method.id === "email" || method.id === "phone") {
+                  setSelectedMethod(method.id);
+                } else {
+                  handleSocialLink(method.id as SocialStrategy);
+                }
+              }}
+              disabled={linkingMethod === method.id}
+            >
+              {isLinking && linkingMethod === method.id ? (
+                <Loader2 className="h-5 w-5 animate-spin" />
+              ) : (
+                <div className="b3-link-account-method-content flex items-center gap-4">
+                  <div className="b3-link-account-method-icon flex items-center justify-center rounded-full">
+                    {method.icon}
+                  </div>
+                  <span className="b3-link-account-method-label font-medium">{method.label}</span>
+                </div>
+              )}
+            </Button>
+          ))}
+          {WALLET_METHODS.map(method => {
+            if (!method.walletType) {
+              return null;
+            }
+
+            return (
+              <WalletRow
+                key={method.walletType}
+                walletId={method.walletType as WalletId}
+                onClick={() => handleLinkWallet(method.walletType as WalletId)}
+                isLoading={isLinking}
+              />
+            );
+          })}
+          {availableAuthMethods.length === 0 && (
+            <div className="text-b3-foreground-muted py-8 text-center">
+              All available authentication methods have been connected
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="b3-link-account-form space-y-4 px-5">
+          {selectedMethod === "email" && (
+            <div className="space-y-2">
+              <label className="text-b3-grey font-neue-montreal-medium text-sm">Email Address</label>
+              <input
+                type="email"
+                placeholder="Enter your email"
+                className="bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2"
+                value={email}
+                onChange={e => setEmail(e.target.value)}
+                disabled={otpSent || (isLinking && linkingMethod === "email")}
+              />
+            </div>
+          )}
+
+          {selectedMethod === "phone" && (
+            <div className="space-y-2">
+              <label className="text-b3-grey font-neue-montreal-medium text-sm">Phone Number</label>
+              <input
+                type="tel"
+                placeholder="Enter your phone number"
+                className="bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2"
+                value={phone}
+                onChange={e => setPhone(e.target.value)}
+                disabled={otpSent || (isLinking && linkingMethod === "phone")}
+              />
+              <p className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
+                Include country code (e.g., +1 for US)
+              </p>
+            </div>
+          )}
+
+          {error && <div className="text-b3-negative font-neue-montreal-medium py-2 text-sm">{error}</div>}
+
+          {(selectedMethod === "email" || selectedMethod === "phone") &&
+            (otpSent ? (
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <label className="text-b3-grey font-neue-montreal-medium text-sm">Verification Code</label>
+                  <input
+                    type="text"
+                    placeholder="Enter verification code"
+                    className="bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2"
+                    value={otp}
+                    onChange={e => setOtp(e.target.value)}
+                  />
+                </div>
+                <Button
+                  className="bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white"
+                  onClick={handleLinkAccount}
+                >
+                  Link Account
+                </Button>
+              </div>
+            ) : (
+              <Button
+                className="bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white"
+                onClick={handleSendOTP}
+                disabled={(!email && !phone) || (isLinking && linkingMethod === selectedMethod)}
+              >
+                {isLinking && linkingMethod === selectedMethod ? (
+                  <Loader2 className="animate-spin" />
+                ) : (
+                  "Send Verification Code"
+                )}
+              </Button>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/global-account/react/components/LinkAccount/LinkedAccountItem.tsx

@@ -0,0 +1,135 @@
+import { Button, toast, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { truncateAddress } from "@b3dotfun/sdk/shared/utils/truncateAddress";
+import { Copy, Loader2, UnlinkIcon } from "lucide-react";
+
+// Helper function to check if a string is a wallet address and format it
+const formatProfileTitle = (title: string): { displayTitle: string; isAddress: boolean } => {
+  // Check if title looks like an Ethereum address (0x followed by 40 hex characters)
+  const isEthereumAddress = /^0x[a-fA-F0-9]{40}$/.test(title);
+
+  if (isEthereumAddress) {
+    return {
+      displayTitle: truncateAddress(title),
+      isAddress: true,
+    };
+  }
+
+  return {
+    displayTitle: title,
+    isAddress: false,
+  };
+};
+
+interface LinkedAccountItemProps {
+  profile: {
+    title: string;
+    imageUrl?: string | null;
+    initial: string;
+    type: string;
+    subtitle: string;
+    originalProfile: any;
+  };
+  profileToUnlink: any;
+  unlinkingAccountId: string | null;
+  isUnlinking: boolean;
+  onUnlinkClick: (profile: any) => void;
+}
+
+const LinkedAccountItem = ({
+  profile,
+  profileToUnlink,
+  unlinkingAccountId,
+  isUnlinking,
+  onUnlinkClick,
+}: LinkedAccountItemProps) => {
+  const { displayTitle, isAddress } = formatProfileTitle(profile.title);
+  const { data: profileData } = useProfile({ address: profile.title });
+
+  const handleCopyAddress = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(profile.title);
+      toast.success("Address copied to clipboard!");
+    } catch (error) {
+      toast.error("Failed to copy address");
+    }
+  };
+
+  const displayImageUrl = profileData?.avatar || profile.imageUrl;
+  const displayName = profileData?.name || displayTitle;
+
+  return (
+    <div className="linked-account-item hover:bg-b3-line group flex cursor-pointer items-center justify-between rounded-xl p-4 transition-colors">
+      <div className="linked-account-info flex items-center gap-3">
+        {displayImageUrl ? (
+          <img
+            src={displayImageUrl}
+            alt={profile.title}
+            className="linked-account-avatar linked-account-avatar-image size-10 rounded-full"
+          />
+        ) : (
+          <div className="linked-account-avatar linked-account-avatar-placeholder bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full">
+            <span className="linked-account-initial text-b3-grey font-neue-montreal-semibold text-sm uppercase">
+              {profile.initial}
+            </span>
+          </div>
+        )}
+        <div className="linked-account-details">
+          <div className="linked-account-title-row flex items-center gap-2">
+            <div className="flex items-center gap-1">
+              <span
+                className={`linked-account-title text-b3-grey font-neue-montreal-semibold ${
+                  isAddress
+                    ? "font-mono text-sm" // Use monospace font for addresses
+                    : "break-words" // Use break-words for emails/names (better than break-all)
+                }`}
+                title={isAddress ? profile.title : undefined} // Show full address on hover
+              >
+                {displayName}
+              </span>
+              {isAddress && (
+                <button
+                  onClick={handleCopyAddress}
+                  className="linked-account-copy-button ml-1 rounded p-1 opacity-0 transition-opacity hover:bg-gray-100 group-hover:opacity-100"
+                  title="Copy full address"
+                >
+                  <Copy size={12} className="text-gray-500 hover:text-gray-700" />
+                </button>
+              )}
+            </div>
+            <span className="linked-account-type text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs">
+              {profile.type.toUpperCase()}
+            </span>
+          </div>
+          <div className="linked-account-subtitle text-b3-foreground-muted font-neue-montreal-medium text-sm">
+            {profile.subtitle}
+          </div>
+        </div>
+      </div>
+      <Button
+        variant="ghost"
+        size={profileToUnlink?.title === profile.title ? "sm" : "icon"}
+        className={`linked-account-unlink-button transition-all ${
+          profileToUnlink?.title === profile.title
+            ? "bg-b3-negative hover:bg-b3-negative/90 text-white"
+            : "text-b3-grey hover:text-b3-negative"
+        }`}
+        onClick={() => onUnlinkClick(profile)}
+        disabled={unlinkingAccountId === profile.title || isUnlinking}
+      >
+        {unlinkingAccountId === profile.title || isUnlinking ? (
+          <Loader2 className="linked-account-unlink-loading h-4 w-4 animate-spin" />
+        ) : profileToUnlink?.title === profile.title ? (
+          <div className="flex items-center gap-1.5">
+            <UnlinkIcon size={14} className="linked-account-unlink-icon" />
+            <span className="text-xs font-semibold">Unlink</span>
+          </div>
+        ) : (
+          <UnlinkIcon size={16} className="linked-account-unlink-icon" />
+        )}
+      </Button>
+    </div>
+  );
+};
+
+export default LinkedAccountItem;