Skip to content

Commit 2979c33

Browse files
GWSzetoGWSzeto
committed
update ModulesInstalled Table to use cards layout for modules
1 parent 295dd1b commit 2979c33

File tree

4 files changed

+191
-246
lines changed

4 files changed

+191
-246
lines changed

‎apps/dashboard/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"scripts": {
66
"preinstall": "npx only-allow pnpm",
7-
"dev": "next dev --turbo",
7+
"dev": "next dev",
88
"build": "next build",
99
"start": "next start",
1010
"format": "biome format ./src --write",

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

Lines changed: 118 additions & 179 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const InstalledModulesTable = (props: {
4343
const { installedModules, ownerAccount } = props;
4444

4545
const sectionTitle = (
46-
<h2 className="mb-3 font-bold text-2xl tracking-tight">
46+
<h2 className="mb-3 text-2xl font-bold tracking-tight">
4747
Installed Modules
4848
</h2>
4949
);
@@ -66,78 +66,31 @@ export const InstalledModulesTable = (props: {
6666
<>
6767
{sectionTitle}
6868
<ScrollShadow scrollableClassName="rounded-lg">
69-
<table className="w-full selection:bg-inverted selection:text-inverted-foreground">
70-
<thead>
71-
<TableHeadingRow>
72-
<TableHeading> Module Name </TableHeading>
73-
<TableHeading> Description </TableHeading>
74-
<TableHeading> Publisher Address </TableHeading>
75-
<TableHeading> Module Address </TableHeading>
76-
<TableHeading> Version </TableHeading>
77-
{ownerAccount && <TableHeading> Remove </TableHeading>}
78-
</TableHeadingRow>
79-
</thead>
80-
81-
<tbody>
82-
{installedModules.isPending ? (
83-
<>
84-
<SkeletonRow ownerAccount={ownerAccount} />
85-
<SkeletonRow ownerAccount={ownerAccount} />
86-
<SkeletonRow ownerAccount={ownerAccount} />
87-
</>
88-
) : (
89-
<>
90-
{installedModules.data?.map((e, i) => (
91-
<ModuleRow
92-
// biome-ignore lint/suspicious/noArrayIndexKey: FIXME
93-
key={i}
94-
moduleAddress={e}
95-
contract={props.contract}
96-
onRemoveModule={props.refetchModules}
97-
ownerAccount={ownerAccount}
98-
/>
99-
))}
100-
</>
101-
)}
102-
</tbody>
103-
</table>
69+
<div className="flex flex-col gap-6">
70+
{installedModules.data?.map((e, i) => (
71+
<ModuleTemplate
72+
// biome-ignore lint/suspicious/noArrayIndexKey: FIXME
73+
key={i}
74+
moduleAddress={e}
75+
contract={props.contract}
76+
onRemoveModule={props.refetchModules}
77+
ownerAccount={ownerAccount}
78+
/>
79+
))}
80+
</div>
10481
</ScrollShadow>
10582
</>
10683
);
10784
};
10885

109-
function SkeletonRow(props: { ownerAccount?: Account }) {
86+
function SkeletonModule() {
11087
return (
111-
<TableRow>
112-
<TableData>
113-
<Skeleton className="h-6" />
114-
</TableData>
115-
<TableData>
116-
<Skeleton className="h-6" />
117-
</TableData>
118-
<TableData>
119-
<Skeleton className="h-6" />
120-
</TableData>
121-
<TableData>
122-
<Skeleton className="h-6" />
123-
</TableData>
124-
125-
{/* Version */}
126-
<TableData>
127-
<Skeleton className="h-6" />
128-
</TableData>
129-
130-
{/* Remove */}
131-
{props.ownerAccount && (
132-
<TableData>
133-
<Skeleton className="h-6" />
134-
</TableData>
135-
)}
136-
</TableRow>
137-
);
88+
<div className="h-[400px] w-full" />
89+
)
13890
}
13991

140-
function ModuleRow(props: {
92+
93+
function ModuleTemplate(props: {
14194
moduleAddress: string;
14295
contract: ContractOptions;
14396
onRemoveModule: () => void;
@@ -191,124 +144,110 @@ function ModuleRow(props: {
191144
};
192145

193146
if (!contractInfo) {
194-
return <SkeletonRow ownerAccount={ownerAccount} />;
147+
return <SkeletonModule />;
195148
}
196149

197150
return (
198-
<TableRow>
199-
<TableData>
200-
<p>{contractInfo.name}</p>
201-
</TableData>
202-
<TableData>
203-
<p>{contractInfo.description || "..."}</p>
204-
</TableData>
205-
<TableData>
206-
<WalletAddress address={contractInfo.publisher || ""} />
207-
</TableData>
208-
<TableData>
209-
<CopyAddressButton
210-
className="text-xs"
211-
address={moduleAddress || ""}
212-
copyIconPosition="left"
213-
variant="outline"
214-
/>
215-
</TableData>
216-
217-
{/* Version */}
218-
<TableData>
219-
<p>{contractInfo.version}</p>
220-
</TableData>
221-
222-
{/* Remove */}
223-
{ownerAccount && (
224-
<TableData>
225-
<div>
226-
<ToolTipLabel label="Remove Module">
227-
<Button
228-
onClick={() => setIsUninstallModalOpen(true)}
229-
variant="outline"
230-
className="rounded-xl p-3 text-red-500"
231-
>
232-
{uninstallMutation.isPending ? (
233-
<Spinner className="size-4" />
234-
) : (
235-
<TrashIcon className="size-4" />
236-
)}
237-
</Button>
238-
</ToolTipLabel>
151+
<section>
152+
<div className="rounded-lg border border-border bg-muted/50 p-4 lg:p-6">
153+
{/* Title */}
154+
<div className="flex justify-between">
155+
<h3 className="text-xl font-semibold tracking-tight">
156+
{contractInfo.name || "..."}
157+
</h3>
158+
159+
<ToolTipLabel label="Remove Module">
160+
<Button
161+
onClick={() => setIsUninstallModalOpen(true)}
162+
variant="outline"
163+
className="rounded-xl p-3 text-red-500"
164+
>
165+
{uninstallMutation.isPending ? (
166+
<Spinner className="size-4" />
167+
) : (
168+
<TrashIcon className="size-4" />
169+
)}
170+
</Button>
171+
</ToolTipLabel>
172+
</div>
173+
174+
{/* Description */}
175+
<p className="text-muted-foreground">
176+
{contractInfo.description || "..."}
177+
</p>
178+
179+
<div className="h-5" />
180+
181+
<div className="flex flex-col gap-x-8 gap-y-4 md:flex-row">
182+
<div className="flex items-center gap-2">
183+
<p className="text-sm text-muted-foreground">
184+
Published by:{" "}
185+
</p>
186+
<WalletAddress address={contractInfo.publisher || ""} />
239187
</div>
240-
</TableData>
241-
)}
242-
243-
<Dialog
244-
open={isUninstallModalOpen}
245-
onOpenChange={setIsUninstallModalOpen}
246-
>
247-
<DialogContent className="z-[10001]" dialogOverlayClassName="z-[10000]">
248-
<form
249-
onSubmit={(e) => {
250-
e.preventDefault();
251-
handleRemove();
252-
}}
253-
>
254-
<DialogHeader>
255-
<DialogTitle>Uninstall Module</DialogTitle>
256-
<DialogDescription>
257-
Are you sure you want to uninstall{" "}
258-
<span className="font-medium text-foreground ">
259-
{contractInfo.name}
260-
</span>{" "}
261-
?
262-
</DialogDescription>
263-
</DialogHeader>
264-
265-
<DialogFooter className="mt-10 flex-row justify-end gap-3 md:gap-1">
266-
<Button
267-
type="button"
268-
onClick={() => setIsUninstallModalOpen(false)}
269-
variant="outline"
270-
>
271-
Cancel
272-
</Button>
273-
274-
<TransactionButton
275-
txChainID={contract.chain.id}
276-
transactionCount={1}
277-
isLoading={uninstallMutation.isPending}
278-
type="submit"
279-
colorScheme="red"
280-
className="flex"
281-
>
282-
Uninstall
283-
</TransactionButton>
284-
</DialogFooter>
285-
</form>
286-
</DialogContent>
287-
</Dialog>
288-
</TableRow>
289-
);
290-
}
291-
292-
function TableRow(props: { children: React.ReactNode }) {
293-
return (
294-
<tr className="border-border border-b [&:last-child]:border-b-0">
295-
{props.children}
296-
</tr>
297-
);
298-
}
299188

300-
function TableData({ children }: { children: React.ReactNode }) {
301-
return <td className="px-3 py-4 text-sm">{children}</td>;
302-
}
303-
304-
function TableHeading(props: { children: React.ReactNode }) {
305-
return (
306-
<th className="min-w-[150px] border-border border-b px-3 py-3 text-left font-medium text-muted-foreground text-sm">
307-
{props.children}
308-
</th>
309-
);
189+
<div className="flex items-center gap-2">
190+
<p className="text-sm text-muted-foreground">
191+
Module Address:{" "}
192+
</p>
193+
<CopyAddressButton
194+
className="text-xs"
195+
address={props.moduleAddress || ""}
196+
copyIconPosition="left"
197+
variant="outline"
198+
/>
199+
</div>
200+
</div>
201+
202+
<div className="h-5" />
203+
204+
<Dialog
205+
open={isUninstallModalOpen}
206+
onOpenChange={setIsUninstallModalOpen}
207+
>
208+
<DialogContent className="z-[10001]" dialogOverlayClassName="z-[10000]">
209+
<form
210+
onSubmit={(e) => {
211+
e.preventDefault();
212+
handleRemove();
213+
}}
214+
>
215+
<DialogHeader>
216+
<DialogTitle>Uninstall Module</DialogTitle>
217+
<DialogDescription>
218+
Are you sure you want to uninstall{" "}
219+
<span className="font-medium text-foreground ">
220+
{contractInfo.name}
221+
</span>{" "}
222+
?
223+
</DialogDescription>
224+
</DialogHeader>
225+
226+
<DialogFooter className="mt-10 flex-row justify-end gap-3 md:gap-1">
227+
<Button
228+
type="button"
229+
onClick={() => setIsUninstallModalOpen(false)}
230+
variant="outline"
231+
>
232+
Cancel
233+
</Button>
234+
235+
<TransactionButton
236+
txChainID={contract.chain.id}
237+
transactionCount={1}
238+
isLoading={uninstallMutation.isPending}
239+
type="submit"
240+
colorScheme="red"
241+
className="flex"
242+
>
243+
Uninstall
244+
</TransactionButton>
245+
</DialogFooter>
246+
</form>
247+
</DialogContent>
248+
</Dialog>
249+
</div>
250+
</section >
251+
)
310252
}
311253

312-
function TableHeadingRow({ children }: { children: React.ReactNode }) {
313-
return <tr className="relative bg-muted/50">{children}</tr>;
314-
}

0 commit comments

Comments
 (0)