Display red status icon when unable to connect to network

README.md

@@ -34,6 +34,12 @@ pnpm build
 pnpm validator
 ```
 
+**Stop the light validator**
+
+```bash
+pnpm validator:stop
+```
+
 **Deploy the protocol**
 
 ```bash

package.json

@@ -10,6 +10,7 @@
     "test": "pnpm -F=protocol test",
     "dev": "pnpm -F=app dev",
     "validator": "light test-validator",
+    "validator:stop": "light test-validator --stop",
     "deploy:protocol": "pnpm -F=protocol deploy:protocol",
     "sync": "bin/sync.sh",
     "ship": "bin/ship.sh",

packages/app/src/app/page.tsx

@@ -29,6 +29,9 @@ import { Button } from '@/components/ui/button'
 import { useWalletContext } from '@/components/providers/wallet'
 import { formatAddress } from '@/lib/utils'
 
+const defaultNetwork =
+  process.env.NODE_ENV === 'development' ? 'localnet' : 'devnet'
+
 export default function Home() {
   const { publicKey, disconnect } = useWallet()
   const { setVisible } = useWalletModal()
@@ -38,10 +41,11 @@ export default function Home() {
 
   const [blockNumber, setBlockNumber] = useState<number | null>(null)
   const [balance, setBalance] = useState<number | null>(null)
-  const [network, setNetwork] = useState<string>('localnet')
+  const [network, setNetwork] = useState<string>(defaultNetwork)
+  const [networkActive, setNetworkActive] = useState<boolean>(false)
 
   useEffect(() => {
-    const conn = new Connection(endpoint, 'confirmed') // Use network state
+    const conn = new Connection(endpoint, 'confirmed')
 
     const fetchBalance = async () => {
       if (publicKey) {
@@ -50,9 +54,10 @@ export default function Home() {
       }
     }
 
-    fetchBalance() // Fetch balance on component mount
+    fetchBalance()
 
     const subscriptionId = conn.onSlotChange(async (slotInfo) => {
+      setNetworkActive(true)
       const block = await conn.getBlockTime(slotInfo.slot)
       setBlockNumber(block)
       await fetchBalance() // Update balance on slot change
@@ -61,7 +66,7 @@ export default function Home() {
     return () => {
       conn.removeSlotChangeListener(subscriptionId)
     }
-  }, [publicKey, endpoint]) // Re-run effect when publicKey or endpoint changes
+  }, [publicKey, endpoint]) // Run effect when publicKey or endpoint changes
 
   return (
     <div className="flex flex-col min-h-screen">
@@ -74,7 +79,11 @@ export default function Home() {
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button variant="outline" className="w-24">
-                      <span className="text-green-400 mr-2">&bull;</span>
+                      {networkActive ? (
+                        <span className="text-green-400 mr-2">&bull;</span>
+                      ) : (
+                        <span className="text-red-400 mr-2">&bull;</span>
+                      )}
                       {network}
                     </Button>
                   </DropdownMenuTrigger>
@@ -195,8 +204,12 @@ export default function Home() {
         </div>
       </main>
       <footer className="p-4">
-        <div className="container mx-auto text-center text-sm text-green-400">
-          <code>{blockNumber !== null ? blockNumber : '-'}</code>
+        <div className="container mx-auto text-center text-sm">
+          {blockNumber !== null ? (
+            <code className="text-green-400">{blockNumber}</code>
+          ) : (
+            <code>-</code>
+          )}
         </div>
       </footer>
     </div>

packages/app/src/components/providers/wallet.tsx

@@ -19,15 +19,20 @@ import {
 } from '@solana/wallet-adapter-wallets'
 import { WalletModalProvider } from '@solana/wallet-adapter-react-ui'
 
+const defaultEndpoint =
+  process.env.NODE_ENV === 'development'
+    ? 'http://127.0.0.1:8899'
+    : 'https://api.devnet.solana.com'
+
 const WalletContext = createContext({
-  endpoint: 'http://127.0.0.1:8899',
+  endpoint: defaultEndpoint,
   setEndpoint: (endpoint: string) => {},
 })
 
 export const WalletContextProvider: FC<{ children: ReactNode }> = ({
   children,
 }) => {
-  const [endpoint, setEndpoint] = useState('http://127.0.0.1:8899')
+  const [endpoint, setEndpoint] = useState(defaultEndpoint)
 
   const value = {
     endpoint,