feat(home): create initial layout for the home page

src/components/common/StatusBadge.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Badge } from 'antd';
+import { Badge, Tooltip } from 'antd';
 import { Status } from 'types';
 
 export interface StatusBadgeProps {
@@ -21,7 +21,9 @@ const badgeStatuses: BadgeStatus = {
 
 const StatusBadge: React.SFC<StatusBadgeProps> = ({ status, text }) => (
   <>
-    <Badge status={badgeStatuses[status]} />
+    <Tooltip overlay={Status[status]}>
+      <Badge status={badgeStatuses[status]} />
+    </Tooltip>
     {text}
   </>
 );

src/components/designer/NetworkDesigner.tsx

@@ -5,7 +5,6 @@ import useDebounce from 'hooks/useDebounce';
 import { useStoreActions } from 'store';
 import { Network } from 'types';
 import { initChartFromNetwork } from 'utils/chart';
-// import * as chartCallbacks from './chartCallbacks';
 import CustomNodeInner from './CustomNodeInner';
 
 interface Props {

src/components/home/GetStarted.module.less

@@ -0,0 +1,10 @@
+.welcome {
+  font-size: 1.1rem;
+  margin: 16px;
+  text-align: center;
+}
+
+.create {
+  padding: 16px;
+  text-align: center;
+}

src/components/home/GetStarted.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { Button, Card } from 'antd';
+import { NETWORK } from 'components/routing';
+import styles from './GetStarted.module.less';
+
+const GetStarted: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t('cmps.get-started.title')}>
+      <p className={styles.welcome}>{t('cmps.get-started.welcome-1')}</p>
+      <p className={styles.welcome}>{t('cmps.get-started.welcome-2')}</p>
+      <p className={styles.create}>
+        <Link to={NETWORK}>
+          <Button type="primary" size="large">
+            {t('cmps.get-started.create-btn', 'Create your first Network')}
+          </Button>
+        </Link>
+      </p>
+    </Card>
+  );
+};
+
+export default GetStarted;

src/components/home/Home.tsx

@@ -1,32 +1,26 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useAsync } from 'react-async-hook';
-import { Trans, useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { info } from 'electron-log';
-import { Alert, Button, Card } from 'antd';
+import { Alert, Col, Row } from 'antd';
 import { useStoreActions, useStoreState } from 'store';
 import { Loader } from 'components/common';
-import { NETWORK, NETWORK_VIEW } from 'components/routing';
+import { GetStarted, NetworkCard } from './';
 
-const Home = () => {
+const Home: React.FC = () => {
   useEffect(() => info('Rendering Home component'), []);
+
   const { t } = useTranslation();
   const { networks, loaded } = useStoreState(s => s.network);
   const { load } = useStoreActions(s => s.network);
   const loadAsync = useAsync(() => load(), [], { executeOnMount: !loaded });
 
-  const [showAlert, setShowAlert] = useState(false);
-  const handleClickMe = () => setShowAlert(true);
-
   if (loadAsync.loading) {
     return <Loader />;
   }
 
   return (
-    <div>
-      {showAlert && (
-        <Alert message={t('cmps.home.success-text')} type="success" showIcon />
-      )}
+    <>
       {loadAsync.error && (
         <Alert
           type="error"
@@ -39,28 +33,15 @@ const Home = () => {
           description={loadAsync.error.message}
         />
       )}
-      <Card title={t('cmps.home.card-title')}>
-        <p>{t('cmps.home.card-description')}</p>
-        <p>
-          <Trans i18nKey="cmps.home.play">
-            Play with the <Link to={NETWORK}>Network</Link> thing
-          </Trans>
-        </p>
-        <p>
-          <Button type="primary" onClick={handleClickMe}>
-            {t('cmps.home.me-btn')}
-          </Button>
-        </p>
-        <h3>Networks</h3>
-        <ul>
-          {networks.map(network => (
-            <li key={network.id}>
-              <Link to={NETWORK_VIEW(network.id)}>{network.name}</Link>
-            </li>
-          ))}
-        </ul>
-      </Card>
-    </div>
+      {networks.length === 0 && <GetStarted />}
+      <Row gutter={16}>
+        {networks.map(n => (
+          <Col key={n.id} sm={24} md={12} lg={8} xl={6} xxl={4}>
+            <NetworkCard network={n} />
+          </Col>
+        ))}
+      </Row>
+    </>
   );
 };
 

src/components/home/NetworkCard.module.less

@@ -0,0 +1,3 @@
+.network {
+  margin-top: 16px;
+}

src/components/home/NetworkCard.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Card, Col, Icon, Row, Statistic } from 'antd';
+import { useStoreActions } from 'store';
+import { Network } from 'types';
+import { StatusBadge } from 'components/common';
+import { NETWORK_VIEW } from 'components/routing';
+import styles from './NetworkCard.module.less';
+
+const NetworkCard: React.FC<{ network: Network }> = ({ network }) => {
+  const { navigateTo } = useStoreActions(s => s.app);
+
+  return (
+    <Card
+      title={network.name}
+      className={styles.network}
+      hoverable
+      extra={<StatusBadge status={network.status} />}
+      onClick={() => navigateTo(NETWORK_VIEW(network.id))}
+    >
+      <Row>
+        <Col span={12}>
+          <Statistic
+            title="Lightning Nodes"
+            value={network.nodes.lightning.length}
+            suffix={<Icon type="thunderbolt" />}
+          />
+        </Col>
+        <Col span={12}>
+          <Statistic
+            title="Bitcoin Nodes"
+            value={network.nodes.bitcoin.length}
+            suffix={<Icon type="link" />}
+          />
+        </Col>
+      </Row>
+    </Card>
+  );
+};
+
+export default NetworkCard;

src/components/home/index.ts

@@ -1 +1,3 @@
 export { default as Home } from './Home';
+export { default as NetworkCard } from './NetworkCard';
+export { default as GetStarted } from './GetStarted';

src/components/network/NetworkActions.tsx

@@ -52,7 +52,7 @@ const NetworkActions: React.FC<Props> = ({ status, onClick }) => {
     <Menu theme="dark">
       <Menu.Item key="1">
         <Icon type="form" />
-        {t('cmps.network-actions.menu-edit', 'Edit')}
+        {t('cmps.network-actions.menu-rename', 'Rename')}
       </Menu.Item>
       <Menu.Item key="2">
         <Icon type="close" />

src/i18n/locales/en-US.json

@@ -1,12 +1,11 @@
 {
   "cmps.nav-menu.create-network": "Create Network",
   "cmps.nav-menu.settings": "Settings",
-  "cmps.home.card-title": "Welcome to Polar",
-  "cmps.home.card-description": "Much evil soon high in hope do view. Out may few northward believing attempted. Yet timed being songs marry one defer men our. Although finished blessing do of. Consider speaking me prospect whatever if. Ten nearer rather hunted six parish indeed number. Allowance repulsive sex may contained can set suspected abilities cordially. Do part am he high rest that. So fruit to ready it being views match. Was justice improve age article between. No projection as up preference reasonably delightful celebrated. Preserved and abilities assurance tolerably breakfast use saw. And painted letters forming far village elderly compact. Her rest west each spot his and you knew. Estate gay wooded depart six far her. Of we be have it lose gate bred. Do separate removing or expenses in. Had covered but evident chapter matters anxious.",
-  "cmps.home.me-btn": "Click Me!",
-  "cmps.home.play": "Play with the <1>Network</1> thing",
-  "cmps.home.success-text": "Success Tips",
   "cmps.home.load-error-msg": "Unable to load previously save networks",
+  "cmps.get-started.title": "Let's get started",
+  "cmps.get-started.welcome-1": "Polar allows you to easily create and run local Lightning networks for development and testing.",
+  "cmps.get-started.welcome-2": "First, you'll need to create a network. Then you can interact with the bitcoin and lightning nodes via their APIs.",
+  "cmps.get-started.create-btn": "Create your first Network",
   "cmps.new-network.title": "Create a new Lightning Network",
   "cmps.new-network.name-label": "Network Name",
   "cmps.new-network.name-phldr": "My Lightning Simnet",
@@ -20,7 +19,7 @@
   "cmps.status-tag.status-stopping": "Stopping",
   "cmps.status-tag.status-stopped": "Stopped",
   "cmps.status-tag.status-error": "Error",
-  "cmps.network-actions.menu-edit": "Edit",
+  "cmps.network-actions.menu-rename": "Rename",
   "cmps.network-actions.menu-delete": "Delete",
   "cmps.network-actions.primary-btn-starting": "Starting",
   "cmps.network-actions.primary-btn-stop": "Stop",

src/i18n/locales/es.json

@@ -1,12 +1,11 @@
 {
   "cmps.nav-menu.create-network": "Crear red",
   "cmps.nav-menu.settings": "Configuraciones",
-  "cmps.home.card-title": "Bienvenido a Polar",
-  "cmps.home.card-description": "Mucho mal pronto pronto alto en esperanza ver. Fuera se pueden intentar algunos creyentes hacia el norte. Sin embargo, las canciones son cronometradas y se casan con un hombre diferente. Aunque terminó la bendición de hacer. Considere hablarme prospectar lo que sea si. Diez más cercanos, más bien cazados, seis parroquias de hecho número. Permiso que puede contener el sexo repulsivo puede establecer sospechas habilidades cordialmente. Haz parte, en lo alto, descansa eso. Así que las frutas para que estén listas sean vistas coinciden. Se hizo justicia entre la edad del artículo. Ninguna proyección como preferencia celebrada razonablemente encantadora celebrada. Preservado y garantía de habilidades tolerablemente el uso de desayunos. Y pintó letras formando pueblo lejano compacto de ancianos. Ella descansa al oeste de cada punto suyo y tú lo sabías. Finca gay boscosa partió seis lejos de ella. De nosotros seremos perdidos por la puerta criada. Haga retiros separados o gastos en. Había cubierto, pero el capítulo evidente importa ansioso.",
-  "cmps.home.me-btn": "Haz click en mi",
-  "cmps.home.play": "Jugar con lo de la <2>red</2>",
-  "cmps.home.success-text": "Consejos de éxito",
   "cmps.home.load-error-msg": "No se pueden cargar las redes guardadas previamente",
+  "cmps.get-started.title": "Empecemos",
+  "cmps.get-started.welcome-1": "Polar le permite crear y ejecutar fácilmente redes locales Lightning para desarrollo y pruebas.",
+  "cmps.get-started.welcome-2": "Primero, deberá crear una red. Luego puede interactuar con los nodos bitcoin y lightning a través de sus API.",
+  "cmps.get-started.create-btn": "Crea tu primera red",
   "cmps.new-network.title": "Crear una nueva red Lightning",
   "cmps.new-network.name-label": "Nombre de red",
   "cmps.new-network.name-phldr": "Mi Lightning Simnet",
@@ -20,7 +19,7 @@
   "cmps.status-tag.status-stopping": "Parada",
   "cmps.status-tag.status-stopped": "Detenido",
   "cmps.status-tag.status-error": "Error",
-  "cmps.network-actions.menu-edit": "Editar",
+  "cmps.network-actions.menu-rename": "Rebautizar",
   "cmps.network-actions.menu-delete": "Borrar",
   "cmps.network-actions.primary-btn-starting": "Comenzando",
   "cmps.network-actions.primary-btn-stop": "Detener",