Skip to content

Commit 760a08b

Browse files
asutulaasutula
authored
Merge pull request #203 from tablelandnetwork/staging
Staging
2 parents 876db33 + af15f53 commit 760a08b

File tree

6 files changed

+189
-126
lines changed

6 files changed

+189
-126
lines changed

‎packages/web/app/[team]/[project]/(project)/deployments/[[...slug]]/page.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { AlertOctagon, HelpCircle, Info, Rocket, Table2 } from "lucide-react";
33
import Link from "next/link";
44
import { notFound } from "next/navigation";
55
import { cache } from "react";
6-
import Deployment from "./_components/deployment";
76
import ExecDeployment from "./_components/exec-deployment";
87
import { Sidebar } from "./_components/sidebar";
8+
import TablelandTable from "@/components/tableland-table";
99
import { api } from "@/trpc/server";
1010

1111
export default async function Deployments({
@@ -77,10 +77,16 @@ export default async function Deployments({
7777
/>
7878
{selectedEnvironment && selectedTable ? (
7979
deployment ? (
80-
<Deployment
80+
<TablelandTable
81+
displayName={selectedTable.name}
82+
tableName={deployment.tableName}
83+
chainId={deployment.chainId}
84+
tokenId={deployment.tokenId}
85+
createdAt={new Date(deployment.createdAt)}
86+
schema={selectedTable.schema}
8187
environment={selectedEnvironment}
82-
table={selectedTable}
83-
deployment={deployment}
88+
tableData={selectedTable}
89+
deploymentData={deployment}
8490
/>
8591
) : (
8692
<ExecDeployment

‎packages/web/app/_components/latest-tables.tsx

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,10 @@ import ChainSelector from "@/components/chain-selector";
1010
import { Label } from "@/components/ui/label";
1111
import { cn } from "@/lib/utils";
1212
import { type Table, getLatestTables } from "@/lib/validator-queries";
13-
import {
14-
AlertDialog,
15-
AlertDialogAction,
16-
AlertDialogContent,
17-
AlertDialogDescription,
18-
AlertDialogFooter,
19-
AlertDialogHeader,
20-
AlertDialogTitle,
21-
} from "@/components/ui/alert-dialog";
2213

2314
const timeAgo = new TimeAgo("en-US");
2415

2516
export function LatestTables({ initialData }: { initialData: Table[] }) {
26-
const [showAlert, setShowAlert] = useState(false);
2717
const [latestTables, setLatestTables] = useState<Table[]>(initialData);
2818
const [selectedChain, setSelectedChain] = useState<
2919
number | "mainnets" | "testnets"
@@ -49,20 +39,6 @@ export function LatestTables({ initialData }: { initialData: Table[] }) {
4939

5040
return (
5141
<>
52-
<AlertDialog open={showAlert} onOpenChange={setShowAlert}>
53-
<AlertDialogContent>
54-
<AlertDialogHeader>
55-
<AlertDialogTitle>Coming soon!</AlertDialogTitle>
56-
<AlertDialogDescription>
57-
We&apos;re working hard to lauch Tableland table pages as soon as
58-
possible. Check back shortly.
59-
</AlertDialogDescription>
60-
</AlertDialogHeader>
61-
<AlertDialogFooter>
62-
<AlertDialogAction>Got it!</AlertDialogAction>
63-
</AlertDialogFooter>
64-
</AlertDialogContent>
65-
</AlertDialog>
6642
<div className="mt-8 flex items-end gap-4">
6743
<TypographyH3>Latest Tableland tables</TypographyH3>
6844
<div className="ml-auto flex items-center gap-2">
@@ -81,12 +57,8 @@ export function LatestTables({ initialData }: { initialData: Table[] }) {
8157
{latestTables.slice(offset, offset + pageSize).map((table) => (
8258
<Link
8359
key={`${table.chain_id}-${table.id}`}
84-
href={`/tables/${table.prefix}_${table.chain_id}_${table.id}`}
60+
href={`/table/${table.prefix}_${table.chain_id}_${table.id}`}
8561
className="flex flex-col items-start gap-2 rounded-lg border p-4 text-left text-sm transition-all hover:bg-accent"
86-
onClick={(e) => {
87-
e.preventDefault();
88-
setShowAlert(true);
89-
}}
9062
>
9163
<div className="flex w-full flex-col gap-1">
9264
<div className="flex items-center gap-2">

‎packages/web/app/_components/popular-tables.tsx

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,12 @@ import { Label } from "@/components/ui/label";
1010
import { type PopularTable, getPopularTables } from "@/lib/validator-queries";
1111
import { TypographyP } from "@/components/typography-p";
1212
import { cn } from "@/lib/utils";
13-
import {
14-
AlertDialog,
15-
AlertDialogAction,
16-
AlertDialogContent,
17-
AlertDialogDescription,
18-
AlertDialogFooter,
19-
AlertDialogHeader,
20-
AlertDialogTitle,
21-
} from "@/components/ui/alert-dialog";
2213

2314
export function PopularTables({
2415
initialData,
2516
}: {
2617
initialData: PopularTable[];
2718
}) {
28-
const [showAlert, setShowAlert] = useState(false);
2919
const [popularTables, setPopularTables] =
3020
useState<PopularTable[]>(initialData);
3121
const [selectedChain, setSelectedChain] = useState<
@@ -52,20 +42,6 @@ export function PopularTables({
5242

5343
return (
5444
<>
55-
<AlertDialog open={showAlert} onOpenChange={setShowAlert}>
56-
<AlertDialogContent>
57-
<AlertDialogHeader>
58-
<AlertDialogTitle>Coming soon!</AlertDialogTitle>
59-
<AlertDialogDescription>
60-
We&apos;re working hard to lauch Tableland table pages as soon as
61-
possible. Check back shortly.
62-
</AlertDialogDescription>
63-
</AlertDialogHeader>
64-
<AlertDialogFooter>
65-
<AlertDialogAction>Got it!</AlertDialogAction>
66-
</AlertDialogFooter>
67-
</AlertDialogContent>
68-
</AlertDialog>
6945
<div className="mt-8 flex items-end gap-4">
7046
<div className="flex flex-col">
7147
<TypographyH3>Active Tableland tables</TypographyH3>
@@ -94,12 +70,8 @@ export function PopularTables({
9470
{popularTables.slice(offset, offset + pageSize).map((table, n) => (
9571
<Link
9672
key={`${table.chain_id}-${table.table_id}`}
97-
href={`/tables/${table.prefix}_${table.chain_id}_${table.table_id}`}
73+
href={`/table/${table.prefix}_${table.chain_id}_${table.table_id}`}
9874
className="flex flex-col items-start gap-2 rounded-lg border p-4 text-left text-sm transition-all hover:bg-accent"
99-
onClick={(e) => {
100-
e.preventDefault();
101-
setShowAlert(true);
102-
}}
10375
>
10476
<div className="flex w-full flex-col gap-1">
10577
<div className="flex items-center gap-4">

‎packages/web/app/page.tsx

Lines changed: 42 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -141,43 +141,51 @@ export default async function Page() {
141141
</div>
142142
</section>
143143
)}
144-
<section>
145-
{/* <div className="flex items-baseline gap-4">
144+
{(featuredProjects.length > 0 || latestProjects.length > 0) && (
145+
<section>
146+
{/* <div className="flex items-baseline gap-4">
146147
<Search /> */}
147-
<TypographyH2>Explore Studio Projects</TypographyH2>
148-
{/* </div> */}
149-
<TypographyP>
150-
User&apos;s work in Studio is organized into Projects. Learn about any
151-
Project by reading it&apos;s description and viewing it&apos;s table
152-
definitions. Soon we&apos;ll be launching a feature allowing you to
153-
clone any project as a quick way to get started.
154-
</TypographyP>
155-
<TypographyH3>Featured Studio Projects</TypographyH3>
156-
<div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
157-
{featuredProjects.map((item) => (
158-
<Link
159-
key={item.project.id}
160-
href={`/${item.team.slug}/${item.project.slug}`}
161-
className="flex grow basis-1 flex-col items-start gap-2 rounded-lg border p-4 text-left text-sm transition-all hover:bg-accent"
162-
>
163-
<div className="flex w-full flex-col gap-4">
164-
<div className="flex items-center gap-2">
165-
<TeamAvatar team={item.team} />
166-
<div className="flex items-center gap-2">
167-
<div className="text-sm font-semibold">
168-
{item.team.name}/{item.project.name}
148+
<TypographyH2>Explore Studio Projects</TypographyH2>
149+
{/* </div> */}
150+
<TypographyP>
151+
User&apos;s work in Studio is organized into Projects. Learn about
152+
any Project by reading it&apos;s description and viewing it&apos;s
153+
table definitions. Soon we&apos;ll be launching a feature allowing
154+
you to clone any project as a quick way to get started.
155+
</TypographyP>
156+
{featuredProjects.length === 0 ? null : (
157+
<>
158+
<TypographyH3>Featured Studio Projects</TypographyH3>
159+
<div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
160+
{featuredProjects.map((item) => (
161+
<Link
162+
key={item.project.id}
163+
href={`/${item.team.slug}/${item.project.slug}`}
164+
className="flex grow basis-1 flex-col items-start gap-2 rounded-lg border p-4 text-left text-sm transition-all hover:bg-accent"
165+
>
166+
<div className="flex w-full flex-col gap-4">
167+
<div className="flex items-center gap-2">
168+
<TeamAvatar team={item.team} />
169+
<div className="flex items-center gap-2">
170+
<div className="text-sm font-semibold">
171+
{item.team.name}/{item.project.name}
172+
</div>
173+
</div>
174+
</div>
175+
<div className="line-clamp-5 text-sm text-muted-foreground">
176+
{item.project.description}
177+
</div>
169178
</div>
170-
</div>
171-
</div>
172-
<div className="line-clamp-5 text-sm text-muted-foreground">
173-
{item.project.description}
174-
</div>
179+
</Link>
180+
))}
175181
</div>
176-
</Link>
177-
))}
178-
</div>
179-
<LatestProjects projects={latestProjects} />
180-
</section>
182+
</>
183+
)}
184+
{latestProjects.length === 0 ? null : (
185+
<LatestProjects projects={latestProjects} />
186+
)}
187+
</section>
188+
)}
181189
<section>
182190
<TypographyH2>Explore the wider Tableland landscape</TypographyH2>
183191
<TypographyP>

‎packages/web/app/table/[name]/page.tsx

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { ApiError, type Table, Validator, helpers } from "@tableland/sdk";
2+
import TablelandTable from "@/components/tableland-table";
3+
4+
export default async function TablePage({
5+
params,
6+
}: {
7+
params: { name: string };
8+
}) {
9+
const parts = params.name.split("_");
10+
if (parts.length < 3) {
11+
return (
12+
<div className="p-4">
13+
<p>Invalid table name.</p>
14+
</div>
15+
);
16+
}
17+
18+
// const [tokenId, chainIdString, ...rest] = [
19+
const [tokenId, chainIdString] = [parts.pop()!, parts.pop()!, ...parts];
20+
// const prefix = rest.join("_");
21+
const chainId = parseInt(chainIdString, 10);
22+
if (isNaN(chainId)) {
23+
return (
24+
<div className="p-4">
25+
<p>Invalid chain id.</p>
26+
</div>
27+
);
28+
}
29+
30+
const validator = new Validator({
31+
baseUrl: helpers.getBaseUrl(chainId),
32+
});
33+
34+
let tablelandTable: Table;
35+
try {
36+
tablelandTable = await validator.getTableById({
37+
chainId,
38+
tableId: tokenId,
39+
});
40+
} catch (err) {
41+
if (err instanceof ApiError && err.status === 404) {
42+
return (
43+
<div className="p-4">
44+
<p>
45+
Table id {tokenId} not found on chain {chainId}.
46+
</p>
47+
</div>
48+
);
49+
}
50+
console.error("Error getting table by id:", { err });
51+
return (
52+
<div className="p-4">
53+
<p>Error getting table by id</p>
54+
</div>
55+
);
56+
}
57+
58+
const createdAttr = tablelandTable.attributes?.find(
59+
(attr) => attr.traitType === "created",
60+
);
61+
if (!createdAttr) {
62+
return (
63+
<div className="p-4">
64+
<p>No created attribute found.</p>
65+
</div>
66+
);
67+
}
68+
const createdAt = new Date(createdAttr.value * 1000);
69+
70+
return (
71+
<TablelandTable
72+
displayName={params.name}
73+
chainId={chainId}
74+
createdAt={createdAt}
75+
schema={tablelandTable.schema}
76+
tableName={params.name}
77+
tokenId={tokenId}
78+
/>
79+
);
80+
}

0 commit comments

Comments
 (0)