From 7d2a699161f1d979c02951b132ed24abdac4f0e6 Mon Sep 17 00:00:00 2001 From: omahs <73983677+omahs@users.noreply.github.com> Date: Tue, 21 Nov 2023 11:13:58 +0100 Subject: [PATCH 1/7] fix typos --- docs/04-guides/solana-nft-burner.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/04-guides/solana-nft-burner.md b/docs/04-guides/solana-nft-burner.md index 4205bca1..92756d1f 100644 --- a/docs/04-guides/solana-nft-burner.md +++ b/docs/04-guides/solana-nft-burner.md @@ -51,7 +51,7 @@ yarn install - Rename `.env.local.example` file to `.env.local` and add the required environment secrets. ```shell .env.local -# devent is used for chain Id as we will be testing the app on devnet chain +# devnet is used for chain Id as we will be testing the app on devnet chain APP_CHAIN_ID=devnet APP_DOMAIN=ethereum.boilerplate @@ -98,7 +98,7 @@ Once the wallet connection is successful, visit the`/nftBurner` page, and we can The first step of the app is to connect the Metaplex SDK with the wallet and the devnet cluster. -> Only partical code is shown here to keep it clean. Visit `src/components/templates/nftBurner` to view the entire code. +> Only partial code is shown here to keep it clean. Visit `src/components/templates/nftBurner` to view the entire code. ```typescript NFTMinter.tsx /* @@ -197,4 +197,4 @@ Now you know how to create your very own NFT burner dapp to delete spam or unwan ## Support -If you have any trouble following the tutorial, feel free to reach out to our community engineers in our [Discord](https://moralis.io/discord) or [Forum](https://forum.moralis.io) to get 24/7 developer support. \ No newline at end of file +If you have any trouble following the tutorial, feel free to reach out to our community engineers in our [Discord](https://moralis.io/discord) or [Forum](https://forum.moralis.io) to get 24/7 developer support. From 76efcaa2533d4548ee7040fc7cff065cbf20baa7 Mon Sep 17 00:00:00 2001 From: omahs <73983677+omahs@users.noreply.github.com> Date: Tue, 21 Nov 2023 11:16:31 +0100 Subject: [PATCH 2/7] fix typos --- docs/configs/guides/guides.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/configs/guides/guides.json b/docs/configs/guides/guides.json index 7a88f613..aa9263fa 100644 --- a/docs/configs/guides/guides.json +++ b/docs/configs/guides/guides.json @@ -124,7 +124,7 @@ "excerpt": "" }, { - "content": "## Introduction\n\nThis tutorial teaches you how to create your very own NFT burner dapp in NextJS using Metaplex JS SDK, and the Moralis API.\n\nOnce complete, you can use this dapp to burn spam or unwanted NFTs from your wallet in just a few clicks, and burning Solana NFTs also returns back Solana to your wallet.\n\n#### Why Does Burning Solana NFTs Give You Solana Tokens Back?\n\nSolana blockchain has this concept called \"Rent\" that should be paid every time we store data in the Solana account. When we [mint new NFTs](/guides/solana-nft-minter) we pay the rent through a transaction fee. \n\nWhen we burn NFTs, the Solana program returns back the remaining rent in the NFT account to the current NFT owner. So, even by burning spam or unwanted NFTs, we can recover some Solana tokens from NFT accounts. \n\nIn this project, we will use [Metaplex JavaScript SDK](https://github.com/metaplex-foundation/js) to burn and the [Moralis API](/web3-data-api/solana/how-to-get-native-solana-balance-by-wallet) to view the NFTs.\n\nThis is what the final application looks like. You can click on any NFTs in your wallet that you want to remove and click on the burn button to burn the NFT.\n\n![Final App UI](/img/content/c37a205-image.webp)\n\nInstead of going through the entire code, we will focus on the important sections of code that power the application. \n\nYou can find the repository with the final code here: [Solana-NFT-Burner](https://github.com/JohnVersus/solana-nft-burner).\n\n## Step1: Project Setup\n\nFollow these steps to run the project in your local environment.\n\n- Clone the project from [GitHub](https://github.com/JohnVersus/solana-nft-burner) using the`git clone` command and `cd` into the project\n\n```shell\ngit clone https://github.com/JohnVersus/solana-nft-burner.git\n\ncd solana-nft-burner\n```\n\n\n\n- Install the dependencies using the`yarn` or `npm` package manager.\n\n```shell\nyarn install\n```\n\n\n\n- Rename `.env.local.example` file to `.env.local` and add the required environment secrets.\n\n```shell .env.local\n# devent is used for chain Id as we will be testing the app on devnet chain\nAPP_CHAIN_ID=devnet\nAPP_DOMAIN=ethereum.boilerplate \n\n# Get your KEY https://admin.moralis.io/web3api\nMORALIS_API_KEY= xxx\n\n# Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/64\nNEXTAUTH_SECRET= xxx\n\n# Replace for production\nNEXTAUTH_URL=http://localhost:3000\n\n# Wallet private only if you want to use the NFT Minter page.\nPRIVATE_KEY = xxx\n```\n\n\n\n- Start the app in localhost port 3000.\n\n```shell\nyarn run dev\n```\n\n\n\nOnce the command has been run successfully, you should be able to view the app in localhost port 3000, or click [here](http://localhost:3000) to open the page directly.\n\n## Step2: Burning the NFT\n\nIn the app, you'll find multiple tabs, but for our code, we only need to access the`/nftBurner` page to burn the NFTs of the wallet. If you want to mint a new NFT for testing you can use the`/nftMinter`page to mint NFTs.\n\n![Nav Bar](/img/content/8fd2c8f-image.webp)\n\nTo use the app, we must first connect to the Solana wallet. This can be done by clicking the \"Select Wallet\" button on the top right. You can then connect to the wallet of your choice. \n\n![Select Wallet Button](/img/content/5e9b822-image.webp)\n\nThe code related to authentication can be found in the `src/components/modules/ConnectButton` folder, although we won't be looking at the authentication code in this tutorial. \n\nIf you want to know how authentication works, you can take a look at this [video](https://www.youtube.com/watch?v=0fuevxebv_E). You can also check out this [tutorial](/web3-data-api/solana/how-to-get-native-solana-balance-by-wallet) to learn how to get all NFTs linked to a Solana wallet. \n\nOnce the wallet connection is successful, visit the`/nftBurner` page, and we can view the NFTs the wallet is holding. \n\nThe first step of the app is to connect the Metaplex SDK with the wallet and the devnet cluster.\n\n> Only partical code is shown here to keep it clean. Visit `src/components/templates/nftBurner` to view the entire code.\n\n```typescript NFTMinter.tsx\n/* \n* We use the connected wallet and the cluster connection\n* with metaplex for creating and processing the transactions.\n*/\nconst wallet = useWallet();\nconst connection = new Connection(clusterApiUrl('devnet'));\nconst metaplex = new Metaplex(connection);\nmetaplex.use(walletAdapterIdentity(wallet));\n```\n\n\n\nThe next step is to handle the NFTs selected by the user in the UI and then burn the NFTs. \n\nHere is the code responsible for selecting the NFTs in UI.\n\n```typescript NFTBurner.tsx\n// Refer full code in `src/components/templates/nftBurner/NFTBurner.tsx`\n\n//The NFTs selected in the UI are stored in state variable.\nconst [nftsToDelete, setNftsToDelete] = useState>([]);\nconst handleCheckbox = (e: ChangeEvent) => {\n const { value, checked } = e.target\n if (!nftsToDelete?.includes(value) && checked) {\n setNftsToDelete((existing: Array) => [...existing, value]);\n } else {\n const temp = nftsToDelete;\n if (temp.includes(value)) {\n temp.splice(temp.indexOf(value), 1);\n setNftsToDelete(() => [...temp]);\n }\n }\n};\n\n// Component responsible for selecting NFTs in the UI\n\n\n```\n\n\n\nHere is the code responsible for burning the selected NFTs.\n\n```typescript NFTBurner.tsx\n// Refer full code can be found in `src/components/templates/nftBurner/NFTBurner.tsx`\n\n// The data stored in nftsToDelete state variable is used to\n// delete the selected NFTs\n\nconst burnNFT = async () => {\n // ...\n const totalTxs = await Promise.all(\n nftsToDelete.map(async (nft) => {\n const tx = await metaplex\n .nfts()\n .delete({\n mintAddress: new PublicKey(nft),\n })\n .run();\n return tx;\n }),\n );\n setNftsToDelete(() => []);\n //...\n};\n```\n\n\n\nAnd there we have it! That's all the code we need to burn and delete NFTs from your wallet. \n\n## Step3: Testing\n\nThe dapp can be tested by visiting the `/NFTBurner` page. \n\nFirst, select the NFTs to delete in the UI.\n\n![NFT Selection](/img/content/9caeb78-image.webp)\n\nThen click on the \"Burn\" button to initiate the transaction and you will get a request from your wallet to sign the transaction. If you observe the gas fee in the transaction, you can see that it says `+0.0105 SOL`, which means that this transaction will return `+0.0105 SOL` back to your wallet.\n\n![Transaction View](/img/content/c9948e2-image.webp)\n\nOnce the transaction is successful, your NFT will be successfully deleted from the Solana blockchain and you will find `+0.0105 SOL` added to your wallet.\n\nCongratulations! 🥳 \n\nNow you know how to create your very own NFT burner dapp to delete spam or unwanted NFTs from the blockchain.\n\n## Support\n\nIf you have any trouble following the tutorial, feel free to reach out to our community engineers in our [Discord](https://moralis.io/discord) or [Forum](https://forum.moralis.io) to get 24/7 developer support.", + "content": "## Introduction\n\nThis tutorial teaches you how to create your very own NFT burner dapp in NextJS using Metaplex JS SDK, and the Moralis API.\n\nOnce complete, you can use this dapp to burn spam or unwanted NFTs from your wallet in just a few clicks, and burning Solana NFTs also returns back Solana to your wallet.\n\n#### Why Does Burning Solana NFTs Give You Solana Tokens Back?\n\nSolana blockchain has this concept called \"Rent\" that should be paid every time we store data in the Solana account. When we [mint new NFTs](/guides/solana-nft-minter) we pay the rent through a transaction fee. \n\nWhen we burn NFTs, the Solana program returns back the remaining rent in the NFT account to the current NFT owner. So, even by burning spam or unwanted NFTs, we can recover some Solana tokens from NFT accounts. \n\nIn this project, we will use [Metaplex JavaScript SDK](https://github.com/metaplex-foundation/js) to burn and the [Moralis API](/web3-data-api/solana/how-to-get-native-solana-balance-by-wallet) to view the NFTs.\n\nThis is what the final application looks like. You can click on any NFTs in your wallet that you want to remove and click on the burn button to burn the NFT.\n\n![Final App UI](/img/content/c37a205-image.webp)\n\nInstead of going through the entire code, we will focus on the important sections of code that power the application. \n\nYou can find the repository with the final code here: [Solana-NFT-Burner](https://github.com/JohnVersus/solana-nft-burner).\n\n## Step1: Project Setup\n\nFollow these steps to run the project in your local environment.\n\n- Clone the project from [GitHub](https://github.com/JohnVersus/solana-nft-burner) using the`git clone` command and `cd` into the project\n\n```shell\ngit clone https://github.com/JohnVersus/solana-nft-burner.git\n\ncd solana-nft-burner\n```\n\n\n\n- Install the dependencies using the`yarn` or `npm` package manager.\n\n```shell\nyarn install\n```\n\n\n\n- Rename `.env.local.example` file to `.env.local` and add the required environment secrets.\n\n```shell .env.local\n# devnet is used for chain Id as we will be testing the app on devnet chain\nAPP_CHAIN_ID=devnet\nAPP_DOMAIN=ethereum.boilerplate \n\n# Get your KEY https://admin.moralis.io/web3api\nMORALIS_API_KEY= xxx\n\n# Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/64\nNEXTAUTH_SECRET= xxx\n\n# Replace for production\nNEXTAUTH_URL=http://localhost:3000\n\n# Wallet private only if you want to use the NFT Minter page.\nPRIVATE_KEY = xxx\n```\n\n\n\n- Start the app in localhost port 3000.\n\n```shell\nyarn run dev\n```\n\n\n\nOnce the command has been run successfully, you should be able to view the app in localhost port 3000, or click [here](http://localhost:3000) to open the page directly.\n\n## Step2: Burning the NFT\n\nIn the app, you'll find multiple tabs, but for our code, we only need to access the`/nftBurner` page to burn the NFTs of the wallet. If you want to mint a new NFT for testing you can use the`/nftMinter`page to mint NFTs.\n\n![Nav Bar](/img/content/8fd2c8f-image.webp)\n\nTo use the app, we must first connect to the Solana wallet. This can be done by clicking the \"Select Wallet\" button on the top right. You can then connect to the wallet of your choice. \n\n![Select Wallet Button](/img/content/5e9b822-image.webp)\n\nThe code related to authentication can be found in the `src/components/modules/ConnectButton` folder, although we won't be looking at the authentication code in this tutorial. \n\nIf you want to know how authentication works, you can take a look at this [video](https://www.youtube.com/watch?v=0fuevxebv_E). You can also check out this [tutorial](/web3-data-api/solana/how-to-get-native-solana-balance-by-wallet) to learn how to get all NFTs linked to a Solana wallet. \n\nOnce the wallet connection is successful, visit the`/nftBurner` page, and we can view the NFTs the wallet is holding. \n\nThe first step of the app is to connect the Metaplex SDK with the wallet and the devnet cluster.\n\n> Only partical code is shown here to keep it clean. Visit `src/components/templates/nftBurner` to view the entire code.\n\n```typescript NFTMinter.tsx\n/* \n* We use the connected wallet and the cluster connection\n* with metaplex for creating and processing the transactions.\n*/\nconst wallet = useWallet();\nconst connection = new Connection(clusterApiUrl('devnet'));\nconst metaplex = new Metaplex(connection);\nmetaplex.use(walletAdapterIdentity(wallet));\n```\n\n\n\nThe next step is to handle the NFTs selected by the user in the UI and then burn the NFTs. \n\nHere is the code responsible for selecting the NFTs in UI.\n\n```typescript NFTBurner.tsx\n// Refer full code in `src/components/templates/nftBurner/NFTBurner.tsx`\n\n//The NFTs selected in the UI are stored in state variable.\nconst [nftsToDelete, setNftsToDelete] = useState>([]);\nconst handleCheckbox = (e: ChangeEvent) => {\n const { value, checked } = e.target\n if (!nftsToDelete?.includes(value) && checked) {\n setNftsToDelete((existing: Array) => [...existing, value]);\n } else {\n const temp = nftsToDelete;\n if (temp.includes(value)) {\n temp.splice(temp.indexOf(value), 1);\n setNftsToDelete(() => [...temp]);\n }\n }\n};\n\n// Component responsible for selecting NFTs in the UI\n\n\n```\n\n\n\nHere is the code responsible for burning the selected NFTs.\n\n```typescript NFTBurner.tsx\n// Refer full code can be found in `src/components/templates/nftBurner/NFTBurner.tsx`\n\n// The data stored in nftsToDelete state variable is used to\n// delete the selected NFTs\n\nconst burnNFT = async () => {\n // ...\n const totalTxs = await Promise.all(\n nftsToDelete.map(async (nft) => {\n const tx = await metaplex\n .nfts()\n .delete({\n mintAddress: new PublicKey(nft),\n })\n .run();\n return tx;\n }),\n );\n setNftsToDelete(() => []);\n //...\n};\n```\n\n\n\nAnd there we have it! That's all the code we need to burn and delete NFTs from your wallet. \n\n## Step3: Testing\n\nThe dapp can be tested by visiting the `/NFTBurner` page. \n\nFirst, select the NFTs to delete in the UI.\n\n![NFT Selection](/img/content/9caeb78-image.webp)\n\nThen click on the \"Burn\" button to initiate the transaction and you will get a request from your wallet to sign the transaction. If you observe the gas fee in the transaction, you can see that it says `+0.0105 SOL`, which means that this transaction will return `+0.0105 SOL` back to your wallet.\n\n![Transaction View](/img/content/c9948e2-image.webp)\n\nOnce the transaction is successful, your NFT will be successfully deleted from the Solana blockchain and you will find `+0.0105 SOL` added to your wallet.\n\nCongratulations! 🥳 \n\nNow you know how to create your very own NFT burner dapp to delete spam or unwanted NFTs from the blockchain.\n\n## Support\n\nIf you have any trouble following the tutorial, feel free to reach out to our community engineers in our [Discord](https://moralis.io/discord) or [Forum](https://forum.moralis.io) to get 24/7 developer support.", "data": { "title": "Solana NFT Burner", "slug": "/guides/solana-nft-burner", @@ -154,7 +154,7 @@ "excerpt": "" }, { - "content": "## Introduction\n\nThis tutorial teaches you how to create your very own NFT minter dapp in NextJS using Metaplex JavaScript SDK, and the Moralis API.\n\nOnce complete, you can use this dapp to mint NFTs on the Solana blockchain in a few clicks. \n\nWe will use [Metaplex JavaScript SDK](https://github.com/metaplex-foundation/js) and the [Moralis API](/web3-data-api/solana/how-to-get-native-solana-balance-by-wallet) to mint and view the NFTs.\n\nThis is what the final application looks like. \n\n![Solana NFT Minter Page View](/img/content/5863afd-image.webp)\n\nInstead of going through the entire code, we will focus on the important sections of code that power the application. \n\nYou can find the repository with the final code here: [Solana-NFT-Minter](https://github.com/JohnVersus/solana-nft-minter).\n\n## Step1: Project Setup\n\nFollow these steps to run the project in your local environment.\n\n- Clone the project from [GitHub](https://github.com/JohnVersus/solana-nft-minter) using the `git clone` command and `cd` into the project\n\n```shell\ngit clone https://github.com/JohnVersus/solana-nft-minter.git\n\ncd solana-nft-minter\n```\n\n\n\n- Install the dependencies using the `yarn` or `npm` package manager.\n\n```shell\nyarn install\n```\n\n\n\n- Rename `.env.local.example` file to `.env.local` and add the required environment secrets.\n\n```shell .env.local\n# devent is used for chain Id as we will be testing the app on devnet chain\nAPP_CHAIN_ID=devnet\nAPP_DOMAIN=ethereum.boilerplate \n\n# Get your KEY https://admin.moralis.io/web3api\nMORALIS_API_KEY= xxx\n\n# Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/64\nNEXTAUTH_SECRET= xxx\n\n# Replace for production\nNEXTAUTH_URL=http://localhost:3000\n\n# Wallet private used to upload NFT metadata to arweave storage\nPRIVATE_KEY = xxx\n```\n\n\n\n- Start the app in localhost port 3000.\n\n```shell\nyarn run dev\n```\n\n\n\nOnce the command has been run successfully, you should be able to view the app in localhost port 3000, or click [here](http://localhost:3000) to open the page directly.\n\n## Step2: Uploading and Minting NFT\n\nIn the app, you can find multiple tabs, but for our code, we only need to access the`/balances/nft` page to check the NFTs of the wallet, and the`/nftMinter`page to mint NFTs.\n\n![Nav Bar](/img/content/8d845e2-image.webp)\n\nTo use the app, we must first connect to the Solana wallet. This can be done by clicking the \"Select Wallet\" button on the top right. You can then connect to the wallet of your choice. \n\n![](/img/content/5e9b822-image.webp)\n\n\n\nOnce the wallet connection is successful, visit the`/balances/nft` page, and we can view the NFTs the wallet is holding. \n\nThe code related to authentication can be found in the `src/components/modules/ConnectButton` folder, although we won't be looking at the authentication code in this tutorial. \n\nIf you want to know how authentication works, you can take a look at this [video](https://www.youtube.com/watch?v=0fuevxebv_E). You can also check out this [tutorial](/web3-data-api/solana/how-to-get-native-solana-balance-by-wallet) to learn how to get all NFTs linked to a Solana wallet. \n\nThe first step of the app is to connect the Metaplex SDK with the wallet and the devnet cluster.\n\n> Only partial code is shown here to keep it clean. Visit `src/components/templates/nftMinter` to view the entire code.\n\n```typescript NFTMinter.tsx\n/* \n* We use the connected wallet and the cluster connection\n* with metaplex for creating and processing the transactions.\n*/\nconst wallet = useWallet();\nconst connection = new Connection(clusterApiUrl('devnet'));\nconst metaplex = new Metaplex(connection);\nmetaplex.use(walletAdapterIdentity(wallet));\n```\n\n\n\nThe next step is to process the inputs which are entered by the user and upload them to decentralized storage like Arweave, IPFS, etc. In this tutorial, we will use Arweave as our storage solution, as it works seamlessly with the Metaplex SDK. \n\nThis is the code to process the image and send the data to the backend for uploading.\n\n```typescript NFTMinter.tsx\n// full code in `src/components/templates/nftMinter/NFTMinter.tsx`\n\n//Function to process image to base64\nconst convertBase64 = (inputFile: any) => {\n return new Promise((resolve, reject) => {\n const fileReader = new FileReader();\n fileReader.readAsDataURL(inputFile);\n fileReader.onload = () => {\n resolve(fileReader.result);\n };\n fileReader.onerror = (error) => {\n reject(error);\n };\n });\n};\n\n// NFT metadata\nconst base64Data = await convertBase64(file[0]);\nconst options = {\n name,\n description,\n image: base64Data,\n symbol: \"M-NFT\",\n};\n\n// Sending the metdata to the backend NextJs API route for uploading to arweave\nconst uri = await apiPost(\"/upload\", options)\n .then((data: UploadMetadataOutput) => {\n console.log(data);\n return data.uri;\n })\n .catch((e) => {\n console.log(e);\n });\n\n```\n\n\n\nHere's the code to upload the metadata to Arweave.\n\n```typescript upload.ts\n// Complete code can be found in `pages/api/upload.ts`\n\nexport default async function handler(req: NextApiRequest, res: NextApiResponse) {\n// Creating a new connection the backend\nconst connection = new Connection(clusterApiUrl(\"devnet\"));\nconst metaplex = new Metaplex(connection);\n\n// Using private key in backend to sign the transaction for uploading the metadata.\nconst key = Uint8Array.from(base58.decode(process.env.PRIVATE_KEY));\nconst keypair = Keypair.fromSecretKey(key);\n\n// Using bundlr storage for connecting to arweave storage\nmetaplex.use(walletAdapterIdentity(keypair));\nmetaplex.use(\n bundlrStorage({\n address: \"https://devnet.bundlr.network\",\n providerUrl: \"https://api.devnet.solana.com\",\n timeout: 60000,\n identity: keypair,\n })\n);\n\n// Uploading metadata\nconst data = await metaplex\n .nfts()\n .uploadMetadata({ name, description, image, symbol })\n .run();\n \n// Send the response to frontend\nres.status(200).json(data);\n}\n\n```\n\n\n\nNow let's take a look at the last step - how to mint the NFT. \n\nHere is the code:\n\n```typescript NFTMinter.tsx\n// The data which we get from backend, after uploading, contains the URI of\n// the metdata that was uploaded. \n// We use it mint the NFT on blockchain.\n\nconst data = await metaplex\n .nfts()\n .create({\n uri,\n name,\n sellerFeeBasisPoints: 500, // represents the royality fee for the NFT\n })\n .run();\n\n```\n\n\n\nAnd there we have it! That's all the code we need to upload metadata to Arweave and mint an NFT on the Solana blockchain. \n\n## Step3: Testing\n\nThe dapp can be tested by visiting the `/nftMinter` page. \n\nFirst, add the required data to the form, then click on the `Mint` button to mint the NFT. \n\n![Solana NFT Minter Form](/img/content/bc24085-image.webp)\n\nThe process will take a couple of seconds, and you will be asked to sign a transaction to mint the NFT. Once the transaction is signed and confirmed, you will get a notification that the minting is successful. \n\nYou can also visit the`/balances/nft` page to view your newly minted NFT. \n\n![NFT balance](/img/content/64db1da-image.webp)\n\nCongratulations!! 🥳 \n\nNow you know how to create your very own NFT minter dapp on the Solana blockchain.\n\n## Support\n\nIf you have any trouble following the tutorial, feel free to reach out to our community engineers in our [Discord](https://moralis.io/discord) or [Forum](https://forum.moralis.io) to get 24/7 developer support.\n", + "content": "## Introduction\n\nThis tutorial teaches you how to create your very own NFT minter dapp in NextJS using Metaplex JavaScript SDK, and the Moralis API.\n\nOnce complete, you can use this dapp to mint NFTs on the Solana blockchain in a few clicks. \n\nWe will use [Metaplex JavaScript SDK](https://github.com/metaplex-foundation/js) and the [Moralis API](/web3-data-api/solana/how-to-get-native-solana-balance-by-wallet) to mint and view the NFTs.\n\nThis is what the final application looks like. \n\n![Solana NFT Minter Page View](/img/content/5863afd-image.webp)\n\nInstead of going through the entire code, we will focus on the important sections of code that power the application. \n\nYou can find the repository with the final code here: [Solana-NFT-Minter](https://github.com/JohnVersus/solana-nft-minter).\n\n## Step1: Project Setup\n\nFollow these steps to run the project in your local environment.\n\n- Clone the project from [GitHub](https://github.com/JohnVersus/solana-nft-minter) using the `git clone` command and `cd` into the project\n\n```shell\ngit clone https://github.com/JohnVersus/solana-nft-minter.git\n\ncd solana-nft-minter\n```\n\n\n\n- Install the dependencies using the `yarn` or `npm` package manager.\n\n```shell\nyarn install\n```\n\n\n\n- Rename `.env.local.example` file to `.env.local` and add the required environment secrets.\n\n```shell .env.local\n# devnet is used for chain Id as we will be testing the app on devnet chain\nAPP_CHAIN_ID=devnet\nAPP_DOMAIN=ethereum.boilerplate \n\n# Get your KEY https://admin.moralis.io/web3api\nMORALIS_API_KEY= xxx\n\n# Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/64\nNEXTAUTH_SECRET= xxx\n\n# Replace for production\nNEXTAUTH_URL=http://localhost:3000\n\n# Wallet private used to upload NFT metadata to arweave storage\nPRIVATE_KEY = xxx\n```\n\n\n\n- Start the app in localhost port 3000.\n\n```shell\nyarn run dev\n```\n\n\n\nOnce the command has been run successfully, you should be able to view the app in localhost port 3000, or click [here](http://localhost:3000) to open the page directly.\n\n## Step2: Uploading and Minting NFT\n\nIn the app, you can find multiple tabs, but for our code, we only need to access the`/balances/nft` page to check the NFTs of the wallet, and the`/nftMinter`page to mint NFTs.\n\n![Nav Bar](/img/content/8d845e2-image.webp)\n\nTo use the app, we must first connect to the Solana wallet. This can be done by clicking the \"Select Wallet\" button on the top right. You can then connect to the wallet of your choice. \n\n![](/img/content/5e9b822-image.webp)\n\n\n\nOnce the wallet connection is successful, visit the`/balances/nft` page, and we can view the NFTs the wallet is holding. \n\nThe code related to authentication can be found in the `src/components/modules/ConnectButton` folder, although we won't be looking at the authentication code in this tutorial. \n\nIf you want to know how authentication works, you can take a look at this [video](https://www.youtube.com/watch?v=0fuevxebv_E). You can also check out this [tutorial](/web3-data-api/solana/how-to-get-native-solana-balance-by-wallet) to learn how to get all NFTs linked to a Solana wallet. \n\nThe first step of the app is to connect the Metaplex SDK with the wallet and the devnet cluster.\n\n> Only partial code is shown here to keep it clean. Visit `src/components/templates/nftMinter` to view the entire code.\n\n```typescript NFTMinter.tsx\n/* \n* We use the connected wallet and the cluster connection\n* with metaplex for creating and processing the transactions.\n*/\nconst wallet = useWallet();\nconst connection = new Connection(clusterApiUrl('devnet'));\nconst metaplex = new Metaplex(connection);\nmetaplex.use(walletAdapterIdentity(wallet));\n```\n\n\n\nThe next step is to process the inputs which are entered by the user and upload them to decentralized storage like Arweave, IPFS, etc. In this tutorial, we will use Arweave as our storage solution, as it works seamlessly with the Metaplex SDK. \n\nThis is the code to process the image and send the data to the backend for uploading.\n\n```typescript NFTMinter.tsx\n// full code in `src/components/templates/nftMinter/NFTMinter.tsx`\n\n//Function to process image to base64\nconst convertBase64 = (inputFile: any) => {\n return new Promise((resolve, reject) => {\n const fileReader = new FileReader();\n fileReader.readAsDataURL(inputFile);\n fileReader.onload = () => {\n resolve(fileReader.result);\n };\n fileReader.onerror = (error) => {\n reject(error);\n };\n });\n};\n\n// NFT metadata\nconst base64Data = await convertBase64(file[0]);\nconst options = {\n name,\n description,\n image: base64Data,\n symbol: \"M-NFT\",\n};\n\n// Sending the metdata to the backend NextJs API route for uploading to arweave\nconst uri = await apiPost(\"/upload\", options)\n .then((data: UploadMetadataOutput) => {\n console.log(data);\n return data.uri;\n })\n .catch((e) => {\n console.log(e);\n });\n\n```\n\n\n\nHere's the code to upload the metadata to Arweave.\n\n```typescript upload.ts\n// Complete code can be found in `pages/api/upload.ts`\n\nexport default async function handler(req: NextApiRequest, res: NextApiResponse) {\n// Creating a new connection the backend\nconst connection = new Connection(clusterApiUrl(\"devnet\"));\nconst metaplex = new Metaplex(connection);\n\n// Using private key in backend to sign the transaction for uploading the metadata.\nconst key = Uint8Array.from(base58.decode(process.env.PRIVATE_KEY));\nconst keypair = Keypair.fromSecretKey(key);\n\n// Using bundlr storage for connecting to arweave storage\nmetaplex.use(walletAdapterIdentity(keypair));\nmetaplex.use(\n bundlrStorage({\n address: \"https://devnet.bundlr.network\",\n providerUrl: \"https://api.devnet.solana.com\",\n timeout: 60000,\n identity: keypair,\n })\n);\n\n// Uploading metadata\nconst data = await metaplex\n .nfts()\n .uploadMetadata({ name, description, image, symbol })\n .run();\n \n// Send the response to frontend\nres.status(200).json(data);\n}\n\n```\n\n\n\nNow let's take a look at the last step - how to mint the NFT. \n\nHere is the code:\n\n```typescript NFTMinter.tsx\n// The data which we get from backend, after uploading, contains the URI of\n// the metdata that was uploaded. \n// We use it mint the NFT on blockchain.\n\nconst data = await metaplex\n .nfts()\n .create({\n uri,\n name,\n sellerFeeBasisPoints: 500, // represents the royality fee for the NFT\n })\n .run();\n\n```\n\n\n\nAnd there we have it! That's all the code we need to upload metadata to Arweave and mint an NFT on the Solana blockchain. \n\n## Step3: Testing\n\nThe dapp can be tested by visiting the `/nftMinter` page. \n\nFirst, add the required data to the form, then click on the `Mint` button to mint the NFT. \n\n![Solana NFT Minter Form](/img/content/bc24085-image.webp)\n\nThe process will take a couple of seconds, and you will be asked to sign a transaction to mint the NFT. Once the transaction is signed and confirmed, you will get a notification that the minting is successful. \n\nYou can also visit the`/balances/nft` page to view your newly minted NFT. \n\n![NFT balance](/img/content/64db1da-image.webp)\n\nCongratulations!! 🥳 \n\nNow you know how to create your very own NFT minter dapp on the Solana blockchain.\n\n## Support\n\nIf you have any trouble following the tutorial, feel free to reach out to our community engineers in our [Discord](https://moralis.io/discord) or [Forum](https://forum.moralis.io) to get 24/7 developer support.\n", "data": { "title": "Solana NFT Minter", "slug": "/guides/solana-nft-minter", @@ -253,4 +253,4 @@ "isEmpty": false, "excerpt": "" } -] \ No newline at end of file +] From 69a20f4fb3780d11ce9d2d3b8fdecaac0b209deb Mon Sep 17 00:00:00 2001 From: omahs <73983677+omahs@users.noreply.github.com> Date: Tue, 21 Nov 2023 11:17:19 +0100 Subject: [PATCH 3/7] fix typo --- docs/04-guides/solana-nft-minter.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/04-guides/solana-nft-minter.md b/docs/04-guides/solana-nft-minter.md index da14a721..09fff56d 100644 --- a/docs/04-guides/solana-nft-minter.md +++ b/docs/04-guides/solana-nft-minter.md @@ -45,7 +45,7 @@ yarn install - Rename `.env.local.example` file to `.env.local` and add the required environment secrets. ```shell .env.local -# devent is used for chain Id as we will be testing the app on devnet chain +# devnet is used for chain Id as we will be testing the app on devnet chain APP_CHAIN_ID=devnet APP_DOMAIN=ethereum.boilerplate From ff01b188d93f38e88f97555cbcb36a1004543055 Mon Sep 17 00:00:00 2001 From: omahs <73983677+omahs@users.noreply.github.com> Date: Tue, 21 Nov 2023 11:18:37 +0100 Subject: [PATCH 4/7] fix typo --- docs/04-guides/zapper-clone.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/04-guides/zapper-clone.md b/docs/04-guides/zapper-clone.md index 651b545c..b75b6524 100644 --- a/docs/04-guides/zapper-clone.md +++ b/docs/04-guides/zapper-clone.md @@ -10,7 +10,7 @@ This tutorial teaches you how to build a Zapper-like application where you can c ## Prerequisites -Make sure that you have the installed all the following prerequisites: +Make sure that you have installed all the following prerequisites: - [Node.js](https://nodejs.org/) v14+ or [Python](https://www.python.org/downloads/) - [NPM](https://www.npmjs.com/)/[Yarn](https://classic.yarnpkg.com/en/) or [Pip](https://pip.pypa.io/en/stable/) From 61bcb371a1c426229ecf48e2a696d588e9708e84 Mon Sep 17 00:00:00 2001 From: omahs <73983677+omahs@users.noreply.github.com> Date: Tue, 21 Nov 2023 11:19:44 +0100 Subject: [PATCH 5/7] fix typo --- docs/04-guides/token-api-full-guide-walkthrough.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/04-guides/token-api-full-guide-walkthrough.md b/docs/04-guides/token-api-full-guide-walkthrough.md index 6f2b04e5..9eeed170 100644 --- a/docs/04-guides/token-api-full-guide-walkthrough.md +++ b/docs/04-guides/token-api-full-guide-walkthrough.md @@ -1,11 +1,11 @@ --- title: "Token API - Full Guide & Walkthrough" slug: "/guides/token-api-full-guide-walkthrough" -description: "This tutorial teaches you what an Token API is, what are some of its most common use cases, and how to use it within your tech stack." +description: "This tutorial teaches you what a Token API is, what are some of its most common use cases, and how to use it within your tech stack." tags: [Token API, Ethereum, Polygon, EVM] --- -## What is an Token API? +## What is a Token API? An [Token API](https://moralis.io/api/token/) is a collection of APIs that can be used to index ERC20 token-related data, e.g. ERC20 token balance, ERC20 token metadata, from multiple [EVM chains](/web3-data-api/evm#supported-chains) that we support. From 8a2e6683358ce9a1e57a1b03c22182bdc35d0a40 Mon Sep 17 00:00:00 2001 From: omahs <73983677+omahs@users.noreply.github.com> Date: Tue, 21 Nov 2023 11:20:57 +0100 Subject: [PATCH 6/7] fix typo --- docs/04-guides/nft-api-full-guide-walkthrough.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/04-guides/nft-api-full-guide-walkthrough.md b/docs/04-guides/nft-api-full-guide-walkthrough.md index 59d82285..58cc8f8a 100644 --- a/docs/04-guides/nft-api-full-guide-walkthrough.md +++ b/docs/04-guides/nft-api-full-guide-walkthrough.md @@ -44,7 +44,7 @@ This API category comprised of 5 APIs: | API Name | Path | Use Cases | | ------------------------------------------------------------------------------------------ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [getWalletNFTTransfers](/web3-data-api/evm/reference/get-wallet-nft-transfers) | /{address}/nft/transfers | Fetch all transfers of NFT that interacted with a given `address`. This does not include any indirect NFT transfers, e.g. transfering NFT with OpenSea contract. | +| [getWalletNFTTransfers](/web3-data-api/evm/reference/get-wallet-nft-transfers) | /{address}/nft/transfers | Fetch all transfers of NFT that interacted with a given `address`. This does not include any indirect NFT transfers, e.g. transferring NFT with OpenSea contract. | | [getNFTContractTransfers](/web3-data-api/evm/reference/get-nft-contract-transfers) | /nft/{address}/transfers | Fetch all transfers of a specific NFT collection with a given contract `address`. | | [getNFTTransfersFromToBlock](/web3-data-api/evm/reference/get-nft-transfers-from-to-block) | /nft/transfers | Fetch all transfers of NFTs within the given `from_block` and `to_block` range. This is ideal for fetching NFT transfers from a specific range of time or block numbers. | | [getNFTTransfersByBlock](/web3-data-api/evm/reference/get-nft-transfers-by-block) | /block/{block_number_or_hash}/nft/transfers | Fetch all transfers of NFTs in a given `block_number_or_hash` | From 1f126fd9d882745297c3edafd182b8f8a5977c68 Mon Sep 17 00:00:00 2001 From: omahs <73983677+omahs@users.noreply.github.com> Date: Tue, 21 Nov 2023 11:21:41 +0100 Subject: [PATCH 7/7] fix typo --- blog/2023-10-11-upcoming-change-to-streams-pricing.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blog/2023-10-11-upcoming-change-to-streams-pricing.md b/blog/2023-10-11-upcoming-change-to-streams-pricing.md index 84f6f39b..b916c5b7 100644 --- a/blog/2023-10-11-upcoming-change-to-streams-pricing.md +++ b/blog/2023-10-11-upcoming-change-to-streams-pricing.md @@ -6,7 +6,7 @@ authors: tags: [Streams API] --- -Up until now, Streams and API pricing has been separate. And all accounts on Moralis have had a certain number of Stream records included in their plan. +Up until now, Streams and API pricing have been separate. And all accounts on Moralis have had a certain number of Stream records included in their plan. Today we're announcing the streamlining of Streams and API pricing. Both Streams and API moving forward will be priced in Compute Units. @@ -20,4 +20,4 @@ A business plan user who solely uses Streams would go from having 50,000 records Any separately purchased Streams plan will be compensated with the same amount of Compute Units being added to their Moralis plan. -If you have any questions about this transition please contact our 24/7 support at hello@moralis.io. \ No newline at end of file +If you have any questions about this transition please contact our 24/7 support at hello@moralis.io.