Sign EIP712 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="signEip712" onclick="signEip712()">Sign EIP 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(acount) {
  const response = await venlyConnect.flows.getAccount(chain);
  document.querySelector('#noAuth').hidden = true;
  document.querySelector('#needsAuth').hidden = false;
  showResponse('getAccount', response);
}

async function signEip712() {
  const res = await venlyConnect.signer.signEip712({
    walletId: "9100ca80-0d16-4aff-a13b-bce795d4a219",
    secretType: 'MATIC',
    data: {
                      "types": {
                        "MetaTransaction": [
                          {
                            "type": "uint256",
                            "name": "nonce"
                          },
                          {
                            "type": "address",
                            "name": "from"
                          },
                          {
                            "type": "bytes",
                            "name": "functionSignature"
                          }
                        ],
                        "EIP712Domain": [
                          {
                            "type": "string",
                            "name": "name"
                          },
                          {
                            "type": "string",
                            "name": "version"
                          },
                          {
                            "type": "address",
                            "name": "verifyingContract"
                          },
                          {
                            "type": "bytes32",
                            "name": "salt"
                          }
                        ]
                      },
                      "domain": {
                        "name": "VPR",
                        "version": "1",
                        "verifyingContract":...