polish

Author: joaquim-verges

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/send-test-tx.client.tsx

@@ -2,7 +2,6 @@
 import { engineCloudProxy } from "@/actions/proxies";
 import type { Project } from "@/api/projects";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
-import { WalletAvatar } from "@/components/blocks/wallet-address";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -26,9 +25,9 @@ import {
   optimismSepolia,
   sepolia,
 } from "thirdweb/chains";
-import { shortenAddress } from "thirdweb/utils";
 import * as z from "zod";
 import type { Wallet } from "../server-wallets/wallet-table/types";
+import { SmartAccountCell } from "../server-wallets/wallet-table/wallet-table-ui.client";
 
 const formSchema = z.object({
   accessToken: z.string().min(1, "Access token is required"),
@@ -171,15 +170,7 @@ export function SendTestTransaction(props: {
                 <SelectTrigger className="w-full">
                   <SelectValue>
                     <div className="flex items-center gap-2">
-                      <WalletAvatar
-                        address={selectedWallet.address}
-                        profiles={[]}
-                        thirdwebClient={thirdwebClient}
-                        iconClassName="h-5 w-5"
-                      />
-                      <span className="font-mono text-sm">
-                        {shortenAddress(selectedWallet.address)}
-                      </span>
+                      <SmartAccountCell wallet={selectedWallet} />
                       <span className="text-muted-foreground text-sm">
                         {selectedWallet.metadata.label}
                       </span>
@@ -190,15 +181,7 @@ export function SendTestTransaction(props: {
                   {props.wallets.map((wallet, index) => (
                     <SelectItem key={wallet.address} value={index.toString()}>
                       <div className="flex items-center gap-2">
-                        <WalletAvatar
-                          address={wallet.address}
-                          profiles={[]}
-                          thirdwebClient={thirdwebClient}
-                          iconClassName="h-5 w-5"
-                        />
-                        <span className="font-mono text-sm">
-                          {shortenAddress(wallet.address)}
-                        </span>
+                        <SmartAccountCell wallet={wallet} />
                         <span className="text-muted-foreground text-sm">
                           {selectedWallet.metadata.label}
                         </span>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/wallet-table/wallet-table-ui.client.tsx

@@ -2,7 +2,6 @@
 
 import type { Project } from "@/api/projects";
 import { WalletAddress } from "@/components/blocks/wallet-address";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
 import {
   Table,
   TableBody,
@@ -23,6 +22,7 @@ import {
   predictSmartAccountAddress,
 } from "thirdweb/wallets/smart";
 import { Badge } from "../../../../../../../../@/components/ui/badge";
+import { Skeleton } from "../../../../../../../../@/components/ui/skeleton";
 import { Switch } from "../../../../../../../../@/components/ui/switch";
 import { useV5DashboardChain } from "../../../../../../../../lib/v5-adapter";
 import CreateServerWallet from "../components/create-server-wallet.client";
@@ -111,7 +111,7 @@ export function ServerWalletsTableUI({
   );
 }
 
-function SmartAccountCell({ wallet }: { wallet: Wallet }) {
+export function SmartAccountCell({ wallet }: { wallet: Wallet }) {
   const chainId = 1; // TODO: add chain switcher for balance + smart account address
   const chain = useV5DashboardChain(chainId);
 
@@ -136,7 +136,7 @@ function SmartAccountCell({ wallet }: { wallet: Wallet }) {
           <Badge variant={"default"}>Smart Account</Badge>
         </div>
       ) : (
-        <Spinner className="h-4 w-4" />
+        <Skeleton className="h-4 w-20" />
       )}
     </div>
   );