⚗️
Alchemyの始め方【NFTの一覧取得】
Alchemyとは?
OpenSeaやAxie Infinityなどの大手のNFTマーケットプレイスやNFTゲームで使われる開発基盤プラットフォーム
使い方
今回は数ある機能の中から個人的にユースケースが高いと感じる「所持してるNFT一覧を表示する」を、実装しようと思います。AlchemyにはSDKやJSなど色々できますが、とりあえずSDKとJSを使おうと思います。
【SDK編】
import { Network, initializeAlchemy, getNftsForOwner } from "@alch/alchemy-sdk";
const settings = {
apiKey: "", //AlchemyのAPIキーを入れる
network: Network.ETH_RINKEBY,
maxRetries: 10,
};
const alchemy = initializeAlchemy(settings);
const tmpNFTs = await getNftsForOwner(alchemy, owner)
【REST API編】
const requestOptions = {
method: 'GET',
};
const apiKey = ''; //APIキーを入れる
const baseURL = `https://eth-rinkeby.alchemyapi.io/v2/${api_key}/getNFTs/`;
const fetchURL = `${baseURL}?owner=${owner}`;
const tmpNFTs = await fetch(fetchURL, requestOptions).then((data) => data.json());
コード例
指定したウォレットアドレスが所持しているNFTを一覧で取得して、そのNFTの名前を一覧で表示する機能
全体の流れ
基本的にはuseEffectでAPIからデータをフェッチして表示させる流れです。(useEffectがベストプラクティスじゃないよね系はご了承ください)本当はその前にウォレット接続などもありますが、今回は割愛しています。
【SDK編】
import { useState, useEffect } from 'react'
import { Network, initializeAlchemy, getNftsForOwner } from "@alch/alchemy-sdk";
const app = () => {
const [NFTs, setNFTs] = useState('');
const fetchData = async() => {
const settings = {
apiKey: "", //APIキーを入れる
network: Network.ETH_RINKEBY,
maxRetries: 10,
};
const owner = '0x' //ウォレットアドレスを入れる
const alchemy = initializeAlchemy(settings);
const tmpNFTs = await getNftsForOwner(alchemy, owner)
setNFTs(tmpNFTs);
}
useEffect(() => {
fetchData();
},[]);
return(
<div>
{NFTs && NFTs.map((item, index) => {
return(
<div>{item.title}</div>
)
})}
</div>
);
}
【REST API編】
import { useState, useEffect } from 'react'
const app = () => {
const [NFTs, setNFTs] = useState('');
const fetchData = async() => {
const requestOptions = {
method: 'GET',
};
const apiKey = ''; //APIキーを入れる
const baseURL = `https://eth-rinkeby.alchemyapi.io/v2/${api_key}/getNFTs/`;
const fetchURL = `${baseURL}?owner=${owner}`;
const tmpNFTs = await fetch(fetchURL, requestOptions).then((data) => data.json());
setNFTs(tmpNFTs);
}
useEffect(() => {
fetchData();
},[]);
return(
<div>
{NFTs && NFTs.map((item, index) => {
return(
<div>{item.title}</div>
)
})}
</div>
);
}
最後に
getNFTs以外にも便利な機能はたくさんあるので、documentを読みながら進めていくのが良いのかなって思います。
Discussion