From 180d563139decebe11dfba35086a065855a79262 Mon Sep 17 00:00:00 2001
From: joaquim-verges <joaquim.verges@gmail.com>
Date: Tue, 5 Nov 2024 20:30:21 +0000
Subject: [PATCH] feat(dashboard): add default account factories table (#5308)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Fixes CNCT-2225

![CleanShot 2024-11-05 at 21.47.45@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/GGPGC1k4LEcpDtkOsVBe/d6321c9a-f6d9-42cd-af14-41165c2ace6d.png)

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the `AccountFactories` component by introducing a section for default account factories and a table to display them. It improves user guidance on deploying custom factories and organizes the layout for better clarity.

### Detailed summary
- Added a section for default account factories with a description and link.
- Introduced `TWTable` to display default account factories (`AccountFactory (v0.6)` and `AccountFactory (v0.7)`).
- Created a new section for user account factories with relevant information and a link.
- Defined `DefaultFactory` type and created table columns using `createColumnHelper`.

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

<!-- end pr-codex -->
---
 .../smart-wallets/AccountFactories/index.tsx  | 96 ++++++++++++++++++-
 1 file changed, 92 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/components/smart-wallets/AccountFactories/index.tsx b/apps/dashboard/src/components/smart-wallets/AccountFactories/index.tsx
index 1a8665e077a..9a2581990c7 100644
--- a/apps/dashboard/src/components/smart-wallets/AccountFactories/index.tsx
+++ b/apps/dashboard/src/components/smart-wallets/AccountFactories/index.tsx
@@ -1,14 +1,21 @@
 "use client";
 
+import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
 import { Button } from "@/components/ui/button";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
 import { useMultiChainRegContractList } from "@3rdweb-sdk/react/hooks/useRegistry";
 import { useQuery } from "@tanstack/react-query";
+import { createColumnHelper } from "@tanstack/react-table";
 import { PlusIcon } from "lucide-react";
 import { defineChain, getContract } from "thirdweb";
 import { getCompilerMetadata } from "thirdweb/contract";
+import {
+  DEFAULT_ACCOUNT_FACTORY_V0_6,
+  DEFAULT_ACCOUNT_FACTORY_V0_7,
+} from "thirdweb/wallets/smart";
+import { TWTable } from "../../shared/TWTable";
 import { FactoryContracts } from "./factory-contracts";
 
 function useFactories() {
@@ -54,13 +61,58 @@ export const AccountFactories: React.FC<AccountFactoriesProps> = ({
   const factories = useFactories();
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between lg:gap-8">
+      {/* Default factories */}
+      <div className="flex flex-col gap-2">
+        <h3 className="font-semibold text-lg">Default Account Factories</h3>
         <p className="text-muted-foreground text-sm">
-          Click an account factory contract to view analytics and accounts
-          created.
+          Ready to use account factories that are pre-deployed on each chain.{" "}
+          <a
+            href="https://playground.thirdweb.com/connect/account-abstraction/connect"
+            className="text-link-foreground"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Learn how to use these in your apps.
+          </a>
         </p>
+      </div>
+      <TWTable
+        title="default account factories"
+        data={[
+          {
+            name: "AccountFactory (v0.6)",
+            address: DEFAULT_ACCOUNT_FACTORY_V0_6,
+            entrypointVersion: "0.6",
+          },
+          {
+            name: "AccountFactory (v0.7)",
+            address: DEFAULT_ACCOUNT_FACTORY_V0_7,
+            entrypointVersion: "0.7",
+          },
+        ]}
+        columns={columns}
+        isPending={false}
+        isFetched={true}
+      />
 
-        <Button variant="outline" asChild size="sm">
+      {/* Your factories */}
+      <div className="mt-8 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between lg:gap-8">
+        <div className="flex flex-col gap-2">
+          <h3 className="font-semibold text-lg">Your Account Factories</h3>
+          <p className="text-muted-foreground text-sm">
+            Deploy your own account factories to create smart wallets.{" "}
+            <a
+              href="https://portal.thirdweb.com/connect/account-abstraction/factories"
+              className="text-link-foreground"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Learn more.
+            </a>
+          </p>
+        </div>
+
+        <Button variant="default" asChild size="sm">
           <TrackedLinkTW
             category={trackingCategory}
             label="create-factory"
@@ -81,3 +133,39 @@ export const AccountFactories: React.FC<AccountFactoriesProps> = ({
     </div>
   );
 };
+
+type DefaultFactory = {
+  name: string;
+  address: string;
+  entrypointVersion: string;
+};
+
+const columnHelper = createColumnHelper<DefaultFactory>();
+
+const columns = [
+  columnHelper.accessor((row) => row.name, {
+    header: "Name",
+    cell: (cell) => cell.row.original.name,
+  }),
+  columnHelper.accessor((row) => row.name, {
+    header: "Network",
+    cell: () => "All networks",
+  }),
+  columnHelper.accessor("address", {
+    header: "Contract address",
+    cell: (cell) => (
+      <CopyAddressButton
+        address={cell.getValue()}
+        copyIconPosition="left"
+        variant="ghost"
+        className="-translate-x-2"
+      />
+    ),
+  }),
+  columnHelper.accessor((row) => row, {
+    header: "Entrypoint Version",
+    cell: (cell) => {
+      return cell.row.original.entrypointVersion;
+    },
+  }),
+];