Complete webapp

dexon-foundation · Apr 8, 2019 · b9c0c16 · b9c0c16
1 parent 336162a
commit b9c0c16
Show file tree

Hide file tree

Showing 24 changed files with 220 additions and 661 deletions.
diff --git a/app/app.js b/app/app.js
@@ -26,7 +26,7 @@ import './global-styles';
 
 // Observe loading of Overpass (to remove Overpass, remove the <link> tag in
 // the index.html file and this observer)
-const overpassObserver = new FontFaceObserver('Overpass', {});
+const overpassObserver = new FontFaceObserver('Overpass Mono', {});
 
 // When Overpass is loaded, add a font-family using Overpass to the body
 overpassObserver.load().then(() => {
@@ -43,14 +43,4 @@ const render = () => {
   );
 };
 
-if (module.hot) {
-  // Hot reloadable React components and translation json files
-  // modules.hot.accept does not accept dynamic dependencies,
-  // have to be constants at compile-time
-  module.hot.accept(['containers/App'], () => {
-    ReactDOM.unmountComponentAtNode(MOUNT_NODE);
-    render();
-  });
-}
-
 render();
diff --git a/app/components/Button/index.js b/app/components/Button/index.js
diff --git a/app/components/Input/__tests__/__snapshots__/index.test.js.snap b/app/components/Input/__tests__/__snapshots__/index.test.js.snap
diff --git a/app/components/Input/__tests__/index.test.js b/app/components/Input/__tests__/index.test.js
diff --git a/app/components/Input/index.js b/app/components/Input/index.js
diff --git a/app/components/Mux/index.js b/app/components/Mux/index.js
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin: 5px 15px;
+  margin-top: 20px;
+  padding: 15px 20px;
+  border: 1px solid #4d4d4d;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+`;
+
+export const Header = styled.div`
+  position: absolute;
+  top: -12px;
+  left: 10px;
+  color: #8d8d8d;
+  background: black;
+  padding: 0 10px;
+  font-weight: 700;
+`;
diff --git a/app/constants/colors.js b/app/constants/colors.js
@@ -1,5 +1,5 @@
 export const COLOR_WHITE = '#FFFFFF';
-export const COLOR_BLACK = '#122028';
+export const COLOR_BLACK = '#000000';
 export const COLOR_LIGHT_BLACK = '#0E1519';
 export const COLOR_LIGHTER_BLACK = '#26343C';
 export const COLOR_GRAY = '#AAB9C2';

diff --git a/app/containers/App/Console.js b/app/containers/App/Console.js
@@ -0,0 +1,65 @@
+import React, { PureComponent } from 'react';
+import styled from 'styled-components';
+import { Container, Header } from '@/components/Mux';
+import LotteryContract from '@/services/Lottery';
+import LotteryItem from './LotteryItem';
+
+const StretchedContainer = styled(Container)`
+  flex: 1 1 auto;
+`;
+
+const Body = styled.div`
+  overflow: auto;
+  position: absolute;
+  height: calc(100% - 30px);
+  width: calc(100% - 40px);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+`;
+
+// eslint-disable-next-line react/prefer-stateless-function
+class Console extends PureComponent {
+  state = {
+    list: [],
+  };
+
+  componentDidMount() {
+    this.updateList();
+    setInterval(this.updateList, 10000);
+  }
+
+  updateList = () => {
+    LotteryContract.getPastEvents('NumberRevealed', {
+      fromBlock: 0,
+      toBlock: 'latest',
+    })
+      .then(events => this.setState({ list: events }));
+  }
+
+  render() {
+    const { list } = this.state;
+
+    return (
+      <StretchedContainer>
+        <Header>
+          Lottery History
+        </Header>
+
+        <Body>
+          {list.map(event => (
+            <LotteryItem
+              key={event.transactionHash}
+              hash={event.transactionHash}
+              timestamp={event.returnValues[0]}
+              number={`00${event.returnValues[1]}`.slice(-3)}
+              rawValue={event.returnValues[2]}
+            />
+          ))}
+        </Body>
+      </StretchedContainer>
+    );
+  }
+}
+
+export default Console;