From f671bba4be75b56c77825eaf6d3ebb65a9b9e3b6 Mon Sep 17 00:00:00 2001 From: WRadoslaw <92513933+WRadoslaw@users.noreply.github.com> Date: Wed, 20 Sep 2023 13:05:57 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=B6=20CRT=20revenue=20tab=20(#4867)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Extract old tabs into seperate files * New RatioPreview.tsx component * Revenue tab with widgets --- .../components/RatioPreview/RatioPreview.tsx | 46 ++++++ .../studio/CrtDashboard/CrtDashboard.tsx | 136 ++---------------- .../CrtDashboard/tabs/CrtDashboardMainTab.tsx | 111 ++++++++++++++ .../CrtDashboard/tabs/CrtHoldersTab.tsx | 19 +++ .../CrtDashboard/tabs/CrtRevenueTab.tsx | 68 +++++++++ 5 files changed, 253 insertions(+), 127 deletions(-) create mode 100644 packages/atlas/src/components/RatioPreview/RatioPreview.tsx create mode 100644 packages/atlas/src/views/studio/CrtDashboard/tabs/CrtDashboardMainTab.tsx create mode 100644 packages/atlas/src/views/studio/CrtDashboard/tabs/CrtHoldersTab.tsx create mode 100644 packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.tsx diff --git a/packages/atlas/src/components/RatioPreview/RatioPreview.tsx b/packages/atlas/src/components/RatioPreview/RatioPreview.tsx new file mode 100644 index 0000000000..5da53139b8 --- /dev/null +++ b/packages/atlas/src/components/RatioPreview/RatioPreview.tsx @@ -0,0 +1,46 @@ +import styled from '@emotion/styled' + +import { FlexBox } from '@/components/FlexBox' +import { Text } from '@/components/Text' +import { cVar } from '@/styles' + +type RatioPreviewProps = { + ratios: [[number, string], [number, string]] +} + +export const RatioPreview = ({ ratios }: RatioPreviewProps) => { + const firstRatio = ratios[0] + const secondRatio = ratios[1] + return ( + + + + + {firstRatio[0]}% + + + {firstRatio[1]} + + + + + {secondRatio[1]} + + + {secondRatio[0]}% + + + + + + + + + ) +} + +const SingleRatio = styled.div<{ ratio: number; color: string }>` + flex: ${(props) => props.ratio}; + background-color: ${(props) => props.color}; + height: 4px; +` diff --git a/packages/atlas/src/views/studio/CrtDashboard/CrtDashboard.tsx b/packages/atlas/src/views/studio/CrtDashboard/CrtDashboard.tsx index 4defa9590f..f900f62ae8 100644 --- a/packages/atlas/src/views/studio/CrtDashboard/CrtDashboard.tsx +++ b/packages/atlas/src/views/studio/CrtDashboard/CrtDashboard.tsx @@ -1,25 +1,14 @@ -import BN from 'bn.js' import { useCallback, useState } from 'react' -import { SvgActionChevronR, SvgActionEdit, SvgActionLinkUrl, SvgActionSell } from '@/assets/icons' +import { SvgActionEdit, SvgActionLinkUrl, SvgActionSell } from '@/assets/icons' import { LimitedWidthContainer } from '@/components/LimitedWidthContainer' -import { NumberFormat } from '@/components/NumberFormat' import { Tabs } from '@/components/Tabs' import { Text } from '@/components/Text' -import { WidgetTile } from '@/components/WidgetTile' -import { Button, TextButton } from '@/components/_buttons/Button' -import { HoldersTable } from '@/components/_crt/HoldersTable/HoldersTable' -import { - BigWidgetContainer, - HeaderContainer, - HoldersPlaceholders, - MainContainer, - NoGlobalPaddingWrapper, - ProgressWidgetPlaceholer, - TabsContainer, - WidgetContainer, -} from '@/views/studio/CrtDashboard/CrtDashboard.styles' -import { StyledSvgJoyTokenMonochrome24 } from '@/views/studio/MyPaymentsView/PaymentsOverview/PaymentsOverview.styles' +import { Button } from '@/components/_buttons/Button' +import { HeaderContainer, MainContainer, TabsContainer } from '@/views/studio/CrtDashboard/CrtDashboard.styles' +import { CrtDashboardMainTab } from '@/views/studio/CrtDashboard/tabs/CrtDashboardMainTab' +import { CrtHoldersTab } from '@/views/studio/CrtDashboard/tabs/CrtHoldersTab' +import { CrtRevenueTab } from '@/views/studio/CrtDashboard/tabs/CrtRevenueTab' const TABS = ['Dashboard', 'Holders', 'Revenue share', 'Settings'] as const @@ -50,116 +39,9 @@ export const CrtDashboard = () => { - - {currentTab === 1 && ( - - )} - - {currentTab === 0 && ( - <> - - Progress Widget Placeholer - - - - } - withDenomination - withToken - customTicker="$JBC" - variant="h400" - /> - } - /> - } - withDenomination - withToken - customTicker="$JBC" - variant="h400" - /> - } - /> - } - withDenomination - withToken - customTicker="$JBC" - variant="h400" - /> - } - /> - - 10% - - } - /> - - - }> - Show holders - - } - customNode={} - /> - }> - Show revenue shares - - } - customNode={} - /> - - - )} + {currentTab === 0 && } + {currentTab === 1 && } + {currentTab === 2 && } ) diff --git a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtDashboardMainTab.tsx b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtDashboardMainTab.tsx new file mode 100644 index 0000000000..f129496f4b --- /dev/null +++ b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtDashboardMainTab.tsx @@ -0,0 +1,111 @@ +import BN from 'bn.js' + +import { SvgActionChevronR } from '@/assets/icons' +import { NumberFormat } from '@/components/NumberFormat' +import { Text } from '@/components/Text' +import { WidgetTile } from '@/components/WidgetTile' +import { TextButton } from '@/components/_buttons/Button' +import { + BigWidgetContainer, + HoldersPlaceholders, + NoGlobalPaddingWrapper, + ProgressWidgetPlaceholer, + WidgetContainer, +} from '@/views/studio/CrtDashboard/CrtDashboard.styles' +import { StyledSvgJoyTokenMonochrome24 } from '@/views/studio/MyPaymentsView/PaymentsOverview/PaymentsOverview.styles' + +export const CrtDashboardMainTab = () => { + return ( + <> + + Progress Widget Placeholer + + + + } + withDenomination + withToken + customTicker="$JBC" + variant="h400" + /> + } + /> + } + withDenomination + withToken + customTicker="$JBC" + variant="h400" + /> + } + /> + } + withDenomination + withToken + customTicker="$JBC" + variant="h400" + /> + } + /> + + 10% + + } + /> + + + }> + Show holders + + } + customNode={} + /> + }> + Show revenue shares + + } + customNode={} + /> + + + ) +} diff --git a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtHoldersTab.tsx b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtHoldersTab.tsx new file mode 100644 index 0000000000..863017c997 --- /dev/null +++ b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtHoldersTab.tsx @@ -0,0 +1,19 @@ +import { HoldersTable } from '@/components/_crt/HoldersTable/HoldersTable' + +export const CrtHoldersTab = () => { + return ( + + ) +} diff --git a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.tsx b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.tsx new file mode 100644 index 0000000000..5480b74405 --- /dev/null +++ b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.tsx @@ -0,0 +1,68 @@ +import styled from '@emotion/styled' + +import { SvgJoyTokenMonochrome24 } from '@/assets/icons' +import { FlexBox } from '@/components/FlexBox' +import { NumberFormat } from '@/components/NumberFormat' +import { RatioPreview } from '@/components/RatioPreview/RatioPreview' +import { Text } from '@/components/Text' +import { WidgetTile } from '@/components/WidgetTile' +import { media, sizes } from '@/styles' + +export const CrtRevenueTab = () => { + return ( + + + + 5/10 staked + + + 50% of all holders + + + } + /> + } variant="h500" as="p" withDenomination /> + } + tooltip={{ + text: 'Lorem ipsum', + }} + /> + + } + /> + + ) +} + +const WidgetContainer = styled.div` + display: flex; + gap: ${sizes(4)}; + flex-wrap: wrap; + + > * { + min-width: 320px; + flex: 1; + } + + ${media.md} { + gap: ${sizes(6)}; + + > * { + min-width: 400px; + } + } +`