From c7bf5b21c45c8973a5882e2fe7d17463bf4a3995 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Mon, 4 Apr 2022 22:21:04 -0300 Subject: [PATCH 01/19] Adding grid for only 3 cards --- .../SummaryCardsWidget/SummaryCards.tsx | 98 +++++++++++++++++++ .../components/SummaryCardsWidget/index.tsx | 43 ++++++++ .../SummaryCardsWidget/summaryGraphResp.json | 8 ++ .../components/common/ShimmerBar/index.tsx | 30 ++++++ src/apps/explorer/pages/Home/index.tsx | 13 ++- src/components/common/Card/Card.tsx | 54 ++++++++++ src/components/common/Card/CardContent.tsx | 14 ++- src/components/common/Card/index.tsx | 65 +----------- .../common/CardRow/CardRow.stories.tsx | 5 +- src/components/common/CardRow/index.tsx | 10 +- 10 files changed, 266 insertions(+), 74 deletions(-) create mode 100644 src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx create mode 100644 src/apps/explorer/components/SummaryCardsWidget/index.tsx create mode 100644 src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json create mode 100644 src/apps/explorer/components/common/ShimmerBar/index.tsx create mode 100644 src/components/common/Card/Card.tsx diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx new file mode 100644 index 000000000..ec7633d7b --- /dev/null +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -0,0 +1,98 @@ +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, dailyTransactions, totalTokens, dailyFees, isLoading } = summaryData + + return ( + + + + + + + + + + + + + + + + + + + + + {/** Surdpuls is not yet available */} + {/* + + */} + + + + ) +} diff --git a/src/apps/explorer/components/SummaryCardsWidget/index.tsx b/src/apps/explorer/components/SummaryCardsWidget/index.tsx new file mode 100644 index 000000000..bd4d66d71 --- /dev/null +++ b/src/apps/explorer/components/SummaryCardsWidget/index.tsx @@ -0,0 +1,43 @@ +import React, { useEffect, useState } from 'react' +import { SummaryCards } from './SummaryCards' + +import summaryData from './summaryGraphResp.json' + +const DELAY_SECONDS = 3 // Emulating API request + +interface TotalSummary { + batchInfo: { lastBatchDate: string; batchId: string } + dailyTransactions: { now: number; before: string } + totalTokens: number + dailyFees: { now: string; before: string } + monthSurplus: { now: string; before: string } +} + +export type TotalSummaryResponse = TotalSummary & { + isLoading: boolean +} + +function useGetTotalSummary(): TotalSummaryResponse { + const [summary, setSummary] = useState({ + batchInfo: { lastBatchDate: '', batchId: '' }, + dailyTransactions: { now: 0, before: '' }, + totalTokens: 0, + dailyFees: { now: '', before: '' }, + monthSurplus: { now: '', before: '' }, + isLoading: true, + }) + + useEffect(() => { + const timer = setTimeout(() => setSummary({ ...summaryData, isLoading: false }), DELAY_SECONDS * 1000) + + return (): void => clearTimeout(timer) + }, []) + + return summary +} + +export function StatsSummaryCardsWidget(): JSX.Element { + const summary = useGetTotalSummary() + + return +} diff --git a/src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json b/src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json new file mode 100644 index 000000000..5c720a0f4 --- /dev/null +++ b/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": {"now": "$53.9K", "before": "14.49%"} +} \ No newline at end of file diff --git a/src/apps/explorer/components/common/ShimmerBar/index.tsx b/src/apps/explorer/components/common/ShimmerBar/index.tsx new file mode 100644 index 000000000..6461be4a9 --- /dev/null +++ b/src/apps/explorer/components/common/ShimmerBar/index.tsx @@ -0,0 +1,30 @@ +import styled, { keyframes } from 'styled-components' + +const ShimmerKeyframe = keyframes` + 0% { + background-position: 0px top; + } + 90% { + background-position: 300px top; + } + 100% { + background-position: 300px top; + } +` + +const ShimmerBar = styled.div` + width: 100%; + height: 12px; + border-radius: 2px; + color: white; + background: ${({ theme }): string => + `${theme.greyOpacity} -webkit-gradient(linear, 100% 0, 0 0, from(${theme.greyOpacity}), color-stop(0.5, ${theme.borderPrimary}), to(${theme.gradient1}))`}; + background-position: -5rem top; + background-repeat: no-repeat; + -webkit-animation-name: ${ShimmerKeyframe}; + -webkit-animation-duration: 1.3s; + -webkit-animation-iteration-count: infinite; + -webkit-background-size: 5rem 100%; +` + +export default ShimmerBar diff --git a/src/apps/explorer/pages/Home/index.tsx b/src/apps/explorer/pages/Home/index.tsx index 497c8715c..41e89a3be 100644 --- a/src/apps/explorer/pages/Home/index.tsx +++ b/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 { StatsSummaryCardsWidget } 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 ( + + +

Search on CoW Protocol Explorer

 diff --git a/src/components/common/Card/Card.tsx b/src/components/common/Card/Card.tsx new file mode 100644 index 000000000..e591a7ffa --- /dev/null +++ b/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 = ({ children, ...rest }) => { + return ( + + {children} + + ) +} diff --git a/src/components/common/Card/CardContent.tsx b/src/components/common/Card/CardContent.tsx index 32197b088..c4c9a5154 100644 --- a/src/components/common/Card/CardContent.tsx +++ b/src/components/common/Card/CardContent.tsx @@ -1,6 +1,8 @@ import React from 'react' import styled from 'styled-components' +import ShimmerBar from 'apps/explorer/components/common/ShimmerBar' + export type statusType = 'success' | 'danger' export interface CardContentProps { @@ -8,10 +10,10 @@ export interface CardContentProps { direction?: string icon1?: React.ReactElement label1: string - value1: string + value1: string | number valueSize?: number labelWidth?: number - caption1?: string + caption1?: string | number captionColor?: string hint1?: string hintColor?: string @@ -20,6 +22,7 @@ export interface CardContentProps { value2?: string caption2?: string hint2?: string + loading?: boolean } const CardBody = styled.div<{ @@ -98,6 +101,7 @@ export const CardContent: React.FC = ({ value2, caption2, hint2, + loading, }): JSX.Element => { return ( = ({ {label1}

-

{value1}

- {caption1 && ( + {loading ? :

{value1}

} + {!loading && caption1 && ( {caption1} {hint1} @@ -123,7 +127,7 @@ export const CardContent: React.FC = ({ )}
- {label2 && ( + {!loading && label2 && (

{icon2 && {icon2}  } diff --git a/src/components/common/Card/index.tsx b/src/components/common/Card/index.tsx index 9c5a9dfd7..68ae5954a 100644 --- a/src/components/common/Card/index.tsx +++ b/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 = ({ children, xs = 12, sm = 6, md = 4, lg = 3, ...rest }) => { - return ( - - - {children} - - - ) -} +export * from './Card' +export * from './CardContent' diff --git a/src/components/common/CardRow/CardRow.stories.tsx b/src/components/common/CardRow/CardRow.stories.tsx index 7df39f5ce..1db014ada 100644 --- a/src/components/common/CardRow/CardRow.stories.tsx +++ b/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 = (args) => ( Dummy Card - + = ({ children }) => { - return {children} + return {children} } From 66d91268ef7703afbbf17b9e107a626832234dcf Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Wed, 6 Apr 2022 22:25:56 -0300 Subject: [PATCH 02/19] Changing layout style --- .../SummaryCardsWidget/SummaryCards.tsx | 112 +++++++++--------- .../components/SummaryCardsWidget/index.tsx | 19 ++- src/apps/explorer/pages/Home/index.tsx | 11 +- 3 files changed, 80 insertions(+), 62 deletions(-) diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx index ec7633d7b..168b88293 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -6,19 +6,26 @@ 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; - } + justify-content: center; + align-items: center; ` +const WrapperRow = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +` +const WrapperColumn = styled.div<{ flexValue?: string }>` + display: flex; + flex-direction: column; + flex-basis: ${({ flexValue }): string => (flexValue ? flexValue : 'auto')}; +` const WrapperDoubleContent = styled.div<{ column?: boolean }>` display: flex; flex-direction: ${({ column }): string => (column ? 'column' : 'row')}; - justify-content: flex-start; + justify-content: stretch; + align-items: stretch; flex: 1; gap: 3.5rem; @@ -30,58 +37,54 @@ const WrapperDoubleContent = styled.div<{ column?: boolean }>` 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 { +interface SummaryCardsProps { + summaryData: TotalSummaryResponse + children: React.ReactNode +} + +export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX.Element { const { batchInfo, dailyTransactions, totalTokens, dailyFees, isLoading } = summaryData return ( - - - - - - - - - - + + {children} + - - - - + + + + - - - - {/** Surdpuls is not yet available */} - {/* + + + + + + + + + + + + + {/** Surdpuls is not yet available */} + {/* */} - - + ) } diff --git a/src/apps/explorer/components/SummaryCardsWidget/index.tsx b/src/apps/explorer/components/SummaryCardsWidget/index.tsx index bd4d66d71..a88cdaf1b 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/index.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/index.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react' +import styled from 'styled-components' import { SummaryCards } from './SummaryCards' import summaryData from './summaryGraphResp.json' @@ -36,8 +37,24 @@ function useGetTotalSummary(): TotalSummaryResponse { return summary } +const Wrapper = styled.div` + display: flex; + flex: 1; +` +const VolumeChart = styled.div` + border: 1px red solid; + min-height: 21rem; + min-width: 40rem; +` + export function StatsSummaryCardsWidget(): JSX.Element { const summary = useGetTotalSummary() - return + return ( + + + + + + ) } diff --git a/src/apps/explorer/pages/Home/index.tsx b/src/apps/explorer/pages/Home/index.tsx index 41e89a3be..7f91b8c2c 100644 --- a/src/apps/explorer/pages/Home/index.tsx +++ b/src/apps/explorer/pages/Home/index.tsx @@ -10,6 +10,7 @@ const Wrapper = styled(WrapperMod)` flex-flow: column wrap; justify-content: flex-start; display: flex; + padding-top: 10rem; > h1 { justify-content: center; @@ -25,20 +26,18 @@ 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; + display: flex; + padding-top: 10rem; ` export const Home: React.FC = () => { return ( +

Search on CoW Protocol Explorer

+ -

Search on CoW Protocol Explorer

- ) } From c888621ab2041e051bfaa57e16609656d974ea60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Thu, 7 Apr 2022 14:36:01 -0300 Subject: [PATCH 03/19] fix desktop layout --- .../components/SummaryCardsWidget/SummaryCards.tsx | 4 ++-- .../explorer/components/SummaryCardsWidget/index.tsx | 9 ++++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx index 168b88293..ff6c6a00a 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -18,7 +18,7 @@ const WrapperRow = styled.div` ` const WrapperColumn = styled.div<{ flexValue?: string }>` display: flex; - flex-direction: column; + flex-direction: row; flex-basis: ${({ flexValue }): string => (flexValue ? flexValue : 'auto')}; ` const WrapperDoubleContent = styled.div<{ column?: boolean }>` @@ -49,7 +49,7 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX. return ( - {children} + {children} diff --git a/src/apps/explorer/components/SummaryCardsWidget/index.tsx b/src/apps/explorer/components/SummaryCardsWidget/index.tsx index a88cdaf1b..62a4b6f34 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/index.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/index.tsx @@ -40,11 +40,14 @@ function useGetTotalSummary(): TotalSummaryResponse { const Wrapper = styled.div` display: flex; flex: 1; + justify-content: center; ` const VolumeChart = styled.div` - border: 1px red solid; - min-height: 21rem; - min-width: 40rem; + background: #28f3282c; + border-radius: 0.4rem; + min-height: 12rem; + min-width: 42rem; + margin: 1rem; ` export function StatsSummaryCardsWidget(): JSX.Element { From 0ea42a89af37b3103f4e988b124a43b44f450926 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Thu, 7 Apr 2022 14:49:08 -0300 Subject: [PATCH 04/19] fix column --- .../explorer/components/SummaryCardsWidget/SummaryCards.tsx | 4 ++-- src/apps/explorer/components/SummaryCardsWidget/index.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx index ff6c6a00a..168b88293 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -18,7 +18,7 @@ const WrapperRow = styled.div` ` const WrapperColumn = styled.div<{ flexValue?: string }>` display: flex; - flex-direction: row; + flex-direction: column; flex-basis: ${({ flexValue }): string => (flexValue ? flexValue : 'auto')}; ` const WrapperDoubleContent = styled.div<{ column?: boolean }>` @@ -49,7 +49,7 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX. return ( - {children} + {children} diff --git a/src/apps/explorer/components/SummaryCardsWidget/index.tsx b/src/apps/explorer/components/SummaryCardsWidget/index.tsx index 62a4b6f34..515df6adb 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/index.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/index.tsx @@ -45,7 +45,7 @@ const Wrapper = styled.div` const VolumeChart = styled.div` background: #28f3282c; border-radius: 0.4rem; - min-height: 12rem; + min-height: 16rem; min-width: 42rem; margin: 1rem; ` From 942eeefdd61be259ae3bd2da0a918c1c97d72bb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Thu, 7 Apr 2022 15:17:06 -0300 Subject: [PATCH 05/19] fix mobile layout v1 --- .../components/SummaryCardsWidget/SummaryCards.tsx | 4 ++++ src/apps/explorer/components/SummaryCardsWidget/index.tsx | 8 ++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx index 168b88293..553b8ab61 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -15,6 +15,10 @@ const WrapperRow = styled.div` flex-direction: row; flex-wrap: wrap; width: 100%; + + ${media.mediumDown} { + flex-flow: column wrap; + } ` const WrapperColumn = styled.div<{ flexValue?: string }>` display: flex; diff --git a/src/apps/explorer/components/SummaryCardsWidget/index.tsx b/src/apps/explorer/components/SummaryCardsWidget/index.tsx index 515df6adb..ce8ea631f 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/index.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/index.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from 'react' import styled from 'styled-components' import { SummaryCards } from './SummaryCards' +import { media } from 'theme/styles/media' import summaryData from './summaryGraphResp.json' @@ -45,9 +46,12 @@ const Wrapper = styled.div` const VolumeChart = styled.div` background: #28f3282c; border-radius: 0.4rem; - min-height: 16rem; - min-width: 42rem; + height: 16rem; + width: 42rem; margin: 1rem; + ${media.smallScreen} { + width: 32rem; + } ` export function StatsSummaryCardsWidget(): JSX.Element { From 477448fa458213ac360838ba0057aefefa81417b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Fri, 8 Apr 2022 18:01:02 -0300 Subject: [PATCH 06/19] fix mobile layout v2 --- .../SummaryCardsWidget/SummaryCards.tsx | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx index 553b8ab61..411bda101 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -20,6 +20,20 @@ const WrapperRow = styled.div` flex-flow: column wrap; } ` +const WrapperRow2 = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + + ${media.mediumDown} { + /* to improve and use 3 columns */ + div { + min-width: 28%; + padding: 0; + } + } +` const WrapperColumn = styled.div<{ flexValue?: string }>` display: flex; flex-direction: column; @@ -38,7 +52,8 @@ const WrapperDoubleContent = styled.div<{ column?: boolean }>` } ${media.mediumDown} { - flex-direction: column; + flex-direction: row; + justify-content: space-evenly; } ` @@ -63,7 +78,7 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX. - + */} - + ) } From d5e173c743db31db63fcfb4bcb32ebe5ac72e6f5 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Mon, 11 Apr 2022 16:52:08 -0300 Subject: [PATCH 07/19] Know the resolution --- .../SummaryCardsWidget/SummaryCards.tsx | 13 +++++++++-- src/utils/mediaQueries.ts | 22 ++++++++++++++----- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx index 411bda101..f7751b2a4 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -1,7 +1,13 @@ -import React from 'react' +import React, { useState } from 'react' import styled from 'styled-components' import { media } from 'theme/styles/media' +import { + getMatchingScreenSize, + subscribeToScreenSizeChange, + MediumDownQueries, + TypeMediaQueries, +} from 'utils/mediaQueries' import { Card, CardContent } from 'components/common/Card' import { TotalSummaryResponse } from '.' @@ -64,11 +70,14 @@ interface SummaryCardsProps { export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX.Element { const { batchInfo, dailyTransactions, totalTokens, dailyFees, isLoading } = summaryData + const [resolution, setResolution] = useState(getMatchingScreenSize()) + subscribeToScreenSizeChange(() => setResolution(getMatchingScreenSize())) + const isMediumResolution = MediumDownQueries.includes(resolution) return ( - {children} + {isMediumResolution && {children}} diff --git a/src/utils/mediaQueries.ts b/src/utils/mediaQueries.ts index 3a4888efa..9c2409ee8 100644 --- a/src/utils/mediaQueries.ts +++ b/src/utils/mediaQueries.ts @@ -1,30 +1,40 @@ import { Command } from 'types' +export enum TypeMediaQueries { + XL = 'xl', + LG = 'lg', + MD = 'md', + SM = 'sm', + XS = 'xs', +} + +export const MediumDownQueries = [TypeMediaQueries.MD, TypeMediaQueries.SM, TypeMediaQueries.XS] + export const MEDIA_QUERY_MATCHES = [ // must be in descending order for .find to match from largest to smallest // as sm will also match for xl and lg, for example { - name: 'xl', + name: TypeMediaQueries.XL, query: '(min-width:1200px)', }, { - name: 'lg', + name: TypeMediaQueries.LG, query: '(min-width:992px)', }, { - name: 'md', + name: TypeMediaQueries.MD, query: '(min-width:768px)', }, { - name: 'sm', + name: TypeMediaQueries.SM, query: '(min-width:576px)', }, // anything smaller -- xs ] -const DEFAULT_QUERY_NAME = 'xs' +const DEFAULT_QUERY_NAME = TypeMediaQueries.XS -export const getMatchingScreenSize = (): string => +export const getMatchingScreenSize = (): TypeMediaQueries => MEDIA_QUERY_MATCHES.find(({ query }) => window.matchMedia(query).matches)?.name || DEFAULT_QUERY_NAME export const MEDIA_QUERIES = MEDIA_QUERY_MATCHES.map(({ query }) => query) From 2d93399ebc7c1c40556db9a7dccf76fecc71a414 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Tue, 12 Apr 2022 02:09:07 -0300 Subject: [PATCH 08/19] render when is mobile --- .../SummaryCardsWidget/SummaryCards.tsx | 140 +++++++++++------- .../components/SummaryCardsWidget/index.tsx | 12 +- src/apps/explorer/pages/Home/index.tsx | 4 + src/components/common/Card/Card.tsx | 2 +- src/components/common/Card/CardContent.tsx | 2 +- src/utils/mediaQueries.ts | 9 +- 6 files changed, 109 insertions(+), 60 deletions(-) diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx index f7751b2a4..d076a47de 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import styled from 'styled-components' import { media } from 'theme/styles/media' @@ -9,7 +9,7 @@ import { TypeMediaQueries, } from 'utils/mediaQueries' import { Card, CardContent } from 'components/common/Card' -import { TotalSummaryResponse } from '.' +import { BatchInfo, TotalSummaryResponse } from '.' const Wrapper = styled.div` justify-content: center; @@ -22,21 +22,20 @@ const WrapperRow = styled.div` flex-wrap: wrap; width: 100%; - ${media.mediumDown} { - flex-flow: column wrap; + > div { + min-width: 20rem; } ` -const WrapperRow2 = styled.div` - display: flex; - flex-direction: row; - flex-wrap: wrap; + +const BlockCards = styled.div` + display: grid; + grid-template-columns: 2fr 2fr 2fr; width: 100%; ${media.mediumDown} { - /* to improve and use 3 columns */ - div { - min-width: 28%; - padding: 0; + grid-template-columns: 1fr 1fr; + > div { + min-height: 14.4rem; } } ` @@ -44,21 +43,24 @@ const WrapperColumn = styled.div<{ flexValue?: string }>` display: flex; flex-direction: column; flex-basis: ${({ flexValue }): string => (flexValue ? flexValue : 'auto')}; + justify-content: center; + align-items: center; ` const WrapperDoubleContent = styled.div<{ column?: boolean }>` display: flex; - flex-direction: ${({ column }): string => (column ? 'column' : 'row')}; + flex-direction: column; justify-content: stretch; align-items: stretch; flex: 1; gap: 3.5rem; + min-width: 17rem; > div { text-align: center; } ${media.mediumDown} { - flex-direction: row; + gap: 2rem; justify-content: space-evenly; } ` @@ -68,51 +70,85 @@ interface SummaryCardsProps { children: React.ReactNode } +export function cardBlock(batchInfo: BatchInfo, isLoading: boolean, valueTextSize: number): JSX.Element { + return ( + + + + + + + ) +} + export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX.Element { const { batchInfo, dailyTransactions, totalTokens, dailyFees, isLoading } = summaryData const [resolution, setResolution] = useState(getMatchingScreenSize()) - subscribeToScreenSizeChange(() => setResolution(getMatchingScreenSize())) - const isMediumResolution = MediumDownQueries.includes(resolution) + const isMediumAndBelowResolution = MediumDownQueries.includes(resolution) + const valueTextSize = isMediumAndBelowResolution ? 1.65 : 1.8 + const rowsByCard = isMediumAndBelowResolution ? '3row' : '2row' + const isDesktop = !isMediumAndBelowResolution + console.log('resolution', resolution, isDesktop) + + useEffect(() => { + const mediaQuery = subscribeToScreenSizeChange(() => setResolution(getMatchingScreenSize())) + return (): void => mediaQuery() + }, []) return ( - {isMediumResolution && {children}} - + {children} + {isDesktop && cardBlock(batchInfo, isLoading, valueTextSize)} + + + + {isMediumAndBelowResolution && cardBlock(batchInfo, isLoading, valueTextSize)} - - - - + - - - - - - - - - - - - - {/** Surdpuls is not yet available */} - {/* + + + + + + + {/** Surdpuls is not yet available */} + {/* */} - + + ) } diff --git a/src/apps/explorer/components/SummaryCardsWidget/index.tsx b/src/apps/explorer/components/SummaryCardsWidget/index.tsx index ce8ea631f..430cb76d2 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/index.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/index.tsx @@ -7,8 +7,13 @@ import summaryData from './summaryGraphResp.json' const DELAY_SECONDS = 3 // Emulating API request +export interface BatchInfo { + lastBatchDate: string + batchId: string +} + interface TotalSummary { - batchInfo: { lastBatchDate: string; batchId: string } + batchInfo: BatchInfo dailyTransactions: { now: number; before: string } totalTokens: number dailyFees: { now: string; before: string } @@ -49,8 +54,9 @@ const VolumeChart = styled.div` height: 16rem; width: 42rem; margin: 1rem; - ${media.smallScreen} { - width: 32rem; + + ${media.mobile} { + max-width: 32rem; } ` diff --git a/src/apps/explorer/pages/Home/index.tsx b/src/apps/explorer/pages/Home/index.tsx index 7f91b8c2c..93b2de00a 100644 --- a/src/apps/explorer/pages/Home/index.tsx +++ b/src/apps/explorer/pages/Home/index.tsx @@ -28,6 +28,10 @@ const Wrapper = styled(WrapperMod)` const SummaryWrapper = styled.section` display: flex; padding-top: 10rem; + + ${media.mobile} { + padding-top: 4rem; + } ` export const Home: React.FC = () => { diff --git a/src/components/common/Card/Card.tsx b/src/components/common/Card/Card.tsx index fb2fbc894..51074b608 100644 --- a/src/components/common/Card/Card.tsx +++ b/src/components/common/Card/Card.tsx @@ -8,7 +8,7 @@ const { white, fadedGreyishWhite, blackLight } = COLOURS const DefaultCard = styled.div` height: inherit; - min-width: 200px; + min-width: 15rem; min-height: 100px; background-color: #f5f5f5; border-radius: 6px; diff --git a/src/components/common/Card/CardContent.tsx b/src/components/common/Card/CardContent.tsx index c4c9a5154..e2292ddc6 100644 --- a/src/components/common/Card/CardContent.tsx +++ b/src/components/common/Card/CardContent.tsx @@ -61,7 +61,7 @@ const CardBody = styled.div<{ margin-top: ${({ direction }): string => (direction === 'row' ? '0' : '8px')}; > h3 { - font-size: ${({ valueSize }): number => valueSize || 18}px; + font-size: ${({ valueSize }): number => valueSize || 1.8}rem; margin: 0px; } > span { diff --git a/src/utils/mediaQueries.ts b/src/utils/mediaQueries.ts index 9c2409ee8..ee693fed6 100644 --- a/src/utils/mediaQueries.ts +++ b/src/utils/mediaQueries.ts @@ -8,8 +8,6 @@ export enum TypeMediaQueries { XS = 'xs', } -export const MediumDownQueries = [TypeMediaQueries.MD, TypeMediaQueries.SM, TypeMediaQueries.XS] - export const MEDIA_QUERY_MATCHES = [ // must be in descending order for .find to match from largest to smallest // as sm will also match for xl and lg, for example @@ -43,7 +41,10 @@ export const MEDIA_QUERY_NAMES = MEDIA_QUERY_MATCHES.map(({ name }) => name).con export const subscribeToScreenSizeChange = (callback: (event: MediaQueryListEvent) => void): Command => { const mediaQueryLists = MEDIA_QUERIES.map((query) => window.matchMedia(query)) - mediaQueryLists.forEach((mql) => mql.addListener(callback)) + mediaQueryLists.forEach((mql) => mql.addEventListener('change', callback)) - return (): void => mediaQueryLists.forEach((mql) => mql.removeListener(callback)) + return (): void => mediaQueryLists.forEach((mql) => mql.removeEventListener('change', callback)) } + +// media queries below medium size +export const MediumDownQueries = [TypeMediaQueries.MD, TypeMediaQueries.SM, TypeMediaQueries.XS] From 8a0a585c2a5b3c91e81060d163911640dcdbd73f Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Tue, 12 Apr 2022 02:17:52 -0300 Subject: [PATCH 09/19] remove console line --- src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx index d076a47de..47d7d7579 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -100,7 +100,6 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX. const valueTextSize = isMediumAndBelowResolution ? 1.65 : 1.8 const rowsByCard = isMediumAndBelowResolution ? '3row' : '2row' const isDesktop = !isMediumAndBelowResolution - console.log('resolution', resolution, isDesktop) useEffect(() => { const mediaQuery = subscribeToScreenSizeChange(() => setResolution(getMatchingScreenSize())) From 900509d059b7521e834c5e8312a41b7439fb4504 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Tue, 12 Apr 2022 23:51:15 -0300 Subject: [PATCH 10/19] Fix Storybook, use double size on batchInfoCard, reuse grid system MIU layout --- .../SummaryCardsWidget/SummaryCards.tsx | 186 ++++++++---------- .../components/SummaryCardsWidget/index.tsx | 7 +- src/components/common/Card/Card.tsx | 32 ++- .../common/CardRow/CardRow.stories.tsx | 6 +- src/components/common/CardRow/index.tsx | 18 +- 5 files changed, 119 insertions(+), 130 deletions(-) diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx index 47d7d7579..8aac45f3c 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react' -import styled from 'styled-components' +import styled, { css } from 'styled-components' import { media } from 'theme/styles/media' import { @@ -9,60 +9,47 @@ import { TypeMediaQueries, } from 'utils/mediaQueries' import { Card, CardContent } from 'components/common/Card' -import { BatchInfo, TotalSummaryResponse } from '.' +import { CardRow } from 'components/common/CardRow' +import { TotalSummaryResponse } from '.' -const Wrapper = styled.div` - justify-content: center; - align-items: center; -` - -const WrapperRow = styled.div` - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: 100%; +const WrapperCardRow = styled(CardRow)` + max-width: 70%; - > div { - min-width: 20rem; + ${media.mobile} { + max-width: 100%; } ` -const BlockCards = styled.div` - display: grid; - grid-template-columns: 2fr 2fr 2fr; - width: 100%; +const DoubleContentSize = css` + min-height: 19.6rem; +` +const WrapperTransactionsCard = styled(Card)` + ${media.mediumDownMd} { + ${DoubleContentSize} + } +` +const WrapperColumn = styled.div` + ${DoubleContentSize} + /* Equivalent to use lg={8} MUI grid system */ + flex-grow: 0; + max-width: 66.666667%; + flex-basis: 66.666667%; + padding-right: 2rem; - ${media.mediumDown} { - grid-template-columns: 1fr 1fr; - > div { - min-height: 14.4rem; - } + ${media.mediumDownMd} { + flex-grow: 0; + max-width: 100%; + flex-basis: 100%; } ` -const WrapperColumn = styled.div<{ flexValue?: string }>` - display: flex; - flex-direction: column; - flex-basis: ${({ flexValue }): string => (flexValue ? flexValue : 'auto')}; - justify-content: center; - align-items: center; +const WrappedDoubleCard = styled(Card)` + ${DoubleContentSize} ` -const WrapperDoubleContent = styled.div<{ column?: boolean }>` + +const WrapperDoubleContent = styled.div` display: flex; flex-direction: column; - justify-content: stretch; - align-items: stretch; - flex: 1; - gap: 3.5rem; - min-width: 17rem; - - > div { - text-align: center; - } - - ${media.mediumDown} { - gap: 2rem; - justify-content: space-evenly; - } + gap: 3rem; ` interface SummaryCardsProps { @@ -70,36 +57,13 @@ interface SummaryCardsProps { children: React.ReactNode } -export function cardBlock(batchInfo: BatchInfo, isLoading: boolean, valueTextSize: number): JSX.Element { - return ( - - - - - - - ) -} - export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX.Element { const { batchInfo, dailyTransactions, totalTokens, dailyFees, isLoading } = summaryData const [resolution, setResolution] = useState(getMatchingScreenSize()) const isMediumAndBelowResolution = MediumDownQueries.includes(resolution) - const valueTextSize = isMediumAndBelowResolution ? 1.65 : 1.8 - const rowsByCard = isMediumAndBelowResolution ? '3row' : '2row' const isDesktop = !isMediumAndBelowResolution + const valueTextSize = isDesktop ? 1.8 : 1.65 + const rowsByCard = isDesktop ? '2row' : '3row' useEffect(() => { const mediaQuery = subscribeToScreenSizeChange(() => setResolution(getMatchingScreenSize())) @@ -107,47 +71,60 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX. }, []) return ( - - - {children} - {isDesktop && cardBlock(batchInfo, isLoading, valueTextSize)} - - - - {isMediumAndBelowResolution && cardBlock(batchInfo, isLoading, valueTextSize)} - + + <> + {children} + + - - - - - - - {/** Surdpuls is not yet available */} - {/* + + + + + + + + + + + + {/** Surdpuls is not yet available */} + {/* */} - - - + + ) } diff --git a/src/apps/explorer/components/SummaryCardsWidget/index.tsx b/src/apps/explorer/components/SummaryCardsWidget/index.tsx index 430cb76d2..e0ba686bb 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/index.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/index.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from 'react' import styled from 'styled-components' import { SummaryCards } from './SummaryCards' -import { media } from 'theme/styles/media' import summaryData from './summaryGraphResp.json' @@ -52,12 +51,8 @@ const VolumeChart = styled.div` background: #28f3282c; border-radius: 0.4rem; height: 16rem; - width: 42rem; + width: 100%; margin: 1rem; - - ${media.mobile} { - max-width: 32rem; - } ` export function StatsSummaryCardsWidget(): JSX.Element { diff --git a/src/components/common/Card/Card.tsx b/src/components/common/Card/Card.tsx index 51074b608..5b2fa1022 100644 --- a/src/components/common/Card/Card.tsx +++ b/src/components/common/Card/Card.tsx @@ -1,5 +1,6 @@ import React from 'react' import styled from 'styled-components' +import Grid, { GridSize } from '@material-ui/core/Grid' import { COLOURS } from 'styles' import { Theme } from 'theme' @@ -36,8 +37,19 @@ const CardContent = styled.div` line-height: normal; ` +enum CardSize { + xs = 12, + sm = 6, + md = 4, + lg = 3, +} + export interface CardBaseProps { - children?: React.ReactElement | string + children?: React.ReactNode + xs?: GridSize + sm?: GridSize + md?: GridSize + lg?: GridSize } /** @@ -45,11 +57,19 @@ export interface CardBaseProps { * * An extensible content container. */ - -export const Card: React.FC = ({ children, ...rest }) => { +export const Card: React.FC = ({ + children, + xs = CardSize.xs, + sm = CardSize.sm, + md = CardSize.md, + lg = CardSize.lg, + ...rest +}): JSX.Element => { return ( - - {children} - + + + {children} + + ) } diff --git a/src/components/common/CardRow/CardRow.stories.tsx b/src/components/common/CardRow/CardRow.stories.tsx index 1db014ada..1d847c857 100644 --- a/src/components/common/CardRow/CardRow.stories.tsx +++ b/src/components/common/CardRow/CardRow.stories.tsx @@ -5,7 +5,7 @@ import { Story, Meta } from '@storybook/react/types-6-0' import { GlobalStyles, ThemeToggler } from 'storybook/decorators' import { Card, CardContent } from 'components/common/Card' -import { CardRow, CardRowProps } from '.' +import { CardRow, CardRowProps } from 'components/common/CardRow' import QuestionIcon from '../../../assets/img/question1.svg' @@ -45,11 +45,11 @@ const Template: Story = (args) => ( Dummy Card - + /** * CardRow component. * * Place cards side-by-side */ -export const CardRow: React.FC = ({ children }) => { - return {children} +export const CardRow: React.FC = ({ children, ...rest }) => { + return ( + + {children} + + ) } From ad4698d2183fb21d1a672036796fb677d688a5f6 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Wed, 13 Apr 2022 15:05:04 -0300 Subject: [PATCH 11/19] volume chart height and fix overlap on 349px size --- .../SummaryCardsWidget/SummaryCards.tsx | 36 +++++++++++++------ .../components/SummaryCardsWidget/index.tsx | 3 +- src/components/common/Card/Card.tsx | 2 +- 3 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx index 8aac45f3c..ad17e5817 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -12,6 +12,10 @@ import { Card, CardContent } from 'components/common/Card' import { CardRow } from 'components/common/CardRow' import { TotalSummaryResponse } from '.' +const BatchInfoHeight = '19.6rem' +const DESKTOP_TEXT_SIZE = 1.8 // rem +const MOBILE_TEXT_SIZE = 1.65 // rem + const WrapperCardRow = styled(CardRow)` max-width: 70%; @@ -21,35 +25,45 @@ const WrapperCardRow = styled(CardRow)` ` const DoubleContentSize = css` - min-height: 19.6rem; -` -const WrapperTransactionsCard = styled(Card)` - ${media.mediumDownMd} { - ${DoubleContentSize} - } + min-height: ${BatchInfoHeight}; ` const WrapperColumn = styled.div` - ${DoubleContentSize} /* Equivalent to use lg={8} MUI grid system */ flex-grow: 0; max-width: 66.666667%; flex-basis: 66.666667%; padding-right: 2rem; + > div { + margin: 1rem; + max-height: ${BatchInfoHeight}; + } + ${media.mediumDownMd} { flex-grow: 0; max-width: 100%; flex-basis: 100%; } ` -const WrappedDoubleCard = styled(Card)` +const DoubleCardStyle = css` ${DoubleContentSize} + + ${media.mediumDownMd} { + min-height: 16rem; + } +` +const WrappedDoubleCard = styled(Card)` + ${DoubleCardStyle} ` const WrapperDoubleContent = styled.div` display: flex; flex-direction: column; gap: 3rem; + + ${media.mediumDownMd} { + gap: 2rem; + } ` interface SummaryCardsProps { @@ -62,7 +76,7 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX. const [resolution, setResolution] = useState(getMatchingScreenSize()) const isMediumAndBelowResolution = MediumDownQueries.includes(resolution) const isDesktop = !isMediumAndBelowResolution - const valueTextSize = isDesktop ? 1.8 : 1.65 + const valueTextSize = isDesktop ? DESKTOP_TEXT_SIZE : MOBILE_TEXT_SIZE const rowsByCard = isDesktop ? '2row' : '3row' useEffect(() => { @@ -92,7 +106,7 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX. /> - + - + Date: Wed, 13 Apr 2022 15:28:13 -0300 Subject: [PATCH 12/19] Fix Tx Card --- .../components/SummaryCardsWidget/SummaryCards.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx index ad17e5817..54a3f396c 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -56,6 +56,12 @@ const WrappedDoubleCard = styled(Card)` ${DoubleCardStyle} ` +const CardTransactions = styled(Card)` + ${media.mediumDownMd} { + ${DoubleCardStyle} + } +` + const WrapperDoubleContent = styled.div` display: flex; flex-direction: column; @@ -106,7 +112,7 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX. /> - + - + Date: Wed, 13 Apr 2022 18:20:31 -0300 Subject: [PATCH 13/19] fix card width on mobile --- src/components/common/Card/Card.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/common/Card/Card.tsx b/src/components/common/Card/Card.tsx index 045b1169e..fd9bed7af 100644 --- a/src/components/common/Card/Card.tsx +++ b/src/components/common/Card/Card.tsx @@ -1,6 +1,7 @@ import React from 'react' import styled from 'styled-components' import Grid, { GridSize } from '@material-ui/core/Grid' +import { media } from 'theme/styles/media' import { COLOURS } from 'styles' import { Theme } from 'theme' @@ -15,6 +16,9 @@ const DefaultCard = styled.div` 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} { + min-width: 14rem; + } ` const CardComponent = styled(DefaultCard)` @@ -35,6 +39,10 @@ const CardContent = styled.div` font-size: 15px; padding: 16px; line-height: normal; + ${media.xSmallDown} { + padding: 0.2rem; + font-size: 1.1rem; + } ` enum CardSize { From 64b47aafbe9a1e29c7836a9952e4d44032a5f496 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Wed, 13 Apr 2022 18:30:28 -0300 Subject: [PATCH 14/19] fix selection bg color --- src/theme/styles/global.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/theme/styles/global.ts b/src/theme/styles/global.ts index bbf401955..a3b793fa1 100644 --- a/src/theme/styles/global.ts +++ b/src/theme/styles/global.ts @@ -8,13 +8,13 @@ import variables from 'components/layout/GenericLayout/variablesCss' const selection = css` /* CSS for selecting text */ *::selection { - background: #218dff; /* WebKit/Blink Browsers */ + background-color: var(--color-gradient-2); /* WebKit/Blink Browsers */ } *::-moz-selection { - background: #218dff; /* Gecko Browsers */ + background-color: var(--color-gradient-2); /* Gecko Browsers */ } *::-webkit-selection { - background: #218dff; /* Chrome Browsers */ + background-color: var(--color-gradient-2); /* Chrome Browsers */ } /* End CSS for selecting text */ ` From 8497f336be1fcfa42a5f150feb7b0b48c05f8249 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Wed, 13 Apr 2022 23:36:45 -0300 Subject: [PATCH 15/19] typescript typed using raw data --- .../SummaryCardsWidget/SummaryCards.tsx | 40 ++++++++++++---- .../components/SummaryCardsWidget/index.tsx | 46 ++++++++++++------- .../SummaryCardsWidget/summaryGraphResp.json | 7 ++- src/components/common/Card/CardContent.tsx | 2 +- 4 files changed, 64 insertions(+), 31 deletions(-) diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx index 54a3f396c..c17e069d9 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from 'react' import styled, { css } from 'styled-components' import { media } from 'theme/styles/media' +import { formatDistanceToNowStrict } from 'date-fns' import { getMatchingScreenSize, @@ -11,6 +12,7 @@ import { import { Card, CardContent } from 'components/common/Card' import { CardRow } from 'components/common/CardRow' import { TotalSummaryResponse } from '.' +import { abbreviateString } from 'utils' const BatchInfoHeight = '19.6rem' const DESKTOP_TEXT_SIZE = 1.8 // rem @@ -73,17 +75,35 @@ const WrapperDoubleContent = styled.div` ` interface SummaryCardsProps { - summaryData: TotalSummaryResponse + summaryData: TotalSummaryResponse | undefined children: React.ReactNode } +function calcDiff(a: number, b: number): number { + return (a - b === 0 ? 0 : (100 * (a - b)) / b) || 0 +} + +function getColorBySign(n: number): string { + const sign = Math.sign(n) + + if (sign === 1) { + return 'green' + } else if (sign === -1) { + return 'red1' + } + + return 'grey' +} + export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX.Element { - const { batchInfo, dailyTransactions, totalTokens, dailyFees, isLoading } = summaryData + const { batchInfo, dailyTransactions, totalTokens, dailyFees, isLoading } = summaryData || {} const [resolution, setResolution] = useState(getMatchingScreenSize()) const isMediumAndBelowResolution = MediumDownQueries.includes(resolution) const isDesktop = !isMediumAndBelowResolution 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 useEffect(() => { const mediaQuery = subscribeToScreenSizeChange(() => setResolution(getMatchingScreenSize())) @@ -99,14 +119,14 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX. @@ -116,9 +136,9 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX. @@ -136,9 +156,9 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX. diff --git a/src/apps/explorer/components/SummaryCardsWidget/index.tsx b/src/apps/explorer/components/SummaryCardsWidget/index.tsx index 6381ce542..a8d710a6e 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/index.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/index.tsx @@ -7,34 +7,48 @@ import summaryData from './summaryGraphResp.json' const DELAY_SECONDS = 3 // Emulating API request export interface BatchInfo { - lastBatchDate: string + lastBatchDate: Date batchId: string } +interface PastAndPresentValue { + now: number + before: number +} + interface TotalSummary { - batchInfo: BatchInfo - dailyTransactions: { now: number; before: string } - totalTokens: number - dailyFees: { now: string; before: string } - monthSurplus: { now: string; before: string } + batchInfo?: BatchInfo + dailyTransactions?: PastAndPresentValue + totalTokens?: number + dailyFees?: PastAndPresentValue +} + +type RawTotalSummary = Omit & { + batchInfo: { lastBatchDate: number; batchId: string } +} + +function buildSummary(data: RawTotalSummary): TotalSummary { + return { + ...data, + batchInfo: { + ...data.batchInfo, + lastBatchDate: new Date(data.batchInfo.lastBatchDate * 1000), + }, + } } export type TotalSummaryResponse = TotalSummary & { isLoading: boolean } -function useGetTotalSummary(): TotalSummaryResponse { - const [summary, setSummary] = useState({ - batchInfo: { lastBatchDate: '', batchId: '' }, - dailyTransactions: { now: 0, before: '' }, - totalTokens: 0, - dailyFees: { now: '', before: '' }, - monthSurplus: { now: '', before: '' }, - isLoading: true, - }) +function useGetTotalSummary(): TotalSummaryResponse | undefined { + const [summary, setSummary] = useState() useEffect(() => { - const timer = setTimeout(() => setSummary({ ...summaryData, isLoading: false }), DELAY_SECONDS * 1000) + setSummary((prevState) => { + return { ...prevState, isLoading: true } + }) + const timer = setTimeout(() => setSummary({ ...buildSummary(summaryData), isLoading: false }), DELAY_SECONDS * 1000) return (): void => clearTimeout(timer) }, []) diff --git a/src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json b/src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json index 5c720a0f4..17d92df35 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json +++ b/src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json @@ -1,8 +1,7 @@ { - "batchInfo": { "lastBatchDate": "3m 42s Ago", "batchId": "fd3f932" }, - "dailyTransactions": {"now": 194, "before": "+1.2%"}, + "batchInfo": { "lastBatchDate":1649881035, "batchId": "0x0003723b9eb1598e12d15c69206bf13c971be0310fa5744cf9601ed79f89e29c" }, + "dailyTransactions": {"now": 612, "before": 912}, "totalTokens": 193, - "dailyFees": {"now": "$33.3K", "before": "-3.23%"}, - "monthSurplus": {"now": "$53.9K", "before": "14.49%"} + "dailyFees": {"now": 55225.61205047748511254485049406426, "before": 40361.20651840192742698089787142249} } \ No newline at end of file diff --git a/src/components/common/Card/CardContent.tsx b/src/components/common/Card/CardContent.tsx index e2292ddc6..cc00d8c9e 100644 --- a/src/components/common/Card/CardContent.tsx +++ b/src/components/common/Card/CardContent.tsx @@ -10,7 +10,7 @@ export interface CardContentProps { direction?: string icon1?: React.ReactElement label1: string - value1: string | number + value1: string | number | undefined valueSize?: number labelWidth?: number caption1?: string | number From ce1b42f746efaf629dc0371e2f5ebf47d8ed9faa Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Thu, 14 Apr 2022 00:06:29 -0300 Subject: [PATCH 16/19] Adding $ symbol --- .../explorer/components/SummaryCardsWidget/SummaryCards.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx index c17e069d9..4ad7a03de 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -156,7 +156,7 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX. Date: Thu, 14 Apr 2022 12:42:53 -0300 Subject: [PATCH 17/19] Update src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json formatting Co-authored-by: Leandro Boscariol --- .../components/SummaryCardsWidget/summaryGraphResp.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json b/src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json index 17d92df35..82e9bf390 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json +++ b/src/apps/explorer/components/SummaryCardsWidget/summaryGraphResp.json @@ -1,6 +1,5 @@ { - - "batchInfo": { "lastBatchDate":1649881035, "batchId": "0x0003723b9eb1598e12d15c69206bf13c971be0310fa5744cf9601ed79f89e29c" }, + "batchInfo": { "lastBatchDate": 1649881035, "batchId": "0x0003723b9eb1598e12d15c69206bf13c971be0310fa5744cf9601ed79f89e29c" }, "dailyTransactions": {"now": 612, "before": 912}, "totalTokens": 193, "dailyFees": {"now": 55225.61205047748511254485049406426, "before": 40361.20651840192742698089787142249} From 0c5260d5d0b6bb38602c330e65c6e1ebbf440976 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Thu, 14 Apr 2022 17:56:18 -0300 Subject: [PATCH 18/19] Adding useMediaBreakpoint --- .../SummaryCardsWidget/SummaryCards.tsx | 26 +++++-------------- src/hooks/useGetMatchingScreenSize.tsx | 14 ++++++++++ src/hooks/useMediaBreakPoint.tsx | 8 ++++++ src/utils/mediaQueries.ts | 23 +++++----------- 4 files changed, 35 insertions(+), 36 deletions(-) create mode 100644 src/hooks/useGetMatchingScreenSize.tsx create mode 100644 src/hooks/useMediaBreakPoint.tsx diff --git a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx index 4ad7a03de..26bc4885c 100644 --- a/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx +++ b/src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx @@ -1,18 +1,13 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import styled, { css } from 'styled-components' import { media } from 'theme/styles/media' import { formatDistanceToNowStrict } from 'date-fns' -import { - getMatchingScreenSize, - subscribeToScreenSizeChange, - MediumDownQueries, - TypeMediaQueries, -} from 'utils/mediaQueries' import { Card, CardContent } from 'components/common/Card' import { CardRow } from 'components/common/CardRow' import { TotalSummaryResponse } from '.' import { abbreviateString } from 'utils' +import { useMediaBreakpoint } from 'hooks/useMediaBreakPoint' const BatchInfoHeight = '19.6rem' const DESKTOP_TEXT_SIZE = 1.8 // rem @@ -84,11 +79,9 @@ function calcDiff(a: number, b: number): number { } function getColorBySign(n: number): string { - const sign = Math.sign(n) - - if (sign === 1) { + if (n > 0) { return 'green' - } else if (sign === -1) { + } else if (n < 0) { return 'red1' } @@ -97,19 +90,12 @@ function getColorBySign(n: number): string { export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX.Element { const { batchInfo, dailyTransactions, totalTokens, dailyFees, isLoading } = summaryData || {} - const [resolution, setResolution] = useState(getMatchingScreenSize()) - const isMediumAndBelowResolution = MediumDownQueries.includes(resolution) - const isDesktop = !isMediumAndBelowResolution + 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 - useEffect(() => { - const mediaQuery = subscribeToScreenSizeChange(() => setResolution(getMatchingScreenSize())) - return (): void => mediaQuery() - }, []) - return ( <> @@ -163,7 +149,7 @@ export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX. valueSize={valueTextSize} /> - {/** Surdpuls is not yet available */} + {/** Surplus is not yet available */} {/* (getMatchingScreenSize()) + + useEffect(() => { + const mediaQuery = subscribeToScreenSizeChange(() => setResolution(getMatchingScreenSize())) + return (): void => mediaQuery() + }, []) + + return resolution as Breakpoints +} diff --git a/src/hooks/useMediaBreakPoint.tsx b/src/hooks/useMediaBreakPoint.tsx new file mode 100644 index 000000000..b4fb3a04b --- /dev/null +++ b/src/hooks/useMediaBreakPoint.tsx @@ -0,0 +1,8 @@ +import { useGetMatchingScreenSize } from 'hooks/useGetMatchingScreenSize' +import { Breakpoints } from 'utils/mediaQueries' + +export function useMediaBreakpoint(breakpoints: Breakpoints[]): boolean { + const resolution = useGetMatchingScreenSize() + + return breakpoints.includes(resolution) +} diff --git a/src/utils/mediaQueries.ts b/src/utils/mediaQueries.ts index ee693fed6..a86f59a76 100644 --- a/src/utils/mediaQueries.ts +++ b/src/utils/mediaQueries.ts @@ -1,38 +1,32 @@ import { Command } from 'types' -export enum TypeMediaQueries { - XL = 'xl', - LG = 'lg', - MD = 'md', - SM = 'sm', - XS = 'xs', -} +export type Breakpoints = 'xl' | 'lg' | 'md' | 'sm' | 'xs' export const MEDIA_QUERY_MATCHES = [ // must be in descending order for .find to match from largest to smallest // as sm will also match for xl and lg, for example { - name: TypeMediaQueries.XL, + name: 'xl', query: '(min-width:1200px)', }, { - name: TypeMediaQueries.LG, + name: 'lg', query: '(min-width:992px)', }, { - name: TypeMediaQueries.MD, + name: 'md', query: '(min-width:768px)', }, { - name: TypeMediaQueries.SM, + name: 'sm', query: '(min-width:576px)', }, // anything smaller -- xs ] -const DEFAULT_QUERY_NAME = TypeMediaQueries.XS +const DEFAULT_QUERY_NAME: Breakpoints = 'xs' -export const getMatchingScreenSize = (): TypeMediaQueries => +export const getMatchingScreenSize = (): string => MEDIA_QUERY_MATCHES.find(({ query }) => window.matchMedia(query).matches)?.name || DEFAULT_QUERY_NAME export const MEDIA_QUERIES = MEDIA_QUERY_MATCHES.map(({ query }) => query) @@ -45,6 +39,3 @@ export const subscribeToScreenSizeChange = (callback: (event: MediaQueryListEven return (): void => mediaQueryLists.forEach((mql) => mql.removeEventListener('change', callback)) } - -// media queries below medium size -export const MediumDownQueries = [TypeMediaQueries.MD, TypeMediaQueries.SM, TypeMediaQueries.XS] From c94978bbe3fd8983b1cedf333e4b7db71efb5fd6 Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Thu, 14 Apr 2022 18:04:23 -0300 Subject: [PATCH 19/19] fix types --- src/hooks/useGetMatchingScreenSize.tsx | 4 ++-- src/utils/mediaQueries.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/hooks/useGetMatchingScreenSize.tsx b/src/hooks/useGetMatchingScreenSize.tsx index 9a2bfe4c4..6ffc3b4c9 100644 --- a/src/hooks/useGetMatchingScreenSize.tsx +++ b/src/hooks/useGetMatchingScreenSize.tsx @@ -3,12 +3,12 @@ import { useEffect, useState } from 'react' import { getMatchingScreenSize, subscribeToScreenSizeChange, Breakpoints } from 'utils/mediaQueries' export function useGetMatchingScreenSize(): Breakpoints { - const [resolution, setResolution] = useState(getMatchingScreenSize()) + const [resolution, setResolution] = useState(getMatchingScreenSize()) useEffect(() => { const mediaQuery = subscribeToScreenSizeChange(() => setResolution(getMatchingScreenSize())) return (): void => mediaQuery() }, []) - return resolution as Breakpoints + return resolution } diff --git a/src/utils/mediaQueries.ts b/src/utils/mediaQueries.ts index a86f59a76..6fafb5273 100644 --- a/src/utils/mediaQueries.ts +++ b/src/utils/mediaQueries.ts @@ -2,7 +2,7 @@ import { Command } from 'types' export type Breakpoints = 'xl' | 'lg' | 'md' | 'sm' | 'xs' -export const MEDIA_QUERY_MATCHES = [ +export const MEDIA_QUERY_MATCHES: Array<{ name: Breakpoints; query: string }> = [ // must be in descending order for .find to match from largest to smallest // as sm will also match for xl and lg, for example { @@ -26,7 +26,7 @@ export const MEDIA_QUERY_MATCHES = [ const DEFAULT_QUERY_NAME: Breakpoints = 'xs' -export const getMatchingScreenSize = (): string => +export const getMatchingScreenSize = (): Breakpoints => MEDIA_QUERY_MATCHES.find(({ query }) => window.matchMedia(query).matches)?.name || DEFAULT_QUERY_NAME export const MEDIA_QUERIES = MEDIA_QUERY_MATCHES.map(({ query }) => query)