From 76d216d4b029d054b517ff43a932f5e70480dd22 Mon Sep 17 00:00:00 2001
From: Manuel Calavera <diserkin@gmail.com>
Date: Tue, 6 Aug 2019 17:15:43 -0700
Subject: [PATCH] feat: transactions list and details, minor fixes

---
 src/AppV2.js                                  |  10 ++
 src/v2/assets/icons/arrow-right-green.png     | Bin 0 -> 385 bytes
 src/v2/assets/icons/star.svg                  |   3 +
 src/v2/components/Blocks/Detail/index.jsx     |  12 +-
 src/v2/components/Blocks/Table/styles.js      |   8 ++
 src/v2/components/Dashboard/ViewAll/styles.js |   1 -
 src/v2/components/HelpLink/styles.js          |   1 +
 src/v2/components/QRPopup/index.jsx           |  35 ++++++
 src/v2/components/QRPopup/styles.js           |  15 +++
 src/v2/components/TourDeSol/Ranking/index.jsx |   6 +-
 src/v2/components/TourDeSol/Table/styles.js   |   2 +-
 .../Transactions/Detail/Application/index.jsx |  53 ++++++++
 .../Transactions/Detail/Application/styles.js |  48 +++++++
 .../Transactions/Detail/ApplicationsTab.jsx   |  17 +++
 .../Transactions/Detail/Status/index.jsx      |  45 +++++++
 .../Transactions/Detail/Status/styles.js      |  70 +++++++++++
 .../components/Transactions/Detail/index.jsx  | 117 ++++++++++++++++++
 .../components/Transactions/Detail/styles.js  | 111 +++++++++++++++++
 .../components/Transactions/Table/index.jsx   |   2 +-
 src/v2/components/Transactions/index.jsx      |  23 ++++
 src/v2/components/Transactions/styles.js      |   8 ++
 src/v2/components/UI/Label/index.jsx          |  17 +++
 src/v2/components/UI/Label/styles.js          |  17 +++
 src/v2/components/Validators/Table/styles.js  |   2 +-
 src/v2/components/Validators/index.jsx        |   4 +-
 25 files changed, 607 insertions(+), 20 deletions(-)
 create mode 100644 src/v2/assets/icons/arrow-right-green.png
 create mode 100644 src/v2/assets/icons/star.svg
 create mode 100644 src/v2/components/QRPopup/index.jsx
 create mode 100644 src/v2/components/QRPopup/styles.js
 create mode 100644 src/v2/components/Transactions/Detail/Application/index.jsx
 create mode 100644 src/v2/components/Transactions/Detail/Application/styles.js
 create mode 100644 src/v2/components/Transactions/Detail/ApplicationsTab.jsx
 create mode 100644 src/v2/components/Transactions/Detail/Status/index.jsx
 create mode 100644 src/v2/components/Transactions/Detail/Status/styles.js
 create mode 100644 src/v2/components/Transactions/Detail/index.jsx
 create mode 100644 src/v2/components/Transactions/Detail/styles.js
 create mode 100644 src/v2/components/Transactions/index.jsx
 create mode 100644 src/v2/components/Transactions/styles.js
 create mode 100644 src/v2/components/UI/Label/index.jsx
 create mode 100644 src/v2/components/UI/Label/styles.js

diff --git a/src/AppV2.js b/src/AppV2.js
index fb07891d..4c67fe89 100644
--- a/src/AppV2.js
+++ b/src/AppV2.js
@@ -21,6 +21,10 @@ const ValidatorDetail = lazy(() => import('v2/components/Validators/Detail'));
 const TourDeSol = lazy(() => import('v2/components/TourDeSol'));
 const Blocks = lazy(() => import('v2/components/Blocks'));
 const BlockDetail = lazy(() => import('v2/components/Blocks/Detail'));
+const Transactions = lazy(() => import('v2/components/Transactions'));
+const TransactionDetail = lazy(() =>
+  import('v2/components/Transactions/Detail'),
+);
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -73,6 +77,12 @@ const App = () => {
               <Route exact path="/tour-de-sol" component={TourDeSol} />
               <Route exact path="/blocks" component={Blocks} />
               <Route exact path="/blocks/:id" component={BlockDetail} />
+              <Route exact path="/transactions" component={Transactions} />
+              <Route
+                exact
+                path="/transactions/:id"
+                component={TransactionDetail}
+              />
             </Switch>
           </Suspense>
           <Footer />
diff --git a/src/v2/assets/icons/arrow-right-green.png b/src/v2/assets/icons/arrow-right-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..62a7a37f2f4e52c25c2ed483b8555377510a9b56
GIT binary patch
literal 385
zcmV-{0e=38P)<h;3K|Lk000e1NJLTq001@s000dL1^@s6;`p7j00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0TxL_K~#7F-IBda
zLQxpTpJO)?DkSm`aEq3}F=((rm!PGBnv%xGrpAH>Cub)`bPxpvSMduKClLg36n8}w
z1;4n*a~8QC6<y!^8xEZ3IUoGs1&HG2MUR`8pLX>Y5T%R7Wexq<Eib%o>&c2qMp&FQ
zFo+1bPqia0CK(I4I{E=8&wU$n@?w$+^y3x=KBJr|#3ZVmwsC?d^I~x+=`Yyx-}<?@
z7dQ$jmkVGo_v=y00qAXPV0C~!cJ}|xz2eO<4nWGaG5YuLQiXviPM&>lVi=u4Urn7A
zmiaYoKXvxtH_a#-rR3feVycux1948FO>bcPsxnv5n3EPe6H-?={}56MwIeHLht{*>
f;w{7O(%bqahzeZ6a~(?800000NkvXXu0mjfGMSh!

literal 0
HcmV?d00001

diff --git a/src/v2/assets/icons/star.svg b/src/v2/assets/icons/star.svg
new file mode 100644
index 00000000..8ec99219
--- /dev/null
+++ b/src/v2/assets/icons/star.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4266 1.77254C10.9776 0.390579 9.02244 0.390571 8.57342 1.77254L7.27933 5.75532C7.21239 5.96133 7.02042 6.10081 6.8038 6.10081H2.61606C1.16298 6.10081 0.558809 7.96023 1.73438 8.81434L5.12234 11.2758C5.29758 11.4032 5.37091 11.6288 5.30397 11.8348L4.00989 15.8176C3.56086 17.1996 5.14258 18.3488 6.31815 17.4947L9.70611 15.0332C9.88135 14.9059 10.1186 14.9059 10.2939 15.0332L13.6818 17.4947C14.8574 18.3488 16.4391 17.1996 15.9901 15.8176L14.696 11.8348C14.6291 11.6288 14.7024 11.4032 14.8777 11.2758L18.2656 8.81434C19.4412 7.96024 18.837 6.10081 17.3839 6.10081H13.1962C12.9796 6.10081 12.7876 5.96133 12.7207 5.75532L11.4266 1.77254Z" stroke="#00C38D"/>
+</svg>
diff --git a/src/v2/components/Blocks/Detail/index.jsx b/src/v2/components/Blocks/Detail/index.jsx
index b818af80..79fd0eec 100644
--- a/src/v2/components/Blocks/Detail/index.jsx
+++ b/src/v2/components/Blocks/Detail/index.jsx
@@ -4,14 +4,13 @@ import {observer} from 'mobx-react-lite';
 import React, {useEffect} from 'react';
 import {map} from 'lodash/fp';
 import {Match, Link} from 'react-router-dom';
-import {CopyToClipboard} from 'react-copy-to-clipboard';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import HelpLink from 'v2/components/HelpLink';
 import Avatar from 'v2/components/UI/Avatar';
-import {ReactComponent as CopyIcon} from 'v2/assets/icons/copy.svg';
 import Mixpanel from 'v2/mixpanel';
+import CopyBtn from 'v2/components/UI/CopyBtn';
+import TransactionsTable from 'v2/components/Transactions/Table';
 
-import TransactionsTable from '../../Transactions/Table';
 import useStyles from './styles';
 
 const BlockDetail = ({match}: {match: Match}) => {
@@ -80,12 +79,7 @@ const BlockDetail = ({match}: {match: Match}) => {
       <div className={classes.root}>
         <SectionHeader title="Block Detail">
           <span className={classes.blockTitle}>
-            7887219
-            <CopyToClipboard text="7887219">
-              <div>
-                <CopyIcon />
-              </div>
-            </CopyToClipboard>
+            <CopyBtn text="123" />
           </span>
         </SectionHeader>
         <div className={classes.body}>
diff --git a/src/v2/components/Blocks/Table/styles.js b/src/v2/components/Blocks/Table/styles.js
index 5678a2e8..6eed4eb0 100644
--- a/src/v2/components/Blocks/Table/styles.js
+++ b/src/v2/components/Blocks/Table/styles.js
@@ -18,6 +18,10 @@ export default makeStyles(theme => ({
       letterSpacing: 2,
       fontWeight: 'bold',
       borderBottom: 'none',
+      paddingRight: 16,
+      '&:first-child': {
+        paddingLeft: 40,
+      },
     },
   },
   body: {
@@ -29,6 +33,10 @@ export default makeStyles(theme => ({
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       overflow: 'hidden',
+      paddingRight: 16,
+      '&:first-child': {
+        paddingLeft: 40,
+      },
     },
   },
   name: {
diff --git a/src/v2/components/Dashboard/ViewAll/styles.js b/src/v2/components/Dashboard/ViewAll/styles.js
index 371d9a25..1f232e91 100644
--- a/src/v2/components/Dashboard/ViewAll/styles.js
+++ b/src/v2/components/Dashboard/ViewAll/styles.js
@@ -2,7 +2,6 @@ import {makeStyles} from '@material-ui/core';
 
 export default makeStyles({
   root: {
-    padding: '40px 0',
     position: 'relative',
   },
   title: {
diff --git a/src/v2/components/HelpLink/styles.js b/src/v2/components/HelpLink/styles.js
index 678e772e..73064819 100644
--- a/src/v2/components/HelpLink/styles.js
+++ b/src/v2/components/HelpLink/styles.js
@@ -15,6 +15,7 @@ export default makeStyles(theme => ({
     color: getColor('greenDark')(theme),
     transition: '.15s ease-in-out',
     marginLeft: 5,
+    marginTop: -2,
     '&:hover': {
       color: getColor('main')(theme),
       borderColor: getColor('main')(theme),
diff --git a/src/v2/components/QRPopup/index.jsx b/src/v2/components/QRPopup/index.jsx
new file mode 100644
index 00000000..04476f77
--- /dev/null
+++ b/src/v2/components/QRPopup/index.jsx
@@ -0,0 +1,35 @@
+import {Popover} from '@material-ui/core';
+import React, {useState} from 'react';
+
+import useStyles from './styles';
+
+const QRPopup = () => {
+  const classes = useStyles();
+  const [qrEl, setQrEl] = useState(null);
+  const handleQrOpen = event => setQrEl(event.currentTarget);
+  const handleQrClose = () => setQrEl(null);
+  return (
+    <div>
+      <button className={classes.qrBtn} onClick={handleQrOpen}>
+        QR code
+      </button>
+      <Popover
+        open={Boolean(qrEl)}
+        onClose={handleQrClose}
+        anchorEl={qrEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+      >
+        <img src="http://placehold.it/315" alt="" />
+      </Popover>
+    </div>
+  );
+};
+
+export default QRPopup;
diff --git a/src/v2/components/QRPopup/styles.js b/src/v2/components/QRPopup/styles.js
new file mode 100644
index 00000000..082edabd
--- /dev/null
+++ b/src/v2/components/QRPopup/styles.js
@@ -0,0 +1,15 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+  qrBtn: {
+    color: getColor('main')(theme),
+    border: `1px solid ${getColor('main')(theme)}`,
+    fontSize: 10,
+    textTransform: 'uppercase',
+    height: 18,
+    width: 55,
+    background: 'transparent',
+    padding: 0,
+  },
+}));
diff --git a/src/v2/components/TourDeSol/Ranking/index.jsx b/src/v2/components/TourDeSol/Ranking/index.jsx
index e2693e54..e97c3d31 100644
--- a/src/v2/components/TourDeSol/Ranking/index.jsx
+++ b/src/v2/components/TourDeSol/Ranking/index.jsx
@@ -23,11 +23,7 @@ const Ranking = () => {
     return (
       <li key={nodePubkey} className={classes.item}>
         <div className={classes.name}>
-          <Avatar
-            pubkey={nodePubkey}
-            name={identity.name}
-            avatarUrl={identity.avatarUrl}
-          />
+          <Avatar pubkey={nodePubkey} avatarUrl={identity.avatarUrl} />
           {identity.name || nodePubkey}
         </div>
         <div className={classes.bar}>
diff --git a/src/v2/components/TourDeSol/Table/styles.js b/src/v2/components/TourDeSol/Table/styles.js
index 4dc2e62b..c52545ea 100644
--- a/src/v2/components/TourDeSol/Table/styles.js
+++ b/src/v2/components/TourDeSol/Table/styles.js
@@ -101,6 +101,6 @@ export default makeStyles(theme => ({
     textTransform: 'uppercase',
     color: '#C4C4C4',
     letterSpacing: 2,
-    fontWight: 'bold',
+    fontWeight: 'bold',
   },
 }));
diff --git a/src/v2/components/Transactions/Detail/Application/index.jsx b/src/v2/components/Transactions/Detail/Application/index.jsx
new file mode 100644
index 00000000..c6238f26
--- /dev/null
+++ b/src/v2/components/Transactions/Detail/Application/index.jsx
@@ -0,0 +1,53 @@
+// @flow
+import React from 'react';
+import {map} from 'lodash/fp';
+import {Grid} from '@material-ui/core';
+import Label from 'v2/components/UI/Label';
+import Avatar from 'v2/components/UI/Avatar';
+import TypeLabel from 'v2/components/UI/TypeLabel';
+
+import useStyles from './styles';
+
+type TApplication = {
+  id: string,
+  accounts: string[],
+};
+
+const Application = ({id, accounts}: TApplication) => {
+  const classes = useStyles();
+  const renderAccount = account => (
+    <div className={classes.account}>
+      <Label text="account 1" hint="" />
+      <Avatar
+        avatarUrl=""
+        name=""
+        width={33}
+        height={33}
+        pubkey="0xAA15A3E6b97d09653b8b8d9c9e1D80daf5ba81e8"
+      />
+      <div className={classes.address}>
+        0xAA15A3E6b97d09653b8b8d9c9e1D80daf5ba81e8
+      </div>
+    </div>
+  );
+  return (
+    <div className={classes.root}>
+      <Grid container spacing={5}>
+        <Grid item md={5}>
+          <Label text="Application id" hint="" />
+          <div className={classes.id}>
+            <div className={classes.address}>{id}</div>
+            <TypeLabel type="other" label="other" />
+            <TypeLabel type="consensus" label="consensus" />
+          </div>
+        </Grid>
+        <Grid item md={7}>
+          {map(renderAccount)(accounts)}
+          {renderAccount()}
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+export default Application;
diff --git a/src/v2/components/Transactions/Detail/Application/styles.js b/src/v2/components/Transactions/Detail/Application/styles.js
new file mode 100644
index 00000000..499118f2
--- /dev/null
+++ b/src/v2/components/Transactions/Detail/Application/styles.js
@@ -0,0 +1,48 @@
+import {makeStyles} from '@material-ui/core';
+import {fade} from '@material-ui/core/styles';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+  root: {
+    borderBottom: `1px solid ${fade(getColor('grey3')(theme), 0.5)}`,
+    paddingBottom: 34,
+  },
+  account: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    marginBottom: 40,
+    '& > div:first-child': {
+      marginRight: 25,
+    },
+    '& > div:nth-child(2)': {
+      [theme.breakpoints.down('xs')]: {
+        display: 'none',
+      },
+    },
+
+    '& > div:last-child': {
+      marginLeft: 25,
+      [theme.breakpoints.down('xs')]: {
+        marginLeft: 0,
+      },
+    },
+    [theme.breakpoints.down('xs')]: {
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    },
+  },
+  address: {
+    color: getColor('main')(theme),
+    lineHeight: '29px',
+  },
+  id: {
+    marginTop: 28,
+    '& > div:not(:first-child)': {
+      marginRight: 5,
+    },
+    [theme.breakpoints.down('sm')]: {
+      marginTop: 0,
+    },
+  },
+}));
diff --git a/src/v2/components/Transactions/Detail/ApplicationsTab.jsx b/src/v2/components/Transactions/Detail/ApplicationsTab.jsx
new file mode 100644
index 00000000..652b199d
--- /dev/null
+++ b/src/v2/components/Transactions/Detail/ApplicationsTab.jsx
@@ -0,0 +1,17 @@
+// @flow
+import React from 'react';
+
+import Application from './Application';
+
+const ApplicationsTab = ({applications}) => {
+  return (
+    <div>
+      <Application
+        id="0xAA15A3E6b97d09653b8b8d9c9e1D80daf5ba81e8"
+        accounts={[]}
+      />
+    </div>
+  );
+};
+
+export default ApplicationsTab;
diff --git a/src/v2/components/Transactions/Detail/Status/index.jsx b/src/v2/components/Transactions/Detail/Status/index.jsx
new file mode 100644
index 00000000..a93039ba
--- /dev/null
+++ b/src/v2/components/Transactions/Detail/Status/index.jsx
@@ -0,0 +1,45 @@
+// @flow
+import {map} from 'lodash/fp';
+import React from 'react';
+import {Grid} from '@material-ui/core';
+import Label from 'v2/components/UI/Label';
+
+import useStyles from './styles';
+
+const ApplicationStatus = () => {
+  const classes = useStyles();
+  const specs = [
+    {
+      label: 'status',
+      value: 'success',
+    },
+    {
+      label: 'confirmations',
+      value: '5',
+    },
+  ];
+  const renderSpec = ({label, value}: {label: string, value: string}) => (
+    <li key={label}>
+      <Label text={label} hint="" />
+      <div className={classes.value}>
+        {typeof value === 'function' ? value() : value}
+      </div>
+    </li>
+  );
+  return (
+    <Grid container>
+      <Grid item sm={7}>
+        <ul className={classes.spec}>{map(renderSpec)(specs)}</ul>
+      </Grid>
+      <Grid item sm={5}>
+        <Label text="confidence" hint="" />
+        <div className={classes.circle}>
+          90%
+          <div />
+        </div>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default ApplicationStatus;
diff --git a/src/v2/components/Transactions/Detail/Status/styles.js b/src/v2/components/Transactions/Detail/Status/styles.js
new file mode 100644
index 00000000..3e99f84b
--- /dev/null
+++ b/src/v2/components/Transactions/Detail/Status/styles.js
@@ -0,0 +1,70 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+  spec: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    padding: 0,
+    [theme.breakpoints.down('xs')]: {
+      flexDirection: 'column',
+    },
+    '& li': {
+      display: 'flex',
+      marginBottom: 48,
+      width: '100%',
+      '& > div:first-child': {
+        width: 150,
+        marginRight: 40,
+      },
+      [theme.breakpoints.down('sm')]: {
+        marginBottom: 32,
+        flexDirection: 'column',
+      },
+      '&:nth-child(odd)': {
+        marginRight: 80,
+        [theme.breakpoints.down('xs')]: {
+          marginRight: 0,
+        },
+      },
+    },
+  },
+  value: {
+    fontSize: 15,
+    lineHeight: '29px',
+    overflow: 'hidden',
+    textTransform: 'uppercase',
+    textOverflow: 'ellipsis',
+    '& a': {
+      color: getColor('main')(theme),
+      textDecoration: 'none',
+      '&:hover': {
+        textDecoration: 'underline',
+      },
+    },
+  },
+  circle: {
+    width: 130,
+    height: 130,
+    borderRadius: '50%',
+    overflow: 'hidden',
+    border: `3px solid ${getColor('grey4')(theme)}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    color: getColor('dark')(theme),
+    zIndex: 1,
+    fontSize: 24,
+    marginTop: 57,
+    '& div': {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      background: getColor('main')(theme),
+      left: 0,
+      top: 30,
+      zIndex: -1,
+    },
+  },
+}));
diff --git a/src/v2/components/Transactions/Detail/index.jsx b/src/v2/components/Transactions/Detail/index.jsx
new file mode 100644
index 00000000..09f65f2b
--- /dev/null
+++ b/src/v2/components/Transactions/Detail/index.jsx
@@ -0,0 +1,117 @@
+// @flow
+import {Container, Tabs, Tab, useTheme} from '@material-ui/core';
+import useMediaQuery from '@material-ui/core/useMediaQuery/useMediaQuery';
+import {map, eq} from 'lodash/fp';
+import React, {useState} from 'react';
+import arrowIcon from 'v2/assets/icons/arrow-right-green.png';
+import arrowDarkIcon from 'v2/assets/icons/arrow-right-dark.png';
+import SectionHeader from 'v2/components/UI/SectionHeader';
+
+import HelpLink from 'v2/components/HelpLink';
+import QRPopup from 'v2/components/QRPopup';
+import CopyBtn from '../../UI/CopyBtn';
+
+import ApplicationsTab from './ApplicationsTab';
+import ApplicationStatus from './Status';
+import useStyles from './styles';
+
+const TransactionDetail = () => {
+  const classes = useStyles();
+  const [tab, setTab] = useState(0);
+  const theme = useTheme();
+  const verticalTabs = useMediaQuery(theme.breakpoints.down('sm'));
+  const handleTabChange = (event, tab) => setTab(tab);
+
+  const specs = [
+    {
+      label: 'Time',
+      hint: '',
+      value: '06/05/2019 11:27AM',
+    },
+    {
+      label: 'Fee',
+      hint: '',
+      value: '0.006 SOL | $0.60',
+    },
+    {
+      label: 'Block',
+      hint: '',
+      value: '7887219',
+    },
+    {
+      label: 'Confirmations',
+      hint: '',
+      value: '1,245',
+    },
+    {
+      label: 'Value',
+      hint: '',
+      value: '0.006 SOL | $0.60',
+    },
+  ];
+
+  const renderSpec = ({label, value}: {label: string, value: string}) => (
+    <li key={label}>
+      <div className={classes.label}>
+        {label}
+        <HelpLink term="" text="" />
+      </div>
+      <div className={classes.value}>
+        {typeof value === 'function' ? value() : value}
+      </div>
+    </li>
+  );
+
+  const tabNav = ['Applications: 3', 'status: success', 'code/course'];
+
+  const renderTabNav = label => (
+    <Tab
+      key={label}
+      classes={{
+        root: classes.tab,
+        selected: classes.tabSelected,
+      }}
+      component={({className, 'aria-selected': selected, onClick}) => {
+        return (
+          <div className={className} onClick={onClick}>
+            {label}
+            <img src={selected ? arrowDarkIcon : arrowIcon} width={52} alt="" />
+          </div>
+        );
+      }}
+    />
+  );
+
+  return (
+    <Container>
+      <div className={classes.root}>
+        <SectionHeader title="Transaction Detail">
+          <div className={classes.blockTitle}>
+            <span>
+              0x03e125a40b39a637028bce780af3544e51cfa2f61abbe7c8ec8059f7178bce74
+            </span>
+            <CopyBtn text="123" />
+            <QRPopup />
+          </div>
+        </SectionHeader>
+        <div className={classes.body}>
+          <ul className={classes.spec}>{map(renderSpec)(specs)}</ul>
+        </div>
+        <Tabs
+          orientation={verticalTabs ? 'vertical' : 'horizontal'}
+          className={classes.tabs}
+          classes={{indicator: classes.indicator}}
+          value={tab}
+          variant="fullWidth"
+          onChange={handleTabChange}
+        >
+          {map(renderTabNav)(tabNav)}
+        </Tabs>
+        {eq(0, tab) && <ApplicationsTab />}
+        {eq(1, tab) && <ApplicationStatus />}
+      </div>
+    </Container>
+  );
+};
+
+export default TransactionDetail;
diff --git a/src/v2/components/Transactions/Detail/styles.js b/src/v2/components/Transactions/Detail/styles.js
new file mode 100644
index 00000000..919bbbb1
--- /dev/null
+++ b/src/v2/components/Transactions/Detail/styles.js
@@ -0,0 +1,111 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+  blockTitle: {
+    display: 'flex',
+    alignItems: 'center',
+    marginLeft: 100,
+    marginRight: 'auto',
+    overflow: 'hidden',
+    '& div': {
+      marginLeft: 15,
+      display: 'flex',
+      alignItems: 'center',
+    },
+    '& span': {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+    [theme.breakpoints.down('md')]: {
+      flexWrap: 'wrap',
+      marginLeft: 0,
+    },
+    [theme.breakpoints.down('sm')]: {
+      '& span': {
+        width: '100%',
+        marginBottom: 3,
+      },
+    },
+  },
+  qrBtn: {
+    color: getColor('main')(theme),
+    border: `1px solid ${getColor('main')(theme)}`,
+    fontSize: 10,
+    textTransform: 'uppercase',
+    height: 18,
+    width: 55,
+    background: 'transparent',
+    padding: 0,
+    marginLeft: 15,
+  },
+  spec: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    padding: 0,
+    '& li': {
+      width: '50%',
+      display: 'flex',
+      marginBottom: 48,
+      [theme.breakpoints.down('sm')]: {
+        marginBottom: 32,
+        flexDirection: 'column',
+      },
+      '&:nth-child(odd)': {
+        width: 'calc(50% - 80px)',
+        marginRight: 80,
+        [theme.breakpoints.down('xs')]: {
+          marginRight: 40,
+          width: 'calc(50% - 40px)',
+        },
+      },
+    },
+  },
+  label: {
+    textTransform: 'uppercase',
+    fontSize: 15,
+    fontWeight: 'bold',
+    letterSpacing: 2,
+    width: 150,
+    flexShrink: 0,
+    marginRight: 40,
+    color: getColor('grey4')(theme),
+    display: 'flex',
+    alignItems: 'center',
+    [theme.breakpoints.down('md')]: {
+      marginRight: 20,
+    },
+    [theme.breakpoints.down('sm')]: {
+      width: '100%',
+      marginRight: 0,
+    },
+  },
+  value: {
+    fontSize: 15,
+    lineHeight: '29px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    '& a': {
+      color: getColor('main')(theme),
+      textDecoration: 'none',
+      '&:hover': {
+        textDecoration: 'underline',
+      },
+    },
+  },
+  tabs: {
+    marginBottom: 50,
+  },
+  indicator: {
+    display: 'none',
+  },
+  tab: {
+    border: `1px solid ${getColor('main')(theme)}`,
+    color: getColor('main')(theme),
+    opacity: 1,
+  },
+  tabSelected: {
+    backgroundColor: getColor('main')(theme),
+    color: getColor('dark')(theme),
+  },
+}));
diff --git a/src/v2/components/Transactions/Table/index.jsx b/src/v2/components/Transactions/Table/index.jsx
index 86709a08..eb43600f 100644
--- a/src/v2/components/Transactions/Table/index.jsx
+++ b/src/v2/components/Transactions/Table/index.jsx
@@ -119,7 +119,7 @@ const TransactionsTable = ({
             {map(renderRow)(transactions)}
             <TableRow hover>
               <TableCell align="center">
-                <Link to={`/transaction/234`} className={classes.name}>
+                <Link to={`/transactions/234`} className={classes.name}>
                   <div>5CpdpKwKUBJgD4Bd...</div>
                 </Link>
               </TableCell>
diff --git a/src/v2/components/Transactions/index.jsx b/src/v2/components/Transactions/index.jsx
new file mode 100644
index 00000000..dd331b5e
--- /dev/null
+++ b/src/v2/components/Transactions/index.jsx
@@ -0,0 +1,23 @@
+// @flow
+import {Container} from '@material-ui/core';
+import React from 'react';
+import HelpLink from 'v2/components/HelpLink';
+import SectionHeader from 'v2/components/UI/SectionHeader';
+
+import Table from './Table';
+import useStyles from './styles';
+
+const TransactionsPage = () => {
+  const classes = useStyles();
+  return (
+    <Container>
+      <SectionHeader title="Transactions">
+        <HelpLink text="" term="" />
+        <div className={classes.total}>234,654</div>
+      </SectionHeader>
+      <Table />
+    </Container>
+  );
+};
+
+export default TransactionsPage;
diff --git a/src/v2/components/Transactions/styles.js b/src/v2/components/Transactions/styles.js
new file mode 100644
index 00000000..0fe6c45e
--- /dev/null
+++ b/src/v2/components/Transactions/styles.js
@@ -0,0 +1,8 @@
+import {makeStyles} from '@material-ui/core';
+
+export default makeStyles({
+  total: {
+    marginRight: 'auto',
+    marginLeft: 25,
+  },
+});
diff --git a/src/v2/components/UI/Label/index.jsx b/src/v2/components/UI/Label/index.jsx
new file mode 100644
index 00000000..bbfd9faa
--- /dev/null
+++ b/src/v2/components/UI/Label/index.jsx
@@ -0,0 +1,17 @@
+// @flow
+import React from 'react';
+import HelpLink from 'v2/components/HelpLink';
+
+import useStyles from './styles';
+
+const Label = ({text, hint}: {text: string, hint: string}) => {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <div className={classes.text}>{text}</div>
+      <HelpLink text={hint} term="" />
+    </div>
+  );
+};
+
+export default Label;
diff --git a/src/v2/components/UI/Label/styles.js b/src/v2/components/UI/Label/styles.js
new file mode 100644
index 00000000..bb8c622d
--- /dev/null
+++ b/src/v2/components/UI/Label/styles.js
@@ -0,0 +1,17 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  text: {
+    textTransform: 'uppercase',
+    color: getColor('grey4')(theme),
+    fontSize: 15,
+    letterSpacing: 2,
+    fontWeight: 'bold',
+    whiteSpace: 'nowrap',
+  },
+}));
diff --git a/src/v2/components/Validators/Table/styles.js b/src/v2/components/Validators/Table/styles.js
index c4336fb4..1ec3c648 100644
--- a/src/v2/components/Validators/Table/styles.js
+++ b/src/v2/components/Validators/Table/styles.js
@@ -102,6 +102,6 @@ export default makeStyles(theme => ({
     textTransform: 'uppercase',
     color: '#C4C4C4',
     letterSpacing: 2,
-    fontWight: 'bold',
+    fontWeight: 'bold',
   },
 }));
diff --git a/src/v2/components/Validators/index.jsx b/src/v2/components/Validators/index.jsx
index 3a3aae42..a68fe437 100644
--- a/src/v2/components/Validators/index.jsx
+++ b/src/v2/components/Validators/index.jsx
@@ -6,9 +6,9 @@ import {map} from 'lodash/fp';
 import Card from 'v2/components/UI/StatCard';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import NodesStore from 'v2/stores/nodes';
+import Mixpanel from 'v2/mixpanel';
+import Button from 'v2/components/UI/Button';
 
-import Mixpanel from '../../mixpanel';
-import Button from '../UI/Button';
 import ValidatorsMap from './ValidatorsMap';
 import ValidatorsTable from './Table';
 import useStyles from './styles';