Add typewriter effect

author: Hsuan Lee <boczeratul@gmail.com> 2019-04-10 16:30:53 +0800
committer: Hsuan Lee <boczeratul@gmail.com> 2019-04-10 16:30:53 +0800
commit: 31cf6fbe445df628760f8678932c7cfbd6c49572 (patch)
tree: 64c56d3e0a0746bac720bdf1d5d4ec1d97d22b0b /app/containers/App
parent: 0e5518c17d8477eec9566781fb1ff80f89e8bf2c (diff)
download: dexon-lottery-31cf6fbe445df628760f8678932c7cfbd6c49572.tar
dexon-lottery-31cf6fbe445df628760f8678932c7cfbd6c49572.tar.gz
dexon-lottery-31cf6fbe445df628760f8678932c7cfbd6c49572.tar.bz2
dexon-lottery-31cf6fbe445df628760f8678932c7cfbd6c49572.tar.lz
dexon-lottery-31cf6fbe445df628760f8678932c7cfbd6c49572.tar.xz
dexon-lottery-31cf6fbe445df628760f8678932c7cfbd6c49572.tar.zst
dexon-lottery-31cf6fbe445df628760f8678932c7cfbd6c49572.zip
4 files changed, 106 insertions, 44 deletions
diff --git a/app/containers/App/Console.js b/app/containers/App/Console.js
index 98d4147..175610d 100644
--- a/app/containers/App/Console.js
+++ b/app/containers/App/Console.js
@@ -4,6 +4,7 @@ import { Container, Header } from '@/components/Mux';
 import LotteryContract from '@/services/Lottery';
 
 import LotteryItem from './LotteryItem';
+import LastItem from './LastItem';
 import EmptyItem from './EmptyItem';
 
 const StretchedContainer = styled(Container)`
@@ -15,7 +16,9 @@ const Body = styled.div`
   position: absolute;
   height: calc(100% - 30px);
   width: calc(100% - 40px);
-  display: block;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 `;
 
 // eslint-disable-next-line react/prefer-stateless-function
@@ -25,15 +28,15 @@ class Console extends PureComponent {
   };
 
   componentDidMount() {
-    // this.updateList();
-    // setInterval(this.updateList, 10000);
+    this.updateList();
+    setInterval(this.updateList, 10000);
   }
 
-  setBodyRef = (ref) => {
-    this.body = ref;
+  // setBodyRef = (ref) => {
+  //   this.body = ref;
 
-    this.scrollToBottom();
-  };
+  //   this.scrollToBottom();
+  // };
 
   updateList = () => {
     LotteryContract.getPastEvents('NumberRevealed', {
@@ -42,14 +45,14 @@ class Console extends PureComponent {
     })
       .then(events => this.setState({
         list: events,
-      }, this.scrollToBottom));
+      }));
   }
 
-  scrollToBottom = () => {
-    if (!this.body) return;
+  // scrollToBottom = () => {
+  //   if (!this.body) return;
 
-    this.body.scrollTop = this.body.offsetHeight;
-  }
+  //   this.body.scrollTop = this.body.offsetHeight;
+  // }
 
   render() {
     const { list } = this.state;
@@ -60,15 +63,25 @@ class Console extends PureComponent {
           Lottery History
         </Header>
 
-        <Body innerRef={this.setBodyRef}>
-          {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>
+          {list.map((event, index) => (
+            index !== list.length - 1 ? (
+              <LotteryItem
+                key={event.transactionHash}
+                hash={event.transactionHash}
+                timestamp={event.returnValues[0]}
+                number={`00${event.returnValues[1]}`.slice(-3)}
+                rawValue={event.returnValues[2]}
+              />
+            ) : (
+              <LastItem
+                key={event.transactionHash}
+                hash={event.transactionHash}
+                timestamp={event.returnValues[0]}
+                number={`00${event.returnValues[1]}`.slice(-3)}
+                rawValue={event.returnValues[2]}
+              />
+            )
           ))}
 
           {!list.length && <EmptyItem />}
diff --git a/app/containers/App/EmptyItem.js b/app/containers/App/EmptyItem.js
index 72cdc10..bb27e85 100644
--- a/app/containers/App/EmptyItem.js
+++ b/app/containers/App/EmptyItem.js
@@ -1,19 +1,6 @@
 import React from 'react';
-import styled, { keyframes } from 'styled-components';
-
-const blink = keyframes`
-  from, to {
-    color: transparent;
-  }
-
-  50% {
-    color: white;
-  }
-`;
-
-const Marker = styled.span`
-  animation: ${blink} 1s step-end infinite;
-`;
+import styled from 'styled-components';
+import ReactTypingEffect from 'react-typing-effect';
 
 const Item = styled.div`
   flex: 1 0 auto;
@@ -22,10 +9,13 @@ const Item = styled.div`
   white-space: pre;
 `;
 
-const LotteryItem = () => (
+const EmptyItem = () => (
   <Item>
-    Place your bets! We will have a lucky winner soon...<Marker>_</Marker>
+    <ReactTypingEffect
+      speed="100"
+      text="Place your bet! We will have a lucky winner soon..."
+    />
   </Item>
 );
 
-export default LotteryItem;
+export default EmptyItem;
diff --git a/app/containers/App/LastItem.js b/app/containers/App/LastItem.js
new file mode 100644
index 0000000..26485ef
--- /dev/null
+++ b/app/containers/App/LastItem.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import moment from 'moment';
+import ReactTypingEffect from 'react-typing-effect';
+
+const blink = keyframes`
+  from, to {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+`;
+
+const Marker = styled.span`
+  animation: ${blink} 1s ease infinite;
+  display: none;
+`;
+
+const Item = styled.a`
+  min-height: min-content;
+  margin-top: 20px;
+  flex: 1 0 auto;
+  display: flex;
+  align-items: flex-end;
+  white-space: pre;
+  cursor: pointer;
+
+  &:last-child ${Marker} {
+    display: block;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:hover {
+    background: #222222;
+  }
+`;
+
+const LastItem = ({ timestamp, hash, number }: { timestamp: String, hash: String, number: String }) => (
+  <Item
+    target="_blank"
+    href={`https://testnet.dexscan.app/transaction/${hash}`}
+  >
+    <ReactTypingEffect
+      speed={50}
+      typingDelay={100}
+      eraseDelay={100000000000}
+      text={`Time:   ${moment(timestamp * 1000).format('MMM Do, LTS ZZ')}
+Number: ${number}
+TxHash: ${hash}`}
+    />
+  </Item>
+);
+
+export default LastItem;
diff --git a/app/containers/App/LotteryItem.js b/app/containers/App/LotteryItem.js
index fa10ed7..4e59ca5 100644
--- a/app/containers/App/LotteryItem.js
+++ b/app/containers/App/LotteryItem.js
@@ -4,16 +4,16 @@ import moment from 'moment';
 
 const blink = keyframes`
   from, to {
-    color: transparent;
+    opacity: 0;
   }
 
   50% {
-    color: white;
+    opacity: 1;
   }
 `;
 
 const Marker = styled.span`
-  animation: ${blink} 1s step-end infinite;
+  animation: ${blink} 1s ease infinite;
   display: none;
 `;
 
@@ -40,7 +40,7 @@ const Item = styled.a`
 `;
 
 const Gray = styled.span`
-  color: #8d8d8d;
+  /* color: #8d8d8d; */
   display: contents;
 `;
 
@@ -51,7 +51,7 @@ const LotteryItem = ({ timestamp, hash, number }: { timestamp: String, hash: Str
   >
     <Gray>{'Time:   '}</Gray>{moment(timestamp * 1000).format('MMM Do, LTS ZZ')}<br />
     <Gray>{'Number: '}</Gray>{number}<br />
-    <Gray>{'TxHash: '}</Gray>{hash}<Marker>_</Marker>
+    <Gray>{'TxHash: '}</Gray>{hash}<Marker>|</Marker>
   </Item>
 );
author	Hsuan Lee <boczeratul@gmail.com>	2019-04-10 16:30:53 +0800
committer	Hsuan Lee <boczeratul@gmail.com>	2019-04-10 16:30:53 +0800
commit	31cf6fbe445df628760f8678932c7cfbd6c49572 (patch)
tree	64c56d3e0a0746bac720bdf1d5d4ec1d97d22b0b /app/containers/App
parent	0e5518c17d8477eec9566781fb1ff80f89e8bf2c (diff)
download	dexon-lottery-31cf6fbe445df628760f8678932c7cfbd6c49572.tar dexon-lottery-31cf6fbe445df628760f8678932c7cfbd6c49572.tar.gz dexon-lottery-31cf6fbe445df628760f8678932c7cfbd6c49572.tar.bz2 dexon-lottery-31cf6fbe445df628760f8678932c7cfbd6c49572.tar.lz dexon-lottery-31cf6fbe445df628760f8678932c7cfbd6c49572.tar.xz dexon-lottery-31cf6fbe445df628760f8678932c7cfbd6c49572.tar.zst dexon-lottery-31cf6fbe445df628760f8678932c7cfbd6c49572.zip