Attributions/index.html at master · evronm/Attributions · 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<html>
  <head>
  </head>
  <script src="https://cdn.ethers.io/lib/ethers-5.6.umd.min.js" type="text/javascript"> </script>
  <script src="zepto.min.js" type="text/javascript"> </script>
  <script src="qr-scanner.umd.min.js"></script> <!-- https://github.com/nimiq/qr-scanner -->
  <script type="text/javascript">
    //Edit this \/
    const factory_addr="0x2419D30eADD7e46453AB5C956D943508B36C1777";
    const factory_abi=[ { "inputs": [ { "internalType": "uint256", "name": "", "type": "uint256" } ], "name": "_tags", "outputs": [ { "internalType": "string", "name": "tag", "type": "string" } ], "stateMutability": "view", "type": "function" }, { "inputs": [ { "internalType": "string", "name": "", "type": "string" } ], "name": "attestation_names", "outputs": [ { "internalType": "address", "name": "", "type": "address" } ], "stateMutability": "view", "type": "function" }, { "inputs": [ { "components": [ { "internalType": "string", "name": "key", "type": "string" }, { "internalType": "string", "name": "value", "type": "string" } ], "internalType": "struct kv[]", "name": "props", "type": "tuple[]" }, { "internalType": "string[]", "name": "tags_", "type": "string[]" } ], "name": "create_attestation", "outputs": [ { "internalType": "contract Attestation", "name": "", "type": "address" } ], "stateMutability": "nonpayable", "type": "function" }, { "inputs": [ { "internalType": "string", "name": "new_tag", "type": "string" } ], "name": "create_tag", "outputs": [], "stateMutability": "nonpayable", "type": "function" }, { "inputs": [], "name": "tags", "outputs": [ { "components": [ { "internalType": "string", "name": "tag", "type": "string" }, { "internalType": "string[]", "name": "names", "type": "string[]" } ], "internalType": "struct tag[]", "name": "", "type": "tuple[]" } ], "stateMutability": "view", "type": "function" } ];
    const attestation_abi=[ { "anonymous": false, "inputs": [ { "indexed": false, "internalType": "uint8", "name": "version", "type": "uint8" } ], "name": "Initialized", "type": "event" }, { "inputs": [ { "internalType": "address", "name": "", "type": "address" }, { "internalType": "uint256", "name": "", "type": "uint256" } ], "name": "_attestations_about", "outputs": [ { "internalType": "address", "name": "", "type": "address" } ], "stateMutability": "view", "type": "function" }, { "inputs": [ { "internalType": "address", "name": "", "type": "address" }, { "internalType": "uint256", "name": "", "type": "uint256" } ], "name": "_attestations_by", "outputs": [ { "internalType": "address", "name": "", "type": "address" } ], "stateMutability": "view", "type": "function" }, { "inputs": [ { "internalType": "uint256", "name": "", "type": "uint256" } ], "name": "_attestees", "outputs": [ { "internalType": "address", "name": "", "type": "address" } ], "stateMutability": "view", "type": "function" }, { "inputs": [ { "internalType": "uint256", "name": "", "type": "uint256" } ], "name": "_attestors", "outputs": [ { "internalType": "address", "name": "", "type": "address" } ], "stateMutability": "view", "type": "function" }, { "inputs": [ { "internalType": "uint256", "name": "", "type": "uint256" } ], "name": "_props", "outputs": [ { "internalType": "string", "name": "key", "type": "string" }, { "internalType": "string", "name": "value", "type": "string" } ], "stateMutability": "view", "type": "function" }, { "inputs": [ { "internalType": "uint256", "name": "", "type": "uint256" } ], "name": "_tags", "outputs": [ { "internalType": "string", "name": "", "type": "string" } ], "stateMutability": "view", "type": "function" }, { "inputs": [ { "internalType": "address", "name": "about_addr", "type": "address" } ], "name": "attest", "outputs": [], "stateMutability": "nonpayable", "type": "function" }, { "inputs": [ { "internalType": "address", "name": "attestee", "type": "address" } ], "name": "attestations_about", "outputs": [ { "internalType": "address[]", "name": "", "type": "address[]" } ], "stateMutability": "view", "type": "function" }, { "inputs": [ { "internalType": "address", "name": "attestor", "type": "address" } ], "name": "attestations_by", "outputs": [ { "internalType": "address[]", "name": "", "type": "address[]" } ], "stateMutability": "view", "type": "function" }, { "inputs": [], "name": "attestees", "outputs": [ { "internalType": "address[]", "name": "", "type": "address[]" } ], "stateMutability": "view", "type": "function" }, { "inputs": [], "name": "attestors", "outputs": [ { "internalType": "address[]", "name": "", "type": "address[]" } ], "stateMutability": "view", "type": "function" }, { "inputs": [ { "components": [ { "internalType": "string", "name": "key", "type": "string" }, { "internalType": "string", "name": "value", "type": "string" } ], "internalType": "struct kv[]", "name": "props_", "type": "tuple[]" }, { "internalType": "string[]", "name": "tags_", "type": "string[]" } ], "name": "init", "outputs": [ { "internalType": "contract Attestation", "name": "", "type": "address" } ], "stateMutability": "nonpayable", "type": "function" }, { "inputs": [], "name": "props", "outputs": [ { "components": [ { "internalType": "string", "name": "key", "type": "string" }, { "internalType": "string", "name": "value", "type": "string" } ], "internalType": "struct kv[]", "name": "", "type": "tuple[]" } ], "stateMutability": "view", "type": "function" }, { "inputs": [], "name": "tags", "outputs": [ { "internalType": "string[]", "name": "", "type": "string[]" } ], "stateMutability": "view", "type": "function" } ];

    const zero_addr="0x0000000000000000000000000000000000000000";
    var provider, signer, factory_ro, factory_rw, attestation_ro, attestation_rw, local_tags;
    //poor man's html factory
    ['h1','h2','h3','div','p','ul','li','button','a','table','thead','tbody','th','td','tr'].forEach((tag) => {
      window[tag]=(attrs, content="") => {
        return $('<'+tag+' />', attrs).append(content);
      }
    })

    Zepto(function($){
      $(document).on("click",'button', function(e) {e.target.id && button_actions[e.target.id].call(null,e)});
      $(document).on("click",'button', function(e) {e.target.attributes["class"] && button_actions[e.target.attributes["class"].textContent].call(null,e)});
    })
    const button_actions={
      "mm_connect": function() {
        provider = new ethers.providers.Web3Provider(window.ethereum);
        provider.send("eth_requestAccounts", []);
        signer = provider.getSigner();
        factory_ro=new ethers.Contract(factory_addr, factory_abi, provider);
        factory_rw=new ethers.Contract(factory_addr, factory_abi, signer);
        $('#mm_connect').hide();
        $("#show_new_attestation").show();
        show_tags();
      },
      "save_prop": function(e) {
        var key=$("#prop_key")[0].value;
        var val=$("#prop_val")[0].value;
        if (key && val){
          $("#prop_form").before(tr({"class":"prop"},[td({},key),td({},val),key=="Name" ? "" : button({"class":"delete_prop"},"X"),button({"class":"edit_prop"},"Edit")]));
          $("#prop_key")[0].value="";
          $("#prop_val")[0].value="";
          $("#prop_key")[0].disabled=false;
          $("#prop_key").focus();
          $('#save_attestation')[0].disabled=false;
        }
      },
      "delete_prop": function(e) {
        evt=e;$(e.target).parent('tr').remove();
      },
      "edit_prop": function(e) {
        var p=$(e.target).parent('.prop');
        $("#prop_key")[0].value=p.children()[0].innerHTML;
        $("#prop_val")[0].value=p.children()[1].innerHTML;
        $("#prop_key")[0].disabled="Name"==$("#prop_key")[0].value; // "Name" is the only required prop
        $(e.target).parent('tr').remove();
      },
      "show_new_attestation": function(e) {
        $("#new_attestation_form").show();
        $("#show_new_attestation").hide();
      },
      "save_attestation": function(e) {
        var props = $("#attestation_props tr.prop").reduce(function(acc, row) {
          acc.push([
            $(row).children()[0].innerHTML,
            $(row).children()[1].innerHTML
          ]);
          return acc;
        }, []);
        console.log(props);
        factory_rw.create_attestation(props,$('#tags')[0].value.split(",").map((foo) => foo.trim()));
        $("#show_new_attestation").show();
      },
      "tag_button": function(e) {
        $("#attestations").empty();
        $("#attestations").append(
          local_tags[$(e.target).html()].map((name) => button({"class": "show_attestation"}, name))
        );
      },
      "show_attestation": function(e) {
        $("#attestation").empty();
        factory_ro.attestation_names($(e.target).html()).then(function(addr){
          attestation_ro=new ethers.Contract(addr, attestation_abi, provider);
          attestation_rw=new ethers.Contract(addr, attestation_abi, signer);
          attestation_ro.props().then(function (props) {
            $("#attestation").append(ul({"id":"props"}, props.map((prop) => li({},prop.key + ": " +prop.value))));
          }).then(function() {
            attestation_ro.tags().then(function(tags){
              $("ul#props").after(p({},"Tags: " + tags.join(", ")));
              show_attestations();   //  Wow is this ugly!
            })
          }).then(() => $("#attestation").append(button({"id": "attest"}, "Attest!")))
        });

      },
      "attest": function(e) {
        $("#attest_sign").show();
        $("#attest").hide();
      },
      "scan": function(e) {
        var qr_reader=new QrScanner($('video')[0], function(result) {$("#attestation_target")[0].value=result; qr_reader.stop()});
        qr_reader.start();
      },
      "sign": function(e) {
        attestation_rw.attest($("#attestation_target")[0].value).then(function(){
          show_attestations();
          $("#attest_sign").hide();
          $("#attest").show();
        })
      },
    }

    function show_tags() {
      factory_ro.tags().then(function (tags) {
        update_local_tags(tags);
        $("#existing_tags").empty();
        $("#existing_tags").append(tags.map((tag) => button({"class": "tag_button"}, tag[0]))); // tag struct from Common.sol
      });
    }
    function update_local_tags(tags) {
      local_tags={};
      tags.forEach(function(tag) {
        local_tags[tag.tag]=tag.names;
      })
    }
    function show_attestations() {
      $("#attestors").remove();$("#attestees").remove();
      $("#attestation").append(
        div({"id":"attestors"}, ul({})),
        div({"id":"attestees"}, ul({}))
      );
      attestation_ro.attestors().then(
        function (addrs) {
          addrs.forEach(
            (addr) =>
            $("#attestors > ul").append(
              li({"id":"attestor"+addr},[addr,ul()])));return addrs}).then(
                (addrs) =>
                addrs.forEach(
                  (addr) =>
                  {attestation_ro.attestations_by(addr).then(
                    (addies) =>
                    addies.forEach(
                      (addy) =>
                      $("#attestor"+addr+ " ul").append(li({},addy))
                    )
                  )
                  }
                )
              );
      attestation_ro.attestees().then(
        function (addrs) {
          addrs.forEach(
            (addr) =>
            $("#attestees > ul").append(
              li({"id":"attestee"+addr},[addr,ul()])));return addrs}).then(
                (addrs) =>
                addrs.forEach(
                  (addr) =>
                  {attestation_ro.attestations_about(addr).then(
                    (addies) =>
                    addies.forEach(
                      (addy) =>
                      $("#attestee"+addr+ " ul").append(li({},addy))
                    )
                  )
                  }
                )
              );
    }
  </script>
  <body>
    <h1>Attestation Management</h1>
    <button id="mm_connect">Connect to wallet</button>
    <button id="show_new_attestation" hidden="true">New Attestation</button>
    <div id="new_attestation_form" hidden="true">
      <h3>New Attestation</h3>
      <table id="attestation_props" border="1">
        <thead><th>Name</th><th>Value</th><th></th></thead>

        <tr id="prop_form"><td><input type="text" id="prop_key" value="Name" disabled="true" /></td><td><input type="text" id="prop_val" /></td><td><button id="save_prop">Save</button></td></tr>
      </table>
      <label for="tags">Tags(comma separated):</label><input type="text" id="tags" name="tags" />
      <button id="save_attestation" disabled="true">Save</button>
    </div>
    <div id="existing_tags"></div>
    <div id="attestations"></div>
    <div id="attestation"> </div>
    <div hidden="true" id="attest_sign">
      <label for="target">Target: </label><input name="target" id="attestation_target" />
      <button id="scan">Scan</button>
      <button id="sign">Sign</button>
      <video></video>
    </div>
  </body>
</html>