UNPKG

@metamask/test-dapp

Version:

A simple dapp used in MetaMask e2e tests.

1,561 lines (1,436 loc) 51.3 kB
<html> <head> <meta charset="UTF-8" /> <title>E2E Test Dapp</title> <link rel="icon" type="image/svg" href="metamask-fox.svg" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.14.1/css/mdb.min.css" rel="stylesheet" /> <link rel="stylesheet" href="index.css" type="text/css" /> </head> <body> <main class="container-fluid"> <header> <div id="logo-container"> <h1 id="logo-text" class="text-center"> E2E Test Dapp </h1> <img id="mm-logo" src="metamask-fox.svg" /> </div> </header> <section> <h3 class="card-title"> Provider </h3> <div id="eip6963Warning" class="row justify-content-center"> <div class="warning-message justify-content-center col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"> <img src="warning.svg" alt="" class="warning-message-icon " /> <div class="warning-message-text">No EIP-6963 Provider Detected</div> </div> </div> <div class="row" id="eip6963" hidden> <div class="col-xl-8 col-lg-6 col-md-12 col-sm-12 col-12"> <div class="card eip6963-providers"> <div class="card-body"> <h4 class="card-title"> EIP 6963 </h4> <div class='row' id="providers"> </div> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"> <div class="card"> <div class="card-body"> <h4 class="card-title"> Active Provider </h4> <p class="info-text alert alert-secondary"> UUID: <span id="activeProviderUUID"></span> </p> <p class="info-text alert alert-secondary"> Name: <span id="activeProviderName"></span> </p> <p class="info-text alert alert-secondary"> Icon: <span id="activeProviderIcon"></span> </p> </div> </div> <button class="btn btn-primary btn-lg btn-block mb-3" id="useWindowProviderButton" > Use window.ethereum </div> </section> <section> <h3 class="card-title"> Status </h3> <div id="warning" class="row justify-content-center error-div"> <div class="error-message justify-content-center col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"> <img src="alert-red.svg" alt="" class="error-message-icon " /> <div class="error-message-text">You are on the Ethereum Mainnet.</div> </div> </div> <div class="row"> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"> <p class="info-text alert alert-primary"> Network: <span id="network"></span> </p> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"> <p class="info-text alert alert-secondary"> ChainId: <span id="chainId"></span> </p> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"> <p class="info-text alert alert-success"> Accounts: <span id="accounts"></span> </p> </div> </div> </section> <section> <div class="row d-flex justify-content-center"> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"> <div class="card"> <div class="card-body"> <h4 class="card-title"> Connect Actions </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="connectButton" disabled > Connect </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="walletConnect" > Wallet Connect </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="sdkConnect" > SDK Connect </button> <hr /> <button class="btn btn-primary btn-lg btn-block mb-3" id="getAccounts" > eth_accounts </button> <p class="info-text alert alert-secondary"> eth_accounts result: <span id="getAccountsResult"></span> </p> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"> <div class="card"> <div class="card-body"> <h4 class="card-title"> Permissions Actions </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="requestPermissions" > Request Permissions </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="getPermissions" > Get Permissions </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="revokeAccountsPermission" > Revoke Accounts Permission </button> <p class="info-text alert alert-secondary"> Permissions result: <span id="permissionsResult"></span> </p> </div> </div> </div> </div> </section> <section> <div class="row"> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4 class="card-title"> Send Eth </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="sendButton" disabled > Send </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="sendEIP1559Button" disabled hidden > Send EIP 1559 Transaction </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="sendEIP1559WithoutGasButton" disabled hidden > Send EIP 1559 Without Gas </button> <a id="sendDeeplinkButton" > <button class="btn btn-warning btn-lg btn-block mb-3 text-dark" > (Mobile) Send with Deeplink </button> </a> <hr /> <h4 class="card-title"> Piggy bank contract </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="deployButton" disabled > Deploy Contract </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="depositButton" disabled > Deposit </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="withdrawButton" disabled > Withdraw </button> <p class="info-text alert alert-secondary"> Contract Status: <span id="contractStatus">Not clicked</span> </p> <hr /> <h4 class="card-title"> Failing contract </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="deployFailingButton" disabled > Deploy Failing Contract </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="sendFailingButton" disabled > Send Failing Transaction </button> <p class="info-text alert alert-secondary"> Failing Contract Status: <span id="failingContractStatus">Not clicked</span> </p> <hr /> <h4 class="card-title"> Multisig contract </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="deployMultisigButton" disabled > Deploy Multisig Contract </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="sendMultisigButton" disabled > Send ETH to Multisig Address </button> <p class="info-text alert alert-secondary"> Multisig Contract Status: <span id="multisigContractStatus">Not clicked</span> </p> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4 class="card-title"> ERC 20 </h4> <p class="info-text alert alert-success"> Token(s): <span id="erc20TokenAddresses"></span> </p> <div class="form-group"> <label>Token Decimals</label> <input class="form-control" type="number" id="tokenDecimals" value="4" max="18" min="0" /> </div> <button class="btn btn-primary btn-lg btn-block mb-3" id="createToken" disabled > Create Token </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="watchAssets" disabled > Add Token(s) to Wallet </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="transferTokens" disabled > Transfer Tokens </button> <a id="transferTokensDeeplink" > <button class="btn btn-warning btn-lg btn-block mb-3 text-dark" > (Mobile) Transfer Tokens with Deeplink </button> </a> <hr /> <div class="form-group"> <label>Approve to Address</label> <input class="form-control" id="approveTo" value="0x9bc5baF874d2DA8D216aE9f137804184EE5AfEF4" /> </div> <button class="btn btn-primary btn-lg btn-block mb-3" id="approveTokens" disabled > Approve Tokens </button> <a id="approveTokensDeeplink" > <button class="btn btn-warning btn-lg btn-block mb-3 text-dark" > (Mobile) Approve Tokens with Deeplink </button> </a> <button class="btn btn-primary btn-lg btn-block mb-3" id="increaseTokenAllowance" disabled > Increase Token Allowance </button> <hr /> <div class="form-group"> <label>Owner Address</label> <input class="form-control" id="allowanceOwner" /> </div> <div class="form-group"> <label>Spender Address</label> <input class="form-control" id="allowanceSpender" /> </div> <button class="btn btn-primary btn-lg btn-block mb-3" id="getAllowance" disabled > Get Allowance </button> <p class="info-text alert alert-secondary"> Allowance amount: <span id="allowanceAmountResult"></span> </p> <hr /> <div class="form-group"> <label>Transfer From</label> <input class="form-control" id="transferFromSenderInput" /> </div> <div class="form-group"> <label>Transfer To</label> <input class="form-control" id="transferFromRecipientInput" /> </div> <button class="btn btn-primary btn-lg btn-block mb-3" id="transferFromTokens" disabled > Transfer From Tokens </button> <hr /> <button class="btn btn-primary btn-lg btn-block mb-3" id="transferTokensWithoutGas" disabled > Transfer Tokens Without Gas </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="approveTokensWithoutGas" disabled > Approve Tokens Without Gas </button> <p class="info-text alert alert-secondary"> ERC 20 methods result: <span id="tokenMethodsResult"></span> </p> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4 class="card-title"> ERC 721 </h4> <p class="info-text alert alert-success"> Token(s): <span id="erc721TokenAddresses"></span> </p> <button class="btn btn-primary btn-lg btn-block mb-3" id="deployNFTsButton" disabled > Deploy </button> <div class="form-group"> <label>Amount</label> <input class="form-control" type="number" id="mintAmountInput" value="1" /> </div> <div class="form-group"> <button class="btn btn-primary btn-lg btn-block mb-3" id="mintButton" disabled > Mint </button> </div> <div class="form-group"> <label>Watch NFT</label> <input class="form-control" type="number" id="watchNFTInput" value="1" /> </div> <div class="form-group"> <button class="btn btn-primary btn-lg btn-block mb-3" id="watchNFTButton" disabled > Watch NFT </button> </div> <div class="form-group"> <button class="btn btn-primary btn-lg btn-block mb-3" id="watchNFTsButton" disabled > Watch all NFTs </button> </div> <div class="form-group" id="watchNFTButtons"> </div> <div class="form-group"> <label>Approve Token</label> <input class="form-control" type="number" id="approveTokenInput" value="1" /> </div> <div class="form-group"> <button class="btn btn-primary btn-lg btn-block mb-3" id="approveButton" disabled > Approve </button> </div> <div class="form-group"> <button class="btn btn-primary btn-lg btn-block mb-3" id="setApprovalForAllButton" disabled > Set Approval For All </button> </div> <div class="form-group"> <button class="btn btn-primary btn-lg btn-block mb-3" id="revokeButton" disabled > Revoke </button> </div> <div class="form-group"> <label>Transfer Token</label> <input class="form-control" type="number" id="transferTokenInput" value="1" /> </div> <div class="form-group"> <button class="btn btn-primary btn-lg btn-block mb-3" id="transferFromButton" disabled > Transfer From </button> </div> <p class="info-text alert alert-secondary"> ERC 721 methods result: <span id="nftsStatus"></span> </p> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4 class="card-title"> ERC 1155 </h4> <p class="info-text alert alert-success"> Token(s): <span id="erc1155TokenAddresses"></span> </p> <button class="btn btn-primary btn-lg btn-block mb-3" id="deployERC1155Button" disabled > Deploy </button> <div class="form-group"> <label>Batch Mint Token IDs</label> <input class="form-control" type="text" placeholder="1, 2, 3" id="batchMintTokenIds" /> </div> <div class="form-group"> <label>Batch Mint Token ID Amounts</label> <input class="form-control" type="text" placeholder="1, 1, 1000000000000000" id="batchMintIdAmounts" /> </div> <div class="form-group"> <button class="btn btn-primary btn-lg btn-block mb-3" id="batchMintButton" disabled > Batch Mint </button> </div> <div class="form-group"> <label>Batch Transfer Token IDs</label> <input class="form-control" type="text" placeholder="1, 2, 3" id="batchTransferTokenIds" /> </div> <div class="form-group"> <label>Batch Transfer Token Amounts</label> <input class="form-control" type="text" placeholder="1, 1, 1" id="batchTransferTokenAmounts" /> </div> <div class="form-group"> <button class="btn btn-primary btn-lg btn-block mb-3" id="batchTransferFromButton" disabled > Batch Transfer </button> </div> <div class="form-group"> <button class="btn btn-primary btn-lg btn-block mb-3" id="setApprovalForAllERC1155Button" disabled > Set Approval For All </button> </div> <div class="form-group"> <button class="btn btn-primary btn-lg btn-block mb-3" id="revokeERC1155Button" disabled > Revoke </button> </div> <div class="form-group"> <label>Watch ERC1155 Token ID</label> <input class="form-control" type="text" value="1" id="watchAssetInput" /> </div> <div class="form-group"> <button class="btn btn-primary btn-lg btn-block mb-3" id="watchAssetButton" disabled > Watch ERC1155 Asset </button> </div> <p class="info-text alert alert-secondary"> ERC 1155 methods results: <span id="erc1155Status"></span> </p> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4 class="card-title"> EIP 747 </h4> <div class="form-group"> <label>ERC20 Token Address</label> <input class="form-control" type="text" placeholder="0x..." id="eip747ContractAddress" /> </div> <div class="form-group"> <label>Symbol</label> <input class="form-control" type="text" placeholder="XYZ" id="eip747Symbol" /> </div> <div class="form-group"> <label>Decimals</label> <input class="form-control" type="number" placeholder="18" id="eip747Decimals" /> </div> <div class="form-group"> <button class="btn btn-primary btn-lg btn-block mb-3" id="eip747WatchButton" disabled > Add Token </button> </div> <p class="info-text alert alert-secondary"> EIP 747: <span id="eip747Status"></span> </p> </div> </div> </div> </div> </section> <section> <div class="row"> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4 class="card-title"> PPOM - Malicious Transactions and Signatures </h4> <p>We know we are vulnerable if any of these Transactions/Signatures are not flagged as Malicious</p> <h5>Transactions</h5> <button class="btn btn-primary btn-lg btn-block mb-3" id="maliciousRawEthButton" disabled > Malicious Eth Transfer </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="mintSepoliaERC20" hidden > Mint ERC20 </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="maliciousERC20TransferButton" disabled title="This will only be flagged if you have some ERC20 balance" > Malicious ERC20 Transfer (USDC) </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="maliciousApprovalButton" disabled > Malicious ERC20 Approval (BUSD) </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="maliciousContractInteractionButton" disabled > Malicious Contract Interaction </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="maliciousSetApprovalForAll" disabled > Malicious Set Approval For All </button> <h5>Signatures</h5> <button class="btn btn-primary btn-lg btn-block mb-3" id="maliciousPermit" disabled > Malicious Permit </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="maliciousTradeOrder" disabled > Malicious Trade Order </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="maliciousSeaport" disabled > Malicious Seaport </button> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4> PPOM - Malicious Batching and Queueing </h4> <p>We know we are vulnerable if any of these Transactions/Signatures are not flagged as Malicious</p> <h5>Transactions</h5> <button class="btn btn-primary btn-lg btn-block mb-3" id="sendEIP1559Batch" disabled > Send Eth Malicious x10 Batch </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="sendEIP1559Queue" disabled > Send Eth Malicious x10 Queue </button> <h5>Signatures</h5> <button class="btn btn-primary btn-lg btn-block mb-3" id="signTypedDataV4Batch" disabled > Sign Malicious x10 Batch </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="signTypedDataV4Queue" disabled > Sign Malicious x10 Queue </button> <hr /> <h4>PPOM - Malicious Deeplinks</h4> <a id="maliciousSendEthWithDeeplink" > <button class="btn btn-warning btn-lg btn-block mb-3 text-dark" > (Mobile) Malicious Eth Transfer With Deeplink </button> </a> <a id="maliciousTransferERC20WithDeeplink" > <button class="btn btn-warning btn-lg btn-block mb-3 text-dark" > (Mobile) Malicious ERC20 Transfer With Deeplink </button> </a> <a id="maliciousApproveERC20WithDeeplink" > <button class="btn btn-warning btn-lg btn-block mb-3 text-dark" > (Mobile) Malicious ERC20 Approval With Deeplink </button> </a> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4> PPOM - Malicious Warning Bypasses </h4> <p>We know we are vulnerable if any of these Transactions/Signatures are not flagged as Malicious</p> <h5>Transactions</h5> <button class="btn btn-primary btn-lg btn-block mb-3" id="maliciousSendWithOddHexData" disabled > Malicious Eth Transfer With Odd Hex Data </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="maliciousApproveERC20WithOddHexData" disabled > Malicious ERC20 Approval With Odd Hex Data </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="maliciousSendWithoutHexPrefixValue" disabled > Malicious Eth Transfer Without 0x Prefix for Hex Value </button> <h5>Signatures</h5> <button class="btn btn-primary btn-lg btn-block mb-3" id="maliciousPermitHexPaddedChain" disabled > Malicious Permit with Padded chainId </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="maliciousPermitIntAddress" disabled > Malicious Permit with Integer Address </button> </div> </div> </div> </div> </div> </section> <section> <div class="row d-flex justify-content-center"> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"> <div class="card"> <div class="card-body"> <h4 class="card-title"> Encrypt / Decrypt </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="getEncryptionKeyButton" disabled > Get Encryption Key </button> <hr /> <div id="encrypt-message-form"> <input class="form-control" type="text" placeholder="Message to encrypt" id="encryptMessageInput" /> <button class="btn btn-primary btn-lg btn-block mb-3" id="encryptButton" disabled > Encrypt </button> </div> <hr /> <button class="btn btn-primary btn-lg btn-block mb-3" id="decryptButton" disabled > Decrypt </button> <p class="info-text alert alert-secondary"> Encryption key: <span id="encryptionKeyDisplay"></span> </p> <p class="info-text text-truncate alert alert-secondary"> Ciphertext: <span id="ciphertextDisplay"></span> </p> <p class="info-text alert alert-secondary"> Cleartext: <span id="cleartextDisplay"></span> </p> </div> </div> </div> </div> </section> <section> <div class="row"> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4> Eth Sign </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="ethSign" disabled > Sign </button> <p class="info-text alert alert-warning"> Result: <span id="ethSignResult"></span> </p> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4> Personal Sign </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="personalSign" disabled > Sign </button> <p class="info-text alert alert-warning"> Result: <span id="personalSignResult"></span> </p> <button class="btn btn-primary btn-lg btn-block mb-3" id="personalSignVerify" disabled > Verify </button> <p class="info-text alert alert-warning"> eth-sig-util recovery result: <span id="personalSignVerifySigUtilResult"></span> </p> <p class="info-text alert alert-warning"> personal_ecRecover result: <span id="personalSignVerifyECRecoverResult"></span> </p> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4> Sign Typed Data </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="signTypedData" disabled > Sign </button> <p class="info-text alert alert-warning"> Result: <span id="signTypedDataResult"></span> </p> <button class="btn btn-primary btn-lg btn-block mb-3" id="signTypedDataVerify" disabled > Verify </button> <p class="info-text alert alert-warning"> Recovery result: <span id="signTypedDataVerifyResult"></span> </p> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4> Sign Typed Data V3 </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="signTypedDataV3" disabled > Sign </button> <p class="info-text alert alert-warning"> Result: <span id="signTypedDataV3Result"></span> </p> <button class="btn btn-primary btn-lg btn-block mb-3" id="signTypedDataV3Verify" disabled > Verify </button> <p class="info-text alert alert-warning"> Recovery result: <span id="signTypedDataV3VerifyResult"></span> </p> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4> Sign Typed Data V4 </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="signTypedDataV4" disabled > Sign </button> <p class="info-text alert alert-warning"> Result: <span id="signTypedDataV4Result"></span> </p> <button class="btn btn-primary btn-lg btn-block mb-3" id="signTypedDataV4Verify" disabled > Verify </button> <p class="info-text alert alert-warning"> Recovery result: <span id="signTypedDataV4VerifyResult"></span> </p> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4> Sign Permit </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="signPermit" disabled > Sign </button> <p class="info-text alert alert-warning"> Result: <span id="signPermitResult"></span> <p class="info-text alert alert-warning" id="signPermitResultR">r: </p> <p class="info-text alert alert-warning" id="signPermitResultS">s: </p> <p class="info-text alert alert-warning" id="signPermitResultV">v: </p> </p> <button class="btn btn-primary btn-lg btn-block mb-3" id="signPermitVerify" disabled > Verify </button> <p class="info-text alert alert-warning"> Recovery result: <span id="signPermitVerifyResult"></span> </p> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4> Sign In With Ethereum </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="siwe" disabled > Sign In With Ethereum </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="siweResources" disabled > Sign In With Ethereum (w/ Resources) </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="siweBadDomain" disabled > Sign In With Ethereum (Bad Domain) </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="siweBadAccount" disabled > Sign In With Ethereum (Bad Account) </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="siweMalformed" disabled > Sign In With Ethereum (Malformed) </button> <p class="info-text alert alert-warning"> Result: <span id="siweResult"></span> </p> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4> Malformed Signatures </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="signInvalidType" disabled > Invalid Type </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="signEmptyDomain" disabled > Empty Domain </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="signExtraDataNotTyped" disabled > Extra Data not Typed </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="signInvalidPrimaryType" disabled > Invalid Primary Type </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="signNoPrimaryTypeDefined" disabled > No Primary Type Defined </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="signInvalidVerifyingContractType" disabled > Invalid Verifying Contract Type </button> <p class="info-text alert alert-warning"> Result: <span id="signMalformedResult"></span> </p> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch" > <div class="card full-width"> <div class="card-body"> <h4> Malformed Transactions </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="sendWithInvalidValue" disabled > Invalid Value Type (string) </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="sendWithInvalidTxType" disabled > Invalid Transaction Type (not supported) </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="sendWithInvalidRecipient" disabled > Invalid Recipient (string) </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="sendWithInvalidGasLimit" disabled > Invalid Gas Limit (string) </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="sendWithInvalidMaxFeePerGas" disabled > Invalid Max Fee Per Gas (string) </button> <p class="info-text alert alert-warning"> Result: <span id="sendMalformedResult"></span> </p> </div> </div> </div> </section> <section> <div class="row d-flex justify-content-center"> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch"> <div class="card full-width"> <div class="card-body"> <h4 class="card-title"> JSON RPC Result </h4> <textarea name="json-rpc-response" id="json-rpc-response" rows="5"></textarea> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch"> <div class="card full-width"> <div class="card-body"> <h4 class="card-title"> Ethereum Chain Interactions </h4> <button class="btn btn-primary btn-lg btn-block mb-3" id="addEthereumChain" disabled > Add Localhost 8546 </button> <button class="btn btn-primary btn-lg btn-block mb-3" id="switchEthereumChain" disabled > Switch to Localhost 8546 </button> </div> </div> </div> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 d-flex align-items-stretch"> <div class="card full-width"> <div class="card-body"> <h4 class="card-title"> </h4> </div> </div> </div> </div> </section> <section> <div class="row d-flex justify-content-center"> <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12"> <div class="card"> <div class="card-body"> <h4 class="card-title"> Send form </h4> <div class="form-group"> <label>From</label> <input class="form-control" type="text" id="fromInput" /> </div> <div class="form-group"> <label>To</label> <input class="form-control" type="text" id="toInput" /> </div> <div class="form-group"> <label>Amount</label> <input class="form-control" type="text" id="amountInput" /> </div> <div class="form-group"> <label>Type</label> <select class="browser-default custom-select" id="typeInput"> <option value="0x0">0x0</option> <option value="0x2">0x2</option> </select> </div> <div class="form-group" id="gasPriceDiv"> <label>Gas Price</label>