From 7fa7a609182e4bbcfc195c211ba835b46cab4506 Mon Sep 17 00:00:00 2001 From: Tudor Morar Date: Fri, 14 Mar 2025 11:48:07 +0200 Subject: [PATCH 1/7] Conditional price radios (#1388) * Added conditional price radios * Update CHANGELOG * 3.3.1 * Update CHANGELOG.md * Upgrade to gasStationMetadata * guard * Hide gasPrice radios conditionally * Keep change * Interface * Add test * Update CHANGELOG * Small refactor --- CHANGELOG.md | 2 + .../components/ConfirmFee/ConfirmFee.tsx | 39 +++--------- .../components/GasDetails/GasDetails.tsx | 29 ++++++--- .../components/GasDetails/gasDetails.types.ts | 1 + .../GasDetails/helpers/getGasPriceDetails.ts | 59 +++++++++++++++++++ .../helpers/tests/getGasPriceDetails.test.ts | 47 +++++++++++++++ 6 files changed, 139 insertions(+), 38 deletions(-) create mode 100644 src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/components/GasDetails/helpers/getGasPriceDetails.ts create mode 100644 src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/components/GasDetails/helpers/tests/getGasPriceDetails.test.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index eeab2cafe..c4891faf2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +- [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) diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/ConfirmFee.tsx b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/ConfirmFee.tsx index 2f50636ea..4e4a2d232 100644 --- a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/ConfirmFee.tsx +++ b/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) => { event.preventDefault(); @@ -116,7 +95,7 @@ const ConfirmFeeComponent = ({
Transaction Fee - {needsSigning && areRadiosEnabled && ( + {needsSigning && areRadiosEditable && (
- {areRadiosEnabled && ( + {areRadiosEditable && ( { 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 ( diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/components/GasDetails/gasDetails.types.ts b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/components/GasDetails/gasDetails.types.ts index f5b8cbc0e..7da1fae09 100644 --- a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/components/GasDetails/gasDetails.types.ts +++ b/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']; diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/components/GasDetails/helpers/getGasPriceDetails.ts b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/components/GasDetails/helpers/getGasPriceDetails.ts new file mode 100644 index 000000000..975d97efa --- /dev/null +++ b/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 + }; +}; diff --git a/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/components/GasDetails/helpers/tests/getGasPriceDetails.test.ts b/src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmFee/components/GasDetails/helpers/tests/getGasPriceDetails.test.ts new file mode 100644 index 000000000..4e46b1608 --- /dev/null +++ b/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 + }); + }); +}); From 63967dc8dfe6d9ba56fc197dd81aaa1e2729848d Mon Sep 17 00:00:00 2001 From: Radu Mojic Date: Mon, 17 Mar 2025 12:21:15 +0200 Subject: [PATCH 2/7] updated address validation, removed length check due to custom HRPs, use isValid from sdk-js --- CHANGELOG.md | 5 +++++ package.json | 2 +- src/utils/account/addressIsValid.ts | 8 +++----- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c4891faf2..497c40097 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,12 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +- [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 @@ -24,9 +27,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) diff --git a/package.json b/package.json index 6299ec4c6..d1410fb7e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@multiversx/sdk-dapp", - "version": "3.3.1", + "version": "3.3.2-alpha.0", "description": "A library to hold the main logic for a dapp on the MultiversX blockchain", "author": "MultiversX", "license": "GPL-3.0-or-later", diff --git a/src/utils/account/addressIsValid.ts b/src/utils/account/addressIsValid.ts index 3e72e5e75..45c9f43d4 100644 --- a/src/utils/account/addressIsValid.ts +++ b/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); } From 8bdcaec0adbb86102a0683670a0851bdb67fb6da Mon Sep 17 00:00:00 2001 From: Radu Mojic Date: Mon, 17 Mar 2025 12:56:45 +0200 Subject: [PATCH 3/7] revert alpha version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d1410fb7e..6299ec4c6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@multiversx/sdk-dapp", - "version": "3.3.2-alpha.0", + "version": "3.3.1", "description": "A library to hold the main logic for a dapp on the MultiversX blockchain", "author": "MultiversX", "license": "GPL-3.0-or-later", From a1daf53e93e685f634a5ab5cdd059bddf47a9c45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miro=20M=C4=83rgineanu?= Date: Mon, 17 Mar 2025 16:06:41 +0200 Subject: [PATCH 4/7] Updated styles. --- src/UI/TransactionData/TransactionDataStyles.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/UI/TransactionData/TransactionDataStyles.scss b/src/UI/TransactionData/TransactionDataStyles.scss index 9bb476a8a..a9df9ed78 100644 --- a/src/UI/TransactionData/TransactionDataStyles.scss +++ b/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; From 1e1b14e222ae8e43257a8d87a4d37018e28a4951 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miro=20M=C4=83rgineanu?= Date: Mon, 17 Mar 2025 16:09:01 +0200 Subject: [PATCH 5/7] Updated CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 497c40097..b40dbd563 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +- [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) From 1f2866e32861e9104970cfbc3c83ed56fc370702 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miro=20M=C4=83rgineanu?= Date: Mon, 17 Mar 2025 17:06:17 +0200 Subject: [PATCH 6/7] 3.3.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6299ec4c6..b8ad13c19 100644 --- a/package.json +++ b/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", From 72724d0407a0c388930d67d54dd0ea6b3a38c851 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miro=20M=C4=83rgineanu?= Date: Mon, 17 Mar 2025 17:06:37 +0200 Subject: [PATCH 7/7] Updated CHANGELOG.md --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b40dbd563..b35d4d87b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ 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)