Merge branch 'main' of github.com:centrifuge/apps into ytm-in-asset-d…

…etail
centrifuge · May 17, 2024 · 3eb00dc · 3eb00dc
2 parents af68f1e + 0fc1034
commit 3eb00dc
Show file tree

Hide file tree

Showing 33 changed files with 916 additions and 628 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -1,9 +1,10 @@
 name: Synpress tests
 
 on:
-  pull_request:
-    types: [closed]
-    branches: [main]
+  workflow_run:
+    workflows: ['Demo deployments (manual)']
+    types:
+      - completed
 
 jobs:
   cypress-run:
@@ -35,8 +36,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 +55,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.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/Charts/CashflowsChart.tsx b/centrifuge-app/src/components/Charts/CashflowsChart.tsx
@@ -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(
     () =>

diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -53,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(
     () =>
@@ -70,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)
 

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/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/InvestRedeem/InvestForm.tsx b/centrifuge-app/src/components/InvestRedeem/InvestForm.tsx
@@ -85,8 +85,6 @@ export function InvestForm({ autoFocus, investLabel = 'Invest' }: InvestFormProp
   const formRef = React.useRef<HTMLFormElement>(null)
   useFocusInvalidInput(form, formRef)
 
-  const nativeBalanceTooLow = state.nativeBalance.eq(0)
-
   const inputAmountCoveredByCapacity = inputToDecimal(form.values.amount).lessThanOrEqualTo(state.capacity ?? 0)
 
   const isPending =
@@ -109,11 +107,6 @@ export function InvestForm({ autoFocus, investLabel = 'Invest' }: InvestFormProp
         <Stack gap={2}>
           <EpochBusy busy={state.isPoolBusy} />
           {state.statusMessage && <InlineFeedback>{state.statusMessage}</InlineFeedback>}
-          {nativeBalanceTooLow && (
-            <InlineFeedback>
-              {state.nativeCurrency && `${state.nativeCurrency.symbol} balance is too low.`}
-            </InlineFeedback>
-          )}
           {!state.collectType || claimDismissed ? (
             <>
               <Field name="amount" validate={positiveNumber()}>
@@ -203,9 +196,7 @@ export function InvestForm({ autoFocus, investLabel = 'Invest' }: InvestFormProp
                 loading={isInvesting}
                 loadingMessage={loadingMessage}
                 disabled={
-                  state.isPoolBusy ||
-                  nativeBalanceTooLow ||
-                  (state.poolCurrency?.symbol.toLowerCase().includes('lp') && hasPendingOrder)
+                  state.isPoolBusy || (state.poolCurrency?.symbol.toLowerCase().includes('lp') && hasPendingOrder)
                 }
               >
                 {investLabel}

diff --git a/centrifuge-app/src/components/Menu/NavManagementMenu.tsx b/centrifuge-app/src/components/Menu/NavManagementMenu.tsx
@@ -2,7 +2,7 @@ import { Box, IconChevronDown, IconChevronRight, IconMonitor, Menu, MenuItemGrou
 import * as React from 'react'
 import { useRouteMatch } from 'react-router'
 import { useTheme } from 'styled-components'
-import { usePoolsForWhichAccountIsFeeder } from '../../pages/NavManagement/Overview'
+import { usePoolsForWhichAccountIsFeeder } from '../../utils/usePoolsForWhichAccountIsFeeder'
 import { PoolLink } from './PoolLink'
 import { Toggle } from './Toggle'
 
@@ -22,7 +22,7 @@ export function NavManagementMenu({ stacked }: NavManagementMenuProps) {
 
   return (
     allowedPools &&
-    allowedPools?.length > 1 && (
+    allowedPools?.length >= 1 && (
       <Box position={['static', 'static', 'relative', 'static']}>
         {open && (
           <Box
@@ -46,9 +46,9 @@ export function NavManagementMenu({ stacked }: NavManagementMenuProps) {
           isActive={isActive}
           stacked={stacked}
         >
-          <IconMonitor />
+          <IconMonitor size={['iconMedium', 'iconMedium', 'iconSmall']} />
           NAV management
-          {!stacked && (open ? <IconChevronDown /> : <IconChevronRight />)}
+          {!stacked && (open ? <IconChevronDown size="iconSmall" /> : <IconChevronRight size="iconSmall" />)}
         </Toggle>
 
         <Box

diff --git a/centrifuge-app/src/components/Menu/index.tsx b/centrifuge-app/src/components/Menu/index.tsx
@@ -28,7 +28,7 @@ export function Menu() {
   const pools = usePoolsThatAnyConnectedAddressHasPermissionsFor() || []
   const isLarge = useIsAboveBreakpoint('L')
   const address = useAddress('substrate')
-  const { showSwaps, showPrime, showOracle } = useDebugFlags()
+  const { showSwaps, showOracle } = useDebugFlags()
   const transactions = useTransactionsByAddress(address)
 
   return (
@@ -63,14 +63,12 @@ export function Menu() {
         </Box>
       )}
 
-      {showPrime && (
-        <Box width="100%">
-          <PageLink to="/prime" stacked={!isLarge}>
-            <IconGlobe size={['iconMedium', 'iconMedium', 'iconSmall']} />
-            Prime
-          </PageLink>
-        </Box>
-      )}
+      <Box width="100%">
+        <PageLink to="/prime" stacked={!isLarge}>
+          <IconGlobe size={['iconMedium', 'iconMedium', 'iconSmall']} />
+          Prime
+        </PageLink>
+      </Box>
 
       <Box width="100%">
         <GovernanceMenu />

diff --git a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx
@@ -100,9 +100,11 @@ const TrancheTokenCard = ({
               </Stack>
             )}
             <Stack gap={1}>
-              <Text textAlign="left" variant="label2" color="textSecondary">
-                Token price
-              </Text>
+              <Box pb="3px">
+                <Text textAlign="left" variant="label2" color="textSecondary">
+                  Token price
+                </Text>
+              </Box>
               <Text variant="body2">{formatBalance(trancheToken.tokenPrice || 0, poolCurrencySymbol, 5, 5)}</Text>
             </Stack>
             <Stack gap={1}>

diff --git a/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx b/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx
@@ -5,6 +5,7 @@ import { config } from '../../config'
 import { Dec } from '../../utils/Decimal'
 import { formatBalance } from '../../utils/formatting'
 import { useTransactionsByAddress } from '../../utils/usePools'
+import { LoadBoundary } from '../LoadBoundary'
 import { useHoldings } from './Holdings'
 import { PortfolioValue } from './PortfolioValue'
 
@@ -18,7 +19,7 @@ const rangeFilters = [
   { value: '30d', label: '30 days' },
   { value: '90d', label: '90 days' },
   { value: 'ytd', label: 'Year to date' },
-  // { value: 'all', label: 'All' },
+  { value: 'all', label: 'All' },
 ] as const
 
 export function CardPortfolioValue({ address }: { address?: string }) {
@@ -100,7 +101,9 @@ export function CardPortfolioValue({ address }: { address?: string }) {
             </Stack>
 
             <Box width="100%" height="300px">
-              <PortfolioValue rangeValue={range.value} address={address} />
+              <LoadBoundary>
+                <PortfolioValue rangeValue={range.value} address={address} />
+              </LoadBoundary>
             </Box>
           </>
         ) : null}

diff --git a/centrifuge-app/src/components/Portfolio/Holdings.tsx b/centrifuge-app/src/components/Portfolio/Holdings.tsx
@@ -44,7 +44,7 @@ type Row = {
   marketValue: Decimal
   position: Decimal
   tokenPrice: Decimal
-  canInvestRedeem: boolean
+  showActions: boolean
   address?: string
   connectedNetwork?: string
 }
@@ -95,7 +95,7 @@ const columns: Column[] = [
   {
     align: 'left',
     header: '', // invest redeem buttons
-    cell: ({ canInvestRedeem, poolId, trancheId, currency, connectedNetwork }: Row) => {
+    cell: ({ showActions, poolId, trancheId, currency, connectedNetwork }: Row) => {
       const isTinlakePool = poolId.startsWith('0x')
       return (
         <Grid gap={1} justifySelf="end">
@@ -109,34 +109,37 @@ const columns: Column[] = [
             >
               View on Tinlake
             </AnchorButton>
-          ) : canInvestRedeem ? (
-            <Shelf>
-              <RouterLinkButton to={`?redeem=${poolId}-${trancheId}`} small variant="tertiary" icon={IconMinus}>
-                Redeem
-              </RouterLinkButton>
-              <RouterLinkButton to={`?invest=${poolId}-${trancheId}`} small variant="tertiary" icon={IconPlus}>
-                Invest
-              </RouterLinkButton>
-            </Shelf>
-          ) : connectedNetwork === 'Centrifuge' ? (
-            <Shelf>
-              <RouterLinkButton to={`?receive=${currency?.symbol}`} small variant="tertiary" icon={IconDownload}>
-                Receive
-              </RouterLinkButton>
-              <RouterLinkButton to={`?send=${currency?.symbol}`} small variant="tertiary" icon={IconSend}>
-                Send
-              </RouterLinkButton>
-            </Shelf>
+          ) : showActions ? (
+            trancheId ? (
+              <Shelf>
+                <RouterLinkButton to={`?redeem=${poolId}-${trancheId}`} small variant="tertiary" icon={IconMinus}>
+                  Redeem
+                </RouterLinkButton>
+                <RouterLinkButton to={`?invest=${poolId}-${trancheId}`} small variant="tertiary" icon={IconPlus}>
+                  Invest
+                </RouterLinkButton>
+              </Shelf>
+            ) : connectedNetwork === 'Centrifuge' ? (
+              <Shelf>
+                <RouterLinkButton to={`?receive=${currency?.symbol}`} small variant="tertiary" icon={IconDownload}>
+                  Receive
+                </RouterLinkButton>
+                <RouterLinkButton to={`?send=${currency?.symbol}`} small variant="tertiary" icon={IconSend}>
+                  Send
+                </RouterLinkButton>
+              </Shelf>
+            ) : null
           ) : null}
         </Grid>
       )
     },
   },
 ]
 
-export function useHoldings(address?: string, canInvestRedeem = true) {
+export function useHoldings(address?: string, showActions = true) {
   const { data: tinlakeBalances } = useTinlakeBalances(address && isEvmAddress(address) ? address : undefined)
   const centBalances = useBalances(address && isSubstrateAddress(address) ? address : undefined)
+
   const wallet = useWallet()
   const tinlakePools = useTinlakePools()
   const portfolioTokens = usePortfolioTokens(address)
@@ -147,7 +150,7 @@ export function useHoldings(address?: string, canInvestRedeem = true) {
     ...portfolioTokens.map((token) => ({
       ...token,
       tokenPrice: token.tokenPrice.toDecimal() || Dec(0),
-      canInvestRedeem,
+      showActions,
     })),
     ...(tinlakeBalances?.tranches.filter((tranche) => !tranche.balance.isZero()) || []).map((balance) => {
       const pool = tinlakePools.data?.pools?.find((pool) => pool.id === balance.poolId)
@@ -160,7 +163,7 @@ export function useHoldings(address?: string, canInvestRedeem = true) {
         trancheId: balance.trancheId,
         poolId: balance.poolId,
         currency: tranche.currency,
-        canInvestRedeem,
+        showActions,
         connectedNetwork: wallet.connectedNetworkName,
       }
     }),
@@ -173,7 +176,7 @@ export function useHoldings(address?: string, canInvestRedeem = true) {
         trancheId: '',
         poolId: '',
         currency: currency.currency,
-        canInvestRedeem: false,
+        showActions: false,
         connectedNetwork: wallet.connectedNetworkName,
       }
     }),
@@ -189,11 +192,11 @@ export function useHoldings(address?: string, canInvestRedeem = true) {
           position: currency.balance.toDecimal(),
           tokenPrice: Dec(1),
           marketValue: currency.balance.toDecimal(),
-          canInvestRedeem: false,
+          showActions: false,
           connectedNetwork: wallet.connectedNetworkName,
         }
       }) || []),
-    ...(wallet.connectedNetworkName === 'Centrifuge'
+    ...((wallet.connectedNetworkName === 'Centrifuge' && showActions) || centBalances?.native.balance.gtn(0)
       ? [
           {
             currency: {
@@ -211,7 +214,7 @@ export function useHoldings(address?: string, canInvestRedeem = true) {
             position: centBalances?.native.balance.toDecimal().sub(centBalances.native.locked.toDecimal()) || Dec(0),
             tokenPrice: CFGPrice ? Dec(CFGPrice) : Dec(0),
             marketValue: CFGPrice ? centBalances?.native.balance.toDecimal().mul(CFGPrice) ?? Dec(0) : Dec(0),
-            canInvestRedeem: false,
+            showActions: false,
             connectedNetwork: wallet.connectedNetworkName,
           },
         ]
@@ -221,7 +224,7 @@ export function useHoldings(address?: string, canInvestRedeem = true) {
   return tokens
 }
 
-export function Holdings({ canInvestRedeem = true, address }: { canInvestRedeem?: boolean; address?: string }) {
+export function Holdings({ showActions = true, address }: { showActions?: boolean; address?: string }) {
   const { search, pathname } = useLocation()
   const history = useHistory()
   const params = new URLSearchParams(search)
@@ -233,7 +236,7 @@ export function Holdings({ canInvestRedeem = true, address }: { canInvestRedeem?
   const [investPoolId, investTrancheId] = openInvestDrawer?.split('-') || []
   const [redeemPoolId, redeemTrancheId] = openRedeemDrawer?.split('-') || []
 
-  const tokens = useHoldings(address, canInvestRedeem)
+  const tokens = useHoldings(address, showActions)
 
   return address && tokens.length ? (
     <>

diff --git a/centrifuge-app/src/components/Portfolio/PortfolioValue.tsx b/centrifuge-app/src/components/Portfolio/PortfolioValue.tsx
@@ -32,6 +32,7 @@ export function PortfolioValue({ rangeValue, address }: { rangeValue: string; ad
   const dailyPortfolioValue = useDailyPortfolioValue(address, rangeNumber)
 
   const getXAxisInterval = () => {
+    if (!rangeNumber) return dailyPortfolioValue ? Math.floor(dailyPortfolioValue.length / 10) : 45
     if (rangeNumber <= 30) return 5
     if (rangeNumber > 30 && rangeNumber <= 90) {
       return 14