【保存版】徹底解説！ImmutableX上のNFTをETHチェーンに持って行く方法
こんにちは、CryptoGamesの高橋です。
クリスペをやっている会社です。
また、最近、ImmutαbleXでのコレクティブNFTを発表したCryptoMaidsチームのアンバサダーに就任しました。
本日はImmutαbleXでのあれやこれやをかなり網羅的に説明していきたいと思います。
では、早速見ていきましょう。
１ サンプルマーケットプレイスを立ち上げる
まずは、公式が公開しているサンプルのマーケットプレイスを立ち上げてみましょう。
これを実際に触りながらやると理解が深まると思います。
１ー１ git cloneを行う
こちらのプロジェクトを落としてきましょう。
もし「git cloneって何？」という場合は、下の記事の第２章の２で解説しておりますので、ご参考までに。
こんな感じで落としてきました。
１ー２ 「.env」ファイルを作成する
「.env.example」から「.env」ファイルを作りましょう。
コピーしてファイル名を変えるだけです。
中身は特に変えていません。
１ー３ 依存関係のインストール
できたディレクトリに行き、依存関係をインストールしましょう。
（yarn installがうまくいかなかったので、npm installをしています。）
cd imx-reactjs-integration-example
npm install下のようになれば成功です。
１ー４ ローカルで立ち上げる
次のコマンドを実行してみてください。
npx yarn startしばらくすると、「localhost:3000」でこのように立ち上がると思います。
これで立ち上げ成功です。
２ ウォレットの接続を行う
２ー１ ウォレットにRopstenのETHを入れる
まずは、ウォレットにテスト用のRopsetnのETHを入れましょう。
このように、ウォレットアドレスを入れて「Send me test Ether」を選択するとテスト用のETH（Ropsten）が受け取れます。
２ー２ ウォレット接続する
「Setup」を選択すると、ポップアップが立ち上がります。
進んでいきましょう。
下のように初回の接続時には、ImmutableX Keyの設定が必要です。
内容に同意ができたら、チェックをつけて先に進んでみましょう。
最後まで行くと、このように接続が完了しました。
しかし、実はこのウォレット、Ropstenが0.5ETH入っています。
でも表示は０となっています。ここは後で触れていきます。
２ー３ ウォレット接続をコードで確認する
ではウォレット接続時のコードを見てみましょう。
「App.tsx」を見てみると、、なんと接続自体は１行だけでした。
ちなみに、その下の２行のコードは接続時に取得した
① ウォレットアドレス
② バランス（残高）
を格納している処理です。
なお、ImmutableXの処理を行う際には、下のように
① Link
② ImmutableXClient
の２つが非常に大事です。
今回はこのうち、「Link」を使っていました。
３ ETHの預け入れ（Deposit）を行う
３ー１ ETHの残高が異なる？
下のように、私の場合、テスト用のウォレットに0.5ETHあるにもかかわらず、表示は０になっています。
これは、ImmutableXへ預けている（deposit）ETHが0であることを示しています。
３ー２ Depositを行う
では、Depositを行っていきましょう。
「Deposit and withdrawal」に行き、預けたいETHを入力してから「Deposit ETH」を選択します。
ちなみに、進んでいくと、このようにガス代がかかることがわかります。
今回はテスト用のETHなので、実際のお金は痛みませんが、どのタイミングでガス代が発生するかということは抑えておくのが良いと思います。
このように、Withdraw時にガス代が発生します。
少し時間をおいて更新すると、上のようにETHが入ったことがわかります。
３ー３ depositをコードで確認する
では、コードを見てみましょう。
「Bridging.tsx」を見ると下のようになります。
link.deposit()に、次の２つを渡しているだけでした。
①type （何をdepositするか ここではETH）
②amount（いくらdepositするか）
とてもシンプルですね。
４ マーケットプレイスを表示しよう
ETHをdepositしたので、何か買いたいです。
「Marketplace」の構成を見てみましょう。
４ー１ マーケットプレイスの構成
文字がたくさんでわかりにくいですが、実態はあまり難しくないと思います。
ざっくりと、次のような構成になっています。
{order_id:5574, 注文ID：5574の詳細 },
{order_id:5349, 注文ID：5349の詳細 },
{order_id:4888, 注文ID：4888の詳細 },
そして、最初の注文ID：5574の価格は、なんと1,555ETH（笑）
買わせる気がないですねw
ちなみに、weiとETHの変換は、このサイトが便利です。
こんな感じで変換することができます。
４ー２ マーケットプレイスをコードで確認する
「Mαrketplace.tsx」を見てみると、下のように「client.getOrders()」で注文情報を取ってきているようです。
そして、「client」の元は「ImmutableXClient」です。こちらも非常に大切なツールです。
そして、userの部分に注目してください。
こちらは「0xc120a52ad90bb926bafcdfc9161740dcf4a2cea1」のユーザーの注文（販売）情報を取ってきていたようです。
4−３ マーケットプレイスを自分のウォレット情報に変更しよう
もし、ご自身でImmutableXのNFTを作成していないようでしたら、ぜひこちら、ご確認ください。
また、私のこちらのテストウォレットを試しに使ってみても大丈夫です。
0x961aEa560D4C38B08D9300D8219062Fe853c8315
こんな感じで変更してみましょう。
マーケットプレイスを見てみると、変わったはずなんですが、、いまいちよくわからないですね。
次の章で細かく見てみましょう。
４ー４ ImmutαbleXのマーケットプレイスで販売状態にする
では、ImmutαbleXのテストのマーケットプレイスに行き、NFTを販売状態にしてみましょう。
（↑自分の在庫状況が表示されるため、ImmutableXでNFTを作っていない場合は表示されないと思います。）
こちらを販売状態にしてみましょう。
このNFTを選択してみます。
「List for sale」を選択します。
また、このトークンアドレスとトークンIDは後ほど参照していきます。
トークンアドレス：0x864c6f6c32d2584e717c91d510f193e6ce4d3f76
トークンID：8
下のように0.02ETHで販売状態にしました。
下のように、0.02 ETHで販売状態になりました！
さて、これがローカルで表示されているかを確認してみましょう。
４ー５ マーケットプレイスで確認する
さて、ではマーケットプレイスを見てみると。。
下のようにorder_id:21310として、先ほど販売状態にしたNFTがマーケットに並んでいることがわかります。
４ー６ assetbookとorderbook
上を実現しているのが、このassetbookとorderbookです。
ざっくりとですが、次のようになります。
assetbook：アセット情報を共有する
orderbook：注文情報を共有する
今回やったことは
① ImmutableXのマーケットプレイスで販売したものを
② 別のマーケットプレイスで見ることができ
③ 購入することができる（これは後ほど）
であり、冷静に考えると、結構すごい仕組みではと思います。
これはアセットや注文の情報を共有することで可能になっています。
５ NFTを購入してみよう
５−１ 購入の流れ
では、４ー４で販売状態にしたNFTを購入してみましょう。
order_idを入れて、Buyを押すと、ポップアップが出てきます。
最後まで行くと購入が完了します。
そして「Inventory」で自分の所有しているアセットを見てみると、下のように購入できていることがわかります。
５ー２ 他のマーケットプレイスへの反映
他のマーケットプレイスである、ImmutableXのマーケットプレイスを見てみましょう。
「assetbook」「orderbook」の機能により、このように他のマーケットプレイスにも反映が行われることが確認できました。
５ー３ 購入をコードで確認しよう
「Marketplace.tsx」を見ると下のようになっていることがわかります。
「link.buy」とするだけで、購入のポップアップが立ち上がるようになります。
６ ImmutableXのNFTをメインチェーンに持って行く
６ー１ 概要
ImmutαbleXのNFTをメインチェーンに持って行く際には大きく２つのプロセスを経ることになります。
① prepare withdrawal（準備）
② complete withdrawal（実施）
まずは①のprepare withdrawalを行い、withdrawable state（引き出し可能な状態）にします。
６ー２ prepare withdrawal（準備）
では、実際にやってみましょう。
下のように、トークンIDとトークンアドレスを入れることでポップアップが立ち上がります。
そのまま進めていくとprepare withdrawalが完了します。
しばらくすると、下のように「Withdrawals being prepared」となり、引き出しの準備を行っている状態になります。
まだこの状態では引き出しはできません
６ー３ prepare withdrawalをコードで見てみよう
下のように、「Bridging.tsx」を見ると、「link.prepareWithdrawal」で実装していることがわかります。
６ー４ 引き出し可能状態の確認
６ー２によって「Withdrawals being prepared」という状態になりましたが、まだ準備中なので、すぐに引き出しができません。
しばらく待つと（数時間以上かかるかも）下のように「Ready for withdrawal」（引き出し準備）という状態になります。
ポイントとしては「rollup_status」が「 confirmed」になったことです。
確認が完了したようですね。これでwithdrawができます。
６ー５ withdrawal引き出しの実行
では、実際にWithdrawを行ってみましょう。
下のように「Complete NFT Withdrawal」を選択すると、ポップアップが立ち上がります。
進んでいくと、下のように、ガス代が発生することがわかります。
ガス代が発生するタイミングは限られているので、いつ発生するのかを抑えておくのは良いと思います。
完了したら、Etherscanを見てみます。
下のように完了したことがわかります。
ここもポイントだと思いますが、Withdrawの際に、同時にミントも行われるというのは大事なところだと思います。
せっかくなので、ステータスがどう変わったのかも見てみましょう。
上のように「withdrawn_to_wallet」が「true」となったことで引き出しが完了したことがわかりました。
６ー６ コードで見てみよう
「Bridging.tsx」を見てみましょう。
下のように、「link.completeWithdrawal()」で実装しています。
やはり、コードはとてもシンプルであることがわかりました。
７ NFTを販売しよう
７ー１ 販売の流れ
では、次にNFTを販売状態にしましょう。
下のようにすると、やはりポップアップが立ち上がります。
最後まで進めて行くと、販売状態にすることができます。
ImmutαbleXのマーケットプレイスに行くと、下のように販売状態になっていることがわかります。
７ー２ 販売のコードを見てみよう
「Inventory.tsx」を見てみましょう。
販売額とトークンID、トークンアドレスを渡すことで実装していますね。
８ 販売をキャンセルする
８ー１ キャンセルの流れ
次のように「Cancel」を行うことで、ポップアップが立ち上がり、進めて行くと、キャンセルを実行できます。
下のように、ImmutableXのマーケットプレイス上でも販売状態がキャンセルされました。
８ー２ コードでも見てみよう
「Inventory.tsx」 を見ると、下のようになります。
orderIdを渡しているだけの、とてもシンプルな作りですね。
９ ETHをImmutableXから引き出そう
９ー１ 概要
基本的には第６章のNFTの引き出しと同じ流れです。
大きく２つのプロセスを経ることになります。
① prepare withdrawal（準備）
② complete withdrawal（実施）
まずは①のprepare withdrawalを行い、withdrawable state（引き出し可能な状態）にします。
９ー２ prepare withdrawal（引き出し準備）
Prepare ETH Withdrawalを選択すると、ポップアップが立ち上がり、引き出し準備を行います。
注意点としましては、引き出しが完了していないこの時点で、DepositされているETHは差し引かれた金額になります。
９ー３ コードを見てみよう
「Bridging.tsx」を見ると、次のようになりました。
typeとamount（量）を入れることで実装できるのですね。
９ー４ 引き出し可能状態の確認
下のように「Ready_for_withdrawal」となっていれば、引き出しを実行できます。（この状態になるまで数時間以上かかるかもしれません。）
具体的には「rollup_status」が「confirmed」となったことで、引き出しができるようになります。
９ー５ 引き出しの実行
では、下のように「Complete ETH Withdrawal」を実行してみましょう。
このようにポップアップが立ち上がります。
ちなみに、下のようにガス代が発生します。
このように、どこでガス代が発生するのかも抑えるのが良いと思います。
最後まで行けば、引き出し完了です。
９ー６ コードを見てみよう
「Bridging.tsx」を見てみましょう。
このようにシンプルに実装されています。
１０ NFTの送付
１０ー１ NFT送付の流れ
下のように「transfer」を選択すると、ポップアップが立ち上がります。
なおこちらはサンプルに入っていなかったので、個別で実装したものです。
ImmutαbleXのマーケットプレイスを見てみると、送付されたことが確認できました。
１０ー２ コードを見てみよう
下のように、link.transfer()を実施することで実装ができます。
渡す値がドキュメントと少し違いましたので、ご注意ください。
１１ NFTの一括送付
最後にNFTの一括送付についてです。
下のように一括でNFTの送付も可能です。ポイントは「confirm」は一回で大丈夫というところだと思います。
ImmutableXのマーケットプレイスでも下のように確認ができました。
今回は以上です。
ぜひ皆さんもやってみてください。
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊