remove delegate

Author: Diogo Soares

src/routes/safe/components/Settings/Delegates/RemoveDelegateModal/index.tsx

@@ -0,0 +1,52 @@
+import { Text } from '@gnosis.pm/safe-react-components'
+import { ReactElement } from 'react'
+
+import { Modal } from 'src/components/Modal'
+import GnoForm from 'src/components/forms/GnoForm'
+
+interface RemoveDelegateModalProps {
+  delegateToDelete: string
+  isOpen: boolean
+  onClose: () => void
+  onSubmit: (address: string) => void
+}
+
+export const RemoveDelegateModal = ({
+  delegateToDelete,
+  isOpen,
+  onClose,
+  onSubmit,
+}: RemoveDelegateModalProps): ReactElement => {
+  const handleDeleteEntrySubmit = () => {
+    onSubmit(delegateToDelete)
+  }
+
+  return (
+    <Modal description="Remove delegate" handleClose={onClose} open={isOpen} title="Remove delegate">
+      <Modal.Header onClose={onClose}>
+        <Modal.Header.Title>Remove delegate</Modal.Header.Title>
+      </Modal.Header>
+      <GnoForm onSubmit={handleDeleteEntrySubmit}>
+        {() => (
+          <>
+            <Modal.Body>
+              <Text size="xl">
+                This action will remove{' '}
+                <Text size="xl" strong as="span">
+                  {delegateToDelete}
+                </Text>{' '}
+                from the Safe delegates list.
+              </Text>
+            </Modal.Body>
+            <Modal.Footer>
+              <Modal.Footer.Buttons
+                cancelButtonProps={{ onClick: onClose }}
+                confirmButtonProps={{ color: 'error', text: 'Delete' }}
+              />
+            </Modal.Footer>
+          </>
+        )}
+      </GnoForm>
+    </Modal>
+  )
+}

src/routes/safe/components/Settings/Delegates/RemoveDelegateModal/style.ts

@@ -0,0 +1,24 @@
+import { createStyles, makeStyles } from '@material-ui/core/styles'
+
+import { lg, md } from 'src/theme/variables'
+
+export const useStyles = makeStyles(
+  createStyles({
+    heading: {
+      padding: lg,
+      justifyContent: 'space-between',
+      boxSizing: 'border-box',
+      height: '74px',
+    },
+    manage: {
+      fontSize: lg,
+    },
+    container: {
+      padding: `${md} ${lg}`,
+    },
+    close: {
+      height: '35px',
+      width: '35px',
+    },
+  }),
+)

src/routes/safe/components/Settings/Delegates/columns.ts

@@ -19,15 +19,15 @@ export const generateColumns = (): Array<DelegatesTableColumn> => {
   const delegateColumn = {
     id: DELEGATE_ADDRESS_ID,
     label: 'Delegate',
-    width: 150,
+    width: 170,
     custom: false,
     align: 'left',
   }
 
   const delegatorColumn = {
     id: DELEGATOR_ADDRESS_ID,
     label: 'Delegator',
-    width: 150,
+    width: 170,
     custom: false,
     align: 'left',
   }

src/routes/safe/components/Settings/Delegates/index.tsx

@@ -24,6 +24,7 @@ import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
 import Row from 'src/components/layout/Row'
 import ButtonHelper from 'src/components/ButtonHelper'
 import { grantedSelector } from 'src/routes/safe/container/selector'
+import { RemoveDelegateModal } from 'src/routes/safe/components/Settings/Delegates/RemoveDelegateModal'
 
 // TODO: these types will come from the Client GW SDK once #72 is merged
 type Page<T> = {
@@ -59,6 +60,8 @@ const Delegates = (): ReactElement => {
   const { transactionService } = getChainInfo()
   const [delegatesList, setDelegatesList] = useState<DelegateResponse['results']>([])
   const [addDelegateModalOpen, setAddDelegateModalOpen] = useState<boolean>(false)
+  const [removeDelegateModalOpen, setRemoveDelegateModalOpen] = useState<boolean>(false)
+  const [addressToRemove, setAddressToRemove] = useState<string>('')
   const columns = generateColumns()
   const autoColumns = columns.filter(({ custom }) => !custom)
 
@@ -75,10 +78,10 @@ const Delegates = (): ReactElement => {
 
   const getSignature = async (delegate) => {
     const totp = Math.floor(Date.now() / 1000 / 3600)
-    const web3 = getWeb3()
     const msg = checksumAddress(delegate) + totp
-
     const hashMessage = keccak256(fromAscii(msg))
+
+    const web3 = getWeb3()
     const signature = await web3.eth.sign(hashMessage, userAccount)
 
     return signature
@@ -115,6 +118,28 @@ const Delegates = (): ReactElement => {
       })
   }
 
+  const handleRemoveDelegate = async (address: string) => {
+    // close Remove delegate modal
+    setRemoveDelegateModalOpen(false)
+
+    const delegate = checksumAddress(address)
+    const signature = await getSignature(delegate)
+
+    const requestOptions = {
+      method: 'DELETE',
+      headers: { 'Content-type': 'application/json' },
+      body: JSON.stringify({
+        signature: signature,
+      }),
+    }
+
+    const url = `${transactionService}/api/v1/safes/${safeAddress}/delegates/${delegate}/`
+    fetch(url, requestOptions).then(() => {
+      setAddressToRemove('')
+      fetchDelegates()
+    })
+  }
+
   return (
     <StyledBlock>
       <StyledHeading tag="h2">Manage Safe Delegates</StyledHeading>
@@ -178,8 +203,8 @@ const Delegates = (): ReactElement => {
                       </ButtonHelper>
                       <ButtonHelper
                         onClick={() => {
-                          // setSelectedEntry({ entry: row })
-                          // setDeleteEntryModalOpen(true)
+                          setRemoveDelegateModalOpen(true)
+                          setAddressToRemove(row[DELEGATE_ADDRESS_ID])
                         }}
                       >
                         <Icon
@@ -203,6 +228,15 @@ const Delegates = (): ReactElement => {
         onClose={() => setAddDelegateModalOpen(false)}
         onSubmit={handleAddDelegate}
       />
+      <RemoveDelegateModal
+        delegateToDelete={addressToRemove}
+        isOpen={removeDelegateModalOpen}
+        onClose={() => {
+          setRemoveDelegateModalOpen(false)
+          setAddressToRemove('')
+        }}
+        onSubmit={handleRemoveDelegate}
+      />
     </StyledBlock>
   )
 }