Use 8 decimals for face value and settlement price (#1744)

centrifuge · Dec 8, 2023 · 1660507 · 1660507
1 parent 987848e
commit 1660507
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 47 deletions.
diff --git a/centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx b/centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx
@@ -1,6 +1,6 @@
 import { CurrencyBalance, ExternalLoan, Pool, Price, WithdrawAddress } from '@centrifuge/centrifuge-js'
 import { useCentrifugeTransaction } from '@centrifuge/centrifuge-react'
-import { Box, Button, Card, CurrencyInput_DEPRECATED, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Box, Button, Card, CurrencyInput, Shelf, Stack, Text } from '@centrifuge/fabric'
 import Decimal from 'decimal.js-light'
 import { Field, FieldProps, Form, FormikProvider, useFormik, useFormikContext } from 'formik'
 import * as React from 'react'
@@ -128,13 +128,11 @@ export function ExternalFinanceFields({
       <Field name="faceValue" validate={combine(positiveNumber())}>
         {({ field, meta, form }: FieldProps) => {
           return (
-            <CurrencyInput_DEPRECATED
+            <CurrencyInput
               {...field}
               label="Face value"
               errorMessage={meta.touched ? meta.error : undefined}
-              placeholder="0.0"
-              precision={6}
-              variant="small"
+              decimals={8}
               onChange={(value) => form.setFieldValue('faceValue', value)}
               currency={pool.currency.symbol}
             />
@@ -160,15 +158,13 @@ export function ExternalFinanceFields({
       >
         {({ field, meta, form }: FieldProps) => {
           return (
-            <CurrencyInput_DEPRECATED
+            <CurrencyInput
               {...field}
               label="Settlement price"
-              variant="small"
               errorMessage={meta.touched ? meta.error : undefined}
               currency={pool.currency.symbol}
               onChange={(value) => form.setFieldValue('price', value)}
-              placeholder="0.0"
-              precision={6}
+              decimals={8}
             />
           )
         }}

diff --git a/centrifuge-app/src/pages/Loan/ExternalRepayForm.tsx b/centrifuge-app/src/pages/Loan/ExternalRepayForm.tsx
@@ -1,6 +1,6 @@
 import { CurrencyBalance, ExternalLoan, findBalance, Price } from '@centrifuge/centrifuge-js'
 import { roundDown, useBalances, useCentrifugeTransaction } from '@centrifuge/centrifuge-react'
-import { Box, Button, Card, CurrencyInput_DEPRECATED, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Box, Button, Card, CurrencyInput, Shelf, Stack, Text } from '@centrifuge/fabric'
 import BN from 'bn.js'
 import Decimal from 'decimal.js-light'
 import { Field, FieldProps, Form, FormikProvider, useFormik } from 'formik'
@@ -92,14 +92,12 @@ export function ExternalRepayForm({ loan }: { loan: ExternalLoan }) {
               <Field validate={combine(positiveNumber())} name="faceValue">
                 {({ field, meta, form }: FieldProps) => {
                   return (
-                    <CurrencyInput_DEPRECATED
+                    <CurrencyInput
                       {...field}
                       label="Face value"
                       disabled={isRepayLoading}
                       errorMessage={meta.touched ? meta.error : undefined}
-                      placeholder="0.0"
-                      precision={6}
-                      variant="small"
+                      decimals={8}
                       onChange={(value) => form.setFieldValue('faceValue', value)}
                       currency={pool.currency.symbol}
                     />
@@ -130,16 +128,14 @@ export function ExternalRepayForm({ loan }: { loan: ExternalLoan }) {
               >
                 {({ field, meta, form }: FieldProps) => {
                   return (
-                    <CurrencyInput_DEPRECATED
+                    <CurrencyInput
                       {...field}
-                      variant="small"
                       label="Settlement price"
                       disabled={isRepayLoading}
                       errorMessage={meta.touched ? meta.error : undefined}
                       currency={pool.currency.symbol}
                       onChange={(value) => form.setFieldValue('price', value)}
-                      placeholder="0.0"
-                      precision={6}
+                      decimals={8}
                     />
                   )
                 }}

diff --git a/centrifuge-app/src/pages/Loan/FinanceForm.tsx b/centrifuge-app/src/pages/Loan/FinanceForm.tsx
@@ -6,16 +6,7 @@ import {
   useCentrifugeUtils,
   useGetNetworkName,
 } from '@centrifuge/centrifuge-react'
-import {
-  Button,
-  Card,
-  CurrencyInput_DEPRECATED,
-  InlineFeedback,
-  Select_DEPRECATED,
-  Shelf,
-  Stack,
-  Text,
-} from '@centrifuge/fabric'
+import { Button, Card, CurrencyInput, InlineFeedback, Select, Shelf, Stack, Text } from '@centrifuge/fabric'
 import Decimal from 'decimal.js-light'
 import { Field, FieldProps, Form, FormikProvider, useField, useFormik, useFormikContext } from 'formik'
 import * as React from 'react'
@@ -122,7 +113,7 @@ function InternalFinanceForm({ loan }: { loan: LoanType }) {
             >
               {({ field, meta, form }: FieldProps) => {
                 return (
-                  <CurrencyInput_DEPRECATED
+                  <CurrencyInput
                     {...field}
                     value={field.value instanceof Decimal ? field.value.toNumber() : field.value}
                     label="Amount"
@@ -184,7 +175,7 @@ export function WithdrawSelect({ loan, borrower }: { loan: LoanType; borrower: C
   if (!ao?.transferAllowlist.length) return null
 
   return (
-    <Select_DEPRECATED
+    <Select
       name="withdraw"
       label="Withdrawal address"
       onChange={(event) => helpers.setValue(JSON.parse(event.target.value))}

diff --git a/centrifuge-app/src/pages/Loan/OraclePriceForm.tsx b/centrifuge-app/src/pages/Loan/OraclePriceForm.tsx
@@ -1,6 +1,6 @@
 import { CurrencyBalance, Loan as LoanType, Price } from '@centrifuge/centrifuge-js'
 import { useAddress, useCentrifugeTransaction } from '@centrifuge/centrifuge-react'
-import { Box, Button, Card, CurrencyInput_DEPRECATED, Flex, IconArrowDown, Stack, Text } from '@centrifuge/fabric'
+import { Box, Button, Card, CurrencyInput, Flex, IconArrowDown, Stack, Text } from '@centrifuge/fabric'
 import Decimal from 'decimal.js-light'
 import { Field, FieldProps, Form, FormikProvider, useFormik } from 'formik'
 import * as React from 'react'
@@ -86,12 +86,11 @@ export function OraclePriceForm({
             <Field name="currentPrice">
               {({ field }: FieldProps) => {
                 return (
-                  <CurrencyInput_DEPRECATED
+                  <CurrencyInput
                     {...field}
-                    variant="small"
                     label="Current price"
                     disabled
-                    precision={6}
+                    decimals={8}
                     currency={pool.currency.symbol}
                   />
                 )
@@ -103,15 +102,14 @@ export function OraclePriceForm({
             <Field validate={combine(positiveNumber())} name="newPrice">
               {({ field, meta, form }: FieldProps) => {
                 return (
-                  <CurrencyInput_DEPRECATED
+                  <CurrencyInput
                     {...field}
-                    variant="small"
                     label="New price"
                     errorMessage={meta.touched ? meta.error : undefined}
                     disabled={isOraclePriceLoading}
                     currency={pool.currency.symbol}
                     onChange={(value) => form.setFieldValue('newPrice', value)}
-                    precision={6}
+                    decimals={8}
                   />
                 )
               }}

diff --git a/centrifuge-app/src/pages/Loan/RepayForm.tsx b/centrifuge-app/src/pages/Loan/RepayForm.tsx
@@ -1,6 +1,6 @@
 import { ActiveLoan, CurrencyBalance, findBalance } from '@centrifuge/centrifuge-js'
 import { useBalances, useCentrifugeTransaction } from '@centrifuge/centrifuge-react'
-import { Button, Card, CurrencyInput_DEPRECATED, InlineFeedback, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Button, Card, CurrencyInput, InlineFeedback, Shelf, Stack, Text } from '@centrifuge/fabric'
 import BN from 'bn.js'
 import Decimal from 'decimal.js-light'
 import { Field, FieldProps, Form, FormikProvider, useFormik } from 'formik'
@@ -110,7 +110,7 @@ function InternalRepayForm({ loan }: { loan: ActiveLoan }) {
             >
               {({ field, meta, form }: FieldProps) => {
                 return (
-                  <CurrencyInput_DEPRECATED
+                  <CurrencyInput
                     {...field}
                     value={field.value instanceof Decimal ? field.value.toNumber() : field.value}
                     label="Amount"

diff --git a/centrifuge-app/src/pages/Loan/TransferDebtForm.tsx b/centrifuge-app/src/pages/Loan/TransferDebtForm.tsx
@@ -1,6 +1,6 @@
 import { ActiveLoan, CurrencyBalance, Loan, Loan as LoanType, Pool, Price } from '@centrifuge/centrifuge-js'
 import { useCentrifugeTransaction } from '@centrifuge/centrifuge-react'
-import { Button, Card, CurrencyInput_DEPRECATED, Select_DEPRECATED, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Button, Card, CurrencyInput, Select, Shelf, Stack, Text } from '@centrifuge/fabric'
 import BN from 'bn.js'
 import Decimal from 'decimal.js-light'
 import { Field, FieldProps, Form, FormikProvider, useFormik } from 'formik'
@@ -128,7 +128,7 @@ export function TransferDebtForm({ loan }: { loan: LoanType }) {
           ) : null}
           <Field name="targetLoan">
             {({ field, meta, form }: FieldProps) => (
-              <Select_DEPRECATED
+              <Select
                 name="targetLoan"
                 label="Settlement asset"
                 onChange={(event) => {
@@ -171,10 +171,10 @@ export function TransferDebtForm({ loan }: { loan: LoanType }) {
               </Shelf>
             </>
           ) : (
-            <Field name="amount" validate={(val: any) => validate(Dec(val))}>
+            <Field name="amount" validate={(val: any) => validate(Dec(val || 0))}>
               {({ field, meta, form }: FieldProps) => {
                 return (
-                  <CurrencyInput_DEPRECATED
+                  <CurrencyInput
                     {...field}
                     value={field.value instanceof Decimal ? field.value.toNumber() : field.value}
                     label="Amount"

diff --git a/centrifuge-app/src/utils/validation/index.ts b/centrifuge-app/src/utils/validation/index.ts
@@ -40,8 +40,8 @@ export const settlementPrice = (err?: CustomError) => (val?: any) => {
     return getError('Value must be equal to or larger than 1', err, val)
   }
 
-  const regex = new RegExp(/^\d{1,3}(?:\.\d{1,6})?$/)
-  return regex.test(val) ? '' : getError('Value must be in the format of (1-3).(0-6) digits', err, val)
+  const regex = new RegExp(/^\d{1,3}(?:\.\d{1,8})?$/)
+  return regex.test(val) ? '' : getError('Value must be in the format of (1-3).(0-8) digits', err, val)
 }
 
 export const maxPriceVariance = (pricing: ExternalPricingInfo, err?: CustomError) => (val?: any) => {

diff --git a/fabric/src/components/CurrencyInput/CurrencyInput.stories.tsx b/fabric/src/components/CurrencyInput/CurrencyInput.stories.tsx
@@ -21,7 +21,6 @@ Default.args = {
   errorMessage: '',
   disabled: false,
   currency: 'kUSD',
-  value: 123456.0,
   onChange: () => {},
   onSetMax: () => {},
 }
diff --git a/fabric/src/components/CurrencyInput/index.tsx b/fabric/src/components/CurrencyInput/index.tsx
@@ -152,7 +152,7 @@ export function CurrencyInput({
   currency,
   onSetMax,
   placeholder = '0.0',
-  decimals = 6,
+  decimals = 8,
   onChange,
   onBlur,
   ...inputProps