Adding statistics SummaryCards component

src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import styled from 'styled-components'
+import { media } from 'theme/styles/media'
+
+import { Card, CardContent } from 'components/common/Card'
+import { TotalSummaryResponse } from '.'
+
+const Wrapper = styled.div`
+  display: grid;
+  grid-template-columns: 0.7fr 2.35fr;
+  grid-template-areas: 'one two';
+
+  > div:first-child {
+    justify-content: flex-end;
+  }
+`
+
+const WrapperDoubleContent = styled.div<{ column?: boolean }>`
+  display: flex;
+  flex-direction: ${({ column }): string => (column ? 'column' : 'row')};
+  justify-content: flex-start;
+  flex: 1;
+  gap: 3.5rem;
+
+  > div {
+    text-align: center;
+  }
+
+  ${media.mediumDown} {
+    flex-direction: column;
+  }
+`
+const CardRow = styled.div`
+  grid-area: one;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+`
+const WrapperTwo = styled.div`
+  grid-area: two;
+  display: flex;
+  flex: 1;
+`
+
+export function SummaryCards({ summaryData }: { summaryData: TotalSummaryResponse }): JSX.Element {
+  const { batchInfo } = summaryData
+
+  return (
+    <Wrapper>
+      <CardRow>
+        <Card>
+          <WrapperDoubleContent column>
+            <CardContent variant="3row" label1="Last Batch" value1={batchInfo.lastBatchDate} />
+            <CardContent variant="3row" label1="Batch ID" value1={batchInfo.batchId} />
+          </WrapperDoubleContent>
+        </Card>
+      </CardRow>
+      <WrapperTwo>
+        <CardRow>
+          <Card>
+            <CardContent variant="2row" label1="24h Transactions" value1="194" caption1="-3.45%" captionColor="red1" />
+          </Card>
+          <Card>
+            <CardContent variant="2row" label1="Total Tokens" value1="193" />
+          </Card>
+          <Card>
+            <CardContent variant="2row" label1="24h fees" value1="$33.3K" caption1="+1.03%" captionColor="green" />
+          </Card>
+          <Card>
+            <CardContent variant="2row" label1="30d Surplus" value1="$53.9K" caption1="+14.43%" captionColor="green" />
+          </Card>
+        </CardRow>
+      </WrapperTwo>
+    </Wrapper>
+  )
+}

src/apps/explorer/components/SummaryCardsWidget/index.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react'
+import { SummaryCards } from './SummaryCards'
+
+import summaryData from './summaryGraphResp.json'
+
+interface TotalSummary {
+  batchInfo: { lastBatchDate: string; batchId: string }
+  dailyTransactions: { now: number; before: string }
+  totalTokens: number
+  dailyFees: { now: string; before: string }
+  monthSurplus: string
+}
+
+export type TotalSummaryResponse = TotalSummary
+
+function useGetTotalSummary(): TotalSummaryResponse {
+  const [summary, setSummary] = useState<TotalSummaryResponse>({
+    batchInfo: { lastBatchDate: '', batchId: '' },
+    dailyTransactions: { now: 0, before: '' },
+    totalTokens: 0,
+    dailyFees: { now: '', before: '' },
+    monthSurplus: '',
+  })
+
+  useEffect(() => {
+    setSummary({ ...summaryData })
+  }, [])
+
+  return summary
+}
+
+export function SummaryCardsWidget(): JSX.Element {
+  const summary = useGetTotalSummary()
+
+  return <SummaryCards summaryData={summary} />
+}

src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json

@@ -0,0 +1,8 @@
+{
+
+  "batchInfo": { "lastBatchDate": "3m 42s Ago", "batchId": "fd3f932" },
+  "dailyTransactions": {"now": 194, "before": "+1.2%"},
+  "totalTokens": 193,
+  "dailyFees": {"now": "$33.3K", "before": "-3.23%"},
+  "monthSurplus": "$53.9K"
+}

src/apps/explorer/pages/Home/index.tsx

@@ -3,11 +3,12 @@ import { Search } from 'apps/explorer/components/common/Search'
 import { Wrapper as WrapperMod } from 'apps/explorer/pages/styled'
 import styled from 'styled-components'
 import { media } from 'theme/styles/media'
+import { SummaryCardsWidget } from 'apps/explorer/components/SummaryCardsWidget'
 
 const Wrapper = styled(WrapperMod)`
   max-width: 140rem;
   flex-flow: column wrap;
-  justify-content: center;
+  justify-content: flex-start;
   display: flex;
 
   > h1 {
@@ -23,9 +24,19 @@ const Wrapper = styled(WrapperMod)`
   }
 `
 
+const SummaryWrapper = styled.section`
+  display: grid;
+  /* grid-template-columns: 35fr 65fr; // There will be 2 sections */
+  grid-gap: 1 rem;
+  padding-bottom: 5rem;
+`
+
 export const Home: React.FC = () => {
   return (
     <Wrapper>
+      <SummaryWrapper>
+        <SummaryCardsWidget />
+      </SummaryWrapper>
       <h1>Search on CoW Protocol Explorer</h1>
       <Search className="home" />
     </Wrapper>

src/components/common/Card/Card.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { COLOURS } from 'styles'
+import { Theme } from 'theme'
+
+const { white, fadedGreyishWhite, blackLight } = COLOURS
+
+const DefaultCard = styled.div`
+  height: inherit;
+  min-width: 200px;
+  min-height: 100px;
+  background-color: #f5f5f5;
+  border-radius: 6px;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
+  margin: 10px;
+`
+
+const CardComponent = styled(DefaultCard)`
+  display: flex;
+  flex-direction: column;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+  background: ${({ theme }): string => (theme.mode == Theme.DARK ? fadedGreyishWhite : white)};
+  color: ${({ theme }): string => (theme.mode == Theme.DARK ? white : blackLight)};
+`
+
+// CARD CONTENT STYLES
+const CardContent = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 15px;
+  padding: 16px;
+  line-height: normal;
+`
+
+export interface CardBaseProps {
+  children?: React.ReactElement | string
+}
+
+/**
+ * Card component.
+ *
+ * An extensible content container.
+ */
+export const Card: React.FC<CardBaseProps> = ({ children, ...rest }) => {
+  return (
+    <CardComponent {...rest}>
+      <CardContent>{children}</CardContent>
+    </CardComponent>
+  )
+}

src/components/common/Card/index.tsx

@@ -1,63 +1,2 @@
-import React from 'react'
-import styled from 'styled-components'
-import Grid from '@material-ui/core/Grid'
-
-import { COLOURS } from 'styles'
-import { Theme } from 'theme'
-
-const { white, fadedGreyishWhite, blackLight } = COLOURS
-
-const DefaultCard = styled.div`
-  height: inherit;
-  min-width: 200px;
-  min-height: 100px;
-  background-color: #f5f5f5;
-  border-radius: 6px;
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
-  margin: 10px;
-`
-
-const CardComponent = styled(DefaultCard)`
-  display: flex;
-  flex-direction: column;
-  border-top-right-radius: 6px;
-  border-top-left-radius: 6px;
-  background: ${({ theme }): string => (theme.mode == Theme.DARK ? fadedGreyishWhite : white)};
-  color: ${({ theme }): string => (theme.mode == Theme.DARK ? white : blackLight)};
-`
-
-// CARD CONTENT STYLES
-const CardContent = styled.div`
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 15px;
-  padding: 16px;
-  line-height: normal;
-`
-
-type CardBreakdown = boolean | 1 | 'auto' | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined
-
-export interface CardBaseProps {
-  children?: React.ReactElement | string
-  xs?: CardBreakdown
-  sm?: CardBreakdown
-  md?: CardBreakdown
-  lg?: CardBreakdown
-}
-
-/**
- * Card component.
- *
- * An extensible content container.
- */
-export const Card: React.FC<CardBaseProps> = ({ children, xs = 12, sm = 6, md = 4, lg = 3, ...rest }) => {
-  return (
-    <Grid item xs={xs} sm={sm} md={md} lg={lg}>
-      <CardComponent {...rest}>
-        <CardContent>{children}</CardContent>
-      </CardComponent>
-    </Grid>
-  )
-}
+export * from './Card'
+export * from './CardContent'

src/components/common/CardRow/CardRow.stories.tsx

@@ -4,9 +4,8 @@ import { Story, Meta } from '@storybook/react/types-6-0'
 
 import { GlobalStyles, ThemeToggler } from 'storybook/decorators'
 
-import { Card } from '../Card/index'
+import { Card, CardContent } from 'components/common/Card'
 import { CardRow, CardRowProps } from '.'
-import { CardContent } from '../Card/CardContent'
 
 import QuestionIcon from '../../../assets/img/question1.svg'
 
@@ -46,7 +45,7 @@ const Template: Story<CardRowProps> = (args) => (
       <Card>
         <span>Dummy Card</span>
       </Card>
-      <Card xs={12} sm={12} md={8} lg={6}>
+      <Card>
         <CardContent
           variant="double"
           direction="row"

src/components/common/CardRow/index.tsx

@@ -1,13 +1,19 @@
 import React from 'react'
-import Grid from '@material-ui/core/Grid'
+import styled from 'styled-components'
 
 export type CardRowProps = { children?: React.ReactElement }
 
+const Wrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+`
+
 /**
  * CardRow component.
  *
  * Place cards side-by-side
  */
 export const CardRow: React.FC<CardRowProps> = ({ children }) => {
-  return <Grid container>{children}</Grid>
+  return <Wrapper>{children}</Wrapper>
 }