Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions blogchain/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.*

Expand Down Expand Up @@ -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();
Expand All @@ -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);
Expand Down Expand Up @@ -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 <MintbaseWalletContextProvider> 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 ```<MintbaseWalletContextProvider>``` and every 'testnet' instance.

## Get in touch

Expand Down
18 changes: 9 additions & 9 deletions marketplace/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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).
Expand Down
132 changes: 122 additions & 10 deletions minter/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Minter
<img src="https://i.imgur.com/QDJPsAA.png" alt="cover_image" width="0" />
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)
Expand All @@ -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)
Expand All @@ -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<ArweaveResponse>,
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

Expand Down Expand Up @@ -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)

<img src="https://i.imgur.com/SBiSEAB.png" alt="detail_image" width="0" />
<img src="https://i.imgur.com/SBiSEAB.png" alt="detail_image" width="0" />