<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.</p>
      <button class="btn" onclick="signIn()">Sign In</button>
    </div>
    <div class="card hidden" id="success">
      <h2>MetaMask connected</h2>
      <h4>Connected account:</h4>
      <div id="address"></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: 350px;
  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 result element */
#result {
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
}

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

import { TatumSDK, Network, Ethereum, MetaMask } from "https://cdn.skypack.dev/@tatumio/tatum";
// Function to sign in with MetaMask
window.signIn = async () => {
  try{
    const tatum = await TatumSDK.init<Ethereum>({ network: Network.ETHEREUM });
    const address = await tatum.walletProvider.use(MetaMask).getWallet();
    // Update the address element
    const addressElement = document.querySelector("#address");
    addressElement.textContent = address;
    document.getElementById('success').classList.remove('hidden')
    document.getElementById('signin').classList.add('hidden')
  }
  catch(err){
    console.log(err);
  }
};
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.