cowprotocol · ramirotw · May 19, 2022 · May 12, 2022 · May 13, 2022 · May 13, 2022
diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx
@@ -13,58 +13,34 @@ import { CopyButton } from 'components/common/CopyButton'
 import { LinkWithPrefixNetwork } from 'components/common/LinkWithPrefixNetwork'
 import { numberFormatter } from './utils'
 
-const BatchInfoHeight = '19.6rem'
+const BatchInfoHeight = '21.6rem'
 const DESKTOP_TEXT_SIZE = 1.8 // rem
 const MOBILE_TEXT_SIZE = 1.65 // rem
 
-const WrapperCardRow = styled(CardRow)`
-  max-width: 70%;
-
-  ${media.mobile} {
-    max-width: 100%;
-  }
-`
-
 const DoubleContentSize = css`
   min-height: ${BatchInfoHeight};
 `
-const WrapperColumn = styled.div`
-  /* Equivalent to use lg={8} MUI grid system */
-  flex-grow: 0;
-  max-width: 66.666667%;
-  flex-basis: 66.666667%;
-
-  > div {
-    margin: 1rem;
-    max-height: ${BatchInfoHeight};
-    outline: 0.1rem solid ${({ theme }): string => theme.borderPrimary};
+const WrapperColumnChart = styled(Card)`
+  background: transparent;
+  & > div:first-child {
+    all: unset;
+    border: 1px solid ${({ theme }): string => theme.borderPrimary};
     border-radius: 0.4rem;
     overflow: hidden;
   }
-
-  ${media.mediumDownMd} {
-    flex-grow: 0;
-    max-width: 100%;
-    flex-basis: 100%;
-  }
 `
+
 const DoubleCardStyle = css`
   ${DoubleContentSize}
 
-  ${media.mediumDownMd} {
-    min-height: 16rem;
+  ${media.xSmallDown}, ${media.tinyDown} {
+    min-height: 15rem;
   }
 `
 const WrappedDoubleCard = styled(Card)`
   ${DoubleCardStyle}
 `
 
-const CardTransactions = styled(Card)`
-  ${media.mediumDownMd} {
-    ${DoubleCardStyle}
-  }
-`
-
 const WrapperDoubleContent = styled.div`
   display: flex;
   flex-direction: column;
@@ -81,45 +57,47 @@ interface SummaryCardsProps {
 }
 
 export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX.Element {
-  const { batchInfo, dailyTransactions, totalTokens, dailyFees, isLoading } = summaryData || {}
+  const { batchInfo, dailyTransactions, totalTokens, volumeUsd, dailyFees, isLoading } = summaryData || {}
   const isDesktop = useMediaBreakpoint(['xl', 'lg'])
   const valueTextSize = isDesktop ? DESKTOP_TEXT_SIZE : MOBILE_TEXT_SIZE
   const rowsByCard = isDesktop ? '2row' : '3row'
   const diffTransactions = (dailyTransactions && calcDiff(dailyTransactions.now, dailyTransactions.before)) || 0
   const diffFees = (dailyFees && calcDiff(dailyFees.now, dailyFees.before)) || 0
 
   return (
-    <WrapperCardRow>
-      <>
-        <WrapperColumn>{children}</WrapperColumn>
-        <WrappedDoubleCard xs={6} lg={4}>
-          <WrapperDoubleContent>
-            <CardContent
-              variant="3row"
-              label1="Last Batch"
-              value1={batchInfo && formatDistanceToNowStrict(batchInfo.lastBatchDate, { addSuffix: true })}
-              loading={isLoading}
-              valueSize={valueTextSize}
-            />
-            <CardContent
-              variant={rowsByCard}
-              label1="Batch ID"
-              value1={
-                batchInfo && (
-                  <>
-                    <LinkWithPrefixNetwork to={`/tx/${batchInfo.batchId}`}>
-                      {abbreviateString(batchInfo?.batchId, 6, 4)}
-                    </LinkWithPrefixNetwork>
-                    <CopyButton heightIcon={1.35} text={batchInfo?.batchId || ''} />
-                  </>
-                )
-              }
-              loading={isLoading}
-              valueSize={valueTextSize}
-            />
-          </WrapperDoubleContent>
-        </WrappedDoubleCard>
-        <CardTransactions xs={6} lg={4}>
+    <CardRow xs={12} lg={12}>
+      <WrapperColumnChart xs={12} sm={8} md={8} lg={5}>
+        {children}
+      </WrapperColumnChart>
+      <WrappedDoubleCard xs={12} sm={4} md={4} lg={3}>
+        <WrapperDoubleContent>
+          <CardContent
+            variant="3row"
+            label1="Last Batch"
+            value1={batchInfo && formatDistanceToNowStrict(batchInfo.lastBatchDate, { addSuffix: true })}
+            loading={isLoading}
+            valueSize={valueTextSize}
+          />
+          <CardContent
+            variant={rowsByCard}
+            label1="Batch ID"
+            value1={
+              batchInfo && (
+                <>
+                  <LinkWithPrefixNetwork to={`/tx/${batchInfo.batchId}`}>
+                    {abbreviateString(batchInfo?.batchId, 6, 4)}
+                  </LinkWithPrefixNetwork>
+                  <CopyButton heightIcon={1.35} text={batchInfo?.batchId || ''} />
+                </>
+              )
+            }
+            loading={isLoading}
+            valueSize={valueTextSize}
+          />
+        </WrapperDoubleContent>
+      </WrappedDoubleCard>
+      <CardRow xs={12} sm={12} md={12} lg={4}>
+        <Card xs={6} sm={3} md={3} lg={6}>
           <CardContent
             variant={rowsByCard}
             label1="24h Transactions"
@@ -129,8 +107,8 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX.
             loading={isLoading}
             valueSize={valueTextSize}
           />
-        </CardTransactions>
-        <Card xs={6} lg={4}>
+        </Card>
+        <Card xs={6} sm={3} md={3} lg={6}>
           <CardContent
             variant="2row"
             label1="Total Tokens"
@@ -139,7 +117,7 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX.
             valueSize={valueTextSize}
           />
         </Card>
-        <Card xs={6} lg={4}>
+        <Card xs={6} sm={3} md={3} lg={6}>
           <CardContent
             variant={rowsByCard}
             label1="24h Fees"
@@ -150,19 +128,16 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX.
             valueSize={valueTextSize}
           />
         </Card>
-        {/** Surplus is not yet available */}
-        {/* <Card>
-            <CardContent
-              variant="2row"
-              label1="30d Surplus"
-              value1={monthSurplus.now}
-              caption1={monthSurplus.before}
-              captionColor="green"
-              loading={isLoading}
-              valueSize={valueTextSize}
-            />
-          </Card> */}
-      </>
-    </WrapperCardRow>
+        <Card xs={6} sm={3} md={3} lg={6}>
+          <CardContent
+            variant={rowsByCard}
+            label1="Total Volume"
+            value1={`$${numberFormatter(volumeUsd || 0)}`}
+            loading={isLoading}
+            valueSize={valueTextSize}
+          />
+        </Card>
+      </CardRow>
+    </CardRow>
   )
 }
diff --git a/src/apps/explorer/components/SummaryCardsWidget/VolumeChart/VolumeChart.styled.ts b/src/apps/explorer/components/SummaryCardsWidget/VolumeChart/VolumeChart.styled.ts
@@ -11,7 +11,7 @@ const frameAnimation = keyframes`
 `
 export const ChartSkeleton = styled.div<{ backgroundColor?: 'grey' | 'orange' }>`
   height: 100%;
-  min-height: 19.6rem;
+  min-height: 21.6rem;
   border: 1px solid ${({ theme }): string => theme.borderPrimary};
   border-radius: 0.4rem;
   overflow: hidden;
@@ -130,14 +130,14 @@ export const WrapperPeriodButton = styled.button<{ active: boolean }>`
   color: ${({ theme, active }): string => (active ? theme.orange : theme.white)};
   background-color: ${({ theme, active }): string => (active ? theme.orangeOpacity : theme.bg1)};
   border: 1px solid ${({ theme, active }): string => (active ? theme.orange : theme.bg2)};
-  padding: 0.5rem 1rem;
+  padding: 0;
   border-radius: 0.6rem;
   margin: 0 0.5rem;
   height: 2.5rem;
   width: 3.8rem;
 
   ${media.mobile} {
-    padding: 0.5rem 0.8rem;
+    padding: 0;
     margin: 0 0.5rem;
     font-size: 1.2rem;
     width: 3rem;

diff --git a/src/apps/explorer/components/SummaryCardsWidget/VolumeChart/VolumeChart.tsx b/src/apps/explorer/components/SummaryCardsWidget/VolumeChart/VolumeChart.tsx
@@ -17,7 +17,7 @@ import { VolumePeriod } from './VolumeChartWidget'
 import { numberFormatter } from '../utils'
 import { useNetworkId } from 'state/network'
 
-const DEFAULT_CHART_HEIGHT = 196 // px
+const DEFAULT_CHART_HEIGHT = 214 // px
 const COLOR_POSITIVE_DIFFERENCE = 'rgba(0, 196, 110, 0.01)'
 const COLOR_NEGATIVE_DIFFERENCE = 'rgba(255, 48, 91, 0.01)'
 const COLOR_POSITIVE_DIFFERENCE_LINE = 'rgb(0, 196, 111)'

diff --git a/src/apps/explorer/components/SummaryCardsWidget/VolumeChart/VolumeChartWidget.tsx b/src/apps/explorer/components/SummaryCardsWidget/VolumeChart/VolumeChartWidget.tsx
@@ -5,7 +5,7 @@ import { useGetVolumeData } from './useGetVolumeData'
 import { PeriodButton, VolumeChart } from './VolumeChart'
 
 const WrapperVolumeChart = styled.div`
-  height: 19.6rem;
+  height: 21.4rem;
 `
 export enum VolumePeriod {
   DAILY = '1D',

diff --git a/src/apps/explorer/components/SummaryCardsWidget/useGetSummaryData.ts b/src/apps/explorer/components/SummaryCardsWidget/useGetSummaryData.ts
@@ -19,12 +19,13 @@ interface TotalSummary {
   dailyTransactions?: PastAndPresentValue
   totalTokens?: number
   dailyFees?: PastAndPresentValue
+  volumeUsd?: number
 }
 
 type SummaryQuery = {
   settlements: Array<{ firstTradeTimestamp: string; txHash: string }>
   hourlyTotals: Array<{ orders: string; feesUsd: string }>
-  totals: Array<{ tokens: string }>
+  totals: Array<{ tokens: string; volumeUsd: string }>
 }
 
 function buildSummary(data: SummaryQuery): TotalSummary {
@@ -47,12 +48,14 @@ function buildSummary(data: SummaryQuery): TotalSummary {
   }
 
   const totalTokens = Number(data.totals[0].tokens)
+  const volumeUsd = Number(data.totals[0].volumeUsd)
 
   return {
     batchInfo,
     dailyTransactions,
     dailyFees,
     totalTokens,
+    volumeUsd,
   }
 }
 
@@ -104,6 +107,7 @@ const summaryQuery = gql`
     }
     totals {
       tokens
+      volumeUsd
     }
   }
 `
diff --git a/src/apps/explorer/components/TokensTableWidget/index.tsx b/src/apps/explorer/components/TokensTableWidget/index.tsx
@@ -29,8 +29,12 @@ const WrapperExtraComponents = styled.div`
 `
 
 const TableWrapper = styled.div`
-  margin-top: 5rem;
-  max-width: 90vw;
+  max-width: 100vw;
+  margin: 5rem 0.8rem 0 0.8rem;
+  ${media.mobile} {
+    max-width: 90vw;
+    margin: 3rem 0 0 0;
+  }
   div.tab-content {
     padding: 0 !important;
     table {

diff --git a/src/components/common/Card/Card.tsx b/src/components/common/Card/Card.tsx
@@ -10,14 +10,15 @@ const { white, fadedGreyishWhite, blackLight } = COLOURS
 
 const DefaultCard = styled.div`
   height: inherit;
-  min-width: 15rem;
-  min-height: 100px;
+  min-width: 13rem;
+  min-height: 10rem;
   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: 1rem;
-  ${media.xSmallDown} {
+  margin: 0.8rem;
+  ${media.mobile} {
     min-width: 14rem;
+    min-height: 9.8rem;
   }
 `
 
@@ -36,8 +37,8 @@ const CardContent = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 15px;
-  padding: 16px;
+  font-size: 1.5rem;
+  padding: 1rem;
   line-height: normal;
   ${media.xSmallDown} {
     padding: 0.2rem;