ブロックチェーン開発のはじめの一歩

version: '3'
services:
  nft_vote_front:
    container_name: nft_vote_front
    build: .
    ports:
      - "8080:8080"
    volumes:
      - "./work_space:/var/www/html"
    tty: true

FROM node:17-alpine3.14

WORKDIR /var/www/html

RUN apk update && \
    npm install -g npm && \
    npm install -g @vue/cli

EXPOSE 8080
ENV HOST 0.0.0.0

version: '3'
services:
  nft_vote_back:
    container_name: nft_vote_back
    build: .
    ports:
      - 13040:3000
    volumes:
      - ./work_space:/var/hardhat
    tty: true
    environment:
      - TZ=Asia/Tokyo
    networks:
      - default

networks:
  default:

FROM node:16.3-alpine

RUN apk update && \
  apk add git

RUN yarn install && yarn add -D \
  hardhat

WORKDIR /var/hardhat

//Contract based on 
ERC721 - OpenZeppelin Docs
docs.openzeppelin.com(https://docs.openzeppelin.com/contracts/3.x/erc721)
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";

contract MyNFT is ERC721URIStorage, Ownable {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;

    constructor() ERC721("MyNFT", "NFT") {}

    function mintNFT(address recipient, string memory tokenURI)
        public onlyOwner
        returns (uint256)
    {
        _tokenIds.increment();

        uint256 newItemId = _tokenIds.current();
        _mint(recipient, newItemId);
        _setTokenURI(newItemId, tokenURI);

        return newItemId;
    }
}

/** @type import('hardhat/config').HardhatUserConfig */
// module.exports = {
//   solidity: "0.8.9",
// };

require("@nomiclabs/hardhat-ethers");
const { API_URL, PRIVATE_KEY } = process.env;
module.exports = {
  solidity: "0.8.1",
  defaultNetwork: "rinkeby",
  networks: {
      hardhat: {},
      rinkeby: {
        url: API_URL,
        accounts: [`0x${PRIVATE_KEY}`]
      }
  },
}

async function main() {
  const MyNFT = await ethers.getContractFactory("MyNFT")

  // Start deployment, returning a promise that resolves to a contract object
  const myNFT = await MyNFT.deploy()
  await myNFT.deployed()
  console.log("Contract deployed to address:", myNFT.address)
}
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error)
    process.exit(1)
  })

{
    "attributes": [
      {
        "trait_type": "t1",
        "value": "aaa"
      },
      {
        "trait_type": "t2",
        "value": "bbb"
      }
    ],
    "description": "This is test",
    "image": "ipfs://QmVqiUqqPsV7E5rb8Fe9QrHnttdmNdRBAmvd7JXFqD49JD",
    "name": "Ramesses"
  }
  

：
  "dependencies": {
    "@mdi/font": "5.9.55",
    "core-js": "^3.8.3",
    "roboto-fontface": "*",
    "vue": "^3.2.13",
    "vue-router": "^4.1.2",
    "vuetify": "^3.0.0-beta.0",
    "webfontloader": "^1.0.0"
  },
：

<template>
    <v-container>
        <v-row class="text-center">
            <v-col cols="12">
                mint
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
export default {
  name: 'MintNft',

  data: () => ({
    //
  }),
}
</script>

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'
import MintNft from '@/components/MintNft.vue'

const routes = [
  {
    path: '/',
    name: 'mint',
    component: MintNft
  },
  {
    path: '/helloWorld',
    name: 'helloWorld',
    component: HelloWorld
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import router from './router/index'   // ★追加★

loadFonts()

createApp(App)
  .use(vuetify)
  .use(router)  // ★追加★
  .mount('#app')

<template>
  <v-app>
    <!-- ★コメントアウト★
    <v-main>
      <HelloWorld/>
    </v-main> -->
    <router-view />  <!-- ★追加 -->>
  </v-app>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'  // ★コメンアウト★

export default {
  name: 'App',

　 // components: { // ★コメンアウト★
  //   HelloWorld, // ★コメンアウト★
  // }, // ★コメンアウト★
</span>
  data: () => ({
    //
  }),
}
</script>

// ethersをインポート
import { ethers } from "ethers"

// デプロイしたコントラクトアドレス
const contractAddress = process.env.VUE_APP_CONTRACT_ADDRESS
// コントラクトアドレスのABI. polygonscanからコピペ
const contractAbi = '[{"inputs":[],"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"owner","type":"address"},{"indexed":true,"internalType":"address","name":"approved","type":"address"},{"indexed":true,"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"owner","type":"address"},{"indexed":true,"internalType":"address","name":"operator","type":"address"},{"indexed":false,"internalType":"bool","name":"approved","type":"bool"}],"name":"ApprovalForAll","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"previousOwner","type":"address"},{"indexed":true,"internalType":"address","name":"newOwner","type":"address"}],"name":"OwnershipTransferred","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"from","type":"address"},{"indexed":true,"internalType":"address","name":"to","type":"address"},{"indexed":true,"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"Transfer","type":"event"},{"inputs":[{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"approve","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"owner","type":"address"}],"name":"balanceOf","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"getApproved","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"owner","type":"address"},{"internalType":"address","name":"operator","type":"address"}],"name":"isApprovedForAll","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"recipient","type":"address"},{"internalType":"string","name":"tokenURI","type":"string"}],"name":"mintNFT","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"name","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"ownerOf","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"renounceOwnership","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"from","type":"address"},{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"safeTransferFrom","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"from","type":"address"},{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"},{"internalType":"bytes","name":"data","type":"bytes"}],"name":"safeTransferFrom","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"operator","type":"address"},{"internalType":"bool","name":"approved","type":"bool"}],"name":"setApprovalForAll","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"bytes4","name":"interfaceId","type":"bytes4"}],"name":"supportsInterface","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"symbol","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"tokenURI","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"from","type":"address"},{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"transferFrom","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"stateMutability":"nonpayable","type":"function"}]'
// web3のプロバイダを取得
const provider = ((window.ethereum != null) ? new ethers.providers.Web3Provider(window.ethereum) : ethers.getDefaultProvider());

// ウォレットを接続する
export async function connectWallet(_requestName) {
    var requestMethod

    // eth_accountsはReloadで使用。今回はeth_requestAccountsのみ使用。
    if (_requestName == 1) {
        requestMethod = "eth_accounts"
    } else if (_requestName == 2) {
        requestMethod = "eth_requestAccounts"
    }

    // MetaMaskが入っているかチェック
    const { ethereum } = window;
    if (!ethereum) {
        throw new Error("Get MetaMask!")
    }

    // RinkebyのchainIDは4
    let chainId = await provider.getNetwork();
    if (chainId.chainId != 4) {
        throw new Error("Set Network to Rinkeby!")
    }

    // 接続要求
    const accounts = await ethereum.request({ method: requestMethod, });
    console.log("Connected", accounts[0]);

    return accounts[0]
}

// mint呼び出し用。
// トランザクション管理したいところだけど今回は妥協
async function _mintNFT(accout, tokenURI) {
    // 署名付きのコントラクトインスタンスを取得
    const contractInstance = new ethers.Contract(contractAddress, contractAbi, provider.getSigner(0))
    
    // mintNFTを呼び出す
    contractInstance.mintNFT(accout, tokenURI)

}

// 呼び出し用mint関数 ipfs...はpintaに格納したjsonファイル
export function mintNFT(accout) {
    _mintNFT(accout, "ipfs://QmXF8K3ABsat9kMpqSwMWG2tG2GtnrtoVMJJTK4oJw1fzw")
}

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="1">
        <h3>1.</h3>
      </v-col>
      <v-col cols="3">
        <v-btn :disabled="isLogin" @click="connectWallet" color="success">
          Connect Wallet
        </v-btn>
      </v-col>
      <v-col cols="3">
        <h5>{{ walletAddress }}</h5>
      </v-col>
    </v-row>
    <v-row class="text-center">
      <v-col cols="1">
        <h3>2.</h3>
      </v-col>
      <v-col cols="3">
        <v-btn :disabled="cannotMint" @click="mintNft" color="success">
          Mint
        </v-btn>
      </v-col>
      <v-col cols="3">
        <h5>{{ resultMessage }}</h5>
        <a href="https://rinkeby.etherscan.io/address/0x55D48E856DB1933A2F63d30eb0055b8840B1B165"
        target="_blank">rinkeby</a>
      </v-col>
    </v-row>
    <v-row class="text-center">
      <v-col cols="12">
        <v-alert v-if="errorMessage" type="error">
          {{ errorMessage }}
        </v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>

import * as connectContract from '../contract/connectContract'

export default {
  name: 'MintNft',

  data: () => ({
    walletAddress: "",
    isLogin: false,
    cannotMint: true,
    errorMessage: "",
    resultMessage: ""
  }),

  methods: {
    connectWallet: async function () {
      try {
        this.walletAddress = await connectContract.connectWallet(2)
        this.isLogin = true
        this.cannotMint = false;
      } catch (error) {
        console.log(error)
        this.errorMessage = String(error)
      }
    },
    mintNft: async function () {
      try {
        connectContract.mintNFT(this.walletAddress)
        this.resultMessage = "Check the result on ehterscan."
      } catch (error) {
        console.log(error)
        this.errorMessage = String(error)
      }
    }
  }
}
</script>