import React from "react";
import { BigNumber, FixedNumber } from "@ethersproject/bignumber";
import { commify } from "@ethersproject/units";
import { useChainInfo } from "../useChainInfo";

const ETH_FEED_DECIMALS = 8;

type USDValueProps = {
  value: BigNumber | undefined;
};

const USDValue: React.FC<USDValueProps> = ({ value }) => {
  const {
    nativeCurrency: { symbol },
  } = useChainInfo();

  return (
    <span className="text-sm">
      {value ? (
        <>
          $
          <span className="font-balance">
            {commify(
              FixedNumber.fromValue(value, ETH_FEED_DECIMALS)
                .round(2)
                .toString()
            )}
          </span>{" "}
          <span className="text-xs text-gray-500">/ {symbol}</span>
        </>
      ) : (
        "N/A"
      )}
    </span>
  );
};

export default React.memo(USDValue);