Merge branch 'main' of github.com:centrifuge/apps into sign-attestati…

…on-before-nav-update
centrifuge · Oct 17, 2024 · daa611a · daa611a
2 parents 7f58fd8 + da791ea
commit daa611a
Show file tree

Hide file tree

Showing 125 changed files with 2,203 additions and 1,504 deletions.
diff --git a/centrifuge-app/.env-config/.env.altair b/centrifuge-app/.env-config/.env.altair
@@ -20,3 +20,5 @@ REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
 REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/prod/gn
 REACT_APP_TREASURY=kAJkmGxAd6iqX9JjWTdhXgCf2PL1TAphTRYrmEqzBrYhwbXAn
 REACT_APP_PRIME_IPFS_HASH=QmQfcuHM3EGrtpjhitDwJsgie5THLPtRNzvk7N3uymgHGc
+REACT_APP_ONFINALITY_KEY=18704429-288d-4f55-bda8-8b60f4c53b96
+REACT_APP_TENDERLY_KEY=18aMTJlpNb1lElcYNkkunC
diff --git a/centrifuge-app/.env-config/.env.catalyst b/centrifuge-app/.env-config/.env.catalyst
@@ -19,4 +19,6 @@ REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=4bo2vNkwZtr2PuqppWwqya6dPC8MzxqZ4kgnAoTZyK
 REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
 REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/prod/gn
 REACT_APP_TREASURY=kAJkmGxAd6iqX9JjWTdhXgCf2PL1TAphTRYrmEqzBrYhwbXAn
-REACT_APP_PRIME_IPFS_HASH=QmQfcuHM3EGrtpjhitDwJsgie5THLPtRNzvk7N3uymgHGc
+REACT_APP_PRIME_IPFS_HASH=QmQfcuHM3EGrtpjhitDwJsgie5THLPtRNzvk7N3uymgHGc
+REACT_APP_ONFINALITY_KEY=18704429-288d-4f55-bda8-8b60f4c53b96
+REACT_APP_TENDERLY_KEY=18aMTJlpNb1lElcYNkkunC
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-apps.demo.k-f.dev
+REACT_APP_COLLATOR_WSS_URL=wss://fullnode.demo.k-f.dev,wss://fullnode-apps.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
 REACT_APP_IPFS_GATEWAY=https://centrifuge.mypinata.cloud/
@@ -20,3 +20,5 @@ REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
 REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/prod/gn
 REACT_APP_TREASURY=kAJkmGxAd6iqX9JjWTdhXgCf2PL1TAphTRYrmEqzBrYhwbXAn
 REACT_APP_PRIME_IPFS_HASH=QmQfcuHM3EGrtpjhitDwJsgie5THLPtRNzvk7N3uymgHGc
+REACT_APP_ONFINALITY_KEY=0e1c049f-d876-4e77-a45f-b5afdf5739b2
+REACT_APP_TENDERLY_KEY=18aMTJlpNb1lElcYNkkunC
diff --git a/centrifuge-app/.env-config/.env.development b/centrifuge-app/.env-config/.env.development
@@ -20,3 +20,5 @@ REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
 REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/prod/gn
 REACT_APP_TREASURY=kAJkmGxAd6iqX9JjWTdhXgCf2PL1TAphTRYrmEqzBrYhwbXAn
 REACT_APP_PRIME_IPFS_HASH=QmQfcuHM3EGrtpjhitDwJsgie5THLPtRNzvk7N3uymgHGc
+REACT_APP_ONFINALITY_KEY=0e1c049f-d876-4e77-a45f-b5afdf5739b2
+REACT_APP_TENDERLY_KEY=18aMTJlpNb1lElcYNkkunC
diff --git a/centrifuge-app/.env-config/.env.example b/centrifuge-app/.env-config/.env.example
@@ -20,3 +20,5 @@ REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
 REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/prod/gn
 REACT_APP_TREASURY=kAJkmGxAd6iqX9JjWTdhXgCf2PL1TAphTRYrmEqzBrYhwbXAn
 REACT_APP_PRIME_IPFS_HASH=QmQfcuHM3EGrtpjhitDwJsgie5THLPtRNzvk7N3uymgHGc
+REACT_APP_ONFINALITY_KEY=0e1c049f-d876-4e77-a45f-b5afdf5739b2
+REACT_APP_TENDERLY_KEY=18aMTJlpNb1lElcYNkkunC
diff --git a/centrifuge-app/.env-config/.env.ff-prod b/centrifuge-app/.env-config/.env.ff-prod
@@ -1,4 +1,4 @@
-REACT_APP_COLLATOR_WSS_URL=wss://fullnode.parachain.centrifuge.io
+REACT_APP_COLLATOR_WSS_URL=wss://fullnode.parachain.centrifuge.io,wss://centrifuge-parachain.api.onfinality.io/public-ws
 REACT_APP_DEFAULT_UNLIST_POOLS=false
 REACT_APP_FAUCET_URL=
 REACT_APP_IPFS_GATEWAY=https://centrifuge.mypinata.cloud/
@@ -19,4 +19,6 @@ REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALJqPUHFzDR2VkoQYWefPQyzjGzKznNny2smXGQpS
 REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
 REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/prod/gn
 REACT_APP_TREASURY=4dpEcgqJRyJK3J8Es6v8ZfVntV7c64Ysgcjd4hYwyGoFPWbg
-REACT_APP_PRIME_IPFS_HASH=QmS5gX2sk1ZCEyWnMjjmQyYkLTz27VVNGzVtCKWneABbj5
+REACT_APP_PRIME_IPFS_HASH=QmS5gX2sk1ZCEyWnMjjmQyYkLTz27VVNGzVtCKWneABbj5
+REACT_APP_ONFINALITY_KEY=18704429-288d-4f55-bda8-8b60f4c53b96
+REACT_APP_TENDERLY_KEY=18aMTJlpNb1lElcYNkkunC
diff --git a/centrifuge-app/.env-config/.env.production b/centrifuge-app/.env-config/.env.production
@@ -1,4 +1,4 @@
-REACT_APP_COLLATOR_WSS_URL=wss://apps.fullnode.centrifuge.io
+REACT_APP_COLLATOR_WSS_URL=wss://apps.fullnode.centrifuge.io,wss://centrifuge-parachain.api.onfinality.io/public-ws
 REACT_APP_DEFAULT_UNLIST_POOLS=false
 REACT_APP_FAUCET_URL=
 REACT_APP_IPFS_GATEWAY=https://centrifuge.mypinata.cloud/
@@ -19,4 +19,6 @@ REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALJqPUHFzDR2VkoQYWefPQyzjGzKznNny2smXGQpS
 REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
 REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/prod/gn
 REACT_APP_TREASURY=4dpEcgqJRyJK3J8Es6v8ZfVntV7c64Ysgcjd4hYwyGoFPWbg
-REACT_APP_PRIME_IPFS_HASH=QmS5gX2sk1ZCEyWnMjjmQyYkLTz27VVNGzVtCKWneABbj5
+REACT_APP_PRIME_IPFS_HASH=QmS5gX2sk1ZCEyWnMjjmQyYkLTz27VVNGzVtCKWneABbj5
+REACT_APP_ONFINALITY_KEY=84bb59f4-05cc-440b-8fd4-7917623a90c6
+REACT_APP_TENDERLY_KEY=18aMTJlpNb1lElcYNkkunC
diff --git a/centrifuge-app/declarations.d.ts b/centrifuge-app/declarations.d.ts
@@ -17,4 +17,5 @@ interface ImportMetaEnv {
   REACT_APP_ALCHEMY_KEY: string
   REACT_APP_WALLETCONNECT_ID: string
   REACT_APP_PRIME_IPFS_HASH: string
+  REACT_APP_ONFINALITY_KEY: string
 }
diff --git a/centrifuge-app/package.json b/centrifuge-app/package.json
@@ -29,9 +29,6 @@
     "@centrifuge/centrifuge-js": "workspace:*",
     "@centrifuge/centrifuge-react": "workspace:*",
     "@centrifuge/fabric": "workspace:*",
-    "@ethersproject/bignumber": "^5.7.0",
-    "@ethersproject/contracts": "^5.6.0",
-    "@ethersproject/providers": "^5.6.0",
     "@makerdao/multicall": "^0.12.0",
     "@polkadot/react-identicon": "~3.1.4",
     "@styled-system/css": "^5.1.5",

diff --git a/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx b/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx
@@ -172,7 +172,7 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
             <AnchorButton
               href={dataUrl}
               download={`asset-${loanId}-timeseries.csv`}
-              variant="secondary"
+              variant="inverted"
               icon={IconDownload}
               small
             >
@@ -252,19 +252,19 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                                 <Text variant="label2">{'Value'}</Text>
                                 <Text variant="label2">
                                   {payload[0].payload.historicPV
-                                    ? formatBalance(payload[0].payload.historicPV, 'USD' || '', 2)
+                                    ? formatBalance(payload[0].payload.historicPV, 'USD', 2)
                                     : payload[0].payload.futurePV
-                                    ? `~${formatBalance(payload[0].payload.futurePV, 'USD' || '', 2)}`
+                                    ? `~${formatBalance(payload[0].payload.futurePV, 'USD', 2)}`
                                     : '-'}
                                 </Text>
                               </Shelf>
                               <Shelf justifyContent="space-between" pl="4px" key={index}>
                                 <Text variant="label2">{'Price'}</Text>
                                 <Text variant="label2">
                                   {payload[0].payload.historicPrice
-                                    ? formatBalance(payload[0].payload.historicPrice, 'USD' || '', 6)
+                                    ? formatBalance(payload[0].payload.historicPrice, 'USD', 6)
                                     : payload[0].payload.futurePrice
-                                    ? `~${formatBalance(payload[0].payload.futurePrice, 'USD' || '', 6)}`
+                                    ? `~${formatBalance(payload[0].payload.futurePrice, 'USD', 6)}`
                                     : '-'}
                                 </Text>
                               </Shelf>
@@ -278,27 +278,39 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                 />
 
                 {activeFilter.value === 'price' && (
-                  <Line type="monotone" dataKey="historicPrice" stroke="#1253FF" strokeWidth={2} dot={false} />
+                  <Line
+                    type="monotone"
+                    dataKey="historicPrice"
+                    stroke={theme.colors.textGold}
+                    strokeWidth={2}
+                    dot={false}
+                  />
                 )}
                 {activeFilter.value === 'price' && (
                   <Line
                     type="monotone"
                     dataKey="futurePrice"
-                    stroke="#c2d3ff"
+                    stroke={theme.colors.textGold}
                     strokeWidth={2}
                     dot={false}
                     strokeDasharray="6 6"
                   />
                 )}
 
                 {activeFilter.value === 'value' && (
-                  <Line type="monotone" dataKey="historicPV" stroke="#1253FF" strokeWidth={2} dot={false} />
+                  <Line
+                    type="monotone"
+                    dataKey="historicPV"
+                    stroke={theme.colors.textGold}
+                    strokeWidth={2}
+                    dot={false}
+                  />
                 )}
                 {activeFilter.value === 'value' && (
                   <Line
                     type="monotone"
                     dataKey="futurePV"
-                    stroke="#c2d3ff"
+                    stroke={theme.colors.textGold}
                     strokeWidth={2}
                     dot={false}
                     strokeDasharray="6 6"

diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -10,6 +10,7 @@ import { daysBetween, formatDate } from '../../utils/date'
 import { formatBalance, formatBalanceAbbreviated, formatPercentage } from '../../utils/formatting'
 import { useLoans } from '../../utils/useLoans'
 import { useDailyPoolStates, usePool } from '../../utils/usePools'
+import { DYF_POOL_ID } from '../PoolCard'
 import { Tooltips, tooltipText } from '../Tooltips'
 import { TooltipContainer, TooltipTitle } from './Tooltip'
 import { getOneDayPerMonth, getRangeNumber } from './utils'
@@ -22,7 +23,6 @@ type ChartData = {
   currency?: string
   seniorAPY: number | null | undefined
   juniorAPY: number | null
-  isToday: boolean
 }
 
 type GraphDataItemWithType = {
@@ -115,7 +115,7 @@ function PoolPerformanceChart() {
     return true
   })
 
-  const [range, setRange] = React.useState<(typeof rangeFilters)[number]>({ value: 'all', label: 'All' })
+  const [range, setRange] = React.useState<(typeof rangeFilters)[number]>(rangeFilters[0])
   const rangeNumber = getRangeNumber(range.value, poolAge) ?? 100
 
   // querying chain for more accurate data, since data for today from subquery is not necessarily up to date
@@ -124,6 +124,16 @@ function PoolPerformanceChart() {
     ? formatBalance(pool?.tranches[pool.tranches.length - 1].tokenPrice || 0, undefined, 5, 5)
     : null
 
+  const todayJuniorApy = pool?.tranches
+    ?.find((pool) => pool.seniority === 0)
+    ?.yield30DaysAnnualized?.toPercent()
+    .toNumber()
+
+  const todaySeniorApy = pool?.tranches
+    ?.find((pool) => pool.seniority === 1)
+    ?.yield30DaysAnnualized?.toPercent()
+    .toNumber()
+
   const trancheTodayPrice = calculateTranchePrices(pool as Pool)
 
   const data: ChartData[] = React.useMemo(
@@ -151,9 +161,8 @@ function PoolPerformanceChart() {
             nav: todayAssetValue,
             juniorTokenPrice: tranchePrices.juniorTokenPrice ?? 0,
             seniorTokenPrice: tranchePrices.seniorTokenPrice ?? null,
-            juniorAPY: formattedJuniorAPY,
-            seniorAPY: formattedSeniorAPY,
-            isToday: true,
+            juniorAPY: pool.id === DYF_POOL_ID ? 15 : todayJuniorApy,
+            seniorAPY: todaySeniorApy,
           }
         }
 
@@ -164,20 +173,17 @@ function PoolPerformanceChart() {
           seniorTokenPrice: seniorTokenPrice !== 0 ? seniorTokenPrice : null,
           juniorAPY: formattedJuniorAPY,
           seniorAPY: formattedSeniorAPY,
-          isToday: false,
         }
       }) || [],
-    [truncatedPoolStates, todayAssetValue, pool, range]
+    [truncatedPoolStates, todayAssetValue, pool, range, todayJuniorApy, todaySeniorApy]
   )
 
-  const todayData = data.find((day) => day.isToday)
-
   const today = {
     nav: todayAssetValue,
     price: todayPrice,
     currency: pool.currency.symbol,
-    juniorAPY: todayData?.juniorAPY,
-    seniorAPY: todayData?.seniorAPY,
+    juniorAPY: pool.id === DYF_POOL_ID ? 15 : todayJuniorApy,
+    seniorAPY: todaySeniorApy,
     ...trancheTodayPrice,
   }
 
@@ -217,10 +223,10 @@ function PoolPerformanceChart() {
           Pool performance
         </Text>
         <Tabs selectedIndex={selectedTabIndex} onChange={(index) => setSelectedTabIndex(index)}>
-          <TabsItem styleOverrides={{ padding: '8px' }} showBorder>
+          <TabsItem styleOverrides={{ padding: '8px' }} showBorder variant="secondary">
             Price
           </TabsItem>
-          <TabsItem styleOverrides={{ padding: '8px' }} showBorder>
+          <TabsItem styleOverrides={{ padding: '8px' }} showBorder variant="secondary">
             APY
           </TabsItem>
         </Tabs>
@@ -258,19 +264,23 @@ function PoolPerformanceChart() {
               <YAxis
                 stroke="none"
                 tickLine={false}
-                style={{ fontSize: '10px', fill: theme.colors.textPrimary }}
+                style={{ fontSize: '10px', fill: theme.colors.textSecondary }}
                 tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 0)}
                 yAxisId="left"
                 width={80}
               />
               <YAxis
                 stroke="none"
                 tickLine={false}
-                style={{ fontSize: '10px', fill: theme.colors.textPrimary }}
+                style={{ fontSize: '10px', fill: theme.colors.textSecondary }}
                 tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 2)}
                 yAxisId="right"
                 orientation="right"
-                domain={selectedTabIndex === 0 ? ['dataMin - 0.25', 'dataMax + 0.25'] : [0, 'dataMax + 0.25']}
+                domain={
+                  selectedTabIndex === 0
+                    ? ['auto', 'auto']
+                    : [(dataMin: number) => [Math.round(dataMin)], (dataMax: number) => [Math.round(dataMax)]]
+                }
               />
               <CartesianGrid stroke={theme.colors.borderPrimary} vertical={false} />
               <Tooltip
@@ -401,8 +411,6 @@ function CustomLegend({
   setRange: (value: { value: string; label: string }) => void
   selectedTabIndex: number
 }) {
-  const juniorAPY = data.juniorAPY ?? 0
-
   const Dot = ({ color }: { color: string }) => (
     <Box width="8px" height="8px" borderRadius="50%" backgroundColor={color} marginRight="4px" />
   )
@@ -419,7 +427,7 @@ function CustomLegend({
     navData,
     {
       color: 'textGold',
-      label: 'Junior token price',
+      label: data.seniorTokenPrice ? 'Junior token price' : 'Token price',
       value: formatBalance(data.juniorTokenPrice ?? 0, '', 3),
       type: 'singleTrancheTokenPrice',
       show: true,
@@ -437,8 +445,8 @@ function CustomLegend({
     navData,
     {
       color: 'textGold',
-      label: 'Junior APY',
-      value: formatPercentage(juniorAPY),
+      label: data.seniorAPY ? 'Junior APY' : 'APY',
+      value: formatPercentage(data.juniorAPY ?? 0),
       show: !!data.juniorAPY,
     },
     {
@@ -468,13 +476,15 @@ function CustomLegend({
           }
 
           return (
-            <Stack key={index} pl={1} display="flex" marginRight="20px">
+            <Stack key={index} display="flex" marginRight="20px">
               <Box display="flex" alignItems="center">
                 <Dot color={item.color} />
                 {hasType(item) ? (
-                  <Tooltips type={item.type} label={item.label} />
-                ) : (
                   <Text variant="body3" style={{ lineHeight: 1.8 }}>
+                    <Tooltips type={item.type} label={item.label} color="textSecondary" size="sm" />
+                  </Text>
+                ) : (
+                  <Text color="textSecondary" variant="body3" style={{ lineHeight: 1.8 }}>
                     {item.label}
                   </Text>
                 )}
@@ -505,7 +515,7 @@ export const CustomTick = ({ x, y, payload }: CustomTickProps) => {
   return (
     <g transform={`translate(${x},${y})`}>
       <text
-        style={{ fontSize: '10px', fill: theme.colors.textPrimary, letterSpacing: '-0.5px' }}
+        style={{ fontSize: '10px', fill: theme.colors.textSecondary, letterSpacing: '-0.5px' }}
         x={0}
         y={0}
         dy={16}

diff --git a/centrifuge-app/src/components/Charts/PriceChart.tsx b/centrifuge-app/src/components/Charts/PriceChart.tsx
@@ -111,7 +111,7 @@ export const PriceChart = ({ data, currency, filter, setFilter, isPrice }: Price
             />
           )}
           <CartesianGrid stroke={theme.colors.borderPrimary} />
-          <Tooltip content={<CustomizedTooltip currency={currency} precision={6} />} />
+          <Tooltip content={<CustomizedTooltip currency={currency} precision={6} isRate={!isPrice} />} />
           <Area
             type="monotone"
             dataKey={isPrice ? 'price' : 'apy'}

diff --git a/centrifuge-app/src/components/Charts/SimpleBarChart.tsx b/centrifuge-app/src/components/Charts/SimpleBarChart.tsx
@@ -11,10 +11,12 @@ import { TooltipContainer, TooltipTitle } from './Tooltip'
 type SimpleBarChartProps = {
   currency?: CurrencyMetadata
   data: { name: string; yAxis: number }[]
+  groupBy?: string
 }
 
-export const SimpleBarChart = ({ currency, data }: SimpleBarChartProps) => {
+export const SimpleBarChart = ({ currency, data, groupBy }: SimpleBarChartProps) => {
   const theme = useTheme()
+  const isSmallerBar = groupBy === 'daily' || false
 
   const getOneDayPerMonth = () => {
     const seenMonths = new Set<string>()
@@ -56,7 +58,7 @@ export const SimpleBarChart = ({ currency, data }: SimpleBarChartProps) => {
             type="category"
             dataKey="name"
             ticks={getOneDayPerMonth()}
-            tick={<CustomTick />}
+            tick={(props) => <CustomTick {...props} />}
             angle={45}
           />
           <YAxis
@@ -92,7 +94,7 @@ export const SimpleBarChart = ({ currency, data }: SimpleBarChartProps) => {
             fill={theme.colors.backgroundTertiary}
             strokeWidth={0}
             fillOpacity={1}
-            maxBarSize={20}
+            barSize={isSmallerBar ? 20 : 80}
           />
         </BarChart>
       </ResponsiveContainer>