1 files changed, 51 insertions, 13 deletions

diff --git a/app/containers/App/Timer.js b/app/containers/App/Timer.js
index a164cd1..c62fce3 100644
--- a/app/containers/App/Timer.js
+++ b/app/containers/App/Timer.js
@@ -4,16 +4,34 @@ import styled from 'styled-components';
 import moment from 'moment';
 
 import { Container, Header } from '@/components/Mux';
+import { times } from '../../../constants';
 
 const LAUNCH_TIME = 1556164800000;
+
+const HorizontalContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  margin: 0 5px;
+`;
+
+const StretchedContainer = styled(Container)`
+  flex: 1;
+  margin-left: 10px;
+  margin-right: 10px;
+`;
+
 const Time = styled.div`
-  font-size: 72px;
+  font-size: 60px;
 `;
+
 const pad = number => `0${number}`.slice(-2);
+const findNext = () => times.find(time => time * 1000 > Date.now()) * 1000 || 0;
 
 class Timer extends PureComponent {
   state = {
-    duration: LAUNCH_TIME - Date.now(),
+    mainnetDuration: LAUNCH_TIME - Date.now(),
+    drawDuration: findNext() - Date.now(),
   };
 
   componentDidMount() {
@@ -21,22 +39,42 @@ class Timer extends PureComponent {
   }
 
   updateTime = () => {
-    this.setState({ duration: LAUNCH_TIME - Date.now() });
+    const nextTime = findNext();
+
+    this.setState({
+      mainnetDuration: LAUNCH_TIME - Date.now(),
+      drawDuration: nextTime - Date.now(),
+    });
   }
 
   render() {
-    const duration = moment.duration(this.state.duration);
+    const { mainnetDuration, drawDuration } = this.state;
+
+    const mainnetDurationDisplay = moment.duration(mainnetDuration);
+    const drawDurationDisplay = moment.duration(drawDuration);
 
     return (
-      <Container>
-        <Header>
-          Time Until DEXON Mainnet Launch
-        </Header>
-
-        <Time>
-          {(duration.days() * 24) + duration.hours()}:{pad(duration.minutes())}:{pad(duration.seconds())}
-        </Time>
-      </Container>
+      <HorizontalContainer>
+        <StretchedContainer>
+          <Header>
+            Time Until DEXON Mainnet Launch
+          </Header>
+
+          <Time>
+            {(mainnetDurationDisplay.days() * 24) + mainnetDurationDisplay.hours()}:{pad(mainnetDurationDisplay.minutes())}:{pad(mainnetDurationDisplay.seconds())}
+          </Time>
+        </StretchedContainer>
+
+        <StretchedContainer>
+          <Header>
+            Time Until Next Lucky Draw
+          </Header>
+
+          <Time>
+            {(drawDurationDisplay.days() * 24) + drawDurationDisplay.hours()}:{pad(drawDurationDisplay.minutes())}:{pad(drawDurationDisplay.seconds())}
+          </Time>
+        </StretchedContainer>
+      </HorizontalContainer>
     );
   }
 }