Feat: adding txh display in toast notification

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;

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" />

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();

apps/namada-interface/src/slices/notifications/reducers.ts

@@ -64,16 +64,18 @@ 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]: {
         title: `${txTypeLabel} ${success ? "confirmed" : "rejected"}`,
         message: success ? "Transaction completed!" : error,
         type: success ? "success" : "error",
         timeout: ToastTimeout.Default(),
+        innerTxHash,
       },
     };
   },

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 = {