feat: transactions list and details, minor fixes

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 />

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}>

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: {

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: {

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),

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;

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,
+  },
+}));

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}>

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',
   },
 }));

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;

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,
+    },
+  },
+}));

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;

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;