cancel-sol-order/index.html at main · MasterSprouts/cancel-sol-order · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Snapshot Vote Signer</title>
  <style>
    :root {
      --bg: #121212;
      --surface: #1e1e1e;
      --primary: #bb86fc;
      --text: #e0e0e0;
      --border: #333;
    }
    * { box-sizing: border-box }
    body {
      margin: 0; padding: 0;
      font-family: sans-serif;
      background: var(--bg);
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    .container {
      max-width: 600px;
      width: 100%;
      padding: 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      text-align: center;
    }
    h1 {
      margin-top: 0;
      font-weight: 500;
    }
    button {
      padding: 8px 16px;
      margin: 8px auto;
      background: var(--primary);
      color: var(--bg);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      display: inline-block;
    }
    button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    textarea, pre {
      width: 100%;
      padding: 8px;
      margin: 8px 0;
      background: var(--bg);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 4px;
      font-family: monospace;
      font-size: 0.9rem;
    }
    textarea { height: 150px }
    pre { max-height: 200px; overflow: auto }
  </style>

  <!-- must load cross-fetch before snapshot.js UMD -->
  <script src="https://cdn.jsdelivr.net/npm/cross-fetch/dist/cross-fetch.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/ethers@5/dist/ethers.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@snapshot-labs/snapshot.js"></script>
</head>
<body>
  <div class="container">
    <h1>Snapshot Vote Signer</h1>
    <button id="connect">Connect Wallet</button>
    <textarea
      id="payload"
      placeholder='{"from":"…","space":"…","proposal":"…","choice":…,"timestamp":"…"}'
    ></textarea>
    <button id="send" disabled>Sign & Send Vote</button>
    <pre id="output"></pre>
  </div>

  <script>
    // pick Rabby if injected alongside MetaMask
    const eth = window.ethereum;
    let selectedEth = eth;
    if (eth?.providers) {
      const rabby = eth.providers.find(p => p.isRabby);
      if (rabby) selectedEth = rabby;
    }

    const connectBtn = document.getElementById('connect');
    const sendBtn    = document.getElementById('send');
    const payloadEl  = document.getElementById('payload');
    const outputEl   = document.getElementById('output');
    let provider, signer;

    async function connect() {
      if (!selectedEth) {
        alert('Install Rabby or MetaMask!');
        return;
      }
      // switch to Mainnet
      await selectedEth.request({
        method: 'wallet_switchEthereumChain',
        params: [{ chainId: '0x1' }]
      }).catch(()=>{});
      // request accounts
      await selectedEth.request({ method: 'eth_requestAccounts' });
      provider = new ethers.providers.Web3Provider(selectedEth, 'any');
      signer   = provider.getSigner();
      const addr = await signer.getAddress();
      connectBtn.innerText = addr;
      sendBtn.disabled     = false;
    }

    // auto‐connect on page load
    window.addEventListener('load', connect);
    connectBtn.onclick = connect;

    sendBtn.onclick = async () => {
      if (!signer) return alert('Connect first!');
      try {
        const raw = payloadEl.value;
        const msg = JSON.parse(raw);

        // ensure timestamp is a Number
        msg.timestamp = Number(msg.timestamp);

        // unwrap choice if JSON‐string
        try { msg.choice = JSON.parse(msg.choice) } catch {}

        // auto‐detect vote type
        if (!msg.type)
          msg.type = typeof msg.choice === 'object'
            ? 'weighted'
            : 'single-choice';

        const client  = new snapshot.Client712('https://hub.snapshot.org');
        const receipt = await client.vote(
          provider,
          msg.from,
          msg
        );

        outputEl.textContent = JSON.stringify(receipt, null, 2);
      } catch (e) {
        outputEl.textContent = e.message;
      }
    };
  </script>
</body>
</html>