@b3dotfun/sdk 0.0.26-alpha.5 → 0.0.26-alpha.7

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

@@ -0,0 +1,369 @@
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { Loader2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { useLinkProfile, useProfiles } from "thirdweb/react";
+import { preAuthenticate } from "thirdweb/wallets";
+import { LinkAccountModalProps, useModalStore } from "../../stores/useModalStore";
+import { getProfileDisplayInfo } from "../../utils/profileDisplay";
+import { useB3 } from "../B3Provider/useB3";
+import { Button } from "../ui/button";
+type OTPStrategy = "email" | "phone";
+type SocialStrategy = "google" | "x" | "discord" | "apple";
+type Strategy = OTPStrategy | SocialStrategy;
+
+interface AuthMethod {
+  id: Strategy;
+  label: string;
+  enabled: boolean;
+  icon?: string;
+}
+
+const AUTH_METHODS: AuthMethod[] = [
+  { id: "email", label: "Email", enabled: true },
+  { id: "phone", label: "Phone", enabled: true },
+  { id: "google", label: "Google", enabled: true },
+  { id: "x", label: "X (Twitter)", enabled: true },
+  { id: "discord", label: "Discord", enabled: true },
+  { id: "apple", label: "Apple", enabled: true },
+];
+
+export function LinkAccount({
+  onSuccess: onSuccessCallback,
+  onError,
+  onClose,
+  chain,
+  partnerId,
+}: LinkAccountModalProps) {
+  const { isLinking, linkingMethod, setLinkingState, navigateBack, setB3ModalContentType } = useModalStore();
+  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", "siwe"].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", "siwe"].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);
+    },
+  };
+
+  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,
+        });
+      } else if (selectedMethod === "phone") {
+        await preAuthenticate({
+          client,
+          strategy: "phone",
+          phoneNumber: phone,
+        });
+      }
+
+      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) {
+      setError("Please enter the verification code");
+      return;
+    }
+
+    try {
+      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,
+        );
+      }
+
+      onSuccess?.();
+      onClose?.();
+    } catch (error) {
+      console.error("Error linking account:", error);
+      setError(error instanceof Error ? error.message : "Failed to link account");
+      onError?.(error as Error);
+    } finally {
+      setLinkingState(false);
+    }
+  };
+
+  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 handleBack = useCallback(() => {
+    if (isLinking) return;
+    setSelectedMethod(null);
+    setEmail("");
+    setPhone("");
+    setOtp("");
+    setOtpSent(false);
+    setError(null);
+    setLinkingState(false);
+  }, [isLinking, setSelectedMethod, setEmail, setPhone, setOtp, setOtpSent, setError, setLinkingState]);
+
+  useEffect(() => {
+    if (isLinking) {
+      setLinkingState(false);
+      navigateBack();
+      setB3ModalContentType({
+        type: "manageAccount",
+        activeTab: "settings",
+        setActiveTab: () => {},
+        chain,
+        partnerId,
+      });
+    }
+    // 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="space-y-6 p-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-b3-grey font-neue-montreal-semibold text-2xl">Link New Account</h2>
+        {selectedMethod && (
+          <Button variant="ghost" className="text-b3-grey hover:text-b3-grey/80" onClick={handleBack}>
+            Backs
+          </Button>
+        )}
+      </div>
+
+      {!selectedMethod ? (
+        <div className="grid gap-3">
+          {availableAuthMethods.map(method => (
+            <Button
+              key={method.id}
+              className="bg-b3-primary-wash hover:bg-b3-primary-wash/70 text-b3-grey font-neue-montreal-semibold h-16 justify-start px-6 text-lg"
+              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="animate-spin" /> : method.label}
+            </Button>
+          ))}
+          {availableAuthMethods.length === 0 && (
+            <div className="text-b3-foreground-muted py-8 text-center">
+              All available authentication methods have been connected
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {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>}
+
+          {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)}
+                  disabled={isLinking && linkingMethod === selectedMethod}
+                />
+              </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}
+                disabled={!otp || (isLinking && linkingMethod === selectedMethod)}
+              >
+                {isLinking && linkingMethod === selectedMethod ? <Loader2 className="animate-spin" /> : "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/ManageAccount/ManageAccount.tsx

@@ -1,6 +1,7 @@
 import {
   Button,
   CopyToClipboard,
+  ManageAccountModalProps,
   TabsContentPrimitive,
   TabsListPrimitive,
   TabsPrimitive,
@@ -20,14 +21,18 @@ import { SignOutIcon } from "@b3dotfun/sdk/global-account/react/components/icons
 import { SwapIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SwapIcon";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { formatNumber } from "@b3dotfun/sdk/shared/utils/formatNumber";
-import { Loader2, Pencil, Triangle } from "lucide-react";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { LinkIcon, Loader2, Pencil, Triangle, UnlinkIcon } from "lucide-react";
 import { useState } from "react";
 import { Chain } from "thirdweb";
-import { useActiveAccount } from "thirdweb/react";
+import { useActiveAccount, useProfiles, useUnlinkProfile } from "thirdweb/react";
 import { formatUnits } from "viem";
 import useFirstEOA from "../../hooks/useFirstEOA";
+import { getProfileDisplayInfo } from "../../utils/profileDisplay";
 import { AccountAssets } from "../AccountAssets/AccountAssets";
 
+type TabValue = "balance" | "assets" | "apps" | "settings";
+
 interface ManageAccountProps {
   onLogout?: () => void;
   onSwap?: () => void;
@@ -50,7 +55,6 @@ export function ManageAccount({
   chain,
   partnerId,
 }: ManageAccountProps) {
-  const [activeTab, setActiveTab] = useState("balance");
   const [revokingSignerId, setRevokingSignerId] = useState<string | null>(null);
   const account = useActiveAccount();
   const { data: assets, isLoading } = useAccountAssets(account?.address);
@@ -67,7 +71,8 @@ export function ManageAccount({
     chain,
     accountAddress: account?.address,
   });
-  const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
+  const { setB3ModalOpen, setB3ModalContentType, contentType } = useModalStore();
+  const { activeTab = "balance", setActiveTab } = contentType as ManageAccountModalProps;
   const { logout } = useAuthentication(partnerId);
   const [logoutLoading, setLogoutLoading] = useState(false);
 
@@ -408,10 +413,177 @@ export function ManageAccount({
     </div>
   );
 
+  const SettingsContent = () => {
+    const [unlinkingAccountId, setUnlinkingAccountId] = useState<string | null>(null);
+    const { data: profilesRaw = [], isLoading: isLoadingProfiles } = useProfiles({ client });
+    const { mutate: unlinkProfile, isPending: isUnlinking } = useUnlinkProfile();
+    const { setB3ModalOpen, setB3ModalContentType, isLinking } = useModalStore();
+
+    const profiles = profilesRaw
+      .filter((profile: any) => !["custom_auth_endpoint", "siwe"].includes(profile.type))
+      .map((profile: any) => ({
+        ...getProfileDisplayInfo(profile),
+        originalProfile: profile,
+      }));
+
+    const handleUnlink = async (profile: any) => {
+      setUnlinkingAccountId(profile.title);
+      try {
+        await unlinkProfile({
+          client,
+          profileToUnlink: profile.originalProfile,
+        });
+      } catch (error) {
+        console.error("Error unlinking account:", error);
+      } finally {
+        setUnlinkingAccountId(null);
+      }
+    };
+
+    const handleOpenLinkModal = () => {
+      setB3ModalOpen(true);
+      setB3ModalContentType({
+        type: "linkAccount",
+        showBackButton: true,
+        partnerId,
+        chain,
+        onSuccess: async () => {
+          // Let the LinkAccount component handle modal closing
+        },
+        onError: () => {
+          // Let the LinkAccount component handle errors
+        },
+        onClose: () => {
+          // Let the LinkAccount component handle closing
+        },
+      });
+    };
+
+    return (
+      <div className="space-y-8">
+        {/* Linked Accounts Section */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="text-b3-grey font-neue-montreal-semibold text-xl">Linked Accounts</h3>
+            <Button
+              className="bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2"
+              onClick={handleOpenLinkModal}
+              disabled={isLinking}
+            >
+              {isLinking ? (
+                <Loader2 className="text-b3-primary-blue animate-spin" size={16} />
+              ) : (
+                <LinkIcon size={16} className="text-b3-primary-blue" />
+              )}
+              <span className="text-b3-grey font-neue-montreal-semibold">
+                {isLinking ? "Linking..." : "Link New Account"}
+              </span>
+            </Button>
+          </div>
+
+          {isLoadingProfiles ? (
+            <div className="flex justify-center py-8">
+              <Loader2 className="text-b3-grey animate-spin" />
+            </div>
+          ) : profiles.length > 0 ? (
+            <div className="space-y-4">
+              {profiles.map(profile => (
+                <div key={profile.title} className="bg-b3-line flex items-center justify-between rounded-xl p-4">
+                  <div className="flex items-center gap-3">
+                    {profile.imageUrl ? (
+                      <img src={profile.imageUrl} alt={profile.title} className="size-10 rounded-full" />
+                    ) : (
+                      <div className="bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full">
+                        <span className="text-b3-grey font-neue-montreal-semibold text-sm uppercase">
+                          {profile.initial}
+                        </span>
+                      </div>
+                    )}
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <span className="text-b3-grey font-neue-montreal-semibold">{profile.title}</span>
+                        <span className="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="text-b3-foreground-muted font-neue-montreal-medium text-sm">
+                        {profile.subtitle}
+                      </div>
+                    </div>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-b3-grey hover:text-b3-negative"
+                    onClick={() => handleUnlink(profile)}
+                    disabled={unlinkingAccountId === profile.title || isUnlinking}
+                  >
+                    {unlinkingAccountId === profile.title || isUnlinking ? (
+                      <Loader2 className="animate-spin" />
+                    ) : (
+                      <UnlinkIcon size={16} />
+                    )}
+                  </Button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-b3-foreground-muted py-8 text-center">No linked accounts found</div>
+          )}
+        </div>
+
+        {/* Additional Settings Sections */}
+        <div className="space-y-4">
+          <h3 className="text-b3-grey font-neue-montreal-semibold text-xl">Account Preferences</h3>
+          <div className="bg-b3-line rounded-xl p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="text-b3-grey font-neue-montreal-semibold">Dark Mode</div>
+                <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
+                  Switch between light and dark theme
+                </div>
+              </div>
+              {/* Theme toggle placeholder - can be implemented later */}
+              <div className="bg-b3-primary-wash h-6 w-12 rounded-full"></div>
+            </div>
+          </div>
+        </div>
+
+        {/* Global Account Info */}
+        <div className="border-b3-line flex items-center justify-between rounded-2xl border p-4">
+          <div>
+            <div className="flex items-center gap-2">
+              <img src="https://cdn.b3.fun/b3_logo.svg" alt="B3" className="h-4" />
+              <h3 className="font-neue-montreal-semibold text-b3-grey">Global Account</h3>
+            </div>
+
+            <p className="text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm">
+              Your universal account for all B3-powered apps
+            </p>
+          </div>
+          <button
+            className="text-b3-grey hover:text-b3-grey/80 hover:bg-b3-line border-b3-line flex size-12 items-center justify-center rounded-full border"
+            onClick={onLogoutEnhanced}
+          >
+            {logoutLoading ? <Loader2 className="animate-spin" /> : <SignOutIcon size={16} className="text-b3-grey" />}
+          </button>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className="b3-manage-account bg-b3-background flex flex-col rounded-xl">
       <div className="flex-1">
-        <TabsPrimitive defaultValue={activeTab} onValueChange={setActiveTab}>
+        <TabsPrimitive
+          defaultValue={activeTab}
+          onValueChange={value => {
+            const tab = value as TabValue;
+            if (["balance", "assets", "apps", "settings"].includes(tab)) {
+              setActiveTab?.(tab);
+            }
+          }}
+        >
           <TabsListPrimitive className="font-neue-montreal-semibold text-b3-grey flex h-8 w-full items-start justify-start gap-8 border-0 text-xl md:p-4">
             <TabTriggerPrimitive
               value="balance"
@@ -431,6 +603,12 @@ export function ManageAccount({
             >
               Apps
             </TabTriggerPrimitive>
+            <TabTriggerPrimitive
+              value="settings"
+              className="data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4"
+            >
+              Settings
+            </TabTriggerPrimitive>
           </TabsListPrimitive>
 
           <TabsContentPrimitive value="balance" className="pt-4 md:p-4">
@@ -444,6 +622,10 @@ export function ManageAccount({
           <TabsContentPrimitive value="apps" className="pt-4 md:p-4">
             <AppsContent />
           </TabsContentPrimitive>
+
+          <TabsContentPrimitive value="settings" className="pt-4 md:p-4">
+            <SettingsContent />
+          </TabsContentPrimitive>
         </TabsPrimitive>
       </div>
     </div>

package/src/global-account/react/stores/useModalStore.ts

@@ -83,6 +83,10 @@ export interface ManageAccountModalProps extends BaseModalProps {
   chain: Chain;
   /** Partner ID */
   partnerId: string;
+  /** Active Tab */
+  activeTab?: "balance" | "assets" | "apps" | "settings";
+  /** Function to set the active tab */
+  setActiveTab?: (tab: "balance" | "assets" | "apps" | "settings") => void;
 }
 
 /**
@@ -291,6 +295,16 @@ export interface AnySpendBondKitProps extends BaseModalProps {
   onSuccess?: (txHash?: string) => void;
 }
 
+export interface LinkAccountModalProps extends BaseModalProps {
+  type: "linkAccount";
+  showBackButton?: boolean;
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+  onClose?: () => void;
+  partnerId: string;
+  chain: Chain;
+}
+
 /**
  * Union type of all possible modal content types
  */
@@ -308,7 +322,8 @@ export type ModalContentType =
   | AnySpendStakeB3Props
   | AnySpendBuySpinProps
   | AnySpendSignatureMintProps
-  | AnySpendBondKitProps;
+  | AnySpendBondKitProps
+  | LinkAccountModalProps;
 // Add other modal types here like: | OtherModalProps | AnotherModalProps
 
 /**
@@ -333,6 +348,12 @@ interface ModalState {
   ecoSystemAccountAddress?: Address;
   /** Function to set the ecosystem account address */
   setEcoSystemAccountAddress: (address: Address) => void;
+  /** Whether an account linking operation is in progress */
+  isLinking: boolean;
+  /** The method currently being linked */
+  linkingMethod: string | null;
+  /** Function to set the linking state */
+  setLinkingState: (isLinking: boolean, method?: string | null) => void;
 }
 
 /**
@@ -368,4 +389,8 @@ export const useModalStore = create<ModalState>(set => ({
   clearHistory: () => set({ history: [] }),
   ecoSystemAccountAddress: undefined,
   setEcoSystemAccountAddress: (address: Address) => set({ ecoSystemAccountAddress: address }),
+  isLinking: false,
+  linkingMethod: null,
+  setLinkingState: (isLinking: boolean, method: string | null = null) =>
+    set({ isLinking, linkingMethod: isLinking ? method : null }),
 }));