Assets page fixes & wallet button new design (#2536)

* Assets page fixes

* Add new design for wallet menu

* Redesign dialog

* Readd select functionality

* Modify wallet button

* Fix total assets

* Fix wallet title

* Add skeleton loader

* Add border radius

* remove alias from storybook

* Fix linter

* Add alias back to btn

* Hide skeleton

centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx

@@ -98,7 +98,7 @@ function PoolPerformanceChart() {
   const { poolStates } = useDailyPoolStates(poolId) || {}
   const pool = usePool(poolId)
   const poolAge = pool.createdAt ? daysBetween(pool.createdAt, new Date()) : 0
-  const loans = useLoans(poolId)
+  const { data: loans } = useLoans(poolId)
 
   const firstOriginationDate = loans?.reduce((acc, cur) => {
     if ('originationDate' in cur) {

centrifuge-app/src/components/LayoutBase/styles.tsx

@@ -142,7 +142,7 @@ export const WalletInner = styled(Stack)`
   height: 80px;
   justify-content: center;
   pointer-events: auto;
-  width: 200px;
+  width: 250px;
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
     justify-content: flex-end;

centrifuge-app/src/components/LoanList.tsx

@@ -1,5 +1,5 @@
 import { useBasePath } from '@centrifuge/centrifuge-app/src/utils/useBasePath'
-import { CurrencyBalance, Loan, Pool, TinlakeLoan } from '@centrifuge/centrifuge-js'
+import { AssetSnapshot, CurrencyBalance, Loan, Pool, TinlakeLoan } from '@centrifuge/centrifuge-js'
 import {
   AnchorButton,
   Box,
@@ -26,7 +26,7 @@ import { formatBalance, formatPercentage } from '../utils/formatting'
 import { useFilters } from '../utils/useFilters'
 import { useMetadata } from '../utils/useMetadata'
 import { useCentNFT } from '../utils/useNFTs'
-import { useAllPoolAssetSnapshots, usePool, usePoolMetadata } from '../utils/usePools'
+import { usePool, usePoolMetadata } from '../utils/usePools'
 import { Column, DataTable, SortableTableHeader } from './DataTable'
 import { LoadBoundary } from './LoadBoundary'
 import { prefetchRoute } from './Root'
@@ -45,17 +45,17 @@ type Row = (Loan | TinlakeLoan) & {
 
 type Props = {
   loans: Loan[] | TinlakeLoan[]
+  snapshots: AssetSnapshot[]
 }
 
-export function LoanList({ loans }: Props) {
+export function LoanList({ loans, snapshots }: Props) {
   const { pid: poolId } = useParams<{ pid: string }>()
   if (!poolId) throw new Error('Pool not found')
 
   const navigate = useNavigate()
   const pool = usePool(poolId)
   const isTinlakePool = poolId?.startsWith('0x')
   const basePath = useBasePath()
-  const snapshots = useAllPoolAssetSnapshots(pool.id, new Date().toString())
   const loansData = isTinlakePool
     ? loans
     : (loans ?? []).filter((loan) => 'valuationMethod' in loan.pricing && loan.pricing.valuationMethod !== 'cash')
@@ -267,7 +267,7 @@ export function LoanList({ loans }: Props) {
   return (
     <>
       <Box pt={1} pb={2} paddingX={1} display="flex" justifyContent="space-between" alignItems="center">
-        <Text variant="heading4">{filters.data.map((loan) => loan.status === 'Active').length} ongoing assets</Text>
+        <Text variant="heading4">{rows.filter((row) => !row.marketValue?.isZero()).length} ongoing assets</Text>
         <Box display="flex">
           <Button
             variant="inverted"

centrifuge-app/src/components/PoolOverview/Cashflows.tsx

@@ -14,7 +14,7 @@ export const Cashflows = () => {
 
   const { poolStates } = useDailyPoolStates(poolId) || {}
   const pool = usePool(poolId)
-  const loans = useLoans(poolId)
+  const { data: loans } = useLoans(poolId)
 
   const firstOriginationDate = loans?.reduce((acc, cur) => {
     if ('originationDate' in cur) {

centrifuge-app/src/components/Report/AssetList.tsx

@@ -181,7 +181,7 @@ export function AssetList({ pool }: { pool: Pool }) {
   const { data: poolMetadata } = usePoolMetadata(pool)
   const { symbol } = pool.currency
   const poolCreditType = poolMetadata?.pool?.asset.class || 'privateCredit'
-  const snapshots = useAllPoolAssetSnapshots(pool.id, startDate)
+  const { data: snapshots } = useAllPoolAssetSnapshots(pool.id, startDate)
   const isPrivate = poolCreditType === 'Private credit' || poolCreditType === 'privateCredit'
   const columnConfig = getColumnConfig(isPrivate, symbol)
 

centrifuge-app/src/components/Report/DataFilter.tsx

@@ -48,7 +48,7 @@ export function DataFilter({ poolId }: ReportFilterProps) {
 
   const { data: domains } = useActiveDomains(pool.id)
   const getNetworkName = useGetNetworkName()
-  const loans = useLoans(pool.id) as Loan[] | undefined
+  const { data: loans } = useLoans(pool.id) as Loan[] | undefined
 
   const { showOracleTx } = useDebugFlags()
 

centrifuge-app/src/components/Skeletons/LoanListSkeleton.tsx

@@ -0,0 +1,71 @@
+import { Box, Grid } from '@centrifuge/fabric'
+import styled, { keyframes, useTheme } from 'styled-components'
+import { GRAY_COLOR_SKELETON, SkeletonTable } from './SkeletonTable'
+
+export const shimmer = keyframes`
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+`
+
+export const ShimmerBlock = styled(Box)`
+  background: linear-gradient(
+    to right,
+    ${GRAY_COLOR_SKELETON} 0%,
+    #e0e0e0 20%,
+    ${GRAY_COLOR_SKELETON} 40%,
+    ${GRAY_COLOR_SKELETON} 100%
+  );
+  background-size: 200% 100%;
+  animation: ${shimmer} 1.5s infinite ease-in-out;
+`
+
+export const LoanListSkeleton = () => {
+  const theme = useTheme()
+  return (
+    <Box margin={2}>
+      <Grid
+        backgroundColor={theme.colors.backgroundSecondary}
+        gridTemplateColumns={`repeat(6, 1fr)`}
+        margin={2}
+        borderRadius={10}
+        border={`1px solid ${theme.colors.borderPrimary}`}
+        py={1}
+      >
+        {Array(5)
+          .fill(null)
+          .map((item, index) => (
+            <ShimmerBlock key={`skeleton-loan-list-${index}`} margin={2} height={58} borderRadius={8} />
+          ))}
+        <Box
+          alignSelf="center"
+          height={36}
+          backgroundColor={theme.colors.textGold}
+          margin={2}
+          borderRadius={4}
+          ml={4}
+        />
+      </Grid>
+
+      <Box
+        margin={2}
+        paddingY={1}
+        flexDirection="row"
+        justifyContent="space-between"
+        display="flex"
+        alignItems="center"
+      >
+        <ShimmerBlock width={84} borderRadius="10px" height={12} />
+        <Grid gridTemplateColumns={['200px 138px']} gap={2}>
+          <ShimmerBlock borderRadius="4px" height={36} />
+          <ShimmerBlock borderRadius="4px" height={36} />
+        </Grid>
+      </Box>
+
+      <SkeletonTable />
+    </Box>
+  )
+}

centrifuge-app/src/components/Skeletons/SkeletonTable.tsx

@@ -0,0 +1,68 @@
+import { Box, Grid } from '@centrifuge/fabric'
+import styled, { keyframes, useTheme } from 'styled-components'
+
+export const shimmer = keyframes`
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+`
+
+export const GRAY_COLOR_SKELETON = '#E9E9E9'
+
+export const ShimmerBlock = styled(Box)`
+  height: 12px;
+  width: 84px;
+  border-radius: 10px;
+  background: linear-gradient(
+    to right,
+    ${GRAY_COLOR_SKELETON} 0%,
+    #f0f0f0 20%,
+    ${GRAY_COLOR_SKELETON} 40%,
+    ${GRAY_COLOR_SKELETON} 100%
+  );
+  background-size: 200% 100%;
+  animation: ${shimmer} 1.5s infinite ease-in-out;
+`
+
+export const RectangleBlock = styled(Box)`
+  padding: 16px;
+`
+
+export const SkeletonTable = ({ rows = 12, columns = 9 }) => {
+  const theme = useTheme()
+  const gridTemplateColumns = `repeat(${columns}, 1fr)`
+
+  return (
+    <Grid
+      gridTemplateColumns={gridTemplateColumns}
+      border={`1px solid ${theme.colors.borderPrimary}`}
+      borderRadius="10px"
+      margin={2}
+      overflow="hidden"
+    >
+      {Array(rows * columns)
+        .fill(null)
+        .map((_, index) => {
+          let borderRadius = '0px'
+          if (index === 0) borderRadius = '10px 0 0 0' // Top-left corner
+          if (index === columns - 1) borderRadius = '0 10px 0 0' // Top-right corner
+          if (index === (rows - 1) * columns) borderRadius = '0 0 0 10px' // Bottom-left corner
+          if (index === rows * columns - 1) borderRadius = '0 0 10px 0' // Bottom-right corner
+
+          return (
+            <RectangleBlock
+              key={index}
+              backgroundColor={index < columns ? theme.colors.backgroundSecondary : theme.colors.backgroundPrimary}
+              borderRadius={borderRadius}
+              borderBottom={index < columns ? `1px solid ${theme.colors.borderPrimary}` : 'none'}
+            >
+              <ShimmerBlock backgroundColor={index < columns ? '#D9D9D9' : GRAY_COLOR_SKELETON} />
+            </RectangleBlock>
+          )
+        })}
+    </Grid>
+  )
+}

centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx

@@ -78,7 +78,7 @@ export function ExternalFinanceForm({
   const account = useBorrower(loan.poolId, loan.id)
   const poolFees = useChargePoolFees(loan.poolId, loan.id)
   const api = useCentrifugeApi()
-  const loans = useLoans(loan.poolId)
+  const { data: loans } = useLoans(loan.poolId)
   const sourceLoan = loans?.find((l) => l.id === source) as CreatedLoan | ActiveLoan
   const displayCurrency = source === 'reserve' ? pool.currency.symbol : 'USD'
   const [transactionSuccess, setTransactionSuccess] = React.useState(false)
@@ -248,7 +248,7 @@ export function ExternalFinanceForm({
               <AnchorTextLink href={`#/pools/${pool.id}/liquidity`}>Liquidity tab</AnchorTextLink>.
             </ErrorMessage>
 
-            <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
+            <Stack gap={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
               <Text variant="heading4">Transaction summary</Text>
               <Box padding={2}>
                 <Stack gap={1} mb={3}>

centrifuge-app/src/pages/Loan/ExternalRepayForm.tsx

@@ -64,7 +64,7 @@ export function ExternalRepayForm({
   const balances = useBalances(account?.actingAddress)
   const balance = (balances && findBalance(balances.currencies, pool.currency.key)?.balance.toDecimal()) || Dec(0)
   const poolFees = useChargePoolFees(loan.poolId, loan.id)
-  const loans = useLoans(loan.poolId)
+  const { data: loans } = useLoans(loan.poolId)
   const destinationLoan = loans?.find((l) => l.id === destination) as ActiveLoan
   const displayCurrency = destination === 'reserve' ? pool.currency.symbol : 'USD'
   const utils = useCentrifugeUtils()
@@ -323,10 +323,10 @@ export function ExternalRepayForm({
           outstanding interest ({formatBalance(maxInterest, displayCurrency, 2)}).
         </ErrorMessage>
 
-        <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
+        <Stack gap={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
           <Stack gap={1} mb={2}>
             <Text variant="heading4">Transaction summary</Text>
-            <Box paddingX={2} mt={2}>
+            <Box mt={2}>
               <Shelf justifyContent="space-between">
                 <Tooltips
                   type={maxAvailable === UNLIMITED ? 'repayFormAvailableBalanceUnlimited' : 'repayFormAvailableBalance'}
@@ -350,7 +350,7 @@ export function ExternalRepayForm({
             </Box>
           </Stack>
 
-          <Box paddingX={2}>
+          <Box>
             {destination === 'reserve' ? (
               <InlineFeedback status="default">
                 <Text variant="body2" color="statusDefault">

centrifuge-app/src/pages/Loan/FinanceForm.tsx

@@ -106,7 +106,7 @@ function InternalFinanceForm({
   const account = useBorrower(loan.poolId, loan.id)
   const api = useCentrifugeApi()
   const poolFees = useChargePoolFees(loan.poolId, loan.id)
-  const loans = useLoans(loan.poolId)
+  const { data: loans } = useLoans(loan.poolId)
   const displayCurrency = source === 'reserve' ? pool.currency.symbol : 'USD'
 
   const { current: availableFinancing } = useAvailableFinancing(loan.poolId, loan.id)
@@ -281,9 +281,9 @@ function InternalFinanceForm({
               </Stack>
             </Box>
 
-            <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
+            <Stack gap={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
               <Text variant="heading4">Transaction summary</Text>
-              <Box padding={2}>
+              <Box>
                 <Stack gap={1} mb={3}>
                   <Shelf justifyContent="space-between">
                     <Tooltip
@@ -302,6 +302,26 @@ function InternalFinanceForm({
                       {maxAvailable === UNLIMITED ? 'No limit' : formatBalance(maxAvailable, displayCurrency, 2)}
                     </Text>
                   </Shelf>
+                </Stack>
+
+                <Stack gap={1}>
+                  <Shelf justifyContent="space-between">
+                    <Tooltip
+                      body={
+                        maxAvailable === UNLIMITED
+                          ? 'Unlimited because this is a virtual accounting process.'
+                          : `Balance of the ${source === 'reserve' ? 'onchain reserve' : 'source asset'}.`
+                      }
+                      style={{ pointerEvents: 'auto' }}
+                    >
+                      <Text variant="body2" color="textSecondary">
+                        Available balance
+                      </Text>
+                    </Tooltip>
+                    <Text variant="heading4">
+                      {maxAvailable === UNLIMITED ? 'No limit' : formatBalance(maxAvailable, displayCurrency, 2)}
+                    </Text>
+                  </Shelf>
 
                   <Stack gap={1}>
                     <Shelf justifyContent="space-between">

centrifuge-app/src/pages/Loan/RepayForm.tsx

@@ -99,7 +99,7 @@ function InternalRepayForm({
   const balances = useBalances(account?.actingAddress)
   const balance = (balances && findBalance(balances.currencies, pool.currency.key)?.balance.toDecimal()) || Dec(0)
   const poolFees = useChargePoolFees(loan.poolId, loan.id)
-  const loans = useLoans(loan.poolId)
+  const { data: loans } = useLoans(loan.poolId)
   const api = useCentrifugeApi()
   const destinationLoan = loans?.find((l) => l.id === destination) as Loan
   const displayCurrency = destination === 'reserve' ? pool.currency.symbol : 'USD'
@@ -368,9 +368,9 @@ function InternalRepayForm({
             </Stack>
           </Box>
 
-          <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
+          <Stack gap={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
             <Text variant="heading4">Transaction summary</Text>
-            <Box paddingX={2} mt={2}>
+            <Box mt={2}>
               <Stack gap={1}>
                 <Shelf justifyContent="space-between">
                   <Tooltips

centrifuge-app/src/pages/Loan/SourceSelect.tsx

@@ -14,7 +14,7 @@ type SourceSelectProps = {
 }
 
 export function SourceSelect({ loan, value, onChange, action }: SourceSelectProps) {
-  const unfilteredLoans = useLoans(loan.poolId)
+  const { data: unfilteredLoans } = useLoans(loan.poolId)
   const account = useBorrower(loan.poolId, loan.id)
 
   // acceptable options are active loans with cash valuation ONLY if connected account is the borrower

centrifuge-app/src/pages/Loan/index.tsx

@@ -122,7 +122,7 @@ function ActionButtons({ loan }: { loan: LoanType }) {
           </Button>
         ) : null}
         {loan.outstandingDebt.gtn(0) && (
-          <Button onClick={() => setRepayShown(true)} small variant="inverted">
+          <Button onClick={() => setRepayShown(true)} small variant="secondary">
             {isCashLoan(loan) ? 'Withdraw' : isExternalLoan(loan) ? 'Sell' : 'Repay'}
           </Button>
         )}