frontend: fix tx details behaviour

1. Focus trap to include dialog's header for tx detail
dialog. This way, the note input doesn't get auto focused.

2. Changed translations: Send to Sent, and Receive to Received

Author: shonsirsha

frontends/web/src/components/dialog/dialog.tsx

@@ -31,6 +31,7 @@ type TProps = {
   onClose?: () => void;
   children: React.ReactNode;
   open: boolean;
+  focusTrapIncludesHeader?: boolean;
 };
 
 export const Dialog = ({
@@ -43,6 +44,7 @@ export const Dialog = ({
   onClose,
   children,
   open,
+  focusTrapIncludesHeader = false,
 }: TProps) => {
   const [isVisible, setIsVisible] = useState(false);
   const [status, setStatus] = useState<'idle' | 'opening' | 'open' | 'closing'>('idle');
@@ -165,7 +167,7 @@ export const Dialog = ({
       className={overlayClass}
     >
       <UseBackButton handler={closeHandler} />
-      <div className={modalClass}>
+      <div className={modalClass} ref={focusTrapIncludesHeader ? contentRef : undefined}>
         {title && (
           <div className={headerClass}>
             <h3 className={style.title}>{title}</h3>
@@ -177,7 +179,7 @@ export const Dialog = ({
             )}
           </div>
         )}
-        <div className={contentClass} ref={contentRef}>
+        <div className={contentClass} ref={!focusTrapIncludesHeader ? contentRef : undefined}>
           <div className={style.content}>{children}</div>
         </div>
       </div>

frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.tsx

@@ -87,7 +87,8 @@ export const TxDetailsDialog = ({
       title={t('transaction.details.title')}
       onClose={onClose}
       slim
-      medium>
+      medium
+      focusTrapIncludesHeader>
       {transactionInfo && (
         <div className={styles.container}>
           <TxDetailHeader

frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-header.tsx

@@ -88,9 +88,9 @@ const StatusAndSign = ({
   const fromSignToText = () => {
     switch (type) {
     case 'send':
-      return t('generic.send');
+      return t('generic.sent');
     case 'receive':
-      return t('generic.receiveWithoutCoinCode');
+      return t('generic.received');
     case 'send_to_self':
       return t('transaction.details.sendToSelf');
     }

frontends/web/src/locales/en/app.json

@@ -887,6 +887,7 @@
     "paymentRequestNote": "{{name}} payment {{orderId}}",
     "receive": "Receive {{coinCode}}",
     "receiveWithoutCoinCode": "Receive",
+    "received": "Received",
     "receive_bitcoin": "Receive Bitcoin",
     "receive_crypto": "Receive crypto",
     "reset": "Reset",
@@ -897,6 +898,7 @@
     "sell_bitcoin": "Sell Bitcoin",
     "sell_crypto": "Sell crypto",
     "send": "Send",
+    "sent": "Sent",
     "spend_bitcoin": "Spend bitcoin",
     "spend_crypto": "Spend crypto"
   },
@@ -1993,4 +1995,4 @@
     "message": "Please connect your BitBox and tap the side to continue.",
     "title": "Welcome"
   }
-}
+}