关于前端:在-Arweave-中轻松管理文件借助-4EVERLAND-完成-Web3-前端Path-Manifests的终极指南

47次阅读

共计 5095 个字符,预计需要花费 13 分钟才能阅读完成。

为什么应用 Path Manifests?

当在 IPFS 上公布 NFT 时,图片和元数据会被上传到 IPFS 网络以取得一个根 CID,其模式如下:

ipfs://bafybeic36ik6cngu37xbzmpytuvyo7z3lyeen44clkkxq5d263zj4nkzr4

通过应用这个根 CID,每个 NFT 的图片门路能够依照 root cid/’file name 的格局来定义。例如,一个 NFT 的元数据中的图片门路可能如下所示:

ipfs://bafybeie7byrnb3vo2lc2lwaqm5lox6jiow5ntzod3aoquki36gtirdhodm/0.png

同样地,Arweave 容许应用门路清单来打包 NFT,提供基于门路拜访的益处。例如:https://arweave.net/Bgw5-GwpymUoe5VMeb-No9WWXpjWsq_8g4oeiGP5R… 这种办法比在 Arweave 上为每个存储的图像应用独立的 ID 更为有序,后者看起来会像这样:https://arweave.net/ISvPQyG8qWzJ1Pv5em5xK8Ht38HZ3ub1fPHbFEqDPK0

如何创立 NFT
上面解说如何应用 4EVERLAND Bucket + Path Manifests 将 NFT 文件存储到 Arweave 网络中。

创立 Bucket 并上传 NFT 文件
首先,须要在 4everland dashboard 创立一个 bucket 并开启 Sync to AR 按钮

而后,在 Bucket 中将您的 nft 文件夹上传,获取所有 nft 的 TxID, 除了在 dashboard 中手动操作外,您也能够应用 S3 Compatible API 上传获取。

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'
})

批量上传 NFT:

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)
    }
})

生成图片的 Manifests ID

获取到每张 NFT 的 TxID 后,依照 Path Manifests 规范汇合成如下 json 文件,规范详情能够参考官网阐明

//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"}
  }
}

而后将此 manifest-files.json 文件也上传到 bucket,须要规定 Content-Type tag 为 application/x.arweave-manifest+json,获取此文件的 ArHash 作为图片的 Manifest ID


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)

获取到 TxID 为 udKzWCDO2PFvxHjiTRhNXuDslsE4jiKlu9A2gY1b1WE 小窍门:如果你的图片很多,能够巧用 4EVERLAND Hosting 模块来生成 manifest ID

在 bucket 中选中您的 NFT 文件夹,点击‘Snapshot’ 并切换到 snapshot 列表对文件夹进行 publish。

复制 snapshot 中的 ipfs cid,进入 hosting 页面,在‘IPFS Deploy’ 中输出 CID 部署

部署平台抉择 ’Arweave’,部署胜利后的 AR Hash 便是这些图片的 ManifestID

应用 Manifests ID 为每张 NFT 创立 metadata

为每张 nft 生成 metadata.json, 以 01.jpeg 为例,如下

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

参考下面上传图片的步骤,将每张 nft 的 metadata.json 文件以 TokenID 命名后,上传到 bucket,并将获取到的 TxIDs 再次汇合生成一个 Manifest 格局的 json 文件。

{
    "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"}
    }
}

将此 manifest-metadata.json 文件上传 bucket, 并注明 content type 为 application/x.arweave-manifest+json,获取此文件的 ArHash (TxID), 此 ID 便是最终须要设置在合约外面的 BaseURI。
本案例获取到的 TxID 为:2svkHmAC3So_M-LUtDlcDeqPZEwSZsY64AB9L8cA-Uk

将 NFT 部署到合约

具体步骤请参考 NFT 合约部署教程 ,后面步骤完全一致,到‘筹备资源 ’ 步骤时跳过,间接到设置 BaseURI 步骤。
咱们须要将下面 NFT metadata 生成的 Manifest ID 写入到 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);
  });

后续步骤与教程统一,实现 mint 后到 opensea 查看。


对于 4EVERLAND

4EVERLAND 是一个集成存储、计算和网络外围能力的 Web 3.0 基础设施。它旨在帮忙用户从 Web 2.0 平滑逾越到 Web 3.0,并成为数百万 Web 3.0 开发人员和应用程序的基础设施。

Website | Twitter | Telegram | Discord | Reddit | Medium | Email

正文完
 0