(Feature) Spending Limit

.env.example

@@ -26,3 +26,7 @@ REACT_APP_APP_VERSION=$npm_package_version
 
 # For Apps
 REACT_APP_GNOSIS_APPS_URL=https://safe-apps.staging.gnosisdev.com
+
+# Contracts Addresses
+REACT_APP_SPENDING_LIMIT_MODULE_ADDRESS=0x9e9Bf12b5a66c0f0A7435835e0365477E121B110
+

package.json

@@ -26,8 +26,9 @@
     "electron-build": "electron-builder --mac --windows --linux",
     "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",
     "format:staged": "lint-staged",
-    "generate-types": "yarn generate-types:contracts",
+    "generate-types": "yarn generate-types:contracts && yarn generate-types:spendingLimit",
     "generate-types:contracts": "cross-env typechain --target=web3-v1 --outDir './src/types/contracts' './node_modules/@gnosis.pm/safe-contracts/build/contracts/*.json'",
+    "generate-types:spendingLimit": "cross-env typechain --target=web3-v1 --outDir './src/types/contracts' ./src/logic/contracts/artifacts/*.json",
     "lint:check": "eslint './src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "yarn lint:check --fix",
     "postinstall": "patch-package && electron-builder install-app-deps && yarn generate-types",

src/components/Modal/index.tsx

@@ -1,52 +1,70 @@
 import Modal from '@material-ui/core/Modal'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles, createStyles } from '@material-ui/core/styles'
 import cn from 'classnames'
-import * as React from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 
 import { sm } from 'src/theme/variables'
 
-const styles = () => ({
-  root: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    display: 'flex',
-    overflowY: 'scroll',
-  },
-  paper: {
-    position: 'absolute',
-    top: '120px',
-    width: '500px',
-    height: '540px',
-    borderRadius: sm,
-    backgroundColor: '#ffffff',
-    boxShadow: '0 0 5px 0 rgba(74, 85, 121, 0.5)',
-    '&:focus': {
-      outline: 'none',
+const useStyles = makeStyles(
+  createStyles({
+    root: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      display: 'flex',
+      overflowY: 'scroll',
     },
-    display: 'flex',
-    flexDirection: 'column',
-  },
-})
+    paper: {
+      position: 'absolute',
+      top: '120px',
+      width: '500px',
+      height: '540px',
+      borderRadius: sm,
+      backgroundColor: '#ffffff',
+      boxShadow: '0 0 5px 0 rgba(74, 85, 121, 0.5)',
+      '&:focus': {
+        outline: 'none',
+      },
+      display: 'flex',
+      flexDirection: 'column',
+    },
+  }),
+)
+
+interface GnoModalProps {
+  children: ReactNode
+  description: string
+  // type copied from Material-UI Modal's `close` prop
+  handleClose?: {
+    bivarianceHack(event: Record<string, unknown>, reason: 'backdropClick' | 'escapeKeyDown'): void
+  }['bivarianceHack']
+  modalClassName?: string
+  open: boolean
+  paperClassName?: string
+  title: string
+}
 
 const GnoModal = ({
   children,
-  classes,
   description,
   handleClose,
   modalClassName,
   open,
   paperClassName,
   title,
-}: any) => (
-  <Modal
-    aria-describedby={description}
-    aria-labelledby={title}
-    className={cn(classes.root, modalClassName)}
-    onClose={handleClose}
-    open={open}
-  >
-    <div className={cn(classes.paper, paperClassName)}>{children}</div>
-  </Modal>
-)
+}: GnoModalProps): ReactElement => {
+  const classes = useStyles()
+
+  return (
+    <Modal
+      aria-describedby={description}
+      aria-labelledby={title}
+      className={cn(classes.root, modalClassName)}
+      onClose={handleClose}
+      open={open}
+    >
+      <div className={cn(classes.paper, paperClassName)}>{children}</div>
+    </Modal>
+  )
+}
 
-export default withStyles(styles as any)(GnoModal)
+export default GnoModal

src/components/ScanQRModal/ScanQRWrapper/index.tsx

@@ -1,6 +1,5 @@
 import { makeStyles } from '@material-ui/core/styles'
-import { useState } from 'react'
-import * as React from 'react'
+import React, { ReactElement, useState } from 'react'
 
 import QRIcon from 'src/assets/icons/qrcode.svg'
 import { ScanQRModal } from 'src/components/ScanQRModal'
@@ -16,7 +15,7 @@ type Props = {
   handleScan: (dataResult: string, closeQrModal: () => void) => void
 }
 
-export const ScanQRWrapper = ({ handleScan }: Props): React.ReactElement => {
+export const ScanQRWrapper = ({ handleScan }: Props): ReactElement => {
   const classes = useStyles()
   const [qrModalOpen, setQrModalOpen] = useState(false)