fix(layout): tx actions

leather-io · Jun 24, 2024 · 8029708 · 8029708
1 parent 72d282c
commit 8029708
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx
@@ -85,7 +85,7 @@ export function BitcoinTransactionItem({ transaction }: BitcoinTransactionItemPr
   return (
     <TransactionItemLayout
       openTxLink={openTxLink}
-      bottomElement={isEnabled ? increaseFeeButton : undefined}
+      rightElement={isEnabled ? increaseFeeButton : undefined}
       txCaption={txCaption}
       txIcon={
         <BitcoinTransactionIcon

diff --git a/src/app/components/stacks-transaction-item/stacks-transaction-item.tsx b/src/app/components/stacks-transaction-item/stacks-transaction-item.tsx
@@ -3,6 +3,7 @@ import { useMatch, useNavigate } from 'react-router-dom';
 import { HStack } from 'leather-styles/jsx';
 
 import { StacksTx } from '@leather.io/models';
+import { ChevronsRightIcon, CloseIcon } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 import { analytics } from '@shared/utils/analytics';
@@ -19,7 +20,6 @@ import { whenPageMode } from '@app/common/utils';
 import { openIndexPageInNewTab } from '@app/common/utils/open-in-new-tab';
 import { TransactionTitle } from '@app/components/transaction/transaction-title';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
-import { ChevronsRightIcon, CloseIcon } from '@leather.io/ui';
 
 import { TransactionItemLayout } from '../transaction-item/transaction-item.layout';
 import { StacksTransactionIcon } from './stacks-transaction-icon';
@@ -116,20 +116,21 @@ export function StacksTransactionItem({
         isEnabled={isOriginator && isPending}
         isSelected={isTransactionActionRoute}
         onButtonClick={() => handleTransactionAction('increaseFee')}
-        label="Increase Fee"
+        label="Speed Up"
       />
     </HStack>
   );
 
+  const txIsPending = transaction && transaction.tx_status == 'pending';
   const txStatus = transaction && <StacksTransactionStatus transaction={transaction} />;
 
   return (
     <TransactionItemLayout
       openTxLink={openTxLink}
-      bottomElement={isOriginator && isPending ? actionButtonGroup : undefined}
+      rightElement={isOriginator && isPending ? actionButtonGroup : undefined}
       txCaption={txCaption}
       txIcon={txIcon}
-      txStatus={txStatus}
+      txStatus={!txIsPending && txStatus}
       txTitle={<TransactionTitle title={txTitle} />}
       txValue={txValue}
     />

diff --git a/src/app/components/transaction-item/transaction-item.layout.tsx b/src/app/components/transaction-item/transaction-item.layout.tsx
@@ -6,7 +6,7 @@ import { Caption, ItemLayout, Pressable } from '@leather.io/ui';
 
 interface TransactionItemLayoutProps {
   openTxLink(): void;
-  bottomElement?: ReactNode;
+  rightElement?: ReactNode;
   txCaption: ReactNode;
   txTitle: ReactNode;
   txValue: ReactNode;
@@ -17,7 +17,7 @@ interface TransactionItemLayoutProps {
 
 export function TransactionItemLayout({
   openTxLink,
-  bottomElement,
+  rightElement,
   txCaption,
   txIcon,
   txStatus,
@@ -41,10 +41,11 @@ export function TransactionItemLayout({
               </Caption>
               {txStatus && txStatus}
             </HStack>
-            {bottomElement && bottomElement}
           </VStack>
         }
-        titleRight={!bottomElement && <styled.span textStyle="label.02">{txValue}</styled.span>}
+        titleRight={
+          rightElement ? rightElement : <styled.span textStyle="label.02">{txValue}</styled.span>
+        }
       />
     </Pressable>
   );