Document Distro Token - Ancient King Blog -->

    Social Items

/ Without Label / Document Distro Token



APPLICATION DOCUMENTATION DISTROTOKEN - NFT MINTER Developer : Kirmaan Aboobaker Email : me@sixthace.com DOCUMENTATION 1.) INITIALISE PROJECT Navigate to the project directory (that has just been downloaded.) This project uses many different node packages so we need to install these. Run the command : npm I The required node modules will be installed , wait for it to complete. 2.) RUN THE PROJECT Okay great! Now before we move on to customising the minter , let us make sure the project works. Type the following command to startup the app : npm start Then press enter and a tab in your default web browser will pop open with the React web app running. And your command line will look like the following : Before we move on to customising the app , let us also just make sure it works with MetaMask. Our web3 wallet. MetaMask will open up. Prompting you to enter your password like such : Let Us Click On The “Connect Wallet” button. After you enter your MetaMask password , you should now be connected to the NFT Minter! Perfect! The app is working exactly as we wanted it to. Now let us quickly attempt to Mint an NFT using the form fields provided. You can enter random data or follow the instructions. Also switch to a test-net as not to accidentally mint. After you click “Mint NFT” , MetaMask will open up to sign the transaction like such : Make sure you are on a test-network so you don’t get charged! You can then click “Confirm” You will then be returned to the web app with the link to the transaction. (In this case I used a test-net account with a livenet contract so this transaction will not exist) Once you receive the transaction , you are then able to add the NFT to your wallet. Go to the URL provided and you should see something like this : Download the MetaMask mobile app and you will use the following details to add 3.) CUSTOMISING THE WEB APP Now it's time for the final and main steps. Customising the app for your needs. They are many ways of hosting our metadata, possibly directly on the ethereum network but that would be too expensive. The solution I found was to use IPFS , a decentralised peer to peer network for storing and sharing data. A nice free IPFS hosting option is Piñata. Head over to https:// app.pinata.cloud/register to get started. After signing up and confirming your account head over to https:// app.pinata.cloud/keys Click the "New Key" button at the top, set the Admin widget as enabled, and name your key. You'll then be shown a popup with your API info. Make sure to put this somewhere safe. Time to configure our project with our key. So we can use the Piñata IPFS system. Open up the project folder in your favourite text / code editor and navigate to the .env file in the root directory. Replace the REACT_APP_PINATA_KEY , the REACT_APP_PINATA_SECRET and the REACT_APP_BEARER_KEY with the ones you were provided when creating your key. We are also going to need an Alchemy API key and the Alchemy Web3 API to connect to the Ethereum blockchain. Head Over To https://auth.alchemyapi.io/ signup Once you complete the signup process and login for the first time you will be asked to create an app. Once you finish all the steps , you will be brought to a dashboard. Click the “view details” button for your app. Then click “View Key” and copy the HTTP field. Head back to your .env file and replace the REACT_APP_ALCHEMY_KEY with the newly copied HTTP url like such: 4.) CUSTOMISING THE METADATA Navigate to the interact.js file in the src/ utils folder. On line 51 you will find the beginning of the metadata Lets say we want to add another property to our metadata for our NFT. I want to add “gender” to the metadata. To do this head to line 41 in interact.js , where all our variables for metadata are declared. Now let us add in our new variable “gender”. The mintNFT function should now look like this : Now lets navigate to the metadata object in interact.js . This begins on line 51. Here we are going to add another property to the object. The next step is to open up the minter.js file in the src directory. Now lets head over to the state variables in order to add our new gender variable. The state variables begin on line 55. Lets add our new ‘gender’ variable. We can do this like such : The final step is the add in the ‘gender’ variable to the ‘onMintPressed’ function. This function begins on line 82 Modify it to include our new ‘gender’ variable. Im just going to modify the form to include a new form field for our gender field to show you. Time to test it out! Fill in the form fields and press ‘Mint NFT’. It will then bring up MetaMask and ask you to sign the After you complete it , you should receive the link on the same page like such : Now for this tutorial I switched to a Ropsten test contract so that I don’t incur unnecessary charges. So we need to add “ropsten” to the URL like such https://ropsten.etherscan.io/tx/ 0x0b5a4e274c71a9a57a89244c3a87fb70e1f02443528 e7f8bb580649ab654f163 DON’T WORRY ABOUT THIS , YOU WON’T NEED TO DO THIS. Here is the transaction : And if you visit the Piñata link , you will see the metadata attached to the NFT. 5.) ADDING THE NFT TO YOUR WALLET Pop open your MetaMask mobile app and tap on “NFTs” Tap On “+ ADD NFTs” And fill in the details from the etherscan transaction URL. These are the two fields: Then press “ADD” and within a few seconds you should see your NFT appear in your wallet. Congratulations , you have just built a NFT Minter! Here is the NFT we just minted using our React NFT Minter. Stored In our mobile MetaMask wallet. 6.) CUSTOMISING THE UPLOAD ARTWORK PAGE In order to setup the upload artwork page with your Piñata account. You navigate to UploadArtwork.js in the src folder. Now modify the ‘pinata_api_key’ on line 113 with your pinata_api_key. Then do the same for the ‘pinata_secret_api_key’ on line 114 Like This : Now if we head to the Upload Artwork page , and choose a piece of artwork to upload. It should successfully upload to YOUR Piñata. 7.) CUSTOMISING THE UPLOAD AUDIO PAGE The final change that needs to be made is regarding the Firebase cloud storage of files. Navigate to the firebase.js file , this can be found in the firebase folder which can be found in the src folder in the root directory. Replace the firebaseConfig with the firebase configuration provided when creating an app in the firebase dashboard. I will provide an example First Create A Project In The Firebase Dashboard Make sure to enable Google Analytics Finally once you have done all that click create project. After the project is created it will take you to the project dashboard. Now we need to add an app to the project. Click on the add web app button . Give the app a nickname , this can be whatever you want. I used ‘my web app’ Click ‘Register app’ You will then be provided with the firebase configuration that we need in order to replace the provided configuration. Copy the highlighted part of the provided Firebase SDK. Then replace the provided firebaseConfig With the one we just received from the Firebase dashboard Next head over to Firebase and go to the dashboard for your app. Then click on storage in the left side-bar , then click on ‘Get Started’ Press Next Then Done Head over to rules in your app dashboard , in the storage tab in Firebase. Then click on edit. Then make sure your rules look exactly like this , then click publish. YOU ARE NOW COMPLETE! EVERYTHING SHOULD WORK PERFECTLY.

Document Distro Token




APPLICATION DOCUMENTATION DISTROTOKEN - NFT MINTER Developer : Kirmaan Aboobaker Email : me@sixthace.com DOCUMENTATION 1.) INITIALISE PROJECT Navigate to the project directory (that has just been downloaded.) This project uses many different node packages so we need to install these. Run the command : npm I The required node modules will be installed , wait for it to complete. 2.) RUN THE PROJECT Okay great! Now before we move on to customising the minter , let us make sure the project works. Type the following command to startup the app : npm start Then press enter and a tab in your default web browser will pop open with the React web app running. And your command line will look like the following : Before we move on to customising the app , let us also just make sure it works with MetaMask. Our web3 wallet. MetaMask will open up. Prompting you to enter your password like such : Let Us Click On The “Connect Wallet” button. After you enter your MetaMask password , you should now be connected to the NFT Minter! Perfect! The app is working exactly as we wanted it to. Now let us quickly attempt to Mint an NFT using the form fields provided. You can enter random data or follow the instructions. Also switch to a test-net as not to accidentally mint. After you click “Mint NFT” , MetaMask will open up to sign the transaction like such : Make sure you are on a test-network so you don’t get charged! You can then click “Confirm” You will then be returned to the web app with the link to the transaction. (In this case I used a test-net account with a livenet contract so this transaction will not exist) Once you receive the transaction , you are then able to add the NFT to your wallet. Go to the URL provided and you should see something like this : Download the MetaMask mobile app and you will use the following details to add 3.) CUSTOMISING THE WEB APP Now it's time for the final and main steps. Customising the app for your needs. They are many ways of hosting our metadata, possibly directly on the ethereum network but that would be too expensive. The solution I found was to use IPFS , a decentralised peer to peer network for storing and sharing data. A nice free IPFS hosting option is Piñata. Head over to https:// app.pinata.cloud/register to get started. After signing up and confirming your account head over to https:// app.pinata.cloud/keys Click the "New Key" button at the top, set the Admin widget as enabled, and name your key. You'll then be shown a popup with your API info. Make sure to put this somewhere safe. Time to configure our project with our key. So we can use the Piñata IPFS system. Open up the project folder in your favourite text / code editor and navigate to the .env file in the root directory. Replace the REACT_APP_PINATA_KEY , the REACT_APP_PINATA_SECRET and the REACT_APP_BEARER_KEY with the ones you were provided when creating your key. We are also going to need an Alchemy API key and the Alchemy Web3 API to connect to the Ethereum blockchain. Head Over To https://auth.alchemyapi.io/ signup Once you complete the signup process and login for the first time you will be asked to create an app. Once you finish all the steps , you will be brought to a dashboard. Click the “view details” button for your app. Then click “View Key” and copy the HTTP field. Head back to your .env file and replace the REACT_APP_ALCHEMY_KEY with the newly copied HTTP url like such: 4.) CUSTOMISING THE METADATA Navigate to the interact.js file in the src/ utils folder. On line 51 you will find the beginning of the metadata Lets say we want to add another property to our metadata for our NFT. I want to add “gender” to the metadata. To do this head to line 41 in interact.js , where all our variables for metadata are declared. Now let us add in our new variable “gender”. The mintNFT function should now look like this : Now lets navigate to the metadata object in interact.js . This begins on line 51. Here we are going to add another property to the object. The next step is to open up the minter.js file in the src directory. Now lets head over to the state variables in order to add our new gender variable. The state variables begin on line 55. Lets add our new ‘gender’ variable. We can do this like such : The final step is the add in the ‘gender’ variable to the ‘onMintPressed’ function. This function begins on line 82 Modify it to include our new ‘gender’ variable. Im just going to modify the form to include a new form field for our gender field to show you. Time to test it out! Fill in the form fields and press ‘Mint NFT’. It will then bring up MetaMask and ask you to sign the After you complete it , you should receive the link on the same page like such : Now for this tutorial I switched to a Ropsten test contract so that I don’t incur unnecessary charges. So we need to add “ropsten” to the URL like such https://ropsten.etherscan.io/tx/ 0x0b5a4e274c71a9a57a89244c3a87fb70e1f02443528 e7f8bb580649ab654f163 DON’T WORRY ABOUT THIS , YOU WON’T NEED TO DO THIS. Here is the transaction : And if you visit the Piñata link , you will see the metadata attached to the NFT. 5.) ADDING THE NFT TO YOUR WALLET Pop open your MetaMask mobile app and tap on “NFTs” Tap On “+ ADD NFTs” And fill in the details from the etherscan transaction URL. These are the two fields: Then press “ADD” and within a few seconds you should see your NFT appear in your wallet. Congratulations , you have just built a NFT Minter! Here is the NFT we just minted using our React NFT Minter. Stored In our mobile MetaMask wallet. 6.) CUSTOMISING THE UPLOAD ARTWORK PAGE In order to setup the upload artwork page with your Piñata account. You navigate to UploadArtwork.js in the src folder. Now modify the ‘pinata_api_key’ on line 113 with your pinata_api_key. Then do the same for the ‘pinata_secret_api_key’ on line 114 Like This : Now if we head to the Upload Artwork page , and choose a piece of artwork to upload. It should successfully upload to YOUR Piñata. 7.) CUSTOMISING THE UPLOAD AUDIO PAGE The final change that needs to be made is regarding the Firebase cloud storage of files. Navigate to the firebase.js file , this can be found in the firebase folder which can be found in the src folder in the root directory. Replace the firebaseConfig with the firebase configuration provided when creating an app in the firebase dashboard. I will provide an example First Create A Project In The Firebase Dashboard Make sure to enable Google Analytics Finally once you have done all that click create project. After the project is created it will take you to the project dashboard. Now we need to add an app to the project. Click on the add web app button . Give the app a nickname , this can be whatever you want. I used ‘my web app’ Click ‘Register app’ You will then be provided with the firebase configuration that we need in order to replace the provided configuration. Copy the highlighted part of the provided Firebase SDK. Then replace the provided firebaseConfig With the one we just received from the Firebase dashboard Next head over to Firebase and go to the dashboard for your app. Then click on storage in the left side-bar , then click on ‘Get Started’ Press Next Then Done Head over to rules in your app dashboard , in the storage tab in Firebase. Then click on edit. Then make sure your rules look exactly like this , then click publish. YOU ARE NOW COMPLETE! EVERYTHING SHOULD WORK PERFECTLY.
Load Comments
Subscribe to: Post Comments (Atom)

Subscribe Our Newsletter