
[TIPS] thirdwebのMINT時priceを表示する - thirdwebのフロントエンド実装
thirdwebのフロントエンド実装についての記事です。ReactでのNFTDropのMINTの価格の実装方法がわかります。
公開日2022.06.14
更新日2022.06.14
thirdwebのfront実装の小ネタ
thirdwebでNFTDropを使ったフロントエンド実装時に、 ユーザーにMINTする時のETHの価格を表示する方法は下記の通り。
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利用には必須なため、インストールしているはず。)
最新の記事

ClaudeCode スマホでリモート接続 - OpenClawはもう不要?! RemoteControlを使おう
Claude Code Remote Controlを使えば、PCで動作中のセッションをスマホやタブレットからそのまま操作できます。QRコード接続、セキュリティ設定、トラブルシューティングまで解説します。

OpenClaw × Solana 事例まとめ - 公式スキル・周辺プロダクト・使いどころ
OpenClawとSolanaが交わる実例(公式スキル、周辺プラグイン、取引・監視系プロジェクト、ハッカソン)を一次ソースのリンク付きで一覧にまとめます。

OpenClaw APIトークン節約 - Happy + Claude Codeで出先から開発・指示出し
Happyのプロセス切断をOpenClawで復帰させ、出先からいつでもClaude Code / Codexにリモートアクセスする方法を解説。APIトークンの節約と、スマホ1台で完結するAI開発ワークフローを紹介します。

FDE(Forward Deployed Engineering)とは - 中小企業のAI導入で活きる場面
FDE(Forward Deployed Engineering)はPalantirが体系化した顧客現場型エンジニアリング手法です。中小企業のAI導入においてFDEが活きる具体的な場面と、従来のSIer・コンサル・SaaSとの違いを解説します。

OpenClaw セキュリティと攻撃の実態 - CVE-2026-25253・プロンプトインジェクション・ClawHub
OpenClaw(旧Moltbot)への実際の攻撃事例を解説。CVE-2026-25253(1-Click RCE)、CVE-2026-24763(Docker脱出)、Zenity間接プロンプトインジェクション、ClawHubサプライチェーン攻撃と、ソースコードレベルの防御機構を詳述します。

OpenClaw 通信・接続の仕組み - なぜDiscordのメッセージでローカルのbashが動くのか
OpenClawはなぜDiscordやSlackからローカルのbashを操作できるのか?外向きWebSocket接続の仕組み、Gateway内部のメッセージフロー、Node.jsプロセスの権限継承まで、ソースコードを追いながら通信経路を解説します。
