diff --git a/blogchain/README.md b/blogchain/README.md index 5bdb737..4f26fdd 100644 --- a/blogchain/README.md +++ b/blogchain/README.md @@ -19,7 +19,7 @@ Blogchain makes your content unstoppable and profitable. Transform your blogs in ## Project Walkthrough -Within the framework of blogchain, every blog manifests as a sophisticated smart contract, while each individual blog post is uniquely represented as a non-fungible token (NFT). +Within the framework of blogchain, every blog manifests as an nft contract deployed from the Mintbase contract factory, while each individual blog post is uniquely represented as a non-fungible token (NFT). *NOTE: As a standard on Mintbase as we use the latest versions of Next.js we recommend using pnpm, but the package manager is up to your personal choice.* @@ -48,7 +48,7 @@ if (checkStore?.nft_contracts.length === 0) { #### Step 2: if contract name doesn't exist execute the deploy contract action with the instantiated wallet -Create deploy contract args using [mintbase-js/sdk](https://docs.mintbase.xyz/dev/mintbase-sdk-ref/sdk/deploycontract) deployContract method. +Create deploy contract args using [mintbase-js/sdk](https://docs.mintbase.xyz/dev/mintbase-sdk-ref/sdk/deploycontract) deployContract method. This will deploy an NFT contract from the [mintbase contract factory](https://github.com/Mintbase/mb-contracts/tree/main/mb-factory-v1) ```typescript const wallet = await selector.wallet(); @@ -63,7 +63,7 @@ const deployArgs = deployContract({ }); ``` -We can then execute the deploy contract by passing in the serverWallet as the sender +We can then execute the deploy contract by passing in the wallet. If you wan't to learn about wallet connection check out the [wallet starter template](https://templates.mintbase.xyz/templates/starter-next) ```typescript await execute({ wallet }, deployArgs); @@ -228,7 +228,7 @@ query GET_POST_METADATA($metadataId: String!) { }`; ``` -Presently, this template exclusively functions within the testnet environment. To transition to a different network, it is imperative to modify the configuration in and every 'testnet' instance. +Presently, this template exclusively functions within the testnet environment. To transition to a different network the configuration must be changed in `````` and every 'testnet' instance. ## Get in touch diff --git a/marketplace/README.md b/marketplace/README.md index e27aa30..f742e28 100644 --- a/marketplace/README.md +++ b/marketplace/README.md @@ -19,6 +19,15 @@ Unlock Your NFT Storefront: Clone & Customize Your Path to Blockchain Success wi ## Project Walkthrough +This guide will take you step by step through the process of creating a basic marketplace frontend where you can purchase tokens and filter your selection by store. It uses [mintbase-js/data](https://docs.mintbase.xyz/dev/mintbase-sdk-ref/data) for retrieving data and [mintbase-js/sdk](https://docs.mintbase.xyz/dev/mintbase-sdk-ref/sdk) for executing marketplace methods on the [mintbase marketplace contract](https://github.com/Mintbase/mb-contracts/tree/main/mb-interop-market). + +The mintbase-js/data package provides convenient functions for retrieving nft data from the mintbase indexer. In this example, you will be able to view and purchase NFTs from a specific nft contract. + +You can find more information on Github: [GitHub link](https://github.com/Mintbase/mintbase-js/tree/beta/packages/data) + +A live demo of the marketplace can be found here: [Live demo link](https://marketplace-template.mintbase.xyz/) + + ### Setup install dependencies @@ -31,15 +40,6 @@ run the project pnpm dev ``` - -This guide will take you step by step through the process of creating a basic marketplace where you can purchase tokens and filter your selection by store. It uses [mintbase-js/data](https://docs.mintbase.xyz/dev/mintbase-sdk-ref/data) for retrieving data and [mintbase-js/sdk](https://docs.mintbase.xyz/dev/mintbase-sdk-ref/sdk) for executing marketplace methods. - -The mintbase-js/data package provides convenient functions for retrieving data from our indexer. In this example, you will be able to view and purchase NFTs from a specific store. - -You can find more information on Github: [GitHub link](https://github.com/Mintbase/mintbase-js/tree/beta/packages/data) - -A live demo of the marketplace can be found here: [Live demo link](https://marketplace-template.mintbase.xyz/) - ## Step 1: Connect Wallet Before proceeding, it is important to have a wallet connection feature implemented in your application in order to interact with the contract. To do this, you can check our guide [Wallet Connection Guide](https://docs.mintbase.xyz/dev/getting-started/add-wallet-connection-to-your-react-app). diff --git a/minter/README.md b/minter/README.md index 41faaf5..64f1fd6 100644 --- a/minter/README.md +++ b/minter/README.md @@ -1,6 +1,6 @@ # Minter cover_image -This is a simple minter example built on top of Next.js 14 +This is a Next.js 14 frontend minter example that includes a simple interface from which you can mint nfts easily [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://minter.mintbase.xyz/) [![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Fblob%2Fmain%2Fminter) @@ -23,14 +23,8 @@ This is a simple minter example built on top of **Next.js 14** using some of [@m if you dont have a store you can [deploy a new contract](https://www.mintbase.xyz/launchpad/contracts/0) on our launchpad - -## Pre-Setup - Proxy Contract - -- You need to have a NEAR Contract where you add a proxy contract as a minter. -- The proxy contract enables non-minter users to mint images on your contract. -- The Near Contract will be where the NFT images will be minted. -- The proxy contract will be the minter. -- The user wallet address will be the owner of the NFT. +## Pre-Setup +If you would like the minter to use your own NFT contract you can easily deploy one through the mintbase market UI, additionally if you want to open up minting to be available for any person you will need to connect it to a proxy contract ### Deploying a Near Contract on Mintbase: 1. Login on Mintbase and access [Contracts Page](https://www.mintbase.xyz/launchpad/contracts/0) @@ -46,6 +40,124 @@ if you dont have a store you can [deploy a new contract](https://www.mintbase.xy 3. Proceed to transaction. 4. Succeeded +### Step 1: Get the wallet connection + +This method will get the wallet instance used to send the mint transaction. To learn more about this, you can check our guide at [Wallet Connection Guide](https://docs.mintbase.xyz/dev/getting-started/add-wallet-connection-to-your-react-app). + +```typescript + const getWallet = async () => { + try { + return await selector.wallet(); + } catch (error) { + console.error("Failed to retrieve the wallet:", error); + throw new Error("Failed to retrieve the wallet"); + } + }; + ``` + +### Step 2: Use the onSubmit method + +Get all the form data and use the onSubmit method to handle the minting process + +```typescript +const onSubmit = async (data: SubmitData) => { + const wallet = await getWallet(); + + const reference = await uploadReference({ + title: typeof data?.title === "string" ? data.title : "", + media: data?.media as unknown as File, + }); + + const file = uploadFile(data?.media as unknown as File); + + await handleMint( + reference.id, + file, + activeAccountId as string, + wallet, + reference.media_url as string, + data.title + ); + }; + ``` + + ### Step 3: Upload the NFT reference + + The nft reference represents the offchain data which permanently stored on IPFS on Arweave in this case you can use [@mintbase-js/data](https://docs.mintbase.xyz/dev/mintbase-sdk-ref/data) to easily upload it to arweave. + + In this not only are we uploading an offchain JSON object which contains the media as well as the title but also uploading a separate media file to be included onchain. + + [Learn more about how references work here](https://docs.mintbase.xyz/dev/getting-started/anatomy-of-a-non-fungible-token) + + ```typescript + const reference = await uploadReference({ + title: typeof data?.title === "string" ? data.title : "", + media: data?.media as unknown as File, + }); + + const file = uploadFile(data?.media as unknown as File); + +``` + +### Step 3: Handling the mint + + Here we start by configuring the callback which is the link and params to where the user will be redirected after minting after signing the mint transaction on the wallet. + + In this case a number of params are included to be able to show a better success page. + + The argument for calling the contracts "mint" function is then built. This transaction will be sent to the proxy contract which then calls the nft contracts nft_batch_mint method + + + ```typescript + async function handleMint( + reference: string, + media: Promise, + activeAccountId: string, + wallet: Wallet, + mediaUrl: string, + nftTitle: string + ) { + const callbackArgs = { + contractAddress: MintbaseWalletSetup.contractAddress.toString(), + amount: 1, + ref: `${reference}`, + mediaUrl: mediaUrl, + title: nftTitle, + }; + + if (reference) { + await wallet.signAndSendTransaction({ + signerId: activeAccountId, + receiverId: proxyAddress, + callbackUrl: cbUrl(reference, callbackArgs), + actions: [ + { + type: "FunctionCall", + params: { + methodName: "mint", + args: { + metadata: JSON.stringify({ + reference, + media: (await media).id, + }), + nft_contract_id: MintbaseWalletSetup.contractAddress, + }, + gas: "200000000000000", + deposit: "10000000000000000000000", + }, + }, + ], + }); + } + } + + return { form, onSubmit, preview, setPreview }; +}; + +``` + +This sums up the blockchain portion of the code + ### Setup @@ -97,4 +209,4 @@ You can use this project as a reference to build your own, and use or remove any - Support: [Join the Telegram](https://tg.me/mintdev) - Twitter: [@mintbase](https://twitter.com/mintbase) -detail_image \ No newline at end of file +detail_image