Introduce text timer and fix overflowing tables

WRadoslaw · Dec 12, 2023 · d30c9b0 · d30c9b0
1 parent db6512d
commit d30c9b0
Show file tree

Hide file tree

Showing 22 changed files with 285 additions and 143 deletions.
diff --git a/packages/atlas/src/components/FlexBox/FlexBox.ts b/packages/atlas/src/components/FlexBox/FlexBox.ts
@@ -12,6 +12,7 @@ type FlexBoxProps = {
   width?: string | number
   padding?: number
   height?: string | number
+  minWidth?: string | number
 }
 
 export const FlexBox = styled.div<FlexBoxProps>`
@@ -24,6 +25,7 @@ export const FlexBox = styled.div<FlexBoxProps>`
     justify-content: ${props.justifyContent ?? 'start'};
     width: ${props.width ?? '100%'};
     height: ${props.height ?? 'initial'};
+    min-width: ${props.minWidth ?? 'initial'};
   `}
 
   ${(props) =>

diff --git a/packages/atlas/src/components/Table/Table.styles.ts b/packages/atlas/src/components/Table/Table.styles.ts
@@ -72,9 +72,10 @@ export const EmptyTableDescription = styled(Text)`
   margin-top: ${sizes(2)};
 `
 
-export const PageWrapper = styled.div`
+export const PageWrapper = styled.div<{ minWidth: number }>`
   display: flex;
   gap: ${sizes(6)};
+  min-width: ${(props) => `${props.minWidth}px`};
 `
 
 export const RightAlignedHeader = styled.div`
@@ -96,3 +97,13 @@ export const ColumnBox = styled.div`
   width: 100%;
   align-items: center;
 `
+
+export const TableWrapper = styled.div<{ isEmpty?: boolean }>`
+  scrollbar-width: none;
+  position: relative;
+  overflow: auto;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`
diff --git a/packages/atlas/src/components/Table/Table.tsx b/packages/atlas/src/components/Table/Table.tsx
@@ -1,5 +1,6 @@
-import { ReactElement, useMemo } from 'react'
+import { ReactElement, useMemo, useRef } from 'react'
 import { Column, useFlexLayout, usePagination, useTable } from 'react-table'
+import useDraggableScroll from 'use-draggable-scroll'
 
 import { PaginationProps } from '@/components/Pagination'
 import { Text } from '@/components/Text'
@@ -12,6 +13,7 @@ import {
   PageWrapper,
   StyledPagination,
   TableBase,
+  TableWrapper,
   Td,
   Th,
   Thead,
@@ -32,6 +34,7 @@ export type TableProps<T = object> = {
   }
   className?: string
   pagination?: PaginationProps
+  minWidth: number
 }
 
 export const Table = <T extends object>({
@@ -44,7 +47,10 @@ export const Table = <T extends object>({
   onRowClick,
   className,
   pagination,
+  minWidth,
 }: TableProps<T>) => {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const { onMouseDown } = useDraggableScroll(scrollRef, { direction: 'horizontal' })
   const {
     getTableProps,
     getTableBodyProps,
@@ -75,54 +81,56 @@ export const Table = <T extends object>({
         </Text>
       )}
       {data.length ? (
-        <PageWrapper>
-          {page.map((subpage, idx) => (
-            <TableBase className="table-base" {...getTableProps()} key={`table-slice-${idx}`}>
-              <Thead className="table-header">
-                {headerGroups.map((headerGroup) => (
-                  <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.getHeaderGroupProps().key}>
-                    {headerGroup.headers.map((column) => (
-                      <Th
-                        variant="h100"
-                        as="th"
-                        color="colorText"
-                        {...column.getHeaderProps({ style: { width: column.width } })}
-                        key={column.getHeaderProps().key}
-                      >
-                        {column.render('Header')}
-                      </Th>
-                    ))}
-                  </tr>
-                ))}
-              </Thead>
-              <tbody {...getTableBodyProps()}>
-                {subpage.map((row, idx) => {
-                  prepareRow(row)
-                  return (
-                    <tr
-                      className="table-row"
-                      {...row.getRowProps()}
-                      onClick={() => onRowClick?.(idx)}
-                      key={row.getRowProps().key}
-                    >
-                      {row.cells.map((cell) => (
-                        <Td
-                          variant="t100"
-                          as="td"
-                          {...cell.getCellProps()}
-                          key={cell.getCellProps().key}
-                          className="table-cell"
+        <TableWrapper ref={scrollRef} onMouseDown={onMouseDown}>
+          <PageWrapper minWidth={minWidth}>
+            {page.map((subpage, idx) => (
+              <TableBase className="table-base" {...getTableProps()} key={`table-slice-${idx}`}>
+                <Thead className="table-header">
+                  {headerGroups.map((headerGroup) => (
+                    <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.getHeaderGroupProps().key}>
+                      {headerGroup.headers.map((column) => (
+                        <Th
+                          variant="h100"
+                          as="th"
+                          color="colorText"
+                          {...column.getHeaderProps({ style: { width: column.width } })}
+                          key={column.getHeaderProps().key}
                         >
-                          {cell.render('Cell')}
-                        </Td>
+                          {column.render('Header')}
+                        </Th>
                       ))}
                     </tr>
-                  )
-                })}
-              </tbody>
-            </TableBase>
-          ))}
-        </PageWrapper>
+                  ))}
+                </Thead>
+                <tbody {...getTableBodyProps()}>
+                  {subpage.map((row, idx) => {
+                    prepareRow(row)
+                    return (
+                      <tr
+                        className="table-row"
+                        {...row.getRowProps()}
+                        onClick={() => onRowClick?.(idx)}
+                        key={row.getRowProps().key}
+                      >
+                        {row.cells.map((cell) => (
+                          <Td
+                            variant="t100"
+                            as="td"
+                            {...cell.getCellProps()}
+                            key={cell.getCellProps().key}
+                            className="table-cell"
+                          >
+                            {cell.render('Cell')}
+                          </Td>
+                        ))}
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </TableBase>
+            ))}
+          </PageWrapper>
+        </TableWrapper>
       ) : emptyState ? (
         <EmptyTableContainer>
           {emptyState.icon}

diff --git a/packages/atlas/src/components/TablePaymentsHistory/TablePaymentsHistory.tsx b/packages/atlas/src/components/TablePaymentsHistory/TablePaymentsHistory.tsx
@@ -69,6 +69,7 @@ export const TablePaymentsHistory: FC<TablePaymentsHistoryProps> = ({ data, isLo
         </DialogText>
       </DialogModal>
       <Table
+        minWidth={900}
         title="History"
         columns={COLUMNS}
         data={isLoading ? tableLoadingData : mappedData}

diff --git a/packages/atlas/src/components/TextTimer/TextTimer.tsx b/packages/atlas/src/components/TextTimer/TextTimer.tsx
@@ -0,0 +1,109 @@
+import { FlexBox } from '@/components/FlexBox'
+import { Text, TextVariant } from '@/components/Text'
+import { useBlockTimeEstimation } from '@/hooks/useBlockTimeEstimation'
+import { useMsTimestamp } from '@/hooks/useMsTimestamp'
+import { formatDateTimeAt, formatDurationShort } from '@/utils/time'
+
+type CommonProps = {
+  mainVariant?: TextVariant
+  subVariant?: TextVariant
+}
+
+type BlockTextTime = {
+  type: 'block'
+  atBlock: number
+} & CommonProps
+
+type TimestampTextTimer = {
+  type: 'timestamp'
+  date: Date
+} & CommonProps
+
+export type TextTimerProps = TimestampTextTimer | BlockTextTime
+
+/*
+ * Timer will:
+ *   - above week, display ony date as: 20 September 2042 at 12:00
+ *   - under week, timer that will run down default color
+ *   - under a day, timer that will run down color red
+ */
+export const TextTimer = (props: TextTimerProps) => {
+  return props.type === 'block' ? <BlockTextTimer {...props} /> : <TimestampTextTimer {...props} />
+}
+
+const BlockTextTimer = ({ atBlock, mainVariant, subVariant }: BlockTextTime) => {
+  const { convertBlockToMsTimestamp } = useBlockTimeEstimation()
+  const blockTimestamp = convertBlockToMsTimestamp(atBlock ?? 0)
+  const blockDate = blockTimestamp ? new Date(blockTimestamp) : null
+  const currentTimestamp = Date.now()
+  const daysLeft = blockDate ? (blockDate.getTime() - currentTimestamp) / (1000 * 60 * 60 * 24) : 999
+  const isUnderDay = daysLeft <= 1
+  const isBelowWeek = daysLeft <= 7
+  const isPast = daysLeft <= 0
+
+  if (isPast) {
+    return (
+      <Text variant={mainVariant ? mainVariant : 'h500'} as="h5">
+        {blockDate ? formatDateTimeAt(blockDate) : 'N/A'}
+      </Text>
+    )
+  }
+
+  return (
+    <FlexBox flow="column">
+      <Text
+        variant={mainVariant ? mainVariant : 'h500'}
+        as="span"
+        color={isUnderDay ? 'colorTextError' : 'colorTextStrong'}
+      >
+        {blockDate
+          ? isBelowWeek
+            ? formatDurationShort(Math.round((blockDate.getTime() - currentTimestamp) / 1000))
+            : formatDateTimeAt(blockDate)
+          : 'N/A'}
+      </Text>
+      {isBelowWeek && (
+        <Text variant={subVariant ? subVariant : 't100'} as="span" color={isUnderDay ? 'colorTextError' : 'colorText'}>
+          {isUnderDay ? 'Less than a day' : blockDate ? formatDateTimeAt(blockDate) : 'N/A'}
+        </Text>
+      )}
+    </FlexBox>
+  )
+}
+
+const TimestampTextTimer = ({ date, subVariant, mainVariant }: TimestampTextTimer) => {
+  const currentTimestamp = useMsTimestamp()
+  const daysLeft = (date.getTime() - currentTimestamp) / (1000 * 60 * 60 * 24)
+  const isUnderDay = daysLeft <= 1
+  const isBelowWeek = daysLeft <= 7
+  const isPast = daysLeft <= 0
+
+  if (isPast) {
+    return (
+      <Text variant={mainVariant ? mainVariant : 'h500'} as="span">
+        {date ? formatDateTimeAt(date) : 'N/A'}
+      </Text>
+    )
+  }
+
+  return (
+    <FlexBox flow="column">
+      <Text
+        variant={mainVariant ? mainVariant : 'h500'}
+        as="span"
+        color={isUnderDay ? 'colorTextError' : 'colorTextStrong'}
+      >
+        {date
+          ? isBelowWeek
+            ? formatDurationShort(Math.round((date.getTime() - currentTimestamp) / 1000))
+            : formatDateTimeAt(date)
+          : 'N/A'}
+      </Text>
+      {isBelowWeek && (
+        <Text variant={subVariant ? subVariant : 't100'} as="span" color={isUnderDay ? 'colorTextError' : 'colorText'}>
+          {isUnderDay ? 'Less than a day' : date ? formatDateTimeAt(date) : 'N/A'}
+        </Text>
+      )}
+    </FlexBox>
+  )
+}
diff --git a/packages/atlas/src/components/TopSellingChannelsTable/TopSellingChannelsTable.tsx b/packages/atlas/src/components/TopSellingChannelsTable/TopSellingChannelsTable.tsx
@@ -1,6 +1,5 @@
 import BN from 'bn.js'
-import { useMemo, useRef, useState } from 'react'
-import useDraggableScroll from 'use-draggable-scroll'
+import { useMemo, useState } from 'react'
 
 import {
   GetTopSellingChannelsFromThreePeriodsQuery,
@@ -22,7 +21,6 @@ import { useMediaMatch } from '@/hooks/useMediaMatch'
 import {
   JoyAmountWrapper,
   NftSoldText,
-  ScrollWrapper,
   SenderItemIconsWrapper,
   SkeletonChannelContainer,
   StyledLink,
@@ -75,9 +73,6 @@ export const TopSellingChannelsTable = () => {
     },
   })
 
-  const ref = useRef<HTMLDivElement>(null)
-  const { onMouseDown } = useDraggableScroll(ref, { direction: 'horizontal' })
-
   const lgMatch = useMediaMatch('lg')
   const mappedData: TableProps['data'] = useMemo(() => {
     return loading
@@ -184,9 +179,14 @@ export const TopSellingChannelsTable = () => {
           },
         },
         children: [
-          <ScrollWrapper key="single" ref={ref} onMouseDown={onMouseDown}>
-            <StyledTable emptyState={tableEmptyState} columns={COLUMNS} data={mappedData} doubleColumn={lgMatch} />
-          </ScrollWrapper>,
+          <StyledTable
+            key="single"
+            minWidth={528}
+            emptyState={tableEmptyState}
+            columns={COLUMNS}
+            data={mappedData}
+            doubleColumn={lgMatch}
+          />,
         ],
       }}
     />

diff --git a/packages/atlas/src/components/WidgetTile/WidgetTile.styles.ts b/packages/atlas/src/components/WidgetTile/WidgetTile.styles.ts
@@ -33,14 +33,15 @@ export const Content = styled.div<{ withButton?: boolean }>`
 `
 
 export const Title = styled.div<{ hasTooltip: boolean; marginBottom?: number }>`
+  ${commonGridStyles};
+
   grid-template-columns: 1fr auto;
   gap: ${({ hasTooltip }) => (hasTooltip ? sizes(2) : 'unset')};
-  margin-bottom: ${({ hasTooltip, marginBottom }) => sizes(marginBottom ?? hasTooltip ? 0 : 2)};
+  margin-bottom: ${({ hasTooltip, marginBottom }) => sizes(marginBottom ? marginBottom : hasTooltip ? 0 : 2)}!important;
   margin-top: ${({ hasTooltip }) => (hasTooltip ? sizes(-2) : 'unset')};
-  ${commonGridStyles};
 
   ${media.md} {
-    margin-bottom: ${({ hasTooltip }) => sizes(hasTooltip ? 2 : 4)};
+    margin-bottom: ${({ marginBottom, hasTooltip }) => sizes(marginBottom ? marginBottom : hasTooltip ? 2 : 4)};
   }
 `
 

diff --git a/packages/atlas/src/components/YppReferralTable/YppReferralTable.tsx b/packages/atlas/src/components/YppReferralTable/YppReferralTable.tsx
@@ -30,7 +30,14 @@ export const YppReferralTable = ({ isLoading, data }: YppReferralTableProps) =>
       })),
     [data]
   )
-  return <Table title="Channels you referred" columns={COLUMNS} data={isLoading ? tableLoadingData : mappedData} />
+  return (
+    <Table
+      minWidth={600}
+      title="Channels you referred"
+      columns={COLUMNS}
+      data={isLoading ? tableLoadingData : mappedData}
+    />
+  )
 }
 
 const Tier = ({ subscribers }: { subscribers: number }) => {

diff --git a/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx b/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx
@@ -49,7 +49,13 @@ export const AmmTransactionsTable = ({ data }: AmmTransactionsTableProps) => {
   )
 
   return (
-    <StyledTable title="Market transactions" data={mappedData ?? []} columns={COLUMNS} emptyState={tableEmptyState} />
+    <StyledTable
+      minWidth={900}
+      title="Market transactions"
+      data={mappedData ?? []}
+      columns={COLUMNS}
+      emptyState={tableEmptyState}
+    />
   )
 }