fix: incorrect ui with psbt listing tx, closes #4428

src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-receive-totals.tsx

@@ -1,5 +1,7 @@
 import { truncateMiddle } from '@stacks/ui-utils';
 
+import { removeMinusSign } from '@shared/utils';
+
 import { formatMoney, i18nFormatCurrency } from '@app/common/money/format-money';
 import { usePsbtSignerContext } from '@app/features/psbt-signer/psbt-signer.context';
 import { useCalculateBitcoinFiatValue } from '@app/query/common/market-data/market-data.hooks';
@@ -8,23 +10,44 @@ import { PsbtAddressTotalItem } from './psbt-address-total-item';
 import { PsbtInscription } from './psbt-inscription';
 
 interface PsbtAddressTotalsProps {
+  showNativeSegwitTotal: boolean;
   showTaprootTotal: boolean;
 }
-export function PsbtAddressReceiveTotals({ showTaprootTotal }: PsbtAddressTotalsProps) {
-  const { accountInscriptionsBeingReceived, addressTaproot, addressTaprootTotal } =
-    usePsbtSignerContext();
+export function PsbtAddressReceiveTotals({
+  showNativeSegwitTotal,
+  showTaprootTotal,
+}: PsbtAddressTotalsProps) {
+  const {
+    accountInscriptionsBeingReceived,
+    addressNativeSegwit,
+    addressNativeSegwitTotal,
+    addressTaproot,
+    addressTaprootTotal,
+  } = usePsbtSignerContext();
   const calculateBitcoinFiatValue = useCalculateBitcoinFiatValue();
 
-  const isReceivingInscriptions = accountInscriptionsBeingReceived?.length;
+  const isReceivingInscriptions = accountInscriptionsBeingReceived?.length > 0;
 
   return (
     <>
+      {!isReceivingInscriptions && showNativeSegwitTotal ? (
+        <PsbtAddressTotalItem
+          hoverLabel={addressNativeSegwit}
+          subtitle={truncateMiddle(addressNativeSegwit)}
+          subValue={removeMinusSign(
+            i18nFormatCurrency(calculateBitcoinFiatValue(addressNativeSegwitTotal))
+          )}
+          value={removeMinusSign(formatMoney(addressNativeSegwitTotal))}
+        />
+      ) : null}
       {!isReceivingInscriptions && showTaprootTotal ? (
         <PsbtAddressTotalItem
           hoverLabel={addressTaproot}
           subtitle={truncateMiddle(addressTaproot)}
-          subValue={i18nFormatCurrency(calculateBitcoinFiatValue(addressTaprootTotal))}
-          value={formatMoney(addressTaprootTotal)}
+          subValue={removeMinusSign(
+            i18nFormatCurrency(calculateBitcoinFiatValue(addressTaprootTotal))
+          )}
+          value={removeMinusSign(formatMoney(addressTaprootTotal))}
         />
       ) : null}
       {isReceivingInscriptions

src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-transfer-totals.tsx

@@ -15,7 +15,7 @@ export function PsbtAddressTransferTotals({ showNativeSegwitTotal }: PsbtAddress
     usePsbtSignerContext();
   const calculateBitcoinFiatValue = useCalculateBitcoinFiatValue();
 
-  const isTransferringInscriptions = accountInscriptionsBeingTransferred?.length;
+  const isTransferringInscriptions = accountInscriptionsBeingTransferred?.length > 0;
 
   return (
     <>

src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-inscription.tsx

@@ -27,7 +27,6 @@ export function PsbtInscription({ inscription }: PsbtInscriptionProps) {
       />
     );
 
-  //
   return (
     <PsbtAddressTotalItem
       image={<InscriptionPreview inscription={supportedInscription} height="40px" width="40px" />}

src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/psbt-inputs-outputs-totals.tsx

@@ -36,7 +36,10 @@ export function PsbtInputsOutputsTotals() {
       {isReceiving ? (
         <Box p="space.05">
           <PsbtRequestDetailsSectionHeader title="You'll receive" />
-          <PsbtAddressReceiveTotals showTaprootTotal={isTaprootTotalLessThanZero} />
+          <PsbtAddressReceiveTotals
+            showNativeSegwitTotal={isNativeSegwitTotalLessThanZero}
+            showTaprootTotal={isTaprootTotalLessThanZero}
+          />
         </Box>
       ) : null}
     </PsbtRequestDetailsSectionLayout>

src/app/features/psbt-signer/hooks/use-parsed-psbt.tsx

@@ -1,7 +1,9 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import * as btc from '@scure/btc-signer';
 
+import { createMoney } from '@shared/models/money.model';
+
 import { subtractMoney } from '@app/common/money/calculate-money';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentAccountTaprootIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/taproot-account.hooks';
@@ -50,12 +52,18 @@ export function useParsedPsbt({ inputs, indexesToSign, outputs }: UseParsedPsbtA
     return noInputs || noOutputs;
   }, [inputs.length, outputs.length]);
 
+  const fee = useMemo(() => {
+    if (psbtInputsTotal.amount.isGreaterThan(psbtOutputsTotal.amount))
+      return subtractMoney(psbtInputsTotal, psbtOutputsTotal);
+    return createMoney(0, 'BTC');
+  }, [psbtInputsTotal, psbtOutputsTotal]);
+
   return {
     accountInscriptionsBeingTransferred,
     accountInscriptionsBeingReceived,
     addressNativeSegwitTotal: subtractMoney(inputsTotalNativeSegwit, outputsTotalNativeSegwit),
     addressTaprootTotal: subtractMoney(inputsTotalTaproot, outputsTotalTaproot),
-    fee: subtractMoney(psbtInputsTotal, psbtOutputsTotal),
+    fee,
     isPsbtMutable,
     psbtInputs: parsedInputs,
     psbtOutputs: parsedOutputs,

src/app/features/psbt-signer/hooks/use-psbt-inscriptions.tsx

@@ -22,24 +22,33 @@ export function usePsbtInscriptions(psbtInputs: PsbtInput[], psbtOutputs: PsbtOu
     [psbtInputs, psbtOutputs]
   );
 
-  return useMemo(
-    () => ({
-      accountInscriptionsBeingTransferred: psbtInputs
-        .filter(
-          input =>
-            input.address === bitcoinAddressNativeSegwit || input.address === bitcoinAddressTaproot
-        )
-        .map(input => input.inscription)
-        .filter(isDefined),
-      accountInscriptionsBeingReceived: outputsReceivingInscriptions
-        .filter(
-          outputWithInscription =>
-            outputWithInscription.address === bitcoinAddressNativeSegwit ||
-            outputWithInscription.address === bitcoinAddressTaproot
-        )
-        .map(input => input.inscription)
-        .filter(isDefined),
-    }),
-    [bitcoinAddressNativeSegwit, bitcoinAddressTaproot, outputsReceivingInscriptions, psbtInputs]
-  );
+  return useMemo(() => {
+    const accountInscriptionsBeingTransferred = psbtInputs
+      .filter(
+        input =>
+          input.address === bitcoinAddressNativeSegwit || input.address === bitcoinAddressTaproot
+      )
+      .map(input => input.inscription)
+      .filter(isDefined);
+
+    const accountInscriptionsBeingReceived = outputsReceivingInscriptions
+      .filter(
+        outputWithInscription =>
+          outputWithInscription.address === bitcoinAddressNativeSegwit ||
+          outputWithInscription.address === bitcoinAddressTaproot
+      )
+      .map(input => input.inscription)
+      .filter(
+        inscription =>
+          !accountInscriptionsBeingTransferred.find(
+            transferInscription => inscription.id === transferInscription.id
+          )
+      )
+      .filter(isDefined);
+
+    return {
+      accountInscriptionsBeingTransferred,
+      accountInscriptionsBeingReceived,
+    };
+  }, [bitcoinAddressNativeSegwit, bitcoinAddressTaproot, outputsReceivingInscriptions, psbtInputs]);
 }

src/shared/utils.ts

@@ -74,3 +74,7 @@ export function closeWindow() {
 export function removeTrailingNullCharacters(s: string) {
   return s.replace(/\0*$/g, '');
 }
+
+export function removeMinusSign(value: string) {
+  return value.replace('-', '');
+}