feat: use updated error state icons in authCard

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

@@ -24,7 +24,7 @@ export const EoaConnectCard = ({ authStep }: Props) => {
     return (
       <ConnectionError
         connectionType="wallet"
-        walletType={authStep.connector.id as EOAWallets}
+        EOAConnector={authStep.connector}
         handleTryAgain={() =>
           setAuthStep({
             type: "eoa_connect",
@@ -69,7 +69,7 @@ export const WalletConnectCard = ({ authStep }: WalletConnectCardProps) => {
     return (
       <ConnectionError
         connectionType="wallet"
-        walletType={EOAWallets.WALLET_CONNECT}
+        EOAConnector={EOAWallets.WALLET_CONNECT}
         handleTryAgain={() => setAuthStep({ type: "wallet_connect" })}
         handleUseAnotherMethod={() => setAuthStep({ type: "pick_eoa" })}
       />

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

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { ConnectionError, walletTypeConfig } from "./connection-error.jsx";
+import { ConnectionError } from "./connection-error.jsx";
 import { EOAWallets } from "./types.js";
 
 const meta: Meta<typeof ConnectionError> = {
   title: "Errors/ConnectionError",
   component: ConnectionError,
   args: {
     connectionType: "passkey",
-    walletType: EOAWallets.COINBASE_WALLET,
+    EOAConnector: EOAWallets.WALLET_CONNECT,
   },
   argTypes: {
     connectionType: {
@@ -17,12 +17,6 @@ const meta: Meta<typeof ConnectionError> = {
         options: ["passkey", "wallet"],
       },
     },
-    walletType: {
-      control: {
-        type: "radio",
-        options: walletTypeConfig.map((w) => w.key),
-      },
-    },
   },
 };
 export default meta;

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

@@ -14,26 +14,25 @@ export const walletTypeConfig = [
 
 export const ConnectionError = ({
   connectionType,
-  walletType,
+  EOAConnector,
   handleTryAgain,
   handleUseAnotherMethod,
 }: ConnectionErrorProps) => {
   const getHeadingText = useMemo(() => {
     const walletName =
-      walletType && walletTypeConfig.find((w) => w.key === walletType)?.name;
+      EOAConnector === EOAWallets.WALLET_CONNECT
+        ? "Wallet Connect"
+        : EOAConnector?.name ?? "";
 
     switch (connectionType) {
       case "passkey":
         return ls.error.connection.passkeyTitle;
       case "wallet":
-        return (
-          walletType &&
-          ls.error.connection.walletTitle + (walletName ?? "wallet")
-        );
+        return ls.error.connection.walletTitle + (walletName ?? "wallet");
       case "timeout":
         return ls.error.connection.timedOutTitle;
     }
-  }, [connectionType, walletType]);
+  }, [connectionType, EOAConnector]);
 
   const getBodyText = useMemo(() => {
     switch (connectionType) {
@@ -51,15 +50,15 @@ export const ConnectionError = ({
       case "passkey":
         return <PasskeyConnectionFailed />;
       case "wallet":
-        return walletType && <WalletIcon walletType={walletType} />;
+        return EOAConnector && <WalletIcon EOAConnector={EOAConnector} />;
       case "timeout":
         return <Timeout />;
     }
-  }, [connectionType, walletType]);
+  }, [connectionType, EOAConnector]);
   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 +68,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,37 +1,32 @@
-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";
+import { EOAWallets, type ConnectionErrorProps } from "../types.js";
 
-export const WalletIcon = ({ walletType }: { walletType: EOAWallets }) => {
-  const availableWallets = walletTypeConfig.map((w) => w.key);
+export const WalletIcon = ({
+  EOAConnector,
+}: {
+  EOAConnector: ConnectionErrorProps["EOAConnector"];
+}) => {
+  const isWalletConnect = EOAConnector === EOAWallets.WALLET_CONNECT;
 
-  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>
-      </div>
-    );
-  }
-
-  // Show default connection failed Icon if wallet type is not defined
   return (
-    <div className="relative">
-      <ConnectionFailed />
+    <div className="relative flex justify-center items-center">
+      <EOAConnectionFailed.Ring />
+      <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center z-[1]">
+        {isWalletConnect ? (
+          <WalletConnectIcon className="w-[24px] h-[24px]" />
+        ) : (
+          <img
+            src={EOAConnector?.icon}
+            alt={EOAConnector?.name}
+            height={24}
+            width={24}
+          />
+        )}
+      </div>
+      <div className="absolute bottom-[0] right-[0] w-[16px] h-[16px] flex items-center justify-center z-[1]">
+        <EOAConnectionFailed.Cross />
+      </div>
     </div>
   );
 };

account-kit/react/src/components/auth/card/error/types.ts

@@ -1,3 +1,4 @@
+import type { Connector } from "@wagmi/core";
 export enum EOAWallets {
   COINBASE_WALLET = "com.coinbase.wallet",
   METAMASK = "io.metamask",
@@ -6,7 +7,7 @@ export enum EOAWallets {
 
 export type ConnectionErrorProps = {
   connectionType: "passkey" | "wallet" | "timeout";
-  walletType?: EOAWallets;
+  EOAConnector?: Connector | EOAWallets.WALLET_CONNECT;
   handleTryAgain?: () => void;
   handleUseAnotherMethod?: () => void;
 };

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>