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
140 changes: 75 additions & 65 deletions simple-token-drop/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# Simple Token Drop

<img src="https://i.imgur.com/U5x0IdF.png" alt="cover_image" width="0" />
This example illustrates the creation of a straightforward minting landing page with pre-defined metadata.

Expand All @@ -8,32 +9,31 @@ This example illustrates the creation of a straightforward minting landing page
**Tooling:**

[![Use Case](https://img.shields.io/badge/Use%20Case-Minter-blue)](#)
[![Tools](https://img.shields.io/badge/Tools-@mintbase.js/sdk%2CArweave%2CMintbase%20Wallet-blue)](#)
[![Tools](https://img.shields.io/badge/Tools-@mintbase.js/sdk%2CArweave%2CBitte%20Wallet-blue)](#)
[![Framework](https://img.shields.io/badge/Framework-Next.js%2014-blue)](#)

**Author:**

[![Author](https://img.shields.io/twitter/follow/Surge_Code?style=social&logo=twitter)](https://twitter.com/Surge_Code) [![Organization](https://img.shields.io/badge/Mintbase-blue)](https://www.mintbase.xyz)

[![Author](https://img.shields.io/twitter/follow/Surge_Code?style=social&logo=twitter)](https://twitter.com/Surge_Code) [![Organization](https://img.shields.io/badge/Bitte-blue)](https://www.bitte.ai)

## Project Walkthrough

Users can connect or create a wallet to initiate the minting process. Additionally, an option is available to generate an account that will be automatically imported into the Mintbase wallet, complete with the corresponding NFT.
Users can connect or create a wallet to initiate the minting process. Additionally, an option is available to generate an account that will be automatically imported into the Bitte wallet, complete with the corresponding NFT.

The project is separated into two portions, the first one creates a wallet, server mints into it and then auto imports it. The alternate one deeplinks to a minting transaction on mintbase wallet.

*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.*
The project is separated into two portions, the first one creates a wallet, server mints into it and then auto imports it. The alternate one deeplinks to a minting transaction on Bitte wallet.

_NOTE: As a standard on Bitte as we use the latest versions of Next.js we recommend using pnpm, but the package manager is up to your personal choice._

## 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.
- 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.

### Deploying a Near Contract on Mintbase:

1. Login on Mintbase and access [Contracts Page](https://www.mintbase.xyz/launchpad/contracts/0)
2. Click on New Contract
3. Choose Store Name (this will be the contract address to add on your minsta instance, this need to be added on the `process.env.NEXT_PUBLIC_NFT_CONTRACT_ADDRESS` environment variable) and Store Symbol
Expand All @@ -42,13 +42,14 @@ The project is separated into two portions, the first one creates a wallet, serv
6. Go to Contract Settings

### Add Proxy Minter Contract

1. Under Contract Settings go to Minters
2. add `0.drop.proxy.mintbase.near` (this is the contract address that need to be added on `process.env.NEXT_PUBLIC_PROXY_MINTER_CONTRACT_ADDRESS`), and click Add Minters.
3. Proceed to transaction.
4. Succeeded


## Run the project

pnpm i

pnpm run dev
Expand Down Expand Up @@ -79,16 +80,18 @@ export const serverMint = async (): Promise<void> => {
Create mint args using mintbase-js/sdk with a link to the reference object containing the media.

```typescript
export const mintArgs = (accountId: string): NearContractCall<MintArgsResponse> => {
return mint({
contractAddress: NFT_CONTRACT,
ownerId: accountId,
metadata: {
media: MEDIA_URL,
reference: REFERENCE_URL
}
})
}
export const mintArgs = (
accountId: string
): NearContractCall<MintArgsResponse> => {
return mint({
contractAddress: NFT_CONTRACT,
ownerId: accountId,
metadata: {
media: MEDIA_URL,
reference: REFERENCE_URL,
},
});
};
```

We can then execute the mint by passing in the serverWallet as the sender
Expand All @@ -104,64 +107,71 @@ export const serverMint = async (): Promise<void> => {
}
```

#### Step 3: autoimport created account into mintbase wallet
#### Step 3: autoimport created account into Bitte Wallet

Now that the account is created and the token has been minted into it we can take its keypair and autoimport it into bitte wallet using the following URL

Now that the account is created and the token has been minted into it we can take its keypair and autoimport it into mintbase wallet using the following URL
```
https://{NETWORK}.wallet.mintbase.xyz/import/private-key#{ACCOUNT_ID}/{PRIVATE_KEY}`
https://{NETWORK}.wallet.bitte.ai/import/private-key#{ACCOUNT_ID}/{PRIVATE_KEY}`
```

```typescript
export const serverMint = async (): Promise<void> => {

//Create a new keypair, instantiate server wallet and create account with generated keypair
const accountId = [...Array(7)].map(() => Math.random().toString(36)[2]).join('') + `.${SERVER_WALLET_ID}`;
const newKeyPair = KeyPair.fromRandom('ed25519')
const serverWallet: Account = await connect();
await serverWallet.createAccount(accountId, newKeyPair.getPublicKey().toString(), new BN("0"))

//Execute mint with server wallet
await execute({ account: serverWallet }, mintArgs(accountId)) as FinalExecutionOutcome


redirect(`${WALLET_AUTO_IMPORT_URL}${accountId}/${newKeyPair.secretKey}`)

}

//Create a new keypair, instantiate server wallet and create account with generated keypair
const accountId =
[...Array(7)].map(() => Math.random().toString(36)[2]).join("") +
`.${SERVER_WALLET_ID}`;
const newKeyPair = KeyPair.fromRandom("ed25519");
const serverWallet: Account = await connect();
await serverWallet.createAccount(
accountId,
newKeyPair.getPublicKey().toString(),
new BN("0")
);

//Execute mint with server wallet
(await execute(
{ account: serverWallet },
mintArgs(accountId)
)) as FinalExecutionOutcome;

redirect(`${WALLET_AUTO_IMPORT_URL}${accountId}/${newKeyPair.secretKey}`);
};
```


## Client side minting through mintbase wallet deeplink

## Client side minting through bitte wallet deeplink

This function triggers the client-side minting process using a Deeplink. It retrieves mint parameters
using the mintArgs function, constructs transaction arguments, and redirects to the Mintbase wallet
using the mintArgs function, constructs transaction arguments, and redirects to the Bitte wallet
for transaction signing.

```typescript

const handleClientMint = async () => {
// Set loading state to true during transaction processing
setTxLoading(true);

// Retrieve mint parameters using mintArgs function
const mintParams = await mintArgs("");

// Create an action object for the mint, specifying type and parameters
const action = { type: "FunctionCall", params: mintParams }

// Create transaction arguments in JSON format with receiverId and actions array
const txArgs = JSON.stringify({ receiverId: "1.minsta.mintbus.near", actions: [action] })

// Redirect to the Mintbase wallet for transaction signing
router.push(`https://testnet.wallet.mintbase.xyz/sign-transaction?transactions_data=[${txArgs}]`)
}

``````
const handleClientMint = async () => {
// Set loading state to true during transaction processing
setTxLoading(true);

// Retrieve mint parameters using mintArgs function
const mintParams = await mintArgs("");

// Create an action object for the mint, specifying type and parameters
const action = { type: "FunctionCall", params: mintParams };

// Create transaction arguments in JSON format with receiverId and actions array
const txArgs = JSON.stringify({
receiverId: "1.minsta.mintbus.near",
actions: [action],
});

// Redirect to the Bitte wallet for transaction signing
router.push(
`https://testnet.wallet.bitte.ai/sign-transaction?transactions_data=[${txArgs}]`
);
};
```

## Get in touch

- Support: [Join the Telegram](https://tg.me/mintdev)
- Twitter: [@mintbase](https://twitter.com/mintbase)
- Twitter: [@BitteProtocol](https://twitter.com/BitteProtocol)

<img src="https://i.imgur.com/qTQhBet.png" alt="detail_image" width="0" />
14 changes: 7 additions & 7 deletions simple-token-drop/package.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "Mintbase-Templates-Simple-Token-Drop",
"name": "Bitte-Templates-Simple-Token-Drop",
"version": "0.1.0",
"keywords": [
"templates",
"mintbase",
"bitte",
"web3",
"nextjs",
"react",
Expand All @@ -12,8 +12,8 @@
"nft"
],
"repository": "https://github.com/mintbase/templates.git",
"homepage": "https;//templates.mintbase.xyz/simple-token-drop",
"author": "Mintbase Team <eng@mintbase.xyz>",
"homepage": "https://templates.bitte.ai/templates/simple-token-drop",
"author": "Bitte Protocol Team <eng@bitte.ai>",
"private": true,
"scripts": {
"dev": "next dev",
Expand All @@ -22,9 +22,9 @@
"lint": "next lint"
},
"dependencies": {
"@mintbase-js/react": "0.5.4-beta.0",
"@mintbase-js/sdk": "0.5.4-beta.0",
"@mintbase-js/storage": "0.5.4-beta.0",
"@mintbase-js/react": "0.6.5",
"@mintbase-js/sdk": "0.6.5",
"@mintbase-js/storage": "0.6.5",
"near-api-js": "^2.1.4",
"next": "14.0.1",
"react": "^18",
Expand Down
Loading