Skip to content

Commit

Permalink
Merge branch 'development' of https://github.com/DistributedCollectiv…
Browse files Browse the repository at this point in the history 
…e/Sovryn-frontend into feat/sale-hotfix
  • Loading branch information
@pietro-maximoff
pietro-maximoff committed Jan 15, 2021
2 parents 5ecfbdc + cf74ea3 commit eaca730
Show file tree
Hide file tree
Showing 15 changed files with 434 additions and 171 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@
"local-storage": "2.0.0",
"mathjs": "7.1.0",
"mini-css-extract-plugin": "0.9.0",
"moment": "2.29.1",
"node-plop": "0.25.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"plop": "2.6.0",
Expand All @@ -108,6 +109,7 @@
"react-bootstrap": "1.3.0",
"react-bootstrap-icons": "1.0.0",
"react-copy-to-clipboard": "5.0.2",
"react-countdown": "2.3.1",
"react-dev-utils": "^10.2.1",
"react-dom": "16.13.0",
"react-helmet-async": "1.0.4",
Expand Down
7 changes: 3 additions & 4 deletions src/app/components/SaleBanner/SaleBanner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
display: flex;
justify-content: center;
align-items: center;
min-width: 250px;
}
.picture-container {
display: none;
Expand Down Expand Up @@ -95,10 +96,8 @@
}
.timer-container {
position: absolute;
right: 0;
top: 0;
padding-right: 50px;
padding-top: 55px;
right: 50px;
top: 55px;
}
.date-container {
height: 90px;
Expand Down
227 changes: 123 additions & 104 deletions src/app/components/SaleBanner/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,125 @@
import React, { useEffect } from 'react';
import './SaleBanner.scss';
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import Countdown from 'react-countdown';
import { Button } from '@blueprintjs/core';
import moment from 'moment';

import './SaleBanner.scss';
import samurai from './assets/banner-samurai.svg';
import { Link } from 'react-router-dom';
import { useSaleEndTime } from '../../containers/SalesPage/hooks/useSaleEndTime';
import { currentNetwork } from '../../../utils/classifiers';

const startDate =
currentNetwork === 'mainnet'
? moment('2021-01-19 17:00+0').utc().toDate()
: (null as any);

export function SaleBanner() {
useEffect(() => {
const countDownDate = new Date('Jan 15, 2021 12:30:00+0').getTime();
const x = setInterval(function () {
const now = new Date().getTime();
const distance = countDownDate - now;
let sdays,
shours,
smins,
ssecs = '';
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
if (days <= 9) {
sdays = `0${days}`;
} else {
sdays = `${days}`;
}
const hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
const [show, setShow] = useState(true);
const { date: endDate, now, loading } = useSaleEndTime();

const closeBanner = () => {
setShow(false);
};

const countDown = ({ days, hours, minutes, seconds, completed }) => {
if (completed) {
return <></>;
} else {
return (
<div className="timer-container">
<div className="date-container">
<div>
<p className="text-white p-remove-padding">Days</p>
<h3 className="text-white">{days}</h3>
</div>
<div>
<p className="text-white p-remove-padding">Hours</p>
<h3 className="text-white">{hours}</h3>
</div>
<div>
<p className="text-white p-remove-padding">Mins</p>
<h3 className="text-white">{minutes}</h3>
</div>
<div>
<p className="text-white p-remove-padding">Secs</p>
<h3 className="text-white">{seconds}</h3>
</div>
</div>
</div>
);
if (hours <= 9) {
shours = `0${hours}`;
} else {
shours = `${hours}`;
}
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
if (minutes <= 9) {
smins = `0${minutes}`;
} else {
smins = `${minutes}`;
}
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (seconds <= 9) {
ssecs = `0${seconds}`;
} else {
ssecs = `${seconds}`;
}
let daysElement = document.getElementById('days') as HTMLInputElement;
daysElement.innerText = sdays;
let hoursElement = document.getElementById('hours') as HTMLInputElement;
hoursElement.innerText = shours;
let minsElement = document.getElementById('mins') as HTMLInputElement;
minsElement.innerText = smins;
let secsElement = document.getElementById('secs') as HTMLInputElement;
secsElement.innerText = ssecs;
}
};

if (distance < 0) {
clearInterval(x);
let timerElement = document.getElementById(
'timer-container',
) as HTMLInputElement;
timerElement.style.display = 'none';
let titleElement = document.getElementById(
'title-text',
) as HTMLInputElement;
titleElement.innerText = 'Token sale is live now!';
}
}, 1000);
if (!show) {
return null;
}

return () => {
clearInterval(x);
};
}, []);
//todo: temp only, until date is not decided
if (currentNetwork === 'mainnet') {
return (
<div className="banner-container">
<div className="banner py-3">
<div className="info-container">
<h2 className="text-uppercase title-container black-font">
<>SOV* Genesis Sale</>
</h2>
<div className="sub-info-container">
<p className="sub-info-text black-font">SOV Token Sale</p>
</div>
<div className="button-container">
<Link
className="button button-nav button-black button-white button-container"
to="/sales"
>
<span className="button-text text-nowrap">Learn More</span>
</Link>
</div>
</div>
<div className="picture-container">
<img
className="banner-samurai"
src={samurai}
alt="banner-samurai"
/>
</div>
<div className="close-button-container">
<Button
icon="cross"
minimal
className="float-right"
onClick={() => {
closeBanner();
}}
/>
</div>
</div>
</div>
);
}

const closeBanner = () => {
let timerElement = document.getElementById(
'banner-container',
) as HTMLInputElement;
timerElement.style.display = 'none';
};
return (
<div className="banner-container" id="banner-container">
<div className="banner">
<div className="banner-container">
<div className="banner py-3">
<div className="info-container">
<h2
className="text-uppercase title-container black-font"
id="title-text"
>
The Countdown has begun!
<h2 className="text-uppercase title-container black-font">
{loading ? (
<>SOV* Genesis Sale</>
) : (
<>
{endDate > now ? (
<>
{endDate >= now && <>Sale has begun!</>}
{endDate < now && <>Sale ended!</>}
</>
) : (
<>
{startDate > now && <>Count Down has begun</>}
{startDate < now && <>SOV* Genesis Sale</>}
</>
)}
</>
)}
</h2>
<div className="sub-info-container">
<p className="sub-info-text black-font">SOV Token Sale</p>
Expand All @@ -91,38 +129,19 @@ export function SaleBanner() {
className="button button-nav button-black button-white button-container"
to="/sales"
>
<span className="button-text">Learn More</span>
<span className="button-text text-nowrap">Learn More</span>
</Link>
</div>

<div className="timer-container" id="timer-container">
<div className="date-container">
<div>
<p className="text-white p-remove-padding">Days</p>
<h3 className="text-white" id="days">
00
</h3>
</div>
<div>
<p className="text-white p-remove-padding">Hours</p>
<h3 className="text-white" id="hours">
00
</h3>
</div>
<div>
<p className="text-white p-remove-padding">Mins</p>
<h3 className="text-white" id="mins">
00
</h3>
</div>
<div>
<p className="text-white p-remove-padding">Secs</p>
<h3 className="text-white" id="secs">
00
</h3>
</div>
</div>
</div>
{!loading && (
<>
{endDate > now && (
<Countdown renderer={countDown} date={endDate} />
)}
{startDate && startDate > now && (
<Countdown renderer={countDown} date={startDate} />
)}
</>
)}
</div>
<div className="picture-container">
<img className="banner-samurai" src={samurai} alt="banner-samurai" />
Expand Down
Loading

0 comments on commit eaca730

Please sign in to comment.