From 3a2942f184d2523da266867aed6ca96b1514611c Mon Sep 17 00:00:00 2001 From: im-adithya Date: Mon, 19 Sep 2022 12:08:00 +0530 Subject: [PATCH 1/4] chore(i18n): remove exclamation --- src/i18n/locales/en/translation.json | 2 +- src/i18n/locales/es/translation.json | 2 +- src/i18n/locales/pt_BR/translation.json | 2 +- tests/e2e/001-createWallets.spec.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json index aec1c6a6da..e7ba0d446e 100644 --- a/src/i18n/locales/en/translation.json +++ b/src/i18n/locales/en/translation.json @@ -472,7 +472,7 @@ }, "common": { "password": "Password", - "success": "Success!", + "success": "Success", "error": "Error", "settings": "Settings", "websites": "Websites", diff --git a/src/i18n/locales/es/translation.json b/src/i18n/locales/es/translation.json index 63beeba607..88c34f5df7 100644 --- a/src/i18n/locales/es/translation.json +++ b/src/i18n/locales/es/translation.json @@ -463,7 +463,7 @@ }, "common": { "password": "Contraseña", - "success": "¡Éxito!", + "success": "Éxito", "error": "Error", "settings": "Ajustes", "websites": "Sitios web", diff --git a/src/i18n/locales/pt_BR/translation.json b/src/i18n/locales/pt_BR/translation.json index 23c72ca3a0..9006eb4d4b 100644 --- a/src/i18n/locales/pt_BR/translation.json +++ b/src/i18n/locales/pt_BR/translation.json @@ -477,7 +477,7 @@ }, "common": { "password": "Senha", - "success": "Sucesso!", + "success": "Sucesso", "error": "Erro", "settings": "Configurações", "websites": "Sites", diff --git a/tests/e2e/001-createWallets.spec.ts b/tests/e2e/001-createWallets.spec.ts index c68410185e..25049e3d2d 100644 --- a/tests/e2e/001-createWallets.spec.ts +++ b/tests/e2e/001-createWallets.spec.ts @@ -61,7 +61,7 @@ const commonCreateWalletSuccessCheck = async ({ page, $document }) => { page.waitForNavigation(), // The promise resolves after navigation has finished ]); - await findByText($document, "Success!", undefined, { timeout: 15000 }); + await findByText($document, "Success", undefined, { timeout: 15000 }); }; test.describe("Create or connect wallets", () => { From 1491886b2c632021736464847c598f4d1698c5eb Mon Sep 17 00:00:00 2001 From: im-adithya Date: Mon, 19 Sep 2022 12:10:36 +0530 Subject: [PATCH 2/4] feat: resultcard component --- src/app/components/ResultCard/index.tsx | 17 +++++++++++++++++ static/assets/icons/cross.svg | 4 ++++ static/assets/icons/tick.svg | 4 ++++ 3 files changed, 25 insertions(+) create mode 100644 src/app/components/ResultCard/index.tsx create mode 100644 static/assets/icons/cross.svg create mode 100644 static/assets/icons/tick.svg diff --git a/src/app/components/ResultCard/index.tsx b/src/app/components/ResultCard/index.tsx new file mode 100644 index 0000000000..6e7e78ceb3 --- /dev/null +++ b/src/app/components/ResultCard/index.tsx @@ -0,0 +1,17 @@ +export type Props = { + isSuccess: boolean; + message: string; +}; + +export default function ResultCard({ message, isSuccess }: Props) { + return ( +
+ {isSuccess +

{message}

+
+ ); +} diff --git a/static/assets/icons/cross.svg b/static/assets/icons/cross.svg new file mode 100644 index 0000000000..e770447c9a --- /dev/null +++ b/static/assets/icons/cross.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/assets/icons/tick.svg b/static/assets/icons/tick.svg new file mode 100644 index 0000000000..a23a0279f4 --- /dev/null +++ b/static/assets/icons/tick.svg @@ -0,0 +1,4 @@ + + + + From f0f0c552d6059e697c89835d14578c43312758b8 Mon Sep 17 00:00:00 2001 From: im-adithya Date: Mon, 19 Sep 2022 12:46:25 +0530 Subject: [PATCH 3/4] feat: use resultcard in lnurlpay screen --- src/app/screens/LNURLPay/index.tsx | 129 +++++++++++++++++---------- src/i18n/locales/en/translation.json | 4 +- 2 files changed, 84 insertions(+), 49 deletions(-) diff --git a/src/app/screens/LNURLPay/index.tsx b/src/app/screens/LNURLPay/index.tsx index 5711aab68c..1df6430bef 100644 --- a/src/app/screens/LNURLPay/index.tsx +++ b/src/app/screens/LNURLPay/index.tsx @@ -2,6 +2,7 @@ import Button from "@components/Button"; import ConfirmOrCancel from "@components/ConfirmOrCancel"; import Container from "@components/Container"; import PublisherCard from "@components/PublisherCard"; +import ResultCard from "@components/ResultCard"; import SatButtons from "@components/SatButtons"; import DualCurrencyField from "@components/form/DualCurrencyField"; import TextField from "@components/form/TextField"; @@ -61,6 +62,8 @@ function LNURLPay() { const [successAction, setSuccessAction] = useState< LNURLPaymentSuccessAction | undefined >(); + const [result, setResult] = useState(""); + const [failureMessage, setFailureMessage] = useState(""); useEffect(() => { if (showFiat) { @@ -130,7 +133,10 @@ function LNURLPay() { } } catch (e) { const message = e instanceof Error ? `(${e.message})` : ""; - toast.error(`Payment aborted: Could not fetch invoice. \n${message}`); + setFailureMessage( + `Payment aborted: Could not fetch invoice. ${message}` + ); + setResult("fail"); return; } @@ -180,6 +186,7 @@ function LNURLPay() { setSuccessAction({ tag: "message", message: t("success") }); } + setResult("success"); auth.fetchAccountInfo(); // Update balance. // ATTENTION: if this LNURL is called through `webln.lnurl` then we immediately return and return the payment response. This closes the window which means the user will NOT see the above successAction. @@ -190,7 +197,10 @@ function LNURLPay() { } catch (e) { console.error(e); if (e instanceof Error) { - toast.error(`Error: ${e.message}`); + setFailureMessage( + `There was an error in processing your transaction. ${e.message}` + ); + setResult("fail"); } } finally { setLoadingConfirm(false); @@ -269,53 +279,76 @@ function LNURLPay() { return []; } - function renderSuccessAction() { - if (!successAction) return; + function header() { + switch (result) { + case "success": + return tCommon("success"); + case "fail": + return tCommon("errors.payment_failed"); + default: + return tCommon("actions.send"); + } + } + + function renderResultAction() { + if (!result) return; + const isSuccess = result === "success"; + const isMessage = + successAction?.tag === "url" || successAction?.tag === "message"; let descriptionList: [string, string | React.ReactNode][] = []; - if (successAction.tag === "url") { - descriptionList = [ - [`${tCommon("description")}`, successAction.description], - [ - "URL", - <> - {successAction.url} -
-
- , - ], - ]; - } else if (successAction.tag === "message") { - descriptionList = [[`${tCommon("message")}`, successAction.message]]; + if (successAction) { + if (successAction.tag === "url") { + descriptionList = [ + [`${tCommon("description")}`, successAction.description], + [ + "URL", + <> + {successAction.url} +
+
+ , + ], + ]; + } else if (successAction.tag === "message") { + descriptionList = [[`${tCommon("message")}`, successAction.message]]; + } } return ( - - - -
- {descriptionList.map(([dt, dd]) => ( - <> -
{dt}
-
{dd}
- - ))} -
- -
- + +
+ + {isMessage && ( +
+ {descriptionList.map(([dt, dd]) => ( + <> +
{dt}
+
{dd}
+ + ))} +
+ )} +
+
+
); @@ -324,8 +357,8 @@ function LNURLPay() { return ( <>
- - {!successAction ? ( + + {!result ? ( <>
@@ -424,7 +457,7 @@ function LNURLPay() {
) : ( - renderSuccessAction() + renderResultAction() )}
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json index e7ba0d446e..e5c2ad8027 100644 --- a/src/i18n/locales/en/translation.json +++ b/src/i18n/locales/en/translation.json @@ -343,6 +343,7 @@ } }, "lnurlpay": { + "were_sent_to": "were sent to", "amount": { "label": "Amount" }, @@ -506,7 +507,8 @@ "copy": "Copy" }, "errors": { - "connection_failed": "Connection failed" + "connection_failed": "Connection failed", + "payment_failed": "Payment Failed" } }, "components": { From 8fcaa7743c075640f2b38315a1a7b5269042b924 Mon Sep 17 00:00:00 2001 From: im-adithya Date: Mon, 26 Sep 2022 16:05:42 +0530 Subject: [PATCH 4/4] chore: add test for resultcard component --- src/app/components/ResultCard/index.test.tsx | 39 ++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/app/components/ResultCard/index.test.tsx diff --git a/src/app/components/ResultCard/index.test.tsx b/src/app/components/ResultCard/index.test.tsx new file mode 100644 index 0000000000..05dd7876e6 --- /dev/null +++ b/src/app/components/ResultCard/index.test.tsx @@ -0,0 +1,39 @@ +import { render, screen } from "@testing-library/react"; +import { MemoryRouter } from "react-router-dom"; + +import type { Props } from "./index"; +import ResultCard from "./index"; + +const successProps: Props = { + isSuccess: true, + message: "Test Successful!", +}; + +const failureProps: Props = { + isSuccess: false, + message: "Test Successful!", +}; + +describe("ResultCard", () => { + test("success render", async () => { + render( + + + + ); + + expect(screen.getByText("Test Successful!")).toBeInTheDocument(); + expect(screen.getByAltText("success")).toBeInTheDocument(); + }); + + test("failure render", async () => { + render( + + + + ); + + expect(screen.getByText("Test Successful!")).toBeInTheDocument(); + expect(screen.getByAltText("failure")).toBeInTheDocument(); + }); +});