diff --git a/packages/atlas/src/components/_crt/CrtRevenueShareWidget/CrtRevenueShareWidget.styles.ts b/packages/atlas/src/components/_crt/CrtRevenueShareWidget/CrtRevenueShareWidget.styles.ts new file mode 100644 index 0000000000..5f8926a6c9 --- /dev/null +++ b/packages/atlas/src/components/_crt/CrtRevenueShareWidget/CrtRevenueShareWidget.styles.ts @@ -0,0 +1,43 @@ +import styled from '@emotion/styled' + +import { FlexBox } from '@/components/FlexBox' +import { Pill } from '@/components/Pill' +import { Button } from '@/components/_buttons/Button' +import { cVar, sizes } from '@/styles' + +export const EmptyStateBox = styled(FlexBox)` + padding: 0 15%; + text-align: center; + height: 100%; +` + +export const CloseRevenueButton = styled(Button)` + margin-left: auto; +` + +export const CustomPill = styled.div` + background-color: ${cVar('colorBackgroundStrong')}; + display: flex; + align-items: center; + max-width: 100px; + overflow-x: hidden; + gap: ${sizes(1)}; + border-radius: 2px; + padding: ${sizes(1)}; +` + +export const StakersBox = styled(FlexBox)` + position: relative; + height: 30px; + + > div { + position: absolute; + inset: 0; + overflow: hidden; + flex-wrap: nowrap; + } +` + +export const StyledPill = styled(Pill)` + height: 100%; +` diff --git a/packages/atlas/src/components/_crt/CrtRevenueShareWidget/CrtRevenueShareWidget.tsx b/packages/atlas/src/components/_crt/CrtRevenueShareWidget/CrtRevenueShareWidget.tsx index c31cce73e4..abd6c1adab 100644 --- a/packages/atlas/src/components/_crt/CrtRevenueShareWidget/CrtRevenueShareWidget.tsx +++ b/packages/atlas/src/components/_crt/CrtRevenueShareWidget/CrtRevenueShareWidget.tsx @@ -1,4 +1,3 @@ -import styled from '@emotion/styled' import { useMemo } from 'react' import { FullCreatorTokenFragment } from '@/api/queries/__generated__/fragments.generated' @@ -13,9 +12,10 @@ import { RevenueShareProgress } from '@/components/_crt/RevenueShareParticipatio import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader' import { useBlockTimeEstimation } from '@/hooks/useBlockTimeEstimation' import { getMemberAvatar } from '@/providers/assets/assets.helpers' -import { cVar, sizes } from '@/styles' import { formatDateTime, formatDurationShort } from '@/utils/time' +import { CloseRevenueButton, CustomPill, EmptyStateBox, StakersBox, StyledPill } from './CrtRevenueShareWidget.styles' + export type CrtHoldersWidgetProps = { token: FullCreatorTokenFragment onTabSwitch?: () => void @@ -80,7 +80,16 @@ export const CrtRevenueShareWidget = ({ token, onTabSwitch }: CrtHoldersWidgetPr STAKED HOLDERS {activeRevenueShare?.stakers.length ? ( - activeRevenueShare.stakers.map((staker) => ) + + + {activeRevenueShare.stakers.slice(0, Math.min(activeRevenueShare.stakers.length, 5)).map((staker) => ( + + ))} + {activeRevenueShare.stakers.length > 5 ? ( + + ) : null} + + ) : ( No holders staked yet @@ -148,24 +157,3 @@ const StakerPill = ({ id }: { id: string }) => { ) } - -const EmptyStateBox = styled(FlexBox)` - padding: 0 15%; - text-align: center; - height: 100%; -` - -const CloseRevenueButton = styled(Button)` - margin-left: auto; -` - -const CustomPill = styled.div` - background-color: ${cVar('colorBackgroundStrong')}; - display: flex; - align-items: center; - max-width: 100px; - overflow-x: hidden; - gap: ${sizes(1)}; - border-radius: 2px; - padding: ${sizes(1)}; -`