Update 0.00% (#3798)

packages/web/components/assets/price.tsx

@@ -1,4 +1,5 @@
 import { PricePretty, RatePretty } from "@keplr-wallet/unit";
+import { Dec } from "@keplr-wallet/unit";
 import { CommonPriceChartTimeFrame } from "@osmosis-labs/server";
 import classNames from "classnames";
 import { FunctionComponent, useMemo } from "react";
@@ -11,6 +12,9 @@ import { api } from "~/utils/trpc";
 import { Sparkline } from "../chart/sparkline";
 import { CustomClasses } from "../types";
 
+// 0.01%
+const THRESHOLD = 0.0001;
+
 /** Colored price change text with up/down arrow. */
 export const PriceChange: FunctionComponent<
   {
@@ -19,21 +23,27 @@ export const PriceChange: FunctionComponent<
     value?: PricePretty;
   } & CustomClasses
 > = ({ priceChange, overrideTextClasses = "body1", className, value }) => {
-  const isBullish = priceChange.toDec().isPositive();
-  const isBearish = priceChange.toDec().isNegative();
+  const isBullish = priceChange.toDec().gt(new Dec(THRESHOLD));
+  const isBearish = priceChange.toDec().lt(new Dec(-THRESHOLD));
   const isFlat = !isBullish && !isBearish;
 
+  console.log("----");
+  console.log("priceChange.toDec(): ", priceChange.toDec().toString());
+  console.log("priceChange", priceChange.toDec().toString());
+
   // remove negative symbol since we're using arrows
   if (isBearish) {
     priceChange = priceChange.mul(new RatePretty(-1));
     value = value?.mul(new RatePretty(-1));
   }
 
   const priceChangeDisplay = priceChange
-    .maxDecimals(1)
+    .maxDecimals(2)
     .inequalitySymbol(false)
     .toString();
 
+  console.log("priceChangeDisplay: ", priceChangeDisplay);
+  console.log("----");
   const formattedPriceChangeDisplay =
     value !== undefined ? `(${priceChangeDisplay})` : priceChangeDisplay;
 
@@ -67,7 +77,7 @@ export const PriceChange: FunctionComponent<
       >
         {value !== undefined ? value.toString() + " " : null}
 
-        {isFlat ? "-" : formattedPriceChangeDisplay}
+        {isFlat ? "0.00%" : formattedPriceChangeDisplay}
       </div>
     </div>
   );