Merge branch 'main' of https://github.com/centrifuge/apps into fix-ho…

…lders
centrifuge · Jan 19, 2024 · 6fce6e4 · 6fce6e4
2 parents 5741320 + 88f96aa
commit 6fce6e4
Show file tree

Hide file tree

Showing 51 changed files with 575 additions and 291 deletions.
diff --git a/.github/actions/deploy-gfunction/action.yml b/.github/actions/deploy-gfunction/action.yml
@@ -110,7 +110,7 @@ runs:
       uses: google-github-actions/deploy-cloud-functions@14509ca55199d9348161571e36c48e44f855030d #@v1
       with:
         name: '${{ steps.prepare.outputs.function_name }}'
-        runtime: 'nodejs16'
+        runtime: 'nodejs18'
         region: '${{ inputs.gcloud_region }}'
         source_dir: '${{ steps.download.outputs.download-path }}'
         entry_point: '${{ inputs.target }}'

diff --git a/centrifuge-app/.env-config/.env.altair b/centrifuge-app/.env-config/.env.altair
@@ -13,6 +13,7 @@ REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools-altair
 REACT_APP_SUBSCAN_URL=https://altair.subscan.io
 REACT_APP_TINLAKE_NETWORK=goerli
 REACT_APP_INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
+REACT_APP_ONFINALITY_KEY=0e1c049f-d876-4e77-a45f-b5afdf5739b2
 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

diff --git a/centrifuge-app/.env-config/.env.catalyst b/centrifuge-app/.env-config/.env.catalyst
@@ -13,6 +13,7 @@ REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools-catalyst
 REACT_APP_SUBSCAN_URL=
 REACT_APP_TINLAKE_NETWORK=goerli
 REACT_APP_INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
+REACT_APP_ONFINALITY_KEY=0e1c049f-d876-4e77-a45f-b5afdf5739b2
 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

diff --git a/centrifuge-app/.env-config/.env.demo b/centrifuge-app/.env-config/.env.demo
@@ -12,6 +12,7 @@ REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools-demo
 REACT_APP_SUBSCAN_URL=
 REACT_APP_TINLAKE_NETWORK=goerli
 REACT_APP_INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
+REACT_APP_ONFINALITY_KEY=0e1c049f-d876-4e77-a45f-b5afdf5739b2
 REACT_APP_WHITELISTED_ACCOUNTS=
 REACT_APP_NETWORK=centrifuge
 REACT_APP_REWARDS_TREE_URL=https://storage.googleapis.com/rad-rewards-trees-kovan-staging/latest.json

diff --git a/centrifuge-app/.env-config/.env.development b/centrifuge-app/.env-config/.env.development
@@ -13,6 +13,7 @@ REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools-developm
 REACT_APP_SUBSCAN_URL=https://centrifuge.subscan.io
 REACT_APP_TINLAKE_NETWORK=goerli
 REACT_APP_INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
+REACT_APP_ONFINALITY_KEY=0e1c049f-d876-4e77-a45f-b5afdf5739b2
 REACT_APP_WHITELISTED_ACCOUNTS=
 REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/prod/gn
 REACT_APP_REWARDS_TREE_URL=https://storage.googleapis.com/rad-rewards-trees-kovan-staging/latest.json

diff --git a/centrifuge-app/.env-config/.env.example b/centrifuge-app/.env-config/.env.example
@@ -13,6 +13,7 @@ REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools-developm
 REACT_APP_SUBSCAN_URL=
 REACT_APP_TINLAKE_NETWORK=goerli
 REACT_APP_INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
+REACT_APP_ONFINALITY_KEY=
 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

diff --git a/centrifuge-app/.env-config/.env.production b/centrifuge-app/.env-config/.env.production
@@ -13,6 +13,7 @@ REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools-centrifu
 REACT_APP_SUBSCAN_URL=https://centrifuge.subscan.io
 REACT_APP_TINLAKE_NETWORK=mainnet
 REACT_APP_INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
+REACT_APP_ONFINALITY_KEY=84bb59f4-05cc-440b-8fd4-7917623a90c6
 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

diff --git a/centrifuge-app/declarations.d.ts b/centrifuge-app/declarations.d.ts
@@ -15,5 +15,6 @@ interface ImportMetaEnv {
   REACT_APP_ONBOARDING_API_URL: string
   REACT_APP_TINLAKE_NETWORK: 'goerli' | 'mainnet'
   REACT_APP_INFURA_KEY: string
+  REACT_APP_ONFINALITY_KEY: string
   REACT_APP_WALLETCONNECT_ID: string
 }
diff --git a/centrifuge-app/src/components/Charts/PriceChart.tsx b/centrifuge-app/src/components/Charts/PriceChart.tsx
@@ -19,8 +19,10 @@ export const PriceChart = ({ data, currency, filter, setFilter }: PriceChartProp
   const currentPrice = data.at(-1)?.price
 
   const priceDifference = React.useMemo(() => {
-    return Dec(data.at(0)?.price || 1).div(currentPrice || 1)
-  }, [data, filter])
+    const dayZeroPrice = data.at(0)?.price
+    if (!currentPrice || !dayZeroPrice) return null
+    return Dec(currentPrice).sub(dayZeroPrice).div(dayZeroPrice)
+  }, [data, currentPrice])
 
   return (
     <Stack gap={0}>
@@ -31,18 +33,20 @@ export const PriceChart = ({ data, currency, filter, setFilter }: PriceChartProp
               {currency} - {currentPrice.toFixed(4)} USD
             </Text>
           )}
-          <Text variant="body3" color={priceDifference.gte(0) ? 'statusOk' : 'statusError'}>
-            {' '}
-            {priceDifference.gte(0) ? '+' : '-'} {priceDifference.mul(100).toFixed(2)}%
-          </Text>
+          {priceDifference && (
+            <Text variant="body3" color={priceDifference.gte(0) ? 'statusOk' : 'statusCritical'}>
+              {' '}
+              {priceDifference.gte(0) ? '+' : ''} {priceDifference.mul(100).toFixed(2)}%
+            </Text>
+          )}
         </Shelf>
         {filter && setFilter && (
           <Box alignSelf="flex-end" justifySelf="flex-end">
             <Select
               options={[
-                { label: 'YTD', value: 'YTD' },
                 { label: '30 days', value: '30days' },
                 { label: '90 days', value: '90days' },
+                { label: 'YTD', value: 'YTD' },
               ]}
               onChange={(option) => setFilter(option.target.value as FilterOptions)}
             />

diff --git a/centrifuge-app/src/components/DebugFlags/DebugFlags.tsx b/centrifuge-app/src/components/DebugFlags/DebugFlags.tsx
@@ -65,7 +65,7 @@ const Panel: React.FC<{
   const { showUnusedFlags } = useDebugFlags()
 
   return (
-    <StyledPanel position="fixed" bottom={0} right={0} zIndex="overlay">
+    <StyledPanel position="fixed" bottom={0} right={0} zIndex="onTopOfTheWorld">
       <Shelf
         justifyContent="center"
         width="400px"
@@ -94,17 +94,11 @@ const Panel: React.FC<{
                   name={key}
                   checked={value as boolean}
                   onChange={(e) => onChange(key as Key, e.target.checked)}
-                  disabled={!used}
                 />
               )
             } else if (obj.type === 'select' && obj.options) {
               el = (
-                <select
-                  name={key}
-                  value={value as string}
-                  onChange={(e) => onChange(key as Key, e.target.value)}
-                  disabled={!used}
-                >
+                <select name={key} value={value as string} onChange={(e) => onChange(key as Key, e.target.value)}>
                   {Object.keys(obj.options).map((option, index) => (
                     <option key={`${option}-${index}`} value={option}>
                       {option}
@@ -121,18 +115,12 @@ const Panel: React.FC<{
                   onChange={(e) => onChange(key as Key, e.target.value)}
                   type="text"
                   color="#ddd"
-                  disabled={!used}
                 />
               )
             }
 
             return visible ? (
-              <Shelf
-                as="label"
-                justifyContent="space-between"
-                key={key}
-                style={{ pointerEvents: used ? 'initial' : 'none' }}
-              >
+              <Shelf as="label" justifyContent="space-between" key={key}>
                 <Text
                   fontSize="inherit"
                   fontFamily="inherit"

diff --git a/centrifuge-app/src/components/ExpiringCFGRewardsBanner.tsx b/centrifuge-app/src/components/ExpiringCFGRewardsBanner.tsx
@@ -0,0 +1,62 @@
+import { Banner, Text } from '@centrifuge/fabric'
+import * as React from 'react'
+import { useUserRewards } from '../utils/tinlake/useTinlakeRewards'
+
+export const ExpiringCFGRewardsBanner = () => {
+  const [isOpen, setIsOpen] = React.useState(true)
+  const { data } = useUserRewards()
+
+  const hasLinkedRewards = data?.links.some((link) => (link.claimable?.isZero() === true ? false : true))
+  const hasUnlinkedRewards = data?.unlinkedRewards?.isZero() === false ? true : false
+
+  const expirationDate = new Date('2024-01-29T15:01')
+  const currentDateCET = new Date().toLocaleString('en-US', { timeZone: 'CET' })
+  const currentDateCETMillis = new Date(currentDateCET).getTime()
+  const isExpired = currentDateCETMillis > expirationDate.getTime()
+  const formattedExpirationDate = `${expirationDate.toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })} at ${expirationDate.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }).toLowerCase()}`
+
+  if ((hasLinkedRewards || hasUnlinkedRewards) && !isExpired) {
+    return (
+      <Banner
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title={
+          <Text as="h3" color="textInverted" variant="heading5">
+            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"
+              display="inline"
+              textDecoration="underline"
+            >
+              here
+            </Text>{' '}
+            if you have unclaimed rewards. Read more about the community vote{' '}
+            <Text
+              target="_blank"
+              as="a"
+              href="https://gov.centrifuge.io/t/cp81-unclaimed-tinlake-rewards/5885/4"
+              color="textInverted"
+              variant="heading5"
+              display="inline"
+              textDecoration="underline"
+            >
+              here
+            </Text>
+            .
+          </Text>
+        }
+      />
+    )
+  }
+
+  return null
+}
diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeemTinlakeProvider.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeemTinlakeProvider.tsx
@@ -28,7 +28,7 @@ export function InvestRedeemTinlakeProvider({ poolId, trancheId, children }: Pro
   if (!tranche) throw new Error(`Token not found. Pool id: ${poolId}, token id: ${trancheId}`)
 
   const { data: investment, refetch: refetchInvestment } = useTinlakeInvestments(poolId, address)
-  const { data: balances, refetch: refetchBalances, isLoading: isBalancesLoading } = useTinlakeBalances()
+  const { data: balances, refetch: refetchBalances, isLoading: isBalancesLoading } = useTinlakeBalances(address)
   const { data: nativeBalance, refetch: refetchBalance, isLoading: isBalanceLoading } = useNativeBalance()
   const { data: permissions, isLoading: isPermissionsLoading } = useTinlakePermissions(poolId, address)
   const trancheInvestment = investment?.[seniority]

diff --git a/centrifuge-app/src/components/LiquidityEpochSection.tsx b/centrifuge-app/src/components/LiquidityEpochSection.tsx
@@ -280,7 +280,7 @@ function EpochStatusExecution({ pool }: { pool: Pool }) {
             switchMap((execTx) => {
               const tx = api.tx.utility.batchAll(
                 [
-                  ...execTx.method.args[0],
+                  execTx,
                   orders?.length
                     ? api.tx.utility.batch(
                         orders

diff --git a/centrifuge-app/src/components/Menu/index.tsx b/centrifuge-app/src/components/Menu/index.tsx
@@ -4,8 +4,8 @@ import {
   IconGlobe,
   IconInvestments,
   IconNft,
-  IconPieChart,
   IconSwitch,
+  IconWallet,
   Menu as Panel,
   MenuItemGroup,
   Shelf,
@@ -44,7 +44,7 @@ export function Menu() {
       </PageLink>
 
       <PageLink to="/portfolio" stacked={!isLarge}>
-        <IconPieChart />
+        <IconWallet />
         Portfolio
       </PageLink>
 

diff --git a/centrifuge-app/src/components/Menu/styles.ts b/centrifuge-app/src/components/Menu/styles.ts
@@ -32,7 +32,8 @@ export const primaryButton = css<{ isActive?: boolean; stacked?: boolean }>`
   }
 
   @media (min-width: ${({ theme }) => theme.breakpoints['L']}) {
-    border-radius: 16px;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
   }
 
   svg {

diff --git a/centrifuge-app/src/components/MenuSwitch.tsx b/centrifuge-app/src/components/MenuSwitch.tsx
@@ -1,22 +1,9 @@
 import { SideNavigationContainer, SideNavigationItem } from '@centrifuge/fabric'
 import * as React from 'react'
-import { Link, useLocation, useRouteMatch } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 
-export function MenuSwitch() {
+export function MenuSwitch({ links }: { links: { to: string; label: string }[] }) {
   const { pathname } = useLocation()
-  const basePath = useRouteMatch(['/pools', '/issuer'])?.path || ''
-
-  const links = [
-    {
-      to: `${basePath}`,
-      label: 'Pools',
-    },
-    {
-      to: `${basePath}/tokens`,
-      label: 'Tokens',
-    },
-  ]
-
   return (
     <SideNavigationContainer>
       {links.map(({ to, label }) => (

diff --git a/centrifuge-app/src/components/PoolCard/PoolStatus.tsx b/centrifuge-app/src/components/PoolCard/PoolStatus.tsx
@@ -4,8 +4,8 @@ import * as React from 'react'
 export type PoolStatusKey = 'Maker Pool' | 'Open for investments' | 'Closed' | 'Upcoming'
 
 const statusColor: { [key in PoolStatusKey]: StatusChipProps['status'] } = {
-  'Maker Pool': 'ok',
-  'Open for investments': 'info',
+  'Maker Pool': 'info',
+  'Open for investments': 'ok',
   Closed: 'default',
   Upcoming: 'default',
 }

diff --git a/centrifuge-app/src/components/PoolsTokensShared.tsx b/centrifuge-app/src/components/PoolsTokensShared.tsx
@@ -1,5 +1,6 @@
 import { Grid, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
+import { useRouteMatch } from 'react-router'
 import { config } from '../config'
 import { CardTotalValueLocked } from './CardTotalValueLocked'
 import { LayoutSection } from './LayoutBase/LayoutSection'
@@ -13,6 +14,18 @@ type PoolsTokensSharedProps = {
 }
 
 export function PoolsTokensShared({ title, children }: PoolsTokensSharedProps) {
+  const basePath = useRouteMatch(['/pools', '/issuer'])?.path || ''
+  const links = [
+    {
+      to: `${basePath}`,
+      label: 'Pools',
+    },
+    {
+      to: `${basePath}/tokens`,
+      label: 'Tokens',
+    },
+  ]
+
   return (
     <LayoutSection pt={5}>
       <Stack gap={4}>
@@ -35,7 +48,7 @@ export function PoolsTokensShared({ title, children }: PoolsTokensSharedProps) {
         </Grid>
 
         <Stack alignItems="end">
-          <MenuSwitch />
+          <MenuSwitch links={links} />
         </Stack>
         {children}
       </Stack>

diff --git a/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx b/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx
@@ -5,8 +5,8 @@ import { config } from '../../config'
 import { Dec } from '../../utils/Decimal'
 import { formatBalance } from '../../utils/formatting'
 import { useTransactionsByAddress } from '../../utils/usePools'
+import { useHoldings } from './Holdings'
 import { PortfolioValue } from './PortfolioValue'
-import { usePortfolioTokens } from './usePortfolio'
 
 const RangeFilterButton = styled(Stack)`
   &:hover {
@@ -22,17 +22,14 @@ const rangeFilters = [
 ] as const
 
 export function CardPortfolioValue({ address }: { address?: string }) {
-  const portfolioTokens = usePortfolioTokens(address)
+  const tokens = useHoldings(address)
   const transactions = useTransactionsByAddress(address)
 
   const { colors } = useTheme()
 
   const [range, setRange] = React.useState<(typeof rangeFilters)[number]>({ value: 'ytd', label: 'Year to date' })
 
-  const currentPortfolioValue = portfolioTokens.reduce(
-    (sum, token) => sum.add(token.position.mul(token.tokenPrice.toDecimal())),
-    Dec(0)
-  )
+  const currentPortfolioValue = tokens.reduce((sum, token) => sum.add(token.position.mul(token.tokenPrice)), Dec(0))
 
   const balanceProps = {
     as: 'strong',
@@ -78,7 +75,7 @@ export function CardPortfolioValue({ address }: { address?: string }) {
             </Shelf>
           </Shelf>
         </Stack>
-        {transactions?.investorTransactions.length === 0 || !address ? null : (
+        {address && transactions?.investorTransactions.length ? (
           <>
             <Stack gap={1}>
               <Shelf justifyContent="flex-end" pr="20px">
@@ -106,7 +103,7 @@ export function CardPortfolioValue({ address }: { address?: string }) {
               <PortfolioValue rangeValue={range.value} address={address} />
             </Box>
           </>
-        )}
+        ) : null}
       </Box>
     </Box>
   )