Use textencoder instead of Buffer, fix spacing in finance form summar…

…y, fix lint warnings
centrifuge · Aug 9, 2024 · 368da6c · 368da6c
1 parent 12fb134
commit 368da6c
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 48 deletions.
diff --git a/centrifuge-app/src/pages/Loan/ChargeFeesFields.tsx b/centrifuge-app/src/pages/Loan/ChargeFeesFields.tsx
@@ -9,7 +9,7 @@ import {
 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, of, switchMap } from 'rxjs'
+import { combineLatest, map, of } from 'rxjs'
 import { Dec } from '../../utils/Decimal'
 import { useBorrower } from '../../utils/usePermissions'
 import { usePool, usePoolFees, usePoolMetadata } from '../../utils/usePools'
@@ -175,7 +175,7 @@ export function useChargePoolFees(poolId: string, loanId: string) {
         let feeTx = api.tx.poolFees.chargeFee(fee.id, feeAmount.toString())
         return cent.remark
           .remark([[{ Loan: [poolId, loanId] }], feeTx], { batch: true })
-          .pipe(switchMap((tx) => [wrapProxyCallsForAccount(api, tx, borrower, 'Borrow')]))
+          .pipe(map((tx) => wrapProxyCallsForAccount(api, tx, borrower, 'Borrow')))
       })
       return combineLatest(fees)
     },

diff --git a/centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx b/centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx
@@ -175,27 +175,29 @@ export function ExternalFinanceForm({ loan, source }: { loan: ExternalLoan; sour
 
             <Stack p={2} maxWidth="444px" bg="backgroundTertiary" gap={2} mt={2}>
               <Text variant="heading4">Transaction summary</Text>
-              <Shelf justifyContent="space-between">
-                <Text variant="label2" color="textPrimary">
-                  Available balance
-                </Text>
-                <Text variant="label2">
-                  <Tooltip body={'Balance of the source asset'} style={{ pointerEvents: 'auto' }}>
-                    {formatBalance(maxAvailable, displayCurrency, 2)}
-                  </Tooltip>
-                </Text>
-              </Shelf>
-
               <Stack gap={1}>
                 <Shelf justifyContent="space-between">
                   <Text variant="label2" color="textPrimary">
-                    Principal amount
+                    Available balance
+                  </Text>
+                  <Text variant="label2">
+                    <Tooltip body={'Balance of the source asset'} style={{ pointerEvents: 'auto' }}>
+                      {formatBalance(maxAvailable, displayCurrency, 2)}
+                    </Tooltip>
                   </Text>
-                  <Text variant="label2">{formatBalance(totalFinance, displayCurrency, 2)}</Text>
                 </Shelf>
-              </Stack>
 
-              {poolFees.renderSummary()}
+                <Stack gap={1}>
+                  <Shelf justifyContent="space-between">
+                    <Text variant="label2" color="textPrimary">
+                      Principal amount
+                    </Text>
+                    <Text variant="label2">{formatBalance(totalFinance, displayCurrency, 2)}</Text>
+                  </Shelf>
+                </Stack>
+
+                {poolFees.renderSummary()}
+              </Stack>
 
               {source === 'reserve' ? (
                 <InlineFeedback status="default">

diff --git a/centrifuge-app/src/pages/Loan/ExternalRepayForm.tsx b/centrifuge-app/src/pages/Loan/ExternalRepayForm.tsx
@@ -172,7 +172,7 @@ export function ExternalRepayForm({ loan, destination }: { loan: ExternalLoan; d
       totalRepay,
       principalAmount,
     }
-  }, [loan, balance, repayForm.values])
+  }, [loan, balance, repayForm.values, destination])
 
   if (loan.status === 'Closed' || ('valuationMethod' in loan.pricing && loan.pricing.valuationMethod !== 'oracle')) {
     return null

diff --git a/centrifuge-app/src/pages/Loan/FinanceForm.tsx b/centrifuge-app/src/pages/Loan/FinanceForm.tsx
@@ -113,7 +113,10 @@ function InternalFinanceForm({ loan, source }: { loan: LoanType; source: string
       } else if (source === 'other') {
         if (!financeForm.values.category) throw new Error('No category selected')
         const increaseDebtTx = api.tx.loans.increaseDebt(poolId, loan.id, { internal: principal })
-        const categoryHex = Buffer.from(financeForm.values.category).toString('hex')
+        const encoded = new TextEncoder().encode(financeForm.values.category)
+        const categoryHex = Array.from(encoded)
+          .map((byte) => byte.toString(16).padStart(2, '0'))
+          .join('')
         financeTx = cent.remark.remark([[{ Named: categoryHex }], increaseDebtTx], { batch: true })
       } else {
         const repay = { principal, interest: new BN(0), unscheduled: new BN(0) }
@@ -241,34 +244,36 @@ function InternalFinanceForm({ loan, source }: { loan: LoanType; source: string
 
             <Stack p={2} maxWidth="444px" bg="backgroundTertiary" gap={2} mt={2}>
               <Text variant="heading4">Transaction summary</Text>
-              <Shelf justifyContent="space-between">
-                <Text variant="label2" color="textPrimary">
-                  Available balance
-                </Text>
-                <Text variant="label2">
-                  <Tooltip
-                    body={
-                      maxAvailable === UNLIMITED
-                        ? 'Unlimited because this is a virtual accounting process.'
-                        : `Balance of the ${source === 'reserve' ? 'onchain reserve' : 'source asset'}.`
-                    }
-                    style={{ pointerEvents: 'auto' }}
-                  >
-                    {maxAvailable === UNLIMITED ? 'No limit' : formatBalance(maxAvailable, displayCurrency, 2)}
-                  </Tooltip>
-                </Text>
-              </Shelf>
-
               <Stack gap={1}>
                 <Shelf justifyContent="space-between">
                   <Text variant="label2" color="textPrimary">
-                    {isCashLoan(loan) ? 'Deposit amount' : 'Financing amount'}
+                    Available balance
+                  </Text>
+                  <Text variant="label2">
+                    <Tooltip
+                      body={
+                        maxAvailable === UNLIMITED
+                          ? 'Unlimited because this is a virtual accounting process.'
+                          : `Balance of the ${source === 'reserve' ? 'onchain reserve' : 'source asset'}.`
+                      }
+                      style={{ pointerEvents: 'auto' }}
+                    >
+                      {maxAvailable === UNLIMITED ? 'No limit' : formatBalance(maxAvailable, displayCurrency, 2)}
+                    </Tooltip>
                   </Text>
-                  <Text variant="label2">{formatBalance(totalFinance, displayCurrency, 2)}</Text>
                 </Shelf>
-              </Stack>
 
-              {poolFees.renderSummary()}
+                <Stack gap={1}>
+                  <Shelf justifyContent="space-between">
+                    <Text variant="label2" color="textPrimary">
+                      {isCashLoan(loan) ? 'Deposit amount' : 'Financing amount'}
+                    </Text>
+                    <Text variant="label2">{formatBalance(totalFinance, displayCurrency, 2)}</Text>
+                  </Shelf>
+                </Stack>
+
+                {poolFees.renderSummary()}
+              </Stack>
 
               {source === 'reserve' ? (
                 <InlineFeedback status="default">
@@ -638,9 +643,3 @@ function divideBetweenCurrencies(
 
   return divideBetweenCurrencies(remainder, rest, withdrawAddresses, ignoredCurrencies, combinedResult)
 }
-
-const stringToHex = (str: string) =>
-  str
-    .split('')
-    .map((char) => ('00' + char.charCodeAt(0).toString(16)).slice(-2))
-    .join('')
diff --git a/centrifuge-app/src/pages/Loan/RepayForm.tsx b/centrifuge-app/src/pages/Loan/RepayForm.tsx
@@ -99,7 +99,10 @@ function InternalRepayForm({ loan, destination }: { loan: ActiveLoan | CreatedLo
         } else if (destination === 'other') {
           if (!repayForm.values.category) throw new Error('No category selected')
           const decreaseDebtTx = api.tx.loans.decreaseDebt(pool.id, loan.id, { internal: principal })
-          const categoryHex = Buffer.from(repayForm.values.category).toString('hex')
+          const encoded = new TextEncoder().encode(repayForm.values.category)
+          const categoryHex = Array.from(encoded)
+            .map((byte) => byte.toString(16).padStart(2, '0'))
+            .join('')
           repayTx = cent.remark.remark([[{ Named: categoryHex }], decreaseDebtTx], { batch: true })
         } else {
           const repay = { principal, interest, unscheduled: amountAdditional }