Improve validator state display

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']

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>
   );
 }

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>
     );

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>