Merge back hotfix v3.17.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "safe-react",
-  "version": "3.17.1",
+  "version": "3.17.2",
   "description": "Allowing crypto users manage funds in a safer way",
   "website": "https://github.com/gnosis/safe-react#readme",
   "bugs": {

src/routes/safe/components/Apps/components/AppFrame.tsx

@@ -16,14 +16,14 @@ import { INTERFACE_MESSAGES, Transaction, LowercaseNetworks } from '@gnosis.pm/s
 import Web3 from 'web3'
 
 import { currentSafe } from 'src/logic/safe/store/selectors'
-import { getChainInfo, getChainName, getSafeAppsRpcServiceUrl, getTxServiceUrl } from 'src/config'
+import { getChainInfo, getSafeAppsRpcServiceUrl, getTxServiceUrl } from 'src/config'
 import { isSameURL } from 'src/utils/url'
 import { useAnalytics, SAFE_EVENTS } from 'src/utils/googleAnalytics'
 import { LoadingContainer } from 'src/components/LoaderContainer/index'
 import { SAFE_POLLING_INTERVAL } from 'src/utils/constants'
 import { ConfirmTxModal } from './ConfirmTxModal'
 import { useIframeMessageHandler } from '../hooks/useIframeMessageHandler'
-import { getAppInfoFromUrl, getEmptySafeApp } from '../utils'
+import { getAppInfoFromUrl, getEmptySafeApp, getLegacyChainName } from '../utils'
 import { SafeApp } from '../types'
 import { useAppCommunicator } from '../communicator'
 import { fetchTokenCurrenciesBalances } from 'src/logic/safe/api/fetchTokenCurrenciesBalances'
@@ -159,11 +159,12 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
       messageId: INTERFACE_MESSAGES.ON_SAFE_INFO,
       data: {
         safeAddress: safeAddress as string,
-        network: getChainName().toLowerCase() as LowercaseNetworks,
+        // FIXME `network` is deprecated. we should find how many apps are still using it
+        network: getLegacyChainName(chainName, chainId).toLowerCase() as LowercaseNetworks,
         ethBalance: ethBalance as string,
       },
     })
-  }, [ethBalance, safeAddress, appUrl, sendMessageToIframe])
+  }, [chainName, chainId, ethBalance, safeAddress, appUrl, sendMessageToIframe])
 
   const communicator = useAppCommunicator(iframeRef, safeApp)
 
@@ -182,7 +183,9 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
 
     communicator?.on(Methods.getSafeInfo, () => ({
       safeAddress,
-      network: chainName,
+      // FIXME `network` is deprecated. we should find how many apps are still using it
+      // Apps using this property expect this to be in UPPERCASE
+      network: getLegacyChainName(chainName, chainId).toUpperCase(),
       chainId: parseInt(chainId, 10),
       owners,
       threshold,

src/routes/safe/components/Apps/hooks/useIframeMessageHandler.ts

@@ -13,10 +13,11 @@ import {
 import { useDispatch, useSelector } from 'react-redux'
 import { useEffect, useCallback, MutableRefObject } from 'react'
 
-import { getChainName, getTxServiceUrl } from 'src/config/'
+import { getChainInfo, getTxServiceUrl } from 'src/config/'
 import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
 import { TransactionParams } from '../components/AppFrame'
 import { SafeApp } from 'src/routes/safe/components/Apps/types'
+import { getLegacyChainName } from '../utils'
 
 type InterfaceMessageProps<T extends InterfaceMessageIds> = {
   messageId: T
@@ -36,6 +37,7 @@ const useIframeMessageHandler = (
   const { enqueueSnackbar, closeSnackbar } = useSnackbar()
   const { address: safeAddress, ethBalance, name: safeName } = useSelector(currentSafeWithNames)
   const dispatch = useDispatch()
+  const { chainId, chainName } = getChainInfo()
 
   const sendMessageToIframe = useCallback(
     function <T extends InterfaceMessageIds>(message: InterfaceMessageProps<T>, requestId?: RequestId) {
@@ -82,7 +84,7 @@ const useIframeMessageHandler = (
             messageId: INTERFACE_MESSAGES.ON_SAFE_INFO,
             data: {
               safeAddress: safeAddress as string,
-              network: getChainName().toLowerCase() as LowercaseNetworks,
+              network: getLegacyChainName(chainName, chainId).toLowerCase() as LowercaseNetworks,
               ethBalance: ethBalance as string,
             },
           }
@@ -125,6 +127,8 @@ const useIframeMessageHandler = (
       window.removeEventListener('message', onIframeMessage)
     }
   }, [
+    chainName,
+    chainId,
     closeModal,
     closeSnackbar,
     dispatch,

src/routes/safe/components/Apps/utils.ts

@@ -147,3 +147,19 @@ const canLoadAppImage = (path: string, timeout = 10000) =>
       resolve(false)
     }
   })
+
+// Some apps still need chain name, as they didn't update to chainId based SDK versions
+// With naming changing in the config service some names aren't the expected ones
+// Ex: Ethereum -> MAINNET, Gnosis Chain -> XDAI
+export const getLegacyChainName = (chainName: string, chainId: string): string => {
+  let network = chainName
+  switch (chainId) {
+    case '1':
+      network = 'MAINNET'
+      break
+    case '100':
+      network = 'XDAI'
+  }
+
+  return network
+}