feat(send): show txid on successful direct-send (#510)

src/components/Send.jsx

@@ -440,12 +440,16 @@ export default function Send() {
 
       if (res.ok) {
         const {
-          txinfo: { outputs, inputs },
+          txinfo: { outputs, inputs, txid },
         } = await res.json()
         const output = outputs.find((o) => o.address === destination)
         setPaymentSuccessfulInfoAlert({
           variant: 'success',
-          message: t('send.alert_payment_successful', { amount: output.value_sats, address: output.address }),
+          message: t('send.alert_payment_successful', {
+            amount: output.value_sats,
+            address: output.address,
+            txid,
+          }),
         })
         setWaitForUtxosToBeSpent(inputs.map((it) => it.outpoint))
         success = true
@@ -712,7 +716,9 @@ export default function Send() {
         )}
 
         {paymentSuccessfulInfoAlert && (
-          <rb.Alert variant={paymentSuccessfulInfoAlert.variant}>{paymentSuccessfulInfoAlert.message}</rb.Alert>
+          <rb.Alert className="small slashed-zeroes break-word" variant={paymentSuccessfulInfoAlert.variant}>
+            {paymentSuccessfulInfoAlert.message}
+          </rb.Alert>
         )}
 
         {!isLoading && !isOperationDisabled && isCoinjoin && !coinjoinPreconditionSummary.isFulfilled && (

src/i18n/locales/en/translation.json

@@ -186,7 +186,7 @@
     "direct_payment_error_message_bad_request": "Please verify your inputs carefully.",
     "error_loading_wallet_failed": "Loading wallet failed.",
     "error_loading_min_makers_failed": "Loading config value 'minimum_makers' failed.",
-    "alert_payment_successful": "Payment successful: Sent {{ amount }} sats to {{ address }}.",
+    "alert_payment_successful": "Payment successful: Sent {{ amount }} sats to {{ address }} in transaction {{ txid }}.",
     "text_maker_running": "Earn is active. Stop the service in order to send collaborative transactions.",
     "text_coinjoin_already_running": "A collaborative transaction is currently in progress.",
     "label_recipient": "Recipient",

src/i18n/locales/fr/translation.json

@@ -160,7 +160,7 @@
     "direct_payment_error_message_bad_request": " Veuillez vérifier soigneusement vos entrées.",
     "error_loading_wallet_failed": "Le chargement du portefeuille a échoué.",
     "error_loading_min_makers_failed": "Le chargement de la valeur de configuration 'minimum_makers' a échoué.",
-    "alert_payment_successful": "Paiement réussi : Envoyé {{ amount }} sats à {{ address }}.",
+    "alert_payment_successful": "Paiement réussi : Envoyé {{ amount }} sats à {{ address }} en transaction {{ txid }}.",
     "text_maker_running": "Générer est actif. Arrêtez le service afin d'envoyer des transactions collaboratives.",
     "text_coinjoin_already_running": "Une transaction collaborative est actuellement en cours.",
     "label_recipient": "Destinataire",

src/index.css

@@ -283,6 +283,10 @@ main {
   -o-font-feature-settings: 'tnum' on, 'lnum' on, 'zero' on, 'case' on, 'calt' off;
 }
 
+.break-word {
+  word-break: break-word;
+}
+
 .unstyled {
   text-decoration: none !important;
   color: inherit !important;