Add mobile view

src/pages/TopStatsPage/CommonTopTable.tsx

@@ -21,23 +21,16 @@ const TableContainer = styled(Box)`
   flex: 0 0 calc(50% - 16px);
   margin-left: 8px;
   margin-right: 8px;
-  min-width: 500px;
 
   @media (max-width: 1024px) {
     flex: 0 0 calc(100% - 16px);
     margin-bottom: 0.75rem;
   }
-
-  @media (max-width: 768px) {
-    flex: 0 0 calc(100% - 16px);
-    margin-top: 0.75rem;
-    margin-bottom: 0.75rem;
-  }
 `
 
 const LogoWrapper = styled(Box)`
   svg path {
-    fill: #00AEE9
+    fill: #00AEE9;
   }
 `
 
@@ -95,7 +88,7 @@ const TopTableRow = (props: TopTableRowProps) => {
             <Text size={'small'}>{rank}</Text>
         </Box>
         <Box width={columnsWidth[1]}>
-            <Address address={address} hideCopyBtn={true} isShortEllipsis={true} />
+            <Address address={address} hideCopyBtn={true} isShortEllipsis={true} style={{ fontSize: 'small' }} />
         </Box>
         <Box width={columnsWidth[2]} direction={'row'} align={'center'} gap={'6px'}>
             {isOneTransfer && <LogoWrapper>
@@ -113,16 +106,19 @@ export const TopTable = (props: TopTableProps) => {
     return <TableContainer
         border={{ size: '1px' }}
         round={'8px'}
-        overflow={'hidden'}
+        // overflow={'hidden'}
         margin={{ bottom: '16px' }}
         style={{ opacity: props.isLoading ? 0.5 : 1 }}
+        background={'background'}
     >
-        <Box>
-            <Box pad={'8px'} border={{ size: '1px', side: 'bottom' }} background={'backgroundBackEmpty'}>
-                <Text size={'small'}>{props.title}</Text>
+        <Box style={{ overflowX: 'auto' }}>
+            <Box style={{ minWidth: '550px' }}>
+                <Box pad={'8px'} border={{ size: '1px', side: 'bottom' }} background={'backgroundBackEmpty'}>
+                    <Text size={'small'}>{props.title}</Text>
+                </Box>
+                <TopTableHeader columns={props.columns} />
+                {props.items.map(item => <TopTableRow key={item.address} item={item} />)}
             </Box>
-            <TopTableHeader columns={props.columns} />
-            {props.items.map(item => <TopTableRow key={item.address} item={item} />)}
         </Box>
     </TableContainer>
 }

src/pages/TopStatsPage/Transaction.tsx

@@ -1,10 +1,11 @@
 import React, {useEffect, useState} from 'react'
-import {Box, Spinner} from "grommet";
+import {Box, Spinner, Tip, Text} from "grommet";
 import {TopTable} from "./CommonTopTable";
 import {getTopMetricsByType} from "../../api/client";
 import {MetricsTopItem, MetricsTopPeriod, MetricsTopType} from "../../types";
 import {OptionsSelect} from "./OptionsSelect";
 import dayjs from "dayjs";
+import {TipContent} from "../../components/ui";
 
 const defaultMetricsItem = {
     [MetricsTopType.topOneSender]: [] as MetricsTopItem[],
@@ -12,6 +13,7 @@ const defaultMetricsItem = {
     [MetricsTopType.topTxsCountSent]: [] as MetricsTopItem[],
     [MetricsTopType.topTxsCountReceived]: [] as MetricsTopItem[],
 }
+
 const defaultCache = {
     [MetricsTopPeriod.d1]: {...defaultMetricsItem},
     [MetricsTopPeriod.d3]: {...defaultMetricsItem},
@@ -85,40 +87,45 @@ export const TransactionTopStats = () => {
                     {isLoading && <Spinner size={'small'} />}
                 </Box>
             </Box>
-            <Box pad={'8px'}>
-                {dateFrom && dateTo &&
-                    `${dateFrom.format('DD MMM')} - ${dateTo.format('DD MMM')}`
-                }
-            </Box>
+            {!isLoading && dateFrom && dateTo &&
+                <Box pad={{ right: '4px' }}>
+                    <Tip
+                        dropProps={{ align: { bottom: "top" }}}
+                        content={<TipContent showArrow={true} message={`Last update: ${dateTo.format('DD MMM HH:mm:ss')}`} />}
+                    >
+                        <Text size={'small'}>{dateFrom.format('DD MMM')} - {dateTo.format('DD MMM')}</Text>
+                    </Tip>
+                </Box>
+            }
         </Box>
         <Box
             wrap
             direction={'row'}
-            justify={'center'}
+            justify={'start'}
             align={'center'}
         >
             <TopTable
                 items={oneSenders}
                 title={'Top ONE Senders'}
-                columns={['Rank', 'Address', 'Total ONE', 'Share']}
+                columns={['Rank', 'Address', 'Total ONE', 'Percentage']}
                 isLoading={isLoading}
             />
             <TopTable
                 items={oneReceivers}
                 title={'Top ONE Receivers'}
-                columns={['Rank', 'Address', 'Total ONE', 'Share']}
+                columns={['Rank', 'Address', 'Total ONE', 'Percentage']}
                 isLoading={isLoading}
             />
             <TopTable
                 items={txsSenders}
                 title={'Top Txs Count Sent'}
-                columns={['Rank', 'Address', 'Total Txs', 'Share']}
+                columns={['Rank', 'Address', 'Total Txs', 'Percentage']}
                 isLoading={isLoading}
             />
             <TopTable
                 items={txsReceivers}
                 title={'Top Txs Count Received'}
-                columns={['Rank', 'Address', 'Total Txs', 'Share']}
+                columns={['Rank', 'Address', 'Total Txs', 'Percentage']}
                 isLoading={isLoading}
             />
         </Box>