Manual reconnect button (#424)

ChainSafe · Oct 25, 2023 · d2c7e1b · d2c7e1b
1 parent c1adbf0
commit d2c7e1b
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 37 deletions.
diff --git a/packages/ui/src/contexts/MultiProxyContext.tsx b/packages/ui/src/contexts/MultiProxyContext.tsx
@@ -42,6 +42,7 @@ export interface IMultisigContext {
   getMultisigByAddress: (address: string) => MultisigAggregated | undefined
   getMultisigAsAccountBaseInfo: () => AccountBaseInfo[]
   selectedIsWatched: boolean
+  refetch: () => void
 }
 
 const MultisigContext = createContext<IMultisigContext | undefined>(undefined)
@@ -184,13 +185,20 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
 
   const ownAddressIds = useAccountId(ownAddressList)
   const watchedAddressesIds = useAccountId(watchedAddresses)
-  const { isLoading: isMultisigsubLoading, error: isMultisigSubError } =
-    useMultisigsBySignatoriesOrWatchedSubscription({
-      accountIds: ownAddressIds,
-      watchedAccountIds: watchedAddressesIds,
-      onUpdate: refreshPureToQueryAndMultisigList
-    })
-  const { isLoading: isPureSubLoading, error: isPureSubError } = usePureByIdsSubscription({
+  const {
+    isLoading: isMultisigsubLoading,
+    error: isMultisigSubError,
+    refetch: refetchMultisigSub
+  } = useMultisigsBySignatoriesOrWatchedSubscription({
+    accountIds: ownAddressIds,
+    watchedAccountIds: watchedAddressesIds,
+    onUpdate: refreshPureToQueryAndMultisigList
+  })
+  const {
+    isLoading: isPureSubLoading,
+    error: isPureSubError,
+    refetch: refetchPureSub
+  } = usePureByIdsSubscription({
     pureIds: [...watchedAddressesIds, ...pureToQueryIds],
     onUpdate: refreshWatchedPureList
   })
@@ -277,6 +285,11 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
     }
   }, [getMultiProxyByAddress, multiProxyList, selectedMultiProxy])
 
+  const refetch = useCallback(() => {
+    refetchMultisigSub()
+    refetchPureSub()
+  }, [refetchMultisigSub, refetchPureSub])
+
   return (
     <MultisigContext.Provider
       value={{
@@ -288,7 +301,8 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
         error: isMultisigSubError || isPureSubError,
         getMultisigByAddress,
         getMultisigAsAccountBaseInfo,
-        selectedIsWatched
+        selectedIsWatched,
+        refetch
       }}
     >
       {children}

diff --git a/packages/ui/src/hooks/useDisplayError.tsx b/packages/ui/src/hooks/useDisplayError.tsx
@@ -5,15 +5,15 @@ import {
 
 import { styled } from '@mui/material/styles'
 import { useAccounts } from '../contexts/AccountsContext'
-import { Link } from '../components/library'
+import { Button, Link } from '../components/library'
 import { Center } from '../components/layout/Center'
 import { useWatchedAddresses } from '../contexts/WatchedAddressesContext'
 import { useMultiProxy } from '../contexts/MultiProxyContext'
 
 export const useDisplayError = () => {
   const { isExtensionError, isAccountLoading } = useAccounts()
   const { watchedAddresses } = useWatchedAddresses()
-  const { error: multisigQueryError } = useMultiProxy()
+  const { error: multisigQueryError, refetch } = useMultiProxy()
 
   if (isExtensionError && watchedAddresses.length === 0 && !isAccountLoading) {
     return (
@@ -41,7 +41,8 @@ export const useDisplayError = () => {
       <CenterStyled>
         <ErrorMessageStyled>
           <ErrorOutlineIcon size={64} />
-          <div>An error occurred.</div>
+          <div>Connection timed out.</div>
+          <Button onClick={refetch}>Reconnect</Button>
         </ErrorMessageStyled>
       </CenterStyled>
     )
@@ -67,4 +68,8 @@ const CenterStyled = styled(Center)`
 const ErrorMessageStyled = styled('div')`
   text-align: center;
   margin-top: 1rem;
+
+  button {
+    margin-top: 1rem;
+  }
 `
diff --git a/packages/ui/src/hooks/useMultisigCallsSubscription.tsx b/packages/ui/src/hooks/useMultisigCallsSubscription.tsx
@@ -42,7 +42,7 @@ export const useMultisigCallSubscription = ({ onUpdate, multisigIds }: Args) =>
     )
   }
 
-  const { isError, error, refetch } = useSubscription(
+  useSubscription(
     [`KeyMultisigCallsByMultisigId-${multisigIds}-${selectedNetwork}`],
     () => {
       if (!client) return new Observable<null>()
@@ -59,10 +59,10 @@ export const useMultisigCallSubscription = ({ onUpdate, multisigIds }: Args) =>
     {
       onData: () => {
         onUpdate()
+      },
+      onError(error) {
+        console.error('MultisigCallsByMultisigId subscription error', error)
       }
-      // onError(error) {
-      //   console.error('MultisigCallsByMultisigId subscription error', error)
-      // },
       // retry: (failureCount: number, error: Error) => {
       //   console.error(
       //     'Subscription MultisigCallsByMultisigId failed',
@@ -76,10 +76,10 @@ export const useMultisigCallSubscription = ({ onUpdate, multisigIds }: Args) =>
     }
   )
 
-  if (isError) {
-    console.error('Subscription MultisigCallsByMultisigId error, refetching', error)
-    refetch()
-  }
+  // if (isError) {
+  //   console.error('Subscription MultisigCallsByMultisigId error, refetching', error)
+  //   refetch()
+  // }
 
   // if (isSubsriptionLoading) {
   //     console.log('subscription loading', multisigs);

diff --git a/packages/ui/src/hooks/useMultisigsBySignatoriesOrWatchedSubscription.tsx b/packages/ui/src/hooks/useMultisigsBySignatoriesOrWatchedSubscription.tsx
@@ -54,7 +54,7 @@ export const useMultisigsBySignatoriesOrWatchedSubscription = ({
     )
   }
 
-  const { isError, error, data, isLoading, refetch } = useSubscription(
+  const { error, data, isLoading, refetch } = useSubscription(
     [`KeyMultisigsBySignatoriesOrWatched-${accountIds}-${watchedAccountIds}-${selectedNetwork}`],
     () => {
       if (!client) return new Observable<null>()
@@ -72,10 +72,10 @@ export const useMultisigsBySignatoriesOrWatchedSubscription = ({
     {
       onData(data) {
         !!data && onUpdate(data)
+      },
+      onError(error) {
+        console.error('MultisigsBySignatoriesOrWatched subscription error', error)
       }
-      // onError(error) {
-      //   console.error('MultisigsBySignatoriesOrWatched subscription error', error)
-      // },
       // retry: (failureCount: number, error: Error) => {
       //   console.error(
       //     'Subscription MultisigsBySignatoriesOrWatched failed',
@@ -89,10 +89,10 @@ export const useMultisigsBySignatoriesOrWatchedSubscription = ({
     }
   )
 
-  if (isError) {
-    console.error('Subscription MultisigsBySignatoriesOrWatched error, refetching', error)
-    refetch()
-  }
+  // if (isError) {
+  //   console.error('Subscription MultisigsBySignatoriesOrWatched error, refetching', error)
+  //   refetch()
+  // }
 
   // if (isSubsriptionLoading) {
   //     console.log('subscription loading', multisigs);
@@ -105,5 +105,5 @@ export const useMultisigsBySignatoriesOrWatchedSubscription = ({
   // console.log('subscription data', data)
   //   return <div>Data: {JSON.stringify(data?.multisigCalls)}</div>;
 
-  return { data, isLoading: hasSomethingToQuery && isLoading, error }
+  return { data, isLoading: hasSomethingToQuery && isLoading, error, refetch }
 }
diff --git a/packages/ui/src/hooks/usePureByIdSubscription.tsx b/packages/ui/src/hooks/usePureByIdSubscription.tsx
@@ -43,7 +43,7 @@ export const usePureByIdsSubscription = ({ onUpdate, pureIds }: Args) => {
     )
   }
 
-  const { isError, error, data, isLoading, refetch } = useSubscription(
+  const { error, data, isLoading, refetch } = useSubscription(
     [`KeyWatchedPureById-${pureIds}-${selectedNetwork}`],
     () => {
       if (!client) return new Observable<null>()
@@ -60,10 +60,10 @@ export const usePureByIdsSubscription = ({ onUpdate, pureIds }: Args) => {
     {
       onData(data) {
         !!data && onUpdate(data)
+      },
+      onError(error) {
+        console.error('WatchedPureById subscription error', error)
       }
-      // onError(error) {
-      //   console.error('WatchedPureById subscription error', error)
-      // },
       // retry: (failureCount: number, error: Error) => {
       //   console.error(
       //     'Subscription WatchedPureById failed',
@@ -77,10 +77,10 @@ export const usePureByIdsSubscription = ({ onUpdate, pureIds }: Args) => {
     }
   )
 
-  if (isError) {
-    console.error('Subscription WatchedPureById error, refetching', error)
-    refetch()
-  }
+  // if (isError) {
+  //   console.error('Subscription WatchedPureById error, refetching', error)
+  //   refetch()
+  // }
 
   // if (isSubsriptionLoading) {
   //     console.log('subscription loading', multisigs);
@@ -93,5 +93,5 @@ export const usePureByIdsSubscription = ({ onUpdate, pureIds }: Args) => {
   // console.log('subscription data', data)
   //   return <div>Data: {JSON.stringify(data?.multisigCalls)}</div>;
 
-  return { data, isLoading: hasSomethingToQuery && isLoading, error }
+  return { data, isLoading: hasSomethingToQuery && isLoading, error, refetch }
 }