53_ERC20Permit/signERC20Permit.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ERC20Permit Signature Example</title>
</head>
<body>
  <h1>ERC20Permit Signature Example</h1>

  <label for="name">Name:</label>
  <input id="name" value="WTFPermit">
  <br>
  <label for="chainId">Chain ID:</label>
  <input id="chainId" value="1">
  <br>
  <label for="contractAddress">Contract Address:</label>
  <input id="contractAddress" value="0xf8e81D47203A594245E36C48e151709F0C19fBe8">
  <br>
  <label for="spender">Spender:</label>
  <input id="spender" value="0x5B38Da6a701c568545dCfcB03FcB875f56beddC4">
  <br>
  <label for="value">Amount:</label>
  <input id="value" value="100">
  <br>
  <label for="nonce">Nonce:</label>
  <input id="nonce" value="0">
  <br>
  <label for="deadline">Deadline:</label>
  <input id="deadline" value="115792089237316195423570985008687907853269984665640564039457584007913129639935">
  <br>
  <button id="connectButton">Connect MetaMask</button>
  <button id="signPermitButton" disabled>Sign ERC20Permit</button>
  <br>
  <pre id="signatureOutput"></pre>
  
  <h5>钱包地址: <span class="showAccount"></span></h5>
  <h5>ChainID: <span class="showChainID"></span></h5>
  <h5>ETH 余额: <span class="showETHBalance"></span></h5>
  <h5>签名数据: <span class="showSignature"></span></h5>
  <h5>v: <span class="SignatureV"></span></h5>
  <h5>r: <span class="SignatureR"></span></h5>
  <h5>s: <span class="SignatureS"></span></h5>

  <script type = "module">
    import { ethers } from "https://cdnjs.cloudflare.com/ajax/libs/ethers/6.3.0/ethers.js";      const ethereumButton = document.querySelector('.connect');
    const showAccount = document.querySelector('.showAccount');
    const showChainID = document.querySelector('.showChainID');
    const showETHBalance = document.querySelector('.showETHBalance');
    const showSignature = document.querySelector('.showSignature');
    const SignatureV = document.querySelector('.SignatureV');
    const SignatureR = document.querySelector('.SignatureR');
    const SignatureS = document.querySelector('.SignatureS');
    const connectButton = document.getElementById("connectButton");
    const signPermitButton = document.getElementById("signPermitButton");

    let provider;
    let signer;

    async function connectMetaMask() {
        // 获得provider
        const provider = new ethers.BrowserProvider(window.ethereum)
        
        // 读取钱包地址
        const accounts = await provider.send("eth_requestAccounts", []);
        const account = accounts[0]
        console.log(`钱包地址: ${account}`)
        showAccount.innerHTML = account;
        
        // 读取chainid
        const { chainId } = await provider.getNetwork()
        console.log(`chainid: ${chainId}`)
        showChainID.innerHTML = chainId;

        // 读取ETH余额
        const signer = await provider.getSigner()
        const balance = await provider.getBalance(signer.getAddress());
        console.log(`以太坊余额： ${ethers.formatUnits(balance)}`)
        showETHBalance.innerHTML = ethers.formatUnits(balance);
        signPermitButton.disabled = false;
    }

    async function signPermit() {
      const name = document.getElementById('name').value;
      const version = "1";
      const chainId = parseInt(document.getElementById('chainId').value);
      const contractAddress = document.getElementById('contractAddress').value;
      const spender = document.getElementById('spender').value;
      const value = document.getElementById('value').value;
      const nonce = document.getElementById('nonce').value;
      const deadline = document.getElementById('deadline').value;

      const provider = new ethers.BrowserProvider(window.ethereum)
      const signer = await provider.getSigner()
      const owner = await signer.getAddress();

      const domain = {
        name: name,
        version: version,
        chainId: chainId,
        verifyingContract: contractAddress,
      };

      const types = {
        Permit: [
          { name: "owner", type: "address" },
          { name: "spender", type: "address" },
          { name: "value", type: "uint256" },
          { name: "nonce", type: "uint256" },
          { name: "deadline", type: "uint256" },
        ],
      };

      const message = {
        owner: owner,
        spender: spender,
        value: value,
        nonce: nonce,
        deadline: deadline,
      };

      try {
        console.log(message)
        const signature = await signer.signTypedData(domain, types, message);
        const sig = ethers.Signature.from(signature);
        console.log("Signature:", signature);
        SignatureV.innerHTML = `${sig.v}`;
        SignatureR.innerHTML = `${sig.r}`;
        SignatureS.innerHTML = `${sig.s}`;
        showSignature.innerHTML = `${signature}`;
      } catch (error) {
        console.error("Error signing permit:", error);
      }
    }

    connectButton.addEventListener(`click`, connectMetaMask)
    signPermitButton.addEventListener(`click`, signPermit)
  </script>
</body>
</html>