Clean up formatter

packages/web/components/complex/portfolio/allocation.tsx

@@ -6,7 +6,6 @@ import { FunctionComponent, useEffect, useState } from "react";
 import { Icon } from "~/components/assets";
 import { AllocationTabs } from "~/components/complex/portfolio/allocation-tabs";
 import { AllocationOptions } from "~/components/complex/portfolio/types";
-import { displayFiatPrice } from "~/components/transactions/transaction-utils";
 import { EventName } from "~/config";
 import {
   Breakpoint,
@@ -15,6 +14,7 @@ import {
   useTranslation,
   useWindowSize,
 } from "~/hooks";
+import { formatFiatPrice } from "~/utils/formatter";
 
 const COLORS: Record<AllocationOptions, string[]> = {
   all: [
@@ -133,6 +133,7 @@ export const Allocation: FunctionComponent<{
             {selectedList.map(({ key, percentage, fiatValue }, index) => {
               const colorClass =
                 COLORS[selectedOption][index % COLORS[selectedOption].length];
+
               return (
                 <div key={key} className="body2 flex w-full justify-between">
                   <div className="flex items-center space-x-1">
@@ -147,7 +148,7 @@ export const Allocation: FunctionComponent<{
                       {percentage.maxDecimals(0).toString()}
                     </span>
                   </div>
-                  <div>{displayFiatPrice(fiatValue, "", t)}</div>
+                  <div>{formatFiatPrice(fiatValue)}</div>
                 </div>
               );
             })}

packages/web/components/transactions/recent-activity/recent-activity-transaction-row.tsx

@@ -2,9 +2,7 @@ import { FunctionComponent } from "react";
 
 import { FallbackImg, Icon } from "~/components/assets";
 import { TransactionRow } from "~/components/transactions/transaction-row";
-import { displayFiatPrice } from "~/components/transactions/transaction-utils";
-import { useTranslation } from "~/hooks";
-
+import { formatFiatPrice } from "~/utils/formatter";
 export type TransactionStatus = "pending" | "success" | "failed";
 
 export const RecentActivityRow: FunctionComponent<{
@@ -26,13 +24,11 @@ export const SwapRow: FunctionComponent<TransactionRow> = ({
   title,
   tokenConversion,
 }) => {
-  const { t } = useTranslation();
-
   const leftComponent = tokenConversion ? (
     <div className="flex flex-col gap-0.5">
       <p className="body2 text-white-full">{title[status]}</p>
       <div className="caption flex items-center gap-1 text-osmoverse-300">
-        {displayFiatPrice(tokenConversion.tokenIn?.value, "", t)}{" "}
+        {formatFiatPrice(tokenConversion.tokenIn?.value)}{" "}
         {tokenConversion.tokenIn.amount.denom}{" "}
         <Icon id="arrow-right" width={14} height={14} />{" "}
         {tokenConversion.tokenOut.amount.denom}

packages/web/components/transactions/transaction-details/transaction-details-content.tsx

@@ -8,7 +8,6 @@ import { Icon } from "~/components/assets";
 import { FallbackImg } from "~/components/assets";
 import { CopyIconButton } from "~/components/buttons/copy-icon-button";
 import { IconButton } from "~/components/buttons/icon-button";
-import { displayFiatPrice } from "~/components/transactions/transaction-utils";
 import { Button } from "~/components/ui/button";
 import { EventName } from "~/config";
 import {
@@ -18,6 +17,7 @@ import {
 } from "~/hooks";
 import { theme } from "~/tailwind.config";
 import { formatPretty } from "~/utils/formatter";
+import { formatFiatPrice } from "~/utils/formatter";
 
 export const TransactionDetailsContent = ({
   onRequestClose,
@@ -142,7 +142,7 @@ export const TransactionDetailsContent = ({
                 {formatPretty(tokenIn.token, { maxDecimals: 6 }).split(" ")[0]}
               </div>
               <div className="body1 text-osmoverse-300">
-                {displayFiatPrice(tokenIn?.usd, "", t)}
+                {formatFiatPrice(tokenIn?.usd, "", t)}
               </div>
             </div>
           </div>
@@ -179,7 +179,7 @@ export const TransactionDetailsContent = ({
                 {formatPretty(tokenOut.token, { maxDecimals: 6 }).split(" ")[0]}
               </div>
               <div className="body1 text-osmoverse-300">
-                {displayFiatPrice(tokenOut?.usd, "", t)}
+                {formatFiatPrice(tokenOut?.usd)}
               </div>
             </div>
           </div>

packages/web/components/transactions/transaction-row.tsx

@@ -3,10 +3,9 @@ import classNames from "classnames";
 import { FunctionComponent } from "react";
 
 import { FallbackImg, Icon } from "~/components/assets";
-import { displayFiatPrice } from "~/components/transactions/transaction-utils";
 import { useTranslation } from "~/hooks";
 import { theme } from "~/tailwind.config";
-import { formatPretty } from "~/utils/formatter";
+import { formatFiatPrice, formatPretty } from "~/utils/formatter";
 
 import { Spinner } from "../loaders";
 
@@ -150,7 +149,7 @@ const TokenConversion: FunctionComponent<
             </div>
           )}
           <div className="body2 text-osmoverse-400">
-            {displayFiatPrice(tokenIn?.value, "-", t)}
+            {tokenIn.value && `- ${formatFiatPrice(tokenIn.value)}`}
           </div>
         </div>
         <FallbackImg
@@ -190,7 +189,7 @@ const TokenConversion: FunctionComponent<
             </div>
           )}
           <div className="md:caption body2 mt-0 md:mt-1">
-            {displayFiatPrice(tokenOut?.value, "+", t)}
+            {tokenOut.value && `+ ${formatFiatPrice(tokenOut.value)}`}
           </div>
         </div>
       </div>

packages/web/components/transactions/transaction-utils.tsx

@@ -1,14 +1,10 @@
-import { PricePretty } from "@keplr-wallet/unit";
-import { Dec } from "@keplr-wallet/unit";
 import { FormattedTransaction } from "@osmosis-labs/server";
 import dayjs from "dayjs";
 import isToday from "dayjs/plugin/isToday";
 import isYesterday from "dayjs/plugin/isYesterday";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useTranslation } from "hooks";
 
-import { MultiLanguageT } from "~/hooks";
-
 dayjs.extend(relativeTime);
 dayjs.extend(isToday);
 dayjs.extend(isYesterday);
@@ -47,25 +43,3 @@ export const useFormatDate = () => {
 
   return formatDate;
 };
-
-export const displayFiatPrice = (
-  value: PricePretty | undefined,
-  prefix: "-" | "+" | "",
-  t: MultiLanguageT
-): string => {
-  if (value === undefined) return t("transactions.noPriceData");
-
-  const decValue = value.toDec();
-  const symbol = value.symbol;
-
-  if (decValue.lt(new Dec(0.01))) {
-    return `${prefix} <${symbol}0.01`;
-  }
-
-  // Convert displayValue to a fixed 2-decimal place string
-  const formattedDisplayValue = `${prefix} ${symbol}${Number(
-    decValue.toString()
-  ).toFixed(2)}`;
-
-  return formattedDisplayValue;
-};