diff --git a/package.json b/package.json index b9f058b3db..7f3e254afd 100644 --- a/package.json +++ b/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": { diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx index ba1299328d..0ed1d07055 100644 --- a/src/routes/safe/components/Apps/components/AppFrame.tsx +++ b/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, diff --git a/src/routes/safe/components/Apps/hooks/useIframeMessageHandler.ts b/src/routes/safe/components/Apps/hooks/useIframeMessageHandler.ts index 751b38bba0..a30164eb9c 100644 --- a/src/routes/safe/components/Apps/hooks/useIframeMessageHandler.ts +++ b/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 = { 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 (message: InterfaceMessageProps, 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, diff --git a/src/routes/safe/components/Apps/utils.ts b/src/routes/safe/components/Apps/utils.ts index fa1f3faead..0abf04795b 100644 --- a/src/routes/safe/components/Apps/utils.ts +++ b/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 +}