Sign a message

by abdullah066

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Venly Widget</title>
    <script type="text/javascript" src="https://unpkg.com/@venly/connect"></script>
    <!--Include the widget-->
  </head>

  <body>

    <div id="noAuth">
      <p>
        You first need to connect your account:
      </p>
      <button id="getAccount" onclick="getAccount()">Connect with Widget</button>
    </div>
    <p></p>
    <div id="needsAuth" hidden="hidden">
      <p>
        Now you can execute the following function:
      </p>
      <button id="signMessage" onclick="signMessage()">Sign Message</button>
    </div>
    <p></p>
    <textarea id="response" disabled="disabled" rows="20" cols="100"></textarea>
  </body>

</html>

CSS

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 20px;
  background-color: #f5f5f5;
}

h1 {
  color: #6a0dad; /* Purple color */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#noAuth, #needsAuth {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 5px;
  margin-bottom: 20px;
  border-radius: 5px;
  width: 400px;
  text-align: center;
}

button {
  padding: 10px 15px;
  margin: 5px;
  cursor: pointer;
  background-color: #6a0dad; /* Purple color */
  color: #fff;
  border: none;
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #531c8c; /* Darker shade of purple on hover */
}

textarea {
  width: 100%;
  resize: vertical;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  margin-top: 10px;
}

h1 img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
}

JavaScript

const venlyConnect = new VenlyConnect('Testaccount', {
  environment: 'sandbox'
});
const chain = 'MATIC';
let wallets = [];

async function getAccount() {
  const response = await venlyConnect.flows.getAccount(chain);
  document.querySelector('#noAuth').hidden = true;
  document.querySelector('#needsAuth').hidden = false;
  showResponse('getAccount', response);
}

async function signMessage() {
  const res = await venlyConnect.signer.signMessage({
    walletId: '9100ca80-0d16-4aff-a13b-bce795d4a219',
    secretType: 'MATIC',
    data: "I agree with terms and conditions"
  })
    showResponse('signMessage', res)
}

function showResponse(name, response) {
  console.log(name, response);
  document.querySelector('#response').value = JSON.stringify(response, null, 3);
}