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

thirdwebのfront実装の小ネタ

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?.claimConditions.getActive()

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