From 13496a0a066bebb6f8d8b4ef72e25a00f7f347ac Mon Sep 17 00:00:00 2001
From: Thebora Kompanioni <theborakompanioni@users.noreply.github.com>
Date: Mon, 26 Sep 2022 12:26:36 +0200
Subject: [PATCH] feat(send): show txid on successful direct-send (#510)

---
 src/components/Send.jsx              | 12 +++++++++---
 src/i18n/locales/en/translation.json |  2 +-
 src/i18n/locales/fr/translation.json |  2 +-
 src/index.css                        |  4 ++++
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/Send.jsx b/src/components/Send.jsx
index e0320698c..eba1d7e1e 100644
--- a/src/components/Send.jsx
+++ b/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 && (
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 2b0882a9c..0f9a84de1 100644
--- a/src/i18n/locales/en/translation.json
+++ b/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",
diff --git a/src/i18n/locales/fr/translation.json b/src/i18n/locales/fr/translation.json
index 6a85a517c..745d7f41c 100644
--- a/src/i18n/locales/fr/translation.json
+++ b/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",
diff --git a/src/index.css b/src/index.css
index 191982d1d..6a76392b8 100644
--- a/src/index.css
+++ b/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;