@metamask/test-dapp
Version:
A simple dapp used in MetaMask e2e tests.
1,561 lines (1,436 loc) • 51.3 kB
HTML
<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>