diff --git a/packages/web/components/assets/price.tsx b/packages/web/components/assets/price.tsx index 63b543c783..2c8f37fce6 100644 --- a/packages/web/components/assets/price.tsx +++ b/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,10 +23,14 @@ 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)); @@ -30,10 +38,12 @@ export const PriceChange: FunctionComponent< } 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} );