[Dashboard] Show EOA server wallets by default (#7645)

Author: joaquim-verges

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

@@ -10,6 +10,7 @@ import * as z from "zod";
 import { engineCloudProxy } from "@/actions/proxies";
 import type { Project } from "@/api/projects";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -31,7 +32,6 @@ import { useAllChainsData } from "@/hooks/chains/allChains";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { TryItOut } from "../server-wallets/components/try-it-out";
 import type { Wallet } from "../server-wallets/wallet-table/types";
-import { SmartAccountCell } from "../server-wallets/wallet-table/wallet-table-ui.client";
 
 const formSchema = z.object({
   secretKey: z.string().min(1, "Secret key is required"),
@@ -193,9 +193,9 @@ function SendTestTransactionModal(props: {
               <SelectTrigger className="w-full">
                 <SelectValue>
                   <div className="flex items-center gap-2">
-                    <SmartAccountCell
+                    <WalletAddress
                       client={props.client}
-                      wallet={selectedWallet}
+                      address={selectedWallet.address}
                     />
                     <span className="text-muted-foreground text-sm">
                       {selectedWallet.metadata.label}
@@ -207,7 +207,10 @@ function SendTestTransactionModal(props: {
                 {props.wallets.map((wallet, index) => (
                   <SelectItem key={wallet.address} value={index.toString()}>
                     <div className="flex items-center gap-2">
-                      <SmartAccountCell client={props.client} wallet={wallet} />
+                      <WalletAddress
+                        client={props.client}
+                        address={wallet.address}
+                      />
                       <span className="text-muted-foreground text-sm">
                         {wallet.metadata.label}
                       </span>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx

@@ -331,18 +331,14 @@ function TxStatusCell(props: { transaction: Transaction }) {
   const { errorMessage } = transaction;
   const minedAt = transaction.confirmedAt;
   const status =
-    (transaction.executionResult?.status as TransactionStatus) ?? null;
+    (transaction.executionResult?.status as TransactionStatus) ?? "QUEUED";
 
   const onchainStatus =
     transaction.executionResult &&
     "onchainStatus" in transaction.executionResult
       ? transaction.executionResult.onchainStatus
       : null;
 
-  if (!status) {
-    return null;
-  }
-
   const tooltip =
     onchainStatus !== "REVERTED"
       ? errorMessage

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

@@ -58,12 +58,12 @@ export function ServerWalletsTableUI({
   totalPages: number;
   client: ThirdwebClient;
 }) {
-  const [showSigners, setShowSigners] = useState(false);
-  const showSignersId = useId();
+  const [showContractWallets, setShowContractWallets] = useState(false);
+  const showContractWalletsId = useId();
   return (
     <div className="overflow-hidden rounded-lg border border-border bg-card">
-      <div className="flex flex-row items-center gap-4 px-6 py-6">
-        <div className="flex flex-1 flex-col gap-4 rounded-lg rounded-b-none lg:flex-row lg:justify-between">
+      <div className="flex flex-col lg:flex-row items-center gap-4 px-6 py-6">
+        <div className="flex flex-1 flex-col gap-4 rounded-lg rounded-b-none items-start">
           <div>
             <h2 className="font-semibold text-xl tracking-tight">
               Server Wallets
@@ -73,28 +73,36 @@ export function ServerWalletsTableUI({
             </p>
           </div>
         </div>
-        <div className="flex items-center justify-end gap-2">
-          <label className="cursor-pointer text-sm" htmlFor={showSignersId}>
-            Show Signer Addresses
-          </label>
-          <Switch
-            checked={showSigners}
-            id={showSignersId}
-            onCheckedChange={() => setShowSigners(!showSigners)}
+        <div className="flex flex-col gap-4 items-end">
+          <CreateServerWallet
+            managementAccessToken={managementAccessToken}
+            project={project}
+            teamSlug={teamSlug}
           />
         </div>
-        <CreateServerWallet
-          managementAccessToken={managementAccessToken}
-          project={project}
-          teamSlug={teamSlug}
+      </div>
+
+      <div className="flex items-center justify-end gap-2 py-4">
+        <label
+          className="cursor-pointer text-sm text-muted-foreground"
+          htmlFor={showContractWalletsId}
+        >
+          Show ERC4337 Smart Account Addresses
+        </label>
+        <Switch
+          checked={showContractWallets}
+          id={showContractWalletsId}
+          onCheckedChange={() => setShowContractWallets(!showContractWallets)}
         />
       </div>
 
       <TableContainer className="rounded-none border-x-0 border-b-0">
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>Address</TableHead>
+              <TableHead>
+                {showContractWallets ? "Smart Account Address" : "EOA Address"}
+              </TableHead>
               <TableHead>Label</TableHead>
               <TableHead className="text-right">Created At</TableHead>
               <TableHead className="text-right">Updated At</TableHead>
@@ -105,10 +113,10 @@ export function ServerWalletsTableUI({
             {wallets.map((wallet) => (
               <TableRow className="hover:bg-accent/50" key={wallet.id}>
                 <TableCell>
-                  {showSigners ? (
-                    <WalletAddress address={wallet.address} client={client} />
-                  ) : (
+                  {showContractWallets ? (
                     <SmartAccountCell client={client} wallet={wallet} />
+                  ) : (
+                    <WalletAddress address={wallet.address} client={client} />
                   )}
                 </TableCell>
                 <TableCell>{wallet.metadata.label || "none"}</TableCell>
@@ -197,7 +205,7 @@ export function ServerWalletsTableUI({
   );
 }
 
-export function SmartAccountCell({
+function SmartAccountCell({
   wallet,
   client,
 }: {