Fix Various Asset Balance Quantity Issues

RELEASE-NOTES.md

@@ -14,3 +14,7 @@
 - Add ability to send JUP directly from the address book component
 - Displays the last block time on the Generators page in 24hr time format instead of 12hr
 - Remove My Accounts from gear menu
+
+## 0.0.4
+
+- Fix asset precision/quantity issue by properly converting assets with different decimals params

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jupiter-wallet",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": true,
   "scripts": {
     "proxy": "node proxy/server.js",

src/components/CollapsingPortfolioTable/CollapsingPortfolioTable.tsx

@@ -19,12 +19,13 @@ import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import JUPDialog from "components/JUPDialog";
 import AssetActionsStack from "components/AssetActionsStack";
 import JUPInput from "components/JUPInput";
-import { LedaNFTName } from "utils/common/constants";
+import { LedaNFTName, LongUnitPrecision } from "utils/common/constants";
 import { messageText } from "utils/common/messages";
-import { addCommaSeparators } from "utils/common/addCommaSeparators";
 import useAssets from "hooks/useAssets";
 import useAPIRouter from "hooks/useAPIRouter";
 import { useSnackbar } from "notistack";
+import { QNTtoNXT } from "utils/common/QNTtoNXT";
+import { BigNumber } from "bignumber.js";
 
 interface IPortfolioAssets {
   name: string;
@@ -176,7 +177,7 @@ const CollapsingPortfolioTable: React.FC = () => {
       return createData({
         name: asset.assetDetails.name,
         description: asset.assetDetails.description,
-        qtyOwned: addCommaSeparators(asset.quantityQNT),
+        qtyOwned: asset.quantityQNT,
         assetActions: (
           <AssetActionsStack
             handleSendAsset={handleSendAsset}
@@ -189,7 +190,7 @@ const CollapsingPortfolioTable: React.FC = () => {
           name: asset.assetDetails.name,
           description: asset.assetDetails.description,
           decimals: asset.assetDetails.decimals,
-          quantityQNT: `${asset.assetDetails.quantityQNT}`,
+          quantityQNT: asset.assetDetails.quantityQNT,
         },
       });
     });
@@ -263,14 +264,14 @@ function createData({ name, description, qtyOwned, assetActions, assetDetails }:
   return {
     name,
     description,
-    qtyOwned,
+    qtyOwned: QNTtoNXT(new BigNumber(qtyOwned), assetDetails.decimals, LongUnitPrecision),
     assetActions,
     assetDetails: [
       {
         name: assetDetails.name,
         description: assetDetails.description,
         decimals: assetDetails.decimals,
-        quantityQNT: addCommaSeparators(assetDetails.quantityQNT),
+        quantityQNT: assetDetails.quantityQNT,
       },
     ],
   };

src/utils/common/QNTtoNXT.ts

@@ -0,0 +1,12 @@
+//
+// Basic converter to handle the QNT balances returned from the API, for assets
+//
+// Docs: https://nxtdocs.jelurida.com/API#Quantity_Units_NXT.2C_NQT_and_QNT
+//
+
+import { BigNumber } from "bignumber.js";
+import { addCommaSeparators } from "./addCommaSeparators";
+
+export function QNTtoNXT(quantity: BigNumber, decimals: number, precision: number): string {
+  return addCommaSeparators(new BigNumber(quantity).dividedBy(10 ** decimals).toFixed(precision));
+}

src/views/DEX/DEX.tsx

@@ -5,13 +5,14 @@ import JUPInput from "components/JUPInput";
 import HistoryContainer from "./components/HistoryContainer/HistoryContainer";
 import SwapVertIcon from "@mui/icons-material/SwapVert";
 import { defaultAssetList } from "utils/common/defaultAssets";
-import { addCommaSeparators } from "utils/common/addCommaSeparators";
 import useAPI from "hooks/useAPI";
 import { IAsset } from "types/NXTAPI";
 import OrderBook from "./components/OrderBook";
 import InfoIcon from "@mui/icons-material/Info";
 import useAPIRouter from "hooks/useAPIRouter";
 import { BigNumber } from "bignumber.js";
+import { LongUnitPrecision } from "utils/common/constants";
+import { QNTtoNXT } from "utils/common/QNTtoNXT";
 
 // TODO:
 //  [ ] Paginate swaps tables
@@ -104,7 +105,7 @@ const DEX: React.FC = () => {
         <Typography>Name: {assetDetails?.name}</Typography>
         <Typography>Asset ID: {assetDetails?.asset}</Typography>
         <Typography>
-          Circulating: {addCommaSeparators(assetDetails?.quantityQNT)} {assetDetails?.name}
+          Circulating: {QNTtoNXT(new BigNumber(assetDetails?.quantityQNT), assetDetails.decimals, LongUnitPrecision)} {assetDetails?.name}
         </Typography>
         <Typography>Decimals: {assetDetails?.decimals}</Typography>
         <Link>Show Distribution</Link>

src/views/DEX/components/OrderBook/OrderBook.tsx

@@ -2,30 +2,34 @@ import React, { memo, useEffect, useMemo, useState } from "react";
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material";
 import { CSSProperties } from "@mui/styled-engine";
 import useAPI from "hooks/useAPI";
-import { IGetOrdersResult } from "types/NXTAPI";
+import { IAsset, IGetOrdersResult } from "types/NXTAPI";
 import useBlocks from "hooks/useBlocks";
 import { NQTtoNXT } from "utils/common/NQTtoNXT";
 import { LongUnitPrecision } from "utils/common/constants";
+import { QNTtoNXT } from "utils/common/QNTtoNXT";
+import { BigNumber } from "bignumber.js";
 
 interface IOrderbookProps {
   assetId?: string;
 }
+
 const OrderBook: React.FC<IOrderbookProps> = ({ assetId }) => {
-  const { getOrders } = useAPI();
+  const { getOrders, getAsset } = useAPI();
   const { blockHeight } = useBlocks();
   const [openOrders, setOpenOrders] = useState<IGetOrdersResult>();
+  const [assetDetails, setAssetDetails] = useState<IAsset>();
 
   // maps both bid and ask orders
   const RowsMemo = useMemo(() => {
-    if (openOrders === undefined) {
+    if (openOrders === undefined || assetDetails === undefined || assetDetails === undefined) {
       return;
     }
 
     const mappedAskOrders = openOrders?.results?.askOrders.map((order, index) => {
       return (
         <TableRow key={index}>
           <TableCell>{NQTtoNXT(order.priceNQT, LongUnitPrecision)}</TableCell>
-          <TableCell>{order.quantityQNT}</TableCell>
+          <TableCell>{QNTtoNXT(new BigNumber(order.quantityQNT), assetDetails?.decimals, LongUnitPrecision)}</TableCell>
         </TableRow>
       );
     });
@@ -34,26 +38,30 @@ const OrderBook: React.FC<IOrderbookProps> = ({ assetId }) => {
       return (
         <TableRow key={index}>
           <TableCell>{NQTtoNXT(order.priceNQT, LongUnitPrecision)}</TableCell>
-          <TableCell>{order.quantityQNT}</TableCell>
+          <TableCell>{QNTtoNXT(new BigNumber(order.quantityQNT), assetDetails?.decimals, LongUnitPrecision)}</TableCell>
         </TableRow>
       );
     });
 
     return { asks: mappedAskOrders, bids: mappedBidOrders };
-  }, [openOrders]);
+  }, [assetDetails, openOrders]);
 
   // set the orders for the current asset
   useEffect(() => {
     async function fetchOrders() {
-      if (getOrders === undefined || assetId === undefined) {
+      if (getOrders === undefined || assetId === undefined || getAsset === undefined) {
         return;
       }
 
       setOpenOrders(await getOrders(assetId));
+
+      const assetDetailsResult = await getAsset(assetId); // asset details are required to obtain decimals for proper QNT conversion
+
+      setAssetDetails(assetDetailsResult?.results);
     }
 
     fetchOrders();
-  }, [assetId, blockHeight, getOrders]);
+  }, [assetId, blockHeight, getAsset, getOrders]);
 
   const AskOrderbookMemo = useMemo(() => {
     const askOrderbookStyling: CSSProperties = {

src/views/Dashboard/components/Widgets/PortfolioWidget/PortfolioWidget.tsx

@@ -3,13 +3,14 @@ import { Button, Stack } from "@mui/material";
 import JUPTable, { IHeadCellProps, ITableRow } from "components/JUPTable";
 import JUPDialog from "components/JUPDialog";
 import JUPInput from "components/JUPInput";
-import { LedaNFTName } from "utils/common/constants";
+import { LedaNFTName, LongUnitPrecision } from "utils/common/constants";
 import { messageText } from "utils/common/messages";
-import { addCommaSeparators } from "utils/common/addCommaSeparators";
 import useAssets from "hooks/useAssets";
 import useAPIRouter from "hooks/useAPIRouter";
 import { useSnackbar } from "notistack";
 import AssetActionsStack from "components/AssetActionsStack";
+import { QNTtoNXT } from "utils/common/QNTtoNXT";
+import { BigNumber } from "bignumber.js";
 
 const headCells: Array<IHeadCellProps> = [
   {
@@ -120,7 +121,7 @@ const PortfolioWidget: React.FC = () => {
       return {
         assetId: asset.asset,
         assetName: asset.assetDetails.name,
-        assetBalance: addCommaSeparators(asset.quantityQNT),
+        assetBalance: QNTtoNXT(new BigNumber(asset.quantityQNT), asset.assetDetails.decimals, LongUnitPrecision),
         assetDescription: asset.assetDetails.description,
         actions: (
           <AssetActionsStack