This repository has been archived by the owner on Feb 2, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #58 from cowprotocol/35-epic-home-page
Home page Epic
- Loading branch information
Showing
45 changed files
with
4,424 additions
and
752 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
145 changes: 145 additions & 0 deletions
145
src/apps/explorer/components/SummaryCardsWidget/SummaryCards.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,145 @@ | ||
| import React from 'react' | ||
| import styled, { css } from 'styled-components' | ||
| import { media } from 'theme/styles/media' | ||
| import { formatDistanceToNowStrict } from 'date-fns' | ||
|
|
||
| import { Card, CardContent } from 'components/common/Card' | ||
| import { CardRow } from 'components/common/CardRow' | ||
| import { TotalSummaryResponse } from './useGetSummaryData' | ||
| import { abbreviateString } from 'utils' | ||
| import { useMediaBreakpoint } from 'hooks/useMediaBreakPoint' | ||
| import { calcDiff, getColorBySign } from 'components/common/Card/card.utils' | ||
| import { CopyButton } from 'components/common/CopyButton' | ||
| import { LinkWithPrefixNetwork } from 'components/common/LinkWithPrefixNetwork' | ||
| import { numberFormatter } from './utils' | ||
|
|
||
| const BatchInfoHeight = '21.6rem' | ||
| const DESKTOP_TEXT_SIZE = 1.8 // rem | ||
| const MOBILE_TEXT_SIZE = 1.65 // rem | ||
|
|
||
| const DoubleContentSize = css` | ||
| min-height: ${BatchInfoHeight}; | ||
| ` | ||
| const WrapperColumnChart = styled(Card)` | ||
| background: transparent; | ||
| & > div:first-child { | ||
| all: unset; | ||
| border: 1px solid ${({ theme }): string => theme.borderPrimary}; | ||
| border-radius: 0.4rem; | ||
| overflow: hidden; | ||
| } | ||
| ` | ||
|
|
||
| const DoubleCardStyle = css` | ||
| ${DoubleContentSize} | ||
| ${media.xSmallDown}, ${media.tinyDown} { | ||
| min-height: 15rem; | ||
| } | ||
| ` | ||
| const WrappedDoubleCard = styled(Card)` | ||
| ${DoubleCardStyle} | ||
| ` | ||
|
|
||
| const WrapperDoubleContent = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 3rem; | ||
| ${media.mediumDownMd} { | ||
| gap: 2rem; | ||
| } | ||
| ` | ||
|
|
||
| interface SummaryCardsProps { | ||
| summaryData: TotalSummaryResponse | undefined | ||
| children: React.ReactNode | ||
| } | ||
|
|
||
| export function SummaryCards({ summaryData, children }: SummaryCardsProps): JSX.Element { | ||
| 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 ( | ||
| <CardRow> | ||
| <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> | ||
| <Card emptyContent xs={12} sm={12} md={12} lg={4}> | ||
| <CardRow> | ||
| <Card xs={6} sm={3} md={3} lg={6}> | ||
| <CardContent | ||
| variant={rowsByCard} | ||
| label1="24h Transactions" | ||
| value1={dailyTransactions?.now.toLocaleString()} | ||
| caption1={`${diffTransactions.toFixed(2)}%`} | ||
| captionColor={getColorBySign(diffTransactions)} | ||
| loading={isLoading} | ||
| valueSize={valueTextSize} | ||
| /> | ||
| </Card> | ||
| <Card xs={6} sm={3} md={3} lg={6}> | ||
| <CardContent | ||
| variant="2row" | ||
| label1="Total Tokens" | ||
| value1={totalTokens?.toLocaleString()} | ||
| loading={isLoading} | ||
| valueSize={valueTextSize} | ||
| /> | ||
| </Card> | ||
| <Card xs={6} sm={3} md={3} lg={6}> | ||
| <CardContent | ||
| variant={rowsByCard} | ||
| label1="24h Fees" | ||
| value1={`$${numberFormatter(dailyFees?.now || 0)}`} | ||
| caption1={`${diffFees.toFixed(2)}%`} | ||
| captionColor={getColorBySign(diffFees)} | ||
| loading={isLoading} | ||
| valueSize={valueTextSize} | ||
| /> | ||
| </Card> | ||
| <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> | ||
| </Card> | ||
| </CardRow> | ||
| ) | ||
| } |
41 changes: 41 additions & 0 deletions
41
src/apps/explorer/components/SummaryCardsWidget/VolumeChart/VolumeChart.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import React from 'react' | ||
| import { Story, Meta } from '@storybook/react' | ||
| import styled from 'styled-components' | ||
|
|
||
| import { GlobalStyles, ThemeToggler } from 'storybook/decorators' | ||
| import { VolumeChart, VolumeChartProps } from './VolumeChart' | ||
| import { VolumePeriod } from './VolumeChartWidget' | ||
| import volumeDataJson from './volumeData.json' | ||
| import { buildVolumeData } from './useGetVolumeData' | ||
|
|
||
| export default { | ||
| title: 'ExplorerApp/Chart', | ||
| component: VolumeChart, | ||
| decorators: [GlobalStyles, ThemeToggler], | ||
| argTypes: { | ||
| label: { control: 'text' }, | ||
| variant: { control: 'default' }, | ||
| size: { control: 'default' }, | ||
| as: { control: null }, | ||
| theme: { control: null }, | ||
| forwardedAs: { control: null }, | ||
| }, | ||
| } as Meta | ||
|
|
||
| const WrapperVolumeChart = styled.div` | ||
| height: 19.6rem; | ||
| ` | ||
|
|
||
| const Template: Story<VolumeChartProps> = (args) => ( | ||
| <WrapperVolumeChart> | ||
| <VolumeChart {...args} /> | ||
| </WrapperVolumeChart> | ||
| ) | ||
|
|
||
| export const Default = Template.bind({}) | ||
| Default.args = { | ||
| volumeData: { | ||
| ...buildVolumeData(volumeDataJson, VolumePeriod.YEARLY), | ||
| isLoading: false, | ||
| }, | ||
| } |
Oops, something went wrong.