MRKT-93: format stream token NEWM values (#694)

* transforms sale cost amount to correct value

* updates NEWM precision to 2 and drops extra zeroes

* reverts dropping extra NEWM price zeroes

* updates song card price alignment

* formats song card USD amount to three decimal places

* reverts marketplace port number

* updates formatUsdAmount args

apps/marketplace/src/modules/sale/utils.ts

@@ -13,6 +13,8 @@ export const transformApiSale = (apiSale: ApiSale): Sale => {
 
   return {
     ...sale,
+    // TODO: look into back-end returning value with correct decimal places
+    costAmount: sale.costAmount / 1000000,
     song: {
       ...song,
       isExplicit: parentalAdvisory === "Explicit",

packages/components/src/lib/SongCard.tsx

@@ -11,6 +11,7 @@ import { PlayArrow, Stop } from "@mui/icons-material";
 import { bgImage } from "@newm-web/assets";
 import {
   formatNewmAmount,
+  formatUsdAmount,
   getImageSrc,
   resizeCloudinaryImage,
 } from "@newm-web/utils";
@@ -232,6 +233,7 @@ const SongCard = ({
 
           { priceVariant === "text" && (
             <Stack
+              alignItems="flex-end"
               display="flex"
               flexDirection={ title ? "column" : "row" }
               whiteSpace="nowrap"
@@ -251,7 +253,7 @@ const SongCard = ({
                   fontSize={ title ? "12px" : "15px" }
                   variant="subtitle1"
                 >
-                  &nbsp;(≈ { currency(priceInUsd).format() })
+                  &nbsp;(≈ { formatUsdAmount(priceInUsd) })
                 </Typography>
               ) }
             </Stack>

packages/utils/src/lib/crypto.ts

@@ -9,7 +9,18 @@ export const formatNewmAmount = (amount?: number, includeSymbol = true) => {
 
   return currency(amount, {
     pattern: "# !",
-    precision: 1,
+    precision: 2,
     symbol: includeSymbol ? "Ɲ" : "",
   }).format();
 };
+
+/**
+ * Formats a numerical USD amount to three decimal places
+ * rather than the standard two, based on the exchange rate
+ * for NEWM to USD.
+ */
+export const formatUsdAmount = (amount?: number, precision = 3) => {
+  if (!amount) return "";
+
+  return currency(amount, { precision }).format();
+};