fix: to send values as string big int to the api

Author: annipi

src/common/components/status/StatusSummary.vue

@@ -68,11 +68,7 @@ import {
   mdiBitcoin, mdiArrowRight, mdiArrowLeft, mdiOpenInNew, mdiContentCopy,
 } from '@mdi/js';
 import EnvironmentContextProviderService from '@/common/providers/EnvironmentContextProvider';
-import {
-  TxStatus, TxStatusType,
-  SatoshiBig,
-  WeiBig,
-} from '@/common/types';
+import { TxStatus, TxStatusType } from '@/common/types';
 import {
   getBtcAddressExplorerUrl,
   getBtcTxExplorerUrl,
@@ -111,8 +107,7 @@ export default defineComponent({
 
     const btcSide = computed(() => {
       if (props.type === TxStatusType.PEGOUT || props.type === TxStatusType.FLYOVER_PEGOUT) {
-        const fee = props.details.fee === BigInt(0)
-          ? props.details.estimatedFee : props.details.fee;
+        const fee = props.details.fee === 0 ? props.details.estimatedFee : props.details.fee;
         return [
           {
             title: 'You receive',
@@ -147,9 +142,7 @@ export default defineComponent({
         {
           title: props.details && props.type === TxStatusType.FLYOVER_PEGIN
             ? 'Fee (includes provider and network fees)' : 'Fee',
-          value: props.type === TxStatusType.FLYOVER_PEGIN
-            ? new SatoshiBig(props.details.fee, 'satoshi').toBTCString()
-            : props.details.fee,
+          value: props.details.fee,
           ticker: true,
         },
         {
@@ -167,7 +160,7 @@ export default defineComponent({
 
     const rskSide = computed(() => {
       if (props.type === TxStatusType.PEGOUT || props.type === TxStatusType.FLYOVER_PEGOUT) {
-        const gasFee = props.details.gas?.gt(0) ? props.details.gas.toRBTCTrimmedString() : '-';
+        const gasFee = props.details.gas ? props.details.gas : '-';
         return [
           {
             title: 'You send',
@@ -178,7 +171,7 @@ export default defineComponent({
             title: props.type === TxStatusType.FLYOVER_PEGOUT
               ? 'Fee (includes provider and network fees)' : 'Fee',
             value: status.value.type === TxStatusType.FLYOVER_PEGOUT
-              ? new WeiBig(props.details.fee, 'wei').toRBTCTrimmedString()
+              ? props.details.fee
               : gasFee,
             ticker: true,
           },

src/common/components/status/TxPegin.vue

@@ -36,7 +36,7 @@ import {
 } from '@/common/types';
 import EnvironmentContextProviderService from '@/common/providers/EnvironmentContextProvider';
 import * as constants from '@/common/store/constants';
-import { getTime, setStatusMessage } from '@/common/utils';
+import { getTime, setStatusMessage, toSatoshiBigIntString } from '@/common/utils';
 import {
   useAction, useGetter, useStateAttribute,
 } from '@/common/store/helper';
@@ -60,9 +60,9 @@ export default defineComponent({
   setup(props, context) {
     const currentFee = ref(new SatoshiBig('0', 'btc'));
     const currentRefundAddress = ref('');
-    const btcConfirmationsRequired = ref(0);
+    const btcConfirmationsRequired = ref('0');
     const btcConfirmationsPercentage = ref(0);
-    const btcConfirmations = ref(0);
+    const btcConfirmations = ref('0');
     const rskConfirmationsPercentage = ref(0);
     const leftBtcTime = ref('');
 
@@ -137,11 +137,13 @@ export default defineComponent({
 
     const flyoverPeginSummary = computed((): NormalizedSummary => {
       const status = txDetails.value as FlyoverStatusModel;
-      const total = new SatoshiBig(status.amount, 'satoshi')
-        .plus(new SatoshiBig(status.fee, 'satoshi'));
+      const amount = toSatoshiBigIntString(status.amount);
+      const fee = toSatoshiBigIntString(status.fee);
+      const total = new SatoshiBig(amount, 'satoshi')
+        .plus(new SatoshiBig(fee, 'satoshi'));
       return {
-        amountFromString: new SatoshiBig(status.amount, 'satoshi').toBTCTrimmedString(),
-        amountReceivedString: new SatoshiBig(status.amount, 'satoshi').toBTCTrimmedString(),
+        amountFromString: status.amount,
+        amountReceivedString: status.amount,
         total: total.toBTCTrimmedString(),
         fee: status.fee,
         recipientAddress: status.recipientAddress,
@@ -158,16 +160,22 @@ export default defineComponent({
     const showConfirmations = computed(() => !props.isFlyover
       && txDetails.value.status === PegStatus.WAITING_CONFIRMATIONS);
 
+    const btcConfirmationsRequiredNumber = computed(() => Number(btcConfirmationsRequired.value));
+
+    const btcConfirmationsNumber = computed(() => Number(btcConfirmations.value));
+
     function refreshPercentage() {
       if ('btc' in txDetails.value) {
         const { btc } = txDetails.value;
-        btcConfirmationsRequired.value = btc.requiredConfirmation;
-        btcConfirmations.value = btc.confirmations ?? 0;
+        btcConfirmationsRequired.value = btc.requiredConfirmation.toString();
+        btcConfirmations.value = btc.confirmations.toString() ?? '0';
         btcConfirmations.value = btcConfirmations.value > btcConfirmationsRequired.value
           ? btcConfirmationsRequired.value : btcConfirmations.value;
-        leftBtcTime.value = getTime((btcConfirmationsRequired.value - btcConfirmations.value) * 10);
+        leftBtcTime.value = getTime(
+          (btcConfirmationsRequiredNumber.value - btcConfirmationsNumber.value) * 10,
+        );
         btcConfirmationsPercentage.value = btcConfirmations.value <= btcConfirmationsRequired.value
-          ? (btcConfirmations.value * 100) / btcConfirmationsRequired.value : 100;
+          ? (btcConfirmationsNumber.value * 100) / btcConfirmationsRequiredNumber.value : 100;
         if (txDetails.value.status === constants.PegStatus.CONFIRMED) {
           rskConfirmationsPercentage.value = 100;
         } else {

src/common/components/status/TxPegout.vue

@@ -24,6 +24,7 @@ import {
 import StatusProgressBar from '@/common/components/status/StatusProgressBar.vue';
 import { useStateAttribute } from '@/common/store/helper';
 import StatusSummary from '@/common/components/status/StatusSummary.vue';
+import { bigNumberToSatoshiBigIntString, toWeiBigIntString } from '@/common/utils';
 
 export default defineComponent({
   name: 'TxPegout',
@@ -61,32 +62,34 @@ export default defineComponent({
 
     const txPegoutSummary = computed((): NormalizedSummary => {
       const status = txDetails.value as PegoutStatusDataModel;
-      const valueRequested = new SatoshiBig(status.valueRequestedInSatoshis, 'satoshi').toBTCTrimmedString();
-      const amountSent = new WeiBig(valueRequested, 'rbtc').plus(calculatedGasFee.value).toRBTCTrimmedString();
+      const valueRequested = bigNumberToSatoshiBigIntString(status.valueRequestedInSatoshis);
+      const amountSent = new WeiBig(valueRequested, 'rbtc')
+        .plus(calculatedGasFee.value).toRBTCTrimmedString();
       const btcTxId = status.status === PegoutStatus.RELEASE_BTC ? status.btcTxId : '';
       return {
         amountFromString: amountSent,
         amountReceivedString: amountToBeReceived.value,
-        gas: calculatedGasFee.value,
-        fee: status.feeInSatoshisToBePaid ?? BigInt(0),
+        gas: calculatedGasFee.value.toString(),
+        fee: status.feeInSatoshisToBePaid ?? '0',
         recipientAddress: status.btcRecipientAddress,
         senderAddress: status.rskSenderAddress,
         txId: status.rskTxHash ? status.rskTxHash : props.txId,
-        estimatedFee: pegOutEstimatedFee.value.toSatoshiBigIntUnsafe(),
+        estimatedFee: pegOutEstimatedFee.value.toString(),
         status: status.status,
         btcTxId,
       };
     });
 
     const flyoverPegoutSummary = computed((): NormalizedSummary => {
       const status = txDetails.value as FlyoverStatusModel;
-      const amount = new WeiBig(status.amount, 'wei');
-      const fee = new WeiBig(status.fee, 'wei');
-      const total = amount.plus(fee);
+      const amount = toWeiBigIntString(status.amount);
+      const fee = toWeiBigIntString(status.fee);
+      const total = new WeiBig(amount, 'wei')
+        .plus(new WeiBig(fee, 'wei'));
       return {
         amountFromString: total.toRBTCTrimmedString(),
-        amountReceivedString: amount.toRBTCTrimmedString(),
-        fee: fee.toWeiBigIntUnsafe(),
+        amountReceivedString: status.amount,
+        fee: status.fee,
         recipientAddress: status.recipientAddress,
         senderAddress: status.senderAddress,
         txId: status.txHash,

src/common/services/ApiService.ts

@@ -13,7 +13,7 @@ import {
   TxInfo,
   FlyoverCall,
 } from '@/common/types';
-import { areValidOutputs, isValidInput, toJsonWithoutBigInt } from '@/common/utils';
+import { areValidOutputs, isValidInput } from '@/common/utils';
 import { BridgeService } from '@/common/services/BridgeService';
 import { EnvironmentAccessorService } from '@/common/services/enviroment-accessor.service';
 import { ApiInformation } from '@/common/types/ApiInformation';
@@ -217,10 +217,9 @@ export default class ApiService {
     return new Promise<void>((resolve, reject) => {
       const { txHash, type } = txInfo;
       if (txHash == null || type == null) resolve();
-      const txInfoWithoutBigInt = toJsonWithoutBigInt(txInfo);
       axios.post(
         `${ApiService.baseURL}/register`,
-        txInfoWithoutBigInt,
+        txInfo,
         { headers: { 'Content-Type': 'application/json' } },
       )
         .then(() => resolve())

src/common/types/Common.ts

@@ -2,7 +2,6 @@ import SatoshiBig from '@/common/types/SatoshiBig';
 import { Utxo } from '@/common/types/pegInTx';
 import { PegoutStatus, TxStatusType } from '@/common/types/store';
 import { FlyoverCallFunction, FlyoverCallResult, PegStatus } from '@/common/store/constants';
-import WeiBig from './WeiBig';
 
 export interface Tx {
   coin: string;
@@ -115,12 +114,12 @@ export interface PsbtExtendedInput {
 export interface NormalizedSummary {
   amountFromString: string;
   amountReceivedString: string;
-  fee?: bigint;
-  estimatedFee?: bigint;
+  fee?: string;
+  estimatedFee?: string;
   recipientAddress: string;
   senderAddress?: string;
   txId?: string;
-  gas?: WeiBig;
+  gas?: string;
   refundAddress?: string;
   selectedAccount?: string;
   federationAddress?: string;

src/common/types/TxInfo.ts

@@ -1,8 +1,8 @@
 export interface BaseQuoteDbModel {
-  agreementTimestamp: number;
-  gasFeeOnWei: bigint;
-  nonce: bigint;
-  penaltyFeeOnWei: bigint;
+  agreementTimestamp: string;
+  gasFeeOnWei: string;
+  nonce: string;
+  penaltyFeeOnWei: string;
   btcRefundAddress: string;
   lbcAddress: string;
   lpBtcAddress: string;
@@ -11,41 +11,41 @@ export interface BaseQuoteDbModel {
 }
 
 export interface PeginQuoteDbModel extends BaseQuoteDbModel {
-  callFeeOnSatoshi: bigint;
+  callFeeOnSatoshi: string;
   callOnRegister: boolean;
-  confirmations: number;
+  confirmations: string;
   contractAddr: string;
   data: string;
   fedBTCAddr: string;
-  gasLimit: bigint;
-  lpCallTime: number;
-  productFeeAmountOnSatoshi: bigint;
-  timeForDepositInSeconds: number;
-  valueOnSatoshi: bigint;
+  gasLimit: string;
+  lpCallTime: string;
+  productFeeAmountOnSatoshi: string;
+  timeForDepositInSeconds: string;
+  valueOnSatoshi: string;
 }
 
 export interface PegoutQuoteDbModel extends BaseQuoteDbModel {
-  callFeeOnWei: bigint;
+  callFeeOnWei: string;
   depositAddr: string;
-  depositConfirmations: number;
-  depositDateLimit: number;
-  expireBlocks: number;
-  expireDate: number;
-  productFeeAmountOnWei: bigint;
-  transferConfirmations: number;
-  transferTime: number;
-  valueOnWei: bigint;
+  depositConfirmations: string;
+  depositDateLimit: string;
+  expireBlocks: string;
+  expireDate: string;
+  productFeeAmountOnWei: string;
+  transferConfirmations: string;
+  transferTime: string;
+  valueOnWei: string;
 }
 
 export interface TxInfo {
   txHash: string;
   type: string;
-  value: bigint;
+  value: string;
   wallet: string;
   addressType?: string;
-  fee?: bigint;
-  rskGas?: bigint;
-  btcEstimatedFee?: bigint;
+  fee?: string;
+  rskGas?: string;
+  btcEstimatedFee?: string;
   provider?: string;
   details?: Record<string, unknown>;
   quote?: PeginQuoteDbModel | PegoutQuoteDbModel;

src/common/types/store.ts

@@ -22,11 +22,11 @@ export interface BtcPeginStatus {
   txId: string;
   creationDate: Date;
   federationAddress: string;
-  amountTransferred: bigint;
+  amountTransferred: string;
   refundAddress: string;
-  confirmations: number;
-  requiredConfirmation: number;
-  fees: bigint;
+  confirmations: string;
+  requiredConfirmation: string;
+  fees: string;
   senderAddress: string;
 }
 
@@ -38,7 +38,7 @@ export enum RskStatus {
 
 export interface RskPeginStatus {
   recipientAddress: string;
-  confirmations: number;
+  confirmations: string;
   createOn: Date;
   status: RskStatus;
 }
@@ -65,13 +65,13 @@ export interface PegoutStatusDataModel {
   rskTxHash: string;
   rskSenderAddress: string;
   btcRecipientAddress: string;
-  valueRequestedInSatoshis: bigint;
-  valueInSatoshisToBeReceived: number;
-  feeInSatoshisToBePaid?: bigint;
+  valueRequestedInSatoshis: string;
+  valueInSatoshisToBeReceived: string;
+  feeInSatoshisToBePaid?: string;
   status: PegoutStatus;
   btcRawTransaction: string;
-  fees: bigint;
-  estimatedFee: SatoshiBig;
+  fees: string;
+  estimatedFee: string;
   btcTxId: string;
   reason?: RejectedPegoutReasons;
 }
@@ -80,9 +80,9 @@ export interface FlyoverStatusModel {
   txHash: string;
   type: string;
   date: Date;
-  amount: bigint;
-  fee: bigint;
-  blockToBeFinished: number;
+  amount: string;
+  fee: string;
+  blockToBeFinished: string;
   status: string;
   senderAddress: string;
   recipientAddress: string;

src/common/utils/ethers.ts

@@ -1,4 +1,4 @@
-import { providers } from 'ethers';
+import { providers, utils } from 'ethers';
 import { TransactionRequest, TransactionResponse } from '@/common/types';
 
 export const sendTransaction = (
@@ -19,3 +19,12 @@ export const sendTransaction = (
     wait: (confirmations?: number) => provider.waitForTransaction(hash, confirmations),
   }));
 };
+
+export const toSatoshiBigIntString = (userFormatedValue: string) : string => utils
+  .parseUnits(userFormatedValue, 8).toString();
+
+export const toWeiBigIntString = (userFormatedValue: string) : string => utils
+  .parseUnits(userFormatedValue, 18).toString();
+
+export const bigNumberToSatoshiBigIntString = (bigIntString: string) : string => utils
+  .formatUnits(BigInt(bigIntString), 8);

src/common/utils/utils.ts

@@ -413,11 +413,3 @@ export function appendRecaptcha(siteKey: string): void {
   captchaDiv.setAttribute('data-size', 'invisible');
   document.body.appendChild(captchaDiv);
 }
-
-export function toJsonWithoutBigInt(data: object): string {
-  if (data !== undefined) {
-    return JSON.stringify(data, (_, v) => (typeof v === 'bigint' ? `${v}n` : v))
-      .replace(/"(-?\d+)n"/g, (_, a) => a);
-  }
-  return '';
-}