web3js_browser/E2E_Test_Dapp.html

<html> <!-- based on: https://github.com/MetaMask/metamask-extension/tree/develop/test/e2e/contract-test --> 
<head>
  <meta charset="UTF-8">
  <title>E2E Test Dapp</title>
  <script src="metamask-onboarding.bundle.js"></script> <!-- from https://www.npmjs.com/package/@metamask/onboarding -->
  <script src="E2E_Test_Dapp.js" defer></script>
</head>
<body>
  <header>
    <h1>E2E Test Dapp</h1>
  </header>
  <main>
    <section>
      <h2>Connect</h2>
      <button id="connectButton">Connect</button>
    </section>
    <section>
      <h2>Contract</h2>
      <div>
        <button id="deployButton">Deploy Contract</button>
        <button id="depositButton">Deposit</button>
        <button id="withdrawButton">Withdraw</button>
      </div>
      <div>
        Contract Status: <span id="contractStatus">Not clicked</span>
      </div>
    </section>
    <section>
      <h2>Send Eth</h2>
      <button id="sendButton">Send</button>
    </section>
    <section>
      <h2>Send Tokens</h2>
      <div>
        Token: <span id="tokenAddress"></span>
      </div>
      <div>
        <button id="createToken">Create Token</button>
        <button id="transferTokens">Transfer Tokens</button>
        <button id="approveTokens">Approve Tokens</button>
        <button id="transferTokensWithoutGas">Transfer Tokens Without Gas</button>
        <button id="approveTokensWithoutGas">Approve Tokens Without Gas</button>
      </div>
    </section>
    <section>
      <h2>Status</h2>
      <div>
        Network: <span id="network"></span>
      </div>
      <div>
        ChainId: <span id="chainId"></span>
      </div>
      <div>
        Accounts: <span id="accounts"></span>
      </div>
    </section>
    <section>
      <h2>Sign Typed Data</h2>
      <button id="signTypedData">Sign</button>
      <div>Sign Typed Data Result: <span id="signTypedDataResult"></span></div>
    </section>
  </main>
</body>
</html>