Skip to content

Commit e051df6

Browse files
MananTankMananTank
committed
Dashboard: Migrate contract overview page components to tailwind/shadcn #1 
1 parent f2abc8b commit e051df6

File tree

12 files changed

+498
-624
lines changed

12 files changed

+498
-624
lines changed

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import type { ThirdwebContract } from "thirdweb";
2+
import { TokenDetailsCard } from "../tokens/components/supply";
23
import { AnalyticsOverview } from "./components/Analytics";
34
import { BuildYourApp } from "./components/BuildYourApp";
45
import { ContractChecklist } from "./components/ContractChecklist";
56
import { LatestEvents } from "./components/LatestEvents";
67
import { MarketplaceDetails } from "./components/MarketplaceDetails";
78
import { NFTDetails } from "./components/NFTDetails";
89
import { PermissionsTable } from "./components/PermissionsTable";
9-
import { TokenDetails } from "./components/TokenDetails";
1010

1111
interface ContractOverviewPageProps {
1212
contract: ThirdwebContract;
@@ -39,7 +39,7 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
3939
}) => {
4040
return (
4141
<div className="flex flex-col gap-8 lg:flex-row">
42-
<div className="flex flex-col gap-16">
42+
<div className="flex grow flex-col gap-10">
4343
<ContractChecklist
4444
isErc721={isErc721}
4545
isErc1155={isErc1155}
@@ -77,7 +77,7 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
7777
/>
7878
)}
7979

80-
{isErc20 && <TokenDetails contract={contract} />}
80+
{isErc20 && <TokenDetailsCard contract={contract} />}
8181

8282
<LatestEvents
8383
contract={contract}

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

Lines changed: 36 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,41 @@
1-
"use client";
1+
import { TrackedLinkTW } from "@/components/ui/tracked-link";
2+
import { ReactIcon } from "../../../../../../../components/icons/brand-icons/ReactIcon";
3+
import { TypeScriptIcon } from "../../../../../../../components/icons/brand-icons/TypeScriptIcon";
24

3-
import {
4-
Flex,
5-
GridItem,
6-
LinkBox,
7-
LinkOverlay,
8-
SimpleGrid,
9-
} from "@chakra-ui/react";
10-
import { ChakraNextImage as Image } from "components/Image";
11-
import { PRODUCTS } from "components/product-pages/common/nav/data";
12-
import { Card } from "tw-components/card";
13-
import { TrackedLink, type TrackedLinkProps } from "tw-components/link";
14-
import { Text } from "tw-components/text";
15-
16-
const RENDERED_PRODUCTS = ["sdk", "storage", "ui-components", "auth"];
17-
18-
interface BuildYourAppProps {
19-
trackingCategory: TrackedLinkProps["category"];
5+
export function BuildYourApp(props: {
6+
trackingCategory: string;
207
contractAddress: string;
218
chainSlug: string;
22-
}
23-
24-
export const BuildYourApp: React.FC<BuildYourAppProps> = ({
25-
trackingCategory,
26-
contractAddress,
27-
chainSlug,
28-
}) => {
9+
}) {
2910
return (
30-
<Card
31-
px={{ base: 4, md: 8 }}
32-
py={{ base: 6, md: 8 }}
33-
as={LinkBox}
34-
transition="all 0.2s"
35-
_hover={{ borderColor: "whiteAlpha.300" }}
36-
>
37-
<SimpleGrid {...{ columns: { base: 1, md: 2 } }} gap={8}>
38-
<GridItem as={Flex} direction="column" gap={4}>
39-
<h2 className="font-semibold text-2xl tracking-tight">
40-
Build your app
41-
</h2>
42-
<Text size="body.md">
43-
<LinkOverlay
44-
as={TrackedLink}
45-
category={trackingCategory}
46-
label="build_your_app"
47-
href={`/${chainSlug}/${contractAddress}/code`}
48-
color="blue.500"
49-
>
50-
Learn more
51-
</LinkOverlay>{" "}
52-
about how you can use thirdweb tools to build apps on top of this
53-
contract.
54-
</Text>
55-
</GridItem>
56-
<GridItem as={Flex} align="center" justify="end" gap={3}>
57-
{RENDERED_PRODUCTS.map((p) => {
58-
const product = PRODUCTS.find((item) => item.label === p);
59-
return (
60-
product?.icon && (
61-
<Flex
62-
key={product.name}
63-
rounded="full"
64-
bg="#0E0E10"
65-
align="center"
66-
justify="center"
67-
w={14}
68-
h={14}
69-
>
70-
<Image boxSize={7} src={product.icon} alt={product.name} />
71-
</Flex>
72-
)
73-
);
74-
})}
75-
</GridItem>
76-
</SimpleGrid>
77-
</Card>
11+
<div className="relative flex flex-col justify-between gap-4 rounded-lg border bg-card p-6 hover:border-active-border lg:flex-row">
12+
{/* left */}
13+
<div className="max-w-sm">
14+
<h2 className="mb-2 font-semibold text-xl leading-none tracking-tight">
15+
Build your app
16+
</h2>
17+
<TrackedLinkTW
18+
category={props.trackingCategory}
19+
label="build_your_app"
20+
href={`/${props.chainSlug}/${props.contractAddress}/code`}
21+
className="block text-balance text-muted-foreground text-sm before:absolute before:inset-0"
22+
>
23+
Learn more about how you can use thirdweb tools to build apps on top
24+
of this contract
25+
</TrackedLinkTW>{" "}
26+
</div>
27+
28+
{/* right */}
29+
<div className="flex items-center justify-end gap-3">
30+
{[TypeScriptIcon, ReactIcon].map((Icon, i) => {
31+
return (
32+
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
33+
<div key={i} className="rounded-full border bg-background p-3">
34+
<Icon className="size-5 text-muted-foreground" />
35+
</div>
36+
);
37+
})}
38+
</div>
39+
</div>
7840
);
79-
};
41+
}

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.stories.tsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { LatestEventsUI } from "./LatestEvents";
3+
4+
const meta: Meta<typeof LatestEventsUI> = {
5+
title: "Contracts/Overview/LatestEvents",
6+
component: LatestEventsUI,
7+
decorators: [
8+
(Story) => (
9+
<div className="container max-w-4xl py-10">
10+
<Story />
11+
</div>
12+
),
13+
],
14+
args: {
15+
allEvents: [],
16+
autoUpdate: false,
17+
eventsHref: "/ethereum/0x123456789/events",
18+
trackingCategory: "test-category",
19+
},
20+
};
21+
22+
function eventStub(eventName: string) {
23+
return {
24+
logIndex: 0,
25+
eventName,
26+
address: "0x",
27+
args: [],
28+
};
29+
}
30+
31+
const txStub =
32+
"0x9ef44ea701637e0f7c42666b6f99f4aad9aa6b9b51995cd22df1507288e51427";
33+
34+
export default meta;
35+
type Story = StoryObj<typeof LatestEventsUI>;
36+
37+
export const Loading: Story = {
38+
args: {
39+
allEvents: [],
40+
autoUpdate: true,
41+
eventsHref: "/ethereum/0x123456789/events",
42+
},
43+
};
44+
45+
export const NoEvents: Story = {
46+
args: {
47+
allEvents: [],
48+
autoUpdate: false,
49+
eventsHref: "/ethereum/0x123456789/events",
50+
},
51+
};
52+
53+
export const WithEvents: Story = {
54+
args: {
55+
allEvents: [
56+
{
57+
transactionHash: txStub,
58+
events: [eventStub("Transfer"), eventStub("Approval")],
59+
},
60+
{
61+
transactionHash: txStub,
62+
events: [eventStub("Mint")],
63+
},
64+
{
65+
transactionHash: txStub,
66+
events: [
67+
eventStub("Transfer"),
68+
eventStub("Burn"),
69+
eventStub("Approval"),
70+
],
71+
},
72+
],
73+
autoUpdate: false,
74+
eventsHref: "/ethereum/0x123456789/events",
75+
},
76+
};
77+
78+
export const LiveWithEvents: Story = {
79+
args: {
80+
allEvents: [
81+
{
82+
transactionHash: txStub,
83+
events: [eventStub("Transfer"), eventStub("Approval")],
84+
},
85+
{
86+
transactionHash: txStub,
87+
events: [eventStub("Mint")],
88+
},
89+
{
90+
transactionHash: txStub,
91+
events: [
92+
eventStub("Transfer"),
93+
eventStub("Burn"),
94+
eventStub("Approval"),
95+
],
96+
},
97+
{
98+
transactionHash: txStub,
99+
events: [eventStub("RoleGranted"), eventStub("OwnershipTransferred")],
100+
},
101+
],
102+
autoUpdate: true,
103+
eventsHref: "/ethereum/0x123456789/events",
104+
},
105+
};

0 commit comments

Comments
 (0)