update: Transaction Page

src/common/pages/App/index.js

@@ -621,6 +621,10 @@ export default class App extends React.Component {
               />
             </List>
               <Divider/>
+              <Link onClick={this
+                .changeRoute
+                .bind(this, '/app/transaction')} to={LINKS.TRANSACTION}> <MenuItem style={{fontSize: 14}}
+                                                                           primaryText="Transaction"/></Link>
               <Link onClick={this
                 .changeRoute
                 .bind(this, '/app/profile')} to={LINKS.PROFILE}> <MenuItem style={{fontSize: 14}}

src/common/pages/App/routes.js

@@ -61,6 +61,7 @@ import SurfForm from '../SurfTurf/form/index';
 import DataTab from '../Data';
 import LayoutTab from '../Layout';
 import ContentTab from '../Content';
+import TransactionPage from "../Transaction";
 
 export default class ComponentName extends React.Component {
   constructor(props) {
@@ -141,6 +142,7 @@ export default class ComponentName extends React.Component {
         <Route component={ProfileComponent} path={LINKS.PROFILE}/>
         <Route component={ProfileComponent} path={LINKS.PROFILE + "/:tab"}/>
         <Route component={EntitiesComponent} path={LINKS.ENTITIES}/>
+        <Route component={TransactionPage} path={LINKS.TRANSACTION}/>
       </Switch>
     )
   }

src/common/pages/Items/index.js

@@ -58,7 +58,10 @@ export default class ItemsComponent extends React.Component {
                 <Menu onClick={() => {
                   this.setState({isLoading: true});
 
-                  setTimeout(() => this.setState({isLoading: false}), 2500);
+                  setTimeout(() => {
+                    this.forceUpdate();
+                    this.setState({isLoading: false});
+                  }, 2500);
                 }} style={{
                   border: '0px'
                 }} mode="vertical">

src/common/pages/Transaction/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {inject, observer} from "mobx-react";
+import { Spin, Alert, Divider } from 'antd';
+
+import './style.scss';
+import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
+import {FlatButton} from "material-ui";
+
+@inject("appstate")
+@observer
+export default class TransactionPage extends React.Component {
+  constructor(props){
+    super(props);
+    this.props = props;
+  }
+
+  render() {
+    return(
+      <div className={'transactionContainer'}>
+        <div className={'parentContainer'}>
+          <div className={'barContainer'}>
+            <FlatButton
+              className="headerMenu"
+              hoverColor="#f1f5f9"
+              style={{ background: '#ffffff00' }}
+              onClick={() => this.props.history.goBack()}
+              label="Back"
+              primary={true}
+              icon={<NavigationArrowBack />}
+            />
+            <div className={'optionContainer'}>
+              <span className={'optionTitle'}>Show  :</span>
+              <span className={'optionSelect'}>All</span>
+              <span className={'optionSelect'}>Success</span>
+              <span className={'optionSelect'}>Failed</span>
+              <span className={'optionSelect'}>Pending</span>
+            </div>
+          </div>
+          <Divider className={'dividerTop'} />
+        </div>
+      </div>
+    )
+  }
+}

src/common/pages/Transaction/style.scss

@@ -0,0 +1,82 @@
+.transactionContainer{
+  margin-top: 6vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .parentContainer{
+    width: 40vw;
+
+    .barContainer{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .optionContainer{
+        display: flex;
+        width: 20vw;
+        justify-content: space-around;
+        align-items: center;
+
+        .optionTitle{
+          //font-weight: 500;
+        }
+
+        .optionSelect{
+          color: #6772e5;
+          font-weight: 500;
+          padding: 5px;
+          cursor: pointer;
+        }
+
+        .optionSelect:hover{
+          color: #2b47b2;
+          -webkit-animation-name: bounce;
+          -moz-animation-name: bounce;
+          -ms-animation-name: bounce;
+          -o-animation-name: bounce;
+          animation-name: bounce;
+          -webkit-animation-duration: 0.5s;
+          -moz-animation-duration: 0.5s;
+          -ms-animation-duration: 0.5s;
+          -o-animation-duration: 0.5s;
+          animation-duration: 0.5s;
+        }
+
+        @-webkit-keyframes bounce {
+          0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
+          40% {-webkit-transform: translateY(-5px);}
+          60% {-webkit-transform: translateY(-2.5px);}
+        }
+
+        @-moz-keyframes bounce {
+          0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
+          40% {-moz-transform: translateY(-5px);}
+          60% {-moz-transform: translateY(-2.5px);}
+        }
+
+        @-ms-keyframes bounce {
+          0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
+          40% {-ms-transform: translateY(-5px);}
+          60% {-ms-transform: translateY(-2.5px);}
+        }
+
+        @-o-keyframes bounce {
+          0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
+          40% {-o-transform: translateY(-5px);}
+          60% {-o-transform: translateY(-2.5px);}
+        }
+        @keyframes bounce {
+          0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+          40% {transform: translateY(-5px);}
+          60% {transform: translateY(-2.5px);}
+        }
+      }
+    }
+
+    .dividerTop{
+      margin-top: 15px;
+    }
+  }
+}