[TIPS] thirdwebのMINT時priceを表示する - thirdwebのフロントエンド実装

thirdwebのfront実装の小ネタ

thirdwebでNFTDropを使ったフロントエンド実装時に、ユーザーにMINTする時のETHの価格を表示する方法は下記の通り。

typescript

import { useNFTDrop } from '@thirdweb-dev/react'
import { ethers } from 'ethers'
import { useEffect, useState } from 'react'

const Component: React.FC = () => {
  const nftDrop = useNFTDrop('<Your NFTDrop Address>')
  const [mintPrice, setMintPrice] = useState<string>('')

  useEffect(() => {
    nftDrop?.claimConditions.getActive().then((activeClaimCondition) => {
      setMintPrice(ethers.utils.formatUnits(activeClaimCondition.price._hex))
    })
  }, [])

  return <>{mintPrice}ETH</>
}

typescript

import { useNFTDrop } from '@thirdweb-dev/react'
import { ethers } from 'ethers'
import { useEffect, useState } from 'react'

const Component: React.FC = () => {
  const nftDrop = useNFTDrop('<Your NFTDrop Address>')
  const [mintPrice, setMintPrice] = useState<string>('')

  useEffect(() => {
    nftDrop?.claimConditions.getActive().then((activeClaimCondition) => {
      setMintPrice(ethers.utils.formatUnits(activeClaimCondition.price._hex))
    })
  }, [])

  return <>{mintPrice}ETH</>
}

解説

claim phase

NFTDropで作成したClaimPhasesで設定した、MINT条件を指す。

nftDrop?.claimConditions.getActive()

https://portal.thirdweb.com/typescript/sdk.dropclaimconditions.getactive

Metamaskを起動している自分のウォレットに対して、現在有効なclaimableな条件を取得する

ethers.utils.formatUnits(activeClaimCondition.price._hex)

_hexのパラメータはそのままだと人間には読めない文字列なので、 ethersのformatUnitsを利用して、ETH単位に変換する。

ethers Display Logic and Input https://docs.ethers.io/v5/api/utils/display-logic/#unit-conversion (ethersはethereumのjsライブラリ。thirdwebSDK利用には必須なため、インストールしているはず。)

この記事を書いた人

Webプランナー、開発会社の創業メンバーを経て、Fintech・DX・Web3の企画・開発に従事。2021年に独立し、2023年に株式会社hanzochangを設立。現在はAIを活用した業務改善と、自社サービス「指定管理者制度AI」の開発・運用に取り組んでいます。

Web3アプリ開発受託サービス

ウォレット連携やNFTを、使いやすいアプリに。

Solanaなどのブロックチェーンを使ったアプリを、企画・検証から開発・運用まで支援します。ウォレット連携やコントラクトだけでなく、利用者が操作する画面までまとめて設計します。

サービスの詳細を見る