Merge pull request #35 from oasisprotocol/ml/handle-connect-wallet-er…

…rors-in-Layout

Handle ConnectWallet errors in Layout

frontend/src/components/ConnectWallet/index.tsx

@@ -4,12 +4,14 @@ import { METAMASK_HOME_PAGE } from '../../constants/config.ts'
 import { Button } from '../Button'
 import { UnknownNetworkError } from '../../utils/errors.ts'
 import { ConnectedAccount } from '../ConnectedAccount'
+import { useAppState } from '../../hooks/useAppState.ts'
 
 export const ConnectWallet: FC = () => {
+  const { setAppError } = useAppState()
+
   const [isLoading, setIsLoading] = useState(false)
   const [providerAvailable, setProviderAvailable] = useState(true)
   const [isUnknownNetwork, setIsUnknownNetwork] = useState(false)
-  const [, setError] = useState('')
 
   const {
     state: { isConnected, account, chainName },
@@ -35,7 +37,7 @@ export const ConnectWallet: FC = () => {
       await switchNetwork()
       setIsUnknownNetwork(false)
     } catch (ex) {
-      setError((ex as Error)?.message || JSON.stringify(ex))
+      setAppError(ex as Error)
     } finally {
       setIsLoading(false)
     }
@@ -49,7 +51,7 @@ export const ConnectWallet: FC = () => {
       if (ex instanceof UnknownNetworkError) {
         setIsUnknownNetwork(true)
       } else {
-        setError((ex as Error)?.message || JSON.stringify(ex))
+        setAppError(ex as Error)
       }
     } finally {
       setIsLoading(false)

frontend/src/components/Layout/index.tsx

@@ -5,10 +5,13 @@ import { LogoIcon } from '../icons/LogoIcon'
 import { ConnectWallet } from '../ConnectWallet'
 import { Alert } from '../Alert'
 import { useAppState } from '../../hooks/useAppState.ts'
+import { Button } from '../Button'
+import { StringUtils } from '../../utils/string.utils.ts'
 
 export const Layout: FC = () => {
   const {
-    state: { isInitialLoading },
+    state: { isInitialLoading, appError },
+    clearAppError,
   } = useAppState()
 
   return (
@@ -22,10 +25,22 @@ export const Layout: FC = () => {
           <h1>Oasis Mascot</h1>
         </section>
         <section>
+          {!isInitialLoading && appError && (
+            <Alert
+              type="error"
+              actions={
+                <Button variant="text" onClick={clearAppError}>
+                  &lt; Go back&nbsp;
+                </Button>
+              }
+            >
+              {StringUtils.truncate(appError)}
+            </Alert>
+          )}
           {isInitialLoading && (
             <Alert headerText="Please wait" type="loading" actions={<span>Fetching poll...</span>} />
           )}
-          {!isInitialLoading && <Outlet />}
+          {!isInitialLoading && !appError && <Outlet />}
         </section>
       </main>
     </div>

frontend/src/providers/AppStateContext.ts

@@ -6,11 +6,14 @@ export interface AppStateProviderState {
   poll: Poll | null
   previousVotes: VotesStorage
   previousVote: MascotChoices | null
+  appError: string
 }
 
 export interface AppStateProviderContext {
   readonly state: AppStateProviderState
   setPreviousVoteForCurrentWallet: (choiceId: MascotChoices) => void
+  setAppError: (error: Error | object | string) => void
+  clearAppError: () => void
 }
 
 export const AppStateContext = createContext<AppStateProviderContext>({} as AppStateProviderContext)

frontend/src/providers/AppStateProvider.tsx

@@ -13,6 +13,7 @@ const appStateProviderInitialState: AppStateProviderState = {
   poll: null,
   previousVotes: localStorageStore.get(StorageKeys.Votes) ?? {},
   previousVote: null,
+  appError: '',
 }
 
 export const AppStateContextProvider: FC<PropsWithChildren> = ({ children }) => {
@@ -82,9 +83,37 @@ export const AppStateContextProvider: FC<PropsWithChildren> = ({ children }) =>
     }))
   }
 
+  const setAppError = (error: Error | object | string) => {
+    if (error === undefined || error === null) return
+
+    let appError = ''
+
+    if (Object.prototype.hasOwnProperty.call(error, 'message')) {
+      appError = (error as Error).message
+    } else if (typeof error === 'object') {
+      appError = JSON.stringify(appError)
+    } else {
+      appError = error
+    }
+
+    setState(prevState => ({
+      ...prevState,
+      appError,
+    }))
+  }
+
+  const clearAppError = () => {
+    setState(prevState => ({
+      ...prevState,
+      appError: '',
+    }))
+  }
+
   const providerState: AppStateProviderContext = {
     state,
     setPreviousVoteForCurrentWallet,
+    setAppError,
+    clearAppError,
   }
 
   return <AppStateContext.Provider value={providerState}>{children}</AppStateContext.Provider>

frontend/src/utils/string.utils.ts

@@ -25,4 +25,8 @@ export abstract class StringUtils {
   static getNetworkFriendlyName = (chainName: string) => {
     return NETWORK_NAMES[chainName] ?? 'Unknown network'
   }
+
+  static truncate = (s: string, sliceIndex = 200) => {
+    return s.slice(0, sliceIndex)
+  }
 }