Add logic for overflowing stakers

WRadoslaw · Oct 31, 2023 · 63a558b · 63a558b
1 parent e4b8722
commit 63a558b
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 24 deletions.
diff --git a/packages/atlas/src/components/_crt/CrtRevenueShareWidget/CrtRevenueShareWidget.styles.ts 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
@@ -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
             </Text>
             {activeRevenueShare?.stakers.length ? (
-              activeRevenueShare.stakers.map((staker) => <StakerPill key={staker.id} id={staker.account.member.id} />)
+              <StakersBox>
+                <FlexBox>
+                  {activeRevenueShare.stakers.slice(0, Math.min(activeRevenueShare.stakers.length, 5)).map((staker) => (
+                    <StakerPill key={staker.id} id={staker.account.member.id} />
+                  ))}
+                  {activeRevenueShare.stakers.length > 5 ? (
+                    <StyledPill label={activeRevenueShare.stakers.length - 5} />
+                  ) : null}
+                </FlexBox>
+              </StakersBox>
             ) : (
               <Text variant="h400" as="p">
                 No holders staked yet
@@ -148,24 +157,3 @@ const StakerPill = ({ id }: { id: string }) => {
     </CustomPill>
   )
 }
-
-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)};
-`