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 = () => {
}>Start sale or market
-
- {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;
+ }
+ }
+`