Skip to content

Commit

Permalink
🍶 CRT revenue tab (#4867)
Browse files Browse the repository at this point in the history
* Extract old tabs into seperate files

* New RatioPreview.tsx component

* Revenue tab with widgets
  • Loading branch information
WRadoslaw committed Mar 14, 2024
1 parent 5dea8e9 commit f671bba
Show file tree
Hide file tree
Showing 5 changed files with 253 additions and 127 deletions.
46 changes: 46 additions & 0 deletions packages/atlas/src/components/RatioPreview/RatioPreview.tsx
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;
`
136 changes: 9 additions & 127 deletions packages/atlas/src/views/studio/CrtDashboard/CrtDashboard.tsx
Original file line number Diff line number Diff line change
@@ -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

Expand Down Expand Up @@ -50,116 +39,9 @@ export const CrtDashboard = () => {
</Button>
<Button icon={<SvgActionSell />}>Start sale or market</Button>
</TabsContainer>

{currentTab === 1 && (
<HoldersTable
data={[
{
memberId: '1',
transferable: 1000,
allocation: 100,
total: 1000,
vested: 0,
},
]}
isLoading={true}
currentMemberId="1"
/>
)}

{currentTab === 0 && (
<>
<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>
</>
)}
{currentTab === 0 && <CrtDashboardMainTab />}
{currentTab === 1 && <CrtHoldersTab />}
{currentTab === 2 && <CrtRevenueTab />}
</MainContainer>
</LimitedWidthContainer>
)
Expand Down
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>
</>
)
}
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"
/>
)
}
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;
}
}
`

0 comments on commit f671bba

Please sign in to comment.