<html>

<head>
  <title>MetaMask and TatumSDK</title>
</head>

<body>
  <div id="container">
    <div class="card" id="signin">
      <h2>Sign In with MetaMask</h2>
      <p>Click the button to sign in with MetaMask and get the connected account address. Use Ethereum Sepolia network.</p>
      <button class="btn" onclick="signIn()">Sign In</button>
    </div>
    <div class="card hidden" id="form">
      <h3>Enter the name and the symbol of your NFT collection.</h3>
      <form onsubmit="create(); return false;">
        <label for="address">Name:</label>
        <input type="text" id="name" placeholder="Enter name of the collection" />
        <label for="amount">Symbol:</label>
        <input type="text" id="symbol" placeholder="Enter symbol of the collection" />
        <button type="submit" class="btn">Create</button>
      </form>
    </div>
    <div class="card hidden" id="tx">
      <h2>Transaction result from MetaMask</h2>
      <div id="hash"></div><br/>
      <button class="btn" onclick="getContractAddress()">Get contract address</button><br/><br/>
      <div id="contractAddress"></div>      
    </div>
  </div>

</body>

</html>
/* Center the container in the middle of the page */
#container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hidden {
  display: none;
}

/* Style the cards */
.card {
  background-color: #f2f2f2;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 20px;
  text-align: center;
  width: 550px;
  margin-bottom: 20px;
}

/* Style the button */
.btn {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}

/* Style the address element */
#address,
#hash {
  font-size: 16px;
  margin-top: 10px;
}

/* Style the result element */
#result {
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
}

/* Style the address and amount inputs */
input[type="text"],
input[type="number"] {
  padding: 10px;
  margin: 10px;
  border: none;
  width: 400px;
  border-radius: 5px;
}

/* Style the form labels */
label {
  display: block;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: left;
}

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

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

const tatum = await TatumSDK.init<ETHEREUM>({ network: Network.ETHEREUM_SEPOLIA });

let address, txId;

// Function to sign in with MetaMask
window.signIn = async () => {
  console.log("Hi");
  address = await tatum.walletProvider.use(MetaMask).getWallet();
  console.log(`Connected address is ${address}`);
  document.getElementById("form").classList.remove("hidden");
  document.getElementById("signin").classList.add("hidden");
};

window.create = async () => {
  const name = document.querySelector("#name").value;
  const symbol = document.querySelector("#symbol").value;
  try {
    txId = await tatum.walletProvider.use(MetaMask).createNftCollection({
      name,
      symbol
    });
    console.log(txId);
    document.querySelector("#hash").textContent = txId;
    document.getElementById("tx").classList.remove("hidden");
    document.getElementById("form").classList.add("hidden");
  } catch (e) {
    console.error(e);
    alert("Unable to sign and deploy transaction.");
  }
};

window.getContractAddress = async () => {
  const contractAddress = await tatum.rpc.getContractAddress(txId);
  document.querySelector("#contractAddress").textContent =
    contractAddress ||
    "Transaction not yet included in the block. Try again later.";
};
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.