Adding UI styles
This commit is contained in:
parent
594e4f3e96
commit
4c983876d3
|
@ -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;
|
||||
}
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 563 KiB |
Binary file not shown.
After Width: | Height: | Size: 565 KiB |
Binary file not shown.
After Width: | Height: | Size: 585 KiB |
Binary file not shown.
After Width: | Height: | Size: 1.0 MiB |
|
@ -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>
|
||||
|
|
|
@ -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,26 +107,61 @@ class App extends React.Component {
|
|||
}
|
||||
|
||||
setInterval(async () => {
|
||||
await this.redirectIfProcessed(code);
|
||||
await this.redirectIfProcessed(code, true);
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
return <div className={className + " container"}>
|
||||
<div id="image">
|
||||
|
||||
{ ready && !error && !showENSLink && <h2>Add a message indicating that the code has been received, and we're processing the trx</h2> }
|
||||
</div>
|
||||
<div className="message-title" onClick={(e) => this.showErrorMessage()}>
|
||||
{messageTitle}
|
||||
</div>
|
||||
<div className="message-body">
|
||||
{messageBody}
|
||||
</div>
|
||||
|
||||
{ showENSLink && !error && <h2>Show link or redirect to ENS DAPP</h2> }
|
||||
</Fragment>
|
||||
{ error && showErrorMessage && <div className="errorMessage">{errorMessage}</div> }
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
1002
app/js/merkle.js
1002
app/js/merkle.js
File diff suppressed because it is too large
Load Diff
|
@ -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/",
|
||||
|
|
Loading…
Reference in New Issue