(Fix) xDai feature issues

src/logic/safe/utils/buildSafeCreationTxUrl.ts

@@ -6,5 +6,5 @@ export const buildSafeCreationTxUrl = (safeAddress: string): string => {
   const address = checksumAddress(safeAddress)
   const base = getSafeCreationTxUri(address)
 
-  return `${host}${base}`
+  return `${host}/${base}`
 }

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

@@ -12,14 +12,12 @@ import {
 } from '@gnosis.pm/safe-apps-sdk'
 import { useDispatch, useSelector } from 'react-redux'
 import { useEffect, useCallback, MutableRefObject } from 'react'
-import { getTxServiceUrl } from 'src/config/'
-import { ETHEREUM_NETWORK } from 'src/config/networks/network.d'
+import { getNetworkName, getTxServiceUrl } from 'src/config/'
 import {
   safeEthBalanceSelector,
   safeNameSelector,
   safeParamAddressFromStateSelector,
 } from 'src/logic/safe/store/selectors'
-import { networkSelector } from 'src/logic/wallets/store/selectors'
 import { SafeApp } from 'src/routes/safe/components/Apps/types.d'
 
 type InterfaceMessageProps<T extends InterfaceMessageIds> = {
@@ -43,6 +41,8 @@ interface InterfaceMessageRequest extends InterfaceMessageProps<InterfaceMessage
   requestId: number | string
 }
 
+const NETWORK_NAME = getNetworkName()
+
 const useIframeMessageHandler = (
   selectedApp: SafeApp | undefined,
   openConfirmationModal: (txs: Transaction[], requestId: RequestId) => void,
@@ -53,7 +53,6 @@ const useIframeMessageHandler = (
   const safeName = useSelector(safeNameSelector)
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const ethBalance = useSelector(safeEthBalanceSelector)
-  const network = useSelector(networkSelector)
   const dispatch = useDispatch()
 
   const sendMessageToIframe = useCallback(
@@ -91,7 +90,7 @@ const useIframeMessageHandler = (
             messageId: INTERFACE_MESSAGES.ON_SAFE_INFO,
             data: {
               safeAddress: safeAddress as string,
-              network: ETHEREUM_NETWORK[network].toLowerCase() as LowercaseNetworks,
+              network: NETWORK_NAME.toLowerCase() as LowercaseNetworks,
               ethBalance: ethBalance as string,
             },
           }
@@ -133,7 +132,6 @@ const useIframeMessageHandler = (
     dispatch,
     enqueueSnackbar,
     ethBalance,
-    network,
     openConfirmationModal,
     safeAddress,
     safeName,

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

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react'
 import { INTERFACE_MESSAGES, Transaction, RequestId, LowercaseNetworks } from '@gnosis.pm/safe-apps-sdk'
 import { Card, IconText, Loader, Menu, Title } from '@gnosis.pm/safe-react-components'
 import { useSelector } from 'react-redux'
-import { ETHEREUM_NETWORK } from 'src/config/networks/network.d'
 import styled, { css } from 'styled-components'
 
 import ManageApps from './components/ManageApps'
@@ -11,7 +10,6 @@ import { useAppList } from './hooks/useAppList'
 import { SafeApp } from './types.d'
 
 import LCL from 'src/components/ListContentLayout'
-import { networkSelector } from 'src/logic/wallets/store/selectors'
 import { grantedSelector } from 'src/routes/safe/container/selector'
 import {
   safeEthBalanceSelector,
@@ -22,6 +20,7 @@ import { isSameURL } from 'src/utils/url'
 import { useIframeMessageHandler } from './hooks/useIframeMessageHandler'
 import ConfirmTransactionModal from './components/ConfirmTransactionModal'
 import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
+import { getNetworkName } from 'src/config'
 
 const centerCSS = css`
   display: flex;
@@ -57,6 +56,8 @@ const INITIAL_CONFIRM_TX_MODAL_STATE: ConfirmTransactionModalState = {
   requestId: undefined,
 }
 
+const NETWORK_NAME = getNetworkName()
+
 const Apps = (): React.ReactElement => {
   const { appList, loadingAppList, onAppToggle, onAppAdded, onAppRemoved } = useAppList()
 
@@ -71,7 +72,6 @@ const Apps = (): React.ReactElement => {
   const granted = useSelector(grantedSelector)
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const safeName = useSelector(safeNameSelector)
-  const network = useSelector(networkSelector)
   const ethBalance = useSelector(safeEthBalanceSelector)
 
   const openConfirmationModal = useCallback(
@@ -156,11 +156,11 @@ const Apps = (): React.ReactElement => {
       messageId: INTERFACE_MESSAGES.ON_SAFE_INFO,
       data: {
         safeAddress: safeAddress as string,
-        network: ETHEREUM_NETWORK[network].toLowerCase() as LowercaseNetworks,
+        network: NETWORK_NAME.toLowerCase() as LowercaseNetworks,
         ethBalance: ethBalance as string,
       },
     })
-  }, [ethBalance, network, safeAddress, selectedApp, sendMessageToIframe])
+  }, [ethBalance, safeAddress, selectedApp, sendMessageToIframe])
 
   if (loadingAppList || !appList.length || !safeAddress) {
     return (
@@ -186,7 +186,7 @@ const Apps = (): React.ReactElement => {
               granted={granted}
               selectedApp={selectedApp}
               safeAddress={safeAddress}
-              network={ETHEREUM_NETWORK[network]}
+              network={NETWORK_NAME}
               appIsLoading={appIsLoading}
               onIframeLoad={handleIframeLoad}
             />

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/CreationTx/index.tsx

@@ -26,20 +26,20 @@ const useStyles = makeStyles({
 })
 
 type Props = {
-  tx: Transaction
+  tx?: Transaction
 }
 
 export const CreationTx = ({ tx }: Props): React.ReactElement | null => {
   const classes = useStyles()
-  if (!tx) {
+  const isCreationTx = tx?.type === TransactionTypes.CREATION
+
+  if (!tx || !isCreationTx) {
     return null
   }
   const explorerUrl = getExplorerInfo(tx.creator)
   const scanBlockFactoryAddressUrl = getExplorerInfo(tx.factoryAddress)
   const scanBlockMasterCopyUrl = getExplorerInfo(tx.masterCopy)
 
-  const isCreationTx = tx.type === TransactionTypes.CREATION
-
   return isCreationTx ? (
     <>
       <Paragraph noMargin>