Avatar
0
monkey Enlightened
monkey Enlightened
Dự án NFT đơn giản với Metamask và Web3: Lấy thông tin tài khoản
Dự án NFT đơn giản với Metamask và Web3: Lấy thông tin tài khoản
  • Answer
blockchain metamask
Remain: 5
1 Answer
Avatar
monkey Enlightened
monkey Enlightened
Để lấy được thông tin tài khoản chúng ta cần thực hiện các bước sau:

  1. Khởi tạo dự án
  2. Trong HomeController tạo 1 hàm thế này:

@DoGet("/account")
public Redirect account() {
    return Redirect.to("/account.html");
}

  1. Tạo file account.html trong thư mục static:

<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>
<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>
<span><<span>script</span>></span><span>
<span>const</span> ethereumButton = $(<span>'#enableEthereumButton'</span>);
<span>const</span> showAccount = $(<span>'#showAccount'</span>);
<span>const</span> showBalance = $(<span>'#showBalance'</span>);

<span>var</span> account = <span>''</span>;

<span>async</span> <span><span>function</span> <span>getAccount</span>(<span></span>) </span>{
  <span>const</span> accounts = <span>await</span> ethereum.request({ <span>method</span>: <span>'eth_requestAccounts'</span> });
  account = accounts[<span>0</span>];
  showAccount.text(account);
  getBalance();
}

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

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

ethereumButton.on(<span>'click'</span>, () => {
  getAccount();
});
})();
</span><span></<span>script</span>></span>
<span></<span>body</span>></span>
<span></<span>html</span>></span>

  1. Truy cập vào đường link: http://localhost:8080/account

  1. Xong
  • 0
  • Reply