fix speed up/cancel transaction

src/core/types/transactions.ts

@@ -45,6 +45,8 @@ type BaseTransaction = {
  };
 
  type: TransactionType;
+ typeOverride?: 'speed_up' | 'cancel'; // we keep the tx metadata like type "swap" and add this override to indicate it's a speed up or cancel
+
  protocol?: ProtocolType;
  title: string;
  description?: string;

src/core/utils/deserializeBigNumbers.ts

@@ -0,0 +1,16 @@
+import { BigNumber } from '@ethersproject/bignumber';
+
+export function deserializeBigNumbers<T>(obj: T) {
+ for (const key in obj) {
+ const v = obj[key];
+ if (!v || typeof v !== 'object') continue;
+
+ if ('hex' in v && 'type' in v && v.type === 'BigNumber') {
+ (obj[key] as BigNumber) = BigNumber.from(v.hex);
+ } else {
+ obj[key] = deserializeBigNumbers(v);
+ }
+ }
+
+ return obj;
+}

src/core/utils/ethereum.ts

@@ -2,6 +2,7 @@ import { isAddress } from '@ethersproject/address';
 import { Mnemonic, isValidMnemonic } from '@ethersproject/hdnode';
 import { TransactionResponse } from '@ethersproject/providers';
 import { parseEther } from '@ethersproject/units';
+import BigNumber from 'bignumber.js';
 import omit from 'lodash/omit';
 import { Address } from 'wagmi';
 
@@ -10,7 +11,7 @@ import { ethUnits } from '../references';
 import { EthereumWalletType } from '../types/walletTypes';
 
 import { addHexPrefix, isHexStringIgnorePrefix } from './hex';
-import { divide, multiply } from './numbers';
+import { divide } from './numbers';
 
 export type EthereumWalletSeed = PrivateKey | Mnemonic['phrase'];
 
@@ -75,7 +76,7 @@ export const hasPreviousTransactions = async (
 };
 
 export const gweiToWei = (gweiAmount: string) => {
- const weiAmount = multiply(gweiAmount, ethUnits.gwei);
+ const weiAmount = new BigNumber(gweiAmount).times(ethUnits.gwei).toFixed(0); // fixed to 0 because wei is the smallest unit
  return weiAmount;
 };
 

src/core/utils/gas.ts

@@ -33,6 +33,7 @@ import {
 } from '../types/gas';
 
 import { gweiToWei, weiToGwei } from './ethereum';
+import { formatNumber } from './formatNumber';
 import { addHexPrefix, convertStringToHex, toHex } from './hex';
 import { fetchJsonLocally } from './localJson';
 import {
@@ -107,11 +108,12 @@ export const parseGasDataConfirmationTime = ({
 };
 
 export const parseGasFeeParam = ({ wei }: { wei: string }): GasFeeParam => {
- const gwei = wei ? weiToGwei(wei) : '';
+ const _wei = new BigNumber(wei).toFixed(0); // wei is the smallest unit, shouldn't have decimals
+ const gwei = _wei ? weiToGwei(_wei) : '';
  return {
- amount: wei,
- display: `${gwei} Gwei`,
- gwei: `${Math.round(Number(gwei) * 10) / 10}`,
+ amount: _wei,
+ display: `${formatNumber(gwei)} Gwei`,
+ gwei,
  };
 };
 

src/core/utils/transactions.ts

@@ -328,7 +328,7 @@ export const parseNewTransaction = (
  ...tx,
  status: 'pending',
  data: tx.data,
- title: i18n.t(`transactions.${tx.type}.${tx.status}`),
+ title: i18n.t(`transactions.${tx.typeOverride || tx.type}.${tx.status}`),
  description: asset?.name || methodName,
  from: tx.from,
  changes,

src/entries/popup/components/ExplainerSheet/ExplainerSheet.tsx

@@ -211,7 +211,6 @@ export const ExplainerSheet = ({
  height="44px"
  variant={actionButton?.variant || 'raised'}
  onClick={actionButton?.action}
- symbol={actionButton?.symbol}
  testId="explainer-action-button"
  >
  <Inline alignVertical="center" space="4px">

src/entries/popup/components/SideChainExplainer.tsx

@@ -28,7 +28,7 @@ export const getSideChainExplainerParams = (
  [ChainId.bsc]: 'bsc',
  [ChainId.avalanche]: 'avalanche',
  [ChainId.blast]: 'blast',
- [ChainId.degen]: 'degen'
+ [ChainId.degen]: 'degen',
  // add new chains here with unique i18n explainer keys
  };
 

src/entries/popup/handlers/wallet.ts

@@ -25,6 +25,7 @@ import {
 } from '~/core/types/gas';
 import { KeychainWallet } from '~/core/types/keychainTypes';
 import { ExecuteRapResponse } from '~/core/types/transactions';
+import { deserializeBigNumbers } from '~/core/utils/deserializeBigNumbers';
 import { hasPreviousTransactions } from '~/core/utils/ethereum';
 import { estimateGasWithPadding } from '~/core/utils/gas';
 import { toHex } from '~/core/utils/hex';
@@ -157,10 +158,12 @@ export const sendTransaction = async (
  throw new Error('Unsupported hardware wallet');
  }
  } else {
- return walletAction(
+ const transactionResponse = await walletAction<TransactionResponse>(
  'send_transaction',
  params,
- ) as unknown as TransactionResponse;
+ );
+
+ return deserializeBigNumbers(transactionResponse);
  }
 };
 

src/entries/popup/hooks/useCurrentHomeSheet.tsx

@@ -26,7 +26,7 @@ export function useCurrentHomeSheet() {
  switch (sheet) {
  case 'cancel':
  case 'speedUp':
- return selectedTransaction ? (
+ return selectedTransaction?.status === 'pending' ? (
  <SpeedUpAndCancelSheet
  currentSheet={sheet}
  onClose={closeSheet}

src/entries/popup/pages/home/Activity/ActivityDetails.tsx

@@ -9,7 +9,11 @@ import { useApprovals } from '~/core/resources/approvals/approvals';
 import { useTransaction } from '~/core/resources/transactions/transaction';
 import { useCurrentAddressStore, useCurrentCurrencyStore } from '~/core/state';
 import { ChainId, ChainNameDisplay } from '~/core/types/chains';
-import { RainbowTransaction, TxHash } from '~/core/types/transactions';
+import {
+ PendingTransaction,
+ RainbowTransaction,
+ TxHash,
+} from '~/core/types/transactions';
 import { truncateAddress } from '~/core/utils/address';
 import { findRainbowChainForChainId } from '~/core/utils/chains';
 import { copy } from '~/core/utils/copy';
@@ -46,6 +50,7 @@ import {
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from '~/entries/popup/components/DropdownMenu/DropdownMenu';
+import { ExplainerSheet } from '~/entries/popup/components/ExplainerSheet/ExplainerSheet';
 import { Navbar } from '~/entries/popup/components/Navbar/Navbar';
 import { useRainbowNavigate } from '~/entries/popup/hooks/useRainbowNavigate';
 import { useWallets } from '~/entries/popup/hooks/useWallets';
@@ -288,13 +293,38 @@ function NetworkData({ transaction: tx }: { transaction: RainbowTransaction }) {
  );
 }
 
+function SpeedUpErrorExplainer() {
+ const [searchParams, setSearchParams] = useSearchParams();
+ const explainer = searchParams.get('explainer');
+
+ return (
+ <ExplainerSheet
+ show={explainer === 'speed_up_error'}
+ onClickOutside={() => setSearchParams({})}
+ header={{
+ icon: <Symbol symbol="xmark.circle.fill" color="red" size={32} />,
+ }}
+ title={i18n.t('speed_up_and_cancel.speed_up_failed.title')}
+ description={[i18n.t('speed_up_and_cancel.speed_up_failed.description')]}
+ actionButton={{
+ action: () => setSearchParams({ sheet: 'cancel' }),
+ symbol: 'trash.fill',
+ symbolSide: 'left',
+ label: i18n.t('speed_up_and_cancel.cancel_title'),
+ labelColor: 'label',
+ }}
+ />
+ );
+}
+
 const SpeedUpOrCancel = ({
  transaction,
 }: {
- transaction: RainbowTransaction;
+ transaction: PendingTransaction;
 }) => {
- const [searchParams] = useSearchParams();
  const navigate = useRainbowNavigate();
+ const [searchParams] = useSearchParams();
+
  const sheetParam = searchParams.get('sheet');
  const sheet =
  sheetParam === 'speedUp' || sheetParam === 'cancel' ? sheetParam : 'none';
@@ -303,6 +333,7 @@ const SpeedUpOrCancel = ({
  state: { skipTransitionOnRoute: ROUTES.HOME },
  });
  };
+
  return (
  <>
  <Box display="flex" flexDirection="column" gap="8px">
@@ -327,13 +358,12 @@ const SpeedUpOrCancel = ({
  {i18n.t('speed_up_and_cancel.cancel')}
  </Button>
  </Box>
- {sheet !== 'none' && (
- <SpeedUpAndCancelSheet
- currentSheet={sheet}
- transaction={transaction}
- onClose={() => setSheet('none')}
- />
- )}
+ <SpeedUpAndCancelSheet
+ currentSheet={sheet}
+ transaction={transaction}
+ onClose={() => setSheet('none')}
+ />
+ <SpeedUpErrorExplainer />
  </>
  );
 };