Implemented transferable module in the dashboard

Author: GWSzeto

apps/dashboard/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "format": "biome format ./src --write",

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/ContractEditModulesPage.tsx

@@ -57,7 +57,7 @@ export const ContractEditModulesPage: React.FC<
       {isOwner && (
         <div>
           <div>
-            <h2 className="mb-1 font-bold text-2xl tracking-tight">
+            <h2 className="mb-1 text-2xl font-bold tracking-tight">
               Edit Modules
             </h2>
             <p className="text-muted-foreground">

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/InstalledModulesTable.tsx

@@ -30,6 +30,7 @@ import {
 import { uninstallModuleByProxy } from "thirdweb/modules";
 import type { Account } from "thirdweb/wallets";
 import { useModuleContractInfo } from "./moduleContractInfo";
+import TransferrableModal from "./transferrable/TransferrableModal";
 
 export const InstalledModulesTable = (props: {
   contract: ContractOptions;
@@ -43,7 +44,7 @@ export const InstalledModulesTable = (props: {
   const { installedModules, ownerAccount } = props;
 
   const sectionTitle = (
-    <h2 className="mb-3 font-bold text-2xl tracking-tight">
+    <h2 className="mb-3 text-2xl font-bold tracking-tight">
       Installed Modules
     </h2>
   );
@@ -75,6 +76,7 @@ export const InstalledModulesTable = (props: {
               <TableHeading> Module Address </TableHeading>
               <TableHeading> Version </TableHeading>
               {ownerAccount && <TableHeading> Remove </TableHeading>}
+              {ownerAccount && <TableHeading> Configure </TableHeading>}
             </TableHeadingRow>
           </thead>
 
@@ -145,6 +147,7 @@ function ModuleRow(props: {
 }) {
   const { contract, moduleAddress, ownerAccount } = props;
   const [isUninstallModalOpen, setIsUninstallModalOpen] = useState(false);
+  const [isConfigureModalOpen, setIsConfigureModalOpen] = useState(false);
 
   const contractInfo = useModuleContractInfo(
     getContract({
@@ -240,6 +243,15 @@ function ModuleRow(props: {
         </TableData>
       )}
 
+      {/* Configure */}
+      {ownerAccount && (
+        <TableData>
+          <div>
+            <TransferrableModal contract={contract} account={ownerAccount} />
+          </div>
+        </TableData>
+      )}
+
       <Dialog
         open={isUninstallModalOpen}
         onOpenChange={setIsUninstallModalOpen}
@@ -291,7 +303,7 @@ function ModuleRow(props: {
 
 function TableRow(props: { children: React.ReactNode }) {
   return (
-    <tr className="border-border border-b [&:last-child]:border-b-0">
+    <tr className="border-b border-border [&:last-child]:border-b-0">
       {props.children}
     </tr>
   );
@@ -303,7 +315,7 @@ function TableData({ children }: { children: React.ReactNode }) {
 
 function TableHeading(props: { children: React.ReactNode }) {
   return (
-    <th className="min-w-[150px] border-border border-b px-3 py-3 text-left font-medium text-muted-foreground text-sm">
+    <th className="min-w-[150px] border-b border-border px-3 py-3 text-left text-sm font-medium text-muted-foreground">
       {props.children}
     </th>
   );