Address book: validate chain id; fix download button (#2509)

* Address book: validate chain id; fix download button * Trim chainId when validating
5afe · Jul 5, 2021 · e006cdd · e006cdd
1 parent 8ae6805
commit e006cdd
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git a/src/routes/safe/components/AddressBook/ExportEntriesModal/index.tsx b/src/routes/safe/components/AddressBook/ExportEntriesModal/index.tsx
@@ -46,13 +46,6 @@ const BodyImage = styled.div`
 const StyledLoader = styled(Loader)`
   margin-right: 5px;
 `
-const StyledCSVLink = styled(CSVDownloader)`
-  height: 100%;
-  display: flex;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-`
 
 export const ExportEntriesModal = ({ isOpen, onClose }: ExportEntriesModalProps): ReactElement => {
   const dispatch = useDispatch()
@@ -103,6 +96,7 @@ export const ExportEntriesModal = ({ isOpen, onClose }: ExportEntriesModalProps)
       <Modal.Header onClose={onClose}>
         <Modal.Header.Title withoutMargin>Export address book</Modal.Header.Title>
       </Modal.Header>
+
       <Modal.Body withoutPadding>
         <ImageContainer>
           <BodyImage>
@@ -128,20 +122,24 @@ export const ExportEntriesModal = ({ isOpen, onClose }: ExportEntriesModalProps)
           </Text>
         </InfoContainer>
       </Modal.Body>
+
       <Modal.Footer withoutBorder>
         <Button size="md" variant="outlined" onClick={onClose}>
           Cancel
         </Button>
-        <Button color="primary" size="md" disabled={loading} onClick={error ? () => setDoRetry(true) : handleClose}>
-          {!error ? (
-            <StyledCSVLink data={csvData} bom={true} filename={`gnosis-safe-address-book-${date}`} type="link">
+
+        {error ? (
+          <Button color="primary" size="md" disabled={loading} onClick={() => setDoRetry(true)}>
+            Retry
+          </Button>
+        ) : (
+          <CSVDownloader data={csvData} bom={true} filename={`gnosis-safe-address-book-${date}`} type="link">
+            <Button color="primary" size="md" disabled={loading} onClick={handleClose}>
               {loading && <StyledLoader color="secondaryLight" size="xs" />}
               Download
-            </StyledCSVLink>
-          ) : (
-            'Retry'
-          )}
-        </Button>
+            </Button>
+          </CSVDownloader>
+        )}
       </Modal.Footer>
     </Modal>
   )

diff --git a/src/routes/safe/components/AddressBook/ImportEntriesModal/index.tsx b/src/routes/safe/components/AddressBook/ImportEntriesModal/index.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { Text } from '@gnosis.pm/safe-react-components'
 import { Modal } from 'src/components/Modal'
 import { CSVReader } from 'react-papaparse'
+import { ParseResult } from 'papaparse'
 import { AddressBookEntry } from 'src/logic/addressBook/model/addressBook'
 import { checksumAddress } from 'src/utils/checksumAddress'
 import HelpInfo from 'src/routes/safe/components/AddressBook/HelpInfo'
@@ -43,8 +44,9 @@ const ImportEntriesModal = ({ importEntryModalHandler, isOpen, onClose }: Import
     importEntryModalHandler(entryList)
   }
 
-  const handleOnDrop = (data, file) => {
-    const slicedData = data.slice(1)
+  const handleOnDrop = (parseResults: ParseResult<string>[], file: File) => {
+    // Remove the header row
+    const slicedData = parseResults.slice(1)
 
     const fileError = validateFile(file)
     if (fileError) {
@@ -58,15 +60,19 @@ const ImportEntriesModal = ({ importEntryModalHandler, isOpen, onClose }: Import
       return
     }
 
-    const formatedList = slicedData.map((entry) => {
-      return { address: checksumAddress(entry.data[0]), name: entry.data[1], chainId: parseInt(entry.data[2]) }
+    const formatedList = slicedData.map(({ data }) => {
+      return {
+        address: checksumAddress(data[0].trim()),
+        name: data[1].trim(),
+        chainId: parseInt(data[2].trim(), 10),
+      }
     })
     setEntryList(formatedList)
     setImportError('')
     setCsvLoaded(true)
   }
 
-  const handleOnError = (error) => {
+  const handleOnError = (error: Error): void => {
     setImportError(error.message)
   }
 

diff --git a/src/routes/safe/components/AddressBook/utils.ts b/src/routes/safe/components/AddressBook/utils.ts
@@ -1,4 +1,5 @@
 import { isValidAddress } from 'src/utils/isValidAddress'
+import { ETHEREUM_NETWORK } from 'src/config/networks/network.d'
 
 export const WRONG_FILE_EXTENSION_ERROR = 'Only CSV files are allowed'
 export const FILE_SIZE_TOO_BIG_ERROR = 'The size of the file is over 1 MB'
@@ -41,7 +42,8 @@ export const validateCsvData = (data: CsvDataType): string | undefined => {
     if (!isValidAddress(lowerCaseAddress)) {
       return `Invalid address on row ${index + 1}`
     }
-    if (isNaN(parseInt(chainId))) {
+    const chainIdNum = parseInt(chainId.trim(), 10)
+    if (isNaN(chainIdNum) || ETHEREUM_NETWORK[chainIdNum] == null) {
       return `Invalid chain id on row ${index + 1}`
     }
   }