fix visual createTx, add white bg for iframes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nintondo-extension",
-  "version": "0.2.6.3",
+  "version": "0.2.6.4",
   "private": true,
   "scripts": {
     "dev": "bun build.ts --watch",
@@ -37,7 +37,6 @@
     "belcoinjs-lib": "^0.1.2",
     "bellhdw": "^0.5.40",
     "bells-inscriber": "^0.2.1",
-    "big.js": "6.2.1",
     "classnames": "2.5.1",
     "eth-rpc-errors": "4.0.3",
     "events": "^3.3.0",
@@ -60,8 +59,7 @@
     "zustand": "4.5.4"
   },
   "devDependencies": {
-    "@types/big.js": "^6.2.2",
-    "@types/chrome": "^0.0.269",
+    "@types/chrome": "^0.0.270",
     "@types/koa-compose": "^3.2.8",
     "@types/node": "^22.1.0",
     "@types/react": "^18.2.47",

src/background/controllers/provider/controller.ts

@@ -147,7 +147,7 @@ class ProviderController implements IProviderController {
       }
     );
 
-    if ((utxos?.length ?? 0) > 5) {
+    if ((utxos?.length ?? 0) > 5 && !payload.receiverToPayFee) {
       utxos = await apiController.getUtxos(
         storageService.currentAccount.address,
         {

src/shared/utils/transactions.ts

@@ -1,6 +1,5 @@
 import type { ITransaction } from "@/shared/interfaces/api";
 import { payments } from "belcoinjs-lib";
-import Big from "big.js";
 import { AddressType } from "bellhdw/src/hd/types";
 
 export const getTransactionValue = (
@@ -76,13 +75,8 @@ export function shortAddress(address?: string, len = 5) {
   return address.slice(0, len) + "..." + address.slice(address.length - len);
 }
 
-export const satoshisToBTC = (amount: number) => {
-  return amount / 100_000_000;
-};
-
-export function tidoshisToAmount(val: number) {
-  const num = new Big(val);
-  return num.div(100_000_000).toFixed(8);
+export function satoshisToAmount(val: number) {
+  return parseFloat((val / 10 ** 8).toFixed(8));
 }
 
 export function toFixed(x: number): string {

src/ui/components/iframe/component.tsx

@@ -30,7 +30,7 @@ const Iframe: FC<IframeProps> = ({ preview, size }) => {
       <iframe
         id="frame"
         onClick={(e) => e.preventDefault()}
-        className={cn(SIZES[size])}
+        className={cn(SIZES[size], "bg-white")}
         src={preview}
         sandbox="allow-scripts"
         scrolling="no"
@@ -43,6 +43,3 @@ const Iframe: FC<IframeProps> = ({ preview, size }) => {
 };
 
 export default Iframe;
-// export default memo(Iframe, (p, n) => {
-//   return p.preview === n.preview;
-// });

src/ui/hooks/transactions.ts

@@ -1,6 +1,6 @@
 import { useGetCurrentAccount, useWalletState } from "../states/walletState";
 import { useControllersState } from "../states/controllerState";
-import { tidoshisToAmount } from "@/shared/utils/transactions";
+import { satoshisToAmount } from "@/shared/utils/transactions";
 import { Psbt, Transaction } from "belcoinjs-lib";
 import type { Hex } from "@/background/services/keyring/types";
 import { t } from "i18next";
@@ -54,9 +54,9 @@ export function useCreateBellsTxCallback() {
     const safeBalance = (utxos ?? []).reduce((pre, cur) => pre + cur.value, 0);
     if (safeBalance < toAmount) {
       throw new Error(
-        `${t("hooks.transaction.insufficient_balance_0")} (${tidoshisToAmount(
+        `${t("hooks.transaction.insufficient_balance_0")} (${satoshisToAmount(
           safeBalance
-        )} ${t("hooks.transaction.insufficient_balance_1")} ${tidoshisToAmount(
+        )} ${t("hooks.transaction.insufficient_balance_1")} ${satoshisToAmount(
           toAmount
         )} ${t("hooks.transaction.insufficient_balance_2")}`
       );

src/ui/pages/provider/create-tx/component.tsx

@@ -35,7 +35,7 @@ const CreateTx = () => {
     },
     {
       label: "Amount",
-      value: `${psbt.amount} BEL`,
+      value: `${psbt.amount / 10 ** 8} BEL`,
     },
     {
       label: "Fee Rate",