Merge pull request #1563 from getAlby/task-align-screens

feat: use resultcard in confirmpayment
getAlby · Oct 7, 2022 · 847baf4 · 847baf4
2 parents 22de4d6 + 198bfff
commit 847baf4
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 21 deletions.
diff --git a/src/app/screens/ConfirmPayment/index.tsx b/src/app/screens/ConfirmPayment/index.tsx
@@ -1,9 +1,10 @@
 import BudgetControl from "@components/BudgetControl";
+import Button from "@components/Button";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PaymentSummary from "@components/PaymentSummary";
 import PublisherCard from "@components/PublisherCard";
-import SuccessMessage from "@components/SuccessMessage";
+import ResultCard from "@components/ResultCard";
 import lightningPayReq from "bolt11";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -30,6 +31,7 @@ function ConfirmPayment() {
   const { t: tComponents } = useTranslation("components", {
     keyPrefix: "confirm_or_cancel",
   });
+  const { t: tCommon } = useTranslation("common");
 
   const navState = useNavigationState();
   const paymentRequest = navState.args?.paymentRequest as string;
@@ -82,7 +84,13 @@ function ConfirmPayment() {
       );
       auth.fetchAccountInfo(); // Update balance.
       msg.reply(response);
-      setSuccessMessage(t("success"));
+      setSuccessMessage(
+        t("success", {
+          amount: `${invoice.satoshis} SATS${
+            showFiat ? ` (${fiatAmount})` : ``
+          }`,
+        })
+      );
     } catch (e) {
       console.error(e);
       if (e instanceof Error) toast.error(`Error: ${e.message}`);
@@ -112,7 +120,7 @@ function ConfirmPayment() {
 
   return (
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
-      <ScreenHeader title={t("title")} />
+      <ScreenHeader title={!successMessage ? t("title") : tCommon("success")} />
       {!successMessage ? (
         <Container justifyBetween maxWidth="sm">
           <div>
@@ -157,18 +165,22 @@ function ConfirmPayment() {
           </div>
         </Container>
       ) : (
-        <Container maxWidth="sm">
-          {navState.origin && (
-            <PublisherCard
-              title={navState.origin.name}
-              image={navState.origin.icon}
-              url={navState.origin.host}
-            />
-          )}
+        <Container justifyBetween maxWidth="sm">
+          <ResultCard
+            isSuccess
+            message={
+              !navState.origin
+                ? successMessage
+                : `${invoice.satoshis} SATS ${
+                    showFiat ? `(${fiatAmount})` : ``
+                  } ${tCommon("were_sent_to")} ${navState.origin.name}`
+            }
+          />
           <div className="my-4">
-            <SuccessMessage
-              message={successMessage}
-              onClose={() => window.close()}
+            <Button
+              onClick={() => window.close()}
+              label={tCommon("actions.close")}
+              fullWidth
             />
           </div>
         </Container>

diff --git a/src/app/screens/LNURLPay/index.tsx b/src/app/screens/LNURLPay/index.tsx
@@ -306,7 +306,9 @@ function LNURLPay() {
             isSuccess
             message={`${valueSat} SATS ${
               showFiat ? "(" + fiatValue + ")" : ""
-            } ${t("were_sent_to")} ${navState.origin?.name || getRecipient()}`}
+            } ${tCommon("were_sent_to")} ${
+              navState.origin?.name || getRecipient()
+            }`}
           />
           {isMessage && (
             <dl className="shadow bg-white dark:bg-surface-02dp mt-4 pt-4 px-4 rounded-lg mb-6 overflow-hidden">

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -456,7 +456,6 @@
       }
     },
     "lnurlpay": {
-      "were_sent_to": "were sent to",
       "amount": {
         "label": "Amount"
       },
@@ -579,7 +578,7 @@
     },
     "confirm_payment": {
       "title": "Approve Payment",
-      "success": "Payment sent!",
+      "success": "Payment of {{amount}} successful!",
       "actions": {
         "pay_now": "Pay now"
       }
@@ -599,6 +598,7 @@
     "copied": "Copied!",
     "description": "Description",
     "description_full": "Full Description",
+    "were_sent_to": "were sent to",
     "message": "Message",
     "actions": {
       "back": "Back",

diff --git a/src/i18n/locales/es/translation.json b/src/i18n/locales/es/translation.json
@@ -428,7 +428,7 @@
     },
     "confirm_payment": {
       "title": "Aprobar Pago",
-      "success": "¡Pago enviado!",
+      "success": "¡Pago de {{amount}} exitoso!!",
       "actions": {
         "pay_now": "Pagar Ahora"
       }

diff --git a/src/i18n/locales/pt_BR/translation.json b/src/i18n/locales/pt_BR/translation.json
@@ -486,8 +486,7 @@
       "email": {
         "label": "E-mail"
       },
-      "success": "Sucesso, pagamento enviado!",
-      "were_sent_to": "foram enviados para"
+      "success": "Sucesso, pagamento enviado!"
     },
     "receive": {
       "title": "Receber",
@@ -558,7 +557,7 @@
     },
     "confirm_payment": {
       "title": "Aprovar pagamento",
-      "success": "Pagamento enviado!",
+      "success": "Pagamento de {{amount}} bem-sucedido!",
       "actions": {
         "pay_now": "Pague agora"
       }
@@ -614,6 +613,7 @@
     "optional": "Opcional",
     "feedback": "Feedback",
     "copied": "Copiado!",
+    "were_sent_to": "foram enviados para",
     "actions": {
       "delete": "Remover",
       "edit": "Editar",