From fd653b57ebf7a1359d87a17c6d2edaad75123146 Mon Sep 17 00:00:00 2001
From: Nathan LeClaire <nathan.leclaire@gmail.com>
Date: Mon, 18 Jul 2022 17:44:12 -0400
Subject: [PATCH] Improve validator state display

Signed-off-by: Nathan LeClaire <nathan.leclaire@gmail.com>
---
 src/renderer/auto-imports.d.ts                |  1 +
 src/renderer/components/LogView.tsx           |  4 +---
 src/renderer/components/ProgramChangeView.tsx | 22 +++++++++++++++++--
 src/renderer/nav/Account.tsx                  |  9 +++++++-
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/renderer/auto-imports.d.ts b/src/renderer/auto-imports.d.ts
index fc9e1701..51cd0e38 100644
--- a/src/renderer/auto-imports.d.ts
+++ b/src/renderer/auto-imports.d.ts
@@ -3,6 +3,7 @@ export {}
 declare global {
   const IconMdiAnchor: typeof import('~icons/mdi/anchor.jsx')['default']
   const IconMdiBookOpenOutline: typeof import('~icons/mdi/book-open-outline.jsx')['default']
+  const IconMdiBroadcastOff: typeof import('~icons/mdi/broadcast-off.jsx')['default']
   const IconMdiCheck: typeof import('~icons/mdi/check.jsx')['default']
   const IconMdiChevronDown: typeof import('~icons/mdi/chevron-down.jsx')['default']
   const IconMdiCircle: typeof import('~icons/mdi/circle.jsx')['default']
diff --git a/src/renderer/components/LogView.tsx b/src/renderer/components/LogView.tsx
index 0d7926e7..668c095d 100644
--- a/src/renderer/components/LogView.tsx
+++ b/src/renderer/components/LogView.tsx
@@ -74,9 +74,7 @@ function LogView() {
 
   return (
     <pre className="text-xs bg-surface-600 h-full p-2 whitespace-pre-wrap break-all overflow-auto">
-      {logs.length > 0
-        ? logs.join('\n')
-        : 'Logs will appear here once transactions are processed.'}
+      {logs.length > 0 ? logs.join('\n') : ''}
     </pre>
   );
 }
diff --git a/src/renderer/components/ProgramChangeView.tsx b/src/renderer/components/ProgramChangeView.tsx
index 624c6d8d..ffeec2e0 100644
--- a/src/renderer/components/ProgramChangeView.tsx
+++ b/src/renderer/components/ProgramChangeView.tsx
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useWallet } from '@solana/wallet-adapter-react';
 import { useEffect, useState } from 'react';
 import { Button } from 'react-bootstrap';
+import { NavLink } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { css } from 'vite-plugin-inline-css-modules';
 import {
@@ -26,6 +27,7 @@ import {
   NetStatus,
   selectValidatorNetworkState,
 } from '../data/ValidatorNetwork/validatorNetworkState';
+import { Net } from '../../types/types';
 import { useAppDispatch, useAppSelector, useInterval } from '../hooks';
 import Chip from './base/Chip';
 import EditableText from './base/EditableText';
@@ -171,8 +173,24 @@ function ProgramChangeView() {
               transform="translate(100 100)"
             />
           </svg>
-          <IconMdiWarning className="text-6xl z-1" />
-          <span className="z-2">Network Not Available</span>
+          {status === NetStatus.Unknown ? (
+            <p>Loading...</p>
+          ) : (
+            <IconMdiBroadcastOff className="text-6xl z-1" />
+          )}{' '}
+          {net === Net.Localhost && (
+            <div>
+              <span className="z-2 italic">Validator Not Available</span>
+              <div className="text-center">
+                Run one using the
+                <br />{' '}
+                <NavLink className="underline" to="/validator">
+                  Validator page
+                </NavLink>
+                .
+              </div>
+            </div>
+          )}
         </div>
       </div>
     );
diff --git a/src/renderer/nav/Account.tsx b/src/renderer/nav/Account.tsx
index 3cdb33c4..7a84faea 100644
--- a/src/renderer/nav/Account.tsx
+++ b/src/renderer/nav/Account.tsx
@@ -1,4 +1,8 @@
 import Split from 'react-split';
+import {
+  NetStatus,
+  selectValidatorNetworkState,
+} from '../data/ValidatorNetwork/validatorNetworkState';
 import AccountView from '../components/AccountView';
 import LogView from '../components/LogView';
 import ProgramChangeView from '../components/ProgramChangeView';
@@ -7,6 +11,7 @@ import { useAppSelector } from '../hooks';
 
 function Account() {
   const accounts = useAppSelector(selectAccountsListState);
+  const validator = useAppSelector(selectValidatorNetworkState);
   const { selectedAccount } = accounts;
 
   return (
@@ -25,7 +30,9 @@ function Account() {
         <ProgramChangeView />
         <div className="overflow-auto">
           <div className="flex-1 p-3">
-            <AccountView pubKey={selectedAccount} />
+            {validator.status === NetStatus.Running && (
+              <AccountView pubKey={selectedAccount} />
+            )}
           </div>
         </div>
       </Split>