Fix for broken Recovery and Safe transaction pages

src/modules/dashboard/components/ActionsPage/DetailsWidget/DetailsWidget.tsx

@@ -25,13 +25,10 @@ import {
 import { EventValues } from '../../ActionsPageFeed/ActionsPageFeed';
 import { ACTION_TYPES_ICONS_MAP } from '../../ActionsPage/staticMaps';
 
-import {
-  DetailsWidgetTeam,
-  DetailsWidgetAddSafe,
-  DetailsWidgetRoles,
-  DetailsWidgetSafe,
-  DetailsWidgetSafeTransaction,
-} from './index';
+import DetailsWidgetTeam from './DetailsWidgetTeam';
+import DetailsWidgetRoles from './DetailsWidgetRoles';
+import DetailsWidgetSafe, { DetailsWidgetAddSafe } from './DetailsWidgetSafe';
+import DetailsWidgetSafeTransaction from './DetailsWidgetSafeTransaction';
 
 import styles from './DetailsWidget.css';
 

src/modules/dashboard/components/ActionsPage/DetailsWidget/DetailsWidgetSafe/index.ts

@@ -1 +1,2 @@
 export { default } from './DetailsWidgetSafe';
+export { default as DetailsWidgetAddSafe } from './DetailsWidgetAddSafe';

src/modules/dashboard/components/ActionsPage/DetailsWidget/index.ts

@@ -1,7 +1,2 @@
 export { default } from './DetailsWidget';
 export * from './DetailsWidget';
-export { default as DetailsWidgetTeam } from './DetailsWidgetTeam';
-export { default as DetailsWidgetRoles } from './DetailsWidgetRoles';
-export { default as DetailsWidgetSafe } from './DetailsWidgetSafe';
-export { default as DetailsWidgetAddSafe } from './DetailsWidgetSafe/DetailsWidgetAddSafe';
-export { default as DetailsWidgetSafeTransaction } from './DetailsWidgetSafeTransaction';

src/modules/dashboard/hooks/useFetchSafeTransactionData.ts

@@ -85,11 +85,16 @@ export const useFetchSafeTransactionData = (
               parsedAnnotation.safeData.chainId,
               transactionReceipt,
             );
-            const safeTransactionStatus = safeTransactionStatuses.find(
-              (status) => status === TRANSACTION_STATUS.PENDING,
-            )
-              ? TRANSACTION_STATUS.PENDING
-              : TRANSACTION_STATUS.SUCCESS;
+            let safeTransactionStatus;
+            if (safeTransactionStatuses.includes(TRANSACTION_STATUS.PENDING)) {
+              safeTransactionStatus = TRANSACTION_STATUS.PENDING;
+            } else if (
+              safeTransactionStatuses.includes(TRANSACTION_STATUS.SUCCESS)
+            ) {
+              safeTransactionStatus = TRANSACTION_STATUS.SUCCESS;
+            } else {
+              safeTransactionStatus = null;
+            }
             setSafeTransactionData({
               transactionTitle: parsedAnnotation.title,
               safeTransactionStatus,

src/modules/dashboard/sagas/actions/initiateSafeTransaction.ts

@@ -109,7 +109,7 @@ function* initiateSafeTransactionAction({
       }
 
       /* eslint-disable-next-line max-len */
-      const txDataToBeSentToAMB = yield homeBridge.interface.functions.requireToPassMessage.encode(
+      const txDataToBeSentToAMB = yield homeBridge?.interface.functions.requireToPassMessage.encode(
         [zodiacBridgeModule.address, txDataToBeSentToZodiacModule, 1000000],
       );
 
@@ -142,7 +142,7 @@ function* initiateSafeTransactionAction({
       methodName: 'makeArbitraryTransactions',
       identifier: colonyAddress,
       params: [
-        fill(Array(transactionData.length), homeBridge.address),
+        fill(Array(transactionData.length), homeBridge?.address),
         transactionData,
         true,
       ],

src/modules/dashboard/sagas/motions/initiateSafeTransactionMotion.ts

@@ -152,7 +152,7 @@ function* initiateSafeTransactionMotion({
       }
 
       /* eslint-disable-next-line max-len */
-      const txDataToBeSentToAMB = yield homeBridge.interface.functions.requireToPassMessage.encode(
+      const txDataToBeSentToAMB = yield homeBridge?.interface.functions.requireToPassMessage.encode(
         [zodiacBridgeModule.address, txDataToBeSentToZodiacModule, 1000000],
       );
 
@@ -167,7 +167,7 @@ function* initiateSafeTransactionMotion({
          * All the transactions will be send to the home bridge, therefore we just generate an array filled with the corresponding address.
          *
          */
-        fill(Array(transactionData.length), homeBridge.address),
+        fill(Array(transactionData.length), homeBridge?.address),
         transactionData,
         true,
       ],

src/modules/dashboard/sagas/utils/safeHelpers.ts

@@ -50,6 +50,9 @@ export const onLocalDevEnvironment =
   process.env.NODE_ENV === 'development';
 
 export const getHomeProvider = () => {
+  if (!Web3.givenProvider) {
+    return null;
+  }
   return onLocalDevEnvironment
     ? new ethers.providers.JsonRpcProvider(LOCAL_HOME_CHAIN)
     : new ethers.providers.Web3Provider(Web3.givenProvider); // Metamask
@@ -87,7 +90,7 @@ export const getForeignBridgeByChain = (safeChainId: string) => {
 
 export const getHomeBridgeByChain = (safeChainId: string) => {
   const homeProvider = getHomeProvider();
-  const homeSigner = homeProvider.getSigner();
+  const homeSigner = homeProvider?.getSigner();
   const homeBridgeAddress: string | undefined = onLocalDevEnvironment
     ? LOCAL_HOME_BRIDGE_ADDRESS
     : GNOSIS_AMB_BRIDGES[safeChainId]?.homeAMB;
@@ -98,7 +101,9 @@ export const getHomeBridgeByChain = (safeChainId: string) => {
     );
   }
   // @ts-ignore abi type is wrong.
-  return new ethers.Contract(homeBridgeAddress, HomeAMB, homeSigner);
+  return homeSigner
+    ? new ethers.Contract(homeBridgeAddress, HomeAMB, homeSigner)
+    : null;
 };
 
 const getErc721 = (

src/utils/safes/getTransactionStatuses.ts

@@ -110,28 +110,31 @@ export const getTransactionStatuses = async (
   const homeAMBContract = getHomeBridgeByChain(safeChainId);
   const foreignAMBContract = getForeignBridgeByChain(safeChainId);
 
-  const messageIds = getMessageIds(
-    transactionReceipt,
-    homeAMBContract,
-    homeAMBContract.address,
-  );
+  if (homeAMBContract) {
+    const messageIds = getMessageIds(
+      transactionReceipt,
+      homeAMBContract,
+      homeAMBContract?.address,
+    );
+    const transactionStatuses = await Promise.all(
+      messageIds.map(async (messageId) => {
+        const wasTheMessageDelivered = await checkIfTheMessageWasDelivered(
+          foreignAMBContract,
+          networkApiURI,
+          messageId,
+          safeChainId,
+        );
+
+        // @NOTE: Safe transactions will always be executed automatically on the local env
+        if (wasTheMessageDelivered || onLocalDevEnvironment) {
+          return TRANSACTION_STATUS.SUCCESS;
+        }
+        return TRANSACTION_STATUS.PENDING;
+      }),
+    );
 
-  const transactionStatuses = await Promise.all(
-    messageIds.map(async (messageId) => {
-      const wasTheMessageDelivered = await checkIfTheMessageWasDelivered(
-        foreignAMBContract,
-        networkApiURI,
-        messageId,
-        safeChainId,
-      );
-
-      // @NOTE: Safe transactions will always be executed automatically on the local env
-      if (wasTheMessageDelivered || onLocalDevEnvironment) {
-        return TRANSACTION_STATUS.SUCCESS;
-      }
-      return TRANSACTION_STATUS.PENDING;
-    }),
-  );
+    return transactionStatuses;
+  }
 
-  return transactionStatuses;
+  return [];
 };