feat: redesign Load Safe

cypress/e2e/smoke/load_safe.cy.js

@@ -29,22 +29,20 @@ describe('Load existing Safe', () => {
 
   it('should allow choosing the network where the Safe exists', () => {
     // Click the network selector inside the Stepper content
-    cy.contains('Select network on which the Safe was created:').contains('span', 'Polygon').click()
+    cy.get('[data-testid=load-safe-form]').contains('Polygon').click()
 
     // Selects Goerli
     cy.get('ul li')
       .contains(/^G(ö|oe)rli$/)
       .click()
-    cy.contains('Select network on which the Safe was created:').contains('span', /^G(ö|oe)rli$/)
-
-    cy.contains('Continue').click()
+    cy.contains('span', /^G(ö|oe)rli$/)
   })
 
   it('should accept name the Safe', () => {
     // alias the address input label
     cy.get('input[name="address"]').parent().prev('label').as('addressLabel')
 
-    // Name input should have a placeholder ending in 'rinkeby-safe'
+    // Name input should have a placeholder ending in 'goerli-safe'
     cy.get('input[name="name"]')
       .should('have.attr', 'placeholder')
       .should('match', /g(ö|oe)rli-safe/)
@@ -77,7 +75,7 @@ describe('Load existing Safe', () => {
     const [, address] = SAFE_QR_CODE_ADDRESS.split(':')
     cy.get('input[name="address"]').should('have.value', address)
 
-    cy.contains('Continue').click()
+    cy.contains('Next').click()
   })
 
   // TODO: register the goerli ENS for the Safe owner when possible
@@ -92,7 +90,7 @@ describe('Load existing Safe', () => {
   it('should set custom name in the first owner', () => {
     // Sets a custom name for the first owner
     cy.get('input[name="owners.0.name"]').type('Test Owner Name').should('have.value', 'Test Owner Name')
-    cy.contains('Continue').click()
+    cy.contains('Next').click()
   })
 
   it('should have Safe and owner names in the Review step', () => {

src/components/common/NetworkSelector/index.tsx

@@ -24,7 +24,7 @@ const NetworkSelector = (): ReactElement => {
 
     trackEvent({ ...OVERVIEW_EVENTS.SWITCH_NETWORK, label: selectedChainId })
 
-    const shouldKeepPath = [AppRoutes.load, AppRoutes.open, AppRoutes.newSafe.create].includes(router.pathname)
+    const shouldKeepPath = [AppRoutes.newSafe.create, AppRoutes.newSafe.load].includes(router.pathname)
 
     const newRoute = {
       pathname: shouldKeepPath ? router.pathname : '/',

src/components/common/PageLayout/SideDrawer.tsx

@@ -20,6 +20,10 @@ const isNewSafeRoute = (pathname: string): boolean => {
   return pathname === AppRoutes.newSafe.create
 }
 
+const isLoadSafeRoute = (pathname: string): boolean => {
+  return pathname === AppRoutes.newSafe.load
+}
+
 const isAppShareRoute = (pathname: string): boolean => {
   return pathname === AppRoutes.share.safeApp
 }
@@ -36,7 +40,11 @@ const SideDrawer = ({ isOpen, onToggle }: SideDrawerProps): ReactElement => {
 
   useEffect(() => {
     const closeSidebar =
-      isSmallScreen || isSafeAppRoute(pathname, query) || isAppShareRoute(pathname) || isNewSafeRoute(pathname)
+      isSmallScreen ||
+      isSafeAppRoute(pathname, query) ||
+      isAppShareRoute(pathname) ||
+      isNewSafeRoute(pathname) ||
+      isLoadSafeRoute(pathname)
     onToggle(!closeSidebar)
   }, [isSmallScreen, onToggle, pathname, query])