Asset finance repay redesign

centrifuge-app/.env-config/.env.development

@@ -1,21 +1,21 @@
-REACT_APP_COLLATOR_WSS_URL=wss://fullnode.development.cntrfg.com
-REACT_APP_DEFAULT_UNLIST_POOLS=false
-REACT_APP_FAUCET_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/faucet-api-dev
+REACT_APP_COLLATOR_WSS_URL=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/
-REACT_APP_IS_DEMO=false
-REACT_APP_NETWORK=centrifuge
-REACT_APP_ONBOARDING_API_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/onboarding-api-dev
-REACT_APP_PINNING_API_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/pinning-api-dev
+REACT_APP_IS_DEMO=true
+REACT_APP_ONBOARDING_API_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/onboarding-api-demo
+REACT_APP_PINNING_API_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/pinning-api-demo
 REACT_APP_POOL_CREATION_TYPE=immediate
-REACT_APP_RELAY_WSS_URL=wss://fullnode-relay.development.cntrfg.com
-REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools-development
-REACT_APP_SUBSCAN_URL=https://centrifuge.subscan.io
+REACT_APP_RELAY_WSS_URL=wss://frag-moonbase-relay-rpc-ws.g.moonbase.moonbeam.network
+REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools-demo-multichain
+REACT_APP_SUBSCAN_URL=
 REACT_APP_TINLAKE_NETWORK=goerli
 REACT_APP_INFURA_KEY=8cd8e043ee8d4001b97a1c37e08fd9dd
 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_NETWORK=centrifuge
 REACT_APP_REWARDS_TREE_URL=https://storage.googleapis.com/rad-rewards-trees-kovan-staging/latest.json
+REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALwmJutBq95s41U9fWnoApCUgvPqPGTh1GSmFnQh5f9fWo93
 REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
-REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kAJ27w29x7gHM75xajP2yXVLjVBaKmmUTxHwgRuCoAcWaoEiz
-REACT_APP_TREASURY=kAJkmGxAd6iqX9JjWTdhXgCf2PL1TAphTRYrmEqzBrYhwbXAn
+REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/prod/gn
+REACT_APP_TREASURY=kAJkmGxAd6iqX9JjWTdhXgCf2PL1TAphTRYrmEqzBrYhwbXAn

centrifuge-app/src/components/LoanList.tsx

@@ -121,7 +121,10 @@ export function LoanList({ loans }: Props) {
             header: <SortableTableHeader label="Financing date" />,
             cell: (l: Row) => {
               // @ts-expect-error value only exists on Tinlake loans and on active Centrifuge loans
-              return l.originationDate && (l.poolId.startsWith('0x') || l.status === 'Active')
+              return l.originationDate &&
+                (l.poolId.startsWith('0x') || l.status === 'Active') &&
+                'valuationMethod' in l.pricing &&
+                l.pricing.valuationMethod !== 'cash'
                 ? // @ts-expect-error
                   formatDate(l.originationDate)
                 : '-'
@@ -132,7 +135,10 @@ export function LoanList({ loans }: Props) {
     {
       align: 'left',
       header: <SortableTableHeader label="Maturity date" />,
-      cell: (l: Row) => (l?.maturityDate ? formatDate(l.maturityDate) : '-'),
+      cell: (l: Row) =>
+        l?.maturityDate && 'valuationMethod' in l.pricing && l.pricing.valuationMethod !== 'cash'
+          ? formatDate(l.maturityDate)
+          : '-',
       sortKey: 'maturityDate',
     },
     {

centrifuge-app/src/components/PoolFees/ChargeFeesDrawer.tsx

@@ -28,7 +28,7 @@ export const ChargeFeesDrawer = ({ onClose, isOpen }: ChargeFeesProps) => {
   const feeIndex = params.get('charge')
   const feeMetadata = feeIndex ? poolMetadata?.pool?.poolFees?.find((f) => f.id.toString() === feeIndex) : undefined
   const feeChainData = feeIndex ? poolFees?.find((f) => f.id.toString() === feeIndex) : undefined
-  const maxCharge = feeChainData?.amounts.percentOfNav.toDecimal().mul(pool.nav.aum.toDecimal()).div(100)
+  const maxCharge = feeChainData?.amounts.percentOfNav.toDecimal().mul(pool.nav.aum.toDecimal())
   const [updateCharge, setUpdateCharge] = React.useState(false)
   const address = useAddress()
   const isAllowedToCharge = feeChainData?.destination && addressToHex(feeChainData.destination) === address

centrifuge-app/src/components/PoolFees/EditFeesDrawer.tsx

@@ -322,6 +322,7 @@ export const EditFeesDrawer = ({ onClose, isOpen }: ChargeFeesProps) => {
                                 receivingAddress: '',
                                 feeId: undefined,
                                 type: 'chargedUpTo',
+                                category: feeCategories[0],
                               })
                             }
                           >

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

@@ -3,7 +3,7 @@ import { Text } from '@centrifuge/fabric'
 import { useContext, useEffect, useMemo } from 'react'
 import { useBasePath } from '../../../src/utils/useBasePath'
 import { formatDate } from '../../utils/date'
-import { formatBalance } from '../../utils/formatting'
+import { formatBalance, formatPercentage } from '../../utils/formatting'
 import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl'
 import { useAllPoolAssetSnapshots, usePoolMetadata } from '../../utils/usePools'
 import { DataTable, SortableTableHeader } from '../DataTable'
@@ -82,12 +82,17 @@ function getColumnConfig(isPrivate: boolean, symbol: string) {
         formatter: (v: any) => (v ? formatDate(v) : 'Open-end'),
         sortKey: 'maturity-date',
       },
-      { header: 'Valuation method', align: 'left', csvOnly: false, formatter: noop },
+      {
+        header: 'Valuation method',
+        align: 'left',
+        csvOnly: false,
+        formatter: (v: any) => (v === 'OutstandingDebt' ? 'At par' : v),
+      },
       {
         header: 'Advance rate',
         align: 'left',
         csvOnly: false,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatPercentage(v, true, {}, 2) : '-'),
       },
       {
         header: 'Collateral value',

centrifuge-app/src/components/Tooltips.tsx

@@ -314,6 +314,18 @@ export const tooltipText = {
     label: 'Token price',
     body: 'The token price is equal to the NAV divided by the outstanding supply of tokens.',
   },
+  additionalAmountInput: {
+    label: 'Additional amount',
+    body: 'This can be used to repay an additional amount beyond the outstanding principal and interest of the asset. This will lead to an increase in the NAV of the pool.',
+  },
+  repayFormAvailableBalance: {
+    label: 'Available balance',
+    body: 'Balance of the asset originator account on Centrifuge.',
+  },
+  repayFormAvailableBalanceUnlimited: {
+    label: 'Available balance',
+    body: 'Unlimited because this is a virtual accounting process.',
+  },
 }
 
 export type TooltipsProps = {

centrifuge-app/src/pages/IssuerCreatePool/PoolFeeInput.tsx

@@ -76,6 +76,7 @@ export function PoolFeeSection() {
                   percentOfNav: '',
                   walletAddress: '',
                   feePosition: 'Top of waterfall',
+                  category: feeCategories[0],
                 })
               }}
               small

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

@@ -0,0 +1,183 @@
+import { CurrencyBalance, Pool, addressToHex } from '@centrifuge/centrifuge-js'
+import {
+  CombinedSubstrateAccount,
+  formatBalance,
+  useCentrifuge,
+  useCentrifugeApi,
+  wrapProxyCallsForAccount,
+} from '@centrifuge/centrifuge-react'
+import { Box, CurrencyInput, IconMinusCircle, IconPlusCircle, Select, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Field, FieldArray, FieldProps, useFormikContext } from 'formik'
+import React from 'react'
+import { combineLatest, map, of } from 'rxjs'
+import { Dec } from '../../utils/Decimal'
+import { useBorrower } from '../../utils/usePermissions'
+import { usePool, usePoolFees, usePoolMetadata } from '../../utils/usePools'
+import { FinanceValues } from './ExternalFinanceForm'
+import { RepayValues } from './RepayForm'
+
+export const ChargeFeesFields = ({
+  pool,
+  borrower,
+}: {
+  pool: Pool
+  borrower: CombinedSubstrateAccount | undefined
+}) => {
+  const form = useFormikContext<FinanceValues>()
+  const { data: poolMetadata } = usePoolMetadata(pool)
+  const poolFees = usePoolFees(pool.id)
+  // fees can only be charged by the destination address
+  // fees destination must be set to the AO Proxy address
+  const chargableFees = React.useMemo(
+    () =>
+      poolFees?.filter(
+        (fee) => fee.type !== 'fixed' && borrower && addressToHex(fee.destination) === borrower.actingAddress
+      ),
+    [poolFees, borrower]
+  )
+
+  const getOptions = React.useCallback(() => {
+    const chargableOptions = (chargableFees || []).map((f) => {
+      const feeName = poolMetadata?.pool?.poolFees?.find((feeMeta) => feeMeta.id === f.id)?.name || 'Unknown Fee'
+      return {
+        label: `${feeName}`,
+        value: f.id.toString(),
+      }
+    })
+    return chargableFees && chargableFees.length > 1
+      ? [{ label: 'Select fee', value: '' }, ...chargableOptions]
+      : chargableOptions
+  }, [chargableFees, poolMetadata])
+
+  return (
+    <Stack gap={2}>
+      <FieldArray name="fees">
+        {({ remove, push }) => {
+          return (
+            <>
+              <Stack gap={2}>
+                <Stack gap={2}>
+                  {form.values.fees.map((fee, index) => {
+                    return (
+                      <Shelf key={`${fee.id}-${index}`} gap={1} alignItems="flex-start">
+                        <Box flex={1}>
+                          <Select
+                            options={getOptions()}
+                            label="Fee"
+                            onChange={(e) => {
+                              form.setFieldValue(`fees.${index}.id`, e.target.value)
+                            }}
+                            value={form.values.fees[index].id}
+                          />
+                        </Box>
+                        <Box flex={1}>
+                          <Field
+                            key={`fees.${index}.amount`}
+                            name={`fees.${index}.amount`}
+                            validate={(value: number) => {
+                              let error
+                              if (!value) {
+                                error = 'Enter an amount or remove the fee'
+                              }
+                              return error
+                            }}
+                          >
+                            {({ field, meta }: FieldProps) => {
+                              return (
+                                <CurrencyInput
+                                  {...field}
+                                  label="Amount"
+                                  errorMessage={meta.touched ? meta.error : undefined}
+                                  currency={pool.currency.symbol}
+                                  placeholder="0"
+                                  onChange={(value) => form.setFieldValue(`fees.${index}.amount`, value)}
+                                />
+                              )
+                            }}
+                          </Field>
+                        </Box>
+                        <Box
+                          alignSelf="flex-start"
+                          background="none"
+                          border="none"
+                          as="button"
+                          mt={4}
+                          style={{ cursor: 'pointer' }}
+                          onClick={() => remove(index)}
+                        >
+                          <IconMinusCircle size="20px" />
+                        </Box>
+                      </Shelf>
+                    )
+                  })}
+                </Stack>
+                {chargableFees?.length ? (
+                  <Shelf
+                    gap={1}
+                    alignItems="center"
+                    as="button"
+                    style={{ cursor: 'pointer', background: 'none', border: 'none' }}
+                    onClick={(e) => {
+                      e.preventDefault()
+                      if (chargableFees.length === 1) {
+                        return push({ id: chargableFees[0].id.toString(), amount: '' })
+                      }
+                      return push({ id: '', amount: '' })
+                    }}
+                  >
+                    <IconPlusCircle size="20px" color="textButtonTertiary" />
+                    <Text variant="label1" color="textButtonTertiary">
+                      Add fee
+                    </Text>
+                  </Shelf>
+                ) : null}
+              </Stack>
+            </>
+          )
+        }}
+      </FieldArray>
+    </Stack>
+  )
+}
+
+function ChargePoolFeeSummary({ poolId }: { poolId: string }) {
+  const form = useFormikContext<FinanceValues | RepayValues>()
+  const pool = usePool(poolId)
+  const totalFees = form.values.fees.reduce((acc, fee) => acc.add(Dec(fee.amount || 0)), Dec(0))
+
+  return form.values.fees.length > 0 ? (
+    <Stack gap={1}>
+      <Shelf justifyContent="space-between">
+        <Text variant="label2">Fees</Text>
+        <Text variant="label2">{formatBalance(Dec(totalFees), pool.currency.symbol, 2)}</Text>
+      </Shelf>
+    </Stack>
+  ) : null
+}
+
+export function useChargePoolFees(poolId: string, loanId: string) {
+  const pool = usePool(poolId)
+  const borrower = useBorrower(poolId, loanId)
+  const api = useCentrifugeApi()
+  const cent = useCentrifuge()
+  return {
+    render: () => <ChargeFeesFields pool={pool as Pool} borrower={borrower} />,
+    renderSummary: () => <ChargePoolFeeSummary poolId={poolId} />,
+    isValid: ({ values }: { values: Pick<FinanceValues | RepayValues, 'fees'> }) => {
+      return values.fees.every((fee) => !!fee.id && !!fee.amount)
+    },
+    getBatch: ({ values }: { values: Pick<FinanceValues | RepayValues, 'fees'> }) => {
+      if (!values.fees.length) return of([])
+      const fees = values.fees.flatMap((fee) => {
+        if (!fee.amount) throw new Error('Charge amount not provided')
+        if (!borrower) throw new Error('No borrower')
+        const feeAmount = CurrencyBalance.fromFloat(fee.amount, pool.currency.decimals)
+        let feeTx = api.tx.poolFees.chargeFee(fee.id, feeAmount.toString())
+        return cent.remark
+          .remark([[{ Loan: [poolId, loanId] }], feeTx], { batch: true })
+          .pipe(map((tx) => wrapProxyCallsForAccount(api, tx, borrower, 'Borrow')))
+      })
+      return combineLatest(fees)
+    },
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Box, InlineFeedback, Text } from '@centrifuge/fabric'
+
+type Props = {
+  children: React.ReactNode
+  type: 'default' | 'critical'
+  condition: boolean
+}
+
+const styles: Record<Props['type'], { bg: string; color: string }> = {
+  default: {
+    bg: 'statusDefaultBg',
+    color: 'statusDefault',
+  },
+  critical: {
+    bg: 'statusCriticalBg',
+    color: 'statusCritical',
+  },
+}
+
+export function ErrorMessage({ children, condition, type }: Props) {
+  return condition ? (
+    <Box bg={styles[type].bg} p={1}>
+      <InlineFeedback status={type}>
+        <Text color={styles[type].color}>{children}</Text>
+      </InlineFeedback>
+    </Box>
+  ) : null
+}