Merge branch 'main' into cent-app/synpress-testing-setup

centrifuge · Nov 28, 2023 · 6adb6ef · 6adb6ef
2 parents 6d39610 + 0dec915
commit 6adb6ef
Show file tree

Hide file tree

Showing 47 changed files with 1,940 additions and 847 deletions.
diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
@@ -112,7 +112,7 @@ export const DataTable = <T extends Record<string, any>>({
       minWidth={scrollWidth > 0 ? scrollWidth : 'auto'}
     >
       {showHeader && (
-        <HeaderRow templateColumns={templateColumns}>
+        <HeaderRow>
           {columns.map((col, i) => (
             <HeaderCol key={i} align={col?.align}>
               <Text variant="body3">
@@ -134,7 +134,6 @@ export const DataTable = <T extends Record<string, any>>({
           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}>
@@ -145,7 +144,7 @@ export const DataTable = <T extends Record<string, any>>({
       ))}
       {/* summary row is not included in sorting */}
       {summary && (
-        <DataRow templateColumns={templateColumns}>
+        <DataRow>
           {columns.map((col, i) => (
             <DataCol variant="body2" key={`${col.sortKey}-${i}`} align={col?.align}>
               {col.cell(summary, i)}
@@ -164,12 +163,8 @@ export const DataTable = <T extends Record<string, any>>({
 
 const TableGrid = styled(Grid)``
 
-const Row = styled('div')<any>`
+const Row = styled('div')`
   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}`};

diff --git a/centrifuge-app/src/components/DebugFlags/config.ts b/centrifuge-app/src/components/DebugFlags/config.ts
@@ -53,6 +53,7 @@ export type Key =
   | 'showLiquidityPoolsOptions'
   | 'showPrime'
   | 'poolCreationType'
+  | 'podAdminSeed'
 
 export const flagsConfig: Record<Key, DebugFlagConfig> = {
   address: {
@@ -157,4 +158,8 @@ export const flagsConfig: Record<Key, DebugFlagConfig> = {
       notePreimage: 'notePreimage',
     },
   },
+  podAdminSeed: {
+    type: 'text',
+    default: '//Eve',
+  },
 }
diff --git a/centrifuge-app/src/components/LayoutBase/BasePadding.tsx b/centrifuge-app/src/components/LayoutBase/BasePadding.tsx
@@ -5,9 +5,11 @@ type BaseSectionProps = BoxProps & {
   children: React.ReactNode
 }
 
+export const BASE_PADDING = [2, 2, 3, 3, 5]
+
 export function BasePadding({ children, ...boxProps }: BaseSectionProps) {
   return (
-    <Stack pt={4} pb={4} px={[2, 2, 3, 3, 5]} {...boxProps}>
+    <Stack pt={4} pb={4} px={BASE_PADDING} {...boxProps}>
       {children}
     </Stack>
   )

diff --git a/centrifuge-app/src/components/LayoutBase/index.tsx b/centrifuge-app/src/components/LayoutBase/index.tsx
@@ -6,7 +6,6 @@ import { LoadBoundary } from '../LoadBoundary'
 import { LogoLink } from '../LogoLink'
 import { Menu } from '../Menu'
 import { OnboardingStatus } from '../OnboardingStatus'
-import { SideDrawerProps } from '../SideDrawer'
 import { BasePadding } from './BasePadding'
 import {
   FooterContainer,
@@ -23,10 +22,9 @@ import {
 
 type LayoutBaseProps = {
   children?: React.ReactNode
-  sideDrawer?: React.ReactElement<SideDrawerProps>
 }
 
-export function LayoutBase({ children, sideDrawer }: LayoutBaseProps) {
+export function LayoutBase({ children }: LayoutBaseProps) {
   return (
     <Root>
       <Inner>
@@ -58,7 +56,6 @@ export function LayoutBase({ children, sideDrawer }: LayoutBaseProps) {
           <Footer />
         </FooterContainer>
       </Inner>
-      <LoadBoundary>{sideDrawer}</LoadBoundary>
     </Root>
   )
 }

diff --git a/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx b/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx
@@ -1,5 +1,5 @@
 import { Token, TokenBalance } from '@centrifuge/centrifuge-js'
-import { formatBalance, useAddress, useBalances, useCentrifuge } from '@centrifuge/centrifuge-react'
+import { formatBalance, useBalances, useCentrifuge } from '@centrifuge/centrifuge-react'
 import {
   AnchorButton,
   Box,
@@ -29,6 +29,7 @@ type Row = {
   position: TokenBalance
   tokenPrice: TokenBalance
   canInvestRedeem: boolean
+  address: string
 }
 
 const columns: Column[] = [
@@ -38,7 +39,6 @@ const columns: Column[] = [
     cell: (token: Row) => {
       return <TokenWithIcon {...token} />
     },
-    width: '2fr',
   },
   {
     header: 'Token price',
@@ -49,6 +49,7 @@ const columns: Column[] = [
         </Text>
       )
     },
+    align: 'left',
   },
   {
     header: <SortableTableHeader label="Position" />,
@@ -60,6 +61,7 @@ const columns: Column[] = [
       )
     },
     sortKey: 'position',
+    align: 'left',
   },
   {
     header: <SortableTableHeader label="Market value" />,
@@ -71,6 +73,7 @@ const columns: Column[] = [
       )
     },
     sortKey: 'marketValue',
+    align: 'left',
   },
   {
     align: 'left',
@@ -108,8 +111,7 @@ const columns: Column[] = [
 ]
 
 // TODO: change canInvestRedeem to default to true once the drawer is implemented
-export const InvestedTokens = ({ canInvestRedeem = false }) => {
-  const address = useAddress()
+export function InvestedTokens({ canInvestRedeem = false, address }: { canInvestRedeem?: boolean; address: string }) {
   const centBalances = useBalances(address)
   const { data: tinlakeBalances } = useTinlakeBalances()
   const pools = usePools()

diff --git a/centrifuge-app/src/components/Portfolio/Transactions.tsx b/centrifuge-app/src/components/Portfolio/Transactions.tsx
@@ -11,23 +11,21 @@ import {
   Stack,
   Text,
   usePagination,
-  VisualButton,
 } from '@centrifuge/fabric'
-import { isAddress as isValidEVMAddress } from '@ethersproject/address'
 import * as React from 'react'
-import { Link } from 'react-router-dom'
 import { TransactionTypeChip } from '../../components/Portfolio/TransactionTypeChip'
 import { Spinner } from '../../components/Spinner'
 import { formatDate } from '../../utils/date'
 import { Dec } from '../../utils/Decimal'
 import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl'
-import { useAddress } from '../../utils/useAddress'
 import { usePools, useTransactionsByAddress } from '../../utils/usePools'
 import { Column, DataTable, SortableTableHeader } from '../DataTable'
+import { RouterLinkButton } from '../RouterLinkButton'
 
 type TransactionsProps = {
   onlyMostRecent?: boolean
   txTypes?: InvestorTransactionType[]
+  address: string
 }
 
 type TransactionTableData = Row[]
@@ -110,11 +108,9 @@ const columns: Column[] = [
   },
 ]
 
-export function Transactions({ onlyMostRecent, txTypes }: TransactionsProps) {
+export function Transactions({ onlyMostRecent, txTypes, address }: TransactionsProps) {
   const { formatAddress } = useCentrifugeUtils()
-  const address = useAddress()
-  const formattedAddress = address && isValidEVMAddress(address) ? address : formatAddress(address || '')
-  const transactions = useTransactionsByAddress(formatAddress(formattedAddress))
+  const transactions = useTransactionsByAddress(formatAddress(address))
   const pools = usePools()
 
   const investorTransactions: TransactionTableData = React.useMemo(() => {
@@ -158,45 +154,52 @@ export function Transactions({ onlyMostRecent, txTypes }: TransactionsProps) {
 
   const pagination = usePagination({ data: investorTransactions, pageSize: onlyMostRecent ? 3 : 15 })
 
-  return !!investorTransactions.length ? (
+  return investorTransactions ? (
     <Stack as="article" gap={onlyMostRecent ? 2 : 5}>
       <Text as="h2" variant="heading2">
         Transaction history
       </Text>
-      <PaginationProvider pagination={pagination}>
-        <Stack gap={2}>
-          <DataTable
-            data={investorTransactions}
-            columns={columns}
-            pageSize={pagination.pageSize}
-            page={pagination.page}
-          />
-          {onlyMostRecent ? (
-            <Link to="/history">
+      {investorTransactions.length ? (
+        <PaginationProvider pagination={pagination}>
+          <Stack gap={2}>
+            <DataTable
+              data={investorTransactions}
+              columns={columns}
+              pageSize={pagination.pageSize}
+              page={pagination.page}
+            />
+            {onlyMostRecent ? (
               <Box display="inline-block">
-                <VisualButton small variant="tertiary" icon={IconEye}>
+                <RouterLinkButton to="/history" small variant="tertiary" icon={IconEye}>
                   View all
-                </VisualButton>
+                </RouterLinkButton>
               </Box>
-            </Link>
-          ) : (
-            <Shelf justifyContent="space-between">
-              {pagination.pageCount > 1 && (
-                <Shelf>
-                  <Pagination />
-                </Shelf>
-              )}
-              {csvUrl && (
-                <Box style={{ gridColumn: columns.length, justifySelf: 'end' }}>
-                  <AnchorButton small variant="secondary" href={csvUrl} download={`transaction-history-${address}.csv`}>
-                    Export as CSV
-                  </AnchorButton>
-                </Box>
-              )}
-            </Shelf>
-          )}
-        </Stack>
-      </PaginationProvider>
+            ) : (
+              <Shelf justifyContent="space-between">
+                {pagination.pageCount > 1 && (
+                  <Shelf>
+                    <Pagination />
+                  </Shelf>
+                )}
+                {csvUrl && (
+                  <Box style={{ gridColumn: columns.length, justifySelf: 'end' }}>
+                    <AnchorButton
+                      small
+                      variant="secondary"
+                      href={csvUrl}
+                      download={`transaction-history-${address}.csv`}
+                    >
+                      Export as CSV
+                    </AnchorButton>
+                  </Box>
+                )}
+              </Shelf>
+            )}
+          </Stack>
+        </PaginationProvider>
+      ) : (
+        <Text>No transactions</Text>
+      )}
     </Stack>
   ) : (
     <Spinner />

diff --git a/centrifuge-app/src/components/Root.tsx b/centrifuge-app/src/components/Root.tsx
@@ -244,8 +244,8 @@ export function prefetchRoute(to: string | LinkProps['to']) {
 function Routes() {
   return (
     <Switch>
-      {routes.map((route) => (
-        <Route {...route} />
+      {routes.map((route, i) => (
+        <Route {...route} key={i} />
       ))}
     </Switch>
   )

diff --git a/centrifuge-app/src/components/SideDrawer.tsx b/centrifuge-app/src/components/SideDrawer.tsx