permit/index.html at master · VitalR/permit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ERC20 Permit</title>

  <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/web3modal@1.9.9/dist/index.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@walletconnect/web3-provider@1.8.0/dist/umd/index.min.js"></script>

  <script src="https://bundle.run/buffer@6.0.3"></script>
</head>
<body>
  <script type="text/javascript">
    window.Buffer = buffer.Buffer // getting this from buffer module for frontend.

    const domainName = "Token Name" // put your token name
    const domainVersion = "1" // leave this to "1"
    const chainId = 5 // this is for the chain's ID. value is 1 for remix
    const contractAddress = "0x2b8660f1c512dBc74967d35BC23A6186a5CDE90a" // Put the address here from remix

    var account = null;

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

    const domainType = [
      { name: 'name', type: 'string' },
      { name: 'version', type: 'string' },
      { name: 'chainId', type: 'uint256' },
      { name: 'verifyingContract', type: 'address' },
    ]

    const connect = async () => {
      // This helps connect webpage to wallet.
      const providerOptions = {
        walletconnect: {
          package: WalletConnectProvider.default, // required
          options: {
            rpc: {
              1: "https://cloudflare-eth.com",
              137: "https://polygon-rpc.com",
              // ...
            },
          }
        }
      };

      const Web3Modal = window.Web3Modal.default;
      const web3Modal = new Web3Modal({
        network: "goerli", // optional
        cacheProvider: false, // optional
        providerOptions, // required
        theme: "dark"
      });

      const provider = await web3Modal.connect();

      window.web3 = new Web3(provider);
      var accounts = await web3.eth.getAccounts();
      account = accounts[0];
    }

    const splitSig = (sig) => {
      // splits the signature to r, s, and v values.
      const pureSig = sig.replace("0x", "")

      const r = new Buffer(pureSig.substring(0, 64), 'hex')
      const s = new Buffer(pureSig.substring(64, 128), 'hex')
      const v = new Buffer((parseInt(pureSig.substring(128, 130), 16)).toString());


      return {
        r, s, v
      }
    }

    const signTyped = (dataToSign) => {
      // call this method to sign EIP 712 data
      return new Promise((resolve, reject) => {
        web3.currentProvider.sendAsync({
          method: "eth_signTypedData_v4",
          params: [account, dataToSign],
          from: account
        }, (err, result) => {
          if (err) return reject(err);
          resolve(result.result)
        })
      })
    }

    async function createPermit(spender, value, nonce, deadline) {
      const permit = { owner: account, spender, value, nonce, deadline }
      const Permit = [
        { name: "owner", type: "address" },
        { name: "spender", type: "address" },
        { name: "value", type: "uint256" },
        { name: "nonce", type: "uint256" },
        { name: "deadline", type: "uint256" },
      ]

      const dataToSign = JSON.stringify({
          types: {
              EIP712Domain: domainType,
              Permit: Permit
          },
          domain: domain,
          primaryType: "Permit",
          message: permit
      });

      const signature = await signTyped(dataToSign)
      const split = splitSig(signature)

      return {
        ...split, signature
      }
    }

    async function main() {
      await connect()

      const permit = await createPermit("0xcC7d7D810132c44061d99928AA6e4D63c7c693c7", 1000, 0, 2661766724)
      console.log(`r: 0x${permit.r.toString('hex')}, s: 0x${permit.s.toString('hex')}, v: ${permit.v}, sig: ${permit.signature}`)
    }
  </script>
</body>
</html>