<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 data</h3>
      <form onsubmit="transfer(); return false;">
        <label for="address">Sender:</label>
        <input type="text" id="sender" readonly=true />
        <label for="address">Recipient:</label>
        <input type="text" id="recipient" placeholder="Enter recipient address" />
        <label for="tokenId">Token ID</label>
        <input type="text" id="tokenId" placeholder="Enter a Token ID" />
        <label for="tokenAddress">Token address</label>
        <input type="text" id="tokenAddress" placeholder="Enter amount to be transfered" />
        <button type="submit" class="btn">Transfer</button>
      </form>
    </div>
    <div class="card hidden" id="tx">
      <h2>Transaction result from MetaMask</h2>
      <div id="hash"></div><br/>
    </div>
  </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 */
#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} from "https://cdn.skypack.dev/@tatumcom/js@1.4.11";

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

// Function to sign in with MetaMask
window.signIn = async () => {
  const address = await tatum.walletProvider.metaMask.connect();
  console.log(`Connected address is ${address}`);
  document.querySelector("#sender").value = address;
  document.getElementById("form").classList.remove("hidden");
  document.getElementById("signin").classList.add("hidden");
};

window.transfer = async () => {
  console.log('test');
  const recipient = document.querySelector("#recipient").value;console.log('test2');
  const tokenId = document.querySelector("#tokenId").value;console.log('test3');
  const tokenAddress = document.querySelector("#tokenAddress").value;console.log('test4');
  try {
    console.log('test5');
    const txId = await tatum.walletProvider.metaMask.transferNft(
      recipient,
      tokenId,
      tokenAddress
    );
    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 transaction.");
  }
};