1
- import { Box , Flex } from "@chakra-ui/react" ;
2
1
import { useRouter } from "next/router" ;
3
2
import type { ThirdwebContract } from "thirdweb" ;
4
3
import * as ERC721Ext from "thirdweb/extensions/erc721" ;
5
4
import * as ERC1155Ext from "thirdweb/extensions/erc1155" ;
6
- import { Card , Heading , LinkButton , Text } from "tw-components" ;
7
5
import { useContractFunctionSelectors } from "../../hooks/useContractFunctionSelectors" ;
8
6
import { BatchLazyMintButton } from "./components/batch-lazy-mint-button" ;
9
7
import { NFTClaimButton } from "./components/claim-button" ;
@@ -64,29 +62,21 @@ export const ContractNFTPage: React.FC<NftOverviewPageProps> = ({
64
62
65
63
const canRenderNFTTable = ( ( ) => {
66
64
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 ) ;
72
66
}
73
67
// 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 ) ;
79
69
} ) ( ) ;
80
70
81
71
const isRevealable = ERC721Ext . isGetBaseURICountSupported (
82
72
functionSelectorQuery . data ,
83
73
) ;
84
74
85
75
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">
90
80
{ isRevealable && < NFTRevealButton contract = { contract } /> }
91
81
{ isERC721ClaimToSupported && (
92
82
/**
@@ -111,38 +101,12 @@ export const ContractNFTPage: React.FC<NftOverviewPageProps> = ({
111
101
contract = { contract }
112
102
/>
113
103
) }
114
- </ Flex >
115
- </ Flex >
104
+ </ div >
105
+ </ div >
116
106
{ 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 } />
145
109
) }
146
- </ Flex >
110
+ </ div >
147
111
) ;
148
112
} ;
0 commit comments