![]() ![]() SalesData?.sales?.nodes?.length & salesData?.sales?.nodes?. () => processImgURI(nftData?.token?.token.image?.url as string) as string, src/main.tsx import ) Ĭonst collectionData = await getCollection(collectionAddress) Ĭonst mintData = await getMintData(collectionAddress, tokenId) Ĭonst salesData = await getSalesData(collectionAddress, tokenId) Ĭonst nftData = await getNftData(collectionAddress, tokenId) The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and/or dividers between each child. The 1st VStack (green section) already fills the remaining space, so your problem is how the 2nd VStack fills the. To ensure we can take advantage of the different pre-built Chakra UI components and styles in our app, we need to initialize it at the root of our app.įile. Not quite sure If I get it right or wrong. If you browse to in your browser, you should see something like this: We can now run yarn dev and see what our app looks like in the browser. ![]() We will be styling our page with Chakra UI's help. Yarn add list of dependencies mentioned above includes the ZDK and Chakra UI. Run the following command in your terminal to install them: # /zora-nft-explorer Chakra UI is a web developer’s best friend. Let's add the VStack in the import statement and add it to the flex component. It's very similar to the flex component, but it also has support of spacing that we can control. 4:09 As the name suggests, the VStack component is a vertical stack that stacks its children vertically. We need to install some additional dependencies after the pre-included ones. Stack is a layout utility component that makes it easy to stack elements together and apply a space between them. To achieve this, we will use the VStack component from Chakra UI. We will now cd into our project's directory and install the dependencies by running yarn. That Formik instance contains pretty much everything we need to connect our form's UI elements and submit handler. ![]() Run the following command in your terminal and select the react-ts template when prompted. The way we start building forms with Formik is by using its useFormik hook that returns us the formik instance. To get started, we will use Vite to bootstrap a React project. You don't need anything else than an installation of Node.js on your machine. It will be a React app that shows you all sorts of data about any given NFT, including comprehensive data around sales, mints, and current owners. In this article, we will use the ZDK and build a historical NFT data explorer. Create an empty Chakra App To get started, we will create an empty Chakra UI app using create-react-app, which is a program used to set up a React development environment and generate a starting point from templates. ![]() It is free-to-use with a very generous free tier. The ZDK makes it easier for developers to query the Zora API for high-quality historical data related to NFTs. VStack: used to stack elements in the vertical direction HStack: used to stack elements in the horizontal direction Stack: used to stack elements in the vertical or horizontal direction Usage Stack uses a modified version of the CSS lobotomized owl selector to add spacing between its children. The delete functionality can also be found in the final version of App.js file.Zora - an NFT marketplace protocol - recently released a new SDK called the ZDK - Zora Development Kit. To stack elements in horizontal or vertical direction only. For this, go to the root of your app, i.e., the index.js file, and write the following code: import App from './App' VStack: Used to add spacing between elements in vertical direction only, and centers them. Now, we will do the Chakra set up in our app. Npm i You can refer to the yarn command for installation from the docs if you are using yarn instead of node
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |