Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius aliquam laudantium explicabo pariatur iste dolorem animi vitae error totam. At sapiente aliquam accusamus facere veritatis.
As a Webstudio builder follow this guide to configure this template for your users. Once you have succesfully configured, deployed and tested your project you can delete this guide as part of your pages and any link in the project to this setup page.
Thirdweb is a platform that provides developer with low code tools for building Web3 projects. They also offer verified, no-code smart contracts you can launch for NFTs, Tokens, Staking, Marketplaces. For this project we will be using one of their smart contracts. Please follow the link below and deploy each of these contracts over the same network. As good practice you can assemble the project on a testnet first and then re-configure the contract address to production when ready.
ERC721A standard NFT that will be staked into the platform.
Learn MoreNavigate to thirdweb and launch your NFT contract. You can use any ERC721A compatible contract with this template. For our demo purposes we are using Polygon Mainnet and DropERC721 the contract can be viewed below.
Contract 0xe720051b841566a5e2d5601fd1668e0d581e2eb6Create, configure and deploy DropERC721, OpenEditionERC721 (or any other 721A compatible) NFT contract to the selected network.
NavigateBefore your NFTs can be minted you must specify under which conditions can be minted, for our project we create a new "public" claim phase but any phase will work out.
Make sure you distribute your NFTs. If you wish to use Webstudio you will have to create a new project for minting or adding minting functionalities on this one (this is not covered in this tutorial). You may be required to upload batches of NFT before they may be claimed. For this navigate in your ThirdWeb Dashboard for the NFT Contract to the "Extensions > NFTs" section in the left hand menu and follow the instruction to upload batches of NFTs that can be minted.
On your Webstudio project, click on edit the Web3 wallet button on the top right corner and configure it. You can find more information in the Webstudio Docs Page.
Navigate to https://cloud.walletconnect.com/app and create your own Application, then configure in Webstudio with the obtained projectId.
Webstudio Docs PageSelect the network where the previous 3 contracts are based on.
Select between light and dark mode and text and logo displayed during login and signature of transactions.
Configure the action form to enable users claiming NFTs.
Navigate to the button "Mint" and click on the "up arrow" in the blue menu bar until you navigate to the form (it will contain the button and the gray input squares) then click edit to open edition modal. In the properties tab replace the contract address for the one you configured in the previous step 1.
While on the form, click edit to open edition modal. Navigate to the third tab "Navigator" and make visible all "Input" fields inside the form (you may need to manually navigate across all hierarchy to find it. Use the image to the right as reference. This will make visible all attributes we need to configure for the minting function.
You may need to configure each individual input separately if you want to change the default call parameters (if you want to modify the number of max minted items, original pricing etc). Otherwise you may leave as it is and continue with next steps.
Following the method on second item of this step navigate and make invisible all attributes of the form since they are configured with static values and dynamic address, there is no need for the user to input anything manually nor the need to have them visible.
You are ready to go!
