Merge branch 'main' into pod-indexer-charts

centrifuge · May 21, 2024 · 261ead6 · 261ead6
2 parents cb5d039 + 15f9bc5
commit 261ead6
Show file tree

Hide file tree

Showing 117 changed files with 1,872 additions and 1,217 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -1,9 +1,8 @@
 name: Synpress tests
 
 on:
-  pull_request:
-    types: [closed]
-    branches: [main]
+  schedule:
+    - cron: '0 12 * * *'
 
 jobs:
   cypress-run:
@@ -35,8 +34,8 @@ jobs:
           CYPRESS_PRIVATE_KEY: ${{secrets.CYPRESS_PRIVATE_KEY}}
           PRIVATE_KEY: ${{secrets.CYPRESS_PRIVATE_KEY}}
           NETWORK_NAME: centrifuge
-          RPC_URL: https://fullnode.development.cntrfg.com
-          CHAIN_ID: 2000
+          RPC_URL: https://fullnode-apps.demo.k-f.dev
+          CHAIN_ID: 2090
           SYMBOL: DEVEL
           IS_TESTNET: true
           DEBUG: true
@@ -54,5 +53,5 @@ jobs:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           CYPRESS_PRIVATE_KEY: ${{ secrets.CYPRESS_PRIVATE_KEY }}
           PRIVATE_KEY: ${{ secrets.CYPRESS_PRIVATE_KEY }}
-          CYPRESS_BASE_URL: https://app-dev.k-f.dev
+          CYPRESS_BASE_URL: https://app-demo.k-f.dev
           DISPLAY: :0.0
diff --git a/centrifuge-app/.env-config/.env.demo b/centrifuge-app/.env-config/.env.demo
@@ -1,4 +1,4 @@
-REACT_APP_COLLATOR_WSS_URL=wss://fullnode.demo.k-f.dev
+REACT_APP_COLLATOR_WSS_URL=wss://fullnode-apps.demo.k-f.dev
 REACT_APP_DEFAULT_NODE_URL=https://pod-demo.k-f.dev
 REACT_APP_DEFAULT_UNLIST_POOLS=true
 REACT_APP_FAUCET_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/faucet-api-demo

diff --git a/centrifuge-app/env.sample b/centrifuge-app/env.sample
@@ -1,7 +1,8 @@
 # Copy to .env (for synpress/e2e testing config ONLY)
-PRIVATE_KEY=
-NETWORK_NAME=centrifuge 
-RPC_URL=https://fullnode.development.cntrfg.com 
-CHAIN_ID=2000 
-SYMBOL=DEVEL 
-IS_TESTNET=true
+NETWORK_NAME=centrifuge
+RPC_URL=https://fullnode-apps.demo.k-f.dev
+CHAIN_ID=2090
+SYMBOL=DEVEL
+IS_TESTNET=true
+DEBUG=true
+PRIVATE_KEY= 
diff --git a/centrifuge-app/src/components/AssetSummary.tsx b/centrifuge-app/src/components/AssetSummary.tsx
@@ -27,7 +27,7 @@ export const AssetSummary: React.FC<Props> = ({ data, children, loan }) => {
         gap="6"
         py="3"
         style={{
-          boxShadow: `0 1px 0 ${theme.colors.borderSecondary}`,
+          boxShadow: `0 1px 0 ${theme.colors.borderPrimary}`,
         }}
       >
         {data?.map(({ label, value }, index) => (

diff --git a/centrifuge-app/src/components/CardTotalValueLocked.tsx b/centrifuge-app/src/components/CardTotalValueLocked.tsx
@@ -2,8 +2,8 @@ import { Box, Stack, Text, TextWithPlaceholder, Tooltip } from '@centrifuge/fabr
 import * as React from 'react'
 import { useTheme } from 'styled-components'
 import { config } from '../config'
-import { formatDate } from '../utils/date'
 import { Dec } from '../utils/Decimal'
+import { formatDate } from '../utils/date'
 import { formatBalance } from '../utils/formatting'
 import { useListedPools } from '../utils/useListedPools'
 import type { DataPoint } from './Charts/TotalValueLocked'
@@ -45,7 +45,7 @@ export function CardTotalValueLocked() {
       borderRadius="card"
       borderStyle="solid"
       borderWidth={1}
-      borderColor="borderSecondary"
+      borderColor="borderPrimary"
       p={3}
       pb={chartHeight * 0.6}
       position="relative"

diff --git a/centrifuge-app/src/components/Charts/CashDragChart.tsx b/centrifuge-app/src/components/Charts/CashDragChart.tsx
@@ -72,7 +72,7 @@ export default function CashDragChart() {
                 tickLine={false}
                 tickFormatter={(tick: number) => `${tick}%`}
               />
-              <CartesianGrid stroke={theme.colors.borderSecondary} />
+              <CartesianGrid stroke={theme.colors.borderPrimary} />
               <Tooltip content={<CustomizedTooltip currency={pool?.currency.symbol || ''} />} />
               <Line
                 dot={false}

diff --git a/centrifuge-app/src/components/Charts/CashflowsChart.tsx b/centrifuge-app/src/components/Charts/CashflowsChart.tsx
@@ -1,5 +1,5 @@
 import { CurrencyBalance, DailyPoolState, Pool } from '@centrifuge/centrifuge-js'
-import { Box, Grid, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Box, Shelf, Stack, Text } from '@centrifuge/fabric'
 import capitalize from 'lodash/capitalize'
 import startCase from 'lodash/startCase'
 import * as React from 'react'
@@ -34,7 +34,7 @@ export const CashflowsChart = ({ poolStates, pool }: Props) => {
   const [range, setRange] = React.useState<(typeof rangeFilters)[number]>({ value: 'ytd', label: 'Year to date' })
 
   const poolAge = pool.createdAt ? daysBetween(pool.createdAt, new Date()) : 0
-  const rangeNumber = getRangeNumber(range.value, poolAge)
+  const rangeNumber = getRangeNumber(range.value, poolAge) ?? 100
 
   const data = React.useMemo(
     () =>
@@ -74,7 +74,7 @@ export const CashflowsChart = ({ poolStates, pool }: Props) => {
 
   return (
     <Stack gap={4}>
-      <Shelf>
+      <Shelf gap={2}>
         <CustomLegend data={today} />
         <Shelf justifyContent="flex-end" pr={1}>
           {chartData.length > 0 &&
@@ -100,12 +100,12 @@ export const CashflowsChart = ({ poolStates, pool }: Props) => {
       <Box height="100%" width="100%" color="textSecondary">
         <ResponsiveContainer width="100%" height="100%" minHeight="200px">
           <BarChart data={chartData} margin={{ left: -20, right: 24 }} barGap={0} barSize={16}>
-            <CartesianGrid stroke={theme.colors.borderSecondary} vertical={false} />
+            <CartesianGrid stroke={theme.colors.borderPrimary} vertical={false} />
             <XAxis
               dataKey="name"
               style={{ fontSize: '10px', fill: theme.colors.textSecondary }}
               tickLine={false}
-              stroke={theme.colors.borderSecondary}
+              stroke={theme.colors.borderPrimary}
               tickFormatter={(tick: number) => {
                 if (data.length > 180) {
                   return new Date(tick).toLocaleString('en-US', { month: 'short' })
@@ -117,7 +117,7 @@ export const CashflowsChart = ({ poolStates, pool }: Props) => {
             <YAxis
               style={{ fontSize: '10px', fill: theme.colors.textSecondary }}
               tickLine={false}
-              stroke={theme.colors.borderSecondary}
+              stroke={theme.colors.borderPrimary}
               tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 0)}
             />
             <Tooltip
@@ -174,18 +174,22 @@ function CustomLegend({
 
   return (
     <Shelf bg="backgroundPage" width="100%" gap={2}>
-      <Grid gridTemplateColumns="fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%)" gap={3}>
+      <Shelf gap={3}>
         <Stack borderLeftWidth="3px" pl={1} borderLeftStyle="solid" borderLeftColor="#001C66" gap="4px">
-          <Text variant="body3" color="textSecondary">
+          <Text variant="body3" color="textSecondary" whiteSpace="nowrap">
             Total purchases
           </Text>
-          <Text variant="body1">{formatBalance(data.totalPurchases, 'USD', 2)}</Text>
+          <Text variant="body1" whiteSpace="nowrap">
+            {formatBalance(data.totalPurchases, 'USD', 2)}
+          </Text>
         </Stack>
         <Stack borderLeftWidth="3px" pl={1} borderLeftStyle="solid" borderLeftColor="#A4D5D8" gap="4px">
-          <Text variant="body3" color="textSecondary">
+          <Text variant="body3" color="textSecondary" whiteSpace="nowrap">
             Principal repayments
           </Text>
-          <Text variant="body1">{formatBalance(data.principalRepayments, 'USD', 2)}</Text>
+          <Text variant="body1" whiteSpace="nowrap">
+            {formatBalance(data.principalRepayments, 'USD', 2)}
+          </Text>
         </Stack>
         <Stack
           borderLeftWidth="3px"
@@ -194,10 +198,12 @@ function CustomLegend({
           borderLeftColor={theme.colors.borderPrimary}
           gap="4px"
         >
-          <Text variant="body3" color="textSecondary">
+          <Text variant="body3" color="textSecondary" whiteSpace="nowrap">
             Interest
           </Text>
-          <Text variant="body1">{formatBalance(data.interest, 'USD', 2)}</Text>
+          <Text variant="body1" whiteSpace="nowrap">
+            {formatBalance(data.interest, 'USD', 2)}
+          </Text>
         </Stack>
         {/* <Stack
           borderLeftWidth="3px"
@@ -211,7 +217,7 @@ function CustomLegend({
           </Text>
           <Text variant="body1">{formatBalance(0, 'USD', 2)}</Text>
         </Stack> */}
-      </Grid>
+      </Shelf>
     </Shelf>
   )
 }
diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -28,10 +28,9 @@ const rangeFilters = [
   { value: 'all', label: 'All' },
 ] as const
 
-const chartColor = '#A4D5D8'
-
 function PoolPerformanceChart() {
   const theme = useTheme()
+  const chartColor = theme.colors.accentPrimary
   const { pid: poolId } = useParams<{ pid: string }>()
   const { poolStates } = useDailyPoolStates(poolId) || {}
   const pool = usePool(poolId)
@@ -54,7 +53,7 @@ function PoolPerformanceChart() {
   })
 
   const [range, setRange] = React.useState<(typeof rangeFilters)[number]>({ value: 'ytd', label: 'Year to date' })
-  const rangeNumber = getRangeNumber(range.value, poolAge)
+  const rangeNumber = getRangeNumber(range.value, poolAge) ?? 100
 
   const data: ChartData[] = React.useMemo(
     () =>
@@ -71,7 +70,6 @@ function PoolPerformanceChart() {
 
   // querying chain for more accurate data, since data for today from subquery is not necessarily up to date
   const todayAssetValue = pool?.nav.total.toDecimal().toNumber() || 0
-  const todayReserve = pool?.reserve.total.toDecimal().toNumber() || 0
 
   const chartData = data.slice(-rangeNumber)
 
@@ -147,7 +145,7 @@ function PoolPerformanceChart() {
                 style={{ fontSize: '10px', fill: theme.colors.textSecondary }}
                 tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 0)}
               />
-              <CartesianGrid stroke={theme.colors.borderSecondary} vertical={false} />
+              <CartesianGrid stroke={theme.colors.borderPrimary} vertical={false} />
               <Tooltip
                 content={({ payload }) => {
                   if (payload && payload?.length > 0) {

diff --git a/centrifuge-app/src/components/Charts/PriceChart.tsx b/centrifuge-app/src/components/Charts/PriceChart.tsx
@@ -49,12 +49,13 @@ export const PriceChart = ({ data, currency, filter, setFilter }: PriceChartProp
                 { label: 'YTD', value: 'YTD' },
               ]}
               onChange={(option) => setFilter(option.target.value as FilterOptions)}
+              defaultValue={filter}
             />
           </Box>
         )}
       </Shelf>
       <ResponsiveContainer width="100%" height="100%" minHeight="200px">
-        <AreaChart data={data || []} margin={{ top: 18, left: -30 }}>
+        <AreaChart data={data || []} margin={{ top: 18, left: -10 }}>
           <defs>
             <linearGradient id="colorPrice" x1="0" y1="0" x2="0" y2="1">
               <stop offset="5%" stopColor={'#626262'} stopOpacity={0.4} />
@@ -86,12 +87,13 @@ export const PriceChart = ({ data, currency, filter, setFilter }: PriceChartProp
             tickLine={false}
             style={{ fontSize: '10px', fill: theme.colors.textSecondary, letterSpacing: '-0.5px' }}
             tickFormatter={(tick: number) => {
-              return tick.toFixed(2)
+              return tick.toFixed(6)
             }}
+            domain={['dataMin - 0.001', 'dataMax + 0.001']}
             interval={'preserveStartEnd'}
           />
-          <CartesianGrid stroke={theme.colors.borderSecondary} />
-          <Tooltip content={<CustomizedTooltip currency={currency} precision={4} />} />
+          <CartesianGrid stroke={theme.colors.borderPrimary} />
+          <Tooltip content={<CustomizedTooltip currency={currency} precision={6} />} />
           <Area
             type="monotone"
             dataKey="price"

diff --git a/centrifuge-app/src/components/Charts/PriceYieldChart.tsx b/centrifuge-app/src/components/Charts/PriceYieldChart.tsx
@@ -73,7 +73,7 @@ function PriceYieldChart({
               }}
               domain={['dataMin - 0.2', 'dataMax + 0.2']}
             />
-            <CartesianGrid stroke={theme.colors.borderSecondary} />
+            <CartesianGrid stroke={theme.colors.borderPrimary} />
             <Tooltip content={<CustomizedTooltip currency={pool?.currency.symbol || ''} precision={4} />} />
             <Line dot={false} dataKey="tokenPrice" stroke={theme.colors.accentPrimary} name="Pool value" />
           </ComposedChart>

diff --git a/centrifuge-app/src/components/Charts/StackedBarChart.tsx b/centrifuge-app/src/components/Charts/StackedBarChart.tsx
@@ -42,7 +42,7 @@ export function StackedBarChart({ data, names, colors, currency }: StackedBarCha
           margin={{ bottom: 5, left: -16 }}
           stackOffset="sign"
         >
-          <CartesianGrid stroke={theme.colors.borderSecondary} vertical={false} />
+          <CartesianGrid stroke={theme.colors.borderPrimary} vertical={false} />
 
           <XAxis
             dataKey="xAxis"

diff --git a/centrifuge-app/src/components/Charts/utils.ts b/centrifuge-app/src/components/Charts/utils.ts
@@ -15,7 +15,7 @@ export const getRangeNumber = (rangeValue: string, poolAge?: number) => {
     return daysSinceJanuary1 + 1
   }
 
-  if (rangeValue === 'all' && poolAge) {
+  if (rangeValue === 'all') {
     return poolAge
   }
 

diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
@@ -212,15 +212,15 @@ const Row = styled('div')`
   display: grid;
   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}`};
+  box-shadow: ${({ theme }) => `-1px 0 0 0 ${theme.colors.borderPrimary}, 1px 0 0 0 ${theme.colors.borderPrimary}`};
 `
 
 const HeaderRow = styled(Row)<any>(
   css({
     backgroundColor: 'backgroundSecondary',
     borderStyle: 'solid',
     borderWidth: '1px 0',
-    borderColor: 'borderSecondary',
+    borderColor: 'borderPrimary',
   })
 )
 
@@ -230,7 +230,7 @@ export const DataRow = styled(Row)<any>`
       width: '100%',
       borderBottomStyle: 'solid',
       borderBottomWidth: '1px',
-      borderBottomColor: 'borderSecondary',
+      borderBottomColor: 'borderPrimary',
       backgroundColor: 'transparent',
       // using a&:hover caused the background sometimes not to update when switching themes
       '&:hover':

diff --git a/centrifuge-app/src/components/DebugFlags/config.ts b/centrifuge-app/src/components/DebugFlags/config.ts
@@ -48,7 +48,6 @@ export type Key =
   | 'convertAddress'
   | 'showTestNets'
   | 'showSwaps'
-  | 'showPrime'
   | 'showOracle'
   | 'poolCreationType'
   | 'podAdminSeed'
@@ -134,11 +133,6 @@ export const flagsConfig: Record<Key, DebugFlagConfig> = {
     default: false,
     type: 'checkbox',
   },
-  showPrime: {
-    alwaysShow: true,
-    default: false,
-    type: 'checkbox',
-  },
   showSwaps: {
     default: false,
     type: 'checkbox',

diff --git a/centrifuge-app/src/components/DemoBanner.tsx b/centrifuge-app/src/components/DemoBanner.tsx
@@ -25,15 +25,15 @@ export const DemoBanner = () => {
       isOpen={isOpen}
       onClose={() => onClose()}
       title={
-        <Text as="h3" color="textInverted" variant="heading5">
+        <Text as="h3" color="textInverted" variant="heading4">
           Welcome to the demo environment of the Centrifuge App. All data and wallet transactions are not real as this
           is purely a testing environment. Read{' '}
           <Text
             target="_blank"
             as="a"
             href="https://centrifuge.hackmd.io/@Anna/H1ylqpRQj"
             color="textInverted"
-            variant="heading5"
+            variant="heading4"
             display="inline"
             textDecoration="underline"
           >

diff --git a/centrifuge-app/src/components/ExpiringCFGRewardsBanner.tsx b/centrifuge-app/src/components/ExpiringCFGRewardsBanner.tsx
@@ -25,15 +25,15 @@ export const ExpiringCFGRewardsBanner = () => {
         isOpen={isOpen}
         onClose={() => setIsOpen(false)}
         title={
-          <Text as="h3" color="textInverted" variant="heading5">
+          <Text as="h3" color="textInverted" variant="heading4">
             Claim your Tinlake Rewards before it is too late. Rewards will expire on {formattedExpirationDate} CET.
             After the deadline, users will not be able to claim their CFG rewards. Check{' '}
             <Text
               target="_blank"
               as="a"
               href="https://legacy.tinlake.centrifuge.io/rewards"
               color="textInverted"
-              variant="heading5"
+              variant="heading4"
               display="inline"
               textDecoration="underline"
             >
@@ -45,7 +45,7 @@ export const ExpiringCFGRewardsBanner = () => {
               as="a"
               href="https://gov.centrifuge.io/t/cp81-unclaimed-tinlake-rewards/5885/4"
               color="textInverted"
-              variant="heading5"
+              variant="heading4"
               display="inline"
               textDecoration="underline"
             >