[Dashboard] replace chakra stats in accounts (#7188)

## Summary
- swap chakra `SimpleGrid`, `Stat`, `Skeleton` for shadcn `StatCard`
- use Tailwind grid utility classes

## Checklist
- [x] `pnpm biome check --apply`
- [x] `pnpm test` *(fails: spawn anvil ENOENT)*

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the `AccountsCount` component to replace the `Card` and `SimpleGrid` components from `@chakra-ui/react` with a new layout using `StatCard` from a different module, enhancing the presentation of the total accounts data.

### Detailed summary
- Removed imports for `SimpleGrid`, `Skeleton`, `Stat`, `StatLabel`, and `StatNumber`.
- Added import for `StatCard` from `../../overview/components/stat-card`.
- Changed the layout from `SimpleGrid` and `Card` to a `div` with a grid layout.
- Updated the rendering to use `StatCard` for displaying the total accounts.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Refactor**
  - Updated the accounts count display to use a new StatCard component with improved layout and styling for a more consistent and responsive user interface.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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>
   );
 };