status-im
/
hackathon-registration-dapp
mirror of https://github.com/status-im/hackathon-registration-dapp.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adding UI styles

This commit is contained in:
Richard Ramos 2018-10-06 14:50:15 -04:00
parent 594e4f3e96
commit 4c983876d3
15 changed files with 690 additions and 515 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
app/css/app.css Normal file
View File

@ -0,0 +1,132 @@
@font-face {
font-family: 'Andale Mono';
src: url('../fonts/AndaleMono.woff2') format('woff2'),
url('../fonts/AndaleMono.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Noto Sans';
src: url('../fonts/NotoSans-SemiBold.woff2') format('woff2'),
url('../fonts/NotoSans-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Noto Sans';
src: url('../fonts/NotoSans-Medium.woff2') format('woff2'),
url('../fonts/NotoSans-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
.container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.message-title {
width: 75%;
margin: auto;
padding: 1em 2em;
text-align: center;
}
.message-body {
text-align: center;
margin: auto;
width: 75%;
}
.errorMessage {
background: #ffffff;
color: #000000;
padding: 1em 2em;
width: 75%;
margin: 50px auto 0px auto;
text-align: center;
}
.red {
background: #ff0000;
color: #ffffff;
}
.yellow {
background: #ffff00;
color: #000000;
}
.blue {
background: #0000ff;
color: #ffffff;
}
.green {
background: #00ff00;
color: #000000;
}
.green .message-title {
background: #000000;
color: #ffffff;
}
.green .message-body {
color: #000000;
}
.yellow .message-title {
background: #000000;
color: #ffff00;
}
.yellow .message-body {
color: #000000;
}
.red .message-title {
background: #ffffff;
color: #ff0000;
}
.red .message-body {
color: #ffffff;
}
.blue .message-title {
background: #ffffff;
color: #0000ff;
}
.blue .message-body {
color: #ffffff;
}
#image {
height: 375px;
width: 375px;
margin: auto;
}
.red #image {
background: url(../images/red.gif) no-repeat center center;
}
.blue #image {
background: url(../images/blue.gif) no-repeat center center;
}
.green #image {
background: url(../images/green.gif) no-repeat center center;
}
.yellow #image {
background: url(../images/yellow.gif) no-repeat center center;
}

BIN
app/fonts/AndaleMono.woff Normal file
View File

Binary file not shown.

BIN
app/fonts/AndaleMono.woff2 Normal file
View File

Binary file not shown.

BIN
app/fonts/NotoSans-Medium.woff Normal file
View File

Binary file not shown.

BIN
app/fonts/NotoSans-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
app/fonts/NotoSans-SemiBold.woff Normal file
View File

Binary file not shown.

BIN
app/fonts/NotoSans-SemiBold.woff2 Normal file
View File

Binary file not shown.

BIN
app/images/blue.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 563 KiB

BIN
app/images/green.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 565 KiB

BIN
app/images/red.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 585 KiB

BIN
app/images/yellow.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

3
app/index.html
View File

@ -1,6 +1,7 @@
<html>
<head>
<title>Embark</title>
<title>#criptolife@status.im</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/app.css">
</head>
<body>

67
app/js/index.js
View File

@ -20,7 +20,9 @@ class App extends React.Component {
error: false,
errorMessage: '',
ready: false,
showENSLink: false
showENSLink: false,
intervalCheck: false,
showError: false
};
}
@ -43,11 +45,15 @@ class App extends React.Component {
});
}
async redirectIfProcessed(code){
async redirectIfProcessed(code, intervalCheck){
const sentToAddress = await SNTGiveaway.methods.sentToAddress(web3.eth.defaultAccount).call();
const usedCode = await SNTGiveaway.methods.codeUsed( '0x' + code,).call();
if(sentToAddress && usedCode){
this.setState({showENSLink: true});
this.setState({showENSLink: true, intervalCheck});
setTimeout(() => {
// TODO: set ENS url
window.location = "http://www.google.com";
}, 7000);
}
}
@ -84,7 +90,7 @@ class App extends React.Component {
}
// Create / Open a database
const response = await axios.get('http://localhost:3000/isProcessing/' + code); // TODO: extract to config
const response = await axios.get('http://138.68.78.11:3000/isProcessing/' + code); // TODO: extract to config
if(!response.data.result){
const record = {
code,
@ -92,7 +98,7 @@ class App extends React.Component {
proof: proof.map(x => '0x' + x.toString('hex'))
}
const response = await axios.post('http://localhost:3000/requestFunds/', record);
const response = await axios.post('http://138.68.78.11:3000/requestFunds/', record); // TODO:
if(response.data.error){
this.setState({error: true, errorMessage: response.data.message});
}
@ -101,7 +107,7 @@ class App extends React.Component {
}
setInterval(async () => {
await this.redirectIfProcessed(code);
await this.redirectIfProcessed(code, true);
}, 10000);
}
@ -109,18 +115,53 @@ class App extends React.Component {
this.setState({ready: true});
}
showErrorMessage(){
this.setState({showErrorMessage: !this.state.showErrorMessage});
}
render(){
const {error, errorMessage, ready, showENSLink} = this.state;
const {error, errorMessage, ready, showENSLink, showErrorMessage, intervalCheck} = this.state;
return <Fragment>
{ error && <h2>{errorMessage}</h2> }
let className = "blue";
if(error) className = "red";
if(!ready && !error) className = "blue";
if(ready && !error && showENSLink && !intervalCheck) className = "yellow";
if(ready && !error && showENSLink && intervalCheck) className = "green";
{ !ready && !error && <h2>Add a loading message / indicator that the dapp is checking whether the code is valid or not </h2> }
let messageTitle;
let messageBody;
switch(className){
case "blue":
messageTitle = "Transaction is being processed";
messageBody = <Fragment><p>You will shortly receive some ETH and SNT, just for attending #CryptoLife! Use it to register an ENS Name and buy food.</p><p>We hope you have a wonderful time bringing crypto closer to life with us.</p></Fragment>
break;
case "red":
messageTitle = "Shit bro, there was an error";
messageBody = <p>Please ask a volunteer for help in person.</p>;
break;
case "yellow":
messageTitle = "You've already been funded";
messageBody = <p>We're redirecting you to ENS to register your own username! Ask a volunteer for help if you get lost.</p>
break;
case "green":
messageTitle = "Great success! Such future";
messageBody = <p>We're redirecting you to ENS to register your own username! Ask a volunteer for help if you get lost.</p>
break;
}
{ ready && !error && !showENSLink && <h2>Add a message indicating that the code has been received, and we're processing the trx</h2> }
return <div className={className + " container"}>
<div id="image">
{ showENSLink && !error && <h2>Show link or redirect to ENS DAPP</h2> }
</Fragment>
</div>
<div className="message-title" onClick={(e) => this.showErrorMessage()}>
{messageTitle}
</div>
<div className="message-body">
{messageBody}
</div>
{ error && showErrorMessage && <div className="errorMessage">{errorMessage}</div> }
</div>
}
}

1002
app/js/merkle.js
View File

File diff suppressed because it is too large Load Diff

1
embark.json
View File

@ -4,6 +4,7 @@
"css/app.css": ["app/css/**"],
"js/app.js": ["app/js/index.js"],
"images/": ["app/images/**"],
"fonts/": ["app/fonts/**"],
"index.html": "app/index.html"
},
"buildDir": "dist/",