Skip to content

Commit 297876c

Browse files
authored
[Update] Refactor NFT page UI and simplify rendering conditions (#4414)
1 parent 60c092f commit 297876c

File tree

1 file changed

+11
-47
lines changed
  • apps/dashboard/src/contract-ui/tabs/nfts

1 file changed

+11
-47
lines changed

apps/dashboard/src/contract-ui/tabs/nfts/page.tsx

Lines changed: 11 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import { Box, Flex } from "@chakra-ui/react";
21
import { useRouter } from "next/router";
32
import type { ThirdwebContract } from "thirdweb";
43
import * as ERC721Ext from "thirdweb/extensions/erc721";
54
import * as ERC1155Ext from "thirdweb/extensions/erc1155";
6-
import { Card, Heading, LinkButton, Text } from "tw-components";
75
import { useContractFunctionSelectors } from "../../hooks/useContractFunctionSelectors";
86
import { BatchLazyMintButton } from "./components/batch-lazy-mint-button";
97
import { NFTClaimButton } from "./components/claim-button";
@@ -64,29 +62,21 @@ export const ContractNFTPage: React.FC<NftOverviewPageProps> = ({
6462

6563
const canRenderNFTTable = (() => {
6664
if (isErc721) {
67-
return (
68-
ERC721Ext.isTotalSupplySupported(functionSelectorQuery.data) &&
69-
ERC721Ext.isNextTokenIdToMintSupported(functionSelectorQuery.data) &&
70-
ERC721Ext.isGetNFTsSupported(functionSelectorQuery.data)
71-
);
65+
return ERC721Ext.isGetNFTsSupported(functionSelectorQuery.data);
7266
}
7367
// otherwise erc1155
74-
return (
75-
ERC1155Ext.isTotalSupplySupported(functionSelectorQuery.data) &&
76-
ERC1155Ext.isNextTokenIdToMintSupported(functionSelectorQuery.data) &&
77-
ERC1155Ext.isGetNFTsSupported(functionSelectorQuery.data)
78-
);
68+
return ERC1155Ext.isGetNFTsSupported(functionSelectorQuery.data);
7969
})();
8070

8171
const isRevealable = ERC721Ext.isGetBaseURICountSupported(
8272
functionSelectorQuery.data,
8373
);
8474

8575
return (
86-
<Flex direction="column" gap={6}>
87-
<Flex direction="row" justify="space-between" align="center">
88-
<Heading size="title.sm">Contract NFTs</Heading>
89-
<Flex gap={2} flexDir={{ base: "column", md: "row" }}>
76+
<div className="flex flex-col gap-6">
77+
<div className="flex flex-row justify-between items-center">
78+
<h2 className="font-bold text-xl">Contract NFTs</h2>
79+
<div className="flex gap-2 flex-col md:flex-row">
9080
{isRevealable && <NFTRevealButton contract={contract} />}
9181
{isERC721ClaimToSupported && (
9282
/**
@@ -111,38 +101,12 @@ export const ContractNFTPage: React.FC<NftOverviewPageProps> = ({
111101
contract={contract}
112102
/>
113103
)}
114-
</Flex>
115-
</Flex>
104+
</div>
105+
</div>
116106
{canShowSupplyCards && <SupplyCards contract={contract} />}
117-
{canRenderNFTTable ? (
118-
<Card as={Flex} flexDir="column" gap={3}>
119-
{/* TODO extract this out into it's own component and make it better */}
120-
<Heading size="subtitle.md">
121-
No Supply/Enumerable extension enabled
122-
</Heading>
123-
<Text>
124-
To be able to see the list of the NFTs minted on your contract, you
125-
will have to extend the{" "}
126-
{isErc721 ? "ERC721Supply" : "ERC1155Enumerable"} extension in your
127-
contract.
128-
</Text>
129-
<Box>
130-
<LinkButton
131-
isExternal
132-
href="https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721Supply"
133-
colorScheme="purple"
134-
>
135-
Learn more
136-
</LinkButton>
137-
</Box>
138-
</Card>
139-
) : (
140-
<>
141-
{contract && (
142-
<NFTGetAllTable contract={contract} isErc721={isErc721} />
143-
)}
144-
</>
107+
{canRenderNFTTable && (
108+
<NFTGetAllTable contract={contract} isErc721={isErc721} />
145109
)}
146-
</Flex>
110+
</div>
147111
);
148112
};

0 commit comments

Comments
 (0)