add delegate

Author: Diogo Soares

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

@@ -0,0 +1,95 @@
+import { ReactElement } from 'react'
+
+import { Modal } from 'src/components/Modal'
+import Field from 'src/components/forms/Field'
+import GnoForm from 'src/components/forms/GnoForm'
+import TextField from 'src/components/forms/TextField'
+import Block from 'src/components/layout/Block'
+import Col from 'src/components/layout/Col'
+import Row from 'src/components/layout/Row'
+import { composeValidators, mustBeAddressHash, required } from 'src/components/forms/validator'
+
+import { useStyles } from './style'
+
+type DelegateEntry = {
+  address: string
+  label: string
+}
+
+const formMutators = {
+  setDelegateAddress: (args, state, utils) => {
+    utils.changeValue(state, 'address', () => args[0])
+  },
+  setDelegateLabel: (args, state, utils) => {
+    utils.changeValue(state, 'label', () => args[0])
+  },
+}
+
+type AddDelegateModalProps = {
+  isOpen: boolean
+  onClose: () => void
+  onSubmit: (entry: DelegateEntry) => void
+}
+
+export const AddDelegateModal = ({ isOpen, onClose, onSubmit }: AddDelegateModalProps): ReactElement => {
+  const classes = useStyles()
+
+  const onFormSubmitted = (values: DelegateEntry) => {
+    onSubmit(values)
+  }
+
+  return (
+    <Modal description="Add a new Safe delegate" handleClose={onClose} open={isOpen} title="Add a delegate">
+      <Modal.Header onClose={onClose}>
+        <Modal.Header.Title>{'Add a delegate'}</Modal.Header.Title>
+      </Modal.Header>
+      <Modal.Body withoutPadding>
+        <GnoForm formMutators={formMutators} onSubmit={onFormSubmitted}>
+          {(...args) => {
+            const formState = args[2]
+
+            return (
+              <>
+                <Block className={classes.container}>
+                  <Row margin="md">
+                    <Col xs={11}>
+                      <Field
+                        component={TextField}
+                        name="address"
+                        placeholder="Delegate address"
+                        label="Delegate*"
+                        type="text"
+                        validate={composeValidators(required, mustBeAddressHash)}
+                      />
+                    </Col>
+                  </Row>
+                  <Row margin="md">
+                    <Col xs={11}>
+                      <Field
+                        component={TextField}
+                        name="label"
+                        placeholder="Label"
+                        label="Label*"
+                        type="text"
+                        validate={required}
+                      />
+                    </Col>
+                  </Row>
+                </Block>
+                <Modal.Footer>
+                  <Modal.Footer.Buttons
+                    cancelButtonProps={{ onClick: onClose }}
+                    confirmButtonProps={{
+                      disabled: !formState.valid,
+                      text: 'Add',
+                    }}
+                  />
+                </Modal.Footer>
+              </>
+            )
+          }}
+        </GnoForm>
+      </Modal.Body>
+    </Modal>
+  )
+}

src/routes/safe/components/Settings/Delegates/AddDelegateModal/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/index.tsx

@@ -1,7 +1,7 @@
-import { ReactElement, useEffect, useMemo, useState } from 'react'
+import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react'
 import { useSelector } from 'react-redux'
 import styled from 'styled-components'
-import { Table, TableHeader, TableRow, Text } from '@gnosis.pm/safe-react-components'
+import { ButtonLink, Table, TableHeader, TableRow, Text } from '@gnosis.pm/safe-react-components'
 
 import Block from 'src/components/layout/Block'
 import Heading from 'src/components/layout/Heading'
@@ -10,7 +10,12 @@ import { lg } from 'src/theme/variables'
 import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
 import { getChainInfo } 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 { keccak256, fromAscii } from 'web3-utils'
 
+// TODO: these types will come from the Client GW SDK once #72 is merged
 type Page<T> = {
   next?: string
   previous?: string
@@ -37,8 +42,10 @@ const StyledHeading = styled(Heading)`
 
 const Delegates = (): ReactElement => {
   const { address: safeAddress } = useSelector(currentSafeWithNames)
-  const [delegatesList, setDelegatesList] = useState<DelegateResponse['results']>([])
+  const userAccount = useSelector(userAccountSelector)
   const { transactionService } = getChainInfo()
+  const [delegatesList, setDelegatesList] = useState<DelegateResponse['results']>([])
+  const [addDelegateModalOpen, setAddDelegateModalOpen] = useState<boolean>(false)
 
   const headerCells: TableHeader[] = useMemo(
     () => [
@@ -50,9 +57,7 @@ const Delegates = (): ReactElement => {
   )
   const rows: TableRow[] = useMemo(() => [], [])
 
-  useEffect(() => {
-    if (!safeAddress || !transactionService) return
-
+  const fetchDelegates = useCallback(() => {
     const url = `${transactionService}/api/v1/safes/${safeAddress}/delegates/`
     fetch(url)
       .then((response) => response.json())
@@ -61,6 +66,22 @@ const Delegates = (): ReactElement => {
       })
   }, [safeAddress, transactionService])
 
+  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 signature = await web3.eth.sign(hashMessage, userAccount)
+
+    return signature
+  }
+
+  useEffect(() => {
+    if (!safeAddress || !transactionService) return
+    fetchDelegates()
+  }, [fetchDelegates, safeAddress, transactionService])
+
   useEffect(() => {
     if (delegatesList.length) {
       let index = 0
@@ -77,12 +98,54 @@ const Delegates = (): ReactElement => {
     }
   }, [delegatesList, rows])
 
+  const handleAddDelegate = async ({ address, label }) => {
+    // close Add delegate modal
+    setAddDelegateModalOpen(false)
+
+    const delegate = checksumAddress(address)
+
+    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()
+      })
+  }
+
   return (
     <StyledBlock>
       <StyledHeading tag="h2">Manage Safe Delegates</StyledHeading>
       <Paragraph>Get, add and delete delegates.</Paragraph>
+      <ButtonLink
+        onClick={() => {
+          setAddDelegateModalOpen(true)
+        }}
+        color="primary"
+        iconType="add"
+        iconSize="sm"
+        textSize="xl"
+      >
+        Add delegate
+      </ButtonLink>
       <pre>{JSON.stringify(delegatesList, undefined, 2)}</pre>
       <Table headers={headerCells} rows={rows} />
+      <AddDelegateModal
+        isOpen={addDelegateModalOpen}
+        onClose={() => setAddDelegateModalOpen(false)}
+        onSubmit={handleAddDelegate}
+      />
     </StyledBlock>
   )
 }