v3.3.2

CHANGELOG.md

@@ -7,10 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[v3.3.2](https://github.com/multiversx/mx-sdk-dapp/pull/1391)] - 2025-03-17
+
+- [Fixed floating data field decode dropdown](https://github.com/multiversx/mx-sdk-dapp/pull/1390)
+- [Updated address validation](https://github.com/multiversx/mx-sdk-dapp/pull/1389)
+- [Added conditional price radios visibility per radio button](https://github.com/multiversx/mx-sdk-dapp/pull/1388)
+
 ## [[v3.3.1](https://github.com/multiversx/mx-sdk-dapp/pull/1387)] - 2025-03-13
+
 - [Added conditional price radios visibility](https://github.com/multiversx/mx-sdk-dapp/pull/1386)
 
 ## [[v3.3.0](https://github.com/multiversx/mx-sdk-dapp/pull/1380)] - 2025-03-11
+
 - [Added gasPrice editing](https://github.com/multiversx/mx-sdk-dapp/pull/1377)
 
 ## [[v3.2.7](https://github.com/multiversx/mx-sdk-dapp/pull/1384)] - 2025-03-11
@@ -22,9 +30,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Fixed sign screen layout and move decoder styles inside the package](https://github.com/multiversx/mx-sdk-dapp/pull/1381)
 
 ## [[v3.2.5](https://github.com/multiversx/mx-sdk-dapp/pull/1379)] - 2025-03-11
+
 - [Fixed websocket connection and fallback mechanism](https://github.com/multiversx/mx-sdk-dapp/pull/1378)
 
 ## [[v3.2.4](https://github.com/multiversx/mx-sdk-dapp/pull/1376)] - 2025-02-17
+
 - [Added a warning toast when an unconfirmed guardian change took place](https://github.com/multiversx/mx-sdk-dapp/pull/1375)
 - [Fixed metamask addon link to use new Chrome Web Store domain](https://github.com/multiversx/mx-sdk-dapp/pull/1374)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "A library to hold the main logic for a dapp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",

src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/ConfirmFee.tsx

@@ -1,7 +1,6 @@
 import React, { MouseEvent, useEffect, useState } from 'react';
 import { faGear } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import BigNumber from 'bignumber.js';
 import classNames from 'classnames';
 
 import {
@@ -11,7 +10,6 @@ import {
 } from 'constants/index';
 import { withStyles, WithStylesImportType } from 'hocs/withStyles';
 import { useGetAccount, useGetEgldPrice } from 'hooks';
-import { recommendGasPrice } from 'hooks/transactions/helpers/recommendGasPrice';
 import { useSelector } from 'reduxStore/DappProviderContext';
 import { networkConfigSelector } from 'reduxStore/selectors';
 import { Balance } from 'UI/Balance';
@@ -24,6 +22,7 @@ import {
 
 import { GasDetails } from './components';
 import { GasDetailsPropsType } from './components/GasDetails/gasDetails.types';
+import { getGasPriceDetails } from './components/GasDetails/helpers/getGasPriceDetails';
 export type ConfirmFeePropsType = GasDetailsPropsType & WithStylesImportType;
 
 const ConfirmFeeComponent = ({
@@ -78,32 +77,12 @@ const ConfirmFeeComponent = ({
 
   const initialGasPrice = initialGasPriceInfo[nonce];
 
-  const fastPpu = gasStationMetadata
-    ? gasStationMetadata[Number(shard)]?.fast
-    : 0;
-  const fasterPpu = gasStationMetadata
-    ? gasStationMetadata[Number(shard)]?.faster
-    : 0;
-
-  const fastGasPrice = fastPpu
-    ? recommendGasPrice({
-        transactionDataLength: transaction.getData().toString().length,
-        transactionGasLimit: transaction.getGasLimit().valueOf(),
-        ppu: fastPpu
-      })
-    : initialGasPrice;
-
-  const fasterGasPrice = fasterPpu
-    ? recommendGasPrice({
-        transactionDataLength: transaction.getData().toString().length,
-        transactionGasLimit: transaction.getGasLimit().valueOf(),
-        ppu: fasterPpu
-      })
-    : initialGasPrice;
-
-  const areRadiosEnabled =
-    new BigNumber(fastGasPrice).isGreaterThan(initialGasPrice || 0) ||
-    new BigNumber(fasterGasPrice).isGreaterThan(initialGasPrice || 0);
+  const { areRadiosEditable } = getGasPriceDetails({
+    shard,
+    gasStationMetadata,
+    transaction,
+    initialGasPrice
+  });
 
   const handleToggleGasDetails = (event: MouseEvent<SVGSVGElement>) => {
     event.preventDefault();
@@ -116,7 +95,7 @@ const ConfirmFeeComponent = ({
         <div className={styles?.confirmFeeLabel}>
           <span className={styles?.confirmFeeLabelText}>Transaction Fee</span>
 
-          {needsSigning && areRadiosEnabled && (
+          {needsSigning && areRadiosEditable && (
             <FontAwesomeIcon
               icon={faGear}
               onClick={handleToggleGasDetails}
@@ -156,7 +135,7 @@ const ConfirmFeeComponent = ({
           )}
         </div>
       </div>
-      {areRadiosEnabled && (
+      {areRadiosEditable && (
         <GasDetails
           transaction={transaction}
           isVisible={showGasDetails}

src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/components/GasDetails/GasDetails.tsx

@@ -14,6 +14,7 @@ import {
   GasDetailsPropsType,
   GasMultiplerOptionType
 } from './gasDetails.types';
+import { getGasPriceDetails } from './helpers/getGasPriceDetails';
 
 const GAS_PRICE_MODIFIER_FIELD = 'gasPriceMultiplier';
 
@@ -23,6 +24,7 @@ export const GasDetailsComponent = ({
   isVisible,
   needsSigning,
   updatePPU,
+  initialGasPrice,
   styles
 }: GasDetailsPropsType) => {
   const gasPrice = transaction.getGasPrice().valueOf().toString();
@@ -48,19 +50,30 @@ export const GasDetailsComponent = ({
     return null;
   }
 
+  const { isFastGasPrice, isFasterGasPrice } = getGasPriceDetails({
+    shard,
+    gasStationMetadata,
+    transaction,
+    initialGasPrice
+  });
+
+  const fastGasPriceRadio: GasMultiplerOptionType = {
+    label: 'Fast',
+    value: gasStationMetadata[Number(shard)].fast
+  };
+
+  const fasterGasPriceRadio: GasMultiplerOptionType = {
+    label: 'Faster',
+    value: gasStationMetadata[Number(shard)].faster
+  };
+
   const gasMultiplierOptions: GasMultiplerOptionType[] = [
     {
       label: 'Standard',
       value: EMPTY_PPU
     },
-    {
-      label: 'Fast',
-      value: gasStationMetadata[Number(shard)].fast
-    },
-    {
-      label: 'Faster',
-      value: gasStationMetadata[Number(shard)].faster
-    }
+    ...(isFastGasPrice ? [fastGasPriceRadio] : []),
+    ...(isFasterGasPrice ? [fasterGasPriceRadio] : [])
   ];
 
   return (

src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/components/GasDetails/gasDetails.types.ts

@@ -7,6 +7,7 @@ import { ActiveLedgerTransactionType } from 'types';
 export interface GasDetailsPropsType extends WithStylesImportType {
   isVisible?: boolean;
   needsSigning: boolean;
+  initialGasPrice?: number;
   transaction: Transaction;
   ppu: ActiveLedgerTransactionType['ppu'];
   updatePPU: UseSignTransactionsWithDeviceReturnType['updatePPU'];

src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/components/GasDetails/helpers/getGasPriceDetails.ts

@@ -0,0 +1,59 @@
+import { Transaction } from '@multiversx/sdk-core/out';
+import BigNumber from 'bignumber.js';
+import { recommendGasPrice } from 'hooks/transactions/helpers/recommendGasPrice';
+import { NetworkType } from 'types/network.types';
+
+type GetGasPriceDetailsParamsType = {
+  shard?: number;
+  gasStationMetadata: NetworkType['gasStationMetadata'];
+  transaction: Transaction;
+  initialGasPrice?: number;
+};
+
+export const getGasPriceDetails = ({
+  shard,
+  gasStationMetadata,
+  transaction,
+  initialGasPrice = 0
+}: GetGasPriceDetailsParamsType) => {
+  const fastPpu = gasStationMetadata
+    ? gasStationMetadata[Number(shard)]?.fast
+    : 0;
+  const fasterPpu = gasStationMetadata
+    ? gasStationMetadata[Number(shard)]?.faster
+    : 0;
+
+  const fastGasPrice = fastPpu
+    ? recommendGasPrice({
+        transactionDataLength: transaction.getData().toString().length,
+        transactionGasLimit: transaction.getGasLimit().valueOf(),
+        ppu: fastPpu
+      })
+    : initialGasPrice;
+
+  const fasterGasPrice = fasterPpu
+    ? recommendGasPrice({
+        transactionDataLength: transaction.getData().toString().length,
+        transactionGasLimit: transaction.getGasLimit().valueOf(),
+        ppu: fasterPpu
+      })
+    : initialGasPrice;
+
+  const isFastGasPrice = new BigNumber(fastGasPrice).isGreaterThan(
+    initialGasPrice || 0
+  );
+
+  const isFasterGasPrice = new BigNumber(fasterGasPrice).isGreaterThan(
+    initialGasPrice || 0
+  );
+
+  const areRadiosEditable = isFastGasPrice || isFasterGasPrice;
+
+  return {
+    fastGasPrice,
+    fasterGasPrice,
+    areRadiosEditable,
+    isFastGasPrice,
+    isFasterGasPrice
+  };
+};

src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/components/GasDetails/helpers/tests/getGasPriceDetails.test.ts

@@ -0,0 +1,47 @@
+import { Transaction } from '@multiversx/sdk-core/out';
+import { testAddress } from '__mocks__';
+import { getGasPriceDetails } from '../getGasPriceDetails';
+
+const secondTx = Transaction.fromPlainObject({
+  nonce: 0,
+  value: '0',
+  receiver: testAddress,
+  sender: testAddress,
+  gasPrice: 1_000_000_000,
+  gasLimit: 50_000_000,
+  data: 'TXVsdGlFU0RUTkZUVHJhbnNmZXJAMDAwMDAwMDAwMDAwMDAwMDA1MDAxMzllZDdhZTRhYTAzNzkyZTZiY2IzMzIzOTRhNDBmZTc0NmVlZmE0N2NlYkAwMkA1NzQ1NDc0YzQ0MmQ2MTMyMzg2MzM1MzlAQDBkZTBiNmIzYTc2NDAwMDBANGQ0NTU4MmQ2MTM2MzUzOTY0MzBAQGUxNzc3MDRiYzQzZjliZWUzMTA2QDYxNjQ2NDRjNjk3MTc1Njk2NDY5NzQ3OUAwZGJkMmZjMTM3YTMwMDAwQGRmMzYzZTg4NzJlZDBkOTIzNWE3',
+  chainID: 'D',
+  version: 1
+});
+
+describe('getGasPriceDetails', () => {
+  it('should return the correct gas price details', () => {
+    const gasPriceDetails = getGasPriceDetails({
+      shard: 1,
+      gasStationMetadata: [
+        {
+          fast: 11_760_000,
+          faster: 19_287_760
+        },
+        {
+          fast: 11_760_000,
+          faster: 19_287_760
+        },
+        {
+          fast: 11_760_000,
+          faster: 19_287_760
+        }
+      ],
+      transaction: secondTx,
+      initialGasPrice: 1_000_000_000
+    });
+
+    expect(gasPriceDetails).toEqual({
+      fastGasPrice: 1_000_000_000,
+      fasterGasPrice: 1_069_824_559,
+      isFastGasPrice: false,
+      isFasterGasPrice: true,
+      areRadiosEditable: true
+    });
+  });
+});

src/UI/TransactionData/TransactionDataStyles.scss

@@ -1,22 +1,23 @@
-.transactionData {
+.transaction-data {
   display: flex;
   flex-direction: column;
   line-height: 1;
   gap: 8px;
 
-  .transactionDataLabel {
+  .transaction-data-label {
     align-items: center;
     color: #a3a3a3;
     display: flex;
+    position: relative;
     justify-content: space-between;
   }
 
-  .transactionDataValueWrapper {
+  .transaction-data-value-wrapper {
     border-radius: 8px;
     border: 1px solid #262626;
     padding: 4px;
 
-    .transactionDataValue {
+    .transaction-data-value {
       min-height: 60px;
       line-height: 1.25;
       max-height: 60px;
@@ -64,11 +65,11 @@
         background-color: transparent;
       }
 
-      .transactionDataValueText {
+      .transaction-data-value-text {
         flex: 1;
       }
 
-      .transactionDataValueCopy {
+      .transaction-data-value-copy {
         position: sticky;
         min-width: 1rem;
         max-width: 1rem;

src/utils/account/addressIsValid.ts

@@ -2,16 +2,14 @@ import { Address } from '@multiversx/sdk-core';
 
 function canTransformToPublicKey(address: string) {
   try {
-    const checkAddress = new Address(address);
-    return Boolean(checkAddress.bech32());
+    return Address.isValid(address);
   } catch {
     return false;
   }
 }
 
 export function addressIsValid(destinationAddress: string) {
-  const isValidBach =
-    destinationAddress?.length === 62 && /^\w+$/.test(destinationAddress);
+  const isValidString = /^\w+$/.test(destinationAddress);
 
-  return isValidBach && canTransformToPublicKey(destinationAddress);
+  return isValidString && canTransformToPublicKey(destinationAddress);
 }