Merge branch 'main' into cleanup

centrifuge · Oct 26, 2023 · bda0033 · bda0033
2 parents 24b0460 + ba15f7b
commit bda0033
Show file tree

Hide file tree

Showing 40 changed files with 473 additions and 351 deletions.
diff --git a/centrifuge-app/.env-config/.env.altair b/centrifuge-app/.env-config/.env.altair
@@ -17,4 +17,4 @@ REACT_APP_WHITELISTED_ACCOUNTS=
 REACT_APP_REWARDS_TREE_URL=https://storage.googleapis.com/rad-rewards-trees-kovan-staging/latest.json
 REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALJqPUHFzDR2VkoQYWefPQyzjGzKznNny2smXGQpSf3aMw19
 REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
-REACT_APP_TINLAKE_SUBGRAPH_URL=https://graph.centrifuge.io/tinlake
+REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/1.0.2/gn
diff --git a/centrifuge-app/.env-config/.env.catalyst b/centrifuge-app/.env-config/.env.catalyst
@@ -17,4 +17,4 @@ REACT_APP_WHITELISTED_ACCOUNTS=
 REACT_APP_REWARDS_TREE_URL=https://storage.googleapis.com/rad-rewards-trees-kovan-staging/latest.json
 REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=4bo2vNkwZtr2PuqppWwqya6dPC8MzxqZ4kgnAoTZyKo9Kxq8
 REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
-REACT_APP_TINLAKE_SUBGRAPH_URL=https://graph.centrifuge.io/tinlake
+REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/1.0.2/gn
diff --git a/centrifuge-app/.env-config/.env.demo b/centrifuge-app/.env-config/.env.demo
@@ -17,4 +17,4 @@ REACT_APP_NETWORK=centrifuge
 REACT_APP_REWARDS_TREE_URL=https://storage.googleapis.com/rad-rewards-trees-kovan-staging/latest.json
 REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALwmJutBq95s41U9fWnoApCUgvPqPGTh1GSmFnQh5f9fWo93
 REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
-REACT_APP_TINLAKE_SUBGRAPH_URL=https://graph.centrifuge.io/tinlake
+REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/1.0.2/gn
diff --git a/centrifuge-app/.env-config/.env.development b/centrifuge-app/.env-config/.env.development
@@ -14,7 +14,7 @@ REACT_APP_SUBSCAN_URL=
 REACT_APP_TINLAKE_NETWORK=goerli
 REACT_APP_INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
 REACT_APP_WHITELISTED_ACCOUNTS=
-REACT_APP_TINLAKE_SUBGRAPH_URL=https://graph.centrifuge.io/tinlake
+REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/1.0.2/gn
 REACT_APP_REWARDS_TREE_URL=https://storage.googleapis.com/rad-rewards-trees-kovan-staging/latest.json
 REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
 REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kAJ27w29x7gHM75xajP2yXVLjVBaKmmUTxHwgRuCoAcWaoEiz
diff --git a/centrifuge-app/.env-config/.env.example b/centrifuge-app/.env-config/.env.example
@@ -17,4 +17,4 @@ REACT_APP_WHITELISTED_ACCOUNTS=''
 REACT_APP_REWARDS_TREE_URL=https://storage.googleapis.com/rad-rewards-trees-kovan-staging/latest.json
 REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALJqPUHFzDR2VkoQYWefPQyzjGzKznNny2smXGQpSf3aMw19
 REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
-REACT_APP_TINLAKE_SUBGRAPH_URL=https://graph.centrifuge.io/tinlake
+REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/1.0.2/gn
diff --git a/centrifuge-app/.env-config/.env.production b/centrifuge-app/.env-config/.env.production
@@ -17,4 +17,4 @@ REACT_APP_WHITELISTED_ACCOUNTS=''
 REACT_APP_REWARDS_TREE_URL=https://storage.googleapis.com/rad-rewards-trees-mainnet-production/latest.json
 REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALJqPUHFzDR2VkoQYWefPQyzjGzKznNny2smXGQpSf3aMw19
 REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
-REACT_APP_TINLAKE_SUBGRAPH_URL=https://graph.centrifuge.io/tinlake
+REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/1.0.2/gn
diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
@@ -1,4 +1,4 @@
-import { Card, IconArrowDown, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Grid, IconChevronDown, IconChevronUp, Shelf, Stack, Text } from '@centrifuge/fabric'
 import css from '@styled-system/css'
 import BN from 'bn.js'
 import * as React from 'react'
@@ -18,7 +18,6 @@ export type DataTableProps<T = any> = {
   onRowClicked?: (row: T) => string | LinkProps['to']
   defaultSortKey?: string
   defaultSortOrder?: OrderBy
-  rounded?: boolean
   hoverable?: boolean
   summary?: T
   pageSize?: number
@@ -31,7 +30,6 @@ export type Column = {
   header: string | React.ReactElement
   cell: (row: any, index: number) => React.ReactNode
   align?: string
-  flex?: string
   sortKey?: string
   width?: string
 }
@@ -55,7 +53,6 @@ export const DataTable = <T extends Record<string, any>>({
   keyField,
   onRowClicked,
   defaultSortKey,
-  rounded = true,
   hoverable = false,
   summary,
   groupIndex,
@@ -86,77 +83,97 @@ export const DataTable = <T extends Record<string, any>>({
 
   const showHeader = groupIndex === 0 || !groupIndex
 
+  const templateColumns = `[start] ${columns.map((col) => col.width ?? 'minmax(min-content, 1fr)').join(' ')} [end]`
+
   return (
-    <Stack ref={ref} as={rounded && !lastGroupIndex ? Card : Stack} minWidth={scrollWidth > 0 ? scrollWidth : 'auto'}>
-      <Shelf>
-        {showHeader &&
-          columns.map((col, i) => (
-            <HeaderCol
-              key={i}
-              style={{ flex: col.flex }}
-              tabIndex={col?.sortKey ? 0 : undefined}
-              as={col?.sortKey ? 'button' : 'div'}
-              onClick={col?.sortKey ? () => updateSortOrder(col.sortKey) : () => undefined}
-              align={col?.align}
-            >
-              <Text variant="label2">
+    <TableGrid
+      gridTemplateColumns={templateColumns}
+      gridAutoRows="auto"
+      gap={0}
+      rowGap={0}
+      ref={ref}
+      minWidth={scrollWidth > 0 ? scrollWidth : 'auto'}
+    >
+      {showHeader && (
+        <HeaderRow templateColumns={templateColumns}>
+          {columns.map((col, i) => (
+            <HeaderCol key={i} align={col?.align}>
+              <Text variant="body3">
                 {col?.header && typeof col.header !== 'string' && col?.sortKey && React.isValidElement(col.header)
                   ? React.cloneElement(col.header as React.ReactElement<any>, {
-                      align: col?.align,
                       orderBy: orderBy[col.sortKey],
+                      onClick: () => updateSortOrder(col.sortKey),
                     })
                   : col.header}
               </Text>
             </HeaderCol>
           ))}
-      </Shelf>
-      <Stack>
-        {sortedAndPaginatedData?.map((row, i) => (
-          <Row
-            rounded={rounded}
-            hoverable={hoverable}
-            as={onRowClicked ? Link : 'div'}
-            to={onRowClicked && (() => onRowClicked(row))}
-            key={keyField ? row[keyField] : i}
-            tabIndex={onRowClicked ? 0 : undefined}
-          >
-            {columns.map((col, index) => (
-              <DataCol
-                variant="body2"
-                style={{ flex: col.width !== undefined ? 'auto' : col.flex, width: col.width }}
-                align={col?.align}
-                key={index}
-              >
-                {col.cell(row, i)}
-              </DataCol>
-            ))}
-          </Row>
-        ))}
-        {/* summary row is not included in sorting */}
-        {summary && (
-          <Row rounded={rounded && groupIndex === lastGroupIndex}>
-            {columns.map((col, i) => (
-              <DataCol variant="body2" key={`${col.sortKey}-${i}`} style={{ flex: col.flex }} align={col?.align}>
-                {col.cell(summary, i)}
-              </DataCol>
-            ))}
-          </Row>
-        )}
-      </Stack>
-    </Stack>
+        </HeaderRow>
+      )}
+      {sortedAndPaginatedData?.map((row, i) => (
+        <DataRow
+          hoverable={hoverable}
+          as={onRowClicked ? Link : 'div'}
+          to={onRowClicked && (() => onRowClicked(row))}
+          key={keyField ? row[keyField] : i}
+          tabIndex={onRowClicked ? 0 : undefined}
+          templateColumns={templateColumns}
+        >
+          {columns.map((col, index) => (
+            <DataCol variant="body2" align={col?.align} key={index}>
+              {col.cell(row, i)}
+            </DataCol>
+          ))}
+        </DataRow>
+      ))}
+      {/* summary row is not included in sorting */}
+      {summary && (
+        <DataRow templateColumns={templateColumns}>
+          {columns.map((col, i) => (
+            <DataCol variant="body2" key={`${col.sortKey}-${i}`} align={col?.align}>
+              {col.cell(summary, i)}
+            </DataCol>
+          ))}
+        </DataRow>
+      )}
+      {groupIndex != null && groupIndex !== lastGroupIndex && (
+        <Row>
+          <DataCol />
+        </Row>
+      )}
+    </TableGrid>
   )
 }
 
-const Row = styled(Shelf)<any>`
-  ${({ rounded, hoverable, as: comp }) =>
+const TableGrid = styled(Grid)``
+
+const Row = styled('div')<any>`
+  display: grid;
+  // Fallback for browsers that don't support subgrid
+  // Tables will look a bit wonky in those browsers
+  // TODO: Remove when browser support is sufficient
+  grid-template-columns: ${(props) => props.templateColumns};
+  grid-template-columns: subgrid;
+  grid-column: start / end;
+  box-shadow: ${({ theme }) => `-1px 0 0 0 ${theme.colors.borderSecondary}, 1px 0 0 0 ${theme.colors.borderSecondary}`};
+`
+
+const HeaderRow = styled(Row)<any>(
+  css({
+    backgroundColor: 'backgroundSecondary',
+    borderStyle: 'solid',
+    borderWidth: '1px 0',
+    borderColor: 'borderSecondary',
+  })
+)
+
+const DataRow = styled(Row)<any>`
+  ${({ hoverable, as: comp }) =>
     css({
-      height: '48px',
       width: '100%',
-      appearance: 'none',
-      border: 'none',
       borderBottomStyle: 'solid',
       borderBottomWidth: '1px',
-      borderBottomColor: 'borderPrimary',
+      borderBottomColor: 'borderSecondary',
       backgroundColor: 'transparent',
       // using a&:hover caused the background sometimes not to update when switching themes
       '&:hover':
@@ -173,94 +190,79 @@ const Row = styled(Shelf)<any>`
       '&:focus-visible': {
         boxShadow: 'inset 0 0 0 3px var(--fabric-color-focus)',
       },
-      '&:last-child': rounded
-        ? {
-            borderBottomLeftRadius: 'card',
-            borderBottomRightRadius: 'card',
-          }
-        : {},
     })}
 `
 
 const DataCol = styled(Text)<{ align: Column['align'] }>`
   background: initial;
   border: none;
-  padding: 8px 0 8px 16px;
+  padding: 8px 16px;
   display: flex;
-  flex: 1 1 160px;
+  align-items: center;
+  flex: 1;
   max-width: 100%;
+  min-width: 0;
   overflow: hidden;
   white-space: nowrap;
 
-  &:first-child {
-    padding-right: 16px;
-  }
   ${({ align }) => {
     switch (align) {
       case 'left':
         return css({
           justifyContent: 'flex-start',
-          '&:last-child': {
-            paddingRight: 16,
-          },
         })
       case 'center':
         return css({
           justifyContent: 'center',
-          '&:last-child': {
-            paddingRight: 16,
-          },
         })
       case 'right':
       default:
         return css({
           textAlign: 'right',
           justifyContent: 'flex-end',
-
-          '&:last-child': {
-            paddingRight: 16,
-          },
         })
     }
   }}
 `
 
 const HeaderCol = styled(DataCol)`
-  height: 48px;
+  height: 32px;
   align-items: center;
+
+  &:has(:focus-visible) {
+    box-shadow: inset 0 0 0 3px var(--fabric-color-focus);
+  }
 `
 
-export const SortableTableHeader: React.VFC<{ label: string; orderBy?: OrderBy; align?: Column['align'] }> = ({
+export function SortableTableHeader({
   label,
   orderBy,
-  align,
-}) => {
+  onClick,
+}: {
+  label: string
+  orderBy?: OrderBy
+  onClick?: () => void
+}) {
   return (
-    <StyledHeader>
-      {(!align || align === 'right') && (
-        <IconArrowDown
-          color={orderBy ? 'currentColor' : 'transparent'}
-          size={16}
-          style={{ transform: orderBy === 'asc' ? 'rotate(180deg)' : 'rotate(0deg)' }}
-        />
-      )}
+    <StyledHeader gap="4px" as="button" onClick={onClick}>
       {label}
-      {align && (align === 'left' || align === 'center') && (
-        <IconArrowDown
-          color={orderBy ? 'currentColor' : 'transparent'}
-          size={16}
-          style={{ transform: orderBy === 'asc' ? 'rotate(180deg)' : 'rotate(0deg)' }}
-        />
-      )}
+      <Stack>
+        {(orderBy === 'asc' || !orderBy) && <IconChevronUp size={14} style={{ marginBottom: !orderBy ? -3.5 : 0 }} />}
+        {(orderBy === 'desc' || !orderBy) && <IconChevronDown size={14} style={{ marginTop: !orderBy ? -3.5 : 0 }} />}
+      </Stack>
     </StyledHeader>
   )
 }
 
 const StyledHeader = styled(Shelf)`
   color: ${({ theme }) => theme.colors.textSecondary};
+  cursor: pointer;
+  appearance: none;
+  border: none;
+  background: transparent;
 
   &:hover,
-  &:hover > svg {
+  &:focus-visible {
     cursor: pointer;
     color: ${({ theme }) => theme.colors.textInteractiveHover};
   }

diff --git a/centrifuge-app/src/components/DataTableGroup.tsx b/centrifuge-app/src/components/DataTableGroup.tsx
@@ -1,16 +1,10 @@
-import { Card, Stack } from '@centrifuge/fabric'
+import { Stack } from '@centrifuge/fabric'
 import * as React from 'react'
 import { DataTableProps } from './DataTable'
 
-export function DataTableGroup({
-  children,
-  rounded = true,
-}: {
-  children: React.ReactElement<DataTableProps>[]
-  rounded?: boolean
-}) {
+export function DataTableGroup({ children }: { children: React.ReactElement<DataTableProps>[] }) {
   return (
-    <Stack as={rounded ? Card : undefined} gap="3">
+    <Stack>
       {React.Children.map(children, (child, index) => {
         return React.isValidElement(child)
           ? React.cloneElement(child, {

diff --git a/centrifuge-app/src/components/EpochList.tsx b/centrifuge-app/src/components/EpochList.tsx
@@ -26,12 +26,10 @@ export const columns: Column[] = [
     align: 'left',
     header: 'Order',
     cell: (row: LiquidityTableRow) => row.order,
-    flex: '3',
   },
   {
     header: 'Locked',
     cell: (row: LiquidityTableRow) => <LockedRow row={row} />,
-    flex: '3',
   },
   // {
   //   header: 'Executing',

diff --git a/centrifuge-app/src/components/FilterButton.tsx b/centrifuge-app/src/components/FilterButton.tsx
@@ -0,0 +1,11 @@
+import { Text } from '@centrifuge/fabric'
+import styled from 'styled-components'
+import { buttonActionStyles } from './styles'
+
+export const FilterButton = styled(Text)`
+  display: flex;
+  align-items: center;
+  gap: 0.3em;
+
+  ${buttonActionStyles}
+`
diff --git a/...ge-app/src/components/PoolCard/styles.tsx → ...app/src/components/ListItemCardStyles.tsx b/...ge-app/src/components/PoolCard/styles.tsx → ...app/src/components/ListItemCardStyles.tsx