dispatch `FAIL`

- stops client on failed initialization
- displays failed message

packages/status-js/src/client/client.ts

@@ -87,11 +87,15 @@ class Client {
     }
   }
 
-  static async start(options: ClientOptions) {
-    // Waku
+  static async start(options: ClientOptions): Promise<Client> {
     const { environment = 'production' } = options
 
-    const waku = await createLightNode({
+    let waku: WakuLight | undefined
+    let client: Client | undefined
+
+    try {
+      // Waku
+      waku = await createLightNode({
         defaultBootstrap: false,
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
@@ -119,7 +123,7 @@ class Client {
       const wakuDisconnectionTimer = setInterval(async () => {
         const connectionsToClose: Promise<void>[] = []
 
-      for (const connection of waku.libp2p.connectionManager.getConnections()) {
+        for (const connection of waku!.libp2p.connectionManager.getConnections()) {
           if (!connection.streams.length) {
             connectionsToClose.push(connection.close())
           }
@@ -129,10 +133,19 @@ class Client {
       }, 10 * 1000)
 
       // Client
-    const client = new Client(waku, wakuDisconnectionTimer, options)
+      client = new Client(waku, wakuDisconnectionTimer, options)
 
       // Community
       await client.community.start()
+    } catch (error) {
+      if (client) {
+        await client.stop()
+      } else if (waku) {
+        await waku.stop()
+      }
+
+      throw error
+    }
 
     return client
   }

packages/status-react/src/components/failed/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { Text } from '../../system'
+
+export const Failed = () => {
+  return (
+    <Text
+      size="15"
+      color="gray"
+      weight="400"
+      align="center"
+      css={{
+        margin: 'auto',
+        position: 'relative',
+        top: '50%',
+        transform: 'translateY(-50%)',
+      }}
+    >
+      Failed to connect. Try reloading.
+    </Text>
+  )
+}

packages/status-react/src/protocol/provider.tsx

@@ -2,6 +2,7 @@ import React, { createContext, useEffect, useReducer } from 'react'
 
 import { createClient } from '@status-im/js'
 
+import { Failed } from '../components/failed'
 import { Loading } from '../components/loading'
 
 import type { Account, Client, ClientOptions, Community } from '@status-im/js'
@@ -10,6 +11,7 @@ export const Context = createContext<State | undefined>(undefined)
 
 export type State = {
   loading: boolean
+  failed: boolean
   client: Client | undefined
   community: Community['description'] | undefined
   account: Account | undefined
@@ -20,6 +22,7 @@ export type Action =
   | { type: 'INIT'; client: Client }
   | { type: 'UPDATE_COMMUNITY'; community: Community['description'] }
   | { type: 'SET_ACCOUNT'; account: Account | undefined }
+  | { type: 'FAIL' }
 
 interface Props {
   options: ClientOptions
@@ -44,6 +47,9 @@ const reducer = (state: State, action: Action): State => {
     case 'SET_ACCOUNT': {
       return { ...state, account: action.account }
     }
+    case 'FAIL': {
+      return { ...state, failed: true, loading: false }
+    }
   }
 }
 
@@ -56,15 +62,22 @@ export const ProtocolProvider = (props: Props) => {
     community: undefined,
     account: undefined,
     dispatch: undefined,
+    failed: false,
   })
 
-  const { client, loading } = state
+  const { client, loading, failed } = state
 
   useEffect(() => {
     const loadClient = async () => {
+      try {
         const client = await createClient(options)
 
         dispatch({ type: 'INIT', client })
+      } catch (error) {
+        console.error(error)
+
+        dispatch({ type: 'FAIL' })
+      }
     }
 
     loadClient()
@@ -89,6 +102,10 @@ export const ProtocolProvider = (props: Props) => {
     }
   }, [client])
 
+  if (failed) {
+    return <Failed />
+  }
+
   if (loading) {
     return <Loading />
   }