fix: update mobile Homepage statistics

AstraProtocol · Oct 14, 2022 · af450df · af450df
1 parent b914fbd
commit af450df
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 50 deletions.
diff --git a/components/Card/Background/BackgroundCard.tsx b/components/Card/Background/BackgroundCard.tsx
@@ -7,6 +7,7 @@ interface Props {
 	classes?: string
 	backgroundCardBlur?: boolean
 	backgroundColor?: boolean
+	radius?: boolean
 	border?: boolean
 }
 
@@ -15,12 +16,13 @@ const BackgroundCard = ({
 	classes,
 	backgroundCardBlur = true,
 	backgroundColor = true,
+	radius = true,
 	border = true
 }: Props) => {
 	return (
 		<div
 			className={clsx(
-				'radius-lg',
+				radius && 'radius-lg',
 				{
 					[styles.background]: backgroundColor,
 					'border border-base': border,

diff --git a/views/homepage/ChainStatistics.tsx b/views/homepage/ChainStatistics.tsx
@@ -1,4 +1,6 @@
+import { useMobileLayout } from '@astraprotocol/astra-ui'
 import StaticsCard from 'components/Card/Layout/StaticsCard'
+import Row from 'components/Grid/Row'
 import { Icon } from 'utils/enum'
 import { formatCurrencyValue, formatGasValue } from 'utils/helper'
 
@@ -10,27 +12,28 @@ interface Props {
 }
 
 const ChainStatistics = ({ classes, commonStatsData, estimateCountedData, gasTracker }: Props) => {
+	const { isMobile } = useMobileLayout('small')
 	return (
-		<div className="row md-wrap">
+		<Row classes="md-wrap" style={{ alignItem: 'space-between' }}>
 			<StaticsCard
-				classes="col col-4"
+				classes={isMobile ? 'margin-bottom-lg' : 'margin-right-xl'}
 				content={formatCurrencyValue(commonStatsData?.token_stats?.market_cap)}
 				icon={Icon.Chart}
 				title="Market Cap"
 			/>
 			<StaticsCard
-				classes="col col-4"
+				classes={isMobile ? 'margin-bottom-lg' : 'margin-right-xl'}
 				content={formatGasValue(gasTracker?.average)}
 				icon={Icon.Gas}
 				title="Gas Tracker"
 			/>
 			<StaticsCard
-				classes="col col-4"
+				classes={isMobile ? 'margin-bottom-lg' : ''}
 				content={commonStatsData?.transaction_stats?.number_of_transactions}
 				icon={Icon.Analytics}
 				title="Daily Transactions"
 			/>
-		</div>
+		</Row>
 	)
 }
 

diff --git a/views/homepage/Chart.tsx b/views/homepage/Chart.tsx
@@ -1,3 +1,4 @@
+import { useMobileLayout } from '@astraprotocol/astra-ui'
 import API_LIST from 'api/api_list'
 import {
 	CategoryScale,
@@ -73,6 +74,8 @@ function getTxHistoryData(transactionHistory) {
 }
 
 const OverviewChart = ({}) => {
+	const { isMobile } = useMobileLayout('small')
+
 	const _fetchCondition = key => {
 		switch (key) {
 			case 'market_history_price':
@@ -235,7 +238,7 @@ const OverviewChart = ({}) => {
 		)
 	}
 
-	return <Line className={styles.chart} height={100} options={options} data={data} />
+	return <Line className={styles.chart} height={isMobile ? 190 : 150} options={options} data={data} />
 }
 
 export default OverviewChart
diff --git a/views/homepage/MarketStatistics.tsx b/views/homepage/MarketStatistics.tsx
@@ -1,6 +1,8 @@
+import { useMobileLayout } from '@astraprotocol/astra-ui'
 import API_LIST from 'api/api_list'
 import clsx from 'clsx'
 import StaticsCard from 'components/Card/Layout/StaticsCard'
+import numeral from 'numeral'
 import useSWR from 'swr'
 import { Icon } from 'utils/enum'
 
@@ -15,6 +17,7 @@ function getLastestBlock(latestBlock: LatestBlock) {
 }
 
 const MarketStatistics = ({ classes, commonStatsData, estimateCountedData }: Props) => {
+	const { isMobile } = useMobileLayout('small')
 	const _fetchCondition = key => {
 		switch (key) {
 			case 'latest_block':
@@ -27,35 +30,37 @@ const MarketStatistics = ({ classes, commonStatsData, estimateCountedData }: Pro
 	const latestBlock = getLastestBlock(latestBlockRaw)
 
 	return (
-		<div className="md-wrap">
-			<div className={clsx('row margin-bottom-2xl')}>
+		<div>
+			<div className={clsx('row md-wrap', !isMobile && 'margin-bottom-2xl')}>
 				<StaticsCard
-					classes="margin-right-xl"
+					classes={isMobile ? 'margin-bottom-lg' : 'margin-right-xl'}
 					contentClasses="money-2sm"
 					content={`${commonStatsData?.average_block_time} seconds`}
 					icon={Icon.Recovery}
 					title="Average Block Time"
 				/>
 
 				<StaticsCard
-					content={estimateCountedData?.total_transactions}
+					classes={isMobile ? 'margin-bottom-lg' : ''}
+					content={numeral(estimateCountedData?.total_transactions).format('0,0')}
 					contentClasses="money-2sm"
 					icon={Icon.Analytics}
 					title="Total Transactions"
 				/>
 			</div>
 
-			<div className={clsx('row')}>
+			<div className={clsx('row md-wrap')}>
 				<StaticsCard
-					classes="margin-right-xl"
+					classes={isMobile ? 'margin-bottom-lg' : 'margin-right-xl'}
 					contentClasses="money-2sm"
-					content={latestBlock || estimateCountedData?.total_blocks}
+					content={numeral(latestBlock || estimateCountedData?.total_blocks).format('0,0')}
 					icon={Icon.Database}
 					title="Total Blocks"
 				/>
 
 				<StaticsCard
-					content={estimateCountedData?.wallet_addresses}
+					classes={isMobile ? 'margin-bottom-lg' : ''}
+					content={numeral(estimateCountedData?.wallet_addresses).format('0,0')}
 					contentClasses="money-2sm"
 					icon={Icon.Wallet}
 					title="Wallet Addresses"

diff --git a/views/homepage/Overview.tsx b/views/homepage/Overview.tsx
@@ -1,6 +1,8 @@
+import { useMobileLayout } from '@astraprotocol/astra-ui'
 import API_LIST from 'api/api_list'
 import clsx from 'clsx'
 import BackgroundCard from 'components/Card/Background/BackgroundCard'
+import Row from 'components/Grid/Row'
 import Logo from 'components/Logo'
 import Image from 'next/image'
 import useSWR from 'swr'
@@ -23,9 +25,7 @@ function getGasAvgData(gasAvgData): GasTracker {
 }
 
 const Overview = () => {
-	// const { isMobile } = useMobileLayout(940)
-	// console.log(isMobile)
-	const isMobile = true
+	const { isMobile } = useMobileLayout('small')
 
 	const _fetchCondition = key => {
 		switch (key) {
@@ -57,31 +57,28 @@ const Overview = () => {
 			<div className={styles.moon2}>
 				<Image alt="moon2" src={'/images/background/moon2.png'} layout="fill" />
 			</div>
-			<BackgroundCard>
-				<div className="row md-wrap">
-					<div className={clsx('col col-5', styles.leftBlock)}>
-						<div className={clsx('row', 'block-ver-center')}>
-							<div className={clsx('col col-6')}>
-								<Logo text="Astra" type="transparent" />
-							</div>
-							<div className={clsx('col col-6')}>
-								<Price />
-							</div>
-						</div>
-						<div className={styles.separateBlock} />
-						<MarketStatistics estimateCountedData={estimateCountedData} commonStatsData={commonStatsData} />
-					</div>
-					<div className={clsx('col', styles.centerBlock)} />
-					<div className={clsx('col col-7', styles.rightBlock)}>
-						<OverviewChart />
-						<ChainStatistics
-							gasTracker={gasAvgData}
-							estimateCountedData={estimateCountedData}
-							commonStatsData={commonStatsData}
-						/>
-					</div>
-				</div>
-			</BackgroundCard>
+			<div className="row md-wrap">
+				<BackgroundCard
+					radius={false}
+					classes={clsx(isMobile && 'margin-bottom-md', styles.leftBlock, isMobile && styles.leftMobileBlock)}
+				>
+					<Row style={{ justifyContent: 'space-between' }}>
+						<Logo text="Astra" type="transparent" />
+						<Price />
+					</Row>
+					<div className={styles.separateBlock} />
+					<MarketStatistics estimateCountedData={estimateCountedData} commonStatsData={commonStatsData} />
+				</BackgroundCard>
+				{!isMobile && <div className={clsx('col', styles.centerBlock)} />}
+				<BackgroundCard classes={styles.rightBlock} radius={false}>
+					<OverviewChart />
+					<ChainStatistics
+						gasTracker={gasAvgData}
+						estimateCountedData={estimateCountedData}
+						commonStatsData={commonStatsData}
+					/>
+				</BackgroundCard>
+			</div>
 		</div>
 	)
 }

diff --git a/views/homepage/style.module.scss b/views/homepage/style.module.scss
@@ -15,21 +15,18 @@
 			background-color: var(--border-color);
 		}
 	}
+	.leftMobileBlock {
+		border-top-left-radius: var(----radius-lg) solid var(--border-color);
+	}
 
 	.centerBlock {
-		position: absolute;
-		top: var(--offset-lg);
-		left: 40.5%;
-		height: 90%;
-		// margin: var(--offset-lg) var(--offset-sm);
 		width: 1px;
 		background-color: var(--border-color);
-		// color: var(--border-color);
 	}
 
 	.rightBlock {
 		position: relative;
-		margin: var(--offset-lg) var(--offset-lg);
+		padding: var(--offset-2xl) var(--offset-lg);
 		.chart {
 			margin: var(--offset-lg) 0;
 		}