feat: account details page

src/AppV2.js

@@ -34,6 +34,7 @@ const ApplicationDetail = lazy(() =>
   import('v2/components/Applications/Detail'),
 );
 const Favorites = lazy(() => import('v2/components/Favorites'));
+const AccountDetail = lazy(() => import('v2/components/Account/Detail'));
 
 const useStyles = makeStyles(() => {
   return {
@@ -132,6 +133,7 @@ const App = () => {
                   component={ApplicationDetail}
                 />
                 <Route exact path="/favorites" component={Favorites} />
+                <Route exact path="/account/:id" component={AccountDetail} />
               </Switch>
             </Suspense>
             <Footer />

src/v2/components/Account/Detail/Chart/index.jsx

@@ -0,0 +1,94 @@
+// @flow
+import {get, maxBy, minBy, map} from 'lodash/fp';
+import React, {useState} from 'react';
+import cn from 'classnames';
+import {ResponsiveLine} from '@nivo/line';
+import OverviewStore from 'v2/stores/networkOverview';
+
+import HelpLink from 'v2/components/HelpLink';
+import useStyles from './styles';
+
+type Point = {
+  data: {
+    x: string,
+    y: number,
+    date: string,
+  },
+};
+
+const Tooltip = ({point: {data}}: {point: Point}) => {
+  const classes = useStyles();
+  if (!data) return null;
+  return (
+    <div className={classes.tooltip}>
+      <div className={classes.tooltipDot} />
+      <div className={classes.tooltipTitle}>AVG TPS:{data.y}</div>
+      <div className={classes.tooltipDate}>{data.date}</div>
+    </div>
+  );
+};
+
+const Chart = props => {
+  const [range, setRange] = useState('24h');
+  const classes = useStyles();
+  const {txnChartData} = OverviewStore;
+  const data = [
+    {
+      id: 'txn',
+      data: txnChartData,
+    },
+  ];
+
+  const min = get('y')(minBy('y')(txnChartData));
+  const max = get('y')(maxBy('y')(txnChartData));
+
+  const rangeBtns = ['24h', '1m', '6m', '1y', 'all'];
+
+  const lineProperties = {
+    animate: true,
+    useMesh: true,
+    layers: ['lines', 'mesh'],
+    enableSlices: false,
+    yScale: {
+      type: 'linear',
+      stacked: false,
+      min,
+      max,
+    },
+    xScale: {
+      type: 'time',
+      format: '%Y%m%dT%H:%M',
+      precision: 'minute',
+    },
+    colors: ['#00FFAD'],
+    curve: 'monotoneX',
+    data,
+  };
+
+  const switchRange = val => () => setRange(val);
+
+  const renderRangeBtn = val => (
+    <button
+      className={cn(classes.rangeBtn, {[classes.rangeActive]: val === range})}
+      onClick={switchRange(val)}
+    >
+      {val}
+    </button>
+  );
+
+  return (
+    <div className={classes.card}>
+      <div className={classes.header}>
+        <div className={classes.title}>
+          Balance <HelpLink text="" term="" />
+        </div>
+        <div>{map(renderRangeBtn)(rangeBtns)}</div>
+      </div>
+      <div className={classes.graph}>
+        <ResponsiveLine {...lineProperties} tooltip={Tooltip} />
+      </div>
+    </div>
+  );
+};
+
+export default Chart;

src/v2/components/Account/Detail/Chart/styles.js

@@ -0,0 +1,64 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+  card: {
+    backgroundColor: getColor('grey2')(theme),
+  },
+  graph: {
+    textAlign: 'center',
+    height: 220,
+    padding: '20px 40px',
+  },
+  tooltip: {
+    backgroundColor: '#fff',
+    padding: 13,
+    color: getColor('dark')(theme),
+    textAlign: 'center',
+  },
+  tooltipDot: {
+    position: 'absolute',
+    width: 14,
+    height: 14,
+    background: getColor('main')(theme),
+    borderRadius: '50%',
+    border: `3px solid ${getColor('grey2')(theme)}`,
+    bottom: -20,
+    left: '50%',
+    marginLeft: -7,
+  },
+  tooltipDate: {
+    fontSize: 12,
+    color: getColor('grey3')(theme),
+  },
+  tooltipTitle: {
+    textTransform: 'uppercase',
+  },
+  rangeBtn: {
+    textTransform: 'uppercase',
+    color: getColor('grey4')(theme),
+    width: 44,
+    marginLeft: 4,
+    backgroundColor: 'transparent',
+    border: 'none',
+    outline: 'none',
+    cursor: 'pointer',
+    fontFamily: 'Exo, sans-serif',
+    letterSpacing: 2.5,
+  },
+  rangeActive: {
+    color: getColor('main')(theme),
+    fontWeight: 'bold',
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '20px 35px',
+    marginBottom: 30,
+  },
+  title: {
+    textTransform: 'uppercase',
+    fontSize: 18,
+  },
+}));

src/v2/components/Account/Detail/Code/index.jsx

@@ -0,0 +1,29 @@
+// @flow
+import React from 'react';
+import HelpLink from 'v2/components/HelpLink';
+import CopyBtn from 'v2/components/UI/CopyBtn';
+import {observer} from 'mobx-react-lite';
+import YAML from 'yaml';
+
+import useStyles from './styles';
+
+const AccountCode = ({accountView}: {accountView: Object}) => {
+  const classes = useStyles();
+  const applicationCode = YAML.stringify(accountView);
+
+  return (
+    <div>
+      <div className={classes.header}>
+        <CopyBtn text={applicationCode} />
+        <HelpLink text="" term="" />
+      </div>
+      <div className={classes.code}>
+        <code>
+          <code>{applicationCode}</code>
+        </code>
+      </div>
+    </div>
+  );
+};
+
+export default observer(AccountCode);

src/v2/components/Account/Detail/Code/styles.js

@@ -0,0 +1,28 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    marginBottom: 17,
+    '& a': {
+      marginLeft: 15,
+    },
+  },
+  code: {
+    maxHeight: 456,
+    overflowY: 'auto',
+    backgroundColor: getColor('grey')(theme),
+    padding: 39,
+    color: getColor('white')(theme),
+    '& code': {
+      whiteSpace: 'pre-wrap',
+      letterSpacing: 2,
+      fontSize: 15,
+      lineHeight: '100%',
+      display: 'block',
+    },
+  },
+}));

src/v2/components/Account/Detail/Transactions/index.jsx

@@ -0,0 +1,91 @@
+// @flow
+import React from 'react';
+import {observer} from 'mobx-react-lite';
+import {TableCell, TableRow} from '@material-ui/core';
+import Table from 'v2/components/UI/Table';
+import TypeLabel from 'v2/components/UI/TypeLabel';
+
+import useStyles from './styles';
+
+const fields = [
+  {
+    id: 'hash',
+    label: 'Hash',
+    text: '',
+    term: '',
+  },
+  {
+    id: 'block',
+    label: 'Block',
+    text: '',
+    term: '',
+  },
+  {
+    id: 'time',
+    label: 'Time',
+    text: '',
+    term: '',
+  },
+  {
+    id: 'application_id',
+    label: 'Application Id',
+    text: '',
+    term: '',
+  },
+  {
+    id: 'type',
+    label: 'Type',
+    text: '',
+    term: '',
+  },
+  {
+    id: 'confirmations',
+    label: 'Confirmations',
+    text: '',
+    term: '',
+  },
+];
+
+const demoData = [
+  {
+    hash: '5CpdpKwKUBJgD4Bdase123as12asd21312',
+    block: '7887219',
+    time: '55 sec ago',
+    timeType: 'in',
+    application_id: '5CpdpKwKUBJgD4Bdase123as12asd21312',
+    type: 'other',
+    confirmations: 5,
+  },
+];
+
+const Transactions = ({transactions}: {transactions: Array}) => {
+  const classes = useStyles();
+  const renderRow = transaction => {
+    return (
+      <TableRow key={transaction.hash}>
+        <TableCell>{transaction.hash}</TableCell>
+        <TableCell>{transaction.block}</TableCell>
+        <TableCell>
+          {transaction.time}
+          <span className={classes.timeType}>{transaction.timeType}</span>
+        </TableCell>
+        <TableCell>{transaction.application_id}</TableCell>
+        <TableCell>
+          <TypeLabel type={transaction.type} label={transaction.type} />
+        </TableCell>
+        <TableCell>{transaction.confirmations}</TableCell>
+      </TableRow>
+    );
+  };
+
+  return (
+    <Table
+      initialOrder="hash"
+      renderRow={renderRow}
+      data={demoData}
+      fields={fields}
+    />
+  );
+};
+
+export default observer(Transactions);

src/v2/components/Account/Detail/Transactions/styles.js

@@ -0,0 +1,14 @@
+import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
+
+export default makeStyles(theme => ({
+  timeType: {
+    display: 'inline-block',
+    backgroundColor: getColor('grey3')(theme),
+    textTransform: 'uppercase',
+    borderRadius: 2,
+    color: getColor('dark')(theme),
+    padding: '2px 10px',
+    marginLeft: 20,
+  },
+}));