LIT Protocol: Create a MintLIT NFT with LIT Protocol and IPFS

Learn how to create a MintLIT NFT with LIT Protocol and IPFS.

What is LIT Protocol?

LIT Protocol is a decentralized blockchain-based platform designed to allow users to transact and exchange digital assets in a secure, transparent, and trustless manner. LIT Protocol enables users to create and trade synthetic assets that are backed by real-world assets, such as fiat currencies, commodities, and stocks, using smart contracts.

A MintLIT NFT is a type of NFT created with LIT Protocol that has an unlockable functionality. These NFTs can be used to gate certain content and make it exclusive for the NFT holder.

Read below to learn how to create a MintLIT NFT with LIT Protocol and IPFS.

Prerequisites:

• A cryptowallet, such as MetaMask.

• Configure your cryptowallet to use the Polygon Mumbai network.

• Install Node.js and npm.

• Download and install an IDE of your choice, such as VSCode.

• Sign up for a Filebase account.

• Have your Filebase Access and Secret Keys. Learn how to view your access keys here.

• Create a Filebase IPFS Bucket. Learn how to create a bucket here.

This tutorial uses features that are part of the Filebase IPFS paid subscription plan, such as the IPFS Pinning API and IPFS dedicated gateways.

1. Start by downloading the following dependencies:

yarn add @lit-protocol/sdk-browser

yarn add lit-js-sdk

2. Next, clone the MintLIT GitHub repository, then install the dependencies needed:

git clone https://github.com/LIT-Protocol/MintLIT.git

cd MintLIT

yarn

3. Next, open the src/Mint.js file. Replace lines 191-203 with the following content:

const formData = new FormData()
    formData.append('file', litHtmlBlob)
    const uploadPromise = new Promise((resolve, reject) => {
      fetch('<https://api.filebase.io/v1/ipfs/pins>', {
        method: 'POST',
        mode: 'cors',
        headers: {
          Authorization: `Bearer FILEBASE_API_KEY`
        },
        body: formData
      }).then(response => response.json())
        .then(data => resolve(data))
        .catch(err => reject(err))
    })

Replace the FILEBASE_API_KEY with your Filebase IPFS Pinning Service API key.

The API Key can be generated by navigating to the Filebase Access Keys page, then viewing the IPFS Pinning Service API Endpoint. Click the drop down menu for 'Choose Bucket to Generate Token', then choose the IPFS Filebase Bucket you want to use.

Then copy the generated Secret Access Token:

4. While still in the src/Mint.js file, replace line 211 with the following:

const fileUrl = https://gateway-name.myfilebase.com/ipfs/${ipfsCid}

Replace ‘Gateway Name’ with your Filebase IPFS dedicated gateway name. To create an IPFS dedicated gateway, navigate to the Gateways page on the Filebase web console. Then select the ‘Create Gateway’ button in the upper right corner.

A new window will open prompting you to provide a gateway name and select the gateway’s access level.

Gateway names are subject to the same naming restrictions as bucket names. All gateway names must be lowercase, between 3-63 characters, and must be unique.

Select ‘Public’, then select ‘Create Gateway’.

5. Next, save this src/Mint.js file. Then, build your app with the following commands:

yarn build

yarn global add serve

serve -s build

6. The following app will open at localhost:3000:

7. Select ‘Click to Upload’, then enter an NFT Title, Description, and select the ‘Mumbai’ blockchain network.

You can test the visibility of the ‘Unlock’ and ‘Lock’ feature with the toggle button in the top right.

8. Then select ‘Submit’. You will be prompted to connect your cryptowallet to the app.

9. Switch to the Polygon Mumbai network, then authorize the transaction to mint the NFT.

10. The MintLIT app will reflect the minting status of your NFT: