fix: deisgn for SuccessStep when notification failed

trilitech · Feb 13, 2025 · 16f31e5 · 16f31e5
1 parent d428a8e
commit 16f31e5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 15 deletions.
diff --git a/apps/web/src/components/SendFlow/SuccessStep.test.tsx b/apps/web/src/components/SendFlow/SuccessStep.test.tsx
@@ -21,15 +21,10 @@ describe("<SuccessStep />", () => {
   it("renders warning message when dAppNotificationError is present", async () => {
     await renderInModal(<SuccessStep dAppNotificationError="testError" hash="testHash" />);
 
-    expect(screen.getByTestId("success-no-notify-text")).toHaveTextContent(
-      "Transaction was performed successfully and stored on the blockchain. However, the dApp was not notified."
-    );
     expect(screen.getByTestId("do-not-retry-text")).toHaveTextContent(
-      "Do not retry this operation — it has already been completed. You may need to reload the dApp page to see the updated status."
-    );
-    expect(screen.getByTestId("dapp-noticaition-error")).toHaveTextContent(
-      "Error on dApp notification: testError"
+      "Do not retry this operation; it has already been processed. You may need to reload the dApp to see the updated status."
     );
+    expect(screen.getByTestId("dapp-noticaition-error")).toHaveTextContent("testError");
     expect(screen.getByTestId("success-text")).toHaveTextContent(
       "You can follow this operation's progress in the Operations section. It may take up to 30 seconds to appear."
     );

diff --git a/apps/web/src/components/SendFlow/SuccessStep.tsx b/apps/web/src/components/SendFlow/SuccessStep.tsx
@@ -35,7 +35,7 @@ export const SuccessStep = ({
 
   const getIconAndHeader = (): StepData => {
     if (dAppNotificationError) {
-      return [AlertTriangleIcon, color("orange"), "Operation Submitted but dApp Not Notified"];
+      return [AlertTriangleIcon, color("red"), "Operation submitted but dApp not notified"];
     }
 
     return [CheckCircleIcon, color("green"), "Operation Submitted"];
@@ -48,16 +48,12 @@ export const SuccessStep = ({
     if (dAppNotificationError) {
       return (
         <>
-          <Text data-testid="success-no-notify-text" size="md">
-            Transaction was performed successfully and stored on the blockchain. However, the dApp
-            was not notified.
-          </Text>
           <Text marginTop="12px" data-testid="do-not-retry-text" size="md">
-            <strong>Do not retry this operation</strong> — it has already been completed. You may
-            need to reload the dApp page to see the updated status.
+            Do <strong>not</strong> retry this operation; it has already been processed. You may
+            need to reload the dApp to see the updated status.
           </Text>
           <Text marginTop="12px" data-testid="dapp-noticaition-error" size="md">
-            <strong>Error on dApp notification:</strong> {dAppNotificationError}
+            {dAppNotificationError}
           </Text>
           <Text marginTop="12px" data-testid="success-text" size="md">
             {successText}