@b3dotfun/sdk 0.0.34 → 0.0.35

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

@@ -133,7 +133,7 @@ export function ManageAccount({
     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 { setB3ModalOpen, setB3ModalContentType, isLinking, contentType } = useModalStore();
     const { user, setUser } = useB3();
     const [isUpdatingCode, setIsUpdatingCode] = useState(false);
     const [newReferralCode, setNewReferralCode] = useState("");
@@ -145,6 +145,7 @@ export function ManageAccount({
       { query: { referrerId: user?.userId } },
       !!user?.userId,
     );
+    const showReferralInfo = (contentType as ManageAccountModalProps)?.showReferralInfo ?? false;
 
     const mutationOptions = {
       onError: (error: Error) => {
@@ -305,22 +306,14 @@ export function ManageAccount({
           )}
         </div>
 
-        {/* Referral Section */}
-        <div className="space-y-4">
-          <h3 className="text-b3-grey font-neue-montreal-semibold text-xl">Referrals</h3>
+        {showReferralInfo && (
+          /* Referral Section */
+          <div className="space-y-4">
+            <h3 className="text-b3-grey font-neue-montreal-semibold text-xl">Referrals</h3>
 
-          {/* Referral Code */}
-          <div className="bg-b3-line rounded-xl p-4">
-            {isEditingCode && (
-              <div>
-                <div className="text-b3-grey font-neue-montreal-semibold">Your Referral Code</div>
-                <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
-                  Share this code with friends to earn rewards
-                </div>
-              </div>
-            )}
-            <div className="flex items-center justify-between">
-              {!isEditingCode && (
+            {/* Referral Code */}
+            <div className="bg-b3-line rounded-xl p-4">
+              {isEditingCode && (
                 <div>
                   <div className="text-b3-grey font-neue-montreal-semibold">Your Referral Code</div>
                   <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
@@ -328,78 +321,95 @@ export function ManageAccount({
                   </div>
                 </div>
               )}
-              <div className="flex items-center gap-2">
-                {isEditingCode ? (
-                  <div className="flex items-center gap-2">
-                    <input
-                      type="text"
-                      value={newReferralCode}
-                      onChange={e => setNewReferralCode(e.target.value)}
-                      className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm"
-                      placeholder="Enter new code"
-                      ref={referallCodeRef}
-                    />
-                    <Button size="sm" onClick={handleUpdateReferralCode} disabled={isUpdatingCode || !newReferralCode}>
-                      {isUpdatingCode ? <Loader2 className="h-4 w-4 animate-spin" /> : "Save"}
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      onClick={() => {
-                        setIsEditingCode(false);
-                        setNewReferralCode("");
-                      }}
-                    >
-                      Cancel
-                    </Button>
-                  </div>
-                ) : (
-                  <>
-                    <div className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm">
-                      {currentReferralCode}
+              <div className="flex items-center justify-between">
+                {!isEditingCode && (
+                  <div>
+                    <div className="text-b3-grey font-neue-montreal-semibold">Your Referral Code</div>
+                    <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
+                      Share this code with friends to earn rewards
                     </div>
-                    <Button size="icon" variant="ghost" onClick={handleCopyCode}>
-                      <Copy className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      onClick={() => {
-                        setIsEditingCode(true);
-                        setTimeout(() => {
-                          referallCodeRef.current?.focus();
-                        }, 100);
-                      }}
-                    >
-                      <Pencil className="h-4 w-4" />
-                    </Button>
-                  </>
+                  </div>
                 )}
+                <div className="flex items-center gap-2">
+                  {isEditingCode ? (
+                    <div className="flex items-center gap-2">
+                      <input
+                        type="text"
+                        value={newReferralCode}
+                        onChange={e => setNewReferralCode(e.target.value)}
+                        className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm"
+                        placeholder="Enter new code"
+                        ref={referallCodeRef}
+                      />
+                      <Button
+                        size="sm"
+                        onClick={handleUpdateReferralCode}
+                        disabled={isUpdatingCode || !newReferralCode}
+                      >
+                        {isUpdatingCode ? <Loader2 className="h-4 w-4 animate-spin" /> : "Save"}
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => {
+                          setIsEditingCode(false);
+                          setNewReferralCode("");
+                        }}
+                      >
+                        Cancel
+                      </Button>
+                    </div>
+                  ) : (
+                    <>
+                      <div className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm">
+                        {currentReferralCode}
+                      </div>
+                      <Button size="icon" variant="ghost" onClick={handleCopyCode}>
+                        <Copy className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        onClick={() => {
+                          setIsEditingCode(true);
+                          setTimeout(() => {
+                            referallCodeRef.current?.focus();
+                          }, 100);
+                        }}
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                    </>
+                  )}
+                </div>
               </div>
             </div>
-          </div>
 
-          {/* Referred Users */}
-          <div className="bg-b3-line rounded-xl p-4">
-            <div className="text-b3-grey font-neue-montreal-semibold mb-4">Referred Users</div>
-            {isLoadingReferrals ? (
-              <div className="flex justify-center py-4">
-                <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
-              </div>
-            ) : referrals?.data?.length ? (
-              <div className="space-y-3">
-                {referrals.data.map((referral: Referrals) => (
-                  <div key={String(referral._id)} className="flex items-center justify-between rounded-lg bg-white p-3">
-                    <div className="text-sm font-medium">{referral.referreeId}</div>
-                    <div className="text-sm text-gray-500">{new Date(referral.createdAt).toLocaleDateString()}</div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="py-4 text-center text-gray-500">No referred users yet</div>
-            )}
+            {/* Referred Users */}
+            <div className="bg-b3-line rounded-xl p-4">
+              <div className="text-b3-grey font-neue-montreal-semibold mb-4">Referred Users</div>
+              {isLoadingReferrals ? (
+                <div className="flex justify-center py-4">
+                  <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
+                </div>
+              ) : referrals?.data?.length ? (
+                <div className="space-y-3">
+                  {referrals.data.map((referral: Referrals) => (
+                    <div
+                      key={String(referral._id)}
+                      className="flex items-center justify-between rounded-lg bg-white p-3"
+                    >
+                      <div className="text-sm font-medium">{referral.referreeId}</div>
+                      <div className="text-sm text-gray-500">{new Date(referral.createdAt).toLocaleDateString()}</div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="py-4 text-center text-gray-500">No referred users yet</div>
+              )}
+            </div>
           </div>
-        </div>
+        )}
 
         {/* Additional Settings Sections */}
         <div className="space-y-4">

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

@@ -21,7 +21,7 @@ export type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackB
 export function SignInWithB3(props: SignInWithB3Props) {
   const { setB3ModalOpen, setB3ModalContentType, setEcoSystemAccountAddress } = useModalStore();
   const { account } = useB3();
-  const { isAuthenticating, isConnected } = useAuthentication(props.partnerId, props.loginWithSiwe);
+  const { isAuthenticatingV2, isAuthenticated } = useAuthentication(props.partnerId, props.loginWithSiwe);
   const isMobile = useIsMobile();
 
   useEffect(() => {
@@ -39,11 +39,11 @@ export function SignInWithB3(props: SignInWithB3Props) {
     setB3ModalOpen(true);
   };
 
-  if (isConnected) {
+  if (isAuthenticated) {
     return <ManageAccountButton {...props} />;
   }
 
-  if (isAuthenticating) {
+  if (isAuthenticatingV2) {
     return (
       <StyleRoot>
         <Button disabled style={{ backgroundColor: "#3368ef" }} className="flex items-center gap-2 text-white">

package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx

@@ -41,6 +41,7 @@ export function SignInWithB3Flow({
   const { setB3ModalContentType, setB3ModalOpen, isOpen } = useModalStore();
   const account = useActiveAccount();
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
+  const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
   const isAuthenticating = useAuthStore(state => state.isAuthenticating);
   const isConnected = useAuthStore(state => state.isConnected);
   const setIsConnected = useAuthStore(state => state.setIsConnected);
@@ -198,6 +199,7 @@ export function SignInWithB3Flow({
       if (loginWithSiwe) {
         debug("setIsAuthenticating:true:1");
         setIsAuthenticating(true);
+        setIsAuthenticatingV2(true);
         const userAuth = await authenticate(account, partnerId);
         setUser(userAuth.user);
       }
@@ -205,8 +207,18 @@ export function SignInWithB3Flow({
       onLoginSuccess?.(account);
       debug("setIsAuthenticating:false:1");
       setIsAuthenticating(false);
+      setIsAuthenticatingV2(false);
     },
-    [loginWithSiwe, onLoginSuccess, setIsAuthenticating, authenticate, partnerId, setUser, setIsConnected],
+    [
+      loginWithSiwe,
+      onLoginSuccess,
+      setIsAuthenticating,
+      authenticate,
+      partnerId,
+      setUser,
+      setIsConnected,
+      setIsAuthenticatingV2,
+    ],
   );
 
   useEffect(() => {

package/src/global-account/react/components/SignInWithB3/SignInWithB3Privy.tsx

@@ -21,6 +21,7 @@ interface SignInWithB3PrivyProps {
 export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }: SignInWithB3PrivyProps) {
   const { isLoading, connectTw, fullToken } = useHandleConnectWithPrivy(partnerId, chain, onSuccess);
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
+  const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
   const { logout } = useAuthentication(partnerId);
 
@@ -48,10 +49,11 @@ export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }: Sign
       } finally {
         debug("setIsAuthenticating:false:7");
         setIsAuthenticating(false);
+        setIsAuthenticatingV2(false);
       }
     }
     autoConnect();
-  }, [connectTw, onSuccess, onError, setIsAuthenticating, setIsAuthenticated, logout]);
+  }, [connectTw, onSuccess, onError, setIsAuthenticating, setIsAuthenticated, logout, setIsAuthenticatingV2]);
 
   // Currently we auto login, so we can show loading immediately and the onSuccess will proceed to the next modal
   return (

package/src/global-account/react/components/SignInWithB3/steps/LoginStep.tsx

@@ -42,9 +42,9 @@ export function LoginStepContainer({ children, partnerId }: LoginStepContainerPr
   const partnerLogo = partner?.data?.[0]?.loginCustomization?.logoUrl;
 
   return (
-    <div className="flex flex-col items-center justify-center">
+    <div className="flex flex-col items-center justify-center pt-6">
       {partnerLogo && (
-        <img src={partnerLogo} alt="Partner Logo" className="partner-logo mb-6 mt-6 h-12 w-auto object-contain" />
+        <img src={partnerLogo} alt="Partner Logo" className="partner-logo mb-6 h-12 w-auto object-contain" />
       )}
       {children}
       <h2 className="mt-6 flex items-center gap-2 text-lg font-bold">
@@ -63,6 +63,7 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepPro
 
   const { theme } = useB3();
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
+  const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
   const { logout } = useAuthentication(partnerId);
 
@@ -117,6 +118,7 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepPro
         onConnect={async wallet => {
           try {
             setIsAuthenticating(true);
+            setIsAuthenticatingV2(true);
             debug("setIsAuthenticating:true:6");
 
             const account = wallet.getAccount();
@@ -133,6 +135,7 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepPro
           } finally {
             debug("setIsAuthenticating:false:6");
             setIsAuthenticating(false);
+            setIsAuthenticatingV2(false);
           }
         }}
       />

package/src/global-account/react/components/SignInWithB3/steps/LoginStepCustom.tsx

@@ -40,6 +40,7 @@ export function LoginStepCustom({
   const [showAllWallets, setShowAllWallets] = useState(false);
   const { connect } = useConnect(partnerId, chain);
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
+  const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
   const { logout } = useAuthentication(partnerId);
   const { connect: connectTW } = useConnectTW();
@@ -55,6 +56,7 @@ export function LoginStepCustom({
       setIsLoading(true);
       debug("setIsAuthenticating:true:3");
       setIsAuthenticating(true);
+      setIsAuthenticatingV2(true);
       const options = getConnectOptionsFromStrategy(strategy);
       let connectResult: Wallet | null;
 
@@ -88,6 +90,7 @@ export function LoginStepCustom({
       setIsLoading(false);
       debug("setIsAuthenticating:false:3");
       setIsAuthenticating(false);
+      setIsAuthenticatingV2(false);
     }
   };
 

package/src/global-account/react/hooks/useAuthentication.ts

@@ -4,7 +4,7 @@ import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { b3MainnetThirdWeb } from "@b3dotfun/sdk/shared/constants/chains/supported";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useActiveWallet, useAutoConnect, useConnectedWallets, useDisconnect } from "thirdweb/react";
 import { ecosystemWallet } from "thirdweb/wallets";
 import { preAuthenticate } from "thirdweb/wallets/in-app";
@@ -27,6 +27,11 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
   const setIsConnected = useAuthStore(state => state.setIsConnected);
   const isConnecting = useAuthStore(state => state.isConnecting);
   const isConnected = useAuthStore(state => state.isConnected);
+  const useAutoConnectLoadingPrevious = useRef(false);
+  const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
+  const isAuthenticatingV2 = useAuthStore(state => state.isAuthenticatingV2);
+  const hasStartedConnecting = useAuthStore(state => state.hasStartedConnecting);
+  const setHasStartedConnecting = useAuthStore(state => state.setHasStartedConnecting);
   const { connect } = useConnect(partnerId, b3MainnetThirdWeb);
 
   const wallet = ecosystemWallet(ecosystemWalletId, {
@@ -37,11 +42,15 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
     client,
     wallets: [wallet],
     onConnect: async wallet => {
+      setHasStartedConnecting(true);
+
       try {
         setIsConnected(true);
         if (!loginWithSiwe) {
           debug("Skipping SIWE login", { loginWithSiwe });
           setIsAuthenticated(true);
+
+          setIsAuthenticatingV2(false);
           return;
         }
         debug("setIsAuthenticating:true:4");
@@ -56,6 +65,7 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
           const userAuth = await app.reAuthenticate();
           setUser(userAuth.user);
           setIsAuthenticated(true);
+          setIsAuthenticatingV2(false);
           debug("Re-authenticated successfully", { userAuth });
         } catch (error) {
           // If re-authentication fails, try fresh authentication
@@ -63,6 +73,7 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
           const userAuth = await authenticate(account, partnerId);
           setUser(userAuth.user);
           setIsAuthenticated(true);
+          setIsAuthenticatingV2(false);
           debug("Fresh authentication successful", { userAuth });
         }
       } catch (error) {
@@ -71,9 +82,20 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
         debug("setIsAuthenticating:false:4");
         setUser();
       }
+      setIsAuthenticatingV2(false);
     },
   });
 
+  /**
+   * useAutoConnectLoading starts as false
+   */
+  useEffect(() => {
+    if (!useAutoConnectLoading && useAutoConnectLoadingPrevious.current && !hasStartedConnecting) {
+      setIsAuthenticatingV2(false);
+    }
+    useAutoConnectLoadingPrevious.current = useAutoConnectLoading;
+  }, [useAutoConnectLoading]);
+
   // Ensure isAuthenticating stays true until we're fully ready
   useEffect(() => {
     if (useAutoConnectLoading) {
@@ -137,5 +159,6 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
     wallet,
     preAuthenticate,
     connect,
+    isAuthenticatingV2,
   };
 }

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

@@ -27,6 +27,10 @@ interface AuthState {
     onError?: (error: Error) => void;
   }) => void;
   reset: () => void;
+  isAuthenticatingV2: boolean;
+  setIsAuthenticatingV2: (isAuthenticating: boolean) => void;
+  hasStartedConnecting: boolean;
+  setHasStartedConnecting: (hasStartedConnecting: boolean) => void;
 }
 
 export const useAuthStore = create<AuthState>(set => ({
@@ -69,4 +73,8 @@ export const useAuthStore = create<AuthState>(set => ({
       onSuccess: undefined,
       onError: undefined,
     }),
+  isAuthenticatingV2: true,
+  setIsAuthenticatingV2: isAuthenticating => set({ isAuthenticatingV2: isAuthenticating }),
+  hasStartedConnecting: false,
+  setHasStartedConnecting: hasStartedConnecting => set({ hasStartedConnecting }),
 }));

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

@@ -87,6 +87,8 @@ export interface ManageAccountModalProps extends BaseModalProps {
   activeTab?: "overview" | "tokens" | "nfts" | "apps" | "settings";
   /** Function to set the active tab */
   setActiveTab?: (tab: "overview" | "tokens" | "nfts" | "apps" | "settings") => void;
+  /** Whether to show the referral information */
+  showReferralInfo?: boolean;
 }
 
 /**

package/src/styles/index.css

@@ -343,8 +343,7 @@ Dark version
   @apply bg-b3-react-background;
 }
 .b3-modal .css-1m9ejup,
-.b3-modal .css-1cv2836,
-.b3-modal .css-1d4s0we img[width="24"] {
+.b3-modal .css-1cv2836 {
   display: none !important;
 }
 
@@ -386,6 +385,10 @@ Dark version
 }
 
 .b3-login-step {
+  & > div > div > div > div > div > div > div > img {
+    display: none;
+  }
+
   /* Input fields styling */
   & input {
     color: hsl(var(--b3-react-foreground)) !important;