Use neutral preset and explicit plus in diffs

sealer3 · Apr 26, 2024 · aec6bec · aec6bec
1 parent 043b155
commit aec6bec
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/components/FiatValue.tsx b/src/components/FiatValue.tsx
@@ -9,6 +9,7 @@ export type FiatBoxProps = {
   borderColor?: string;
   bgColor?: string;
   fgColor?: string;
+  explicitPlus?: boolean;
 };
 
 export const feePreset = {
@@ -69,13 +70,17 @@ const FiatValue: FC<FiatValueProps> = ({
   borderColor,
   bgColor,
   fgColor,
+  explicitPlus = false,
 }) => (
   <span
     className={`px-2 ${borderColor ?? ""} rounded-lg border ${
       bgColor ?? ""
     } text-xs ${fgColor ?? ""}`}
   >
-    {value.isNegative() ? <span className="font-balance">-</span> : null}$
+    {(explicitPlus || value.isNegative()) && !value.isZero() ? (
+      <span className="font-balance">{value.isNegative() ? "-" : "+"}</span>
+    ) : null}
+    $
     <span className="font-balance">
       {formatFiatValue(
         value.isNegative() ? value.mul(FixedNumber.fromValue(-1n)) : value,

diff --git a/src/execution/transaction/StateDiff.tsx b/src/execution/transaction/StateDiff.tsx
@@ -3,7 +3,7 @@ import React, { useContext } from "react";
 import ContentFrame from "../../components/ContentFrame";
 import DisplayInteger from "../../components/DisplayInteger";
 import ElementDiff from "../../components/ElementDiff";
-import { balancePreset } from "../../components/FiatValue";
+import { neutralPreset } from "../../components/FiatValue";
 import HexValue from "../../components/HexValue";
 import NativeTokenAmountAndFiat from "../../components/NativeTokenAmountAndFiat";
 import { TransactionData } from "../../types";
@@ -131,15 +131,16 @@ const buildStateDiffTree = (
                 {balanceDiff >= 0n ? "+" : ""}
                 <NativeTokenAmountAndFiat
                   value={balanceDiff}
-                  {...balancePreset}
+                  explicitPlus={true}
+                  {...neutralPreset}
                 />
               </>
             );
           }
           formatter = (value: string) => (
             <NativeTokenAmountAndFiat
               value={BigInt(value)}
-              {...balancePreset}
+              {...neutralPreset}
             />
           );
           break;