feat: use updated error state icons in authCard

account-kit/react/src/components/auth/card/error/connection-error.tsx

@@ -59,7 +59,7 @@ export const ConnectionError = ({
   return (
     <div className="flex flex-col justify-center content-center gap-3">
       <div className="flex justify-center">
-        <div className="w-[140px] h-[140px]">{getFailedIcon}</div>
+        <div className="w-[48px] h-[48px]">{getFailedIcon}</div>
       </div>
       <h2 className="font-semibold text-lg text-center">{getHeadingText}</h2>
       <p className="text-sm text-center text-fg-secondary">{getBodyText}</p>
@@ -69,7 +69,7 @@ export const ConnectionError = ({
       <Button
         onClick={handleUseAnotherMethod}
         variant={"social"}
-        className="border-0 hover:shadow-none"
+        className="border-0 bg-btn-secondary"
       >
         {ls.error.cta.useAnotherMethod}
       </Button>

account-kit/react/src/components/auth/card/error/icons/wallet-icon.tsx

@@ -1,7 +1,4 @@
-import { CoinbaseWallet } from "../../../../../icons/coinbaseWallet.js";
 import { EOAConnectionFailed } from "../../../../../icons/EOAConnectionFailed.js";
-import { MetaMask } from "../../../../../icons/metamask.js";
-import { WalletConnectIcon } from "../../../../../icons/walletConnectIcon.js";
 import { EOAWallets } from "../types.js";
 import { walletTypeConfig } from "../connection-error.js";
 import { ConnectionFailed } from "../../../../../icons/connectionFailed.js";
@@ -12,18 +9,7 @@ export const WalletIcon = ({ walletType }: { walletType: EOAWallets }) => {
   if (availableWallets.includes(walletType)) {
     return (
       <div className="relative">
-        <EOAConnectionFailed />
-        <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center z-[1]">
-          {walletType === EOAWallets.METAMASK && (
-            <MetaMask className="w-[35px] h-[35px]" />
-          )}
-          {walletType === EOAWallets.WALLET_CONNECT && (
-            <WalletConnectIcon className="w-[25px] h-[25px]" />
-          )}
-          {walletType === EOAWallets.COINBASE_WALLET && (
-            <CoinbaseWallet className="w-[35px] h-[35px]" />
-          )}
-        </div>
+        <EOAConnectionFailed walletType={walletType} />
       </div>
     );
   }

account-kit/react/src/components/auth/card/index.tsx

@@ -134,7 +134,7 @@ export const AuthCardContent = ({
     <div className="relative">
       {/* Wrapper container that sizes its height dynamically */}
       <div
-        className="transition-all duration-300 ease-out overflow-y-hidden"
+        className="transition-all duration-300 ease-out overflow-y-hidden radius-2"
         style={{ height: height ? `${height}px` : "auto" }}
       >
         <div className="z-[1]" ref={contentRef}>

account-kit/react/src/components/auth/card/loading/passkey.tsx

@@ -1,8 +1,29 @@
 import { ls } from "../../../../strings.js";
 import { LoadingPasskey } from "../../../../icons/passkey.js";
+import { useAuthContext, type AuthStep } from "../../context.js";
+import { ConnectionError } from "../error/connection-error.js";
 
+interface LoadingPasskeyAuthProps {
+  authStep: Extract<AuthStep, { type: "passkey_verify" }>;
+}
 // eslint-disable-next-line jsdoc/require-jsdoc
-export const LoadingPasskeyAuth = () => {
+export const LoadingPasskeyAuth = ({ authStep }: LoadingPasskeyAuthProps) => {
+  const { setAuthStep } = useAuthContext();
+
+  if (authStep.error) {
+    return (
+      <ConnectionError
+        connectionType="passkey"
+        handleTryAgain={() =>
+          setAuthStep({
+            type: "initial",
+          })
+        }
+        handleUseAnotherMethod={() => setAuthStep({ type: "initial" })}
+      />
+    );
+  }
+
   return (
     <div className="flex flex-col gap-5 items-center">
       <div className="flex flex-col items-center justify-center">

account-kit/react/src/components/auth/card/steps.tsx

@@ -14,7 +14,7 @@ export const Step = () => {
     case "email_verify":
       return <LoadingEmail authStep={authStep} />;
     case "passkey_verify":
-      return <LoadingPasskeyAuth />;
+      return <LoadingPasskeyAuth authStep={authStep} />;
     case "email_completing":
       return <CompletingEmailAuth authStep={authStep} />;
     case "passkey_create":

account-kit/react/src/components/auth/sections/Footer.tsx

@@ -28,7 +28,7 @@ const RenderFooterText = ({ authStep }: FooterProps) => {
 };
 export const Footer = ({ authStep }: FooterProps) => {
   return (
-    <div className="bg-bg-surface-subtle p-5 border-bg-surface-inset border-t-[1px]">
+    <div className="p-5 pt-2">
       <RenderFooterText authStep={authStep} />
       <div className="flex justify-center">
         <PoweredBy />

account-kit/react/src/components/navigation.tsx

@@ -21,15 +21,23 @@ export const Navigation = ({
         variant="link"
         onClick={onBack}
         disabled={!showBack}
-        className={showBack ? "text-fg-secondary" : "invisible"}
+        className={
+          showBack
+            ? "text-fg-secondary w-[32px] h-[32px] flex items-center justify-center hover:bg-btn-secondary rounded-md transition-all ease-out duration-200"
+            : "invisible"
+        }
       >
         <BackArrow />
       </Button>
 
       <Button
         variant="link"
         onClick={onClose}
-        className={showClose ? "text-fg-secondary" : "invisible"}
+        className={
+          showClose
+            ? "text-fg-secondary w-[32px] h-[32px] flex items-center justify-center hover:bg-btn-secondary rounded-md transition-all ease-out duration-200"
+            : "invisible"
+        }
       >
         <X />
       </Button>