fix: Adjust overview widget on dashboard for new design

cypress/e2e/pages/dashboard.pages.js

@@ -5,6 +5,8 @@ const transactionQueueStr = 'Pending transactions'
 const noTransactionStr = 'This Safe has no queued transactions'
 const overviewStr = 'Overview'
 const viewAssetsStr = 'View assets'
+const sendStr = 'Send'
+const receiveStr = 'Receive'
 const tokensStr = 'Tokens'
 const nftStr = 'NFTs'
 const viewAllStr = 'View all'
@@ -27,11 +29,10 @@ export function verifyOverviewWidgetData() {
 
   cy.get('@overviewSection').within(() => {
     // Prefix is separated across elements in EthHashInfo
-    cy.contains(constants.SEPOLIA_TEST_SAFE_5).should('exist')
     cy.get('h2').contains('Overview')
-    cy.get(`a[href="${constants.BALANCE_URL}${encodeURIComponent(constants.SEPOLIA_TEST_SAFE_5)}"]`).contains(
-      viewAssetsStr,
-    )
+    cy.get(`a[href="${constants.BALANCE_URL}${encodeURIComponent(constants.SEPOLIA_TEST_SAFE_5)}"]`).contains('Tokens')
+    cy.get('button').contains(sendStr)
+    cy.get('button').contains(receiveStr)
   })
 }
 

src/components/dashboard/Overview/Overview.tsx

@@ -1,20 +1,28 @@
+import QrCodeButton from '@/components/sidebar/QrCodeButton'
+import { TxModalContext } from '@/components/tx-flow'
+import NewTxMenu from '@/components/tx-flow/flows/NewTx'
+import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
+import { OVERVIEW_EVENTS, trackEvent } from '@/services/analytics'
+import { useAppSelector } from '@/store'
+import { selectCurrency } from '@/store/settingsSlice'
+import { formatCurrency } from '@/utils/formatNumber'
 import type { ReactElement } from 'react'
-import { useMemo } from 'react'
+import { useContext, useMemo } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import styled from '@emotion/styled'
-import { Box, Button, Grid, Skeleton, Typography } from '@mui/material'
+import { Box, Button, Divider, Grid, Skeleton, Typography } from '@mui/material'
 import { Card, WidgetBody, WidgetContainer } from '../styled'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { useCurrentChain } from '@/hooks/useChains'
-import SafeIcon from '@/components/common/SafeIcon'
 import ChainIndicator from '@/components/common/ChainIndicator'
-import EthHashInfo from '@/components/common/EthHashInfo'
 import { AppRoutes } from '@/config/routes'
-import useSafeAddress from '@/hooks/useSafeAddress'
 import useCollectibles from '@/hooks/useCollectibles'
 import type { UrlObject } from 'url'
 import { useVisibleBalances } from '@/hooks/useVisibleBalances'
+import AddIcon from '@mui/icons-material/Add'
+import ArrowIconNW from '@/public/images/common/arrow-top-right.svg'
+import ArrowIconSE from '@/public/images/common/arrow-se.svg'
 
 const IdenticonContainer = styled.div`
   position: relative;
@@ -37,56 +45,71 @@ const NetworkLabelContainer = styled.div`
   }
 `
 
-const ValueSkeleton = () => <Skeleton variant="text" width={30} />
+const ValueSkeleton = () => <Skeleton variant="text" width={20} />
 
 const SkeletonOverview = (
   <Card>
     <Grid container>
       <Grid item xs={12}>
         <IdenticonContainer>
-          <Skeleton variant="circular" width="48px" height="48px" />
+          <Skeleton variant="text" width={100} height={21} />
+          <Skeleton variant="text" width={120} height={30} />
         </IdenticonContainer>
+        <Divider sx={{ mb: 1 }} />
 
-        <Box my={4}>
-          <Typography fontSize="lg">
-            <Skeleton variant="text" height={28} />
-          </Typography>
-          <Skeleton variant="text" height={21} />
-        </Box>
         <NetworkLabelContainer>
           <Skeleton variant="text" width="80px" />
         </NetworkLabelContainer>
       </Grid>
     </Grid>
     <Grid container>
-      <Grid item xs={3}>
-        <Typography color="border.main" variant="body2">
-          Tokens
+      <Grid item container xs={6} gap={2}>
+        <Typography
+          color="border.main"
+          variant="caption"
+          fontWeight="bold"
+          display="flex"
+          gap={1}
+          textTransform="uppercase"
+        >
+          <ValueSkeleton /> Tokens
         </Typography>
-        <StyledText fontSize="lg">
-          <ValueSkeleton />
-        </StyledText>
-      </Grid>
-      <Grid item xs={3}>
-        <Typography color="border.main" variant="body2">
-          NFTs
+        <Typography
+          color="border.main"
+          variant="caption"
+          fontWeight="bold"
+          display="flex"
+          gap={1}
+          textTransform="uppercase"
+        >
+          <ValueSkeleton /> NFTs
         </Typography>
-        <StyledText fontSize="lg">
-          <ValueSkeleton />
-        </StyledText>
       </Grid>
     </Grid>
+    <Grid container mt={3} gap={1}>
+      <Skeleton variant="rounded" width="100px" height="35px" />
+      <Skeleton variant="rounded" width="100px" height="35px" />
+    </Grid>
   </Card>
 )
 
 const Overview = (): ReactElement => {
+  const currency = useAppSelector(selectCurrency)
   const router = useRouter()
-  const safeAddress = useSafeAddress()
-  const { safe, safeLoading, safeLoaded } = useSafeInfo()
+  const { safeLoading, safeLoaded } = useSafeInfo()
   const { balances, loading: balancesLoading } = useVisibleBalances()
   const [nfts] = useCollectibles()
   const chain = useCurrentChain()
   const { chainId } = chain || {}
+  const { setTxFlow } = useContext(TxModalContext)
+  const [apps] = useRemoteSafeApps()
+
+  const fiatTotal = useMemo(
+    () => (balances.fiatTotal ? formatCurrency(balances.fiatTotal, currency) : ''),
+    [currency, balances.fiatTotal],
+  )
+
+  const rampSafeApp = apps?.find((app) => app.name === 'Ramp Network')
 
   const assetsLink: UrlObject = {
     pathname: AppRoutes.balances.index,
@@ -103,6 +126,11 @@ const Overview = (): ReactElement => {
 
   const isInitialState = !safeLoaded && !safeLoading
 
+  const handleOnSend = () => {
+    setTxFlow(<NewTxMenu />, undefined, false)
+    trackEvent(OVERVIEW_EVENTS.NEW_TRANSACTION)
+  }
+
   return (
     <WidgetContainer>
       <Typography component="h2" variant="subtitle1" fontWeight={700} mb={2}>
@@ -115,52 +143,97 @@ const Overview = (): ReactElement => {
         ) : (
           <Card>
             <Grid container pb={2}>
-              <SafeIcon address={safeAddress} threshold={safe.threshold} owners={safe.owners.length} size={48} />
-
+              <Grid item>
+                <Typography variant="body2" color="primary.light">
+                  Total asset value
+                </Typography>
+                <Typography variant="h2">{fiatTotal}</Typography>
+              </Grid>
               <Grid item xs />
 
               <Grid item>
                 <ChainIndicator chainId={chainId} inline />
               </Grid>
             </Grid>
 
-            <Box mt={2} mb={4}>
-              {safeAddress ? (
-                <EthHashInfo showAvatar={false} address={safeAddress} shortAddress={false} showCopyButton hasExplorer />
-              ) : (
-                <Skeleton />
-              )}
-            </Box>
+            <Divider />
 
-            <Grid container>
-              <Grid item xs={3}>
+            <Grid container pt="12px">
+              <Grid item container xs={6} gap={1}>
                 <Link href={assetsLink} passHref>
-                  <Typography color="border.main" variant="body2">
-                    Tokens
-                  </Typography>
-                  <StyledText fontSize="lg">{balancesLoading ? <ValueSkeleton /> : tokenCount}</StyledText>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      borderRight: '1px solid',
+                      borderColor: ({ palette }) => palette.border.light,
+                      gap: 0.5,
+                      pr: 1,
+                    }}
+                  >
+                    <Typography variant="caption" component="span">
+                      {balancesLoading ? <ValueSkeleton /> : tokenCount}
+                    </Typography>{' '}
+                    <Typography
+                      variant="caption"
+                      component="span"
+                      color="border.main"
+                      textTransform="uppercase"
+                      fontWeight="bold"
+                    >
+                      Tokens
+                    </Typography>
+                  </Box>
                 </Link>
-              </Grid>
 
-              <Grid item xs={3}>
                 <Link href={nftsLink} passHref>
-                  <Typography color="border.main" variant="body2">
-                    NFTs
-                  </Typography>
-                  <StyledText fontSize="lg">{nftsCount || <ValueSkeleton />}</StyledText>
+                  <Box display="flex" pr={1} gap={0.5}>
+                    <Typography variant="caption" component="span">
+                      {nftsCount || <ValueSkeleton />}
+                    </Typography>{' '}
+                    <Typography
+                      variant="caption"
+                      component="span"
+                      color="border.main"
+                      textTransform="uppercase"
+                      fontWeight="bold"
+                    >
+                      NFTs
+                    </Typography>
+                  </Box>
                 </Link>
               </Grid>
-              <Grid item xs />
-
-              <Grid item>
-                <Box display="flex" height={1} alignItems="flex-end" justifyContent="flex-end">
-                  <Link href={assetsLink} passHref legacyBehavior>
-                    <Button size="medium" variant="contained" color="primary">
-                      View assets
+            </Grid>
+            <Grid item>
+              <Box display="flex" mt={3} gap={1}>
+                {rampSafeApp && (
+                  <Link
+                    href={{
+                      pathname: AppRoutes.apps.open,
+                      query: { safe: router.query.safe, appUrl: rampSafeApp.url },
+                    }}
+                    passHref
+                    legacyBehavior
+                  >
+                    <Button size="small" variant="contained" color="primary" startIcon={<AddIcon />}>
+                      Buy crypto
                     </Button>
                   </Link>
-                </Box>
-              </Grid>
+                )}
+                <Button
+                  onClick={handleOnSend}
+                  size="small"
+                  variant="outlined"
+                  color="primary"
+                  startIcon={<ArrowIconNW />}
+                >
+                  Send
+                </Button>
+                <QrCodeButton>
+                  <Button size="small" variant="outlined" color="primary" startIcon={<ArrowIconSE />}>
+                    Receive
+                  </Button>
+                </QrCodeButton>
+              </Box>
             </Grid>
           </Card>
         )}