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)};
-`