🚦 CRT Token status widget

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

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/react'
+
+import { CrtStatusWidgetProps, CrtStatusWidget as _CrtStatusWidget } from './CrtStatusWidget'
+
+export default {
+  title: 'crt/CrtStatusWidget',
+  component: _CrtStatusWidget,
+  args: {
+    name: 'CRT',
+    creationDate: new Date(),
+    supply: 20_000_000,
+    marketCap: 2_222_000,
+    revenue: 234_000,
+    revenueShare: 200_000,
+    transactionVolume: 2_222_222,
+  },
+} as Meta<CrtStatusWidgetProps>
+
+export const CrtStatusWidget = {}

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

@@ -0,0 +1,59 @@
+import styled from '@emotion/styled'
+
+import { Text } from '@/components/Text'
+import { WidgetTile } from '@/components/WidgetTile'
+import { cVar, sizes } from '@/styles'
+
+export const DetailsBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${sizes(6)};
+  margin-top: ${sizes(6)};
+`
+export const ExpandableContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  margin-top: ${sizes(4)};
+  cursor: pointer;
+
+  button {
+    grid-row-end: span 2;
+  }
+
+  p {
+    color: ${cVar('colorText')};
+  }
+`
+export const StatisticsContainer = styled.div`
+  ::before {
+    content: '';
+    display: block;
+    position: absolute;
+    border-top: solid 1px ${cVar('colorBorderMutedAlpha')};
+    left: 0;
+    right: 0;
+  }
+`
+
+export const SupplyLine = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${sizes(1)};
+`
+
+export const LabelText = styled(Text)`
+  color: ${cVar('colorText')};
+`
+
+export const Widget = styled(WidgetTile)`
+  position: relative;
+
+  > :first-child {
+    margin-bottom: ${sizes(1)};
+  }
+
+  > :last-child {
+    grid-template-columns: 1fr;
+  }
+`

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

@@ -0,0 +1,121 @@
+import { FC, useState } from 'react'
+
+import { Information } from '@/components/Information'
+import { JoyTokenIcon } from '@/components/JoyTokenIcon'
+import { NumberFormat, NumberFormatProps } from '@/components/NumberFormat'
+import { Text } from '@/components/Text'
+import { ExpandButton } from '@/components/_buttons/ExpandButton'
+import { DetailsContent } from '@/components/_nft/NftTile'
+import { useMediaMatch } from '@/hooks/useMediaMatch'
+import { formatDate } from '@/utils/time'
+
+import {
+  DetailsBox,
+  ExpandableContainer,
+  LabelText,
+  StatisticsContainer,
+  SupplyLine,
+  Widget,
+} from './CrtStatusWidget.styles'
+
+type Amount = NumberFormatProps['value']
+export type CrtStatusWidgetProps = {
+  name: string
+  creationDate: Date
+  supply: Amount
+  marketCap: Amount
+  revenue: Amount
+  revenueShare: Amount
+  transactionVolume: Amount
+}
+
+export const CrtStatusWidget: FC<CrtStatusWidgetProps> = ({
+  name,
+  creationDate,
+  supply,
+  marketCap,
+  revenue,
+  revenueShare,
+  transactionVolume,
+}) => {
+  const [isExpanded, expand] = useState(true)
+  const smMatch = useMediaMatch('sm')
+
+  const ticker = `$${name}`
+
+  return (
+    <Widget
+      title="Status"
+      customNode={
+        <>
+          <Text as="h4" variant="h500">
+            No active sale
+          </Text>
+
+          <SupplyLine>
+            <LabelText as="span" variant="t100">
+              Total supply:
+            </LabelText>
+            <NumberFormat as="span" variant="t100" format="short" value={supply} customTicker={ticker} withToken />
+            <Information />
+          </SupplyLine>
+
+          <StatisticsContainer onClick={() => expand(!isExpanded)}>
+            <ExpandableContainer>
+              <Text as="h3" variant="h500">
+                Statistics
+              </Text>
+              <ExpandButton expanded={isExpanded} />
+              <Text as="p" variant="t100">
+                Token creation date, Revenue, Volume, Vesting
+              </Text>
+            </ExpandableContainer>
+
+            {isExpanded && (
+              <DetailsBox>
+                <DetailsContent
+                  avoidIconStyling
+                  tileSize={smMatch ? 'big' : 'bigSmall'}
+                  caption="Token creation date"
+                  content={formatDate(creationDate)}
+                />
+                <DetailsContent
+                  avoidIconStyling
+                  tileSize={smMatch ? 'big' : 'bigSmall'}
+                  caption="Market cap"
+                  content={marketCap}
+                  icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
+                  withDenomination
+                />
+                <DetailsContent
+                  avoidIconStyling
+                  tileSize={smMatch ? 'big' : 'bigSmall'}
+                  caption="Total revenue"
+                  content={revenue}
+                  icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
+                  withDenomination
+                />
+                <DetailsContent
+                  avoidIconStyling
+                  tileSize={smMatch ? 'big' : 'bigSmall'}
+                  caption="Total revenue Shares"
+                  content={revenueShare}
+                  icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
+                  withDenomination
+                />
+                <DetailsContent
+                  avoidIconStyling
+                  tileSize={smMatch ? 'big' : 'bigSmall'}
+                  caption="Total Transaction volume"
+                  content={transactionVolume}
+                  icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
+                  withDenomination
+                />
+              </DetailsBox>
+            )}
+          </StatisticsContainer>
+        </>
+      }
+    />
+  )
+}

packages/atlas/src/components/_crt/CrtStatusWidget/index.ts

@@ -0,0 +1 @@
+export * from './CrtStatusWidget'

packages/atlas/src/components/_nft/NftTile/NftTileDetails.tsx

@@ -1,3 +1,4 @@
+import BN from 'bn.js'
 import { FC, ReactElement, ReactNode, memo, useEffect, useId, useMemo, useRef, useState } from 'react'
 import useResizeObserver from 'use-resize-observer'
 
@@ -256,7 +257,7 @@ type DetailsContentProps = {
   caption: string
   icon?: ReactNode
   avoidIconStyling?: boolean
-  content: number | string | ReactElement | ReactElement[]
+  content: number | BN | string | ReactElement | ReactElement[]
   secondary?: boolean
   tileSize: TileSize | undefined
   withDenomination?: boolean
@@ -288,7 +289,7 @@ export const DetailsContent: FC<DetailsContentProps> = memo(
             <Text as="span" variant={getSize().content} color={secondary ? 'colorText' : undefined}>
               {content}
             </Text>
-          ) : typeof content === 'number' ? (
+          ) : BN.isBN(content) || typeof content === 'number' ? (
             <NumberFormat
               as="span"
               icon={icon}