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 ( {toast.title} - {toast.message} + {toast.type === "success" ? ( + + {successMessage} + + ) : ( + {toast.message} + )} onClose(id)}> 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 = {