Skip to content

Commit ffb0218

Browse files
kien-ngokien-ngo
committed
[Dashboard] Remove unnecessary chakra-ui Tabs in Listing sheet
1 parent 0f4e662 commit ffb0218

File tree

4 files changed

+123
-191
lines changed

4 files changed

+123
-191
lines changed

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx‎

Lines changed: 123 additions & 186 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,6 @@
11
import { WalletAddress } from "@/components/blocks/wallet-address";
22
import { Sheet, SheetContent } from "@/components/ui/sheet";
3-
import {
4-
Flex,
5-
GridItem,
6-
SimpleGrid,
7-
Tab,
8-
TabList,
9-
TabPanel,
10-
TabPanels,
11-
Tabs,
12-
usePrevious,
13-
} from "@chakra-ui/react";
14-
import { useMemo } from "react";
3+
import { Flex, GridItem, SimpleGrid, usePrevious } from "@chakra-ui/react";
154
import type { ThirdwebContract } from "thirdweb";
165
import type {
176
DirectListing,
@@ -30,15 +19,13 @@ interface NFTDrawerProps {
3019
isOpen: boolean;
3120
onClose: () => void;
3221
data: DirectListing | EnglishAuction | null;
33-
type: "direct-listings" | "english-auctions";
3422
}
3523

3624
export const ListingDrawer: React.FC<NFTDrawerProps> = ({
3725
contract,
3826
isOpen,
3927
onClose,
4028
data,
41-
type,
4229
}) => {
4330
const address = useActiveAccount()?.address;
4431
const prevData = usePrevious(data);
@@ -48,162 +35,14 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
4835

4936
const tokenId = renderData?.asset.id.toString() || "";
5037

51-
const tabs = useMemo(() => {
52-
if (!renderData) {
53-
return [];
54-
}
55-
const t = [
56-
{
57-
title: "Details",
58-
isDisabled: false,
59-
children: () => (
60-
<Flex flexDir="column" gap={4}>
61-
<Card as={Flex} flexDir="column" gap={3}>
62-
<SimpleGrid rowGap={3} columns={12} placeItems="center left">
63-
<GridItem colSpan={3}>
64-
<Heading size="label.md">Asset contract address</Heading>
65-
</GridItem>
66-
<GridItem colSpan={9}>
67-
<AddressCopyButton
68-
size="xs"
69-
address={renderData.assetContractAddress}
70-
title="contract address"
71-
/>
72-
</GridItem>
73-
<GridItem colSpan={3}>
74-
<Heading size="label.md">Token ID</Heading>
75-
</GridItem>
76-
<GridItem colSpan={9}>
77-
<AddressCopyButton
78-
size="xs"
79-
address={tokenId}
80-
title="Token ID"
81-
/>
82-
</GridItem>
83-
<GridItem colSpan={3}>
84-
<Heading size="label.md">Seller</Heading>
85-
</GridItem>
86-
<GridItem colSpan={9}>
87-
<WalletAddress address={renderData.creatorAddress} />
88-
</GridItem>
89-
<GridItem colSpan={3}>
90-
<Heading size="label.md">Listing ID</Heading>
91-
</GridItem>
92-
<GridItem colSpan={9}>
93-
<AddressCopyButton
94-
size="xs"
95-
title="listing ID"
96-
address={renderData.id.toString()}
97-
/>
98-
</GridItem>
99-
<GridItem colSpan={3}>
100-
<Heading size="label.md">Type</Heading>
101-
</GridItem>
102-
<GridItem colSpan={9}>
103-
<Text fontFamily="mono" size="body.md">
104-
{renderData.asset.type}
105-
</Text>
106-
</GridItem>
107-
<GridItem colSpan={3}>
108-
<Heading size="label.md">Status</Heading>
109-
</GridItem>
110-
<GridItem colSpan={9}>
111-
<Badge
112-
size="label.sm"
113-
variant="subtle"
114-
textTransform="capitalize"
115-
>
116-
{LISTING_STATUS[renderData.status]}
117-
</Badge>
118-
</GridItem>
119-
<GridItem colSpan={3}>
120-
<Heading size="label.md">Quantity</Heading>
121-
</GridItem>
122-
<GridItem colSpan={9}>
123-
<Text fontFamily="mono" size="body.md">
124-
{(renderData.quantity || 0n).toString()}{" "}
125-
{/* For listings that are completed, the `quantity` would be `0`
126-
So we show this text to make it clear */}
127-
{LISTING_STATUS[renderData.status] === "Completed"
128-
? "(Sold out)"
129-
: ""}
130-
</Text>
131-
</GridItem>
132-
133-
{renderData.type === "direct-listing" && (
134-
<>
135-
<GridItem colSpan={3}>
136-
<Heading size="label.md">Price</Heading>
137-
</GridItem>
138-
<GridItem colSpan={9}>
139-
<Text fontFamily="mono" size="body.md">
140-
{renderData.currencyValuePerToken.displayValue}{" "}
141-
{renderData.currencyValuePerToken.symbol}
142-
</Text>
143-
</GridItem>
144-
</>
145-
)}
146-
147-
{/*
148-
Todo: Add a Buy button somewhere in this section once the Dashboard is fully migrated to v5 (?)
149-
Kien already shipped a prebuilt component for the Marketplace Buy Button in SDK v5
150-
*/}
151-
</SimpleGrid>
152-
</Card>
153-
{data?.asset.metadata.properties ? (
154-
<Card as={Flex} flexDir="column" gap={4}>
155-
<Heading size="label.md">Attributes</Heading>
156-
<CodeBlock
157-
code={
158-
JSON.stringify(data.asset.metadata.properties, null, 2) ||
159-
""
160-
}
161-
language="json"
162-
canCopy={false}
163-
wrap={false}
164-
overflow="auto"
165-
/>
166-
</Card>
167-
) : null}
168-
</Flex>
169-
),
170-
},
171-
{
172-
title: "Cancel Listing",
173-
isDisabled: !isOwner,
174-
children: () =>
175-
type === "direct-listings" ? (
176-
<CancelDirectListing
177-
contract={contract}
178-
listingId={renderData.id.toString()}
179-
/>
180-
) : (
181-
<CancelEnglishAuction
182-
contract={contract}
183-
auctionId={renderData.id.toString()}
184-
/>
185-
),
186-
},
187-
];
188-
189-
return t;
190-
}, [
191-
renderData,
192-
isOwner,
193-
tokenId,
194-
data?.asset.metadata.properties,
195-
type,
196-
contract,
197-
]);
198-
19938
if (!renderData) {
20039
return null;
20140
}
20241

20342
return (
20443
<Sheet open={isOpen} onOpenChange={onClose}>
20544
<SheetContent className="flex w-full flex-col gap-6 py-6 md:min-w-[600px]">
206-
<Flex gap={6}>
45+
<div className="flex flex-row gap-6">
20746
<NFTMediaWithEmptyState
20847
metadata={renderData.asset.metadata}
20948
requireInteraction
@@ -216,31 +55,129 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
21655
{renderData.asset.metadata.name}
21756
</Text>
21857
</Flex>
58+
</div>
59+
60+
<Flex flexDir="column" gap={4}>
61+
<Card as={Flex} flexDir="column" gap={3}>
62+
<SimpleGrid rowGap={3} columns={12} placeItems="center left">
63+
<GridItem colSpan={3}>
64+
<Heading size="label.md">Asset contract address</Heading>
65+
</GridItem>
66+
<GridItem colSpan={9}>
67+
<AddressCopyButton
68+
size="xs"
69+
address={renderData.assetContractAddress}
70+
title="contract address"
71+
/>
72+
</GridItem>
73+
<GridItem colSpan={3}>
74+
<Heading size="label.md">Token ID</Heading>
75+
</GridItem>
76+
<GridItem colSpan={9}>
77+
<AddressCopyButton
78+
size="xs"
79+
address={tokenId}
80+
title="Token ID"
81+
/>
82+
</GridItem>
83+
<GridItem colSpan={3}>
84+
<Heading size="label.md">Seller</Heading>
85+
</GridItem>
86+
<GridItem colSpan={9}>
87+
<WalletAddress address={renderData.creatorAddress} />
88+
</GridItem>
89+
<GridItem colSpan={3}>
90+
<Heading size="label.md">Listing ID</Heading>
91+
</GridItem>
92+
<GridItem colSpan={9}>
93+
<AddressCopyButton
94+
size="xs"
95+
title="listing ID"
96+
address={renderData.id.toString()}
97+
/>
98+
</GridItem>
99+
<GridItem colSpan={3}>
100+
<Heading size="label.md">Type</Heading>
101+
</GridItem>
102+
<GridItem colSpan={9}>
103+
<Text fontFamily="mono" size="body.md">
104+
{renderData.asset.type}
105+
</Text>
106+
</GridItem>
107+
<GridItem colSpan={3}>
108+
<Heading size="label.md">Status</Heading>
109+
</GridItem>
110+
<GridItem colSpan={9}>
111+
<Badge
112+
size="label.sm"
113+
variant="subtle"
114+
textTransform="capitalize"
115+
>
116+
{LISTING_STATUS[renderData.status]}
117+
</Badge>
118+
</GridItem>
119+
<GridItem colSpan={3}>
120+
<Heading size="label.md">Quantity</Heading>
121+
</GridItem>
122+
<GridItem colSpan={9}>
123+
<Text fontFamily="mono" size="body.md">
124+
{(renderData.quantity || 0n).toString()}{" "}
125+
{/* For listings that are completed, the `quantity` would be `0`
126+
So we show this text to make it clear */}
127+
{LISTING_STATUS[renderData.status] === "Completed"
128+
? "(Sold out)"
129+
: ""}
130+
</Text>
131+
</GridItem>
132+
133+
{renderData.type === "direct-listing" && (
134+
<>
135+
<GridItem colSpan={3}>
136+
<Heading size="label.md">Price</Heading>
137+
</GridItem>
138+
<GridItem colSpan={9}>
139+
<Text fontFamily="mono" size="body.md">
140+
{renderData.currencyValuePerToken.displayValue}{" "}
141+
{renderData.currencyValuePerToken.symbol}
142+
</Text>
143+
</GridItem>
144+
</>
145+
)}
146+
147+
{/*
148+
Todo: Add a Buy button somewhere in this section once the Dashboard is fully migrated to v5 (?)
149+
Kien already shipped a prebuilt component for the Marketplace Buy Button in SDK v5
150+
*/}
151+
</SimpleGrid>
152+
</Card>
153+
{data?.asset.metadata.properties ? (
154+
<Card as={Flex} flexDir="column" gap={4}>
155+
<Heading size="label.md">Attributes</Heading>
156+
<CodeBlock
157+
code={
158+
JSON.stringify(data.asset.metadata.properties, null, 2) || ""
159+
}
160+
language="json"
161+
canCopy={false}
162+
wrap={false}
163+
overflow="auto"
164+
/>
165+
</Card>
166+
) : null}
219167
</Flex>
220168

221-
<Tabs isLazy lazyBehavior="keepMounted" colorScheme="gray">
222-
<TabList
223-
px={0}
224-
borderBottomColor="borderColor"
225-
borderBottomWidth="1px"
226-
overflowX={{ base: "auto", md: "inherit" }}
227-
>
228-
{tabs.map((tab) => (
229-
<Tab key={tab.title} gap={2} isDisabled={tab.isDisabled}>
230-
{tab.title}
231-
</Tab>
232-
))}
233-
</TabList>
234-
<TabPanels px={0} py={2}>
235-
{tabs.map((tab) => {
236-
return (
237-
<TabPanel key={tab.title} px={0}>
238-
{tab.children()}
239-
</TabPanel>
240-
);
241-
})}
242-
</TabPanels>
243-
</Tabs>
169+
{isOwner &&
170+
(renderData.type === "direct-listing" ? (
171+
<CancelDirectListing
172+
contract={contract}
173+
listingId={renderData.id.toString()}
174+
/>
175+
) : (
176+
<CancelEnglishAuction
177+
contract={contract}
178+
auctionId={renderData.id.toString()}
179+
/>
180+
))}
244181
</SheetContent>
245182
</Sheet>
246183
);

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,6 @@ interface MarketplaceTableProps {
100100
start: number;
101101
}>
102102
>;
103-
type: "direct-listings" | "english-auctions";
104103
}
105104

106105
const DEFAULT_QUERY_STATE = { count: 50, start: 0 };
@@ -112,7 +111,6 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
112111
totalCountQuery,
113112
queryParams,
114113
setQueryParams,
115-
type,
116114
}) => {
117115
const [listingsToShow, setListingsToShow_] = useState<"all" | "valid">("all");
118116

@@ -215,7 +213,6 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
215213
data={tokenRow}
216214
isOpen={!!tokenRow}
217215
onClose={() => setTokenRow(null)}
218-
type={type}
219216
/>
220217
<Table {...getTableProps()}>
221218
<Thead>

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/components/table.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ export const DirectListingsTable: React.FC<DirectListingsTableProps> = ({
4040
totalCountQuery={totalCountQuery}
4141
queryParams={queryParams}
4242
setQueryParams={setQueryParams}
43-
type="direct-listings"
4443
/>
4544
);
4645
};

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/components/table.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ export const EnglishAuctionsTable: React.FC<EnglishAuctionsTableProps> = ({
4040
totalCountQuery={totalCountQuery}
4141
queryParams={queryParams}
4242
setQueryParams={setQueryParams}
43-
type="english-auctions"
4443
/>
4544
);
4645
};

0 commit comments

Comments
 (0)