Add error handling on non ready network.

src/contexts/BlockExplorerContext.tsx

@@ -201,7 +201,7 @@ const BlockExplorerProvider = ({
   return (
     <BlockExplorerContext.Provider
       value={state}>
-      {state.blocks ? children : <Loader>Retrieving blocks</Loader>}
+      {state.blocks ? children : <Loader>retrieving latest blocks on {eth?.network.name}</Loader>}
     </BlockExplorerContext.Provider>
   )
 }

src/contexts/CurrencyContext.tsx

@@ -94,7 +94,7 @@ const CurrencyProvider = ({
       ...state,
       setCurrency
     }}>
-      {state.ethConversion ? children : <Loader>Fetching currency</Loader>}
+      {state.ethConversion ? children : <Loader>fetching currency</Loader>}
     </CurrencyContext.Provider>
   )
 }

src/contexts/EthereumContext.tsx

@@ -28,6 +28,9 @@ export class EthereumApi extends ethers.providers.WebSocketProvider {
   public async getChainId(): Promise<number> {
     return parseInt((await this.send('eth_chainId', [])))
   }
+  public async isSyncing(): Promise<boolean> {
+    return await this.send('eth_syncing', []) !==  false
+  }
 } 
 
 type EthereumContextType = {
@@ -50,19 +53,30 @@ const EthereumProvider = ({
   url?: string | undefined
 }) => {
   const [eth, setEth] = useState<EthereumApi | undefined>()
+  const [message, setMessage] = useState<string>('connecting to eth node')
 
   useEffect(() => {
     if (!url)
       return;
 
     const network = getNetworkFromSubdomain() || defaultNetwork
-    setEth(new EthereumApi(network, `${url}:${network.port}`))
+    const ethereum = new EthereumApi(network, `${url}:${network.port}`)
+    setMessage(`connecting to ${network.key}, please wait`)
+
+    ethereum.ready.then(async (details) => {
+      if (await ethereum.isSyncing()) {
+        setMessage(`${details.name} is not ready, node is syncing`)
+      } else {
+        setEth(ethereum)
+      }
+    })
     return () => {}
   }, [url])
 
   const connect = async () => {
-    if (!window.ethereum)
+    if (!window.ethereum) {
       return
+    }
     await window.ethereum.enable()
   }
 
@@ -73,7 +87,7 @@ const EthereumProvider = ({
         connect
       }}
     >
-      {eth ? children : <Loader>connecting to eth node</Loader>}
+      {eth ? children : <Loader>{message}</Loader>}
     </EthereumContext.Provider>
   )
 }

src/pages/EthAccountDetail.tsx

@@ -22,7 +22,7 @@ export function EthAccountDetail() {
   }, [eth, id]);
 
   if (!balance === undefined) {
-    return <Loader>Loading balance...</Loader>;
+    return <Loader>loading balance...</Loader>;
   }
 
   return (

src/pages/EthBlockDetail.tsx

@@ -89,7 +89,7 @@ export function EthBlockDetail() {
   const { block, transactions } = state;
 
   if (!block || !eth || !transactions) {
-    return <Loader>Loading transactions for block</Loader>;
+    return <Loader>loading transactions for block</Loader>;
   }
 
   const onBeforeRender = state.onBeforeRender ? (

src/pages/EthBlockList.tsx

@@ -65,9 +65,9 @@ function EthBlockItem(props: EthBlockItemProps) {
 export function EthBlockList() {
   const { details, blocks } = useBlockExplorer();
 
-  if (!details) return <Loader>Loading block details ...</Loader>;
+  if (!details) return <Loader>loading block details ...</Loader>;
 
-  if (!blocks) return <Loader>Loading blocks ...</Loader>;
+  if (!blocks) return <Loader>loading blocks ...</Loader>;
 
   return (
     <Flex flex="1" direction="column" overflow="auto">

src/pages/EthTransactionDetail.tsx

@@ -34,7 +34,7 @@ export function EthTransactionDetail() {
   }, [eth, id]);
 
   if (!transaction) {
-    return <Loader>Loading transaction</Loader>;
+    return <Loader>loading transaction</Loader>;
   }
 
   return (

src/pages/Home.tsx

@@ -336,13 +336,13 @@ export function Home() {
   const { details, blocks, session } = useBlockExplorer();
   const { eth } = useEthereum();
 
-  if (!eth) return <Loader>Connecting to network ...</Loader>;
+  if (!eth) return <Loader>connecting to network ...</Loader>;
 
-  if (!details) return <Loader>Loading block details ...</Loader>;
+  if (!details) return <Loader>loading block details ...</Loader>;
 
-  if (!blocks) return <Loader>Loading blocks ...</Loader>;
+  if (!blocks) return <Loader>loading blocks ...</Loader>;
 
-  if (!session) return <Loader>Loading session ...</Loader>;
+  if (!session) return <Loader>loading session ...</Loader>;
 
   const latestBlock = blocks[0];
   const renderedBlocks = blocks.slice(0, 5);