From bf639876808a079f34d306bab483dd67d7fbb2b1 Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Thu, 9 Nov 2023 13:51:52 +0100
Subject: [PATCH] fix: Adjust overview widget on dashboard for new design

---
 public/images/common/arrow-se.svg             |   3 +
 public/images/common/arrow-top-right.svg      |   3 +
 .../dashboard/Overview/Overview.tsx           | 189 ++++++++++++------
 3 files changed, 137 insertions(+), 58 deletions(-)
 create mode 100644 public/images/common/arrow-se.svg
 create mode 100644 public/images/common/arrow-top-right.svg

diff --git a/public/images/common/arrow-se.svg b/public/images/common/arrow-se.svg
new file mode 100644
index 0000000000..b94a60e1f2
--- /dev/null
+++ b/public/images/common/arrow-se.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.52621 12.4915H11.6919C12.1545 12.4915 12.5295 12.8665 12.5295 13.3291C12.5295 13.7916 12.1545 14.1666 11.6919 14.1666L7.50421 14.1666C7.27293 14.1666 7.06354 14.0729 6.91198 13.9213C6.76041 13.7698 6.66667 13.5604 6.66667 13.3291V9.14137C6.66667 8.67881 7.04165 8.30383 7.50421 8.30383C7.96677 8.30383 8.34175 8.67881 8.34175 9.14137V11.3071L13.5702 6.0786C13.8973 5.75152 14.4276 5.75152 14.7547 6.0786C15.0818 6.40568 15.0818 6.93599 14.7547 7.26307L9.52621 12.4915Z" fill="#121312"/>
+</svg>
diff --git a/public/images/common/arrow-top-right.svg b/public/images/common/arrow-top-right.svg
new file mode 100644
index 0000000000..6ec66e8b9e
--- /dev/null
+++ b/public/images/common/arrow-top-right.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2355 6.84341H9.63669C9.08161 6.84341 8.63164 6.39344 8.63164 5.83836C8.63164 5.28329 9.08161 4.83331 9.63669 4.83331H14.6619C14.9395 4.83331 15.1907 4.94581 15.3726 5.12769C15.5545 5.30956 15.667 5.56083 15.667 5.83836V10.8636C15.667 11.4187 15.217 11.8687 14.6619 11.8687C14.1069 11.8687 13.6569 11.4187 13.6569 10.8636V8.26477L7.38272 14.5389C6.99022 14.9314 6.35386 14.9314 5.96136 14.5389C5.56887 14.1464 5.56887 13.5101 5.96136 13.1176L12.2355 6.84341Z" fill="#121312"/>
+</svg>
diff --git a/src/components/dashboard/Overview/Overview.tsx b/src/components/dashboard/Overview/Overview.tsx
index 445b860a04..dfe7b20b9e 100644
--- a/src/components/dashboard/Overview/Overview.tsx
+++ b/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,8 +143,12 @@ 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>
@@ -124,43 +156,84 @@ const Overview = (): ReactElement => {
               </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>
         )}