[Dashboard] replace chakra stats in accounts

Author: jnsdls

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx

@@ -1,16 +1,9 @@
 "use client";
 
-import {
-  SimpleGrid,
-  Skeleton,
-  Stat,
-  StatLabel,
-  StatNumber,
-} from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { totalAccounts } from "thirdweb/extensions/erc4337";
 import { useReadContract } from "thirdweb/react";
-import { Card } from "tw-components";
+import { StatCard } from "../../overview/components/stat-card";
 
 type AccountsCountProps = {
   contract: ThirdwebContract;
@@ -19,13 +12,12 @@ type AccountsCountProps = {
 export const AccountsCount: React.FC<AccountsCountProps> = ({ contract }) => {
   const totalAccountsQuery = useReadContract(totalAccounts, { contract });
   return (
-    <SimpleGrid columns={{ base: 1, md: 3 }} spacing={{ base: 3, md: 6 }}>
-      <Card as={Stat}>
-        <StatLabel mb={{ base: 1, md: 0 }}>Total Accounts</StatLabel>
-        <Skeleton isLoaded={totalAccountsQuery.isSuccess}>
-          <StatNumber>{totalAccountsQuery.data?.toString()}</StatNumber>
-        </Skeleton>
-      </Card>
-    </SimpleGrid>
+    <div className="grid grid-cols-1 gap-3 md:grid-cols-3 md:gap-6">
+      <StatCard
+        label="Total Accounts"
+        value={totalAccountsQuery.data?.toString() || "0"}
+        isPending={totalAccountsQuery.isPending}
+      />
+    </div>
   );
 };