Merge pull request #3019 from dusk-network/feature-2991

web-wallet: Change "Transaction Created" copy

web-wallet/CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Suggested words in the Mnemonic (Authenticate) are accessible using Tab [#2879]
 - Enhance Allocate flow on full amount allocation [#2938]
 - Broken link in the stake warning [#2990]
+- Change "Transaction created" copy [#2991]
 - Fix Dashboard navigation menu padding [#3000]
 
 ## [0.7.0] - 2024-11-11
@@ -345,6 +346,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2932]: https://github.com/dusk-network/rusk/issues/2932
 [#2938]: https://github.com/dusk-network/rusk/issues/2938
 [#2990]: https://github.com/dusk-network/rusk/issues/2990
+[#2991]: https://github.com/dusk-network/rusk/issues/2991
 [#3000]: https://github.com/dusk-network/rusk/issues/3000
 [#3006]: https://github.com/dusk-network/rusk/issues/3006
 

web-wallet/src/lib/components/Allocate/Allocate.svelte

@@ -23,6 +23,7 @@
   import { GasFee, GasSettings, OperationResult } from "$lib/components";
   import { walletStore } from "$lib/stores";
   import { Gas } from "$lib/vendor/w3sper.js/src/mod";
+  import { MESSAGES } from "$lib/constants";
   import Banner from "../Banner/Banner.svelte";
 
   /** @type {(amount: number) => string} */
@@ -329,9 +330,10 @@
         errorMessage="Transaction failed"
         operation={allocate()}
         pendingMessage="Processing transaction"
-        successMessage="Transaction completed"
+        successMessage="Transaction created"
       >
         <svelte:fragment slot="success-content" let:result={hash}>
+          <p>{MESSAGES.TRANSACTION_CREATED}</p>
           {#if hash}
             <AnchorButton
               href={`/explorer/transactions/transaction?id=${hash}`}

web-wallet/src/lib/components/OperationResult/OperationResult.svelte

@@ -42,7 +42,7 @@
 >
   <svelte:fragment slot="success-content" let:result>
     <Icon path={mdiCheckDecagramOutline} size="large" />
-    <span>{successMessage}</span>
+    <b>{successMessage}</b>
     <slot name="success-content" {result} />
     <AppAnchorButton
       href="/dashboard"

web-wallet/src/lib/components/Send/Send.svelte

@@ -32,6 +32,7 @@
     OperationResult,
     ScanQR,
   } from "$lib/components";
+  import { MESSAGES } from "$lib/constants";
 
   /** @type {(to: string, amount: number, gasPrice: bigint, gasLimit: bigint) => Promise<string>} */
   export let execute;
@@ -358,9 +359,10 @@
         errorMessage="Transaction failed"
         operation={execute(address, amount, gasPrice, gasLimit)}
         pendingMessage="Processing transaction"
-        successMessage="Transaction completed"
+        successMessage="Transaction created"
       >
         <svelte:fragment slot="success-content" let:result={hash}>
+          <p>{MESSAGES.TRANSACTION_CREATED}</p>
           {#if hash}
             <AnchorButton
               href={`/explorer/transactions/transaction?id=${hash}`}

web-wallet/src/lib/components/Stake/Stake.svelte

@@ -9,7 +9,7 @@
     mdiDatabaseOutline,
   } from "@mdi/js";
 
-  import { DOCUMENTATION_LINKS } from "$lib/constants";
+  import { DOCUMENTATION_LINKS, MESSAGES } from "$lib/constants";
   import { areValidGasSettings, deductLuxFeeFrom } from "$lib/contracts";
   import { duskToLux, luxToDusk } from "$lib/dusk/currency";
   import { logo } from "$lib/dusk/icons";
@@ -365,9 +365,10 @@
           ? execute(duskToLux(stakeAmount), gasPrice, gasLimit)
           : execute(gasPrice, gasLimit)}
         pendingMessage="Processing transaction"
-        successMessage="Transaction completed"
+        successMessage="Transaction created"
       >
         <svelte:fragment slot="success-content" let:result={hash}>
+          <p>{MESSAGES.TRANSACTION_CREATED}</p>
           {#if hash}
             <AnchorButton
               href={`/explorer/transactions/transaction?id=${hash}`}

web-wallet/src/lib/components/__tests__/OperationResult.spec.js

@@ -54,7 +54,7 @@ describe("OperationResult", () => {
   it("should accept a custom message for the successful state", async () => {
     const props = {
       ...baseProps,
-      successMessage: "Transaction completed",
+      successMessage: "Transaction created",
     };
 
     const { container } = render(OperationResult, { ...baseOptions, props });

web-wallet/src/lib/components/__tests__/Send.spec.js

@@ -279,7 +279,7 @@ describe("Send", () => {
 
       const explorerLink = getByRole("link", { name: /explorer/i });
 
-      expect(getByText("Transaction completed")).toBeInTheDocument();
+      expect(getByText("Transaction created")).toBeInTheDocument();
       expect(explorerLink).toHaveAttribute("target", "_blank");
       expect(explorerLink).toHaveAttribute("href", expectedExplorerLink);
     });
@@ -336,7 +336,7 @@ describe("Send", () => {
         baseProps.gasSettings.gasPrice,
         baseProps.gasSettings.gasLimit
       );
-      expect(getByText("Transaction completed")).toBeInTheDocument();
+      expect(getByText("Transaction created")).toBeInTheDocument();
       expect(() => getByRole("link", { name: /explorer/i })).toThrow();
     });
   });

web-wallet/src/lib/components/__tests__/Stake.spec.js

@@ -248,7 +248,7 @@ describe("Stake", () => {
 
       const explorerLink = getByRole("link", { name: /explorer/i });
 
-      expect(getByText("Transaction completed")).toBeInTheDocument();
+      expect(getByText("Transaction created")).toBeInTheDocument();
       expect(explorerLink).toHaveAttribute("target", "_blank");
       expect(explorerLink).toHaveAttribute("href", expectedExplorerLink);
     });
@@ -294,7 +294,7 @@ describe("Stake", () => {
         baseProps.gasSettings.gasPrice,
         baseProps.gasSettings.gasLimit
       );
-      expect(getByText("Transaction completed")).toBeInTheDocument();
+      expect(getByText("Transaction created")).toBeInTheDocument();
       expect(() => getByRole("link", { name: /explorer/i })).toThrow();
     });
   });
@@ -328,7 +328,7 @@ describe("Stake", () => {
 
       const explorerLink = getByRole("link", { name: /explorer/i });
 
-      expect(getByText("Transaction completed")).toBeInTheDocument();
+      expect(getByText("Transaction created")).toBeInTheDocument();
       expect(explorerLink).toHaveAttribute("target", "_blank");
       expect(explorerLink).toHaveAttribute("href", expectedExplorerLink);
     });
@@ -380,7 +380,7 @@ describe("Stake", () => {
 
       const explorerLink = getByRole("link", { name: /explorer/i });
 
-      expect(getByText("Transaction completed")).toBeInTheDocument();
+      expect(getByText("Transaction created")).toBeInTheDocument();
       expect(explorerLink).toHaveAttribute("target", "_blank");
       expect(explorerLink).toHaveAttribute("href", expectedExplorerLink);
     });

web-wallet/src/lib/components/__tests__/__snapshots__/OperationResult.spec.js.snap

@@ -105,9 +105,9 @@ exports[`OperationResult > should accept a custom message for the successful sta
   </svg>
   
    
-  <span>
-    Transaction completed
-  </span>
+  <b>
+    Transaction created
+  </b>
    
    
   <a
@@ -230,9 +230,9 @@ exports[`OperationResult > should be able to render the \`OperationResult\` in a
   </svg>
   
    
-  <span>
+  <b>
     Operation completed
-  </span>
+  </b>
    
    
   <a

web-wallet/src/lib/constants/index.js

@@ -1 +1,2 @@
 export { DOCUMENTATION_LINKS } from "./documentationLinks";
+export { MESSAGES } from "./messages";

web-wallet/src/lib/constants/messages.js

@@ -0,0 +1,3 @@
+export const MESSAGES = {
+  TRANSACTION_CREATED: `Your transaction is now in the mempool and awaiting confirmation on the blockchain. The Web Wallet will update automatically once it’s added to the chain.`,
+};