From 3562a2c52597e563fee627dc6333284608d285c9 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Wed, 15 May 2024 15:44:34 +0100
Subject: [PATCH] chore: add better analytics for broadcast errors

---
 .../address-displayer/form-address-displayer.tsx         | 9 ++++-----
 src/app/pages/send/broadcast-error/broadcast-error.tsx   | 1 -
 .../form/btc/btc-send-form-confirmation.tsx              | 2 +-
 .../components/address-displayer/address-displayer.tsx   | 8 +++-----
 4 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/app/components/address-displayer/form-address-displayer.tsx b/src/app/components/address-displayer/form-address-displayer.tsx
index e75e82cfa30..17b5e30aef9 100644
--- a/src/app/components/address-displayer/form-address-displayer.tsx
+++ b/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>
   );
 }
diff --git a/src/app/pages/send/broadcast-error/broadcast-error.tsx b/src/app/pages/send/broadcast-error/broadcast-error.tsx
index a4013459c20..092f61f7ed6 100644
--- a/src/app/pages/send/broadcast-error/broadcast-error.tsx
+++ b/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');
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx
index e3b9596a687..1a0bde4a3f3 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx
+++ b/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 />
diff --git a/src/app/ui/components/address-displayer/address-displayer.tsx b/src/app/ui/components/address-displayer/address-displayer.tsx
index 160c66b0b12..cc27d202f96 100644
--- a/src/app/ui/components/address-displayer/address-displayer.tsx
+++ b/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>
       ))}