今回は、ReactでdAppsを開発する際に欠かせない『Web3React』ライブラリを使って、ENS（Ethereum Naming Service）のドメイン名を取得する方法について解説していきます。
目次
Web3Reactを使ってENSを取得する方法
結論、以下のようにしてアドレスに紐づいたENSを取得できます。
import { useWeb3React } from '@web3-react/core';
import { ethers } from 'ethers';
import React, { useEffect, useState } from 'react';
const ENS = () => {
const [ens, setEns] = useState('');
const { account, library } = useWeb3React<ethers.providers.Web3Provider>();
useEffect(() => {
if (!account) {
setEns('');
return;
}
const load = async () => {
if (!library) {
return;
}
const ens = await library.lookupAddress(account);
setEns(ens ?? '');
};
load();
}, [account]);
return <p>{ens || `No ENS detected`}</p>;
};
export default ENS;
上記のENSコンポーネントをENSを表示したい箇所に配置すれば、ENSまたは「No ENS detected」を画面上に表示できます。
上記のコンポーネントは、Web3Providerでラップされているコンポーネント配下でのみ使用可能です。
（useWeb3Reactを使って、activateしているアカウントアドレス（account）とproviderのlibraryに処理が依存しているため。）
ENSを取得している部分
上記コードでENSを取得している部分は、以下の部分です。
const ens = await library.lookupAddress(account);この記述で、アドレスに紐づくENSを取得できます。
上記メソッドに関して詳しく知りたい方は公式ドキュメントをご参照ください。
まとめ：Web3Reactを使ってENSを取得する方法
今回は、Web3Reactを使ってENSを取得する方法を解説しました。
Web3Reactのおかげもあり、たった数行で取得できて使いまわせるのは、便利ですね。
コメント