edit delegate label

Author: Diogo Soares

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

@@ -0,0 +1,76 @@
+import { ReactElement } from 'react'
+
+import { getExplorerInfo } from 'src/config'
+import Field from 'src/components/forms/Field'
+import GnoForm from 'src/components/forms/GnoForm'
+import TextField from 'src/components/forms/TextField'
+import { composeValidators, required, validAddressBookName } from 'src/components/forms/validator'
+import Block from 'src/components/layout/Block'
+import Hairline from 'src/components/layout/Hairline'
+import Row from 'src/components/layout/Row'
+import Modal, { Modal as GenericModal } from 'src/components/Modal'
+import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
+import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
+
+import { useStyles } from './style'
+
+type EditDelegateModalProps = {
+  isOpen: boolean
+  onClose: () => void
+  delegate: string
+  onSubmit: (label: string) => void
+}
+
+export const EditDelegateModal = ({ isOpen, onClose, delegate, onSubmit }: EditDelegateModalProps): ReactElement => {
+  const classes = useStyles()
+
+  const handleSubmit = ({ label }: { label: string }): void => {
+    console.log('submit label', label)
+    onSubmit(label)
+    onClose()
+  }
+
+  return (
+    <Modal description="Edit delegate label" handleClose={onClose} open={isOpen} title="Edit delegate label">
+      <ModalHeader onClose={onClose} title="Edit delegate label" />
+      <Hairline />
+      <GnoForm onSubmit={handleSubmit} subscription={{ pristine: true }}>
+        {(...args) => {
+          const pristine = args[2].pristine
+          return (
+            <>
+              <Block className={classes.container}>
+                <Row margin="md">
+                  <Field
+                    component={TextField}
+                    name="label"
+                    placeholder="Label"
+                    label="Label*"
+                    type="text"
+                    validate={composeValidators(required, validAddressBookName)}
+                  />
+                </Row>
+                <Row>
+                  <Block justify="center">
+                    <PrefixedEthHashInfo
+                      hash={delegate}
+                      showCopyBtn
+                      showAvatar
+                      explorerUrl={getExplorerInfo(delegate)}
+                    />
+                  </Block>
+                </Row>
+              </Block>
+              <GenericModal.Footer>
+                <GenericModal.Footer.Buttons
+                  cancelButtonProps={{ onClick: onClose }}
+                  confirmButtonProps={{ disabled: pristine, text: 'Save' }}
+                />
+              </GenericModal.Footer>
+            </>
+          )
+        }}
+      </GnoForm>
+    </Modal>
+  )
+}

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

@@ -0,0 +1,25 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+
+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}`,
+      minHeight: '200px',
+    },
+    close: {
+      height: '35px',
+      width: '35px',
+    },
+  }),
+)

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

@@ -14,7 +14,6 @@ import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
 import { getChainInfo, getExplorerInfo } from 'src/config'
 import { checksumAddress } from 'src/utils/checksumAddress'
 import { getWeb3 } from 'src/logic/wallets/getWeb3'
-import { AddDelegateModal } from 'src/routes/safe/components/Settings/Delegates/AddDelegateModal'
 import { userAccountSelector } from 'src/logic/wallets/store/selectors'
 import Table from 'src/components/Table'
 import { cellWidth } from 'src/components/Table/TableHead'
@@ -23,8 +22,9 @@ import { styles } from './style'
 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 { AddDelegateModal } from 'src/routes/safe/components/Settings/Delegates/AddDelegateModal'
 import { RemoveDelegateModal } from 'src/routes/safe/components/Settings/Delegates/RemoveDelegateModal'
+import { EditDelegateModal } from 'src/routes/safe/components/Settings/Delegates/EditDelegateModal'
 
 // TODO: these types will come from the Client GW SDK once #72 is merged
 type Page<T> = {
@@ -56,10 +56,11 @@ const useStyles = makeStyles(styles)
 const Delegates = (): ReactElement => {
   const { address: safeAddress } = useSelector(currentSafeWithNames)
   const userAccount = useSelector(userAccountSelector)
-  const granted = useSelector(grantedSelector)
   const { transactionService } = getChainInfo()
   const [delegatesList, setDelegatesList] = useState<DelegateResponse['results']>([])
   const [addDelegateModalOpen, setAddDelegateModalOpen] = useState<boolean>(false)
+  const [editDelegateModalOpen, setEditDelegateModalOpen] = useState<boolean>(false)
+  const [delegateToEdit, setDelegateToEdit] = useState<string>('')
   const [removeDelegateModalOpen, setRemoveDelegateModalOpen] = useState<boolean>(false)
   const [addressToRemove, setAddressToRemove] = useState<string>('')
   const columns = generateColumns()
@@ -118,6 +119,32 @@ const Delegates = (): ReactElement => {
       })
   }
 
+  const handleEditDelegateLabel = async (label) => {
+    // close Edit delegate modal
+    setEditDelegateModalOpen(false)
+
+    const delegate = checksumAddress(delegateToEdit)
+    const signature = await getSignature(delegate)
+
+    const requestOptions = {
+      method: 'POST',
+      headers: { 'Content-type': 'application/json' },
+      body: JSON.stringify({
+        safe: safeAddress,
+        delegate: delegate,
+        signature: signature,
+        label: label,
+      }),
+    }
+
+    const url = `${transactionService}/api/v1/safes/${safeAddress}/delegates/`
+    fetch(url, requestOptions)
+      .then((response) => response.json())
+      .then(() => {
+        fetchDelegates()
+      })
+  }
+
   const handleRemoveDelegate = async (address: string) => {
     // close Remove delegate modal
     setRemoveDelegateModalOpen(false)
@@ -187,32 +214,24 @@ const Delegates = (): ReactElement => {
                     <Row align="end" className={classes.actions}>
                       <ButtonHelper
                         onClick={() => {
-                          //   setSelectedEntry({
-                          //     entry: row,
-                          //     isOwnerAddress: userOwner,
-                          //   })
-                          //   setEditCreateEntryModalOpen(true)
+                          setDelegateToEdit(row[DELEGATE_ADDRESS_ID])
+                          setEditDelegateModalOpen(true)
                         }}
                       >
-                        <Icon
-                          size="sm"
-                          type="edit"
-                          tooltip="Edit delegate"
-                          className={granted ? classes.editEntryButton : classes.editEntryButtonNonOwner}
-                        />
+                        <Icon size="sm" type="edit" tooltip="Edit delegate" className={classes.editEntryButton} />
                       </ButtonHelper>
                       <ButtonHelper
                         onClick={() => {
-                          setRemoveDelegateModalOpen(true)
                           setAddressToRemove(row[DELEGATE_ADDRESS_ID])
+                          setRemoveDelegateModalOpen(true)
                         }}
                       >
                         <Icon
                           size="sm"
                           type="delete"
                           color="error"
                           tooltip="Remove delegate"
-                          className={granted ? classes.removeEntryButton : classes.removeEntryButtonNonOwner}
+                          className={classes.removeEntryButton}
                         />
                       </ButtonHelper>
                     </Row>
@@ -228,13 +247,16 @@ const Delegates = (): ReactElement => {
         onClose={() => setAddDelegateModalOpen(false)}
         onSubmit={handleAddDelegate}
       />
+      <EditDelegateModal
+        delegate={delegateToEdit}
+        isOpen={editDelegateModalOpen}
+        onClose={() => setEditDelegateModalOpen(false)}
+        onSubmit={handleEditDelegateLabel}
+      />
       <RemoveDelegateModal
         delegateToDelete={addressToRemove}
         isOpen={removeDelegateModalOpen}
-        onClose={() => {
-          setRemoveDelegateModalOpen(false)
-          setAddressToRemove('')
-        }}
+        onClose={() => setRemoveDelegateModalOpen(false)}
         onSubmit={handleRemoveDelegate}
       />
     </StyledBlock>

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

@@ -40,18 +40,12 @@ export const styles = createStyles({
   editEntryButton: {
     cursor: 'pointer',
   },
-  editEntryButtonNonOwner: {
-    cursor: 'pointer',
-  },
   removeEntryButton: {
     cursor: 'pointer',
   },
   removeEntryButtonDisabled: {
     cursor: 'default',
   },
-  removeEntryButtonNonOwner: {
-    cursor: 'pointer',
-  },
   leftIcon: {
     marginRight: sm,
   },