From 5dea8e9f330f5be2c128757099a461617dd10f4a Mon Sep 17 00:00:00 2001
From: WRadoslaw <92513933+WRadoslaw@users.noreply.github.com>
Date: Fri, 15 Sep 2023 22:29:30 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=BE=20Revenue=20share=20widget=20(#485?=
 =?UTF-8?q?7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Initial component

* Story

* Add active state to the component
---
 .../RevenueShareWidget.stories.tsx            | 28 ++++++
 .../RevenueShareWidget.styles.ts              | 31 +++++++
 .../RevenueShareWidget/RevenueShareWidget.tsx | 87 +++++++++++++++++++
 3 files changed, 146 insertions(+)
 create mode 100644 packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.stories.tsx
 create mode 100644 packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.styles.ts
 create mode 100644 packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.tsx

diff --git a/packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.stories.tsx b/packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.stories.tsx
new file mode 100644
index 0000000000..1eb1996773
--- /dev/null
+++ b/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,
+}
diff --git a/packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.styles.ts b/packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.styles.ts
new file mode 100644
index 0000000000..e864fea5bf
--- /dev/null
+++ b/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);
+  }
+`
diff --git a/packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.tsx b/packages/atlas/src/components/_crt/RevenueShareWidget/RevenueShareWidget.tsx
new file mode 100644
index 0000000000..129b35b0e1
--- /dev/null
+++ b/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>
+  )
+}