From 9242d80079bbe2d72fab411c3dd069407551fd82 Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@users.noreply.github.com>
Date: Wed, 2 Jun 2021 14:36:26 +0200
Subject: [PATCH] Use the same link in the import and export modals (#2380)

---
 .../AddressBook/ExportEntriesModal/index.tsx  | 23 +++-------------
 .../components/AddressBook/HelpInfo/index.tsx | 27 +++++++++++++++++++
 .../AddressBook/ImportEntryModal/index.tsx    | 24 +++--------------
 3 files changed, 34 insertions(+), 40 deletions(-)
 create mode 100644 src/routes/safe/components/AddressBook/HelpInfo/index.tsx

diff --git a/src/routes/safe/components/AddressBook/ExportEntriesModal/index.tsx b/src/routes/safe/components/AddressBook/ExportEntriesModal/index.tsx
index 487272cb..32535f6e 100644
--- a/src/routes/safe/components/AddressBook/ExportEntriesModal/index.tsx
+++ b/src/routes/safe/components/AddressBook/ExportEntriesModal/index.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import { format } from 'date-fns'
 import { useSelector, useDispatch } from 'react-redux'
 import { CSVDownloader, jsonToCSV } from 'react-papaparse'
-import { Button, Icon, Link, Loader, Text } from '@gnosis.pm/safe-react-components'
+import { Button, Loader, Text } from '@gnosis.pm/safe-react-components'
 import styled from 'styled-components'
 
 import { enhanceSnackbarForAction, getNotificationsFromTxType } from 'src/logic/notifications'
@@ -17,6 +17,7 @@ import { lg, md, background } from 'src/theme/variables'
 import { Modal } from 'src/components/Modal'
 import Img from 'src/components/layout/Img'
 import Row from 'src/components/layout/Row'
+import HelpInfo from 'src/routes/safe/components/AddressBook/HelpInfo'
 
 import SuccessSvg from './assets/success.svg'
 import ErrorSvg from './assets/error.svg'
@@ -62,14 +63,6 @@ const StyledCSVLink = styled(CSVDownloader)`
   align-items: center;
 `
 
-const StyledIcon = styled(Icon)`
-  svg {
-    position: relative;
-    top: 4px;
-    left: 4px;
-  }
-`
-
 export const ExportEntriesModal = ({ isOpen, onClose }: ExportEntriesModalProps): ReactElement => {
   const dispatch = useDispatch()
   const addressBook: AddressBookState = useSelector(addressBookSelector)
@@ -132,17 +125,7 @@ export const ExportEntriesModal = ({ isOpen, onClose }: ExportEntriesModalProps)
                 You&apos;re about to export a CSV file with{' '}
                 <Text size="xl" strong as="span">
                   {addressBook.length} address book entries. <br />
-                  <Link
-                    href="https://help.gnosis-safe.io/en/"
-                    target="_blank"
-                    rel="noreferrer"
-                    title="Learn more about importing / exporting an address book."
-                  >
-                    <Text size="xl" as="span" color="primary">
-                      Learn more about importing / exporting an address book.
-                    </Text>
-                    <StyledIcon size="sm" type="externalLink" color="primary" />
-                  </Link>
+                  <HelpInfo />
                 </Text>
                 .
               </Text>
diff --git a/src/routes/safe/components/AddressBook/HelpInfo/index.tsx b/src/routes/safe/components/AddressBook/HelpInfo/index.tsx
new file mode 100644
index 00000000..b90ee141
--- /dev/null
+++ b/src/routes/safe/components/AddressBook/HelpInfo/index.tsx
@@ -0,0 +1,27 @@
+import React, { ReactElement } from 'react'
+import styled from 'styled-components'
+import { Text, Link, Icon } from '@gnosis.pm/safe-react-components'
+
+const StyledIcon = styled(Icon)`
+  svg {
+    position: relative;
+    top: 4px;
+    left: 4px;
+  }
+`
+
+const HelpInfo = (): ReactElement => (
+  <Link
+    href="https://help.gnosis-safe.io/en/articles/5299068-address-book-export-and-import"
+    target="_blank"
+    rel="noreferrer"
+    title="Export & import info"
+  >
+    <Text size="xl" as="span" color="primary">
+      Learn about the address book import and export
+    </Text>
+    <StyledIcon size="sm" type="externalLink" color="primary" />
+  </Link>
+)
+
+export default HelpInfo
diff --git a/src/routes/safe/components/AddressBook/ImportEntryModal/index.tsx b/src/routes/safe/components/AddressBook/ImportEntryModal/index.tsx
index 98b0870a..23ec0f28 100644
--- a/src/routes/safe/components/AddressBook/ImportEntryModal/index.tsx
+++ b/src/routes/safe/components/AddressBook/ImportEntryModal/index.tsx
@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
 
 import styled from 'styled-components'
-import { Icon, Link, Text } from '@gnosis.pm/safe-react-components'
+import { Text } from '@gnosis.pm/safe-react-components'
 import { Modal } from 'src/components/Modal'
 import { CSVReader } from 'react-papaparse'
 import { AddressBookEntry } from 'src/logic/addressBook/model/addressBook'
 import { getWeb3 } from 'src/logic/wallets/getWeb3'
 import { checksumAddress } from 'src/utils/checksumAddress'
+import HelpInfo from 'src/routes/safe/components/AddressBook/HelpInfo'
 
 const ImportContainer = styled.div`
   flex-direction: column;
@@ -26,13 +27,6 @@ const InfoContainer = styled.div`
   text-align: center;
   margin-top: 16px;
 `
-const StyledIcon = styled(Icon)`
-  svg {
-    position: relative;
-    top: 4px;
-    left: 4px;
-  }
-`
 
 const WRONG_FILE_EXTENSION_ERROR = 'Only CSV files are allowed'
 const FILE_SIZE_TOO_BIG = 'The size of the file is over 1 MB'
@@ -187,18 +181,8 @@ const ImportEntryModal = ({ importEntryModalHandler, isOpen, onClose }) => {
           )}
           {!csvLoaded && importError === '' && (
             <Text color="text" as="p" size="xl">
-              Only CSV files are allowed in the format [Address, Name] separated by comma. <br />
-              <Link
-                href="https://help.gnosis-safe.io/en/"
-                target="_blank"
-                rel="noreferrer"
-                title="Learn more about importing / exporting an address book."
-              >
-                <Text size="xl" as="span" color="primary">
-                  Learn more about importing / exporting an address book.
-                </Text>
-                <StyledIcon size="sm" type="externalLink" color="primary" />
-              </Link>
+              Only CSV files exported from Gnosis Safe are allowed. <br />
+              <HelpInfo />
             </Text>
           )}
           {csvLoaded && importError === '' && (