forked from Joystream/atlas
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Extract old tabs into seperate files * New RatioPreview.tsx component * Revenue tab with widgets
- Loading branch information
Showing
5 changed files
with
253 additions
and
127 deletions.
There are no files selected for viewing
46 changes: 46 additions & 0 deletions
46
packages/atlas/src/components/RatioPreview/RatioPreview.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,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 ( | ||
| <FlexBox flow="column" gap={3.5}> | ||
| <FlexBox width="100%" justifyContent="space-between"> | ||
| <FlexBox alignItems="baseline"> | ||
| <Text variant="h500" as="h5"> | ||
| {firstRatio[0]}% | ||
| </Text> | ||
| <Text variant="t100" as="p" color="colorText"> | ||
| {firstRatio[1]} | ||
| </Text> | ||
| </FlexBox> | ||
| <FlexBox justifyContent="end" alignItems="baseline"> | ||
| <Text variant="t100" as="p" color="colorText"> | ||
| {secondRatio[1]} | ||
| </Text> | ||
| <Text variant="h500" as="h3"> | ||
| {secondRatio[0]}% | ||
| </Text> | ||
| </FlexBox> | ||
| </FlexBox> | ||
| <FlexBox> | ||
| <SingleRatio ratio={20} color={cVar('colorBackgroundStrongAlpha')} /> | ||
| <SingleRatio ratio={80} color={cVar('colorTextPrimary')} /> | ||
| </FlexBox> | ||
| </FlexBox> | ||
| ) | ||
| } | ||
|
|
||
| const SingleRatio = styled.div<{ ratio: number; color: string }>` | ||
| flex: ${(props) => props.ratio}; | ||
| background-color: ${(props) => props.color}; | ||
| height: 4px; | ||
| ` |
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
111 changes: 111 additions & 0 deletions
111
packages/atlas/src/views/studio/CrtDashboard/tabs/CrtDashboardMainTab.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,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 ( | ||
| <> | ||
| <NoGlobalPaddingWrapper> | ||
| <ProgressWidgetPlaceholer>Progress Widget Placeholer</ProgressWidgetPlaceholer> | ||
| </NoGlobalPaddingWrapper> | ||
|
|
||
| <WidgetContainer> | ||
| <WidgetTile | ||
| title="Transferable" | ||
| customNode={ | ||
| <NumberFormat | ||
| value={new BN(9999999)} | ||
| as="span" | ||
| icon={<StyledSvgJoyTokenMonochrome24 />} | ||
| withDenomination | ||
| withToken | ||
| customTicker="$JBC" | ||
| variant="h400" | ||
| /> | ||
| } | ||
| /> | ||
| <WidgetTile | ||
| title="Locked" | ||
| tooltip={{ | ||
| text: 'It is locked value', | ||
| }} | ||
| customNode={ | ||
| <NumberFormat | ||
| value={new BN(9999999)} | ||
| as="span" | ||
| icon={<StyledSvgJoyTokenMonochrome24 />} | ||
| withDenomination | ||
| withToken | ||
| customTicker="$JBC" | ||
| variant="h400" | ||
| /> | ||
| } | ||
| /> | ||
| <WidgetTile | ||
| title="Total rev." | ||
| tooltip={{ | ||
| text: 'It is locked value', | ||
| }} | ||
| customNode={ | ||
| <NumberFormat | ||
| value={new BN(9999999)} | ||
| as="span" | ||
| icon={<StyledSvgJoyTokenMonochrome24 />} | ||
| withDenomination | ||
| withToken | ||
| customTicker="$JBC" | ||
| variant="h400" | ||
| /> | ||
| } | ||
| /> | ||
| <WidgetTile | ||
| title="Patronage" | ||
| tooltip={{ | ||
| text: 'It is locked value', | ||
| }} | ||
| customNode={ | ||
| <Text variant="h400" as="h4"> | ||
| 10% | ||
| </Text> | ||
| } | ||
| /> | ||
| </WidgetContainer> | ||
| <BigWidgetContainer> | ||
| <WidgetTile | ||
| title="Token holders" | ||
| titleColor="colorTextStrong" | ||
| titleVariant="h500" | ||
| customTopRightNode={ | ||
| <TextButton iconPlacement="right" icon={<SvgActionChevronR />}> | ||
| Show holders | ||
| </TextButton> | ||
| } | ||
| customNode={<HoldersPlaceholders />} | ||
| /> | ||
| <WidgetTile | ||
| title="Revenue share with holders" | ||
| titleColor="colorTextStrong" | ||
| titleVariant="h500" | ||
| customTopRightNode={ | ||
| <TextButton iconPlacement="right" icon={<SvgActionChevronR />}> | ||
| Show revenue shares | ||
| </TextButton> | ||
| } | ||
| customNode={<HoldersPlaceholders />} | ||
| /> | ||
| </BigWidgetContainer> | ||
| </> | ||
| ) | ||
| } |
19 changes: 19 additions & 0 deletions
19
packages/atlas/src/views/studio/CrtDashboard/tabs/CrtHoldersTab.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,19 @@ | ||
| import { HoldersTable } from '@/components/_crt/HoldersTable/HoldersTable' | ||
|
|
||
| export const CrtHoldersTab = () => { | ||
| return ( | ||
| <HoldersTable | ||
| data={[ | ||
| { | ||
| memberId: '1', | ||
| transferable: 1000, | ||
| allocation: 100, | ||
| total: 1000, | ||
| vested: 0, | ||
| }, | ||
| ]} | ||
| isLoading={true} | ||
| currentMemberId="1" | ||
| /> | ||
| ) | ||
| } |
68 changes: 68 additions & 0 deletions
68
packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.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,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 ( | ||
| <WidgetContainer> | ||
| <WidgetTile | ||
| title="CURRENT STATE" | ||
| customNode={ | ||
| <FlexBox flow="column"> | ||
| <Text variant="h500" as="h5"> | ||
| 5/10 staked | ||
| </Text> | ||
| <Text variant="t100" as="p" color="colorText"> | ||
| 50% of all holders | ||
| </Text> | ||
| </FlexBox> | ||
| } | ||
| /> | ||
| <WidgetTile | ||
| title="CHANNEL BALANCE" | ||
| customNode={ | ||
| <NumberFormat value={200} icon={<SvgJoyTokenMonochrome24 />} variant="h500" as="p" withDenomination /> | ||
| } | ||
| tooltip={{ | ||
| text: 'Lorem ipsum', | ||
| }} | ||
| /> | ||
| <WidgetTile | ||
| title="REVENUE SHARE RATIO" | ||
| customNode={ | ||
| <RatioPreview | ||
| ratios={[ | ||
| [20, 'Holders'], | ||
| [80, 'Channel'], | ||
| ]} | ||
| /> | ||
| } | ||
| /> | ||
| </WidgetContainer> | ||
| ) | ||
| } | ||
|
|
||
| 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; | ||
| } | ||
| } | ||
| ` |