Fix: rearrange Settings tabs

safe-global · May 27, 2024 · 78c6b78 · 78c6b78
1 parent 548bf6a
commit 78c6b78
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 66 deletions.
diff --git a/src/components/common/SocialLoginDeprecation/index.tsx b/src/components/common/SocialLoginDeprecation/index.tsx
@@ -18,7 +18,7 @@ const SocialLoginDeprecation = () => {
   }
 
   const settingsPage = {
-    pathname: AppRoutes.settings.securityLogin,
+    pathname: AppRoutes.settings.security,
     query: router.query,
   }
 

diff --git a/src/components/common/WalletInfo/index.tsx b/src/components/common/WalletInfo/index.tsx
@@ -71,7 +71,7 @@ export const WalletInfo = ({
             <SocialLoginInfo wallet={wallet} chainInfo={chainInfo} size={36} />
 
             {socialWalletService && !socialWalletService.isMFAEnabled() && (
-              <Link href={{ pathname: AppRoutes.settings.securityLogin, query: router.query }} passHref>
+              <Link href={{ pathname: AppRoutes.settings.security, query: router.query }} passHref>
                 <Button
                   fullWidth
                   variant="contained"

diff --git a/src/components/settings/ContractVersion/index.tsx b/src/components/settings/ContractVersion/index.tsx
@@ -25,46 +25,51 @@ export const ContractVersion = () => {
 
   const needsUpdate = safe.implementationVersionState === ImplementationVersionState.OUTDATED
   const showUpdateDialog = safeMasterCopy?.deployer === MasterCopyDeployer.GNOSIS && needsUpdate
+  const isLatestVersion = safe.version && !showUpdateDialog
 
   return (
     <>
       <Typography variant="h4" fontWeight={700} marginBottom={1}>
         Contract version
       </Typography>
 
-      <Typography variant="body1" fontWeight={400}>
-        {safeLoaded ? safe.version ?? 'Unsupported contract' : <Skeleton width="60px" />}
+      <Typography variant="body1" fontWeight={400} display="flex" alignItems="center">
+        {safeLoaded ? (
+          <>
+            {safe.version ?? 'Unsupported contract'}
+            {isLatestVersion && (
+              <>
+                <CheckCircleIcon color="primary" sx={{ ml: 1, mr: 0.5 }} /> Latest version
+              </>
+            )}
+          </>
+        ) : (
+          <Skeleton width="60px" />
+        )}
       </Typography>
-      <Box mt={2}>
-        {safeLoaded && safe.version ? (
-          showUpdateDialog ? (
-            <Alert
-              sx={{ borderRadius: '2px', borderColor: '#B0FFC9' }}
-              icon={<SvgIcon component={InfoIcon} inheritViewBox color="secondary" />}
-            >
-              <AlertTitle sx={{ fontWeight: 700 }}>New version is available: {LATEST_SAFE_VERSION}</AlertTitle>
 
-              <Typography mb={3}>
-                Update now to take advantage of new features and the highest security standards available. You will need
-                to confirm this update just like any other transaction.{' '}
-                <ExternalLink href={safeMasterCopy?.deployerRepoUrl}>GitHub</ExternalLink>
-              </Typography>
+      {safeLoaded && safe.version && showUpdateDialog && (
+        <Alert
+          sx={{ mt: 2, borderRadius: '2px', borderColor: '#B0FFC9' }}
+          icon={<SvgIcon component={InfoIcon} inheritViewBox color="secondary" />}
+        >
+          <AlertTitle sx={{ fontWeight: 700 }}>New version is available: {LATEST_SAFE_VERSION}</AlertTitle>
 
-              <CheckWallet>
-                {(isOk) => (
-                  <Button onClick={() => setTxFlow(<UpdateSafeFlow />)} variant="contained" disabled={!isOk}>
-                    Update
-                  </Button>
-                )}
-              </CheckWallet>
-            </Alert>
-          ) : (
-            <Typography display="flex" alignItems="center">
-              <CheckCircleIcon color="primary" sx={{ mr: 0.5 }} /> Latest version
-            </Typography>
-          )
-        ) : null}
-      </Box>
+          <Typography mb={3}>
+            Update now to take advantage of new features and the highest security standards available. You will need to
+            confirm this update just like any other transaction.{' '}
+            <ExternalLink href={safeMasterCopy?.deployerRepoUrl}>GitHub</ExternalLink>
+          </Typography>
+
+          <CheckWallet>
+            {(isOk) => (
+              <Button onClick={() => setTxFlow(<UpdateSafeFlow />)} variant="contained" disabled={!isOk}>
+                Update
+              </Button>
+            )}
+          </CheckWallet>
+        </Alert>
+      )}
     </>
   )
 }
diff --git a/src/components/settings/RequiredConfirmations/index.tsx b/src/components/settings/RequiredConfirmations/index.tsx
@@ -19,23 +19,22 @@ export const RequiredConfirmation = ({ threshold, owners }: { threshold: number;
         </Grid>
 
         <Grid item xs>
-          <Typography>Any transaction requires the confirmation of:</Typography>
-          <Typography paddingTop={3}>
+          <Typography pb={2}>Any transaction requires the confirmation of:</Typography>
+
+          <Typography pt={3} pr={2} component="span">
             <b>{threshold}</b> out of <b>{owners}</b> signers.
           </Typography>
 
           {owners > 1 && (
-            <Box pt={2}>
-              <CheckWallet>
-                {(isOk) => (
-                  <Track {...SETTINGS_EVENTS.SETUP.CHANGE_THRESHOLD}>
-                    <Button onClick={() => setTxFlow(<ChangeThresholdFlow />)} variant="contained" disabled={!isOk}>
-                      Change
-                    </Button>
-                  </Track>
-                )}
-              </CheckWallet>
-            </Box>
+            <CheckWallet>
+              {(isOk) => (
+                <Track {...SETTINGS_EVENTS.SETUP.CHANGE_THRESHOLD} as="span">
+                  <Button onClick={() => setTxFlow(<ChangeThresholdFlow />)} variant="contained" disabled={!isOk}>
+                    Change
+                  </Button>
+                </Track>
+              )}
+            </CheckWallet>
           )}
         </Grid>
       </Grid>

diff --git a/src/components/settings/SafeModules/index.tsx b/src/components/settings/SafeModules/index.tsx
@@ -65,7 +65,7 @@ const SafeModules = () => {
       <Grid container direction="row" justifyContent="space-between" spacing={3}>
         <Grid item lg={4} xs={12}>
           <Typography variant="h4" fontWeight={700}>
-            Safe Account modules
+            Safe modules
           </Typography>
         </Grid>
 

diff --git a/src/components/settings/SecurityLogin/index.tsx b/src/components/settings/SecurityLogin/index.tsx
@@ -3,7 +3,6 @@ import SocialSignerMFA from './SocialSignerMFA'
 import SocialSignerExport from './SocialSignerExport'
 import useWallet from '@/hooks/wallets/useWallet'
 import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
-import SpendingLimits from '../SpendingLimits'
 import dynamic from 'next/dynamic'
 import { useIsRecoverySupported } from '@/features/recovery/hooks/useIsRecoverySupported'
 import SecuritySettings from '../SecuritySettings'
@@ -19,6 +18,8 @@ const SecurityLogin = () => {
     <Box display="flex" flexDirection="column" gap={2}>
       {isRecoverySupported && <RecoverySettings />}
 
+      <SecuritySettings />
+
       {isSocialLogin && (
         <>
           <Paper sx={{ p: 4 }}>
@@ -48,10 +49,6 @@ const SecurityLogin = () => {
           </Paper>
         </>
       )}
-
-      <SpendingLimits />
-
-      <SecuritySettings />
     </Box>
   )
 }

diff --git a/src/components/sidebar/SidebarNavigation/config.tsx b/src/components/sidebar/SidebarNavigation/config.tsx
@@ -90,8 +90,8 @@ export const settingsNavItems = [
     href: AppRoutes.settings.appearance,
   },
   {
-    label: 'Security & Login',
-    href: AppRoutes.settings.securityLogin,
+    label: 'Security',
+    href: AppRoutes.settings.security,
   },
   {
     label: 'Notifications',
@@ -129,8 +129,8 @@ export const generalSettingsNavItems = [
     href: AppRoutes.settings.notifications,
   },
   {
-    label: 'Security & Login',
-    href: AppRoutes.settings.securityLogin,
+    label: 'Security',
+    href: AppRoutes.settings.security,
   },
   {
     label: 'Data',

diff --git a/src/components/tx-flow/flows/SignMessage/SignMessage.tsx b/src/components/tx-flow/flows/SignMessage/SignMessage.tsx
@@ -109,12 +109,12 @@ const MessageDialogError = ({ isOwner, submitError }: { isOwner: boolean; submit
     !wallet || !onboard
       ? 'No wallet is connected.'
       : !isOwner
-      ? "You are currently not a signer of this Safe Account and won't be able to confirm this message."
-      : submitError && isWalletRejection(submitError)
-      ? 'User rejected signing.'
-      : submitError
-      ? 'Error confirming the message. Please try again.'
-      : null
+        ? "You are currently not a signer of this Safe Account and won't be able to confirm this message."
+        : submitError && isWalletRejection(submitError)
+          ? 'User rejected signing.'
+          : submitError
+            ? 'Error confirming the message. Please try again.'
+            : null
 
   if (errorMessage) {
     return <ErrorMessage>{errorMessage}</ErrorMessage>
@@ -166,7 +166,7 @@ const BlindSigningWarning = ({
   return (
     <ErrorMessage level={isBlindSigningEnabled ? 'warning' : 'error'}>
       This request involves{' '}
-      <Link component={NextLink} href={{ pathname: AppRoutes.settings.securityLogin, query }}>
+      <Link component={NextLink} href={{ pathname: AppRoutes.settings.security, query }}>
         blind signing
       </Link>
       , which can lead to unpredictable outcomes.
@@ -176,7 +176,7 @@ const BlindSigningWarning = ({
       ) : (
         <>
           If you wish to proceed, you must first{' '}
-          <Link component={NextLink} href={{ pathname: AppRoutes.settings.securityLogin, query }}>
+          <Link component={NextLink} href={{ pathname: AppRoutes.settings.security, query }}>
             enable blind signing
           </Link>
           .

diff --git a/src/config/routes.ts b/src/config/routes.ts
@@ -2,12 +2,12 @@ export const AppRoutes = {
   '404': '/404',
   wc: '/wc',
   terms: '/terms',
+  swap: '/swap',
   privacy: '/privacy',
   licenses: '/licenses',
   index: '/',
   imprint: '/imprint',
   home: '/home',
-  swap: '/swap',
   cookie: '/cookie',
   addressBook: '/address-book',
   addOwner: '/addOwner',
@@ -28,7 +28,7 @@ export const AppRoutes = {
   },
   settings: {
     setup: '/settings/setup',
-    securityLogin: '/settings/security-login',
+    security: '/settings/security',
     notifications: '/settings/notifications',
     modules: '/settings/modules',
     index: '/settings',

diff --git a/src/pages/settings/security-login.tsx → src/pages/settings/security.tsx b/src/pages/settings/security-login.tsx → src/pages/settings/security.tsx
diff --git a/src/pages/settings/setup.tsx b/src/pages/settings/setup.tsx
@@ -8,6 +8,7 @@ import { RequiredConfirmation } from '@/components/settings/RequiredConfirmation
 import useSafeInfo from '@/hooks/useSafeInfo'
 import SettingsHeader from '@/components/settings/SettingsHeader'
 import DelegatesList from '@/components/settings/DelegatesList'
+import SpendingLimits from '@/components/settings/SpendingLimits'
 
 const Setup: NextPage = () => {
   const { safe, safeLoaded } = useSafeInfo()
@@ -57,12 +58,14 @@ const Setup: NextPage = () => {
           </Grid>
         </Paper>
 
-        <Paper sx={{ p: 4 }}>
+        <Paper sx={{ p: 4, mb: 2 }}>
           <OwnerList />
 
           <RequiredConfirmation threshold={threshold} owners={ownerLength} />
         </Paper>
 
+        <SpendingLimits />
+
         <DelegatesList />
       </main>
     </>