View on GitHub
File Changes
import { getTransactionHistory } from './transactions/requests/getTransactionHistory';
import { getLegacyWalletTransactionHistory } from './transactions/requests/getLegacyWalletTransactionHistory';
import { createTransaction } from './transactions/requests/createTransaction';
-
import { deleteTransaction } from './transactions/requests/deleteTransaction';
+
import { deleteLegacyTransaction } from './transactions/requests/deleteLegacyTransaction';

                      
// Wallets requests
import { changeSpendingPassword } from './wallets/requests/changeSpendingPassword';
    Logger.debug('AdaApi::deleteTransaction called', { parameters: request });
    const { walletId, transactionId } = request;
    try {
-
      const response: void = await deleteTransaction(this.config, {
+
      const response: void = await deleteLegacyTransaction(this.config, {
        walletId,
        transactionId,
      });
+
// @flow
+
import type { RequestConfig } from '../../common/types';
+
import type { DeleteTransactionRequest } from '../types';
+
import { request } from '../../utils/request';
+

                      
+
export const deleteLegacyTransaction = (
+
  config: RequestConfig,
+
  { walletId, transactionId }: DeleteTransactionRequest
+
): Promise<*> =>
+
  request({
+
    method: 'DELETE',
+
    path: `/v2/byron-wallets/${walletId}/transactions/${transactionId}`,
+
    ...config,
+
  });
): Promise<*> =>
  request({
    method: 'DELETE',
-
    path: `/v2/byron-wallets/${walletId}/transactions/${transactionId}`,
+
    path: `/v2/wallets/${walletId}/transactions/${transactionId}`,
    ...config,
  });
    };

                      
    return (
-
      <div>
-
        {showConfirmationDialog && (
-
          <CancelTransactionConfirmationDialog
-
            network={network}
-
            onCancel={this.hideConfirmationDialog}
-
            onConfirm={this.deletePendingTransaction}
-
          />
-
        )}
-
        {!showConfirmationDialog && (
-
          <div
-
            onClick={this.toggleDetails.bind(this)}
-
            className={componentStyles}
-
            role="presentation"
-
            aria-hidden
-
          >
-
            <div className={styles.toggler}>
-
              <TransactionTypeIcon
-
                exceedsPendingTimeLimit={exceedsPendingTimeLimit}
-
                iconType={iconType}
-
              />
-

                      
-
              <div className={styles.togglerContent}>
-
                <div className={styles.header}>
-
                  <div className={styles.title}>
-
                    {data.type === TransactionTypes.EXPEND
-
                      ? intl.formatMessage(messages.sent, { currency })
-
                      : intl.formatMessage(messages.received, { currency })}
-
                  </div>
-
                  <div className={styles.amount}>
-
                    {// hide currency (we are showing symbol instead)
-
                    formattedWalletAmount(data.amount, false)}
-
                    <SVGInline svg={symbol} className={styles.currencySymbol} />
-
                  </div>
+
      <Fragment>
+
        <div
+
          onClick={this.toggleDetails.bind(this)}
+
          className={componentStyles}
+
          role="presentation"
+
          aria-hidden
+
        >
+
          <div className={styles.toggler}>
+
            <TransactionTypeIcon
+
              exceedsPendingTimeLimit={exceedsPendingTimeLimit}
+
              iconType={iconType}
+
            />
+

                      
+
            <div className={styles.togglerContent}>
+
              <div className={styles.header}>
+
                <div className={styles.title}>
+
                  {data.type === TransactionTypes.EXPEND
+
                    ? intl.formatMessage(messages.sent, { currency })
+
                    : intl.formatMessage(messages.received, { currency })}
+
                </div>
+
                <div className={styles.amount}>
+
                  {// hide currency (we are showing symbol instead)
+
                  formattedWalletAmount(data.amount, false)}
+
                  <SVGInline svg={symbol} className={styles.currencySymbol} />
                </div>
+
              </div>

                      
-
                <div className={styles.details}>
-
                  <div className={styles.type}>
-
                    {intl.formatMessage(messages.type, { currency })},{' '}
-
                    {moment(data.date).format('hh:mm:ss A')}
-
                  </div>
-
                  {this.renderTxnStateTag()}
+
              <div className={styles.details}>
+
                <div className={styles.type}>
+
                  {intl.formatMessage(messages.type, { currency })},{' '}
+
                  {moment(data.date).format('hh:mm:ss A')}
                </div>
+
                {this.renderTxnStateTag()}
              </div>
            </div>
+
          </div>

                      
-
            {/* ==== Toggleable Transaction Details ==== */}
-
            <div className={contentStyles}>
-
              <div
-
                className={detailsStyles}
-
                onClick={event => event.stopPropagation()}
-
                role="presentation"
-
                aria-hidden
-
              >
-
                <div>
-
                  <h2>{intl.formatMessage(messages.fromAddresses)}</h2>
-

                      
-
                  {fromAddresses(data.addresses.from, data.id)}
-

                      
-
                  <h2>{intl.formatMessage(messages.toAddresses)}</h2>
-
                  {data.addresses.to.map((address, addressIndex) => (
-
                    <div
-
                      // eslint-disable-next-line react/no-array-index-key
-
                      key={`${data.id}-to-${address}-${addressIndex}`}
-
                      className={styles.addressRow}
-
                    >
-
                      <span
-
                        role="presentation"
-
                        aria-hidden
-
                        className={styles.address}
-
                        onClick={this.handleOpenExplorer.bind(
-
                          this,
-
                          'address',
-
                          address
-
                        )}
-
                      >
-
                        {address}
-
                        <SVGInline svg={externalLinkIcon} />
-
                      </span>
-
                    </div>
-
                  ))}
-

                      
-
                  <h2>{intl.formatMessage(messages.transactionId)}</h2>
-
                  <div className={styles.transactionIdRow}>
+
          {/* ==== Toggleable Transaction Details ==== */}
+
          <div className={contentStyles}>
+
            <div
+
              className={detailsStyles}
+
              onClick={event => event.stopPropagation()}
+
              role="presentation"
+
              aria-hidden
+
            >
+
              <div>
+
                <h2>{intl.formatMessage(messages.fromAddresses)}</h2>
+

                      
+
                {fromAddresses(data.addresses.from, data.id)}
+

                      
+
                <h2>{intl.formatMessage(messages.toAddresses)}</h2>
+
                {data.addresses.to.map((address, addressIndex) => (
+
                  <div
+
                    // eslint-disable-next-line react/no-array-index-key
+
                    key={`${data.id}-to-${address}-${addressIndex}`}
+
                    className={styles.addressRow}
+
                  >
                    <span
                      role="presentation"
                      aria-hidden
-
                      className={styles.transactionId}
+
                      className={styles.address}
                      onClick={this.handleOpenExplorer.bind(
                        this,
-
                        'tx',
-
                        data.id
+
                        'address',
+
                        address
                      )}
                    >
-
                      {data.id}
+
                      {address}
                      <SVGInline svg={externalLinkIcon} />
                    </span>
                  </div>
-
                  {this.renderCancelPendingTxnContent()}
+
                ))}
+

                      
+
                <h2>{intl.formatMessage(messages.transactionId)}</h2>
+
                <div className={styles.transactionIdRow}>
+
                  <span
+
                    role="presentation"
+
                    aria-hidden
+
                    className={styles.transactionId}
+
                    onClick={this.handleOpenExplorer.bind(this, 'tx', data.id)}
+
                  >
+
                    {data.id}
+
                    <SVGInline svg={externalLinkIcon} />
+
                  </span>
                </div>
+
                {this.renderCancelPendingTxnContent()}
              </div>
-
              <SVGInline svg={arrow} className={arrowStyles} />
            </div>
+
            <SVGInline svg={arrow} className={arrowStyles} />
          </div>
+
        </div>
+

                      
+
        {showConfirmationDialog && (
+
          <CancelTransactionConfirmationDialog
+
            network={network}
+
            onCancel={this.hideConfirmationDialog}
+
            onConfirm={this.deletePendingTransaction}
+
          />
        )}
-
      </div>
+
      </Fragment>
    );
  }
}
-
export const PENDING_TIME_LIMIT = 60000 * 5; // 5 minutes
+
export const PENDING_TIME_LIMIT = 10 * 60 * 1000; // 10 minutes | unit: milliseconds
  render() {
    const { actions, stores } = this.props;
    const { sidebar, app, networkStatus, wallets, newsFeed } = stores;
-
    const { active, isWalletRoute, allWallets, allLegacyWallets } = wallets;
+
    const { active, isWalletRoute, allWallets } = wallets;
    const {
      currentRoute,
      environment: { isMainnet, network },
      openExternalLink,
    } = app;
-
    const hasAnyWallets = allWallets.length > allLegacyWallets.length;
+
    const hasAnyWallets = allWallets.length > 0;
    const walletRoutesMatch = matchRoute(
      `${ROUTES.WALLETS.ROOT}/:id(*page)`,
      currentRoute