@b3dotfun/sdk 0.0.7 → 0.0.8

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

@@ -4,7 +4,8 @@ import {
   AnySpendNFT,
   AnySpendStakeB3,
   AnySpendTournament,
-  OrderHistory
+  AnyspendSignatureMint,
+  OrderHistory,
 } from "@b3dotfun/sdk/anyspend/react";
 import { useIsMobile, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
@@ -34,16 +35,22 @@ export function B3DynamicModal() {
       "anySpendStakeB3",
       "anySpendBuySpin",
       "anySpendOrderHistory",
-      "signInWithB3"
+      "signInWithB3",
+      "anySpendSignatureMint",
     ].find(type => contentType?.type === type)
   ) {
     contentClass += " max-h-[90dvh] overflow-y-auto no-scrollbar w-full";
   }
 
   if (
-    ["anySpendNft", "anySpendJoinTournament", "anySpendFundTournament", "anySpendStakeB3", "anySpendBuySpin"].find(
-      type => contentType?.type === type
-    )
+    [
+      "anySpendNft",
+      "anySpendJoinTournament",
+      "anySpendFundTournament",
+      "anySpendStakeB3",
+      "anySpendBuySpin",
+      "anySpendSignatureMint",
+    ].find(type => contentType?.type === type)
   ) {
     // Due to the dynamic of (Pay with crypto),(Pay with fiat), we want the height fixed to 90dvh but still scrollable.
     // NOTE: Just leave it here in case we want the fixed height
@@ -85,6 +92,8 @@ export function B3DynamicModal() {
         return <AnySpendStakeB3 {...contentType} mode="modal" />;
       case "anySpendBuySpin":
         return <AnySpendBuySpin {...contentType} mode="modal" />;
+      case "anySpendSignatureMint":
+        return <AnyspendSignatureMint {...contentType} mode="modal" />;
       // Add other modal types here
       default:
         return null;
@@ -101,7 +110,7 @@ export function B3DynamicModal() {
       <ModalContent className={contentClass} hideCloseButton={hideCloseButton}>
         <ModalTitle className="sr-only hidden">{contentType?.type || "Modal"}</ModalTitle>
         <ModalDescription className="sr-only hidden">{contentType?.type || "Modal Body"}</ModalDescription>
-        <div className="overflow-hidden">
+        <div className="overflow-auto">
           {history.length > 0 && contentType?.showBackButton && (
             <button
               onClick={navigateBack}

package/src/global-account/react/components/B3Provider/B3Provider.native.tsx

@@ -15,7 +15,7 @@ const DEFAULT_PERMISSIONS = {
   approvedTargets: ["0xa8e42121e318e3D3BeD7f5969AF6D360045317DD"], // Example contract
   nativeTokenLimitPerTransaction: 0.1, // in ETH
   startDate: new Date(),
-  endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365) // 1 year from now
+  endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
 };
 
 // Create queryClient instance
@@ -29,7 +29,7 @@ export function B3Provider({
   theme = "light",
   children,
   accountOverride,
-  environment
+  environment,
 }: {
   isMainnetAnySpend?: boolean;
   theme: "light" | "dark";
@@ -58,7 +58,7 @@ export function InnerProvider({
   accountOverride,
   environment,
   defaultPermissions = DEFAULT_PERMISSIONS,
-  theme = "light"
+  theme = "light",
 }: {
   children: React.ReactNode;
   accountOverride?: Account;
@@ -91,7 +91,7 @@ export function InnerProvider({
         ready: !!effectiveAccount,
         environment,
         defaultPermissions,
-        theme
+        theme,
       }}
     >
       {children}

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

@@ -1,3 +1,4 @@
+import { TooltipProvider } from "@b3dotfun/sdk/global-account/react";
 import { User } from "@b3dotfun/sdk/global-account/types/b3-api.types";
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
 import { supportedChains } from "@b3dotfun/sdk/shared/constants/chains/supported";
@@ -9,9 +10,9 @@ import { Account, Wallet } from "thirdweb/wallets";
 import { createConfig, http, WagmiProvider } from "wagmi";
 import { RelayKitProviderWrapper } from "../RelayKitProviderWrapper";
 import { StyleRoot } from "../StyleRoot";
+import { B3Context, B3ContextType } from "./types";
 
 import "@reservoir0x/relay-kit-ui/styles.css";
-import { B3Context, B3ContextType } from "./types";
 
 /**
  * Default permissions configuration for B3 provider
@@ -20,12 +21,12 @@ const DEFAULT_PERMISSIONS = {
   approvedTargets: ["0xa8e42121e318e3D3BeD7f5969AF6D360045317DD"], // Example contract
   nativeTokenLimitPerTransaction: 0.1, // in ETH
   startDate: new Date(),
-  endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365) // 1 year from now
+  endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
 };
 
 export const wagmiConfig = createConfig({
   chains: [supportedChains[0], ...supportedChains.slice(1)],
-  transports: Object.fromEntries(supportedChains.map(chain => [chain.id, http()])) as any
+  transports: Object.fromEntries(supportedChains.map(chain => [chain.id, http()])) as any,
 });
 
 // Create queryClient instance
@@ -40,7 +41,7 @@ export function B3Provider({
   children,
   accountOverride,
   environment,
-  automaticallySetFirstEoa
+  automaticallySetFirstEoa,
 }: {
   isMainnetAnySpend?: boolean;
   theme: "light" | "dark";
@@ -53,20 +54,21 @@ export function B3Provider({
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
         <ThirdwebProvider>
-          <InnerProvider
-            accountOverride={accountOverride}
-            environment={environment}
-            theme={theme}
-            automaticallySetFirstEoa={!!automaticallySetFirstEoa}
-          >
-            <RelayKitProviderWrapper isMainnet={isMainnetAnySpend}>
-              {children}
-              {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
-              <StyleRoot id="b3-root" />
-              {/* For the modal https://github.com/b3-fun/b3-mono/blob/main/packages/react/src/components/ui/dialog.tsx#L46 */}
-              <Toaster theme={theme} />
-            </RelayKitProviderWrapper>
-          </InnerProvider>
+          <TooltipProvider>
+            <InnerProvider
+              accountOverride={accountOverride}
+              environment={environment}
+              theme={theme}
+              automaticallySetFirstEoa={!!automaticallySetFirstEoa}
+            >
+              <RelayKitProviderWrapper isMainnet={isMainnetAnySpend}>
+                {children}
+                {/* For the modal https://github.com/b3-fun/b3/blob/main/packages/sdk/src/global-account/react/components/ui/dialog.tsx#L46 */}
+                <StyleRoot id="b3-root" />
+                <Toaster theme={theme} />
+              </RelayKitProviderWrapper>
+            </InnerProvider>
+          </TooltipProvider>
         </ThirdwebProvider>
       </QueryClientProvider>
     </WagmiProvider>
@@ -82,7 +84,7 @@ export function InnerProvider({
   environment,
   defaultPermissions = DEFAULT_PERMISSIONS,
   automaticallySetFirstEoa,
-  theme = "light"
+  theme = "light",
 }: {
   children: React.ReactNode;
   accountOverride?: Account;
@@ -143,7 +145,7 @@ export function InnerProvider({
         automaticallySetFirstEoa,
         environment,
         defaultPermissions,
-        theme
+        theme,
       }}
     >
       {children}

package/src/global-account/react/components/B3Provider/types.ts

@@ -36,5 +36,5 @@ export const B3Context = createContext<B3ContextType>({
   initialized: false,
   ready: false,
   environment: "development",
-  theme: "light"
+  theme: "light",
 });

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

@@ -12,7 +12,7 @@ import {
   TabsPrimitive,
   TabsContentPrimitive,
   TabsListPrimitive,
-  TabTriggerPrimitive
+  TabTriggerPrimitive,
 } from "@b3dotfun/sdk/global-account/react";
 import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatNumber } from "@b3dotfun/sdk/shared/utils/formatNumber";
@@ -42,7 +42,7 @@ export function ManageAccount({
   onSwap: _onSwap,
   onDeposit: _onDeposit,
   chain,
-  partnerId
+  partnerId,
 }: ManageAccountProps) {
   const [activeTab, setActiveTab] = useState("balance");
   const [revokingSignerId, setRevokingSignerId] = useState<string | null>(null);
@@ -52,7 +52,7 @@ export function ManageAccount({
   const { data: nativeBalance } = useNativeBalance(account?.address);
   const { data: signers, refetch: refetchSigners } = useGetAllTWSigners({
     chain,
-    accountAddress: account?.address
+    accountAddress: account?.address,
   });
   const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
   const { logout } = useAuthentication(partnerId);
@@ -70,7 +70,7 @@ export function ManageAccount({
       console.error("Error revoking access:", error);
       setRevokingSignerId(null);
     },
-    refetchSigners: () => refetchSigners()
+    refetchSigners: () => refetchSigners(),
   });
 
   const handleRevoke = async (signer: TWSignerWithMetadata) => {
@@ -126,7 +126,7 @@ export function ManageAccount({
             setB3ModalContentType({
               type: "anySpend",
               defaultActiveTab: "fiat",
-              showBackButton: true
+              showBackButton: true,
             });
           }}
         >
@@ -139,7 +139,7 @@ export function ManageAccount({
             setB3ModalOpen(true);
             setB3ModalContentType({
               type: "anySpend",
-              showBackButton: true
+              showBackButton: true,
             });
           }}
         >

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

@@ -28,7 +28,7 @@ export function MintButton({
   className,
   children = "Mint",
   onSuccess,
-  onError
+  onError,
 }: MintButtonProps) {
   const ecoSystemWallet = useActiveAccount();
   console.log("@@ecoSystemWallet", ecoSystemWallet);
@@ -38,7 +38,7 @@ export function MintButton({
     quantity,
     chain,
     to,
-    tokenId
+    tokenId,
   });
 
   const smartAccountWithSignerOverride = ecoSystemWallet?.address !== to;
@@ -50,13 +50,13 @@ export function MintButton({
           chain,
           sponsorGas: true,
           overrides: {
-            accountAddress: ecoSystemWallet?.address
-          }
+            accountAddress: ecoSystemWallet?.address,
+          },
         });
 
         const smartAccountWithSigner = await wallet.connect({
           client,
-          personalAccount: account
+          personalAccount: account,
         });
 
         const tx = await claim(smartAccountWithSigner);

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

@@ -20,12 +20,12 @@ export function RelayKitProviderWrapper({ isMainnet, children }: { isMainnet: bo
         source: "anyspend",
         duneConfig: {
           apiKey: "OkvN2bWlBPwXkvtmnTeYMQR1hYZBGDJt",
-          apiBaseUrl: "https://api.dune.com"
+          apiBaseUrl: "https://api.dune.com",
         },
         chains: relayChains,
         privateChainIds: undefined,
         appName: "AnySpend",
-        useGasFeeEstimations: true
+        useGasFeeEstimations: true,
       }}
     >
       <>{children}</>

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

@@ -3,7 +3,7 @@ import {
   useB3,
   useAddTWSessionKey,
   useGetAllTWSigners,
-  RequestPermissionsModalProps
+  RequestPermissionsModalProps,
 } from "@b3dotfun/sdk/global-account/react";
 import { PermissionItem } from "@b3dotfun/sdk/global-account/react";
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
@@ -26,19 +26,19 @@ export function RequestPermissions({
   onError,
   chain,
   sessionKeyAddress,
-  permissions
+  permissions,
 }: RequestPermissionsModalProps) {
   const [isApproving, setIsApproving] = useState(false);
   const account = useActiveAccount();
   const { defaultPermissions } = useB3();
   const DEFAULT_PERMISSIONS = useMemo(
     () => permissions ?? (defaultPermissions as PermissionsConfig),
-    [defaultPermissions, permissions]
+    [defaultPermissions, permissions],
   );
 
   const { refetch: refetchSigners } = useGetAllTWSigners({
     chain,
-    accountAddress: account?.address
+    accountAddress: account?.address,
   });
   const { newSessionKey } = useAddTWSessionKey({
     onSuccess: transactionResult => {
@@ -52,7 +52,7 @@ export function RequestPermissions({
     refetchSigners: () => {
       return refetchSigners();
     },
-    chain
+    chain,
   });
 
   const handleApprove = useCallback(async () => {
@@ -68,7 +68,7 @@ export function RequestPermissions({
         approvedTargets: DEFAULT_PERMISSIONS.approvedTargets as Address[],
         nativeTokenLimitPerTransaction: DEFAULT_PERMISSIONS.nativeTokenLimitPerTransaction,
         permissionStartTimestamp: DEFAULT_PERMISSIONS.startDate,
-        permissionEndTimestamp: DEFAULT_PERMISSIONS.endDate
+        permissionEndTimestamp: DEFAULT_PERMISSIONS.endDate,
       });
     } catch (error) {
       console.error("@@error:", error);
@@ -81,7 +81,7 @@ export function RequestPermissions({
   const formatDate = (date: Date) => {
     return new Intl.DateTimeFormat("en-US", {
       dateStyle: "medium",
-      timeStyle: "short"
+      timeStyle: "short",
     }).format(date);
   };
   return (

package/src/global-account/react/components/RequestPermissions/RequestPermissionsButton.tsx

@@ -16,7 +16,7 @@ export function RequestPermissionsButton({
   onSuccess,
   onError,
   permissions,
-  closeOnSuccess = true
+  closeOnSuccess = true,
 }: RequestPermissionsButtonProps) {
   const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
 
@@ -32,7 +32,7 @@ export function RequestPermissionsButton({
         }
       },
       onError,
-      permissions
+      permissions,
     });
     setB3ModalOpen(true);
   };

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

@@ -0,0 +1,190 @@
+import {
+  SignInWithB3,
+  SignInWithB3ModalProps,
+  StyleRoot,
+  useAccountWallet,
+  useAuthentication,
+  useB3,
+  useIsMobile,
+} from "@b3dotfun/sdk/global-account/react";
+import Icon from "@b3dotfun/sdk/global-account/react/components/custom/Icon";
+import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
+import { cn, truncateAddress } from "@b3dotfun/sdk/shared/utils";
+import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
+import { ReactNode, useEffect } from "react";
+import { useConnectedWallets, useSetActiveWallet, useWalletInfo } from "thirdweb/react";
+import { ManageAccountButton } from "../custom/ManageAccountButton";
+
+type SignInProps = {
+  className?: string;
+  isMobile?: boolean;
+};
+
+type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackButton"> & {
+  buttonText?: string | ReactNode;
+  loggedInButtonText?: string | ReactNode;
+  loadingButtonText?: string | ReactNode;
+  withLogo?: boolean;
+} & SignInProps;
+
+export function SignIn(props: SignInWithB3Props) {
+  const { className } = props;
+  const { automaticallySetFirstEoa } = useB3();
+  const {
+    wallet,
+    address: globalAddress,
+    ensName,
+    connectedSmartWallet,
+    connectedEOAWallet,
+    isActiveSmartWallet,
+    isActiveEOAWallet,
+    smartWalletIcon,
+    eoaWalletIcon,
+  } = useAccountWallet();
+
+  const isMobile = useIsMobile();
+  const { logout } = useAuthentication(String(process.env.NEXT_PUBLIC_GLOBAL_ACCOUNTS_PARTNER_ID));
+  const onDisconnect = async () => {
+    await logout();
+  };
+
+  const connectedWallets = useConnectedWallets();
+
+  const { data: walletInfo } = useWalletInfo(isActiveSmartWallet ? connectedSmartWallet?.id : connectedEOAWallet?.id);
+
+  const setActiveWallet = useSetActiveWallet();
+
+  const handleSetActiveAccount = (selectedWalletId: string | undefined) => {
+    if (
+      !selectedWalletId ||
+      !connectedWallets ||
+      !connectedEOAWallet ||
+      !connectedSmartWallet ||
+      !automaticallySetFirstEoa
+    )
+      return;
+    setActiveWallet(selectedWalletId === ecosystemWalletId ? connectedSmartWallet : connectedEOAWallet);
+  };
+
+  // Automatically set EOA wallet as active when available
+  useEffect(() => {
+    if (connectedEOAWallet && automaticallySetFirstEoa) {
+      setActiveWallet(connectedEOAWallet);
+    }
+  }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
+
+  // Desktop version - original dropdown menu
+  return (
+    <StyleRoot>
+      <Menu className={`relative flex items-center ${className || ""}`} as="div">
+        {globalAddress ? (
+          <>
+            <MenuButton className="bg-theme-on-surface-2 group flex h-10 items-center gap-1 rounded-xl px-3">
+              {!!wallet.meta?.icon && (
+                <img
+                  src={wallet.meta.icon}
+                  alt={wallet.meta.icon}
+                  className="bg-theme-primary h-6 w-6 rounded-full object-cover opacity-100"
+                />
+              )}
+              <div className="text-body-1m text-theme-secondary">
+                {ensName ? ensName : truncateAddress(globalAddress)}
+              </div>
+            </MenuButton>
+            <Transition
+              enter="duration-200 ease-out"
+              enterFrom="scale-95 opacity-0"
+              enterTo="scale-100 opacity-100"
+              leave="duration-300 ease-out"
+              leaveFrom="scale-100 opacity-100"
+              leaveTo="scale-95 opacity-0"
+            >
+              <MenuItems
+                className="b3-root shadow-depth-1 absolute -right-4 top-full min-w-64 rounded-2xl border lg:right-0"
+                modal={false}
+                // TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
+                anchor={isMobile ? "top end" : undefined}
+              >
+                <div className="bg-b3-react-background">
+                  {connectedEOAWallet ? (
+                    <div
+                      className={cn(
+                        "border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3",
+                        "hover:bg-theme-on-surface-2",
+                      )}
+                      onClick={() => handleSetActiveAccount(connectedEOAWallet?.id)}
+                    >
+                      <div className="flex items-center">
+                        <img
+                          className="bg-theme-primary h-16 w-16 rounded-full opacity-100"
+                          src={eoaWalletIcon}
+                          alt={connectedEOAWallet?.id}
+                        />
+                        <div className="ml-4 grow">
+                          {ensName && <div className="text-title-1s">{ensName}</div>}
+                          <div className="text-title-1s">{truncateAddress(globalAddress)}</div>
+                          <div className="text-body-1m text-theme-secondary">{walletInfo?.name}</div>
+                        </div>
+                      </div>
+                      {isActiveEOAWallet && <Icon className="fill-theme-primary" name="check" />}
+                    </div>
+                  ) : (
+                    connectedSmartWallet && (
+                      <div
+                        className={cn(
+                          "mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3",
+                          isActiveSmartWallet ? "bg-theme-n-8" : "bg-b3-react-background hover:bg-theme-on-surface-2",
+                        )}
+                        onClick={() => handleSetActiveAccount(connectedSmartWallet?.id)}
+                      >
+                        <div className="flex items-center">
+                          <img
+                            className="bg-theme-primary h-16 w-16 rounded-full opacity-100"
+                            src={smartWalletIcon}
+                            alt={connectedSmartWallet?.id}
+                          />
+                          <div className="pl-4.5 grow">
+                            {ensName && <div className="text-title-1s">{ensName}</div>}
+                            <div className="text-title-1s">{truncateAddress(globalAddress)}</div>
+                            <div className="text-body-1m text-theme-secondary">Smart wallet</div>
+                          </div>
+                        </div>
+                        {isActiveSmartWallet && <Icon className="fill-theme-primary" name="check" />}
+                      </div>
+                    )
+                  )}
+
+                  <div className="ml-3">
+                    <ManageAccountButton {...props} className="w-[calc(100%-12px)]" />
+                  </div>
+
+                  <button className="mb-2 w-full space-y-1" onClick={onDisconnect}>
+                    <div className="hover:bg-theme-on-surface-2 group flex h-12 items-center rounded-xl px-4 transition-colors">
+                      <Icon
+                        className="fill-theme-secondary group-hover:fill-theme-primary mr-4 shrink-0 transition-colors"
+                        name="logout"
+                      />
+                      <div className="text-base-1s text-theme-secondary group-hover:text-theme-primary mr-auto transition-colors">
+                        Disconnect
+                      </div>
+                    </div>
+                  </button>
+                </div>
+              </MenuItems>
+            </Transition>
+          </>
+        ) : (
+          <SignInWithB3
+            closeAfterLogin={true}
+            onLoginSuccess={async globalAccount => {
+              console.log("User authenticated with Global Account!", globalAccount);
+            }}
+            {...props}
+          />
+        )}
+      </Menu>
+    </StyleRoot>
+  );
+}
+
+export default SignIn;

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

@@ -1,9 +1,17 @@
-import { useAuthentication } from "@b3dotfun/sdk/global-account/react";
-import { Button, StyleRoot, SignInWithB3ModalProps, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import {
+  Button,
+  SignInWithB3ModalProps,
+  StyleRoot,
+  useAuthentication,
+  useIsMobile,
+  useModalStore,
+} from "@b3dotfun/sdk/global-account/react";
 import { ReactNode, useEffect } from "react";
 import { useActiveAccount } from "thirdweb/react";
+import { ManageAccountButton } from "../custom/ManageAccountButton";
+import { Loading } from "../ui/Loading";
 
-type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackButton"> & {
+export type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackButton"> & {
   buttonText?: string | ReactNode;
   loggedInButtonText?: string | ReactNode;
   loadingButtonText?: string | ReactNode;
@@ -14,6 +22,7 @@ export function SignInWithB3(props: SignInWithB3Props) {
   const { setB3ModalOpen, setB3ModalContentType, setEcoSystemAccountAddress } = useModalStore();
   const account = useActiveAccount();
   const { isAuthenticating, isAuthenticated } = useAuthentication(props.partnerId, props.loginWithSiwe);
+  const isMobile = useIsMobile();
 
   useEffect(() => {
     if (account) {
@@ -25,34 +34,13 @@ export function SignInWithB3(props: SignInWithB3Props) {
     setB3ModalContentType({
       ...props,
       type: "signInWithB3",
-      showBackButton: false
-    });
-    setB3ModalOpen(true);
-  };
-
-  const handleClickManageAccount = () => {
-    setB3ModalContentType({
-      ...props,
-      type: "manageAccount"
+      showBackButton: false,
     });
     setB3ModalOpen(true);
   };
 
   if (isAuthenticated) {
-    return (
-      <StyleRoot>
-        <Button
-          onClick={handleClickManageAccount}
-          style={{ backgroundColor: "#3368ef" }}
-          className="flex items-center gap-2 text-white"
-        >
-          {props.withLogo !== false && (
-            <img src="https://cdn.b3.fun/b3_logo_white.svg" alt="B3 Logo" className="h-5 w-5" />
-          )}
-          {props.loggedInButtonText || "Manage Account"}
-        </Button>
-      </StyleRoot>
-    );
+    return <ManageAccountButton {...props} />;
   }
 
   if (isAuthenticating) {
@@ -62,7 +50,7 @@ export function SignInWithB3(props: SignInWithB3Props) {
           {props.withLogo !== false && (
             <img src="https://cdn.b3.fun/b3_logo_white.svg" alt="B3 Logo" className="h-5 w-5" />
           )}
-          {props.loadingButtonText || "Signing in..."}
+          {props.loadingButtonText || (isMobile ? <Loading size="sm" /> : "Signing in…")}
         </Button>
       </StyleRoot>
     );
@@ -73,7 +61,7 @@ export function SignInWithB3(props: SignInWithB3Props) {
       <Button
         onClick={handleClick}
         style={{ backgroundColor: "#3368ef" }}
-        className="flex items-center gap-2 font-medium text-white"
+        className="b3-sign-in-button flex items-center gap-2 font-medium text-white"
       >
         {props.buttonText ? (
           props.buttonText