NFT一覧をビジュアル化

AraさんがNFT一覧をビジュアル化できるすばらしいコントラクトを公開しました。

Snapshot ― オンチェーンでアクセス可能な所有履歴の価値

ここではビジュアル化までの手順を紹介しようと思います。メインネットのアカウントが必要なので御注意ください。

1. スナップショットの作成

snapshot.cdc

import Snapshot from 0x36b1a29d10c00c1a
import SnapshotLogic from 0x36b1a29d10c00c1a

transaction(address: Address) {
    prepare(signer: AuthAccount) {
        if signer.borrow<&Snapshot.Album>(from: Snapshot.AlbumStoragePath) == nil {
            signer.save(<- Snapshot.createEmptyAlbum(), to: Snapshot.AlbumStoragePath)
            signer.link<&{Snapshot.AlbumPublic}>(Snapshot.AlbumPublicPath, target: Snapshot.AlbumStoragePath)
        }
        let album = signer.borrow<&Snapshot.Album>(from: Snapshot.AlbumStoragePath)!
        let logic = SnapshotLogic.BasicLogic()
        album.snapshot(address: address, logic: logic)
    }
}

flow transactions send snapshot.cdc ビジュアル化したいウォレットのアドレス --signer=あなたのアカウント名 --network=mainnet

2. ビューの元になるファイルを出力
   ビューのHTMLの作成方法は色々あると思いますが、ここではJSON形式で出力してからHTMLのコードを取り出す方法を紹介します。

snapshotview.cdc

import Snapshot from 0x36b1a29d10c00c1a
import SnapshotViewer from 0x36b1a29d10c00c1a

pub fun main(address: Address): AnyStruct {
        let account = getAccount(address)
        let album = account.getCapability(Snapshot.AlbumPublicPath).borrow<&{Snapshot.AlbumPublic}>()!
        return album.view(time: album.snaps.keys[0], viewer: SnapshotViewer.BasicHTMLViewer())
}

flow scripts execute snapshotview.cdc あなたのアドレス -o json --network=mainnet > view_ori

Pythonを使ってJSONからHTMLのコードを出力します。かなり雑なコードですがご容赦を。

conv.py

import json
import sys

with open(sys.argv[1]) as f:
    print(json.loads(f.read())["value"])

python conv.py view_ori > view.html

あとはブラウザでview.htmlを開くだけです!