diff --git a/src/components/dashboard/Overview/Overview.tsx b/src/components/dashboard/Overview/Overview.tsx index dfe7b20b9e..2a2e5caeb4 100644 --- a/src/components/dashboard/Overview/Overview.tsx +++ b/src/components/dashboard/Overview/Overview.tsx @@ -10,7 +10,6 @@ import type { ReactElement } 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, Divider, Grid, Skeleton, Typography } from '@mui/material' import { Card, WidgetBody, WidgetContainer } from '../styled' import useSafeInfo from '@/hooks/useSafeInfo' @@ -24,42 +23,22 @@ 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; - margin-bottom: var(--space-2); -` - -const StyledText = styled(Typography)` - margin-top: 8px; - font-size: 24px; - font-weight: bold; -` - -const NetworkLabelContainer = styled.div` - position: absolute; - top: var(--space-3); - right: var(--space-3); - - & span { - bottom: auto; - } -` - const ValueSkeleton = () => const SkeletonOverview = ( - + - - - + + - + - + + + @@ -87,8 +66,8 @@ const SkeletonOverview = ( - - + + ) @@ -98,7 +77,7 @@ const Overview = (): ReactElement => { const router = useRouter() const { safeLoading, safeLoaded } = useSafeInfo() const { balances, loading: balancesLoading } = useVisibleBalances() - const [nfts] = useCollectibles() + const [nfts, , nftsLoading] = useCollectibles() const chain = useCurrentChain() const { chainId } = chain || {} const { setTxFlow } = useContext(TxModalContext) @@ -125,6 +104,7 @@ const Overview = (): ReactElement => { const nftsCount = useMemo(() => (nfts ? `${nfts.next ? '>' : ''}${nfts.results.length}` : ''), [nfts]) const isInitialState = !safeLoaded && !safeLoading + const isLoading = safeLoading || balancesLoading || nftsLoading || isInitialState const handleOnSend = () => { setTxFlow(, undefined, false) @@ -138,10 +118,10 @@ const Overview = (): ReactElement => { - {safeLoading || isInitialState ? ( + {isLoading ? ( SkeletonOverview ) : ( - + @@ -203,8 +183,8 @@ const Overview = (): ReactElement => { - - + + {rampSafeApp && (