From a9aeed09ec2fffc3667565bb31c6bec9f6973913 Mon Sep 17 00:00:00 2001
From: tuantq <tuantq15@gmail.com>
Date: Mon, 8 Apr 2024 15:57:22 +0700
Subject: [PATCH] feat: add txh display in toast notification

---
 .../src/App/Toast/toast.components.ts         |  7 +++++
 apps/namada-interface/src/App/Toast/toast.tsx | 28 ++++++++++++++++++-
 .../extensionEvents/handlers/namada.ts        |  3 +-
 .../src/slices/notifications/reducers.ts      |  4 ++-
 .../src/slices/notifications/types.ts         |  1 +
 5 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/apps/namada-interface/src/App/Toast/toast.components.ts b/apps/namada-interface/src/App/Toast/toast.components.ts
index 2766f48af..4a7273434 100644
--- a/apps/namada-interface/src/App/Toast/toast.components.ts
+++ b/apps/namada-interface/src/App/Toast/toast.components.ts
@@ -77,6 +77,13 @@ export const Message = styled.div`
   text-overflow: ellipsis;
 `;
 
+export const LinkExplorer = styled.a`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-decoration: underline;
+`;
+
 export const CloseToastButton = styled.div`
   cursor: pointer;
   display: flex;
diff --git a/apps/namada-interface/src/App/Toast/toast.tsx b/apps/namada-interface/src/App/Toast/toast.tsx
index 7b14d182c..d357b55ab 100644
--- a/apps/namada-interface/src/App/Toast/toast.tsx
+++ b/apps/namada-interface/src/App/Toast/toast.tsx
@@ -14,11 +14,24 @@ import {
   CloseToastButton,
   Container,
   Content,
+  LinkExplorer,
   Message,
   Title,
   Wrapper,
 } from "./toast.components";
 
+const convertToHiddenString = (
+  str: string,
+  visibleLength: number = 16
+): string => {
+  if (str.length <= visibleLength) {
+    return str;
+  }
+  const head = str.slice(0, visibleLength / 2);
+  const tail = str.slice(-visibleLength / 2);
+  return `${head}...${tail}`;
+};
+
 export const Toasts = (): JSX.Element => {
   const dispatch = useAppDispatch();
 
@@ -69,6 +82,10 @@ export const Toast = ({
       }, timeout.value);
   }, [timeout.kind]);
 
+  // Input the original URL explorer here. Currently, it's a explorer url from SE contest
+  const baseExplorerUrl = "https://namada.valopers.com/transactions/";
+  const successMessage =
+    "Hash: " + convertToHiddenString(toast.innerTxHash ?? "");
   return (
     <Wrapper
       className={toast.type}
@@ -79,7 +96,16 @@ export const Toast = ({
     >
       <Content>
         <Title title={toast.title}>{toast.title}</Title>
-        <Message title={toast.message}>{toast.message}</Message>
+        {toast.type === "success" ? (
+          <LinkExplorer
+            target="_blank"
+            href={baseExplorerUrl + toast.innerTxHash}
+          >
+            {successMessage}
+          </LinkExplorer>
+        ) : (
+          <Message title={toast.message}>{toast.message}</Message>
+        )}
       </Content>
       <CloseToastButton onClick={() => onClose(id)}>
         <Icon name="ChevronRight" />
diff --git a/apps/namada-interface/src/services/extensionEvents/handlers/namada.ts b/apps/namada-interface/src/services/extensionEvents/handlers/namada.ts
index 893645a1d..e49afa2be 100644
--- a/apps/namada-interface/src/services/extensionEvents/handlers/namada.ts
+++ b/apps/namada-interface/src/services/extensionEvents/handlers/namada.ts
@@ -79,7 +79,8 @@ export const NamadaTxCompletedHandler =
         id: msgId,
         txTypeLabel: TxTypeLabel[txType as TxType],
         success,
-        error: payload || "",
+        error: !success ? payload : "",
+        innerTxHash: success ? payload : undefined,
       })
     );
     refreshPublicKeys();
diff --git a/apps/namada-interface/src/slices/notifications/reducers.ts b/apps/namada-interface/src/slices/notifications/reducers.ts
index da7c8edde..3187a191d 100644
--- a/apps/namada-interface/src/slices/notifications/reducers.ts
+++ b/apps/namada-interface/src/slices/notifications/reducers.ts
@@ -64,9 +64,10 @@ export const reducers = {
       txTypeLabel: TxLabel;
       success: boolean;
       error: string;
+      innerTxHash: string;
     }>
   ) {
-    const { error, id, success, txTypeLabel } = action.payload;
+    const { error, id, success, txTypeLabel, innerTxHash } = action.payload;
     state.toasts = {
       ...state.toasts,
       [id]: {
@@ -74,6 +75,7 @@ export const reducers = {
         message: success ? "Transaction completed!" : error,
         type: success ? "success" : "error",
         timeout: ToastTimeout.Default(),
+        innerTxHash,
       },
     };
   },
diff --git a/apps/namada-interface/src/slices/notifications/types.ts b/apps/namada-interface/src/slices/notifications/types.ts
index 27344f72f..c57809156 100644
--- a/apps/namada-interface/src/slices/notifications/types.ts
+++ b/apps/namada-interface/src/slices/notifications/types.ts
@@ -56,6 +56,7 @@ export type Toast = {
   message: string;
   type: ToastType;
   timeout: Timeout;
+  innerTxHash?: string;
 };
 
 export type NotificationsState = {