Skip to content

Commit

Permalink
👨 CRT header widget (#4693)
Browse files Browse the repository at this point in the history
* Component

* Story

* Correct styling

* CR fixes

* Conflict fixes

* Replace useRef
  • Loading branch information
WRadoslaw committed Mar 14, 2024
1 parent 2c6de64 commit 6c59aca
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 47 deletions.
2 changes: 1 addition & 1 deletion packages/atlas/src/components/WidgetTile/WidgetTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { Information } from '../Information'

export type WidgetTileProps = {
loading?: boolean
title: string | number
title: string | number | JSX.Element
button?: { text: string } & Omit<ButtonProps, 'children'>
text?: string | number
customNode?: ReactNode
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
LeftPlaceholder,
WidgetPreviewContainer,
} from '@/components/_crt/CreateTokenDrawer/steps/styles'
import { CrtBasicInfoWidget } from '@/components/_crt/CrtBasicInfoWidget'
import { CrtFormWrapper } from '@/components/_crt/CrtFormWrapper'
import { FormField } from '@/components/_inputs/FormField'
import { Input } from '@/components/_inputs/Input'
Expand All @@ -18,8 +19,6 @@ import { useMountEffect } from '@/hooks/useMountEffect'

import { CommonStepProps } from './types'

import { CrtBasicInfoWidget } from '../../CrtBasicInfoWidget/CrtBasicInfoWidget'

const accessOptions = [
{
label: 'Anyone',
Expand Down Expand Up @@ -65,8 +64,19 @@ export const SetupTokenStep = ({ setPrimaryButtonProps, onSubmit, form, setPrevi
<LeftPlaceholder />
<CrtBasicInfoWidget
name={watchedForm.name}
creatorReward={watchedForm.creatorReward}
revenueShare={watchedForm.revenueShare}
titleColor="colorText"
details={[
{
caption: 'REVENUE SHARE',
content: `${watchedForm.revenueShare}%`,
tooltipText: 'Lorem ipsum',
},
{
caption: 'CREATOR REWARD',
content: `${watchedForm.creatorReward}%`,
tooltipText: 'Lorem ipsum',
},
]}
/>
<BottomPlaceholder>
<svg xmlns="http://www.w3.org/2000/svg" width="371" height="163" viewBox="0 0 371 163" fill="none">
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { Meta, StoryFn } from '@storybook/react'

import { JoyTokenIcon } from '@/components/JoyTokenIcon'
import { CrtBasicInfoWidget, CrtBasicInfoWidgetProps } from '@/components/_crt/CrtBasicInfoWidget/CrtBasicInfoWidget'
import { JoystreamProvider } from '@/providers/joystream/joystream.provider'

export default {
title: 'crt/CrtBasicInfoWidget',
component: CrtBasicInfoWidget,
decorators: [
(Story) => (
<JoystreamProvider>
<Story />
</JoystreamProvider>
),
],
} as Meta<CrtBasicInfoWidgetProps>

const Template: StoryFn<CrtBasicInfoWidgetProps> = (args) => <CrtBasicInfoWidget {...args} />

export const Default = Template.bind({})
Default.args = {
name: 'CRT',
details: [
{
caption: 'TOTAL REV.',
content: 65656,
icon: <JoyTokenIcon size={16} variant="silver" />,
tooltipText: 'Lorem ipsum',
},
{
caption: 'REV. SHARE',
content: '80%',
tooltipText: 'Lorem ipsum',
},
{
caption: 'AN. REWARD',
content: '20%',
icon: <JoyTokenIcon size={16} variant="silver" />,
tooltipText: 'Lorem ipsum',
},
],
}
Original file line number Diff line number Diff line change
@@ -1,64 +1,45 @@
import styled from '@emotion/styled'
import { ReactElement, ReactNode, useState } from 'react'

import { JoyTokenIcon } from '@/components/JoyTokenIcon'
import { FlexBox } from '@/components/FlexBox'
import { Color } from '@/components/Text/Text.styles'
import { Tooltip } from '@/components/Tooltip'
import { WidgetTile } from '@/components/WidgetTile'
import { DetailsContent } from '@/components/_nft/NftTile'
import { useMediaMatch } from '@/hooks/useMediaMatch'
import { sizes } from '@/styles'

type CrtBasicInfoWidgetProps = {
export type CrtBasicInfoWidgetProps = {
name?: string
totalRevenue?: string
revenueShare?: number
creatorReward?: number
titleColor?: Color
details: {
caption: string
content: number | string | ReactElement | ReactElement[]
icon?: ReactNode
tooltipText?: string
}[]
}

export const CrtBasicInfoWidget = ({ creatorReward, revenueShare, totalRevenue, name }: CrtBasicInfoWidgetProps) => {
export const CrtBasicInfoWidget = ({ name, details, titleColor }: CrtBasicInfoWidgetProps) => {
const [titleRef, setTitleRef] = useState<HTMLSpanElement | null>(null)
const smMatch = useMediaMatch('sm')

return (
<WidgetTile
title={`$${name || 'ABC'}`}
title={<span ref={setTitleRef}>${name ?? 'ABC'}</span>}
titleVariant="h700"
titleColor={titleColor ?? 'colorTextStrong'}
customNode={
<DetailsBox>
{totalRevenue && (
<DetailsContent
avoidIconStyling
tileSize={smMatch ? 'big' : 'bigSmall'}
caption="TOTAL REVENUE"
content={totalRevenue}
icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
withDenomination
/>
)}
{revenueShare && (
<FlexBox gap={5}>
<Tooltip reference={titleRef} text="Token name" placement="top-start" />
{details.map((detail, idx) => (
<DetailsContent
{...detail}
key={idx}
avoidIconStyling
tileSize={smMatch ? 'big' : 'bigSmall'}
caption="REVENUE SHARE"
content={`${revenueShare}%`}
icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
withDenomination
/>
)}
{creatorReward && (
<DetailsContent
avoidIconStyling
tileSize={smMatch ? 'big' : 'bigSmall'}
caption="CREATOR REWARD"
content={`${creatorReward}%`}
icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
withDenomination
/>
)}
</DetailsBox>
))}
</FlexBox>
}
/>
)
}

const DetailsBox = styled.div`
display: flex;
gap: ${sizes(4)};
`
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './CrtBasicInfoWidget'

0 comments on commit 6c59aca

Please sign in to comment.