feat: favs tab

src/AppV2.js

@@ -29,6 +29,7 @@ const Applications = lazy(() => import('v2/components/Applications'));
 const ApplicationDetail = lazy(() =>
   import('v2/components/Applications/Detail'),
 );
+const Favorites = lazy(() => import('v2/components/Favorites'));
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -93,6 +94,7 @@ const App = () => {
                 path="/applications/:id"
                 component={ApplicationDetail}
               />
+              <Route exact path="/favorites" component={Favorites} />
             </Switch>
           </Suspense>
           <Footer />

src/v2/components/Favorites/Accounts.jsx

@@ -0,0 +1,131 @@
+// @flow
+
+import React from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from '@material-ui/core';
+import cn from 'classnames';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import {useTheme} from '@material-ui/core/styles';
+import {observer} from 'mobx-react-lite';
+import {Link} from 'react-router-dom';
+import {map} from 'lodash/fp';
+import HelpLink from 'v2/components/HelpLink';
+
+import useStyles from './styles';
+
+type THead = {
+  name: string,
+  text: string,
+  term: string,
+  width?: number,
+};
+
+const tHeads: THead[] = [
+  {
+    name: 'Account Id',
+    text: '',
+    term: '',
+  },
+  {
+    name: 'nickname',
+    text: '',
+    term: '',
+  },
+  {
+    name: 'balance',
+    text: '',
+    term: '',
+  },
+  {
+    name: 'transactions',
+    text: '',
+    term: '',
+  },
+];
+
+const AccountsTable = ({separate}: {separate: boolean}) => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const showTable = useMediaQuery(theme.breakpoints.up('md'));
+  const blocks = [];
+
+  const renderRow = application => {
+    return (
+      <TableRow hover key={application.id}>
+        <TableCell align="center">
+          <Link to={`/applications/${application.id}`} className={classes.name}>
+            7887319
+          </Link>
+        </TableCell>
+        <TableCell>TESTNAME</TableCell>
+        <TableCell>0.006 SOL | $1.12</TableCell>
+        <TableCell>1234</TableCell>
+      </TableRow>
+    );
+  };
+  const renderTH = ({name, width, ...rest}: THead) => (
+    <TableCell key={name} width={width}>
+      {name}
+      <HelpLink {...rest} />
+    </TableCell>
+  );
+
+  return (
+    <div className={classes.root}>
+      {showTable ? (
+        <Table>
+          <TableHead className={classes.head}>
+            <TableRow>{map(renderTH)(tHeads)}</TableRow>
+          </TableHead>
+          <TableBody
+            classes={{
+              root: classes.body,
+            }}
+          >
+            {map(renderRow)(blocks)}
+            <TableRow hover>
+              <TableCell align="center">
+                <Link to={`/applications/1234`} className={classes.name}>
+                  7887319
+                </Link>
+              </TableCell>
+              <TableCell>TESTNAME</TableCell>
+              <TableCell>0.006 SOL | $1.12</TableCell>
+              <TableCell>1234</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      ) : (
+        <div className={cn(classes.list, separate && classes.vertical)}>
+          <div className={classes.card}>
+            <ul>
+              <li>
+                <div className={classes.cardTitle}>Application id</div>
+                <div>7887219</div>
+              </li>
+              <li>
+                <div className={classes.cardTitle}>Nickname</div>
+                <div>TESTNAME</div>
+              </li>
+              <li>
+                <div className={classes.cardTitle}>Balance</div>
+                <div>0.006 SOL | $1.12</div>
+              </li>
+              <li>
+                <div className={classes.cardTitle}>Transactions</div>
+                <div>2345</div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default observer(AccountsTable);

src/v2/components/Favorites/index.jsx

@@ -0,0 +1,47 @@
+// @flow
+import {Container, Tabs, useTheme} from '@material-ui/core';
+import useMediaQuery from '@material-ui/core/useMediaQuery/useMediaQuery';
+import {eq, map} from 'lodash/fp';
+import React, {useState} from 'react';
+import SectionHeader from 'v2/components/UI/SectionHeader';
+import TabNav from 'v2/components/UI/TabNav';
+import ApplicationsTable from 'v2/components/Applications/Table';
+import {ReactComponent as WarnIcon} from 'v2/assets/icons/warn.svg';
+
+import AccountsTable from './Accounts';
+import useStyles from './styles';
+
+const TransactionsPage = () => {
+  const classes = useStyles();
+  const [tab, setTab] = useState(0);
+  const theme = useTheme();
+  const verticalTabs = useMediaQuery(theme.breakpoints.down('xs'));
+  const handleTabChange = (event, tab) => setTab(tab);
+  const tabNav = ['Applications', 'Accounts'];
+  const renderTabNav = label => <TabNav key={label} label={label} />;
+
+  return (
+    <Container>
+      <SectionHeader title="Favorites">
+        <div className={classes.warn}>
+          <WarnIcon />
+          If you clear your cache, your favorites will be deleted.
+        </div>
+      </SectionHeader>
+      <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) && <ApplicationsTable />}
+      {eq(1, tab) && <AccountsTable />}
+    </Container>
+  );
+};
+
+export default TransactionsPage;

src/v2/components/Favorites/styles.js

@@ -0,0 +1,118 @@
+import {makeStyles} from '@material-ui/core';
+
+import getColor from '../../utils/getColor';
+
+export default makeStyles(theme => ({
+  indicator: {
+    display: 'none',
+  },
+  root: {
+    marginTop: 19,
+    [theme.breakpoints.down('sm')]: {
+      padding: 0,
+      paddingBottom: 27,
+      marginBottom: 50,
+    },
+  },
+  head: {
+    border: '1px solid #979797',
+    '& th': {
+      textTransform: 'uppercase',
+      fontSize: 15,
+      letterSpacing: 2,
+      fontWeight: 'bold',
+      borderBottom: 'none',
+      paddingRight: 16,
+      '&:first-child': {
+        paddingLeft: 40,
+      },
+    },
+  },
+  body: {
+    '& td': {
+      fontSize: 15,
+      paddingTop: 18,
+      paddingBottom: 18,
+      maxWidth: 0,
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      paddingRight: 16,
+      '&:first-child': {
+        paddingLeft: 40,
+      },
+    },
+  },
+  name: {
+    display: 'flex',
+    alignItems: 'center',
+    color: getColor('main')(theme),
+    textDecoration: 'none',
+    '& div': {
+      '&:first-child': {
+        marginRight: 15,
+      },
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+    },
+    [theme.breakpoints.down('sm')]: {
+      marginBottom: 22,
+    },
+  },
+  list: {
+    width: '100%',
+  },
+  vertical: {
+    [theme.breakpoints.down('sm')]: {
+      flexDirection: 'column',
+    },
+  },
+  card: {
+    padding: 7,
+    background: getColor('grey2')(theme),
+    '& ul': {
+      padding: 0,
+      margin: 0,
+      display: 'flex',
+      flexWrap: 'wrap',
+      '& li': {
+        padding: 10,
+        width: '33.33%',
+        [theme.breakpoints.down('xs')]: {
+          width: '50%',
+        },
+      },
+    },
+  },
+  cardVertical: {
+    [theme.breakpoints.down('sm')]: {
+      marginBottom: 2,
+      marginRight: 0,
+      maxWidth: '100%',
+    },
+  },
+  cardTitle: {
+    fontSize: 12,
+    textTransform: 'uppercase',
+    color: '#C4C4C4',
+    letterSpacing: 2,
+    fontWeight: 'bold',
+  },
+  miner: {
+    display: 'flex',
+    alignItems: 'center',
+    color: getColor('main')(theme),
+    '& div': {
+      marginLeft: 5,
+    },
+  },
+  warn: {
+    marginRight: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    '& svg': {
+      marginRight: 15,
+    },
+  },
+}));