fix: Add export data button to settings page (5afe#4114)

* fix: Add export data button to settings page

* fix: Export the whole local storage

* fix: typo

* fix: Add export route

* fix: Export versioned data

* refactor: Extract const

* fix: Wording

src/routes/export/Export.tsx

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react'
+
+import Page from 'src/components/layout/Page'
+import Block from 'src/components/layout/Block'
+import DataExport from 'src/routes/safe/components/Settings/DataExport'
+
+function Export(): ReactElement {
+  return (
+    <Page>
+      <Block>
+        <DataExport />
+      </Block>
+    </Page>
+  )
+}
+
+export default Export

src/routes/index.tsx

@@ -17,6 +17,7 @@ import {
   SAFE_ROUTES,
   GENERIC_APPS_ROUTE,
   SAFE_APP_LANDING_PAGE_ROUTE,
+  EXPORT_ROUTE,
 } from './routes'
 import { setChainId } from 'src/logic/config/utils'
 import { setChainIdFromUrl } from 'src/utils/history'
@@ -28,6 +29,7 @@ const CreateSafePage = React.lazy(() => import('./CreateSafePage/CreateSafePage'
 const LoadSafePage = React.lazy(() => import('./LoadSafePage/LoadSafePage'))
 const SafeAppLandingPage = React.lazy(() => import('./SafeAppLandingPage/SafeAppLandingPage'))
 const SafeContainer = React.lazy(() => import('./safe/container'))
+const Export = React.lazy(() => import('./export/Export'))
 
 const Routes = (): React.ReactElement => {
   const location = useLocation()
@@ -117,6 +119,8 @@ const Routes = (): React.ReactElement => {
 
       <Route component={Welcome} exact path={WELCOME_ROUTE} />
 
+      <Route component={Export} exact path={EXPORT_ROUTE} />
+
       <Route component={CreateSafePage} exact path={OPEN_SAFE_ROUTE} />
 
       <Route

src/routes/routes.ts

@@ -46,6 +46,7 @@ export const OPEN_SAFE_ROUTE = '/open'
 export const GENERIC_APPS_ROUTE = '/apps'
 export const LOAD_SAFE_ROUTE = generatePath(LOAD_SPECIFIC_SAFE_ROUTE) // By providing no slug, we get '/load'
 export const SAFE_APP_LANDING_PAGE_ROUTE = '/share/safe-app'
+export const EXPORT_ROUTE = '/export'
 
 // [SAFE_SECTION_SLUG], [SAFE_SUBSECTION_SLUG] populated safe routes
 export const SAFE_ROUTES = {

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

@@ -0,0 +1,36 @@
+import { ReactElement } from 'react'
+import Button from 'src/components/layout/Button'
+import Heading from 'src/components/layout/Heading'
+import Paragraph from 'src/components/layout/Paragraph'
+
+const EXPORT_VERSION = '1.0'
+
+const DataExport = (): ReactElement => {
+  const handleExport = () => {
+    const filename = `safe-data-${new Date().toISOString().slice(0, 10)}.json`
+
+    const data = JSON.stringify({ version: EXPORT_VERSION, data: localStorage })
+
+    const blob = new Blob([data], { type: 'text/json' })
+    const link = document.createElement('a')
+
+    link.download = filename
+    link.href = window.URL.createObjectURL(blob)
+    link.dataset.downloadurl = ['text/json', link.download, link.href].join(':')
+    link.dispatchEvent(new MouseEvent('click'))
+  }
+
+  return (
+    <>
+      <Heading tag="h2">Export your data</Heading>
+      <Paragraph>
+        Download your local data with your added Safes and address book. You can import it on app.safe.global.
+      </Paragraph>
+      <Button onClick={handleExport} color="primary" size="small" variant="outlined">
+        Download
+      </Button>
+    </>
+  )
+}
+
+export default DataExport

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

@@ -35,6 +35,7 @@ import ChainIndicator from 'src/components/ChainIndicator'
 import { currentChainId } from 'src/logic/config/store/selectors'
 import { trackEvent } from 'src/utils/googleTagManager'
 import { SETTINGS_EVENTS } from 'src/utils/events/settings'
+import DataExport from 'src/routes/safe/components/Settings/DataExport'
 
 export const SAFE_NAME_INPUT_TEST_ID = 'safe-name-input'
 export const SAFE_NAME_SUBMIT_BTN_TEST_ID = 'change-safe-name-btn'
@@ -186,6 +187,10 @@ const SafeDetails = (): ReactElement => {
             </Block>
           )}
 
+          <Block className={classes.formContainer}>
+            <DataExport />
+          </Block>
+
           <Row align="end" className={classes.controlsRow} grow>
             <Col end="xs">
               <Button