<!DOCTYPE html>

  <title>MetaMask and TatumSDK</title>

  <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 class="card hidden" id="form">
      <h3>Enter the base URI of the collection (optional, if not set, each token minted has it's own unique URI) of your NFT (ERC-1155) collection.</h3>
      <form onsubmit="create(); return false;">
        <label for="uri">Base URI:</label>
        <input type="text" id="uri" placeholder="Enter the base URI of the collection" />
        <button type="submit" class="btn">Create</button>
    <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>      


/* 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 */
#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="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 } from "https://cdn.skypack.dev/@tatumio/tatum";

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

let address, txId;

// Function to sign in with MetaMask
window.signIn = async () => {
  address = await tatum.walletProvider.metaMask.connect();
  console.log(`Connected address is ${address}`);

window.create = async () => {
  const uri = document.querySelector("#uri").value;
  try {
    txId = await tatum.walletProvider.metaMask.createErc1155NftCollection({
      author: address,
      minter: address,
      baseURI: uri,
    document.querySelector("#hash").textContent = txId;
  } catch (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.