(Chore) Type fixes and refactor (#1376)

* use `safeFeaturesEnabled` selector

also organized a bit the code (styles) and added Types for the `ChooseTxType` component

* fix `getGnosisSafeInstanceAt` return type

* add types to `safeStorage`

refactor `getSafeName`

* use redux selector to obtain master contract version

* fix return type

Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>

src/logic/contracts/safeContracts.ts

@@ -98,11 +98,9 @@ export const estimateGasForDeployingSafe = async (
   return gas * parseInt(gasPrice, 10)
 }
 
-export const getGnosisSafeInstanceAt = async (safeAddress: string): Promise<GnosisSafe> => {
+export const getGnosisSafeInstanceAt = (safeAddress: string): GnosisSafe => {
   const web3 = getWeb3()
-  const gnosisSafe = await new web3.eth.Contract(GnosisSafeSol.abi as AbiItem[], safeAddress) as unknown as GnosisSafe
-
-  return gnosisSafe
+  return new web3.eth.Contract(GnosisSafeSol.abi as AbiItem[], safeAddress) as unknown as GnosisSafe
 }
 
 const cleanByteCodeMetadata = (bytecode: string): string => {

src/logic/safe/store/actions/fetchSafe.ts

@@ -17,6 +17,7 @@ import { ModulePair, SafeOwner, SafeRecordProps } from 'src/logic/safe/store/mod
 import { Action, Dispatch } from 'redux'
 import { SENTINEL_ADDRESS } from 'src/logic/contracts/safeContracts'
 import { AppReduxState } from 'src/store'
+import { latestMasterContractVersionSelector } from '../selectors'
 
 const buildOwnersFrom = (safeOwners: string[], localSafe?: SafeRecordProps): List<SafeOwner> => {
   const ownersList = safeOwners.map((ownerAddress) => {
@@ -157,7 +158,7 @@ export default (safeAdd: string) => async (
   try {
     const safeAddress = checksumAddress(safeAdd)
     const safeName = (await getSafeName(safeAddress)) || 'LOADED SAFE'
-    const latestMasterContractVersion = getState().safes.get('latestMasterContractVersion')
+    const latestMasterContractVersion = latestMasterContractVersionSelector(getState())
     const safeProps = await buildSafe(safeAddress, safeName, latestMasterContractVersion)
 
     dispatch(addSafe(safeProps))

src/logic/safe/utils/safeStorage.ts

@@ -6,23 +6,16 @@ export const DEFAULT_SAFE_KEY = 'DEFAULT_SAFE'
 
 type StoredSafes = Record<string, SafeRecordProps>
 
-export const loadStoredSafes = async (): Promise<StoredSafes | undefined> => {
-  const safes = await loadFromStorage<StoredSafes>(SAFES_KEY)
-
-  return safes
+export const loadStoredSafes = (): Promise<StoredSafes | undefined> => {
+  return loadFromStorage<StoredSafes>(SAFES_KEY)
 }
 
 export const getSafeName = async (safeAddress: string): Promise<string | undefined> => {
   const safes = await loadStoredSafes()
-  if (!safes) {
-    return undefined
-  }
-  const safe = safes[safeAddress]
-
-  return safe ? safe.name : undefined
+  return safes?.[safeAddress]?.name
 }
 
-export const saveSafes = async (safes) => {
+export const saveSafes = async (safes: StoredSafes): Promise<void> => {
   try {
     await saveToStorage(SAFES_KEY, safes)
   } catch (err) {

src/logic/safe/utils/safeVersion.ts

@@ -71,7 +71,7 @@ export const getCurrentMasterContractLastVersion = async (): Promise<string> =>
 
 export const getSafeVersionInfo = async (safeAddress: string): Promise<SafeVersionInfo> => {
   try {
-    const safeMaster = await getGnosisSafeInstanceAt(safeAddress)
+    const safeMaster = getGnosisSafeInstanceAt(safeAddress)
     const lastSafeVersion = await getCurrentMasterContractLastVersion()
     return checkIfSafeNeedsUpdate(safeMaster, lastSafeVersion)
   } catch (err) {

src/routes/load/container/Load.tsx

@@ -62,7 +62,7 @@ const Load = (): React.ReactElement => {
       safeAddress = checksumAddress(safeAddress)
       const ownerNames = getNamesFrom(values)
 
-      const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
+      const gnosisSafe = getGnosisSafeInstanceAt(safeAddress)
       const ownerAddresses = await gnosisSafe.methods.getOwners().call()
       const owners = getOwnersFrom(ownerNames, ownerAddresses.slice().sort())
 

src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.tsx

@@ -1,13 +1,9 @@
 import IconButton from '@material-ui/core/IconButton'
-import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import classNames from 'classnames/bind'
 import * as React from 'react'
 import { useSelector } from 'react-redux'
 
-import Collectible from '../assets/collectibles.svg'
-import Token from '../assets/token.svg'
-
 import { mustBeEthereumContractAddress } from 'src/components/forms/validator'
 import Button from 'src/components/layout/Button'
 import Col from 'src/components/layout/Col'
@@ -15,54 +11,24 @@ import Hairline from 'src/components/layout/Hairline'
 import Img from 'src/components/layout/Img'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
+import { safeFeaturesEnabledSelector } from 'src/logic/safe/store/selectors'
+import { useStyles } from 'src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/style'
 import ContractInteractionIcon from 'src/routes/safe/components/Transactions/TxsTable/TxType/assets/custom.svg'
-import { safeSelector } from 'src/logic/safe/store/selectors'
-import { lg, md, sm } from 'src/theme/variables'
 
-const useStyles = makeStyles({
-  heading: {
-    padding: `${md} ${lg}`,
-    justifyContent: 'space-between',
-    boxSizing: 'border-box',
-    maxHeight: '75px',
-  },
-  manage: {
-    fontSize: lg,
-  },
-  disclaimer: {
-    marginBottom: `-${md}`,
-    paddingTop: md,
-    textAlign: 'center',
-  },
-  disclaimerText: {
-    fontSize: md,
-  },
-  closeIcon: {
-    height: '35px',
-    width: '35px',
-  },
-  buttonColumn: {
-    padding: '52px 0',
-    '& > button': {
-      fontSize: md,
-      fontFamily: 'Averta',
-    },
-  },
-  firstButton: {
-    boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
-    marginBottom: 15,
-  },
-  iconSmall: {
-    fontSize: 16,
-  },
-  leftIcon: {
-    marginRight: sm,
-  },
-})
+import Collectible from '../assets/collectibles.svg'
+import Token from '../assets/token.svg'
 
-const ChooseTxType = ({ onClose, recipientAddress, setActiveScreen }) => {
+type ActiveScreen = 'sendFunds' | 'sendCollectible' | 'contractInteraction'
+
+interface ChooseTxTypeProps {
+  onClose: () => void
+  recipientAddress: string
+  setActiveScreen: React.Dispatch<React.SetStateAction<ActiveScreen>>
+}
+
+const ChooseTxType = ({ onClose, recipientAddress, setActiveScreen }: ChooseTxTypeProps): React.ReactElement => {
   const classes = useStyles()
-  const { featuresEnabled } = useSelector(safeSelector) || {}
+  const featuresEnabled = useSelector(safeFeaturesEnabledSelector)
   const erc721Enabled = featuresEnabled?.includes('ERC721')
   const [disableContractInteraction, setDisableContractInteraction] = React.useState(!!recipientAddress)
 

src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/style.ts

@@ -0,0 +1,45 @@
+import { createStyles, makeStyles } from '@material-ui/core/styles'
+import { lg, md, sm } from 'src/theme/variables'
+
+export const useStyles = makeStyles(
+  createStyles({
+    heading: {
+      padding: `${md} ${lg}`,
+      justifyContent: 'space-between',
+      boxSizing: 'border-box',
+      maxHeight: '75px',
+    },
+    manage: {
+      fontSize: lg,
+    },
+    disclaimer: {
+      marginBottom: `-${md}`,
+      paddingTop: md,
+      textAlign: 'center',
+    },
+    disclaimerText: {
+      fontSize: md,
+    },
+    closeIcon: {
+      height: '35px',
+      width: '35px',
+    },
+    buttonColumn: {
+      padding: '52px 0',
+      '& > button': {
+        fontSize: md,
+        fontFamily: 'Averta',
+      },
+    },
+    firstButton: {
+      boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
+      marginBottom: 15,
+    },
+    iconSmall: {
+      fontSize: 16,
+    },
+    leftIcon: {
+      marginRight: sm,
+    },
+  }),
+)