NFTマーケット制作

Nuxt.jsによるNFTを売買できるマーケットサイトの構築

システム概要: 1、サイトにアクセス 2、MetaMaskと連携【出品時】 1、画像をアップロード。 2、出品価格を決め、出品ボタン押下によりMetaMaskに登録された名義でRinkebyブロックチェーンに登録。 3、出品時は手数料として0.025ETHがウォレットより支払われる。 4、購入されると、出品者として登録されたウォレットアドレス宛に出品価格分のETHが振り込まれる。【購入時】 1、購入するNFTを選択。 2、購入ボタン押下により、連携したMetaMaskウォレットから指定ETHが支払われる。 3、マイページを開くと、購入したNFTが追加されたことを確認できる。【売却時】 1、所有するNFTの中から売却するNFTを選択。 2、出品価格を決め、出品ボタン押下によりMetaMaskに登録された名義でRinkebyブロックチェーンに登録。 3、出品時は手数料として0.025ETHがウォレットより支払われる。 4、購入されると、出品者として登録されたウォレットアドレス宛に出品価格分のETHが振り込まれる。

技術: 【WEB】フロント：Next.js, TailwindCSS バック　：Solidity, hardhat サーバー：Netlify 【ブロックチェーン】ネットワーク：Rinkeby(Testnet) ウォレット　：MetaMask 取扱通貨　　：ETH

ツール: 【WEB】フロント・バック：VScode サーバー　　　　：Netlify 【ブロックチェーン】ネットワーク：Rinkeby(Testnet) ウォレット　：MetaMask 取扱通貨　　：ETH

制作ポイント: 【一言】ポートフォリオに付随してNFTマーケットなるものを作ってみました。正直ブロックチェーンには疎かったのですが、今回こちらを制作してみて少しは理解できた気がします。 METAMASKを使用すると実際に売買出来ますので、よろしければ触ってみてくださいね(※テストネットなので実質無料です) 【ポイント】課題点：PCだとChromeの拡張機能で自動的にMetaMaskが起動するが、モバイルだとそうはいかず面倒。 (モバイルの場合はMetaMaskアプリからアプリ内ブラウザ→サイトを開く→連携という手順が必要) 解決策：モバイルでのサイト閲覧時のみ、MetaMaskへのリンクを含んだフローティングボタンを表示する。これにより、ボタンを押下→MetaMaskアプリが起動→自動連携という簡略化されたフローを実現。