@b3dotfun/sdk 0.0.1-alpha.1

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

@@ -0,0 +1,34 @@
+import { RelayKitProvider } from "@reservoir0x/relay-kit-ui";
+import { fetchChainConfigs, MAINNET_RELAY_API, RelayChain, TESTNET_RELAY_API } from "@reservoir0x/relay-sdk";
+import { useEffect, useState } from "react";
+
+export function RelayKitProviderWrapper({ isMainnet, children }: { isMainnet: boolean; children: React.ReactNode }) {
+  const [relayChains, setRelayChains] = useState<RelayChain[]>([]);
+
+  useEffect(() => {
+    const fetchChains = async () => {
+      const chains = await fetchChainConfigs(isMainnet ? MAINNET_RELAY_API : TESTNET_RELAY_API);
+      setRelayChains(chains);
+    };
+    fetchChains();
+  }, [isMainnet]);
+
+  return (
+    <RelayKitProvider
+      options={{
+        baseApiUrl: isMainnet ? MAINNET_RELAY_API : TESTNET_RELAY_API,
+        source: "anyspend",
+        duneConfig: {
+          apiKey: "OkvN2bWlBPwXkvtmnTeYMQR1hYZBGDJt",
+          apiBaseUrl: "https://api.dune.com"
+        },
+        chains: relayChains,
+        privateChainIds: undefined,
+        appName: "AnySpend",
+        useGasFeeEstimations: true
+      }}
+    >
+      <>{children}</>
+    </RelayKitProvider>
+  );
+}

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

@@ -0,0 +1,167 @@
+import { useB3 } from "@b3dotfun/sdk/global-account/react/components/B3Provider";
+import { Button } from "@b3dotfun/sdk/global-account/react/components/custom/Button";
+import { PermissionItem } from "@b3dotfun/sdk/global-account/react/components/SignInWithB3/components/PermissionItem";
+import { useAddTWSessionKey } from "@b3dotfun/sdk/global-account/react/hooks/useAddTWSessionKey";
+import { useGetAllTWSigners } from "@b3dotfun/sdk/global-account/react/hooks/useGetAllTWSigners";
+import { RequestPermissionsModalProps } from "@b3dotfun/sdk/global-account/react/stores/useModalStore";
+import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
+import { CreditCard, Eye } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import TimeAgo from "react-timeago";
+import type { Address } from "thirdweb";
+import { useActiveAccount } from "thirdweb/react";
+
+const debug = debugB3React("RequestPermissions");
+
+/**
+ * Component for requesting permissions to access user accounts and contracts
+ * Allows users to approve session keys with specific permission settings
+ */
+export function RequestPermissions({
+  onSuccess,
+  onError,
+  chain,
+  sessionKeyAddress,
+  permissions
+}: RequestPermissionsModalProps) {
+  const [isApproving, setIsApproving] = useState(false);
+  const account = useActiveAccount();
+  const { defaultPermissions } = useB3();
+  const DEFAULT_PERMISSIONS = useMemo(
+    () => permissions ?? (defaultPermissions as PermissionsConfig),
+    [defaultPermissions, permissions]
+  );
+
+  const { refetch: refetchSigners } = useGetAllTWSigners({
+    chain,
+    accountAddress: account?.address
+  });
+  const { newSessionKey } = useAddTWSessionKey({
+    onSuccess: transactionResult => {
+      console.log("@@transactionResult:", transactionResult);
+      onSuccess?.();
+    },
+    onError: error => {
+      console.error("@@error:", error);
+      onError?.(error as Error);
+    },
+    refetchSigners: () => {
+      return refetchSigners();
+    },
+    chain
+  });
+
+  const handleApprove = useCallback(async () => {
+    debug("@@handleApprove");
+    try {
+      setIsApproving(true);
+      if (!sessionKeyAddress) {
+        throw new Error("Session key address is required");
+      }
+      console.log("@@sessionKeyAddress:", sessionKeyAddress);
+      await newSessionKey({
+        sessionKeyAddress: sessionKeyAddress,
+        approvedTargets: DEFAULT_PERMISSIONS.approvedTargets as Address[],
+        nativeTokenLimitPerTransaction: DEFAULT_PERMISSIONS.nativeTokenLimitPerTransaction,
+        permissionStartTimestamp: DEFAULT_PERMISSIONS.startDate,
+        permissionEndTimestamp: DEFAULT_PERMISSIONS.endDate
+      });
+    } catch (error) {
+      console.error("@@error:", error);
+      onError?.(error as Error);
+    } finally {
+      setIsApproving(false);
+    }
+  }, [DEFAULT_PERMISSIONS, newSessionKey, onError, sessionKeyAddress]);
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat("en-US", {
+      dateStyle: "medium",
+      timeStyle: "short"
+    }).format(date);
+  };
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="text-center">
+        <h2 className="mb-2 text-2xl font-bold">Allow Access</h2>
+        <p className="text-b3-react-muted-foreground opacity-70">This app would like permission to:</p>
+      </div>
+
+      {/* Key Permissions Section */}
+      <PermissionItem
+        title="Make transactions on your behalf"
+        description={
+          <span>
+            Up to{" "}
+            <span className="text-b3-react-primary font-medium">
+              {DEFAULT_PERMISSIONS.nativeTokenLimitPerTransaction} ETH
+            </span>{" "}
+            per transaction
+          </span>
+        }
+        icon={<CreditCard className="h-5 w-5" />}
+      />
+      <PermissionItem
+        title="View your account"
+        description="See your wallet address and balance"
+        icon={<Eye className="h-5 w-5" />}
+      />
+
+      {/* Contract Details Section */}
+      <div className="bg-b3-react-card rounded-lg border p-5 py-4">
+        <h3 className="mb-2 text-base font-medium">Approved Contracts</h3>
+        <div className="space-y-2">
+          {DEFAULT_PERMISSIONS.approvedTargets.map((target: string) => (
+            <div key={target} className="flex items-center gap-2">
+              <div className="bg-b3-react-background text-b3-react-muted-foreground rounded-md border px-3 py-2 font-mono text-sm">
+                {formatAddress(target)}
+              </div>
+              <span className="text-b3-react-muted-foreground text-sm">• Game Contract</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Time Period Section */}
+      <div className="bg-b3-react-card rounded-lg border p-5 py-4">
+        <h3 className="mb-2 text-base font-medium">Permission</h3>
+        <div className="space-y-1 text-sm">
+          <div className="text-b3-react-muted-foreground">
+            <span>{`Valid for `}</span>
+            <span>
+              <TimeAgo
+                date={DEFAULT_PERMISSIONS.endDate}
+                live={false}
+                formatter={(value, unit) => {
+                  if (unit === "year") {
+                    return "1 year";
+                  }
+                  return `${value} ${unit}${value !== 1 ? "s" : ""}`;
+                }}
+              />
+            </span>
+
+            <span className="text-b3-react-muted-foreground ml-1 opacity-70">{` (until ${formatDate(DEFAULT_PERMISSIONS.endDate)})`}</span>
+          </div>
+          {DEFAULT_PERMISSIONS.startDate.getTime() > Date.now() + 5 * 60 * 1000 && (
+            <div className="text-b3-react-muted-foreground">
+              <span>{`Starting: `}</span>
+              <span className="ml-1">{formatDate(DEFAULT_PERMISSIONS.startDate)}</span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="space-y-3 pt-4">
+        <Button onClick={handleApprove} disabled={isApproving} className="w-full py-6 text-lg font-medium">
+          {isApproving ? "Approving..." : "Allow Access"}
+        </Button>
+
+        <p className="text-b3-react-muted-foreground text-center text-sm">Revoke access anytime in settings</p>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+import { Button } from "@b3dotfun/sdk/global-account/react/components/custom/Button";
+import { useModalStore } from "@b3dotfun/sdk/global-account/react/stores/useModalStore";
+import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
+
+type RequestPermissionsButtonProps = {
+  chain: any;
+  sessionKeyAddress: `0x${string}`;
+  onSuccess?: () => void;
+  onError?: (error: Error) => Promise<void>;
+  permissions?: PermissionsConfig;
+  closeOnSuccess?: boolean;
+};
+
+export function RequestPermissionsButton({
+  chain,
+  sessionKeyAddress,
+  onSuccess,
+  onError,
+  permissions,
+  closeOnSuccess = true
+}: RequestPermissionsButtonProps) {
+  const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
+
+  const handleClick = () => {
+    setB3ModalContentType({
+      type: "requestPermissions",
+      chain,
+      sessionKeyAddress,
+      onSuccess: () => {
+        onSuccess?.();
+        if (closeOnSuccess) {
+          setB3ModalOpen(false);
+        }
+      },
+      onError,
+      permissions
+    });
+    setB3ModalOpen(true);
+  };
+
+  return (
+    <Button
+      onClick={handleClick}
+      style={{ backgroundColor: "#3368ef" }}
+      className="flex items-center gap-2 font-medium text-white"
+    >
+      <span>Request Permissions</span>
+      <img src="https://cdn.b3.fun/b3_logo_white.svg" alt="B3 Logo" className="h-5 w-6" />
+    </Button>
+  );
+}

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

@@ -0,0 +1,93 @@
+import useAuthentication from "@b3dotfun/sdk/global-account/react/hooks/useAuthentication";
+import { ReactNode, useEffect } from "react";
+import { useActiveAccount } from "thirdweb/react";
+import { SignInWithB3ModalProps, useModalStore } from "@b3dotfun/sdk/global-account/react/stores/useModalStore";
+import { Button } from "@b3dotfun/sdk/global-account/react/components/custom/Button";
+import StyleRoot from "@b3dotfun/sdk/global-account/react/components/StyleRoot";
+
+type SignInWithB3Props = Omit<SignInWithB3ModalProps, "type" | "showBackButton"> & {
+  buttonText?: string | ReactNode;
+  loggedInButtonText?: string | ReactNode;
+  loadingButtonText?: string | ReactNode;
+  withLogo?: boolean;
+};
+
+export function SignInWithB3(props: SignInWithB3Props) {
+  const { setB3ModalOpen, setB3ModalContentType, setEcoSystemAccountAddress } = useModalStore();
+  const account = useActiveAccount();
+  const { isAuthenticating, isAuthenticated } = useAuthentication(props.partnerId, props.loginWithSiwe);
+
+  useEffect(() => {
+    if (account) {
+      setEcoSystemAccountAddress(account.address as `0x${string}`);
+    }
+  }, [account, setEcoSystemAccountAddress]);
+
+  const handleClick = () => {
+    setB3ModalContentType({
+      ...props,
+      type: "signInWithB3",
+      showBackButton: false
+    });
+    setB3ModalOpen(true);
+  };
+
+  const handleClickManageAccount = () => {
+    setB3ModalContentType({
+      ...props,
+      type: "manageAccount"
+    });
+    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>
+    );
+  }
+
+  if (isAuthenticating) {
+    return (
+      <StyleRoot>
+        <Button disabled 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.loadingButtonText || "Signing in..."}
+        </Button>
+      </StyleRoot>
+    );
+  }
+
+  return (
+    <StyleRoot>
+      <Button
+        onClick={handleClick}
+        style={{ backgroundColor: "#3368ef" }}
+        className="flex items-center gap-2 font-medium text-white"
+      >
+        {props.buttonText ? (
+          props.buttonText
+        ) : (
+          <>
+            <span>Sign in with</span>
+            {props.withLogo !== false && (
+              <img src="https://cdn.b3.fun/b3_logo_white.svg" alt="B3 Logo" className="h-5 w-6" />
+            )}
+          </>
+        )}
+      </Button>
+    </StyleRoot>
+  );
+}

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

@@ -0,0 +1,255 @@
+import { useB3 } from "@b3dotfun/sdk/global-account/react/components/B3Provider";
+import { Loading } from "@b3dotfun/sdk/global-account/react/components/ui/Loading";
+import { useGetAllTWSigners } from "@b3dotfun/sdk/global-account/react/hooks/useGetAllTWSigners";
+import { useSiwe } from "@b3dotfun/sdk/global-account/react/hooks/useSiwe";
+import { SignInWithB3ModalProps, useModalStore } from "@b3dotfun/sdk/global-account/react/stores/useModalStore";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { useCallback, useEffect, useState } from "react";
+import { useActiveAccount } from "thirdweb/react";
+import { Account } from "thirdweb/wallets";
+import { SignInWithB3Privy } from "./SignInWithB3Privy";
+import { LoginStep, LoginStepContainer } from "./steps/LoginStep";
+import { LoginStepCustom } from "./steps/LoginStepCustom";
+
+const debug = debugB3React("SignInWithB3Flow");
+const MAX_REFETCH_ATTEMPTS = 20;
+
+/**
+ * Component that manages the authentication flow for Sign In With B3
+ * Handles different login providers, authentication steps, and session key management
+ */
+export function SignInWithB3Flow({
+  strategies,
+  onLoginSuccess,
+  onSessionKeySuccess,
+  onError,
+  chain,
+  sessionKeyAddress,
+  partnerId,
+  closeAfterLogin = false,
+  loginWithSiwe = false,
+  source = "signInWithB3Button",
+  signersEnabled = false
+}: SignInWithB3ModalProps) {
+  const { setUser, automaticallySetFirstEoa } = useB3();
+  const [step, setStep] = useState<"login" | "permissions" | null>(source === "requestPermissions" ? null : "login");
+  const [sessionKeyAdded, setSessionKeyAdded] = useState(source === "requestPermissions" ? true : false);
+  const { setB3ModalContentType, setB3ModalOpen } = useModalStore();
+  const account = useActiveAccount();
+  const [loginComplete, setLoginComplete] = useState(source === "requestPermissions" ? true : false);
+  const [refetchCount, setRefetchCount] = useState(0);
+  const [refetchError, setRefetchError] = useState<string | null>(null);
+  const {
+    data: signers,
+    refetch: refetchSigners,
+    isFetching: isFetchingSigners
+  } = useGetAllTWSigners({
+    chain,
+    accountAddress: account?.address,
+    queryOptions: {
+      enabled: signersEnabled
+    }
+  });
+  const { authenticate } = useSiwe();
+  const [authenticatingWithB3, setAuthenticatingWithB3] = useState(false);
+  const [refetchQueued, setRefetchQueued] = useState(false);
+
+  // Enhanced refetchSigners function that tracks number of attempts
+  const handleRefetchSigners = useCallback(() => {
+    if (refetchQueued) {
+      return;
+    }
+
+    if (refetchCount >= MAX_REFETCH_ATTEMPTS) {
+      setRefetchError(`Failed to fetch signers after ${MAX_REFETCH_ATTEMPTS} attempts`);
+      onError?.(new Error(`Failed to fetch signers after ${MAX_REFETCH_ATTEMPTS} attempts`));
+      return;
+    }
+
+    // Calculate backoff delay (100ms, 200ms, 400ms, 800ms, 1000ms, 1000ms...)
+    const backoffDelay = Math.min(Math.pow(2, refetchCount) * 100, 10000);
+
+    debug(`Retrying fetch (attempt ${refetchCount + 1}/${MAX_REFETCH_ATTEMPTS}) with ${backoffDelay}ms delay`);
+
+    // Increment count and schedule refetch with backoff
+    setRefetchCount(prev => prev + 1);
+    setRefetchQueued(true);
+    setTimeout(() => {
+      refetchSigners();
+      setRefetchQueued(false);
+    }, backoffDelay);
+  }, [refetchCount, refetchSigners, onError, setRefetchQueued, refetchQueued]);
+
+  // Handle post-login flow after signers are loaded
+  useEffect(() => {
+    debug("@@SignInWithB3Flow:useEffect", {
+      loginComplete,
+      isFetchingSigners,
+      source
+    });
+
+    if (loginComplete && !isFetchingSigners) {
+      // Check if we already have a signer for this partner
+      const hasExistingSigner = signers?.some(signer => signer.partner.id === partnerId);
+      if (hasExistingSigner) {
+        setSessionKeyAdded(true);
+        onSessionKeySuccess?.();
+        if (closeAfterLogin) {
+          setB3ModalOpen(false);
+        } else {
+          setB3ModalContentType({
+            type: "manageAccount",
+            chain,
+            partnerId
+          });
+        }
+      } else if (source !== "requestPermissions") {
+        if (signersEnabled) setStep("permissions");
+      } else {
+        if (signersEnabled) handleRefetchSigners();
+      }
+
+      // Default handling
+      if (closeAfterLogin) {
+        setB3ModalOpen(false);
+      }
+
+      // if not closed, always default to manage account
+      setB3ModalContentType({
+        type: "manageAccount",
+        chain,
+        partnerId
+      });
+    }
+  }, [
+    signers,
+    isFetchingSigners,
+    partnerId,
+    loginComplete,
+    handleRefetchSigners,
+    source,
+    closeAfterLogin,
+    setB3ModalContentType,
+    chain,
+    onSessionKeySuccess,
+    setB3ModalOpen,
+    signersEnabled
+  ]);
+
+  debug("render", {
+    step,
+    strategies,
+    account,
+    signers,
+    refetchCount,
+    refetchError
+  });
+
+  // Keep this effect for handling closeAfterLogin when adding new session keys
+  useEffect(() => {
+    if (closeAfterLogin && sessionKeyAdded) {
+      setB3ModalOpen(false);
+    }
+  }, [closeAfterLogin, sessionKeyAdded, setB3ModalOpen]);
+
+  const onSessionKeySuccessEnhanced = useCallback(() => {
+    onSessionKeySuccess?.();
+    setB3ModalContentType({
+      type: "signInWithB3",
+      strategies,
+      onLoginSuccess,
+      onSessionKeySuccess,
+      onError,
+      chain,
+      sessionKeyAddress,
+      partnerId,
+      closeAfterLogin,
+      loginWithSiwe,
+      source: "requestPermissions"
+    });
+  }, [
+    chain,
+    closeAfterLogin,
+    loginWithSiwe,
+    onError,
+    onLoginSuccess,
+    onSessionKeySuccess,
+    partnerId,
+    sessionKeyAddress,
+    setB3ModalContentType,
+    strategies
+  ]);
+
+  const handleLoginSuccess = useCallback(
+    async (account: Account) => {
+      debug("Authenticating with B3 via SIWE");
+      if (loginWithSiwe) {
+        setAuthenticatingWithB3(true);
+        const userAuth = await authenticate(account);
+        setUser(userAuth.user);
+      }
+      debug("handleLoginSuccess:account", account);
+      onLoginSuccess?.(account);
+      setLoginComplete(true);
+      setAuthenticatingWithB3(false);
+    },
+    [authenticate, loginWithSiwe, onLoginSuccess, setUser]
+  );
+
+  useEffect(() => {
+    if (step === "permissions") {
+      setB3ModalContentType({
+        type: "requestPermissions",
+        chain,
+        sessionKeyAddress,
+        onSuccess: onSessionKeySuccessEnhanced,
+        onError
+      });
+    }
+  }, [chain, onError, onSessionKeySuccessEnhanced, sessionKeyAddress, setB3ModalContentType, step]);
+
+  // Display error if refetch limit exceeded
+  if (refetchError) {
+    return (
+      <LoginStepContainer partnerId={partnerId}>
+        <div className="p-4 text-center text-red-500">{refetchError}</div>
+      </LoginStepContainer>
+    );
+  }
+
+  if (authenticatingWithB3 || (isFetchingSigners && step === "login") || source === "requestPermissions") {
+    return (
+      <LoginStepContainer partnerId={partnerId}>
+        <div className="mt-8 flex items-center justify-center">
+          <Loading variant="white" size="lg" />
+        </div>
+      </LoginStepContainer>
+    );
+  }
+
+  if (step === "login") {
+    // Custom strategy
+    if (strategies?.[0] === "privy") {
+      return <SignInWithB3Privy onSuccess={handleLoginSuccess} partnerId={partnerId} chain={chain} />;
+    }
+
+    // Strategies are explicitly provided
+    if (strategies) {
+      return (
+        <LoginStepCustom
+          strategies={strategies}
+          partnerId={partnerId}
+          chain={chain}
+          onSuccess={handleLoginSuccess}
+          onError={onError}
+          automaticallySetFirstEoa={!!automaticallySetFirstEoa}
+        />
+      );
+    }
+
+    // Default to handle all strategies we support
+    return <LoginStep partnerId={partnerId} chain={chain} onSuccess={handleLoginSuccess} onError={onError} />;
+  }
+
+  return null;
+}

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

@@ -0,0 +1,60 @@
+import { Loading } from "@b3dotfun/sdk/global-account/react/components/ui/Loading";
+import useAuthentication from "@b3dotfun/sdk/global-account/react/hooks/useAuthentication";
+import { useHandleConnectWithPrivy } from "@b3dotfun/sdk/global-account/react/hooks/useHandleConnectWithPrivy";
+import { useAuthStore } from "@b3dotfun/sdk/global-account/react/stores/useAuthStore";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { useEffect } from "react";
+import type { Chain } from "thirdweb";
+import { Account } from "thirdweb/wallets";
+
+const debug = debugB3React("SignInWithB3Privy");
+interface SignInWithB3PrivyProps {
+  onError?: (error: Error) => Promise<void>;
+  onSuccess: (account: Account) => Promise<void>;
+  accessToken?: string;
+  partnerId: string;
+  chain: Chain;
+}
+
+export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }: SignInWithB3PrivyProps) {
+  const { isLoading, connectTw, fullToken } = useHandleConnectWithPrivy(partnerId, chain, onSuccess);
+  const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
+  const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
+  const { logout } = useAuthentication(partnerId);
+
+  debug("@@SignInWithB3Privy", {
+    isLoading,
+    fullToken
+  });
+
+  useEffect(() => {
+    async function autoConnect() {
+      try {
+        setIsAuthenticating(true);
+        const connectResult = await connectTw();
+        const account = connectResult?.getAccount();
+        if (!account) {
+          setIsAuthenticated(false);
+          return;
+        }
+        await onSuccess(account);
+        setIsAuthenticated(true);
+      } catch (error) {
+        console.error("Failed to connect:", error);
+        await onError?.(error as Error);
+        await logout();
+        setIsAuthenticated(false);
+      } finally {
+        setIsAuthenticating(false);
+      }
+    }
+    autoConnect();
+  }, [connectTw, onSuccess, onError, setIsAuthenticating, setIsAuthenticated, logout]);
+
+  // Currently we auto login, so we can show loading immediately and the onSuccess will proceed to the next modal
+  return (
+    <div className="flex aspect-square items-center justify-center p-6">
+      <Loading variant="white" size="lg" />
+    </div>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { Button } from "../../custom/Button";
+import { strategyIcons } from "../utils/signInUtils";
+
+export default function AuthButton({
+  strategy,
+  onClick,
+  isLoading
+}: {
+  strategy: string;
+  onClick: () => void;
+  isLoading: boolean;
+}) {
+  return (
+    <Button
+      key={strategy}
+      onClick={onClick}
+      disabled={isLoading}
+      className="flex w-full items-center justify-center bg-gray-100 px-2 py-3 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+    >
+      <img src={strategyIcons[strategy]} className="h-9 w-9" />
+    </Button>
+  );
+}