<html>

<head>
  <meta charset="utf-8" />
  <title>My First Tatum DApp</title>
</head>

<body>
  <h1>Get Eth balance with Tatum!</h1>
  <input type="text" id="address" placeholder="Enter wallet address" value="0x82d9730e487dcCd1106ebd9FfA5f1200950E7002" />
  <button id="get-balance">Get Balance</button>
  <div id="balance"></div>
</body>

</html>
body {
  font-family: Arial, sans-serif;
  background-color: white;
  color: #4f37fd;
  text-align: center;
}

h1 {
  margin-top: 40px;
}

input[type="text"] {
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  border: 2px solid #2ccd9a;
  margin-top: 20px;
}

#get-balance {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  border: none;
  background-color: #2ccd9a;
  color: white;
  margin-top: 10px;
  cursor: pointer;
}

#balance {
  margin-top: 20px;
  font-size: 20px;
}

import {
  TatumSDK,
  Network,
  ETHEREUM
} from "https://cdn.skypack.dev/@tatumio/tatum";

const button = document.getElementById("get-balance");
const addressInput = document.getElementById("address");
const balanceDiv = document.getElementById("balance");

button.addEventListener("click", async () => {
  const tatum = await TatumSDK.init<ETHEREUM>({
    network: Network.ETHEREUM,
    verbose: true
  });
  const balance = await tatum.address.getBalance({
    addresses: [addressInput.value]
  });
  const balanceData = balance.data.filter((asset) => asset.asset === "ETH")[0];
  console.log(balanceData);
  balanceDiv.textContent = `${balanceData.balance} ${balanceData.asset}`;

  tatum.destroy();
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.