Avatar
0
monkey Enlightened
monkey Enlightened
Dự án NFT đơn giản với Metamask và Web3: Code html và javascript đầy đủ
Sau tất cả các bước, cuối cùng chúng ta sẽ có 1 index.html với phần javascript đầy đủ thế này:

const ethereumButton = $('#enableEthereumButton');
const signButton = $('#signButton');
const awardItemButton = $('#awardItemButton');
const showAccount = $('#showAccount');
const showBalance = $('#showBalance');
const showSignatureText = $('#showSignatureText');
const recoverText = $('#recoverText');
const messageInput = $('#messageInput');
const contractInfoText = $('#contractInfoText');
const tokenOwnerInput = $('#tokenOwnerInput');
const tokenURIInput = $('#tokenURIInput');
const tokenIdText = $('#tokenIdText');

var account = '';

async function getAccount() {
  const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
  account = accounts[0];
  web3.eth.defaultAccount = account;
  showAccount.text(account);
  getBalance();
  getContract();
}

async function getBalance() {
  const balance = await ethereum.request({
    method: 'eth_getBalance',
    params: [
      account,
		  "latest"
    ]
  });
  showBalance.text(parseInt(balance, 16));
}

async function sign() {
  const message = stringToHex(messageInput.val());
  const signature = await ethereum.request({
    method: 'personal_sign',
    params: [
      message,
      account
    ]
  });
  showSignatureText.text(message, signature);
  recover(message, signature);
}

async function recover(message, signature) {
  const recoverValue = await ethereum.request({
    method: 'personal_ecRecover',
    params: [
      message,
      signature
    ]
  });
  recoverText.text(recoverValue);
}

var contract;
const web3 = new Web3(ethereum);
function getContract() {
  $.get(
    "/contract",
    function(data, status) {
       console.log('contract: ', data.address);
       web3.eth.Contract.defaultAccount = account;
       contract = new web3.eth.Contract(data.abi, data.address);
       contract.address = data.address;
       contract.abi = data.abi;
       getContractInfo();
    }
  );
}

async function getContractInfo() {
  const name = await contract.methods.name().call();
  const symbol = await contract.methods.symbol().call();
  contractInfoText.text(name + ' - ' + symbol);
}

async function awardItem() {
  const tokenOwner = tokenOwnerInput.val();
  const tokenURI = tokenURIInput.val();
  console.log('award item, owner: ' + tokenOwner + ', uri: ' + tokenURI);
  const result = await contract.methods.awardItem(tokenOwner, tokenURI).send({from: account});
  const tokenId = result.events.Transfer.returnValues.tokenId;
  tokenIdText.text(tokenId);
}

(function() {
if (typeof window.ethereum === 'undefined') {
  return;
}
console.log('MetaMask is installed!');

ethereumButton.on('click', () => {
  getAccount();
});

signButton.on('click', () => {
  sign();
});

awardItemButton.on('click', () => {
  awardItem();
});
})();
  • Answer
blockchain metamask
Remain: 5
2 Answers
Avatar
monkey Enlightened
monkey Enlightened
Phần HTML:

<span><!DOCTYPE html></span>
<span><<span>html</span> <span>lang</span>=<span>"en"</span>></span>
<span><<span>head</span>></span>
  <span><<span>meta</span> <span>charset</span>=<span>"UTF-8"</span>></span>
  <span><<span>title</span>></span>NFT Game<span></<span>title</span>></span>
  <span><<span>link</span> <span>rel</span>=<span>"stylesheet"</span> <span>href</span>=<span>"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"</span> <span>integrity</span>=<span>"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"</span> <span>crossorigin</span>=<span>"anonymous"</span>></span>
  <span><<span>link</span> <span>rel</span>=<span>"stylesheet"</span> <span>href</span>=<span>"/css/style.css"</span>></span>
<span></<span>head</span>></span>
<span><<span>body</span>></span>
<span><<span>div</span> <span>class</span>=<span>"container"</span>></span>
  <span><<span>div</span> <span>class</span>=<span>"row"</span>></span>
    <span><<span>div</span> <span>class</span>=<span>"col-md-12 text-center"</span>></span>
      <span><<span>h3</span>></span>Welcome to NFT Game<span></<span>h3</span>></span>
    <span></<span>div</span>></span>
  <span></<span>div</span>></span>
  <span><<span>div</span> <span>class</span>=<span>"row"</span>></span>
    <span><<span>div</span> <span>class</span>=<span>"col-md-12 text-center"</span>></span>
      <span><<span>button</span> <span>id</span>=<span>"enableEthereumButton"</span> <span>class</span>=<span>"btn btn-primary"</span>></span>Enable Ethereum<span></<span>button</span>></span>
    <span></<span>div</span>></span>
    <span><<span>div</span> <span>class</span>=<span>"col-md-12 text-center mt-2"</span>></span>
      <span><<span>h5</span>></span>Account: <span><<span>span</span> <span>id</span>=<span>"showAccount"</span> <span>class</span>=<span>"text-success"</span>></span><span></<span>span</span>></span><span></<span>h5</span>></span>
    <span></<span>div</span>></span>
    <span><<span>div</span> <span>class</span>=<span>"col-md-12 text-center mt-2"</span>></span>
      <span><<span>h5</span>></span>Balance: <span><<span>span</span> <span>id</span>=<span>"showBalance"</span> <span>class</span>=<span>"text-danger"</span>></span><span></<span>span</span>></span><span></<span>h5</span>></span>
    <span></<span>div</span>></span>
    <span><<span>div</span> <span>class</span>=<span>"col-md-12 row text-center mt-2"</span>></span>
      <span><<span>div</span> <span>class</span>=<span>"col-md-3"</span>></span><span></<span>div</span>></span>
      <span><<span>div</span> <span>class</span>=<span>"col-md-6 input-group"</span>></span>
        <span><<span>button</span> <span>id</span>=<span>"signButton"</span> <span>class</span>=<span>"btn btn-primary"</span>></span>Sign<span></<span>button</span>></span>
        <span><<span>input</span> <span>id</span>=<span>"messageInput"</span> <span>type</span>=<span>"text"</span> <span>class</span>=<span>"form-control"</span> <span>value</span>=<span>"Hello World"</span>></span>
      <span></<span>div</span>></span>
      <span><<span>div</span> <span>class</span>=<span>"col-md-3"</span>></span><span></<span>div</span>></span>
    <span></<span>div</span>></span>
    <span><<span>div</span> <span>class</span>=<span>"col-md-12 text-center mt-2"</span>></span>
      <span><<span>h5</span>></span>Signature: <span><<span>span</span> <span>id</span>=<span>"showSignatureText"</span> <span>class</span>=<span>"text-secondary"</span>></span><span></<span>span</span>></span><span></<span>h5</span>></span>
    <span></<span>div</span>></span>
    <span><<span>div</span> <span>class</span>=<span>"col-md-12 text-center mt-2"</span>></span>
      <span><<span>h5</span>></span>Recover Text: <span><<span>span</span> <span>id</span>=<span>"recoverText"</span> <span>class</span>=<span>"text-secondary"</span>></span><span></<span>span</span>></span><span></<span>h5</span>></span>
    <span></<span>div</span>></span>
    <span><<span>div</span> <span>class</span>=<span>"col-md-12 text-center mt-2"</span>></span>
      <span><<span>h5</span>></span>Contract: <span><<span>span</span> <span>id</span>=<span>"contractInfoText"</span> <span>class</span>=<span>"text-info"</span>></span><span></<span>span</span>></span><span></<span>h5</span>></span>
    <span></<span>div</span>></span>
    <span><<span>div</span> <span>class</span>=<span>"col-md-12 row text-center mt-2"</span>></span>
      <span><<span>div</span> <span>class</span>=<span>"col-md-2"</span>></span><span></<span>div</span>></span>
      <span><<span>div</span> <span>class</span>=<span>"col-md-8 input-group"</span>></span>
        <span><<span>button</span> <span>id</span>=<span>"awardItemButton"</span> <span>class</span>=<span>"btn btn-primary"</span>></span>Award NFT<span></<span>button</span>></span>
        <span><<span>input</span> <span>id</span>=<span>"tokenOwnerInput"</span> <span>type</span>=<span>"text"</span> <span>class</span>=<span>"form-control"</span> <span>placeholder</span>=<span>"Token owner"</span> <span>value</span>=<span>"0x3c31b4b9d6c24bad29498f99aaa6914231362c7f"</span>></span>
        <span><<span>input</span> <span>id</span>=<span>"tokenURIInput"</span> <span>type</span>=<span>"text"</span> <span>class</span>=<span>"form-control"</span> <span>placeholder</span>=<span>"Token URI"</span> <span>value</span>=<span>"https://youngmonkeys.org/"</span>></span>
      <span></<span>div</span>></span>
      <span><<span>div</span> <span>class</span>=<span>"col-md-2"</span>></span><span></<span>div</span>></span>
    <span></<span>div</span>></span>
    <span><<span>div</span> <span>class</span>=<span>"col-md-12 text-center mt-2"</span>></span>
      <span><<span>h5</span>></span>New TokenId: <span><<span>span</span> <span>id</span>=<span>"tokenIdText"</span> <span>class</span>=<span>"text-success"</span>></span><span></<span>span</span>></span><span></<span>h5</span>></span>
    <span></<span>div</span>></span>
  <span></<span>div</span>></span>
<span></<span>div</span>></span>
<span><<span>script</span> <span>src</span>=<span>"https://code.jquery.com/jquery-3.6.0.js"</span> <span>integrity</span>=<span>"sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="</span> <span>crossorigin</span>=<span>"anonymous"</span>></span><span></span><span></<span>script</span>></span>
<span><<span>script</span> <span>src</span>=<span>"https://cdnjs.cloudflare.com/ajax/libs/web3/1.6.1/web3.min.js"</span> <span>integrity</span>=<span>"sha512-5erpERW8MxcHDF7Xea9eBQPiRtxbse70pFcaHJuOhdEBQeAxGQjUwgJbuBDWve+xP/u5IoJbKjyJk50qCnMD7A=="</span> <span>crossorigin</span>=<span>"anonymous"</span> <span>referrerpolicy</span>=<span>"no-referrer"</span>></span><span></span><span></<span>script</span>></span>
<span><<span>script</span> <span>src</span>=<span>"/js/main.js"</span>></span><span></span><span></<span>script</span>></span>
  • 0
  • Reply
Avatar
tvd12 Enlightened
tvd12 Enlightened
Tham khảo: https://blog.openreplay.com/interacting-with-smart-contracts-using-web3
  • 0
  • Reply