feat: cancel tx

package.json

@@ -146,7 +146,7 @@
     "@leather.io/crypto": "1.6.2",
     "@leather.io/models": "0.17.0",
     "@leather.io/query": "2.14.1",
-    "@leather.io/stacks": "1.1.5",
+    "@leather.io/stacks": "1.2.0",
     "@leather.io/tokens": "0.9.0",
     "@leather.io/ui": "1.27.1",
     "@leather.io/utils": "0.15.0",

src/app/common/hooks/use-submit-stx-transaction.ts

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
 
-import { bytesToHex } from '@stacks/common';
 import { StacksTransaction, broadcastTransaction } from '@stacks/transactions';
 
 import { delay, isError } from '@leather.io/utils';
@@ -14,7 +13,6 @@ import { useLoading } from '@app/common/hooks/use-loading';
 import { safelyFormatHexTxid } from '@app/common/utils/safe-handle-txid';
 import { useToast } from '@app/features/toasts/use-toast';
 import { useCurrentStacksNetworkState } from '@app/store/networks/networks.hooks';
-import { useSubmittedTransactionsActions } from '@app/store/submitted-transactions/submitted-transactions.hooks';
 
 const timeForApiToUpdate = 250;
 
@@ -27,7 +25,6 @@ interface UseSubmitTransactionCallbackArgs {
   onError(error: Error | string): void;
 }
 export function useSubmitTransactionCallback({ loadingKey }: UseSubmitTransactionArgs) {
-  const submittedTransactionsActions = useSubmittedTransactionsActions();
   const toast = useToast();
   const refreshAccountData = useRefreshAllAccountData();
 
@@ -47,10 +44,6 @@ export function useSubmitTransactionCallback({ loadingKey }: UseSubmitTransactio
             setIsIdle();
           } else {
             logger.info('Transaction broadcast', response);
-            submittedTransactionsActions.newTransactionSubmitted({
-              rawTx: bytesToHex(transaction.serialize()),
-              txid: safelyFormatHexTxid(response.txid),
-            });
 
             await delay(500);
 
@@ -65,13 +58,6 @@ export function useSubmitTransactionCallback({ loadingKey }: UseSubmitTransactio
           setIsIdle();
         }
       },
-    [
-      setIsLoading,
-      stacksNetwork,
-      toast,
-      setIsIdle,
-      submittedTransactionsActions,
-      refreshAccountData,
-    ]
+    [setIsLoading, stacksNetwork, toast, setIsIdle, refreshAccountData]
   );
 }

src/app/components/stacks-transaction-item/stacks-transaction-action-menu.tsx

@@ -0,0 +1,68 @@
+import { css } from 'leather-styles/css';
+import { HStack, styled } from 'leather-styles/jsx';
+
+import { ChevronDownIcon, ChevronsRightIcon, CloseIcon, DropdownMenu, Flag } from '@leather.io/ui';
+
+interface Props {
+  onIncreaseFee(): void;
+  onCancelTransaction(): void;
+}
+
+export function StacksTransactionActionMenu({ onIncreaseFee, onCancelTransaction }: Props) {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger
+        className={css({
+          zIndex: 10,
+          borderRadius: 'sm',
+          px: 'space.01',
+          _hover: {
+            background: 'ink.component-background-hover',
+          },
+        })}
+      >
+        <Flag spacing="space.02" reverse img={<ChevronDownIcon variant="small" />}>
+          <styled.span textStyle="label.03">Options</styled.span>
+        </Flag>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          align="end"
+          side="bottom"
+          sideOffset={8}
+          className={css({
+            zIndex: 100,
+            width: 'settingsMenuWidth',
+          })}
+        >
+          <DropdownMenu.Group>
+            <DropdownMenu.Item
+              data-testid={''}
+              onClick={e => {
+                e.stopPropagation();
+                onIncreaseFee();
+              }}
+            >
+              <HStack>
+                <ChevronsRightIcon />
+                <styled.span textStyle="label.02">Increase fee</styled.span>
+              </HStack>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              data-testid={''}
+              onClick={e => {
+                e.stopPropagation();
+                onCancelTransaction();
+              }}
+            >
+              <HStack>
+                <CloseIcon />
+                <styled.span textStyle="label.02">Cancel transaction</styled.span>
+              </HStack>
+            </DropdownMenu.Item>
+          </DropdownMenu.Group>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}

src/app/components/stacks-transaction-item/stacks-transaction-item.tsx

@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useMatch, useNavigate } from 'react-router-dom';
 
 import { StacksTx } from '@leather.io/models';
 
@@ -20,7 +20,7 @@ import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/s
 import { useIsPrivateMode } from '@app/store/settings/settings.selectors';
 
 import { TransactionItemLayout } from '../transaction-item/transaction-item.layout';
-import { IncreaseFeeButton } from './increase-fee-button';
+import { StacksTransactionActionMenu } from './stacks-transaction-action-menu';
 import { StacksTransactionIcon } from './stacks-transaction-icon';
 import { StacksTransactionStatus } from './stacks-transaction-status';
 
@@ -44,7 +44,6 @@ export function StacksTransactionItem({
   const currentAccount = useCurrentStacksAccount();
   const isPrivate = useIsPrivateMode();
 
-  const { pathname } = useLocation();
   const navigate = useNavigate();
   const { whenWallet } = useWalletType();
 
@@ -58,10 +57,21 @@ export function StacksTransactionItem({
     });
   };
 
-  const onIncreaseFee = () => {
+  const isOriginator = transaction?.sender_address === currentAccount?.address;
+  const isPending = transaction && isPendingTx(transaction);
+
+  const txCaption = transaction ? getTxCaption(transaction) : caption || '';
+  const txIcon = transaction ? <StacksTransactionIcon transaction={transaction} /> : icon;
+  const txTitle = transaction ? getTxTitle(transaction) : title || '';
+  const txValue = transaction ? getTxValue(transaction, isOriginator) : value;
+
+  function handleTransactionAction(action: 'cancel' | 'increaseFee') {
     if (!transaction) return;
 
-    const routeUrl = RouteUrls.IncreaseStxFee.replace(':txid', transaction.tx_id);
+    const routeUrl =
+      action === 'increaseFee'
+        ? RouteUrls.IncreaseStacksFee.replace(':txid', transaction.tx_id)
+        : RouteUrls.CancelStacksTransaction.replace(':txid', transaction.tx_id);
 
     whenWallet({
       ledger: () =>
@@ -71,28 +81,27 @@ export function StacksTransactionItem({
         })(),
       software: () => navigate(routeUrl),
     })();
-  };
+  }
 
-  const isOriginator = transaction?.sender_address === currentAccount?.address;
-  const isPending = transaction && isPendingTx(transaction);
+  const cancelTransactionMatch = useMatch(RouteUrls.CancelStacksTransaction);
+  const increaseFeeMatch = useMatch(RouteUrls.IncreaseStacksFee);
+
+  const isTransactionActionRoute = !!cancelTransactionMatch || !!increaseFeeMatch;
 
-  const txCaption = transaction ? getTxCaption(transaction) : caption || '';
-  const txIcon = transaction ? <StacksTransactionIcon transaction={transaction} /> : icon;
-  const txTitle = transaction ? getTxTitle(transaction) : title || '';
-  const txValue = transaction ? getTxValue(transaction, isOriginator) : value;
-  const increaseFeeButton = (
-    <IncreaseFeeButton
-      isEnabled={isOriginator && isPending}
-      isSelected={pathname === RouteUrls.IncreaseStxFee}
-      onIncreaseFee={onIncreaseFee}
-    />
-  );
   const txStatus = transaction && <StacksTransactionStatus transaction={transaction} />;
 
+  const rightElement =
+    isOriginator && isPending && !isTransactionActionRoute ? (
+      <StacksTransactionActionMenu
+        onIncreaseFee={() => handleTransactionAction('increaseFee')}
+        onCancelTransaction={() => handleTransactionAction('cancel')}
+      />
+    ) : undefined;
+
   return (
     <TransactionItemLayout
       openTxLink={openTxLink}
-      rightElement={isOriginator && isPending ? increaseFeeButton : undefined}
+      rightElement={rightElement}
       txCaption={txCaption}
       txIcon={txIcon}
       txStatus={txStatus}