🪂 Revenue share participation widget (#5003)

* Make sure widget do not show unnecessary gap when there is no button

* Create new widget for revenue share participation

* Use widget on view

* Minor fix on router

Author: WRadoslaw

packages/atlas/src/components/WidgetTile/WidgetTile.styles.ts

@@ -19,16 +19,16 @@ export const Wrapper = styled.div`
     padding: ${sizes(6)};
   }
 `
-export const Content = styled.div`
+export const Content = styled.div<{ withButton?: boolean }>`
   display: grid;
   align-self: flex-end;
   gap: ${sizes(4)};
   padding-right: ${sizes(2)};
 
   ${media.md} {
     gap: ${sizes(6)};
-    grid-template-columns: 1fr auto;
     align-items: center;
+    ${(props) => (props.withButton ? 'grid-template-columns: 1fr auto;' : '')}
   }
   ${media.lg} {
     gap: 0;

packages/atlas/src/components/WidgetTile/WidgetTile.tsx

@@ -67,7 +67,7 @@ export const WidgetTile: FC<WidgetTileProps> = ({
         {withTooltip && <Information {...tooltip} />}
         {withCustomTopRightNode && customTopRightNode}
       </Title>
-      <Content>
+      <Content withButton={!!button}>
         {withCustomNode && customNode}
         {loading && (
           <>

packages/atlas/src/components/_crt/RevenueShareParticipationWidget.tsx

@@ -0,0 +1,101 @@
+import styled from '@emotion/styled'
+
+import { SvgActionCheck, SvgJoyTokenMonochrome16 } from '@/assets/icons'
+import { FlexBox } from '@/components/FlexBox'
+import { Pill } from '@/components/Pill'
+import { Text } from '@/components/Text'
+import { Tooltip } from '@/components/Tooltip'
+import { WidgetTile } from '@/components/WidgetTile'
+import { Button } from '@/components/_buttons/Button'
+import { cVar } from '@/styles'
+
+const data = {
+  userTokensToUnlock: 20,
+  tokensUnlocked: 120,
+  totalTokensToUnlock: 200,
+  holders: 5,
+  holdersUnlocked: 3,
+}
+export const RevenueShareParticipationWidget = () => {
+  const { userTokensToUnlock, totalTokensToUnlock, tokensUnlocked, holdersUnlocked, holders } = data
+  return (
+    <WidgetTile
+      title="Revenue share participation"
+      titleVariant="h400"
+      customTopRightNode={
+        userTokensToUnlock ? (
+          <Button size="small">Unlock your tokens</Button>
+        ) : (
+          <Tooltip
+            placement="top-end"
+            text="You already unlocked all of your previously staked tokens. All of your tokens can be found in my portfolio page."
+          >
+            <StyledPill icon={<SvgActionCheck />} size="large" label="Unlocked your tokens" />
+          </Tooltip>
+        )
+      }
+      customNode={
+        <FlexBox flow="column" gap={6} width="100%">
+          <FlexBox justifyContent="space-between">
+            <FlexBox flow="column">
+              <Text variant="h100" as="h1" color="colorTextMuted">
+                HOLDERS EARNINGS
+              </Text>
+              <FlexBox alignItems="center">
+                <SvgJoyTokenMonochrome16 />
+                <Text variant="h400" as="h4">
+                  {tokensUnlocked}/{totalTokensToUnlock}
+                </Text>
+              </FlexBox>
+
+              <Text variant="t100" as="p" color="colorText">
+                ${tokensUnlocked}/{totalTokensToUnlock}
+              </Text>
+            </FlexBox>
+
+            <FlexBox flow="column" alignItems="end">
+              <Text variant="h100" as="h1" color="colorTextMuted">
+                ENDED ON
+              </Text>
+              <Text variant="h400" as="h4">
+                {holdersUnlocked}/{holders}
+              </Text>
+              <Text variant="t100" as="p" color="colorText">
+                {Math.round((holdersUnlocked / holders) * 100)}% holders
+              </Text>
+            </FlexBox>
+          </FlexBox>
+
+          <ProgressBar progress={Math.round((holdersUnlocked / holders) * 100)} />
+        </FlexBox>
+      }
+    />
+  )
+}
+
+const ProgressBar = styled.div<{ progress: number }>`
+  height: 12px;
+  width: 100%;
+  overflow: hidden;
+  border-radius: ${cVar('radiusLarge')};
+  background-color: ${cVar('colorCoreNeutral700')};
+  position: relative;
+
+  ::after {
+    height: 12px;
+    position: absolute;
+    left: 0;
+    border-radius: ${cVar('radiusLarge')};
+    width: ${(props) => `${props.progress}%`};
+    content: ' ';
+    background-color: ${cVar('colorCoreNeutral700Lighten')};
+  }
+`
+
+const StyledPill = styled(Pill)`
+  border-radius: 999px;
+
+  path {
+    fill: ${cVar('colorTextSuccess')};
+  }
+`

packages/atlas/src/views/studio/CrtDashboard/tabs/CrtRevenueTab.tsx

@@ -1,60 +1,50 @@
-import styled from '@emotion/styled'
-
 import { SvgJoyTokenMonochrome24 } from '@/assets/icons'
+import { GridItem, LayoutGrid } from '@/components/LayoutGrid'
 import { NumberFormat } from '@/components/NumberFormat'
 import { RatioPreview } from '@/components/RatioPreview/RatioPreview'
 import { WidgetTile } from '@/components/WidgetTile'
+import { RevenueShareParticipationWidget } from '@/components/_crt/RevenueShareParticipationWidget'
 import { RevenueShareStateWidget } from '@/components/_crt/RevenueShareStateWidget'
-import { media, sizes } from '@/styles'
 
 const DATA = {
   revenueShare: {
     endDate: new Date(Date.now() + 1000000),
   },
 }
+
 export const CrtRevenueTab = () => {
   return (
-    <WidgetContainer>
-      <RevenueShareStateWidget end={DATA.revenueShare.endDate} />
-      <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>
+    <LayoutGrid>
+      <GridItem colSpan={{ base: 12, sm: 4 }}>
+        <RevenueShareStateWidget end={DATA.revenueShare.endDate} />
+      </GridItem>
+      <GridItem colSpan={{ base: 12, sm: 4 }}>
+        <WidgetTile
+          title="CHANNEL BALANCE"
+          customNode={
+            <NumberFormat value={200} icon={<SvgJoyTokenMonochrome24 />} variant="h500" as="p" withDenomination />
+          }
+          tooltip={{
+            text: 'Lorem ipsum',
+          }}
+        />
+      </GridItem>
+      <GridItem colSpan={{ base: 12, sm: 4 }}>
+        <WidgetTile
+          title="REVENUE SHARE RATIO"
+          customNode={
+            <RatioPreview
+              ratios={[
+                [20, 'Holders'],
+                [80, 'Channel'],
+              ]}
+            />
+          }
+        />
+      </GridItem>
+      <GridItem colSpan={{ base: 12 }}>
+        <RevenueShareParticipationWidget />
+      </GridItem>
+    </LayoutGrid>
   )
 }
-
-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;
-    }
-  }
-`