chore: add defensive code and better analytics for broadcast errors, …

…ref #5143

src/app/components/address-displayer/form-address-displayer.tsx

@@ -1,12 +1,12 @@
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
-import { Box, BoxProps } from 'leather-styles/jsx';
+import { Box } from 'leather-styles/jsx';
 
 import { AddressDisplayer } from '@app/ui/components/address-displayer/address-displayer';
 
-interface FormAddressDisplayerProps extends BoxProps {
+interface FormAddressDisplayerProps {
   address: string;
 }
-export function FormAddressDisplayer({ address, ...rest }: FormAddressDisplayerProps) {
+export function FormAddressDisplayer({ address }: FormAddressDisplayerProps) {
   return (
     <Box
       data-testid={SharedComponentsSelectors.AddressDisplayer}
@@ -15,9 +15,8 @@ export function FormAddressDisplayer({ address, ...rest }: FormAddressDisplayerP
       justifyContent="end"
       maxWidth="300px"
       mr="-8px"
-      {...rest}
     >
-      <AddressDisplayer address={address} />
+      {address && <AddressDisplayer address={address} />}
     </Box>
   );
 }

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

@@ -7,6 +7,7 @@ import get from 'lodash.get';
 
 import { RouteUrls } from '@shared/route-urls';
 import { delay, isError } from '@shared/utils';
+import { analytics } from '@shared/utils/analytics';
 
 import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
 import { appEvents } from '@app/common/publish-subscribe';
@@ -129,7 +130,15 @@ function LedgerSignStacksTxContainer() {
           signedTx,
         });
       } catch (e) {
-        ledgerNavigate.toBroadcastErrorStep(isError(e) ? e.message : 'Unknown error');
+        const error = isError(e) ? e.message : 'Unknown error';
+        void analytics.track('ledger_transaction_publish_error', {
+          error: {
+            message: error,
+            error: e,
+          },
+        });
+
+        ledgerNavigate.toBroadcastErrorStep(error);
         return;
       }
     },

src/app/pages/send/ordinal-inscription/send-inscription-review.tsx

@@ -64,6 +64,7 @@ export function SendInscriptionReview() {
         });
       },
       onError(e) {
+        void analytics.track('broadcast_ordinal_transaction_error', { error: e });
         navigate(`/${RouteUrls.SendOrdinalInscription}/${RouteUrls.SendOrdinalInscriptionError}`, {
           state: {
             error: e,

src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form-confirmation.tsx

@@ -98,6 +98,10 @@ export function Brc20SendFormConfirmation() {
         });
       },
       onError(e) {
+        void analytics.track('broadcast_brc20_transaction_error', {
+          error: e,
+        });
+
         nav.toErrorPage(e);
       },
     });

src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx

@@ -138,6 +138,9 @@ export function BtcSendFormConfirmation() {
         );
       },
       onError(e) {
+        void analytics.track('btc_transaction_broadcast_error', {
+          error: e,
+        });
         nav.toErrorPage(e);
       },
     });

src/app/query/stacks/bns/bns.utils.ts

@@ -140,6 +140,7 @@ export async function fetchNamesForAddress({
 export async function fetchNameOwner(client: StacksClient, name: string, isTestnet: boolean) {
   const fetchFromApi = async () => {
     const res = await client.namesApi.getNameInfo({ name });
+    if (isUndefined(res.address)) return null;
     if (!isString(res.address) || res.address.length === 0) return null;
     return res.address;
   };

src/app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks.ts

@@ -122,6 +122,7 @@ export function useCurrentAccountNativeSegwitAddressIndexZero() {
  */
 export function useNativeSegwitAccountIndexAddressIndexZero(accountIndex: number) {
   const signer = useNativeSegwitSigner(accountIndex)?.(0);
+  // could it be this?
   return signer?.payment.address as string;
 }
 

src/app/ui/components/address-displayer/address-displayer.tsx

@@ -1,18 +1,16 @@
-import type { HTMLStyledProps } from 'leather-styles/types';
-
 import { isEven } from '@app/common/math/helpers';
 
 import { AddressDisplayerLayout } from './address-displayer.layout';
 import { groupByFour } from './address-displayer.utils';
 
-interface AddressDisplayerProps extends HTMLStyledProps<'span'> {
+interface AddressDisplayerProps {
   address: string;
 }
-export function AddressDisplayer({ address, ...props }: AddressDisplayerProps) {
+export function AddressDisplayer({ address }: AddressDisplayerProps) {
   return (
     <>
       {groupByFour(address).map((letterGroup, index) => (
-        <AddressDisplayerLayout key={index} isEven={isEven(index + 1)} {...props}>
+        <AddressDisplayerLayout key={index} isEven={isEven(index + 1)}>
           {letterGroup}
         </AddressDisplayerLayout>
       ))}