Merge branch 'dev' into refactor/remove-broadcast-raw-transaction

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

@@ -5,6 +5,7 @@ import { bytesToHex } from '@stacks/common';
 import { StacksTransaction, broadcastTransaction } from '@stacks/transactions';
 
 import { logger } from '@shared/logger';
+import { isError } from '@shared/utils';
 
 import { getErrorMessage } from '@app/common/get-error-message';
 import { useRefreshAllAccountData } from '@app/common/hooks/account/use-refresh-all-account-data';
@@ -59,7 +60,7 @@ export function useSubmitTransactionCallback({ loadingKey }: UseSubmitTransactio
           }
         } catch (error) {
           logger.error('Transaction callback', { error });
-          onError(error instanceof Error ? error : { name: '', message: '' });
+          onError(isError(error) ? error : { name: '', message: '' });
           setIsIdle();
         }
       },

src/app/common/utils/safe-await.ts

@@ -1,4 +1,5 @@
 // TypeScript port of https://github.com/DavidWells/safe-await/
+import { isError } from '@shared/utils';
 
 // Native Error types https://mzl.la/2Veh3TR
 const nativeExceptions = [
@@ -19,7 +20,7 @@ function throwNative(error: Error) {
 export async function safeAwait<T>(promise: Promise<T>, finallyFn?: () => void) {
   return promise
     .then(data => {
-      if (data instanceof Error) {
+      if (isError(data)) {
         throwNative(data);
         return [data] as readonly [Error];
       }

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

@@ -23,13 +23,12 @@ import { useGetInscriptionsByOutputQuery } from '@app/query/bitcoin/ordinals/ins
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
 import { BtcIcon } from '@app/ui/components/icons/btc-icon';
+import { Caption } from '@app/ui/components/typography/caption';
 
 import { TransactionItemLayout } from '../transaction-item/transaction-item.layout';
-import { BitcoinTransactionCaption } from './bitcoin-transaction-caption';
 import { BitcoinTransactionIcon } from './bitcoin-transaction-icon';
 import { InscriptionIcon } from './bitcoin-transaction-inscription-icon';
 import { BitcoinTransactionStatus } from './bitcoin-transaction-status';
-import { BitcoinTransactionValue } from './bitcoin-transaction-value';
 
 interface BitcoinTransactionItemProps {
   transaction: BitcoinTx;
@@ -76,13 +75,10 @@ export function BitcoinTransactionItem({ transaction }: BitcoinTransactionItemPr
 
   const txCaption = (
     <BulletSeparator>
-      <BitcoinTransactionCaption>{caption}</BitcoinTransactionCaption>
-      {inscriptionData ? (
-        <BitcoinTransactionCaption>{inscriptionData.mime_type}</BitcoinTransactionCaption>
-      ) : null}
+      <Caption>{caption}</Caption>
+      {inscriptionData ? <Caption>{inscriptionData.mime_type}</Caption> : null}
     </BulletSeparator>
   );
-  const txValue = <BitcoinTransactionValue>{value}</BitcoinTransactionValue>;
 
   const title = inscriptionData ? `Ordinal inscription #${inscriptionData.number}` : 'Bitcoin';
   const increaseFeeButton = (
@@ -107,7 +103,7 @@ export function BitcoinTransactionItem({ transaction }: BitcoinTransactionItemPr
       }
       txStatus={<BitcoinTransactionStatus transaction={transaction} />}
       txTitle={<TransactionTitle title={title} />}
-      txValue={txValue}
+      txValue={value}
     />
   );
 }

src/app/components/bitcoin-transaction-item/bitcoin-transaction-status.tsx

@@ -1,6 +1,7 @@
 import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
 
-import { PendingLabel } from '@app/components/transaction/pending-label';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { Caption } from '@app/ui/components/typography/caption';
 
 interface BitcoinTransactionStatusProps {
   transaction: BitcoinTx;
@@ -10,5 +11,9 @@ const pendingWaitingMessage =
 
 export function BitcoinTransactionStatus({ transaction }: BitcoinTransactionStatusProps) {
   const isPending = !transaction.status.confirmed;
-  return isPending ? <PendingLabel pendingWaitingMessage={pendingWaitingMessage} /> : null;
+  return isPending ? (
+    <BasicTooltip asChild label={pendingWaitingMessage} side="bottom">
+      <Caption color="warning.label">Pending</Caption>
+    </BasicTooltip>
+  ) : null;
 }

src/app/components/secret-key/mnemonic-key/mnemonic-word-input.tsx

@@ -23,7 +23,7 @@ export function MnemonicWordInput({
   const [isFocused, setIsFocused] = useState(false);
   const isDirty = useIsFieldDirty(name);
   return (
-    <Input.Root hasError={isDirty && !!meta.error} shrink>
+    <Input.Root hasError={isDirty && !!meta.error} shrink={!!value}>
       <Input.Field
         // Limitation of the animated label is that we cannot detect
         // programatically updated inputs. Here we add an empty place holder to

src/app/components/stacks-transaction-item/increase-fee-button.tsx

@@ -26,7 +26,7 @@ export function IncreaseFeeButton(props: IncreaseFeeButtonProps) {
       position="relative"
       px="space.02"
       py="space.01"
-      rounded="8px"
+      rounded="xs"
       type="button"
       zIndex={999}
     >

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

@@ -1,7 +1,5 @@
 import { createSearchParams, useLocation, useNavigate } from 'react-router-dom';
 
-import { styled } from 'leather-styles/jsx';
-
 import { StacksTx, TxTransferDetails } from '@shared/models/transactions/stacks-transaction.model';
 import { RouteUrls } from '@shared/route-urls';
 
@@ -85,22 +83,16 @@ export function StacksTransactionItem({
     />
   );
   const txStatus = transaction && <StacksTransactionStatus transaction={transaction} />;
-  const txCaption = (
-    <styled.span color="accent.text-subdued" textStyle="caption.02" whiteSpace="nowrap">
-      {caption}
-    </styled.span>
-  );
-  const txValue = <styled.span textStyle="label.02">{value}</styled.span>;
 
   return (
     <TransactionItemLayout
       openTxLink={openTxLink}
       rightElement={isOriginator && isPending ? increaseFeeButton : undefined}
-      txCaption={txCaption}
+      txCaption={caption}
       txIcon={txIcon}
       txStatus={txStatus}
       txTitle={<TransactionTitle title={title} />}
-      txValue={txValue}
+      txValue={value}
     />
   );
 }

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

@@ -1,11 +1,11 @@
-import { styled } from 'leather-styles/jsx';
-
 import { StacksTx } from '@shared/models/transactions/stacks-transaction.model';
 
 import { isPendingTx } from '@app/common/transactions/stacks/transaction.utils';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { Caption } from '@app/ui/components/typography/caption';
 
-import { PendingLabel } from '../transaction/pending-label';
+const pendingWaitingMessage =
+  'This transaction is waiting to be confirmed. Depending on network congestion, this may take anywhere from a few minutes, to a couple of hours.';
 
 interface TransactionStatusProps {
   transaction: StacksTx;
@@ -16,12 +16,14 @@ export function StacksTransactionStatus({ transaction }: TransactionStatusProps)
 
   return (
     <>
-      {isPending && <PendingLabel />}
+      {isPending && (
+        <BasicTooltip asChild label={pendingWaitingMessage} side="bottom">
+          <Caption color="warning.label">Pending</Caption>
+        </BasicTooltip>
+      )}
       {isFailed && (
         <BasicTooltip label={transaction.tx_status} side="bottom">
-          <styled.span color="error.label" textStyle="label.03">
-            Failed
-          </styled.span>
+          <Caption color="error.label">Failed</Caption>
         </BasicTooltip>
       )}
     </>

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

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 
-import { styled } from 'leather-styles/jsx';
+import { HStack, styled } from 'leather-styles/jsx';
 
 import { ItemInteractive } from '@app/ui/components/item/item-interactive';
 import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { Caption } from '@app/ui/components/typography/caption';
 
 interface TransactionItemLayoutProps {
   openTxLink(): void;
@@ -25,18 +26,15 @@ export function TransactionItemLayout({
   txValue,
 }: TransactionItemLayoutProps) {
   return (
-    // TODO: Revisit if needed styles position="relative" zIndex={99}
     <ItemInteractive onClick={openTxLink}>
       <ItemLayout
         flagImg={txIcon && txIcon}
         titleLeft={txTitle}
         captionLeft={
-          <>
-            <styled.span color="accent.text-subdued" textStyle="caption.01">
-              {txCaption}
-            </styled.span>
+          <HStack alignItems="center">
+            <Caption>{txCaption}</Caption>
             {txStatus && txStatus}
-          </>
+          </HStack>
         }
         titleRight={
           rightElement ? (

src/app/components/transaction/transaction-title.tsx

@@ -22,10 +22,11 @@ export function TransactionTitle(props: TransactionTitleProps) {
   return (
     <BasicTooltip disabled={!isEllipsisActive} label={title} side="top">
       <Title
-        fontWeight="normal"
+        fontWeight={500}
         overflow="hidden"
         ref={ref}
         textOverflow="ellipsis"
+        textStyle="label.02"
         whiteSpace="nowrap"
       >
         {spamFilter(title)}

src/app/features/increase-fee-drawer/hooks/use-btc-increase-fee.ts

@@ -8,6 +8,7 @@ import * as yup from 'yup';
 import { createMoney } from '@shared/models/money.model';
 import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
 import { RouteUrls } from '@shared/route-urls';
+import { isError } from '@shared/utils';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useBtcAssetBalance } from '@app/common/hooks/balance/btc/use-btc-balance';
@@ -122,7 +123,7 @@ export function useBtcIncreaseFee(btcTx: BitcoinTx) {
   }
 
   function onError(error: unknown) {
-    const message = error instanceof Error ? error.message : 'Unknown error';
+    const message = isError(error) ? error.message : 'Unknown error';
     toast.error(message);
     navigate(RouteUrls.Home);
   }

src/app/features/ledger/flows/bitcoin-tx-signing/ledger-bitcoin-sign-tx-container.tsx

@@ -9,6 +9,7 @@ import get from 'lodash.get';
 import { BitcoinInputSigningConfig } from '@shared/crypto/bitcoin/signer-config';
 import { logger } from '@shared/logger';
 import { RouteUrls } from '@shared/route-urls';
+import { isError } from '@shared/utils';
 
 import { useLocationState, useLocationStateWithCache } from '@app/common/hooks/use-location-state';
 import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
@@ -115,7 +116,7 @@ function LedgerSignBitcoinTxContainer() {
         void bitcoinApp.transport.close();
       }
     } catch (e) {
-      if (e instanceof Error && checkLockedDeviceError(e)) {
+      if (isError(e) && checkLockedDeviceError(e)) {
         setLatestDeviceResponse({ deviceLocked: true } as any);
         return;
       }

src/app/features/ledger/flows/jwt-signing/ledger-sign-jwt-container.tsx

@@ -7,6 +7,7 @@ import get from 'lodash.get';
 
 import { finalizeAuthResponse } from '@shared/actions/finalize-auth-response';
 import { logger } from '@shared/logger';
+import { isError } from '@shared/utils';
 
 import { useGetLegacyAuthBitcoinAddresses } from '@app/common/authentication/use-legacy-auth-bitcoin-addresses';
 import { useOnboardingState } from '@app/common/hooks/auth/use-onboarding-state';
@@ -92,7 +93,7 @@ export function LedgerSignJwtContainer() {
     const stacks = await prepareLedgerDeviceStacksAppConnection({
       setLoadingState: setAwaitingDeviceConnection,
       onError(e) {
-        if (e instanceof Error && checkLockedDeviceError(e)) {
+        if (isError(e) && checkLockedDeviceError(e)) {
           setLatestDeviceResponse({ deviceLocked: true } as any);
           return;
         }

src/app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg-container.tsx

@@ -9,6 +9,7 @@ import get from 'lodash.get';
 import { finalizeMessageSignature } from '@shared/actions/finalize-message-signature';
 import { logger } from '@shared/logger';
 import { UnsignedMessage, whenSignableMessageOfType } from '@shared/signature/signature-types';
+import { isError } from '@shared/utils';
 
 import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
 import { delay } from '@app/common/utils';
@@ -67,7 +68,7 @@ function LedgerSignStacksMsg({ account, unsignedMessage }: LedgerSignMsgProps) {
     const stacksApp = await prepareLedgerDeviceStacksAppConnection({
       setLoadingState: setAwaitingDeviceConnection,
       onError(e) {
-        if (e instanceof Error && checkLockedDeviceError(e)) {
+        if (isError(e) && checkLockedDeviceError(e)) {
           setLatestDeviceResponse({ deviceLocked: true } as any);
           return;
         }

src/app/features/ledger/flows/stacks-tx-signing/ledger-sign-stacks-tx-container.tsx

@@ -7,6 +7,7 @@ import get from 'lodash.get';
 
 import { logger } from '@shared/logger';
 import { RouteUrls } from '@shared/route-urls';
+import { isError } from '@shared/utils';
 
 import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
 import { appEvents } from '@app/common/publish-subscribe';
@@ -71,7 +72,7 @@ function LedgerSignStacksTxContainer() {
     const stacksApp = await prepareLedgerDeviceStacksAppConnection({
       setLoadingState: setAwaitingDeviceConnection,
       onError(e) {
-        if (e instanceof Error && checkLockedDeviceError(e)) {
+        if (isError(e) && checkLockedDeviceError(e)) {
           setLatestDeviceResponse({ deviceLocked: true } as any);
           return;
         }
@@ -148,7 +149,7 @@ function LedgerSignStacksTxContainer() {
           signedTx,
         });
       } catch (e) {
-        ledgerNavigate.toBroadcastErrorStep(e instanceof Error ? e.message : 'Unknown error');
+        ledgerNavigate.toBroadcastErrorStep(isError(e) ? e.message : 'Unknown error');
         return;
       }
     } catch (e) {

src/app/features/ledger/generic-flows/request-keys/use-request-ledger-keys.ts

@@ -4,6 +4,7 @@ import StacksApp from '@zondax/ledger-stacks';
 import AppClient from 'ledger-bitcoin';
 
 import { SupportedBlockchains } from '@shared/constants';
+import { isError } from '@shared/utils';
 
 import { delay } from '@app/common/utils';
 
@@ -73,7 +74,7 @@ export function useRequestLedgerKeys<App extends AppClient | StacksApp>({
       onSuccess?.();
     } catch (e) {
       setAwaitingDeviceConnection(false);
-      if (e instanceof Error && checkLockedDeviceError(e)) {
+      if (isError(e) && checkLockedDeviceError(e)) {
         setLatestDeviceResponse({ deviceLocked: true } as any);
         return;
       }