-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
77 lines (68 loc) · 3.38 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css" />
<title>Input Form</title>
</head>
<body>
<!-- HTML form that will accept user input and call validateForm() to start the Flask app -->
<form id="input_form" action="http://127.0.0.1:5000/calculate_score" method="POST" onsubmit="return validateForm(event)">
<label for="input_field">Enter an Ethereum NFT Contract Address</label><br>
<input type="text" id="input_field" name="input_field"><br><br>
<input type="submit" value="Submit">
</form>
<!-- div to display the result of the form submission -->
<div id="result"></div>
<script>
// this function will do some very surface level error handling,
// then pass to Flask app using fetch() API.
// TODO: Add more error handling
function validateForm(event) {
// prevent the form from being submitted as usual
event.preventDefault();
// get the input value from the form submission
const inputValue = document.getElementById('input_field').value;
// check if the input value is undefined
if (typeof inputValue === "undefined") {
alert("Input must not be undefined!");
return false;
}
// check that input is not empty)
if (inputValue == "") {
alert("Input must not be blank!");
return false;
}
//Use the fetch() function to make an asynchronous request to the Flask app
fetch('http://127.0.0.1:5000/calculate_score', {
method: 'POST',
body: JSON.stringify({input_field: inputValue}),
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'Access-Control-Allow-Origin': '*',
//'mode': 'no-cors'
}
})
// handle the response from the Flask app in the then() function
// parse response so output shows up properly
.then(response => response.json())
.then(data => {
console.log(data);
// display the response from the Flask app in the HTML element with the "output" ID
document.getElementById('result').innerHTML = data;
});
}
</script>
<p id="note">
Notes:
</p>
<ol id="noteol">
<li>Sometimes the wallet/balance fetching API experiences downtime. This may be a cause for any 500 Errors experienced. Check API uptime <a href= "https://status.moralis.io/" target="_blank">here</a>.</li>
<li>This app currently runs in Python, so there is no parallel processing involved. In order to compute the score of a collection,
one API call must be made per wallet to retrieve native token balance. As a result, processing of large collections can take a long time.
Re-architecting this application using a language that supports multi-threading (such as Go) is currently of high priority. For more information during the score computation process
in these development stages, please refer to the console after clicking 'Submit'. For easy testing, here is the contract address to the
<a href="https://opensea.io/collection/pixelvault-core" target="_blank">Pixel Vault Core NFT Collection</a>: 0xFb10b1717C92e9cc2d634080c3c337808408D9E1.</li>
</body>
</ol>
</html>