Feat: import/export in the Safe List sidebar

safe-global · Jul 21, 2023 · 423fbac · 423fbac
1 parent 327b4cd
commit 423fbac
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/src/components/settings/DataManagement/ImportFileUpload.tsx b/src/components/settings/DataManagement/ImportFileUpload.tsx
@@ -52,7 +52,7 @@ export const ImportFileUpload = ({
 
   return (
     <>
-      <Typography>Import {'Safe{Wallet}'} data by clicking or dragging a file below.</Typography>
+      <Typography>Import {'Safe{Wallet}'} data by uploading a file in the area below.</Typography>
 
       <FileUpload
         fileType={FileTypes.JSON}
@@ -74,7 +74,7 @@ export const ImportFileUpload = ({
             mr: 0.5,
           }}
         />
-        Only JSON files exported from a {'Safe{Wallet}'} can be imported.
+        Only JSON files exported from the {'Safe{Wallet}'} can be imported.
       </Typography>
     </>
   )

diff --git a/src/components/sidebar/Sidebar/index.tsx b/src/components/sidebar/Sidebar/index.tsx
@@ -10,6 +10,7 @@ import SidebarFooter from '@/components/sidebar/SidebarFooter'
 
 import css from './styles.module.css'
 import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
+import { DataWidget } from '@/components/welcome/DataWidget'
 
 const Sidebar = (): ReactElement => {
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false)
@@ -53,6 +54,8 @@ const Sidebar = (): ReactElement => {
       <Drawer variant="temporary" anchor="left" open={isDrawerOpen} onClose={onDrawerToggle}>
         <div className={css.drawer}>
           <SafeList closeDrawer={closeDrawer} />
+
+          <DataWidget />
         </div>
       </Drawer>
     </div>

diff --git a/src/components/welcome/DataWidget.tsx b/src/components/welcome/DataWidget.tsx
@@ -44,6 +44,7 @@ export const DataWidget = (): ReactElement => {
             <SvgIcon component={FileIcon} inheritViewBox fontSize="small" sx={{ fill: 'none' }} />
           </Box>
         }
+        className={css.cardHeader}
         title={<b>{hasData ? 'Work with your data' : 'Already have a Safe Account?'}</b>}
         subheader={hasData ? 'Export or import your data' : 'Import your data'}
       />

diff --git a/src/components/welcome/styles.module.css b/src/components/welcome/styles.module.css
@@ -63,6 +63,10 @@
   padding: 0;
 }
 
+.cardHeader {
+  text-align: left;
+}
+
 @media (max-width: 899.95px) {
   .sidebar :global .MuiPaper-root {
     height: 100%;