(Feature) [Spending Limit] List of beneficiaries

.env.example

@@ -30,3 +30,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
+

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 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: '530px',
-    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: '530px',
+      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: React.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): React.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,20 +1,23 @@
+import { Button, Icon } from '@gnosis.pm/safe-react-components'
 import { makeStyles } from '@material-ui/core/styles'
-import { useState } from 'react'
-import * as React from 'react'
+import React from 'react'
 
-import QRIcon from 'src/assets/icons/qrcode.svg'
 import ScanQRModal from 'src/components/ScanQRModal'
-import Img from 'src/components/layout/Img'
 
 const useStyles = makeStyles({
   qrCodeBtn: {
-    cursor: 'pointer',
+    padding: '0 !important',
+    minWidth: '40px',
   },
 })
 
-export const ScanQRWrapper = (props) => {
+interface ScanQRWrapperProps {
+  handleScan: (value: string, closeQRCallback: () => void) => void
+}
+
+export const ScanQRWrapper = ({ handleScan }: ScanQRWrapperProps): React.ReactElement => {
   const classes = useStyles()
-  const [qrModalOpen, setQrModalOpen] = useState(false)
+  const [qrModalOpen, setQrModalOpen] = React.useState(false)
 
   const openQrModal = () => {
     setQrModalOpen(true)
@@ -25,22 +28,21 @@ export const ScanQRWrapper = (props) => {
   }
 
   const onScanFinished = (value) => {
-    props.handleScan(value, closeQrModal)
+    handleScan(value, closeQrModal)
   }
 
   return (
     <>
-      <Img
-        alt="Scan QR"
+      <Button
+        size="md"
+        color="secondary"
+        title="Scan QR"
+        type="button"
+        onClick={openQrModal}
         className={classes.qrCodeBtn}
-        height={20}
-        onClick={() => {
-          openQrModal()
-        }}
-        role="button"
-        src={QRIcon}
-        testId="qr-icon"
-      />
+      >
+        <Icon type="qrCode" size="sm" />
+      </Button>
       {qrModalOpen && <ScanQRModal isOpen={qrModalOpen} onClose={closeQrModal} onScan={onScanFinished} />}
     </>
   )