From 9d39a1494f05d5112390f0b19c42bfbbb5451d1e Mon Sep 17 00:00:00 2001
From: Danylo Honcharenko <danylo@codecraftsmen.io>
Date: Tue, 22 Aug 2023 19:38:58 +0200
Subject: [PATCH 1/3] MessageTimeline stages link added

---
 src/messages/MessageTimeline.tsx | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/messages/MessageTimeline.tsx b/src/messages/MessageTimeline.tsx
index 04b415b..67113f2 100644
--- a/src/messages/MessageTimeline.tsx
+++ b/src/messages/MessageTimeline.tsx
@@ -6,6 +6,7 @@ import { EnvelopeIcon } from '../icons/Envelope';
 import { LockIcon } from '../icons/Lock';
 import { ShieldIcon } from '../icons/Shield';
 import { WideChevron } from '../icons/WideChevron';
+import { getTxExplorerUrl } from '../utils/explorers';
 
 import { MessageStatus, MessageStage as Stage, StageTimings } from './types';
 
@@ -15,6 +16,7 @@ interface Props {
   timings: StageTimings;
   timestampSent?: number;
   hideDescriptions?: boolean;
+  chainId: number;
 }
 
 export function MessageTimeline({
@@ -23,6 +25,7 @@ export function MessageTimeline({
   timings,
   timestampSent,
   hideDescriptions,
+  chainId,
 }: Props) {
   // Ignore stage value if status shows as delivered
   const stage = status === MessageStatus.Delivered ? Stage.Relayed : _stage;
@@ -31,10 +34,18 @@ export function MessageTimeline({
   const timeSentStr = timeSent
     ? `${timeSent.toLocaleDateString()} ${timeSent.toLocaleTimeString()}`
     : null;
+  const link = getTxExplorerUrl(chainId);
+
+  const onStageClickHandler = () => {
+    if (link) window.open(link, '_blank', 'noreferrer');
+  };
 
   return (
     <div className="htw-pt-14 htw-pb-1 htw-flex htw-w-full">
-      <div className={styles.stageContainer}>
+      <div
+        onClick={onStageClickHandler}
+        className={`${styles.stageContainer} ${link ? 'htw-cursor-pointer' : 'htw-cursor-auto'}`}
+      >
         <div
           className={`${styles.stageBar} htw-rounded-l ${getStageOpacityClass(
             Stage.Sent,
@@ -59,7 +70,10 @@ export function MessageTimeline({
         )}
       </div>
       <div className={styles.stageSpacer}></div>
-      <div className={styles.stageContainer}>
+      <div
+        onClick={onStageClickHandler}
+        className={`${styles.stageContainer} ${link ? 'htw-cursor-pointer' : 'htw-cursor-auto'}`}
+      >
         <div
           className={`${styles.stageBar} ${getStageOpacityClass(Stage.Finalized, stage, status)}`}
         >
@@ -79,7 +93,10 @@ export function MessageTimeline({
         )}
       </div>
       <div className={styles.stageSpacer}></div>
-      <div className={styles.stageContainer}>
+      <div
+        onClick={onStageClickHandler}
+        className={`${styles.stageContainer} ${link ? 'htw-cursor-pointer' : 'htw-cursor-auto'}`}
+      >
         <div
           className={`${styles.stageBar} ${getStageOpacityClass(Stage.Validated, stage, status)}`}
         >
@@ -99,7 +116,10 @@ export function MessageTimeline({
         )}
       </div>
       <div className={styles.stageSpacer}></div>
-      <div className={styles.stageContainer}>
+      <div
+        onClick={onStageClickHandler}
+        className={`${styles.stageContainer} ${link ? 'htw-cursor-pointer' : 'htw-cursor-auto'}`}
+      >
         <div
           className={`${styles.stageBar} htw-rounded-r ${getStageOpacityClass(
             Stage.Relayed,

From 81135fcd7c5d50be1a8af32d7b94d2400f022c64 Mon Sep 17 00:00:00 2001
From: Danylo Honcharenko <danylo@codecraftsmen.io>
Date: Tue, 22 Aug 2023 19:58:16 +0200
Subject: [PATCH 2/3] MessageTimeLine updated

---
 src/messages/MessageTimeline.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/messages/MessageTimeline.tsx b/src/messages/MessageTimeline.tsx
index 67113f2..76340d5 100644
--- a/src/messages/MessageTimeline.tsx
+++ b/src/messages/MessageTimeline.tsx
@@ -6,7 +6,6 @@ import { EnvelopeIcon } from '../icons/Envelope';
 import { LockIcon } from '../icons/Lock';
 import { ShieldIcon } from '../icons/Shield';
 import { WideChevron } from '../icons/WideChevron';
-import { getTxExplorerUrl } from '../utils/explorers';
 
 import { MessageStatus, MessageStage as Stage, StageTimings } from './types';
 
@@ -16,7 +15,7 @@ interface Props {
   timings: StageTimings;
   timestampSent?: number;
   hideDescriptions?: boolean;
-  chainId: number;
+  externalLink: string;
 }
 
 export function MessageTimeline({
@@ -25,7 +24,7 @@ export function MessageTimeline({
   timings,
   timestampSent,
   hideDescriptions,
-  chainId,
+  externalLink,
 }: Props) {
   // Ignore stage value if status shows as delivered
   const stage = status === MessageStatus.Delivered ? Stage.Relayed : _stage;
@@ -34,17 +33,18 @@ export function MessageTimeline({
   const timeSentStr = timeSent
     ? `${timeSent.toLocaleDateString()} ${timeSent.toLocaleTimeString()}`
     : null;
-  const link = getTxExplorerUrl(chainId);
 
   const onStageClickHandler = () => {
-    if (link) window.open(link, '_blank', 'noreferrer');
+    if (externalLink) window.open(externalLink, '_blank', 'noreferrer');
   };
 
   return (
     <div className="htw-pt-14 htw-pb-1 htw-flex htw-w-full">
       <div
         onClick={onStageClickHandler}
-        className={`${styles.stageContainer} ${link ? 'htw-cursor-pointer' : 'htw-cursor-auto'}`}
+        className={`${styles.stageContainer} ${
+          externalLink ? 'htw-cursor-pointer' : 'htw-cursor-auto'
+        }`}
       >
         <div
           className={`${styles.stageBar} htw-rounded-l ${getStageOpacityClass(
@@ -72,7 +72,9 @@ export function MessageTimeline({
       <div className={styles.stageSpacer}></div>
       <div
         onClick={onStageClickHandler}
-        className={`${styles.stageContainer} ${link ? 'htw-cursor-pointer' : 'htw-cursor-auto'}`}
+        className={`${styles.stageContainer} ${
+          externalLink ? 'htw-cursor-pointer' : 'htw-cursor-auto'
+        }`}
       >
         <div
           className={`${styles.stageBar} ${getStageOpacityClass(Stage.Finalized, stage, status)}`}
@@ -95,7 +97,9 @@ export function MessageTimeline({
       <div className={styles.stageSpacer}></div>
       <div
         onClick={onStageClickHandler}
-        className={`${styles.stageContainer} ${link ? 'htw-cursor-pointer' : 'htw-cursor-auto'}`}
+        className={`${styles.stageContainer} ${
+          externalLink ? 'htw-cursor-pointer' : 'htw-cursor-auto'
+        }`}
       >
         <div
           className={`${styles.stageBar} ${getStageOpacityClass(Stage.Validated, stage, status)}`}
@@ -118,7 +122,9 @@ export function MessageTimeline({
       <div className={styles.stageSpacer}></div>
       <div
         onClick={onStageClickHandler}
-        className={`${styles.stageContainer} ${link ? 'htw-cursor-pointer' : 'htw-cursor-auto'}`}
+        className={`${styles.stageContainer} ${
+          externalLink ? 'htw-cursor-pointer' : 'htw-cursor-auto'
+        }`}
       >
         <div
           className={`${styles.stageBar} htw-rounded-r ${getStageOpacityClass(

From 87f0d37759723f2982d5094d5dc515dc847f68d0 Mon Sep 17 00:00:00 2001
From: Danylo Honcharenko <danylo@codecraftsmen.io>
Date: Tue, 22 Aug 2023 19:59:09 +0200
Subject: [PATCH 3/3] Cleanup

---
 src/messages/MessageTimeline.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/messages/MessageTimeline.tsx b/src/messages/MessageTimeline.tsx
index 76340d5..24e435a 100644
--- a/src/messages/MessageTimeline.tsx
+++ b/src/messages/MessageTimeline.tsx
@@ -15,7 +15,7 @@ interface Props {
   timings: StageTimings;
   timestampSent?: number;
   hideDescriptions?: boolean;
-  externalLink: string;
+  externalLink?: string;
 }
 
 export function MessageTimeline({