🧾 Revenue share widget (#4857)

* Initial component

* Story

* Add active state to the component

packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, StoryFn } from '@storybook/react'
+
+import { RevenueShareWidget, RevenueShareWidgetProps } from '@/components/_crt/RevenueShareWidget/RevenueShareWidget'
+
+export default {
+  title: 'crt/RevenueShareWidget',
+  component: RevenueShareWidget,
+  args: {
+    tokenName: 'CBC',
+    userShare: 200,
+    userTokens: 150,
+    shareEndDate: new Date(),
+    onClaim: () => undefined,
+    isActive: false,
+  },
+} as Meta<RevenueShareWidgetProps>
+
+const Template: StoryFn<RevenueShareWidgetProps> = (args) => <RevenueShareWidget {...args} />
+
+export const Active = Template.bind({})
+Active.args = {
+  isActive: true,
+}
+
+export const Inactive = Template.bind({})
+Inactive.args = {
+  isActive: false,
+}

packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.styles.ts

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled'
+
+import { FlexBox } from '@/components/FlexBox'
+import { cVar, media, sizes } from '@/styles'
+
+export const Wrapper = styled(FlexBox)<{ isActive: boolean }>`
+  display: grid;
+  grid-template-columns: 1fr;
+  width: 100%;
+  background-color: ${cVar('colorBackground')};
+  box-shadow: ${(props) => (props.isActive ? `-4px 0 0 0 ${cVar('colorBorderPrimary')}` : 'none')};
+  gap: ${sizes(4)};
+  padding: ${sizes(6)};
+  ${media.sm} {
+    grid-template-columns: 1fr auto;
+  }
+`
+
+export const InfoBox = styled.div`
+  width: 100%;
+  display: grid;
+  gap: ${sizes(4)};
+
+  ${media.sm} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  ${media.md} {
+    grid-template-columns: repeat(4, 1fr);
+  }
+`

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

@@ -0,0 +1,87 @@
+import { ReactElement } from 'react'
+
+import { SvgActionCalendar, SvgJoyTokenMonochrome16 } from '@/assets/icons'
+import { Avatar } from '@/components/Avatar'
+import { FlexBox } from '@/components/FlexBox'
+import { Information } from '@/components/Information'
+import { NumberFormat } from '@/components/NumberFormat'
+import { Text } from '@/components/Text'
+import { Button } from '@/components/_buttons/Button'
+import { InfoBox, Wrapper } from '@/components/_crt/RevenueShareWidget/RevenueShareWidget.styles'
+import { formatDateTime } from '@/utils/time'
+
+export type RevenueShareWidgetProps = {
+  tokenName: string
+  userShare: number
+  userTokens: number
+  shareEndDate: Date
+  onClaim?: () => void
+  isActive: boolean
+}
+export const RevenueShareWidget = ({
+  userShare,
+  userTokens,
+  tokenName,
+  onClaim,
+  shareEndDate,
+  isActive,
+}: RevenueShareWidgetProps) => {
+  return (
+    <Wrapper isActive={isActive} gap={2} alignItems="center">
+      <InfoBox>
+        <Detail title="TOKEN NAME">
+          <FlexBox>
+            <Avatar size={24} />
+            <Text variant="h300" as="h3">
+              ${tokenName}
+            </Text>
+          </FlexBox>
+        </Detail>
+
+        <Detail title="YOUR SHARE">
+          <NumberFormat
+            value={userShare}
+            as="p"
+            variant="t300"
+            withDenomination="after"
+            icon={<SvgJoyTokenMonochrome16 />}
+          />
+        </Detail>
+
+        <Detail title="YOUR TOKENS">
+          <NumberFormat value={userTokens} as="p" variant="t300" withToken customTicker={`$${tokenName}`} />
+        </Detail>
+
+        <Detail title="SHARE ENDS ON">
+          <Text variant="t300" as="p">
+            {formatDateTime(shareEndDate).replace(',', ' at')}
+          </Text>
+        </Detail>
+      </InfoBox>
+      {isActive ? (
+        <Button fullWidth onClick={onClaim}>
+          Claim your share
+        </Button>
+      ) : (
+        <FlexBox alignItems="center">
+          <SvgActionCalendar />
+          <Text variant="t200-strong" as="p">
+            Upcoming
+          </Text>
+          <Information text="lorem ipsum" />
+        </FlexBox>
+      )}
+    </Wrapper>
+  )
+}
+
+export const Detail = ({ title, children }: { title: string; children: ReactElement }) => {
+  return (
+    <FlexBox flow="column">
+      <Text variant="h100" as="h1" color="colorText">
+        {title}
+      </Text>
+      {children}
+    </FlexBox>
+  )
+}