fix: Safe version/upgrade button improvements (safe-global#1627)

* fixes-1530

* reviewed-changes

* Update src/components/settings/ContractVersion/index.tsx

Co-authored-by: Aaron Cook <[email protected]>

* Update src/components/settings/ContractVersion/index.tsx

Co-authored-by: Aaron Cook <[email protected]>

* Update src/components/settings/ContractVersion/index.tsx

Co-authored-by: Aaron Cook <[email protected]>

* fixing style to sx

* fix: change icon + tooltip location

---------

Co-authored-by: Aaron Cook <[email protected]>

Author: abheektripathy

src/components/settings/ContractVersion/index.tsx

@@ -1,14 +1,17 @@
 import { useMemo } from 'react'
-import { Typography } from '@mui/material'
+import { SvgIcon, Typography } from '@mui/material'
 import { ImplementationVersionState } from '@safe-global/safe-gateway-typescript-sdk'
 import { LATEST_SAFE_VERSION } from '@/config/constants'
 import { sameAddress } from '@/utils/addresses'
 import type { MasterCopy } from '@/hooks/useMasterCopies'
 import { MasterCopyDeployer, useMasterCopies } from '@/hooks/useMasterCopies'
 import useSafeInfo from '@/hooks/useSafeInfo'
+import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+import InfoIcon from '@/public/images/notifications/info.svg'
 
 import UpdateSafeDialog from './UpdateSafeDialog'
 import ExternalLink from '@/components/common/ExternalLink'
+import Tooltip from '@mui/material/Tooltip'
 
 export const ContractVersion = ({ isGranted }: { isGranted: boolean }) => {
   const [masterCopies] = useMasterCopies()
@@ -22,7 +25,6 @@ export const ContractVersion = ({ isGranted }: { isGranted: boolean }) => {
   const needsUpdate = safe.implementationVersionState === ImplementationVersionState.OUTDATED
   const latestMasterContractVersion = LATEST_SAFE_VERSION
   const showUpdateDialog = safeMasterCopy?.deployer === MasterCopyDeployer.GNOSIS && needsUpdate
-
   const getSafeVersionUpdate = () => {
     return showUpdateDialog ? ` (there's a newer version: ${latestMasterContractVersion})` : ''
   }
@@ -42,6 +44,35 @@ export const ContractVersion = ({ isGranted }: { isGranted: boolean }) => {
           Unsupported contract
         </Typography>
       )}
+      <div style={{ marginTop: 15 }}>
+        {needsUpdate ? (
+          <Typography display="flex" alignItems="center">
+            Why should I upgrade?
+            <Tooltip
+              title="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."
+              placement="right-start"
+            >
+              <span>
+                <SvgIcon
+                  component={InfoIcon}
+                  inheritViewBox
+                  fontSize="small"
+                  color="border"
+                  sx={{
+                    verticalAlign: 'middle',
+                    ml: 0.5,
+                  }}
+                />
+              </span>
+            </Tooltip>
+          </Typography>
+        ) : (
+          <Typography display="flex" alignItems="center">
+            <CheckCircleIcon color="primary" sx={{ mr: 0.5 }} /> Latest version
+          </Typography>
+        )}
+      </div>
 
       {showUpdateDialog && isGranted && <UpdateSafeDialog />}
     </div>