chore: add better analytics for broadcast errors

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/pages/send/broadcast-error/broadcast-error.tsx

@@ -10,7 +10,6 @@ import { BroadcastErrorLayout } from './components/broadcast-error.layout';
 export function BroadcastError() {
   const { state } = useLocation();
   const analytics = useAnalytics();
-  // PETE this must be it as we are trying to get something from the state\?
   const msg = get(state, 'error.message', 'Unknown error response');
   const title = get(state, 'title', 'There was an error broadcasting your transaction');
   const body = get(state, 'body', 'Unable to broadcast transaction');

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

@@ -197,7 +197,7 @@ export function BtcSendFormConfirmation() {
         <Stack pb="space.06" px="space.06" width="100%">
           <InfoCardRow
             title="To"
-            value={<FormAddressDisplayer address={recipient} />} // maybe here pete? could this crash if no address???? probablynot
+            value={<FormAddressDisplayer address={recipient} />}
             data-testid={SendCryptoAssetSelectors.ConfirmationDetailsRecipient}
           />
           <InfoCardSeparator />

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>
       ))}