fixed floating point math

Signed-off-by: PRavaga <trueravaga@gmail.com>
2023-08-17 13:49:29 +02:00 · 2023-08-17 13:49:29 +02:00 · a56e03900f
commit a56e03900f
parent e72df9e67f
9 changed files with 100 additions and 49 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -11,6 +11,7 @@
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
+        "big.js": "^6.2.1",
        "copy-to-clipboard": "^3.3.3",
        "react": "^18.2.0",
        "react-chrome-extension-router": "^1.4.0",
@ -5071,11 +5072,15 @@
      }
    },
    "node_modules/big.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-6.2.1.tgz",
+      "integrity": "sha512-bCtHMwL9LeDIozFn+oNhhFoq+yQ3BNdnsLSASUxLciOb1vgvpHsIO1dsENiGMgbb4SkP5TrzWzRiLddn8ahVOQ==",
      "engines": {
        "node": "*"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bigjs"
      }
    },
    "node_modules/binary-extensions": {
@ -11420,6 +11425,14 @@
        "node": ">=8.9.0"
      }
    },
+    "node_modules/loader-utils/node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/locate-path": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@ -20962,9 +20975,9 @@
      }
    },
    "big.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-6.2.1.tgz",
+      "integrity": "sha512-bCtHMwL9LeDIozFn+oNhhFoq+yQ3BNdnsLSASUxLciOb1vgvpHsIO1dsENiGMgbb4SkP5TrzWzRiLddn8ahVOQ=="
    },
    "binary-extensions": {
      "version": "2.2.0",
@ -25704,6 +25717,13 @@
        "big.js": "^5.2.2",
        "emojis-list": "^3.0.0",
        "json5": "^2.1.2"
+      },
+      "dependencies": {
+        "big.js": {
+          "version": "5.2.2",
+          "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+          "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
+        }
      }
    },
    "locate-path": {
--- a/package.json
+++ b/package.json
@ -6,6 +6,7 @@
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
+    "big.js": "^6.2.1",
    "copy-to-clipboard": "^3.3.3",
    "react": "^18.2.0",
    "react-chrome-extension-router": "^1.4.0",
--- a/src/app/components/Header/Header.jsx
+++ b/src/app/components/Header/Header.jsx
@ -76,7 +76,7 @@ const Header = () => {
                  )}
                </div>
                <div className={s.dropdownBalance}>
-                  {censorValue(wallet.balance.toFixed(2))} ZANO
+                  {censorValue(Number(wallet.balance).toFixed(2))} ZANO
                </div>
              </button>
            ))}
--- a/src/app/components/TokensTabs/Assets/Assets.jsx
+++ b/src/app/components/TokensTabs/Assets/Assets.jsx
@ -30,7 +30,9 @@ const Assets = () => {
  return (
    <div>
      {state.wallet.assets.map((asset) => {
-        const fiatBalance = (asset.balance * state.priceData.price).toFixed(2);
+        const fiatBalance = (
+          Number(asset.balance) * state.priceData.price
+        ).toFixed(2);
        return (
          <div className={s.asset} key={asset.name}>
            {/* <button className={s.assetRemoveBtn} onClick={remove}>
@ -45,9 +47,10 @@ const Assets = () => {
                <div>
                  <div className={s.assetInfoLabel}>Balance</div>
                  <div className={s.assetInfoValue}>
-                    {[censorValue(asset.balance.toFixed(2)), asset.ticker].join(
-                      " "
-                    )}
+                    {[
+                      censorValue(Number(asset.balance).toFixed(2)),
+                      asset.ticker,
+                    ].join(" ")}
                  </div>
                </div>
                <div>
--- a/src/app/components/TokensTabs/History/History.jsx
+++ b/src/app/components/TokensTabs/History/History.jsx
@ -1,5 +1,6 @@
 import { useContext } from "react";
 import { Link } from "react-chrome-extension-router";
+import Big from "big.js";
 import LoadingIcon from "../../../assets/svg/loading.svg";
 import receiveIcon from "../../../assets/svg/receive-colored.svg";
 import sendIcon from "../../../assets/svg/send-colored.svg";
@ -11,6 +12,8 @@ import Formatters from "../../../utils/formatters";

 const HistoryItem = ({ transfer, fee }) => {
  if (transfer.amount === fee) return null;
+  const amount = new Big(transfer.amount);
+  const fixedFee = new Big(fee);
  return (
    <div className={s.historyTop}>
      <div className={s.historyIcon}>
@ -22,7 +25,7 @@ const HistoryItem = ({ transfer, fee }) => {
            "d6329b5b1f7c0805b5c345f4957554002a2f557845f64d7645dae0e051a6498a"
            ? transfer.incoming
              ? transfer.amount
-              : (transfer.amount * 1e12 - fee * 1e12) / 1e12
+              : amount.minus(fixedFee).toString()
            : transfer.amount
        )}{" "}
        {
--- a/src/app/components/TransactionDetails/TransactionDetails.jsx
+++ b/src/app/components/TransactionDetails/TransactionDetails.jsx
@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import Big from "big.js";
 import copyIcon from "../../assets/svg/copy-blue.svg";
 import incomingIcon from "../../assets/svg/incoming_ico.svg";
 import outgoingIcon from "../../assets/svg/outgoing_ico.svg";
@ -44,6 +45,8 @@ const TransactionDetails = (props) => {
        <TableRow label="Transfers">
          {props.transfers.map((transfer) => {
            if (transfer.amount === props.fee) return null;
+            const amount = new Big(transfer.amount);
+            const fixedFee = new Big(props.fee);
            return (
              <>
                <div className="table__value">
@ -52,7 +55,7 @@ const TransactionDetails = (props) => {
                      "d6329b5b1f7c0805b5c345f4957554002a2f557845f64d7645dae0e051a6498a"
                      ? transfer.incoming
                        ? transfer.amount
-                        : (transfer.amount * 1e12 - props.fee * 1e12) / 1e12
+                        : amount.minus(fixedFee).toString()
                      : transfer.amount
                  )}{" "}
                  {
--- a/src/app/components/Wallet/Wallet.jsx
+++ b/src/app/components/Wallet/Wallet.jsx
@ -27,9 +27,9 @@ const Wallet = () => {
    : s.aliasContent;

  const renderBalance = () => {
-    const fiatBalance = (state.wallet.balance * state.priceData.price).toFixed(
-      2
-    );
+    const fiatBalance = (
+      Number(state.wallet.balance) * state.priceData.price
+    ).toFixed(2);

    if (state.displayUsd) {
      return (
@ -46,7 +46,9 @@ const Wallet = () => {
        </>
      );
    } else {
-      return <span>{censorValue(state.wallet.balance.toFixed(2))} ZANO</span>;
+      return (
+        <span>{censorValue(Number(state.wallet.balance).toFixed(2))} ZANO</span>
+      );
    }
  };

@ -117,7 +119,8 @@ const Wallet = () => {
          {getUnlockedBalance() !== state.wallet.balance && (
            <span className={s.tooltipText}>
              Locked balance:{" "}
-              {(state.wallet.balance - getUnlockedBalance()).toFixed(2)} ZANO
+              {(Number(state.wallet.balance) - getUnlockedBalance()).toFixed(2)}{" "}
+              ZANO
            </span>
          )}
        </div>
--- a/src/app/utils/utils.js
+++ b/src/app/utils/utils.js
@ -1,13 +1,29 @@
+import Big from "big.js";
+
 export async function fetchBackground(data) {
-    return new Promise((resolve, reject) => {
-        try {
-             // eslint-disable-next-line no-undef
-            chrome.runtime.sendMessage(data, function (response) {
-                resolve(response);
-            });
-        } catch (error) {
-            console.error(`Error while fetching data (${data.method}):`, error);
-            reject(error);
-        }
-    });
-};
+  return new Promise((resolve, reject) => {
+    try {
+      // eslint-disable-next-line no-undef
+      chrome.runtime.sendMessage(data, function (response) {
+        resolve(response);
+      });
+    } catch (error) {
+      console.error(`Error while fetching data (${data.method}):`, error);
+      reject(error);
+    }
+  });
+}
+
+const multiplier = new Big((1e12).toString());
+
+export const removeZeros = (amount) => {
+  const bigAmount = new Big(amount);
+  const fixedAmount = bigAmount.div(multiplier).toString();
+  return fixedAmount;
+};
+
+export const addZeros = (amount) => {
+  const bigAmount = new Big(amount);
+  const fixedAmount = bigAmount.times(multiplier);
+  return fixedAmount;
+};
--- a/src/background/wallet.js
+++ b/src/background/wallet.js
@ -1,3 +1,5 @@
+import { addZeros, removeZeros } from "../app/utils/utils";
+
 const fetchTxData = async () => {
  try {
    const response = await fetch("http://localhost:12111/json_rpc", {
@ -47,7 +49,6 @@ export const fetchData = async (method, params = {}) =>
 export const getAlias = async (address) => {
  const response = await fetchData("get_alias_by_address", address);
  const data = await response.json();
-  console.log("get alias by address", data);
  if (data.result.status === "OK") {
    return data.result.alias_info_list[0].alias;
  } else {
@ -58,7 +59,6 @@ export const getAlias = async (address) => {
 export const getAliasDetails = async (alias) => {
  const response = await fetchData("get_alias_details", { alias });
  const data = await response.json();
-  console.log("get alias details", data);
  if (data.result.status === "OK") {
    return data.result.alias_info_list[0].alias;
  } else {
@ -73,17 +73,16 @@ export const getWallets = async () => {
    const wallets = await Promise.all(
      data.result.wallets.map(async (wallet) => {
        const alias = await getAlias(wallet.wi.address);
-        const balance =
-          wallet.wi.balances.find(
-            (asset) =>
-              asset.asset_info.asset_id ===
-              "d6329b5b1f7c0805b5c345f4957554002a2f557845f64d7645dae0e051a6498a"
-          ).total /
-          10 ** 12;
+        const balance = wallet.wi.balances.find(
+          (asset) =>
+            asset.asset_info.asset_id ===
+            "d6329b5b1f7c0805b5c345f4957554002a2f557845f64d7645dae0e051a6498a"
+        ).total;
+
        return {
          address: wallet.wi.address,
          alias: alias,
-          balance: balance,
+          balance: removeZeros(balance),
        };
      })
    );
@ -100,13 +99,13 @@ export const getWalletData = async () => {
  const address = addressParsed.result.address;
  const balanceResponse = await fetchData("getbalance");
  const balanceParsed = await balanceResponse.json();
-  const balance =
+  const balance = removeZeros(
    balanceParsed.result.balances.find(
      (asset) =>
        asset.asset_info.asset_id ===
        "d6329b5b1f7c0805b5c345f4957554002a2f557845f64d7645dae0e051a6498a"
-    ).total /
-    10 ** 12;
+    ).total
+  );
  const txDataResponse = await fetchTxData();
  const txData = txDataResponse.result.transfers;
  let transactions = [];
@ -124,10 +123,10 @@ export const getWalletData = async () => {
        height: tx.height,
        paymentId: tx.payment_id,
        comment: tx.comment,
-        fee: tx.fee / 10 ** 12,
+        fee: removeZeros(tx.fee),
        addresses: tx.remote_addresses,
        transfers: tx.subtransfers.map((transfer) => ({
-          amount: transfer.amount / 10 ** 12,
+          amount: removeZeros(transfer.amount),
          assetId: transfer.asset_id,
          incoming: transfer.is_income,
        })),
@ -139,8 +138,8 @@ export const getWalletData = async () => {
      name: asset.asset_info.full_name,
      ticker: asset.asset_info.ticker,
      assetId: asset.asset_info.asset_id,
-      balance: asset.total / 10 ** 12,
-      unlockedBalance: asset.unlocked / 10 ** 12,
+      balance: removeZeros(asset.total),
+      unlockedBalance: removeZeros(asset.unlocked),
    }))
    .sort((a, b) => {
      if (
@ -229,10 +228,11 @@ export const transfer = async (
  const destinations = [
    {
      address: destination,
-      amount: amount * 10 ** 12,
+      amount: addZeros(amount),
      asset_id: assetId,
    },
  ];
+
  const response = await fetch("http://localhost:12111/json_rpc", {
    method: "POST",
    headers: {
@ -268,7 +268,7 @@ export const transferBridge = async (
    {
      address:
        "ZxCzikmFWMZEX8z3nojPyzcFUeEYcihX2jFvhLLYvJqtdgne2RLFd6UDaPgmzMNgDZP71E7citLPei4pLCWDjUWS1qGzMuagu",
-      amount: amount * 10 ** 12,
+      amount: addZeros(amount),
      asset_id: assetId,
    },
  ];
@ -313,6 +313,8 @@ export const transferBridge = async (
    }),
  });

+  console.log(response);
+
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }