Skip to content

Commit

Permalink
fix: Adjust overview widget on dashboard for new design
Browse files Browse the repository at this point in the history
  • Loading branch information
@usame-algan
usame-algan committed Nov 9, 2023
1 parent b2ba82d commit bf63987
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 58 deletions.
3 changes: 3 additions & 0 deletions public/images/common/arrow-se.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/images/common/arrow-top-right.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
189 changes: 131 additions & 58 deletions src/components/dashboard/Overview/Overview.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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,
Expand All @@ -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}>
Expand All @@ -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>
)}
Expand Down

0 comments on commit bf63987

Please sign in to comment.