feat: implement applications index and detail pages

src/v2/api/applications.js

@@ -0,0 +1,34 @@
+import _ from 'lodash';
+
+import api from '.';
+
+const DEFAULT_PAGE_SIZE = 100;
+
+const APPLICATION_DETAIL_VERSION = '[email protected]';
+
+export function apiGetApplicationDetail({applicationId, version}) {
+  return api(
+    `/explorer/applications/${encodeURIComponent(applicationId)}?v=${version ||
+      APPLICATION_DETAIL_VERSION}`,
+  );
+}
+
+const APPLICATION_INDEX_VERSION = '[email protected]';
+
+export function apiGetApplicationsTimelinePage({
+  start = '',
+  count = DEFAULT_PAGE_SIZE,
+  direction = '-',
+  version,
+}) {
+  const queryString = _.toPairs({
+    start,
+    count,
+    direction,
+    v: version || APPLICATION_INDEX_VERSION,
+  })
+    .map(([k, v]) => `${k}=${encodeURIComponent(v)}`)
+    .join('&');
+
+  return api(`/explorer/applications/index?${queryString}`);
+}

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

@@ -1,27 +1,27 @@
 import React from 'react';
 import HelpLink from 'v2/components/HelpLink';
 import CopyBtn from 'v2/components/UI/CopyBtn';
-
+import {observer} from 'mobx-react-lite';
 import useStyles from './styles';
+import YAML from 'yaml';
 
-const ApplicationCode = () => {
+const ApplicationCode = ({applicationView}: {applicationView: Object}) => {
   const classes = useStyles();
+  const applicationCode = YAML.stringify(applicationView);
+
   return (
     <div>
       <div className={classes.header}>
-        <CopyBtn text={'123'} />
+        <CopyBtn text={applicationCode} />
         <HelpLink text="" term="" />
       </div>
       <div className={classes.code}>
         <code>
-          h: "759" data: h: 759 l: HzMrRwLN9DUoNXREAHGBVYqUqus3Xg6o8oNebN5BTwj5
-          s: 95 dt: 2019-06-03T15:10:29.255772558Z id:
-          5CpdpKwKUBJdnMFjajJamGd2u7poZBkcqXVqPugnEN4QVQhSzGrbzMtzUkkLiAAoaNTLuJfCgyAdHEzAuwz1dioT
-          entry_id: 2iEcjGA5zGQKt9JGpdrpmTBWZJg1XBzQfTx8Lj6Q5rtW
+          <code>{applicationCode}</code>
         </code>
       </div>
     </div>
   );
 };
 
-export default ApplicationCode;
+export default observer(ApplicationCode);

src/v2/components/Applications/Detail/Details/index.jsx

@@ -1,29 +1,41 @@
 import React from 'react';
 import Avatar from 'v2/components/UI/Avatar';
 import Label from 'v2/components/UI/Label';
+import _ from 'lodash';
+// import useStyles from './styles';
+import {observer} from 'mobx-react-lite';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+} from '@material-ui/core';
 
-import useStyles from './styles';
+const ApplicationDetails = ({programAccounts}: {programAccounts: Object}) => {
+  // const classes = useStyles();
 
-const ApplicationDetails = () => {
-  const classes = useStyles();
-  return (
-    <ul className={classes.list}>
-      <li className={classes.item}>
-        <Label text="to" hint="" />
-        <div>
-          <Avatar avatarUrl="" name="" width={33} height={33} pubkey="123" />
-          <span>0xAA15A3E6b97d09653b8b8d9c9e1D80daf5ba81e8</span>
-        </div>
-      </li>
-      <li className={classes.item}>
-        <Label text="from" hint="" />
-        <div>
-          <Avatar avatarUrl="" name="" width={33} height={33} pubkey="123" />
-          <span>0xAA15A3E6b97d09653b8b8d9c9e1D80daf5ba81e8</span>
-        </div>
-      </li>
-    </ul>
-  );
+  const renderAccount = (account, i) => {
+    return (
+      <TableRow key={account.pubkey}>
+        <TableCell>
+          <Label text={`Account ${i + 1}`} hint="" />
+        </TableCell>
+        <TableCell>
+          <Avatar
+            avatarUrl=""
+            name=""
+            width={33}
+            height={33}
+            pubkey={account.pubkey}
+          />
+          <span>{account.pubkey}</span>
+        </TableCell>
+        <TableCell>Balance: {account.lamports}</TableCell>
+      </TableRow>
+    );
+  };
+
+  return <Table><TableBody>{_.map(programAccounts, renderAccount)}</TableBody></Table>;
 };
 
-export default ApplicationDetails;
+export default observer(ApplicationDetails);

src/v2/components/Applications/Detail/index.jsx

@@ -1,40 +1,67 @@
 // @flow
+import {observer} from 'mobx-react-lite';
 import {Container, Tabs, 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 {Match, Link} from 'react-router-dom';
 import {ReactComponent as StarIcon} from 'v2/assets/icons/star.svg';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import HelpLink from 'v2/components/HelpLink';
 import TypeLabel from 'v2/components/UI/TypeLabel';
 import QRPopup from 'v2/components/QRPopup';
 import CopyBtn from 'v2/components/UI/CopyBtn';
+import Loader from 'v2/components/UI/Loader';
 
 import TabNav from '../../UI/TabNav';
 import ApplicationDetails from './Details';
 import ApplicationCode from './Code';
 import useStyles from './styles';
+import ApplicationDetailStore from 'v2/stores/applications/detail';
+import formatDistanceToNow from "date-fns/formatDistanceToNow";
 
-const TransactionDetail = () => {
+const ApplicationDetail = ({match}: {match: Match}) => {
   const classes = useStyles();
+  const {
+    isLoading,
+    applicationId,
+    accountInfo,
+    programAccounts,
+    applicationView,
+    timestamp,
+  } = ApplicationDetailStore;
+
+  if (applicationId !== match.params.id) {
+    ApplicationDetailStore.init({applicationId: match.params.id});
+  }
+
+  const asTime = x => {
+    return formatDistanceToNow(Date.parse(x), {addSuffix: true});
+  };
+
   const [tab, setTab] = useState(0);
   const theme = useTheme();
   const verticalTable = useMediaQuery(theme.breakpoints.down('xs'));
 
+  if (isLoading) {
+    return <Loader width="533" height="290" />;
+  }
+
   const handleTabChange = (event, tab) => setTab(tab);
 
   const specs = [
     {
       label: 'Balance',
       hint: '',
-      value: '0.006 SOL | $1.12',
+      value: `${accountInfo.lamports} LAMPORTS`,
     },
     {
       label: 'Type',
       hint: '',
       value() {
         return (
           <div className={classes.types}>
+            TODO
             <TypeLabel type="system" label="system" />
             <TypeLabel type="consensus" label="consensus" />
           </div>
@@ -44,13 +71,17 @@ const TransactionDetail = () => {
     {
       label: 'Nickname',
       hint: '',
-      value: 'Testname',
+      value: accountInfo.data,
     },
     {
       label: 'Description',
       hint: '',
-      value:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      value: 'TODO',
+    },
+    {
+      label: 'Time',
+      hint: '',
+      value: timestamp && asTime(timestamp),
     },
   ];
 
@@ -66,19 +97,17 @@ const TransactionDetail = () => {
     </li>
   );
 
-  const tabNav = ['Details', 'code/course'];
+  const tabNav = ['Accounts', 'code/source'];
 
   const renderTabNav = label => <TabNav key={label} label={label} />;
 
   return (
     <Container>
       <div className={classes.root}>
         <SectionHeader title="Application Detail">
-          <div className={classes.blockTitle}>
-            <span>
-              0x03e125a40b39a637028bce780af3544e51cfa2f61abbe7c8ec8059f7178bce74
-            </span>
-            <CopyBtn text={'123'} />
+          <div className={classes.applicationTitle}>
+            <span>{applicationId}</span>
+            <CopyBtn text={applicationId} />
             <QRPopup />
             <button>
               <StarIcon />
@@ -98,11 +127,11 @@ const TransactionDetail = () => {
         >
           {map(renderTabNav)(tabNav)}
         </Tabs>
-        {eq(0, tab) && <ApplicationDetails />}
-        {eq(1, tab) && <ApplicationCode />}
+        {eq(0, tab) && <ApplicationDetails programAccounts={programAccounts} />}
+        {eq(1, tab) && <ApplicationCode applicationView={applicationView} />}
       </div>
     </Container>
   );
 };
 
-export default TransactionDetail;
+export default observer(ApplicationDetail);

src/v2/components/Applications/Detail/styles.js

@@ -2,7 +2,7 @@ import {makeStyles} from '@material-ui/core';
 import getColor from 'v2/utils/getColor';
 
 export default makeStyles(theme => ({
-  blockTitle: {
+  applicationTitle: {
     display: 'flex',
     alignItems: 'center',
     marginLeft: 100,