@b3dotfun/sdk 0.0.34 → 0.0.35-alpha.1

package/src/anyspend/react/components/common/PaySection.tsx

@@ -1,4 +1,4 @@
-import { Input, useProfile, useTokenData } from "@b3dotfun/sdk/global-account/react";
+import { useProfile, useTokenData } from "@b3dotfun/sdk/global-account/react";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
@@ -8,12 +8,10 @@ import { useEffect, useRef } from "react";
 import { useAccount } from "wagmi";
 import { components } from "../../../types/api";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
-import { FiatPaymentMethod } from "./FiatPaymentMethod";
 import { OrderTokenAmount } from "./OrderTokenAmount";
 import { TokenBalance } from "./TokenBalance";
 
-interface PaySectionProps {
-  paymentType: "crypto" | "fiat";
+interface CryptoPaySectionProps {
   // Token state
   selectedSrcChainId: number;
   setSelectedSrcChainId: (chainId: number) => void;
@@ -24,15 +22,12 @@ interface PaySectionProps {
   setIsSrcInputDirty: (dirty: boolean) => void;
   // Payment method state
   selectedCryptoPaymentMethod: CryptoPaymentMethodType;
-  selectedFiatPaymentMethod: FiatPaymentMethod;
   onSelectCryptoPaymentMethod: () => void;
-  onSelectFiatPaymentMethod: () => void;
   // Quote data
   anyspendQuote?: any;
 }
 
-export function PaySection({
-  paymentType,
+export function CryptoPaySection({
   selectedSrcChainId,
   setSelectedSrcChainId,
   selectedSrcToken,
@@ -41,11 +36,9 @@ export function PaySection({
   setSrcAmount,
   setIsSrcInputDirty,
   selectedCryptoPaymentMethod,
-  selectedFiatPaymentMethod,
   onSelectCryptoPaymentMethod,
-  onSelectFiatPaymentMethod,
   anyspendQuote,
-}: PaySectionProps) {
+}: CryptoPaySectionProps) {
   const { address: connectedAddress, isConnected } = useAccount();
   const { data: profileData } = useProfile({ address: connectedAddress });
   const connectedName = profileData?.displayName;
@@ -88,137 +81,68 @@ export function PaySection({
     >
       <div className="flex items-center justify-between">
         <div className="text-as-primary/50 flex h-7 items-center text-sm">Pay</div>
-        {paymentType === "crypto" ? (
-          <button
-            className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
-            onClick={onSelectCryptoPaymentMethod}
-          >
-            {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
-              <>
-                {isConnected ? (
-                  <div className="flex items-center gap-1">
-                    {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
-                  </div>
-                ) : (
-                  "Connect wallet"
-                )}
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
-              <>
-                Transfer crypto
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : (
-              <>
-                Select payment method
-                <ChevronRight className="h-4 w-4" />
-              </>
-            )}
-          </button>
-        ) : (
-          <button
-            className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors"
-            onClick={onSelectFiatPaymentMethod}
-          >
-            {selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
-                    <span className="text-xs font-bold text-white">C</span>
-                  </div>
-                  Coinbase Pay
+        <button
+          className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
+          onClick={onSelectCryptoPaymentMethod}
+        >
+          {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
+            <>
+              {isConnected ? (
+                <div className="flex items-center gap-1">
+                  {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
                 </div>
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (
-              <>
-                <div className="flex items-center gap-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
-                    <span className="text-xs font-bold text-white">S</span>
-                  </div>
-                  Credit/Debit Card
-                </div>
-                <ChevronRight className="h-4 w-4" />
-              </>
-            ) : (
-              <>
-                Select payment method
-                <ChevronRight className="h-4 w-4" />
-              </>
-            )}
-          </button>
-        )}
+              ) : (
+                "Connect wallet"
+              )}
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (
+            <>
+              Global Account
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
+            <>
+              Transfer crypto
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : (
+            <>
+              Select payment method
+              <ChevronRight className="h-4 w-4" />
+            </>
+          )}
+        </button>
+      </div>
+      <OrderTokenAmount
+        address={connectedAddress}
+        context="from"
+        inputValue={srcAmount}
+        onChangeInput={value => {
+          setIsSrcInputDirty(true);
+          setSrcAmount(value);
+        }}
+        chainId={selectedSrcChainId}
+        setChainId={setSelectedSrcChainId}
+        token={selectedSrcToken}
+        setToken={setSelectedSrcToken}
+      />
+      <div className="flex items-center justify-between">
+        <div className="text-as-primary/50 flex h-5 items-center text-sm">
+          {formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
+            style: "currency",
+            fallback: "",
+          })}
+        </div>
+        <TokenBalance
+          token={selectedSrcToken}
+          walletAddress={connectedAddress}
+          onChangeInput={value => {
+            setIsSrcInputDirty(true);
+            setSrcAmount(value);
+          }}
+        />
       </div>
-      {paymentType === "crypto" ? (
-        <>
-          <OrderTokenAmount
-            address={connectedAddress}
-            context="from"
-            inputValue={srcAmount}
-            onChangeInput={value => {
-              setIsSrcInputDirty(true);
-              setSrcAmount(value);
-            }}
-            chainId={selectedSrcChainId}
-            setChainId={setSelectedSrcChainId}
-            token={selectedSrcToken}
-            setToken={setSelectedSrcToken}
-          />
-          <div className="flex items-center justify-between">
-            <div className="text-as-primary/50 flex h-5 items-center text-sm">
-              {formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
-                style: "currency",
-                fallback: "",
-              })}
-            </div>
-            <TokenBalance
-              token={selectedSrcToken}
-              walletAddress={connectedAddress}
-              onChangeInput={value => {
-                setIsSrcInputDirty(true);
-                setSrcAmount(value);
-              }}
-            />
-          </div>
-        </>
-      ) : (
-        <>
-          {/* Fiat amount input - styled like PanelOnramp */}
-          <div className="flex items-center justify-center pb-2 pt-8">
-            <div className="flex gap-1">
-              <span className="text-as-tertiarry text-2xl font-bold">$</span>
-              <Input
-                type="text"
-                value={srcAmount}
-                onChange={e => setSrcAmount(e.target.value.replace(/[^0-9.]/g, ""))}
-                placeholder="5"
-                className="text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0"
-                style={{
-                  width: `${Math.max(50, srcAmount.length * 34)}px`,
-                }}
-              />
-            </div>
-          </div>
-
-          {/* Quick Amount Buttons */}
-          <div className="mx-auto mb-6 inline-grid grid-cols-4 gap-2">
-            {["5", "10", "20", "25"].map(value => (
-              <button
-                key={value}
-                onClick={() => setSrcAmount(value)}
-                className={`bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${
-                  srcAmount === value
-                    ? "border-as-border-secondary bg-as-surface-secondary"
-                    : "bg-as-surface-secondary hover:bg-as-surface-secondary"
-                }`}
-              >
-                ${value}
-              </button>
-            ))}
-          </div>
-        </>
-      )}
     </motion.div>
   );
 }

package/src/anyspend/react/components/index.ts

@@ -5,13 +5,14 @@ export { AnySpendBuySpin } from "./AnySpendBuySpin";
 export { AnySpendCustom } from "./AnySpendCustom";
 export * from "./AnySpendFingerprintWrapper";
 export { AnySpendNFT } from "./AnySpendNFT";
-export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3";
 export { AnySpendTournament } from "./AnySpendTournament";
+export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendNFTButton } from "./common/AnySpendNFTButton";
 
 // Common Components
 export { ChainTokenIcon } from "./common/ChainTokenIcon";
+export { CryptoPaySection } from "./common/CryptoPaySection";
 export { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 export { OrderDetails } from "./common/OrderDetails";
 export { OrderDetailsCollapsible } from "./common/OrderDetailsCollapsible";
@@ -20,7 +21,6 @@ export { OrderHistoryItem } from "./common/OrderHistoryItem";
 export { OrderStatus } from "./common/OrderStatus";
 export { OrderToken } from "./common/OrderToken";
 export { OrderTokenAmount } from "./common/OrderTokenAmount";
-export { PaySection } from "./common/PaySection";
 export { RecipientSelection } from "./common/RecipientSelection";
 export { StepProgress } from "./common/StepProgress";
 export { TokenBalance } from "./common/TokenBalance";

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

@@ -127,12 +127,7 @@ export function B3DynamicModal() {
       >
         <ModalTitle className="sr-only hidden">{contentType?.type || "Modal"}</ModalTitle>
         <ModalDescription className="sr-only hidden">{contentType?.type || "Modal Body"}</ModalDescription>
-        <div
-          className={cn(
-            "no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]",
-            contentType?.type === "manageAccount" && "h-[90dvh]",
-          )}
-        >
+        <div className={cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]")}>
           {history.length > 0 && contentType?.showBackButton && (
             <button
               onClick={navigateBack}

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);
     }
   };