feat: add options to btc tx item

leather-io · Oct 30, 2024 · adc6302 · adc6302
1 parent 7e16463
commit adc6302
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 65 deletions.
diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item-menu.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item-menu.tsx
@@ -0,0 +1,29 @@
+import { ActivitySelectors } from '@tests/selectors/activity.selectors';
+import { HStack, styled } from 'leather-styles/jsx';
+
+import { ChevronsRightIcon, DropdownMenu } from '@leather.io/ui';
+
+import { TransactionActionMenu } from '../transaction-item/transaction-action-menu';
+
+interface BitcoinTransactionActionMenuProps {
+  onIncreaseFee(): void;
+}
+
+export function BitcoinTransactionActionMenu({ onIncreaseFee }: BitcoinTransactionActionMenuProps) {
+  return (
+    <TransactionActionMenu>
+      <DropdownMenu.Item
+        data-testid={ActivitySelectors.ActivityItemMenuIncreaseFee}
+        onClick={e => {
+          e.stopPropagation();
+          onIncreaseFee();
+        }}
+      >
+        <HStack>
+          <ChevronsRightIcon variant="small" />
+          <styled.span textStyle="label.02">Increase fee</styled.span>
+        </HStack>
+      </DropdownMenu.Item>
+    </TransactionActionMenu>
+  );
+}
diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx
@@ -18,14 +18,14 @@ import {
   isBitcoinTxInbound,
 } from '@app/common/transactions/bitcoin/utils';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { IncreaseFeeButton } from '@app/components/stacks-transaction-item/increase-fee-button';
 import { TransactionTitle } from '@app/components/transaction/transaction-title';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useIsPrivateMode } from '@app/store/settings/settings.selectors';
 
 import { TransactionItemLayout } from '../transaction-item/transaction-item.layout';
 import { BitcoinTransactionIcon } from './bitcoin-transaction-icon';
 import { InscriptionIcon } from './bitcoin-transaction-inscription-icon';
+import { BitcoinTransactionActionMenu } from './bitcoin-transaction-item-menu';
 import { BitcoinTransactionStatus } from './bitcoin-transaction-status';
 
 interface BitcoinTransactionItemProps {
@@ -75,18 +75,17 @@ export function BitcoinTransactionItem({ transaction }: BitcoinTransactionItemPr
   );
 
   const title = inscriptionData ? `Ordinal inscription #${inscriptionData.number}` : 'Bitcoin';
-  const increaseFeeButton = (
-    <IncreaseFeeButton
-      isEnabled={isEnabled}
-      isSelected={pathname === RouteUrls.IncreaseBtcFee}
-      onIncreaseFee={onIncreaseFee}
-    />
-  );
+
+  const isSelected = pathname === RouteUrls.IncreaseBtcFee;
+  const rightElement =
+    isEnabled && !isSelected ? (
+      <BitcoinTransactionActionMenu onIncreaseFee={onIncreaseFee} />
+    ) : undefined;
 
   return (
     <TransactionItemLayout
       openTxLink={openTxLink}
-      rightElement={isEnabled ? increaseFeeButton : undefined}
+      rightElement={rightElement}
       txCaption={txCaption}
       txIcon={
         <BitcoinTransactionIcon

diff --git a/src/app/components/stacks-transaction-item/stacks-transaction-action-menu.tsx b/src/app/components/stacks-transaction-item/stacks-transaction-action-menu.tsx
@@ -1,8 +1,9 @@
 import { ActivitySelectors } from '@tests/selectors/activity.selectors';
-import { css } from 'leather-styles/css';
 import { HStack, styled } from 'leather-styles/jsx';
 
-import { ChevronDownIcon, ChevronsRightIcon, CloseIcon, DropdownMenu, Flag } from '@leather.io/ui';
+import { ChevronsRightIcon, CloseIcon, DropdownMenu } from '@leather.io/ui';
+
+import { TransactionActionMenu } from '../transaction-item/transaction-action-menu';
 
 interface StacksTransactionActionMenuProps {
   onIncreaseFee(): void;
@@ -14,60 +15,31 @@ export function StacksTransactionActionMenu({
   onCancelTransaction,
 }: StacksTransactionActionMenuProps) {
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger
-        data-testid={ActivitySelectors.ActivityItemMenuBtn}
-        className={css({
-          zIndex: 10,
-          borderRadius: 'sm',
-          px: 'space.01',
-          _hover: {
-            background: 'ink.component-background-hover',
-          },
-        })}
+    <TransactionActionMenu>
+      <DropdownMenu.Item
+        data-testid={ActivitySelectors.ActivityItemMenuIncreaseFee}
+        onClick={e => {
+          e.stopPropagation();
+          onIncreaseFee();
+        }}
+      >
+        <HStack>
+          <ChevronsRightIcon variant="small" />
+          <styled.span textStyle="label.02">Increase fee</styled.span>
+        </HStack>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item
+        data-testid={ActivitySelectors.ActivityItemMenuCancelTransaction}
+        onClick={e => {
+          e.stopPropagation();
+          onCancelTransaction();
+        }}
       >
-        <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={ActivitySelectors.ActivityItemMenuIncreaseFee}
-              onClick={e => {
-                e.stopPropagation();
-                onIncreaseFee();
-              }}
-            >
-              <HStack>
-                <ChevronsRightIcon />
-                <styled.span textStyle="label.02">Increase fee</styled.span>
-              </HStack>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              data-testid={ActivitySelectors.ActivityItemMenuCancelTransaction}
-              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>
+        <HStack>
+          <CloseIcon variant="small" />
+          <styled.span textStyle="label.02">Cancel transaction</styled.span>
+        </HStack>
+      </DropdownMenu.Item>
+    </TransactionActionMenu>
   );
 }
diff --git a/src/app/components/transaction-item/transaction-action-menu.tsx b/src/app/components/transaction-item/transaction-action-menu.tsx
@@ -0,0 +1,44 @@
+import { ActivitySelectors } from '@tests/selectors/activity.selectors';
+import { css } from 'leather-styles/css';
+import { styled } from 'leather-styles/jsx';
+
+import { ChevronDownIcon, DropdownMenu, Flag } from '@leather.io/ui';
+
+interface TransactionActionMenuProps {
+  children: React.ReactNode;
+}
+
+export function TransactionActionMenu({ children }: TransactionActionMenuProps) {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger
+        data-testid={ActivitySelectors.ActivityItemMenuBtn}
+        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>{children}</DropdownMenu.Group>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}