fix: rpc send transfer data, closes #5243

leather-io · Apr 17, 2024 · fb054a0 · fb054a0
1 parent 75c4f5d
commit fb054a0
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 47 deletions.
diff --git a/src/app/common/transactions/bitcoin/coinselect/local-coin-selection.ts b/src/app/common/transactions/bitcoin/coinselect/local-coin-selection.ts
@@ -135,7 +135,10 @@ export function determineUtxosForSpendAllMultipleRecipients({
   });
 
   // Fee has already been deducted from the amount with send all
-  const outputs = recipients.map(({ address, amount }) => ({ value: BigInt(amount), address }));
+  const outputs = recipients.map(({ address, amount }) => ({
+    value: BigInt(amount.amount.toNumber()),
+    address,
+  }));
 
   const fee = Math.ceil(sizeInfo.txVBytes * feeRate);
 
@@ -190,7 +193,10 @@ export function determineUtxosForSpendMultipleRecipients({
     address?: string;
   }[] = [
     // outputs[0] = the desired amount going to recipient
-    ...recipients.map(({ address, amount }) => ({ value: BigInt(amount), address })),
+    ...recipients.map(({ address, amount }) => ({
+      value: BigInt(amount.amount.toNumber()),
+      address,
+    })),
     // outputs[recipients.length] = the remainder to be returned to a change address
     { value: sum - BigInt(amount) - BigInt(fee) },
   ];

diff --git a/src/app/pages/rpc-send-transfer/components/send-transfer-confirmation-details.tsx b/src/app/pages/rpc-send-transfer/components/send-transfer-confirmation-details.tsx
@@ -1,18 +1,18 @@
 import { HStack, Stack, styled } from 'leather-styles/jsx';
 
+import type { Money } from '@shared/models/money.model';
+
+import { formatMoney } from '@app/common/money/format-money';
+
 interface SendTransferConfirmationDetailsProps {
   currentAddress: string;
   recipient: string;
-  time: string;
-  total: string;
-  feeRowValue: string;
+  amount: Money;
 }
 export function SendTransferConfirmationDetails({
   currentAddress,
   recipient,
-  time,
-  total,
-  feeRowValue,
+  amount,
 }: SendTransferConfirmationDetailsProps) {
   return (
     <Stack border="active" borderRadius="sm" p="space.05" gap="space.04" width="100%">
@@ -25,19 +25,9 @@ export function SendTransferConfirmationDetails({
         <styled.span>{recipient}</styled.span>
       </HStack>
       <HStack alignItems="center" gap="space.04" justifyContent="space-between">
-        <styled.span color="ink.text-subdued">Fee</styled.span>
-        <styled.span>{feeRowValue}</styled.span>
-      </HStack>
-      <HStack alignItems="center" gap="space.04" justifyContent="space-between">
-        <styled.span color="ink.text-subdued">Total</styled.span>
-        <styled.span>{total}</styled.span>
+        <styled.span color="ink.text-subdued">Amount</styled.span>
+        <styled.span>{formatMoney(amount)}</styled.span>
       </HStack>
-      {time && (
-        <HStack alignItems="center" gap="space.04" justifyContent="space-between">
-          <styled.span color="ink.text-subdued">Estimated Time</styled.span>
-          <styled.span>{time}</styled.span>
-        </HStack>
-      )}
     </Stack>
   );
 }
diff --git a/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx b/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx
@@ -2,6 +2,7 @@ import { HStack, Stack, styled } from 'leather-styles/jsx';
 
 import type { RpcSendTransferRecipient } from '@shared/rpc/methods/send-transfer';
 
+import { formatMoney } from '@app/common/money/format-money';
 import { truncateMiddle } from '@app/ui/utils/truncate-middle';
 
 interface SendTransferDetailsProps {
@@ -31,7 +32,7 @@ export function SendTransferDetails({ recipients, currentAddress }: SendTransfer
           </HStack>
           <HStack alignItems="center" gap="space.04" justifyContent="space-between">
             <styled.span textStyle="caption.01">Amount</styled.span>
-            <styled.span textStyle="label.01">{amount}</styled.span>
+            <styled.span textStyle="label.01">{formatMoney(amount)}</styled.span>
           </HStack>
         </Stack>
       ))}

diff --git a/src/app/pages/rpc-send-transfer/rpc-send-transfer-confirmation.tsx b/src/app/pages/rpc-send-transfer/rpc-send-transfer-confirmation.tsx
@@ -1,20 +1,24 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Stack } from 'leather-styles/jsx';
+import { HStack, Stack, styled } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
 import { decodeBitcoinTx } from '@shared/crypto/bitcoin/bitcoin.utils';
 import { logger } from '@shared/logger';
 import { CryptoCurrencies } from '@shared/models/currencies.model';
-import { createMoney, createMoneyFromDecimal } from '@shared/models/money.model';
+import { createMoney } from '@shared/models/money.model';
 import { RouteUrls } from '@shared/route-urls';
 import type { RpcSendTransferRecipient } from '@shared/rpc/methods/send-transfer';
 import { makeRpcSuccessResponse } from '@shared/rpc/rpc-methods';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
-import { baseCurrencyAmountInQuote } from '@app/common/money/calculate-money';
-import { formatMoney, formatMoneyPadded, i18nFormatCurrency } from '@app/common/money/format-money';
-import { satToBtc } from '@app/common/money/unit-conversion';
+import { baseCurrencyAmountInQuote, sumMoney } from '@app/common/money/calculate-money';
+import {
+  formatMoney,
+  formatMoneyPadded,
+  formatMoneyWithoutSymbol,
+  i18nFormatCurrency,
+} from '@app/common/money/format-money';
 import { InfoCardFooter } from '@app/components/info-card/info-card';
 import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks';
 import { useBitcoinBroadcastTransaction } from '@app/query/bitcoin/transaction/use-bitcoin-broadcast-transaction';
@@ -50,17 +54,12 @@ export function RpcSendTransferConfirmation() {
   const btcMarketData = useCryptoCurrencyMarketData('BTC');
 
   const psbt = decodeBitcoinTx(tx);
-  const transferAmount = satToBtc(psbt.outputs[0].amount.toString()).toString();
-  const txFiatValue = i18nFormatCurrency(
-    baseCurrencyAmountInQuote(createMoneyFromDecimal(Number(transferAmount), symbol), btcMarketData)
-  );
+  const transferAmount = sumMoney(recipients.map(r => r.amount));
+  const txFiatValue = i18nFormatCurrency(baseCurrencyAmountInQuote(transferAmount, btcMarketData));
   const txFiatValueSymbol = btcMarketData.price.symbol;
-  const feeInBtc = satToBtc(fee);
-  const summaryFee = formatMoneyPadded(createMoney(Number(fee), symbol));
-  const sendingValue = formatMoney(createMoneyFromDecimal(Number(transferAmount), symbol));
-  const totalSpend = formatMoney(
-    createMoneyFromDecimal(Number(transferAmount) + Number(feeInBtc), symbol)
-  );
+  const feeMoney = createMoney(Number(fee), symbol);
+  const summaryFee = formatMoneyPadded(feeMoney);
+  const totalSpend = sumMoney([transferAmount, feeMoney]);
 
   function formBtcTxSummaryState(txId: string) {
     return {
@@ -71,11 +70,11 @@ export function RpcSendTransferConfirmation() {
       txId,
       recipients,
       fee: summaryFee,
-      txValue: transferAmount,
+      txValue: formatMoneyWithoutSymbol(transferAmount),
       arrivesIn: time,
-      totalSpend,
+      totalSpend: formatMoney(totalSpend),
       symbol,
-      sendingValue,
+      sendingValue: formatMoney(transferAmount),
       txFiatValue,
       txFiatValueSymbol,
       feeRowValue,
@@ -121,17 +120,31 @@ export function RpcSendTransferConfirmation() {
 
   return (
     <>
-      <Stack gap={4} width="100%">
+      <Stack width="100%" gap={4} height="100%" pb="100px">
         {recipients.map((recipient, index) => (
           <SendTransferConfirmationDetails
             key={index}
             currentAddress={truncateMiddle(bitcoinAddress)}
             recipient={truncateMiddle(recipient.address)}
-            time={time}
-            total={totalSpend}
-            feeRowValue={feeRowValue}
+            amount={recipient.amount}
           />
         ))}
+        <Stack border="active" borderRadius="sm" p="space.05" gap="space.04" width="100%">
+          <HStack alignItems="center" gap="space.04" justifyContent="space-between">
+            <styled.span color="ink.text-subdued">Fee</styled.span>
+            <styled.span>{feeRowValue}</styled.span>
+          </HStack>
+          <HStack alignItems="center" gap="space.04" justifyContent="space-between">
+            <styled.span color="ink.text-subdued">Total amount</styled.span>
+            <styled.span>{formatMoney(totalSpend)}</styled.span>
+          </HStack>
+          {time && (
+            <HStack alignItems="center" gap="space.04" justifyContent="space-between">
+              <styled.span color="ink.text-subdued">Estimated time</styled.span>
+              <styled.span>{time}</styled.span>
+            </HStack>
+          )}
+        </Stack>
       </Stack>
 
       <InfoCardFooter>

diff --git a/src/app/pages/rpc-send-transfer/use-rpc-send-transfer.ts b/src/app/pages/rpc-send-transfer/use-rpc-send-transfer.ts
@@ -39,7 +39,7 @@ export function useRpcSendTransfer() {
 
   const recipients = recipientsAddresses.map((address, index) => ({
     address,
-    amount: amounts[index],
+    amount: createMoney(Number(amounts[index]), 'BTC'),
   }));
 
   return {

diff --git a/src/shared/rpc/methods/send-transfer.ts b/src/shared/rpc/methods/send-transfer.ts
@@ -8,6 +8,7 @@ import {
   btcAddressNetworkValidator,
   btcAddressValidator,
 } from '@shared/forms/bitcoin-address-validators';
+import type { Money } from '@shared/models/money.model';
 
 import {
   accountSchema,
@@ -56,13 +57,18 @@ export interface RpcSendTransferParamsLegacy extends SendTransferRequestParams {
 }
 
 export interface RpcSendTransferRecipient {
+  address: string;
+  amount: Money;
+}
+
+interface RpcSendTransferRecipientParam {
   address: string;
   amount: string;
 }
 
 export interface RpcSendTransferParams {
   account?: number;
-  recipients: RpcSendTransferRecipient[];
+  recipients: RpcSendTransferRecipientParam[];
   network: string;
 }
 

diff --git a/test-app/src/components/bitcoin.tsx b/test-app/src/components/bitcoin.tsx
@@ -413,11 +413,11 @@ export const Bitcoin = () => {
             recipients: [
               {
                 address: TEST_TESTNET_ACCOUNT_2_BTC_ADDRESS,
-                amount: '10000',
+                amount: '800',
               },
               {
                 address: TEST_TESTNET_ACCOUNT_2_BTC_ADDRESS,
-                amount: '0.010000',
+                amount: '10000',
               },
             ],
             network: 'testnet',