feat: webapp rename application to program

src/App.js

@@ -743,10 +743,10 @@ class App extends Component {
                 )}
               />
               <Route
-                path="/v2/applications"
+                path="/v2/programs"
                 exact
                 render={() => (
-                  <Bx2BlankComponentThemed message="Hello Applications" />
+                  <Bx2BlankComponentThemed message="Hello Programs" />
                 )}
               />
               <Route

src/AppV2.js

@@ -29,9 +29,9 @@ const Transactions = lazy(() => import('v2/components/Transactions'));
 const TransactionDetail = lazy(() =>
   import('v2/components/Transactions/Detail'),
 );
-const Applications = lazy(() => import('v2/components/Applications'));
-const ApplicationDetail = lazy(() =>
-  import('v2/components/Applications/Detail'),
+const Programs = lazy(() => import('v2/components/Programs'));
+const ProgramDetail = lazy(() =>
+  import('v2/components/Programs/Detail'),
 );
 const Accounts = lazy(() => import('v2/components/Accounts'));
 const AccountDetail = lazy(() => import('v2/components/Accounts/Detail'));
@@ -134,22 +134,22 @@ const App = () => {
                   path="/transactions/:id"
                   component={TransactionDetail}
                 />
-                <Route exact path="/applications" component={Applications} />
+                <Route exact path="/programs" component={Programs} />
                 <Route
                   exact
-                  path="/applications/timeline/:start"
-                  component={Applications}
+                  path="/programs/timeline/:start"
+                  component={Programs}
                 />
                 <Route
                   exact
-                  path="/applications/:id"
-                  component={ApplicationDetail}
+                  path="/programs/:id"
+                  component={ProgramDetail}
                 />
                 <Route exact path="/accounts" component={Accounts} />
                 <Route
                   exact
                   path="/accounts/timeline/:start"
-                  component={Applications}
+                  component={Accounts}
                 />
                 <Route exact path="/accounts/:id" component={AccountDetail} />
                 <Route exact path="/favorites" component={Favorites} />

src/v2/Bx2NavDrawer.jsx

@@ -53,14 +53,14 @@ class Bx2NavDrawer extends React.Component {
           </ListItem>
           <ListItem
             button
-            key="Applications"
+            key="Programs"
             component={Link}
-            to="/v2/applications"
+            to="/v2/programs"
           >
             <ListItemIcon>
               <DashboardIcon />
             </ListItemIcon>
-            <ListItemText primary="Applications" />
+            <ListItemText primary="Programs" />
           </ListItem>
           <ListItem button key="Blocks" component={Link} to="/v2/blocks">
             <ListItemIcon>

src/v2/api/programs.js

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

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

@@ -9,17 +9,17 @@ import useStyles from './styles';
 
 const AccountCode = ({accountView}: {accountView: Object}) => {
   const classes = useStyles();
-  const applicationCode = YAML.stringify(accountView);
+  const accountCode = YAML.stringify(accountView);
 
   return (
     <div>
       <div className={classes.header}>
-        <CopyBtn text={applicationCode} />
+        <CopyBtn text={accountCode} />
         <HelpLink text="" term="" />
       </div>
       <div className={classes.code}>
         <code>
-          <code>{applicationCode}</code>
+          <code>{accountCode}</code>
         </code>
       </div>
     </div>

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

@@ -28,8 +28,8 @@ const fields = [
     term: '',
   },
   {
-    id: 'application_id',
-    label: 'Application Id',
+    id: 'program_id',
+    label: 'Program Id',
     text: '',
     term: '',
   },
@@ -53,7 +53,7 @@ const demoData = [
     block: '7887219',
     time: '55 sec ago',
     timeType: 'in',
-    application_id: '5CpdpKwKUBJgD4Bdase123as12asd21312',
+    program_id: '5CpdpKwKUBJgD4Bdase123as12asd21312',
     type: 'other',
     confirmations: 5,
   },
@@ -75,8 +75,8 @@ const Transactions = ({transactions}: {transactions: Array}) => {
           </div>
         </TableCell>
         <TableCell>
-          <Link to={`/applications/${transaction.application_id}`}>
-            {transaction.application_id}
+          <Link to={`/programs/${transaction.program_id}`}>
+            {transaction.program_id}
           </Link>
         </TableCell>
         <TableCell>

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

@@ -82,7 +82,7 @@ const AccountDetail = ({match}: {match: Match}) => {
     <Container>
       <div className={classes.root}>
         <SectionHeader title="Account Detail">
-          <div className={classes.applicationTitle}>
+          <div className={classes.programTitle}>
             <span>{accountId}</span>
             <CopyBtn text={accountId} />
             <QRPopup url={url} />

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

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

src/v2/components/Dashboard/ViewAll/index.jsx

@@ -23,7 +23,7 @@ const ViewAll = () => {
           </Grid>
           <Grid item xs={12} sm={4}>
             <Button variant="contained" size="large" fullWidth color="primary">
-              View all applications
+              View all programs
             </Button>
           </Grid>
           <Grid item xs={12} sm={4}>

src/v2/components/Favorites/Accounts.jsx

@@ -48,11 +48,11 @@ const AccountsTable = ({separate}: {separate: boolean}) => {
   const showTable = useMediaQuery(theme.breakpoints.up('md'));
   const blocks = [];
 
-  const renderRow = ({data: application}) => {
+  const renderRow = ({data: program}) => {
     return (
-      <TableRow hover key={application.id}>
+      <TableRow hover key={program.id}>
         <TableCell align="center">
-          <Link to={`/applications/${application.id}`} className={classes.name}>
+          <Link to={`/programs/${program.id}`} className={classes.name}>
             7887319
           </Link>
         </TableCell>
@@ -84,7 +84,7 @@ const AccountsTable = ({separate}: {separate: boolean}) => {
             {map(renderRow)(blocks)}
             <TableRow hover>
               <TableCell align="center">
-                <Link to={`/applications/1234`} className={classes.name}>
+                <Link to={`/programs/1234`} className={classes.name}>
                   7887319
                 </Link>
               </TableCell>
@@ -99,7 +99,7 @@ const AccountsTable = ({separate}: {separate: boolean}) => {
           <div className={classes.card}>
             <ul>
               <li>
-                <div className={classes.cardTitle}>Application id</div>
+                <div className={classes.cardTitle}>Program id</div>
                 <div>7887219</div>
               </li>
               <li>

src/v2/components/Favorites/index.jsx

@@ -5,19 +5,19 @@ 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 ProgramsTable from 'v2/components/Programs/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('applications');
+  const [tab, setTab] = useState('programs');
   const theme = useTheme();
   const verticalTabs = useMediaQuery(theme.breakpoints.down('xs'));
   const handleTabChange = (event, tab) => setTab(tab);
-  const tabNav = ['applications', 'accounts'];
+  const tabNav = ['programs', 'accounts'];
   const renderTabNav = label => (
     <TabNav key={label} label={label} value={label} />
   );
@@ -40,7 +40,7 @@ const TransactionsPage = () => {
       >
         {map(renderTabNav)(tabNav)}
       </Tabs>
-      {eq('applications', tab) && <ApplicationsTable />}
+      {eq('programs', tab) && <ProgramsTable />}
       {eq('accounts', tab) && <AccountsTable />}
     </Container>
   );

src/v2/components/NavBar/index.jsx

@@ -24,7 +24,7 @@ import {ReactComponent as dashboard} from './assets/dashboard.svg';
 import {ReactComponent as transactions} from './assets/transactions.svg';
 import {ReactComponent as validators} from './assets/validators.svg';
 import {ReactComponent as tourdesol} from './assets/tourdesol.svg';
-import {ReactComponent as applications} from './assets/applications.svg';
+import {ReactComponent as programs} from './assets/programs.svg';
 import {ReactComponent as blocks} from './assets/blocks.svg';
 import {ReactComponent as favorites} from './assets/favorites.svg';
 import useStyles from './styles';
@@ -34,7 +34,7 @@ const icons = {
   transactions,
   validators,
   tourdesol,
-  applications,
+  programs,
   blocks,
   favorites,
 };
@@ -44,7 +44,7 @@ const navTracks = {
   transactions: 'Clicked Transactions Page',
   validators: 'Clicked Validators Page',
   tourdesol: 'Clicked TDS Page',
-  applications: 'Clicked Applications page',
+  programs: 'Clicked Programs page',
   blocks: 'Clicked Blocks page',
   favorites: 'Clicked Favorites page',
 };
@@ -82,7 +82,7 @@ const NavBar = ({
       disabled: true,
     },
     {
-      link: 'applications',
+      link: 'programs',
       disabled: true,
     },
     {

src/v2/components/Applications/Detail/ApplicationsTab.jsx → src/v2/components/Programs/Detail/ApplicationsTab.jsx

@@ -1,17 +1,17 @@
 // @flow
 import React from 'react';
 
-import Application from './Application';
+import Program from './Program';
 
-const ApplicationsTab = ({applications}) => {
+const ProgramsTab = ({programs}) => {
   return (
     <div>
-      <Application
+      <Program
         id="0xAA15A3E6b97d09653b8b8d9c9e1D80daf5ba81e8"
         accounts={[]}
       />
     </div>
   );
 };
 
-export default ApplicationsTab;
+export default ProgramsTab;

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

@@ -5,23 +5,23 @@ import {observer} from 'mobx-react-lite';
 import useStyles from './styles';
 import YAML from 'yaml';
 
-const ApplicationCode = ({applicationView}: {applicationView: Object}) => {
+const ProgramCode = ({programView}: {programView: Object}) => {
   const classes = useStyles();
-  const applicationCode = YAML.stringify(applicationView);
+  const programCode = YAML.stringify(programView);
 
   return (
     <div>
       <div className={classes.header}>
-        <CopyBtn text={applicationCode} />
+        <CopyBtn text={programCode} />
         <HelpLink text="" term="" />
       </div>
       <div className={classes.code}>
         <code>
-          <code>{applicationCode}</code>
+          <code>{programCode}</code>
         </code>
       </div>
     </div>
   );
 };
 
-export default observer(ApplicationCode);
+export default observer(ProgramCode);

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

@@ -6,7 +6,7 @@ import {observer} from 'mobx-react-lite';
 import {Table, TableBody, TableCell, TableRow} from '@material-ui/core';
 import ValidatorName from 'v2/components/UI/ValidatorName';
 
-const ApplicationDetails = ({programAccounts}: {programAccounts: Object}) => {
+const ProgramDetails = ({programAccounts}: {programAccounts: Object}) => {
   const renderAccount = (account, i) => {
     return (
       <TableRow key={account.pubkey}>
@@ -32,4 +32,4 @@ const ApplicationDetails = ({programAccounts}: {programAccounts: Object}) => {
   );
 };
 
-export default observer(ApplicationDetails);
+export default observer(ProgramDetails);