<html>
<head>
    <meta charset="utf-8" />
    <title>Get Current Fee</title>
    <script type="module" src="./app.js"></script>
</head>

<body>
  <div id='form'>
    <h2>Get Current Fee</h2>
    <button id="fetch-fee">Fetch Fee</button>
  </div>
  <div id="fee-container"></div>
</body>

</html>

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

#form {
  margin-top: 20px;
}

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

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

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

const button = document.getElementById("fetch-fee");
const feeContainer = document.getElementById("fee-container");


button.addEventListener("click", async () => {
  const tatum = await TatumSDK.init({ network: Network.ETHEREUM, version: ApiVersion.V3 });

  const fee = await tatum.fee.getCurrentFee();

  feeContainer.textContent = `Current Fee: ${fee.data.gasPrice.fast}`;
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.