From aededb1c715b2a1b4b7bc4b97ee12dcd31c3fd5c Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Thu, 2 Feb 2023 12:35:05 -0600 Subject: [PATCH] Convert confirm-tx.utils.js to typescript (#17349) --- package.json | 1 + shared/constants/transaction.ts | 17 +++++ ...{confirm-tx.util.js => confirm-tx.util.ts} | 64 +++++++++++++------ yarn.lock | 8 +++ 4 files changed, 71 insertions(+), 19 deletions(-) rename ui/helpers/utils/{confirm-tx.util.js => confirm-tx.util.ts} (66%) diff --git a/package.json b/package.json index d9397182f..2f311b819 100644 --- a/package.json +++ b/package.json @@ -392,6 +392,7 @@ "@tsconfig/node16": "^1.0.3", "@types/babelify": "^7.3.7", "@types/browserify": "^12.0.37", + "@types/currency-formatter": "^1.5.1", "@types/end-of-stream": "^1.4.1", "@types/fs-extra": "^9.0.13", "@types/gulp": "^4.0.9", diff --git a/shared/constants/transaction.ts b/shared/constants/transaction.ts index 93bdae540..99ec57df3 100644 --- a/shared/constants/transaction.ts +++ b/shared/constants/transaction.ts @@ -289,6 +289,21 @@ export interface TxError { stack?: string; } +/** + * We attach an object to transactions proposed by dapps to show the values + * that the dapp suggested for gas fees. This is used to compare to what our + * internal gas price logic would have the transaction priced at for metrics + * with the aim of improving our suggestions as well as giving the user the + * option to return to the defaults suggested by the dapp if they have edited + * the gas fees on the confirmation screen. + */ +interface DappSuggestedGasFees { + gasPrice?: string; + maxFeePerGas?: string; + maxPriorityFeePerGas?: string; + gas?: string; +} + /** * An object representing a transaction, in whatever state it is in. */ @@ -308,6 +323,8 @@ export interface TransactionMeta { customTokenAmount: string; /** The dapp proposed token amount */ dappProposedTokenAmount: string; + /** The original gas fees suggested by the dapp that proposed this transaction */ + dappSuggestedGasFees?: DappSuggestedGasFees; /** The balance of the token that is being sent */ currentTokenBalance: string; /** The original dapp proposed token approval amount before edit by user */ diff --git a/ui/helpers/utils/confirm-tx.util.js b/ui/helpers/utils/confirm-tx.util.ts similarity index 66% rename from ui/helpers/utils/confirm-tx.util.js rename to ui/helpers/utils/confirm-tx.util.ts index fd2c70649..4c4e0c4e0 100644 --- a/ui/helpers/utils/confirm-tx.util.js +++ b/ui/helpers/utils/confirm-tx.util.ts @@ -1,18 +1,19 @@ import currencyFormatter from 'currency-formatter'; import currencies from 'currency-formatter/currencies'; -import BigNumber from 'bignumber.js'; +import { BigNumber } from 'bignumber.js'; import { unconfirmedTransactionsCountSelector } from '../../selectors'; import { Numeric } from '../../../shared/modules/Numeric'; import { EtherDenomination } from '../../../shared/constants/common'; +import { TransactionMeta } from '../../../shared/constants/transaction'; -export function getHexGasTotal({ gasLimit = '0x0', gasPrice = '0x0' }) { +export function getHexGasTotal({ gasLimit = '0x0', gasPrice = '0x0' }): string { return new Numeric(gasLimit, 16) .times(new Numeric(gasPrice, 16)) .toPrefixedHexString(); } -export function addEth(firstValue, ...otherValues) { +export function addEth(firstValue: string, ...otherValues: string[]): string { return otherValues .reduce((numericAcc, ethAmount) => { return numericAcc.add(new Numeric(ethAmount, 10)).round(6); @@ -20,7 +21,7 @@ export function addEth(firstValue, ...otherValues) { .toString(); } -export function addFiat(firstValue, ...otherValues) { +export function addFiat(firstValue: string, ...otherValues: string[]): string { return otherValues .reduce((numericAcc, fiatAmount) => { return numericAcc.add(new Numeric(fiatAmount, 10)).round(2); @@ -30,11 +31,17 @@ export function addFiat(firstValue, ...otherValues) { export function getTransactionFee({ value, - fromCurrency = 'ETH', + fromCurrency = EtherDenomination.ETH, toCurrency, conversionRate, numberOfDecimals, -}) { +}: { + value: string; + fromCurrency: EtherDenomination; + toCurrency: string; + conversionRate: number; + numberOfDecimals: number; +}): string { let fee = new Numeric(value, 16, EtherDenomination.WEI) .toDenomination(EtherDenomination.ETH) .toBase(10); @@ -45,24 +52,29 @@ export function getTransactionFee({ return fee.round(numberOfDecimals).toString(); } -export function formatCurrency(value, currencyCode) { +export function formatCurrency(value: string, currencyCode: string): string { const upperCaseCurrencyCode = currencyCode.toUpperCase(); return currencies.find((currency) => currency.code === upperCaseCurrencyCode) ? currencyFormatter.format(Number(value), { code: upperCaseCurrencyCode, - style: 'currency', }) : value; } export function convertTokenToFiat({ value, - fromCurrency = 'ETH', + fromCurrency = EtherDenomination.ETH, toCurrency, conversionRate, contractExchangeRate, -}) { +}: { + value: string; + fromCurrency: EtherDenomination; + toCurrency: string; + conversionRate: number; + contractExchangeRate: number; +}): string { const totalExchangeRate = conversionRate * contractExchangeRate; let tokenInFiat = new Numeric(value, 10); @@ -74,18 +86,30 @@ export function convertTokenToFiat({ return tokenInFiat.round(2).toString(); } -export function hasUnconfirmedTransactions(state) { +/** + * This is a selector and probably doesn't belong here but its staying for now + * Note: I did not go so far as to type the entirety of the MetaMask state tree + * which definitely needs to be done for the full conversion of TypeScript to + * be successful and as useful as possible. + * TODO: Type the MetaMask state tree and use that type here. + * + * @param state - MetaMask state + * @returns true if there are unconfirmed transactions in state + */ +export function hasUnconfirmedTransactions( + state: Record, +): boolean { return unconfirmedTransactionsCountSelector(state) > 0; } /** * Rounds the given decimal string to 4 significant digits. * - * @param {string} decimalString - The base-ten number to round. - * @returns {string} The rounded number, or the original number if no + * @param decimalString - The base-ten number to round. + * @returns The rounded number, or the original number if no * rounding was necessary. */ -export function roundExponential(decimalString) { +export function roundExponential(decimalString: string): string { const PRECISION = 4; const bigNumberValue = new BigNumber(decimalString); @@ -95,8 +119,10 @@ export function roundExponential(decimalString) { : decimalString; } -export function areDappSuggestedAndTxParamGasFeesTheSame(txData = {}) { - const { txParams, dappSuggestedGasFees } = txData; +export function areDappSuggestedAndTxParamGasFeesTheSame( + txData: TransactionMeta, +): boolean { + const { txParams, dappSuggestedGasFees } = txData ?? {}; const { gasPrice: txParamsGasPrice, maxFeePerGas: txParamsMaxFeePerGas, @@ -127,9 +153,9 @@ export function areDappSuggestedAndTxParamGasFeesTheSame(txData = {}) { txParamsMaxFeePerGas === dappMaxFeePerGas && txParamsMaxPriorityFeePerGas === dappMaxPriorityFeePerGas; - return ( + return Boolean( txParamsGasPriceMatchesDappSuggestedGasPrice || - txParamsEIP1559FeesMatchDappSuggestedGasPrice || - txParamsEIP1559FeesMatchDappSuggestedEIP1559Fees + txParamsEIP1559FeesMatchDappSuggestedGasPrice || + txParamsEIP1559FeesMatchDappSuggestedEIP1559Fees, ); } diff --git a/yarn.lock b/yarn.lock index 9f97d3cda..c6d2111c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6902,6 +6902,13 @@ __metadata: languageName: node linkType: hard +"@types/currency-formatter@npm:^1.5.1": + version: 1.5.1 + resolution: "@types/currency-formatter@npm:1.5.1" + checksum: dcbe69289bb1493092842f9d4cb97e54b1a0801769506ffb4e35c417863f0e35e8bf7f09445d91f9487cf31af3d4a9e65db1435c2987dd37da4e20d47a52dd63 + languageName: node + linkType: hard + "@types/debug@npm:^4.1.7": version: 4.1.7 resolution: "@types/debug@npm:4.1.7" @@ -24113,6 +24120,7 @@ __metadata: "@tsconfig/node16": ^1.0.3 "@types/babelify": ^7.3.7 "@types/browserify": ^12.0.37 + "@types/currency-formatter": ^1.5.1 "@types/end-of-stream": ^1.4.1 "@types/fs-extra": ^9.0.13 "@types/gulp": ^4.0.9