thirdwebのfront実装の小ネタ
目次
解説
claim phase
nftDrop?.claimConditions.getActive()
ethers.utils.formatUnits(activeClaimCondition.price.\_hex)
https://s3.ap-northeast-1.amazonaws.com/hanzochang.com/_v2/article-ogp-011.png

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

thirdwebのフロントエンド実装についての記事です。ReactでのNFTDropのMINTの価格の実装方法がわかります。

公開日2022.06.14

更新日2022.06.14

Crypto

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条件を指す。

11_01 (1).png

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利用には必須なため、インストールしているはず。)

picture
hanzochang - 半澤勇大
慶應義塾大学卒業後、Webプランナーとして勤務。 ナショナルクライアントのキャンペーンサイトの企画・演出を担当。 その後開発会社に創業メンバーとして参加。 Fintech案件や大手企業のDXプロジェクトに関わり、その後個人事業主として独立し、 2023年にWeb3に特化した開発会社として法人化しました。 現在はWeb3アプリ開発を中心にAI開発フローの整備を行っています。
また、趣味で2017年ごろより匿名アカウントでCryptoの調査等を行い、 ブロックチェーンメディアやSNSでビットコイン論文等の図解等を発信していました。
X (Twitter)

最新の記事

x402 × Solana実装ガイド | 支払い対応MCPサーバーをTypeScriptで構築する

x402 × Solana実装ガイド | 支払い対応MCPサーバーをTypeScriptで構築する

x402 V2プロトコルのSolana実装を徹底解説。SVM exact schemeの仕組みから、@x402/mcpパッケージを使った支払い対応MCPサーバーの構築まで、実際のコードとともにステップバイステップで解説します。

x402 V2 解説 | Solana等マルチチェーン対応・OpenClawの自動売買にも利用されるHTTP決済プロトコル

x402 V2 解説 | Solana等マルチチェーン対応・OpenClawの自動売買にも利用されるHTTP決済プロトコル

累計$600M超のボリュームを記録するHTTP決済プロトコルx402がV2で大幅進化。Solana等のマルチチェーン対応、Extensions拡張機構、Discovery APIを解説。OpenClaw FoundryやClawRouterなどAIエージェントの自動売買での採用事例も紹介します。

x402とは? AIエージェント × MCP × 暗号資産が交差するHTTP自動決済プロトコル

x402とは? AIエージェント × MCP × 暗号資産が交差するHTTP自動決済プロトコル

HTTP 402を活用した決済プロトコル「x402」の入門ガイド。暗号資産(USDC)即時決済、AIエージェントによるMCP経由の自動購入、マルチチェーン対応まで、全体像を解説します。

ClaudeCode スマホでリモート接続 - OpenClawはもう不要?! RemoteControlを使おう

ClaudeCode スマホでリモート接続 - OpenClawはもう不要?! RemoteControlを使おう

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

OpenClaw × Solana 事例まとめ - 公式スキル・周辺プロダクト・使いどころ

OpenClaw × Solana 事例まとめ - 公式スキル・周辺プロダクト・使いどころ

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

OpenClaw APIトークン節約 - Happy + Claude Codeで出先から開発・指示出し

OpenClaw APIトークン節約 - Happy + Claude Codeで出先から開発・指示出し

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