base layout

icons/globe.svg

+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.2 19.4c3.972 0 7.2-3.228 7.2-7.2S16.172 5 12.2 5A7.206 7.206 0 0 0 5 12.2c0 3.972 3.228 7.2 7.2 7.2Zm-5.574-4.332 2.926-.023c.325 1.173.871 2.311 1.614 3.333a6.28 6.28 0 0 1-4.54-3.31Zm3.67-4.842h3.646a9.853 9.853 0 0 1 .023 3.867l-3.67.023a9.544 9.544 0 0 1 0-3.89Zm1.823 7.885a9.323 9.323 0 0 1-1.591-3.066l3.193-.023a9.813 9.813 0 0 1-1.602 3.089Zm.929.302a10.24 10.24 0 0 0 1.637-3.403l3.124-.023a6.286 6.286 0 0 1-4.761 3.426ZM18.47 12.2c0 .65-.105 1.277-.279 1.858l-3.286.023c.232-1.277.22-2.578-.023-3.855h3.263c.209.615.325 1.289.325 1.974Zm-.72-2.903h-3.09a10.675 10.675 0 0 0-1.613-3.31 6.244 6.244 0 0 1 4.703 3.31Zm-4.053 0H10.54a9.593 9.593 0 0 1 1.58-3.008 9.595 9.595 0 0 1 1.58 3.008Zm-2.532-3.275a10.317 10.317 0 0 0-1.59 3.275H6.648a6.249 6.249 0 0 1 4.517-3.275Zm-1.811 4.204a10.685 10.685 0 0 0-.012 3.89l-3.1.023a6.173 6.173 0 0 1 .012-3.914h3.1Z" fill="currentColor"/>
+</svg>

pages/_document.tsx

@@ -13,6 +13,10 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
             rel="stylesheet"
           />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
+            rel="stylesheet"
+          />
           <link rel="icon" sizes="32x32" type="image/png" href="/static/favicon-32x32.png"/>
           <link rel="icon" sizes="16x16" type="image/png"href="/static/favicon-16x16.png"/>
           <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/>

theme/foundations/borders.ts

@@ -4,7 +4,8 @@ const borders = {
     sm: '4px',
     base: '8px',
     md: '12px',
-    lg: '24px',
+    lg: '16px',
+    xl: '24px',
     full: '9999px',
   },
 };

ui/home/indicators/ChainIndicatorChart.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+const ChainIndicatorChart = () => {
+  return <Box bgColor="orange.100" minH="300px"/>;
+};
+
+export default ChainIndicatorChart;

ui/home/indicators/ChainIndicatorItem.tsx

+import { Text, Flex, Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  name: string;
+  value: string;
+  isSelected: boolean;
+  icon: React.ReactNode;
+  onClick: (name: string) => void;
+}
+
+const ChainIndicatorItem = ({ name, value, icon, isSelected, onClick }: Props) => {
+  const bgColor = useColorModeValue('white', 'gray.900');
+
+  const handleClick = React.useCallback(() => {
+    onClick(name);
+  }, [ name, onClick ]);
+
+  return (
+    <Flex
+      alignItems="center"
+      columnGap={ 3 }
+      p={ 4 }
+      as="li"
+      borderRadius="md"
+      cursor="pointer"
+      onClick={ handleClick }
+      bgColor={ isSelected ? bgColor : 'inherit' }
+      boxShadow={ isSelected ? 'xl' : 'none' }
+      zIndex={ isSelected ? 1 : 'initial' }
+      _hover={{
+        bgColor,
+        zIndex: 1,
+      }}
+    >
+      { icon }
+      <Box>
+        <Text fontFamily="Poppins" fontWeight={ 500 }>{ name }</Text>
+        <Text variant="secondary" fontWeight={ 600 }>{ value }</Text>
+      </Box>
+    </Flex>
+  );
+};
+
+export default React.memo(ChainIndicatorItem);

ui/home/indicators/ChainIndicators.tsx

+import { Box, Flex, Icon, Text, Tooltip, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import appConfig from 'configs/app/config';
+import globeIcon from 'icons/globe.svg';
+import infoIcon from 'icons/info.svg';
+import txIcon from 'icons/transactions.svg';
+
+import ChainIndicatorChart from './ChainIndicatorChart';
+import ChainIndicatorItem from './ChainIndicatorItem';
+
+const INDICATORS = [
+  {
+    name: 'Daily transactions',
+    value: '1,531.14 M',
+    icon: <Icon as={ txIcon } boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>,
+    hint: `The total daily number of transactions on the blockchain for the last month.`,
+  },
+  {
+    name: `${ appConfig.network.currency.symbol } price`,
+    value: '$0.998566',
+    // todo_tom change to TokenLogo after token-transfers branch merge
+    icon: <Icon as={ globeIcon } boxSize={ 6 } bgColor="#6A5DCC" borderRadius="base" color="white"/>,
+    hint: `${ appConfig.network.currency.symbol } daily price in USD.`,
+  },
+  {
+    name: 'Market cap',
+    value: '$379M',
+    icon: <Icon as={ globeIcon } boxSize={ 6 } bgColor="#6A5DCC" borderRadius="base" color="white"/>,
+    // eslint-disable-next-line max-len
+    hint: 'The total market value of a cryptocurrency\'s circulating supply. It is analogous to the free-float capitalization in the stock market. Market Cap = Current Price x Circulating Supply.',
+  },
+];
+
+const ChainIndicators = () => {
+  const [ selectedIndicator, selectIndicator ] = React.useState(INDICATORS[0].name);
+
+  const bgColor = useColorModeValue('white', 'gray.900');
+  const listBgColor = useColorModeValue('gray.50', 'black');
+
+  const indicator = INDICATORS.find(({ name }) => name === selectedIndicator);
+
+  return (
+    <Flex p={ 8 } borderRadius="lg" boxShadow="lg" bgColor={ bgColor } columnGap={ 12 } w="100%" alignItems="flex-start">
+      <Flex flexGrow={ 1 } flexDir="column">
+        <Flex alignItems="center">
+          <Text fontWeight={ 500 } fontFamily="Poppins" fontSize="lg">{ indicator?.name }</Text>
+          { indicator?.hint && (
+            <Tooltip label={ indicator.hint } maxW="300px">
+              <Box display="inline-flex" cursor="pointer" ml={ 1 }>
+                <Icon as={ infoIcon } boxSize={ 4 }/>
+              </Box>
+            </Tooltip>
+          ) }
+        </Flex>
+        <Text fontWeight={ 600 } fontFamily="Poppins" fontSize="48px" lineHeight="48px" mt={ 3 } mb={ 4 }>{ indicator?.value }</Text>
+        <ChainIndicatorChart/>
+      </Flex>
+      <Flex flexShrink={ 0 } flexDir="column" as="ul" p={ 3 } borderRadius="lg" bgColor={ listBgColor } rowGap={ 3 }>
+        { INDICATORS.map((indicator) => (
+          <ChainIndicatorItem
+            key={ indicator.name }
+            { ...indicator }
+            isSelected={ selectedIndicator === indicator.name }
+            onClick={ selectIndicator }
+          />
+        )) }
+      </Flex>
+    </Flex>
+  );
+};
+
+export default ChainIndicators;

ui/pages/Home.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import appConfig from 'configs/app/config';
 import * as cookies from 'lib/cookies';
 import useToast from 'lib/hooks/useToast';
+import ChainIndicators from 'ui/home/indicators/ChainIndicators';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
@@ -48,11 +49,12 @@ const Home = () => {
 
   return (
     <Page>
-      <VStack gap={ 4 } alignItems="flex-start" maxW="800px">
+      <VStack gap={ 4 } alignItems="flex-start" maxW="1000px">
         <PageTitle text={
           `Home Page for ${ appConfig.network.name } network`
         }/>
         <Button colorScheme="red" onClick={ checkSentry }>Check Sentry</Button>
+        <ChainIndicators/>
         { /* will be deleted when we move to new CI */ }
         { isFormVisible && (
           <>