![見出し画像](https://assets.st-note.com/production/uploads/images/108007144/rectangle_large_type_2_271d06691e54273a944276eb07f4cb12.png?width=1200)
Photo by
mayonaka0000
【完全保存版】thirdwebを用いた、Astarコントラクトの作成・フロント連携について
1 ダッシュボードからのAstarコントラクトの作成について
こちらの記事を元にして、Astarのコントラクトを作成することができます。
上の記事の第2章1節の「テストネットの選択」の部分を下のように、「Astar」にするだけです。
![](https://assets.st-note.com/img/1686480701464-12PLr9x7Rl.png?width=1200)
できましたら、blockscoutでも確かめてみましょう。
2 CLIからのコントラクト作成について
こちらのコマンドを実行します。
npx thirdweb@latest create contract
今回は「Hardhat」で「Empty Contract」を選択しました。
![](https://assets.st-note.com/img/1686480958716-Xvu7aElAmz.png?width=1200)
コントラクトを作成します。
今回は、「Remix」のサンプルコードをそのまま使っています。
![](https://assets.st-note.com/img/1686481097174-SrIyeYjznD.png?width=1200)
ディレクトリを移動し、次のコマンドを実行します。
npx thirdweb deploy
![](https://assets.st-note.com/img/1686481206020-TLGSuLDBGM.png?width=1200)
すると、このように自動的にthirdwebのページが立ち上がります。
チェーンを「Astar」にした上で、「Deploy Now」
![](https://assets.st-note.com/img/1686527602622-3THmFNvnk3.png?width=1200)
これにより、コントラクトができました。
![](https://assets.st-note.com/img/1686527734574-bE1NC6iO7A.png?width=1200)
「Explorer」で処理を実行することもできます。
![](https://assets.st-note.com/img/1686527837540-fKBE5jI0ZA.png?width=1200)
「Blockscout」を確認すると、トランザクションが実行されていることが確認できました。
![](https://assets.st-note.com/img/1686528020382-P23km8k7Qx.png?width=1200)
3 thirdweb SDKを使ってフロントエンドと連携させよう
thirdwebでプロジェクトを作るには、こちらのコマンドを実行します。
npx thirdweb create --app
![](https://assets.st-note.com/img/1686528490400-YmlXQDGUPZ.png?width=1200)
ただ、今回は、具体的な連携方法を見たいので、こちらの記事をご確認ください。
コントラクトアドレスはこちらを使ってみます。
ちなみに、Astar用に変更するのはこの箇所だけです。
![](https://assets.st-note.com/img/1686528826962-qTdYimjYDM.png?width=1200)
これは、thirdwebのダッシュボードの「Build」に書き方が記載されています。
![](https://assets.st-note.com/img/1686529066769-hR4gI7g0Hp.png?width=1200)
他にも、例えば、全てのNFTを取得する際のコードの書き方など、かなり明確に記載されています。
![](https://assets.st-note.com/img/1686529379384-Ivg8cuYr0i.png?width=1200)
このようにして、Astar のDappsをthirdwebでスムーズに作ることができます。
よかったら試してみてください!
その他
・ウォレット接続
<ConnectWallet />
・Web3ボタン
<Web3Button
contractAddress="0x045dABD0b79dB323fc18f8089741C26E17F5214e"
action={(contract) => {
contract.erc721.claim(1)
}}
>
claim
</Web3Button>
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊