Easily manage files in Arweave: The ultimate guide to completing Web3 front-end Path Manifests with 4EVERLAND

Why use Path Manifests?

When an NFT is released on IPFS, the image and metadata are uploaded to the IPFS network to obtain a root CID, which takes the following form:

ipfs://bafybeic36ik6cngu37xbzmpytuvyo7z3lyeen44clkkxq5d263zj4nkzr4

By using this root CID, the image path of each NFT can be defined in the format of root cid/'file name. For example, the image path in an NFT's metadata might look like this:

ipfs://bafybeie7byrnb3vo2lc2lwaqm5lox6jiow5ntzod3aoquki36gtirdhodm/0.png

Similarly, if we want to publish NFT on Arweave, we can use Path Manifets to collect NFT, so that NFT can also be accessed through path.

For example

https://arweave.net/Bgw5-GwpymUoe5VMeb-No9WWXpjWsq_8g4oeiGP5RnA/0.png

Instead of accessing each image by its ID on arweave:

​​​​​​https://arweave.net/ISvPQyG8qWzJ1Pv5em5xK8Ht38HZ3ub1fPHbFEqDPK0

How to create an NFT

The following explains how to use 4EVERLAND Bucket + Path Manifests to store NFT files in the Arweave network.

Create Bucket and upload NFT file

First, you need to create a bucket in the 4everland dashboard and enable the Sync to AR button

Then, upload your nft folder in the Bucket to obtain the TxID of all nfts. In addition to manual operation in the dashboard, you can also use the S3 Compatible API to upload and obtain.

Init S3 client

// initS3Client.js
import { S3 } from '@aws-sdk/client-s3'
export const client = new S3({
    endpoint: 'https://endpoint.4everland.co',
    credentials:{
        accessKeyId: '',
        secretAccessKey: '',
        sessionToken: '',
    },
    forcePathStyle: false,
    region: 'eu-west-2'
})

 Upload NFTs in batches:
 

import { Upload } from '@aws-sdk/lib-storage'
import { clinet } from './initS3Client.js'
let files = [] //  File Arrary
let Bucket = 'NFT_Bucket'
files.forEach(aysnc(file) => {
    try{
       const task = new Upload({
            client,
            Bucket,
            Key: 'YOUR_folder' + '/' + file.name,
            Body: file,
            ContentType: file.type
        })
        await task.done()
    }catch(error){
     console.log(error)
    }
})


// 同步到AR需要时间,可以等待几分钟后,获取 AR Hash(Tx ID) list:

let arHashPath = {}
files.forEach(aysnc(file) => {
    try{
       const data = await client.headObject({
           Bucket,
           Key: 'YOUR_folder' + '/' + file.name,
       })
        const meta = data.Metadata;
        arHashPath[file.name] = {id: meta["arweave-hash"] ?? ''}
    }catch(error){
     console.log(error)
    }
})

Generate the Manifests ID of the image

After obtaining the TxID of each NFT, it is assembled into the following json file according to the Path Manifests standard. For standard details, please refer to the official instructions.

//manifest-files.json 
{
  "manifest": "arweave/paths",
  "version": "0.1.0",
  "paths": {
    "01.jpeg": {
      "id": "ItVxP8RILEsBjTObeO_piBUME31mj9fa8XJ00v_A94o"
    },
    "02.jpeg": {
      "id": "eiCwWO60Qd8J6wz1ndB82jNgSDotAC8peN38ZAVonl4"
    },
    "03.jpeg": {
      "id": "YUHwbOdf2sSKdGps03qH9LJHX4caYKM5_BOdBpMXOxc"
    },
    "04.jpeg": {
      "id": "kD8Eft7JP82_u9whX710vzsSntn_WP07TgrSB2bGEso"
    },
    "05.jpeg": {
      "id": "KSeYJwZORk3BzelAazsmd6laGAAugHPMqHoXTZ0V4BE"
    }
  }
}

Then upload this manifest-files.json file to the bucket. You need to specify the Content-Type tag as application/x.arweave-manifest+json, and obtain the ArHash of this file as the Manifest ID of the image.


let manifestFile = {
  manifest: 'arweave/paths',
  version: '0.1.0',
  paths: arHashPath
}

let blob = new Blob([JSON.stringify(manifestFile)], {
  type: "application/json",
});
async function upload(){
    try{
       const task = new Upload({
            client,
            Bucket,
            Key: 'YOUR_folder' + '/' + 'manifest-files.json',
            Body: blob,
            ContentType: 'application/x.arweave-manifest+json'
        })
        await task.done()
    }catch(error){
     console.log(error)
    }
}
// 上传
await upload()


async function getMainfestArHash(){
    try{
        const data = await client.headObject({
           Bucket,
           Key: 'YOUR_folder' + '/' + 'manifest-files.json',
        })
        const meta = data.Metadata;
        if (meta) {
            return meta["arweave-hash"];
        }
        return "";
    }catch(error){
     console.log(error)
    }
}
// 同步到AR需要时间,可以等待几分钟后执行
const arHash =  await getMainfestArHash()
console.log(arHash)

The TxID obtained is udKzWCDO2PFvxHjiTRhNXuDslsE4jiKlu9A2gY1b1WE

Tip: If you have a lot of pictures, you can use the 4EVERLAND Hosting module to generate manifest IDs.

  1. Select your NFT folder in the bucket, click 'Snapshot' and switch to the snapshot list to publish the folder.

  2. Copy the ipfs cid in the snapshot, enter the hosting page, and enter the CID deployment in 'IPFS Deploy'

  3. Select 'Arweave' for the deployment platform. The AR Hash after successful deployment is the ManifestID of these images.

Create metadata for each NFT using Manifests ID

Generate metadata.json for each nft, taking 01.jpeg as an example, as follows

//文件名:0
{
    "name": "nft-ocean",
    "attributes": [
        {
            "trait_type": "tokenID",
            "value": "0"
        }
    ],
    "description": "nft-ocean image",
    //填入图片的ManifestID + '/'+文件名 
    "image": "ar://QmZ3Y31SwLU77CDfBoL5MphuSmrv414d2ZyunVcbNAJQRQ/01.jpeg"
}

Refer to the steps of uploading images above, name each nft metadata.json file with TokenID, upload it to the bucket, and reassemble the obtained TxIDs to generate a json file in Manifest format.

{
    "manifest":"arweave/paths",
    "version":"0.1.0",
    "paths":{
        "0":{
            "id":"JcFZfJEJrDKudQsRfN2JnsBPUQTynk0i5XfUqCBcERw"
        },
        "1":{
            "id":"vEUOeIky5hv2GlD2SP2d9TYAua2pkxYxehOczqTGqfU"
        },
        "2":{
            "id":"hd6bI2-c0gr-9ZZsoO8jn_CTRFqWIRwRj5WckgfbmEY"
        },
        "3":{
            "id":"PVAOd8D2JGCW5oOf4bulbQn2npcaaDAexY8sJKzZiEU"
        },
        "4":{
            "id":"lT4RbJEIGsqwwEZB0gxeT1x0nov40crEtBWDHgKQx80"
        }
    }
}

Upload this manifest-metadata.json file to the bucket, and indicate the content type as application/x.arweave-manifest+json. Get the ArHash (TxID) of this file. This ID is the BaseURI that ultimately needs to be set in the contract.

The TxID obtained in this case is: 2svkHmAC3So_M-LUtDlcDeqPZEwSZsY64AB9L8cA-Uk

Deploy NFT to contract

Please refer to the NFT contract deployment tutorial for specific steps . The previous steps are exactly the same. Skip the 'Prepare Resources' step and go directly to the step of setting the BaseURI.

We need to write the Manifest ID generated by the NFT metadata above into the BaseURI.

setBaseURI.js

require("dotenv").config()
const hre = require("hardhat");
const PRIVATE_KEY = process.env.PRIVATE_KEY
const NETWORK = process.env.NETWORK
const API_KEY = process.env.API_KEY


const provider = new hre.ethers.providers.InfuraProvider(NETWORK, API_KEY);
//编译完成合约会自动生成
const abi = require("../artifacts/contracts/NFT_WEB3_EXPLORER.sol/NFT_WEB3_EXPLORER.json").abi
const contractAddress = "合约地址"
const contract = new hre.ethers.Contract(contractAddress, abi, provider)
const wallet = new hre.ethers.Wallet(PRIVATE_KEY, provider)
const baseURI = "ar://2svkHmAC3So_M-LUtDlcDeqPZEwSZsY64AB9L8cA-Uk/" //metadata 的Manifest ID

async function main() {
  const contractWithSigner = contract.connect(wallet);
  //调用setBaseURI方法
  const tx = await contractWithSigner.setBaseURI(baseURI)
  console.log(tx.hash);
  await tx.wait();
  console.log("setBaseURL success");
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

 The subsequent steps are consistent with the tutorial. After completing mint, go to opensea to view.

Guess you like

Origin blog.csdn.net/MDJS_OSOS/article/details/132762223