Tech debt 1265: Enable strictNullChecks TS compiler option

package.json

@@ -178,7 +178,7 @@
     "bignumber.js": "9.0.0",
     "bnc-onboard": "1.12.0",
     "classnames": "^2.2.6",
-    "concurrently": "^5.2.0",
+    "concurrently": "^5.3.0",
     "connected-react-router": "6.8.0",
     "coveralls": "^3.1.0",
     "currency-flags": "2.1.2",
@@ -190,19 +190,19 @@
     "eth-sig-util": "^2.5.3",
     "ethereum-blockies-base64": "^1.0.2",
     "ethereumjs-abi": "0.6.8",
-    "exponential-backoff": "^3.0.1",
+    "exponential-backoff": "^3.1.0",
     "express": "^4.17.1",
     "final-form": "^4.20.1",
     "final-form-calculate": "^1.3.1",
     "history": "4.10.1",
-    "immortal-db": "^1.0.3",
+    "immortal-db": "^1.1.0",
     "immutable": "^4.0.0-rc.12",
     "js-cookie": "^2.2.1",
     "lodash.debounce": "^4.0.8",
     "lodash.memoize": "^4.1.2",
-    "material-ui-search-bar": "^1.0.0-beta.13",
+    "material-ui-search-bar": "^1.0.0",
     "notistack": "https://github.com/gnosis/notistack.git#v0.9.4",
-    "open": "^7.1.0",
+    "open": "^7.2.0",
     "polished": "3.6.6",
     "qrcode.react": "1.0.0",
     "query-string": "6.13.1",
@@ -215,7 +215,7 @@
     "react-qr-reader": "^2.2.1",
     "react-redux": "7.2.1",
     "react-router-dom": "5.2.0",
-    "react-scripts": "^3.4.1",
+    "react-scripts": "^3.4.3",
     "react-window": "^1.8.5",
     "recompose": "^0.30.0",
     "redux": "4.0.5",
@@ -263,7 +263,7 @@
     "eslint-plugin-import": "2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.5",
+    "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-sort-destructure-keys": "1.3.5",
     "ethereumjs-abi": "0.6.8",
     "husky": "^4.2.5",
@@ -272,9 +272,9 @@
     "prettier": "2.1.1",
     "react-app-rewired": "^2.1.6",
     "react-docgen-typescript-loader": "^3.7.2",
-    "truffle": "5.1.36",
+    "truffle": "5.1.41",
     "typechain": "^2.0.0",
     "typescript": "3.9.7",
-    "wait-on": "5.1.0"
+    "wait-on": "5.2.0"
   }
 }

src/components/App/ModalReceive.tsx → src/components/App/ReceiveModal.tsx

@@ -1,9 +1,8 @@
 import IconButton from '@material-ui/core/IconButton'
-import { withStyles } from '@material-ui/core/styles'
+import { createStyles, makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import QRCode from 'qrcode.react'
 import * as React from 'react'
-import { useSelector } from 'react-redux'
 
 import CopyBtn from 'src/components/CopyBtn'
 import EtherscanBtn from 'src/components/EtherscanBtn'
@@ -14,72 +13,79 @@ import Col from 'src/components/layout/Col'
 import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
-import { safeNameSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { lg, md, screenSm, secondaryText, sm } from 'src/theme/variables'
 import { copyToClipboard } from 'src/utils/clipboard'
 
-const styles = () => ({
-  heading: {
-    padding: `${md} ${lg}`,
-    justifyContent: 'space-between',
-    maxHeight: '75px',
-    boxSizing: 'border-box',
-  },
-  close: {
-    height: lg,
-    width: lg,
-    fill: secondaryText,
-  },
-  qrContainer: {
-    backgroundColor: '#fff',
-    padding: md,
-    borderRadius: '6px',
-    border: `1px solid ${secondaryText}`,
-  },
-  annotation: {
-    margin: lg,
-    marginBottom: 0,
-  },
-  safeName: {
-    margin: `${md} 0`,
-  },
-  buttonRow: {
-    height: '84px',
-    justifyContent: 'center',
-    '& > button': {
-      fontFamily: 'Averta',
-      fontSize: md,
-      boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
+const useStyles = makeStyles(
+  createStyles({
+    heading: {
+      padding: `${md} ${lg}`,
+      justifyContent: 'space-between',
+      maxHeight: '75px',
+      boxSizing: 'border-box',
     },
-  },
-  addressContainer: {
-    flexDirection: 'column',
-    justifyContent: 'center',
-    margin: `${lg} 0`,
+    close: {
+      height: lg,
+      width: lg,
+      fill: secondaryText,
+    },
+    qrContainer: {
+      backgroundColor: '#fff',
+      padding: md,
+      borderRadius: '6px',
+      border: `1px solid ${secondaryText}`,
+    },
+    annotation: {
+      margin: lg,
+      marginBottom: 0,
+    },
+    safeName: {
+      margin: `${md} 0`,
+    },
+    buttonRow: {
+      height: '84px',
+      justifyContent: 'center',
+      '& > button': {
+        fontFamily: 'Averta',
+        fontSize: md,
+        boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
+      },
+    },
+    addressContainer: {
+      flexDirection: 'column',
+      justifyContent: 'center',
+      margin: `${lg} 0`,
 
-    [`@media (min-width: ${screenSm}px)`]: {
-      flexDirection: 'row',
+      [`@media (min-width: ${screenSm}px)`]: {
+        flexDirection: 'row',
+      },
     },
-  },
-  address: {
-    marginLeft: sm,
-    marginRight: sm,
-    maxWidth: '70%',
-    overflowWrap: 'break-word',
+    address: {
+      marginLeft: sm,
+      marginRight: sm,
+      maxWidth: '70%',
+      overflowWrap: 'break-word',
 
-    [`@media (min-width: ${screenSm}px)`]: {
-      maxWidth: 'none',
+      [`@media (min-width: ${screenSm}px)`]: {
+        maxWidth: 'none',
+      },
     },
-  },
-})
+  }),
+)
+
+type Props = {
+  onClose: () => void
+  safeAddress: string
+  safeName: string
+}
+
+const ReceiveModal = ({ onClose, safeAddress, safeName }: Props) => {
+  const classes = useStyles()
 
-const Receive = ({ classes, onClose }) => {
-  const safeAddress = useSelector(safeParamAddressFromStateSelector)
-  const safeName = useSelector(safeNameSelector)
   return (
     <>
       <Row align="center" className={classes.heading} grow>
-        <Paragraph className={classes.manage} noMargin size="xl" weight="bolder">
+        <Paragraph noMargin size="xl" weight="bolder">
           Receive funds
         </Paragraph>
         <IconButton disableRipple onClick={onClose}>
@@ -122,4 +128,4 @@ const Receive = ({ classes, onClose }) => {
   )
 }
 
-export default withStyles(styles as any)(Receive)
+export default ReceiveModal

src/components/App/index.tsx

@@ -30,7 +30,7 @@ import { currentCurrencySelector, safeFiatBalancesTotalSelector } from 'src/logi
 import { formatAmountInUsFormat } from 'src/logic/tokens/utils/formatAmount'
 import { grantedSelector } from 'src/routes/safe/container/selector'
 
-import Receive from './ModalReceive'
+import Receive from './ReceiveModal'
 import { useSidebarItems } from 'src/components/AppLayout/Sidebar/useSidebarItems'
 
 const notificationStyles = {
@@ -79,7 +79,8 @@ const App: React.FC = ({ children }) => {
 
   const sendFunds = safeActionsState.sendFunds as { isOpen: boolean; selectedToken: string }
   const formattedTotalBalance = currentSafeBalance ? formatAmountInUsFormat(currentSafeBalance) : ''
-  const balance = !!formattedTotalBalance && !!currentCurrency ? `${formattedTotalBalance} ${currentCurrency}` : null
+  const balance =
+    !!formattedTotalBalance && !!currentCurrency ? `${formattedTotalBalance} ${currentCurrency}` : undefined
 
   useEffect(() => {
     if (matchSafe?.isExact) {
@@ -133,14 +134,16 @@ const App: React.FC = ({ children }) => {
             selectedToken={sendFunds.selectedToken}
           />
 
-          <Modal
-            description="Receive Tokens Form"
-            handleClose={onReceiveHide}
-            open={safeActionsState.showReceive as boolean}
-            title="Receive Tokens"
-          >
-            <Receive onClose={onReceiveHide} />
-          </Modal>
+          {safeAddress && safeName && (
+            <Modal
+              description="Receive Tokens Form"
+              handleClose={onReceiveHide}
+              open={safeActionsState.showReceive as boolean}
+              title="Receive Tokens"
+            >
+              <Receive onClose={onReceiveHide} safeAddress={safeAddress} safeName={safeName} />
+            </Modal>
+          )}
         </>
       </SnackbarProvider>
       <CookiesBanner />

src/components/AppLayout/AppLayout.stories.tsx

@@ -50,7 +50,7 @@ export const Base = (): React.ReactElement => {
       safeAddress="0xEE63624cC4Dd2355B16b35eFaadF3F7450A9438B"
       safeName="someName"
       granted={true}
-      balance={null}
+      balance={undefined}
       onToggleSafeList={() => console.log}
       onReceiveClick={() => console.log}
       onNewTransactionClick={() => console.log}

src/components/AppLayout/Header/index.tsx

@@ -50,7 +50,7 @@ const HeaderComponent = (): React.ReactElement => {
   }
 
   const getProviderInfoBased = () => {
-    if (!loaded) {
+    if (!loaded || !provider) {
       return <ProviderDisconnected />
     }
 

src/components/AppLayout/Sidebar/SafeHeader/index.tsx

@@ -79,10 +79,10 @@ const UnStyledButton = styled.button`
 `
 
 type Props = {
-  address: string | null
-  safeName: string
+  address: string | undefined
+  safeName: string | undefined
   granted: boolean
-  balance: string | null
+  balance: string | undefined
   onToggleSafeList: () => void
   onReceiveClick: () => void
   onNewTransactionClick: () => void

src/components/AppLayout/Sidebar/index.tsx

@@ -38,9 +38,9 @@ const HelpCenterLink = styled.a`
   }
 `
 type Props = {
-  safeAddress: string | null
-  safeName: string | null
-  balance: string | null
+  safeAddress?: string
+  safeName?: string
+  balance?: string
   granted: boolean
   onToggleSafeList: () => void
   onReceiveClick: () => void
@@ -57,34 +57,32 @@ const Sidebar = ({
   onToggleSafeList,
   onReceiveClick,
   onNewTransactionClick,
-}: Props): React.ReactElement => {
-  return (
-    <>
-      <SafeHeader
-        address={safeAddress}
-        safeName={safeName}
-        granted={granted}
-        balance={balance}
-        onToggleSafeList={onToggleSafeList}
-        onReceiveClick={onReceiveClick}
-        onNewTransactionClick={onNewTransactionClick}
-      />
+}: Props): React.ReactElement => (
+  <>
+    <SafeHeader
+      address={safeAddress}
+      safeName={safeName}
+      granted={granted}
+      balance={balance}
+      onToggleSafeList={onToggleSafeList}
+      onReceiveClick={onReceiveClick}
+      onNewTransactionClick={onNewTransactionClick}
+    />
 
-      {items.length ? (
-        <>
-          <StyledDivider />
-          <List items={items} />
-        </>
-      ) : null}
-
-      <HelpContainer>
+    {items.length ? (
+      <>
         <StyledDivider />
-        <HelpCenterLink href="https://help.gnosis-safe.io/en/" target="_blank" title="Help Center of Gnosis Safe">
-          <IconText text="HELP CENTER" iconSize="md" textSize="md" color="placeHolder" iconType="question" />
-        </HelpCenterLink>
-      </HelpContainer>
-    </>
-  )
-}
+        <List items={items} />
+      </>
+    ) : null}
+
+    <HelpContainer>
+      <StyledDivider />
+      <HelpCenterLink href="https://help.gnosis-safe.io/en/" target="_blank" title="Help Center of Gnosis Safe">
+        <IconText text="HELP CENTER" iconSize="md" textSize="md" color="placeHolder" iconType="question" />
+      </HelpCenterLink>
+    </HelpContainer>
+  </>
+)
 
 export default Sidebar

src/components/AppLayout/index.tsx

@@ -60,9 +60,9 @@ export const FooterWrapper = styled.footer`
 
 type Props = {
   sidebarItems: ListItemType[]
-  safeAddress: string | null
-  safeName: string | null
-  balance: string | null
+  safeAddress: string | undefined
+  safeName: string | undefined
+  balance: string | undefined
   granted: boolean
   onToggleSafeList: () => void
   onReceiveClick: () => void

src/components/SafeListSidebar/SafeList/index.tsx

@@ -82,7 +82,7 @@ const useStyles = makeStyles({
 })
 
 type Props = {
-  currentSafe: string | null
+  currentSafe: string | undefined
   defaultSafe: DefaultSafe
   safes: SafeRecord[]
   onSafeClick: () => void

src/components/Table/TableHead.tsx

@@ -8,7 +8,7 @@ interface CellWidth {
   maxWidth: string
 }
 
-export const cellWidth = (width: string | number): CellWidth | undefined => {
+export const cellWidth = (width?: string | number): CellWidth | undefined => {
   if (!width) {
     return undefined
   }