From bf4b4bc4a7b8cf56174c48451597816adb42e42c Mon Sep 17 00:00:00 2001
From: Vitali Karpuk <vitalikkarpuk652@gmail.com>
Date: Tue, 16 Jul 2024 12:39:52 +0300
Subject: [PATCH] added link to transaction

---
 ui/components/atoms/timeline/index.module.css |  2 +-
 ui/components/atoms/timeline/timeline.tsx     | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/ui/components/atoms/timeline/index.module.css b/ui/components/atoms/timeline/index.module.css
index c88eb2b..e288d34 100644
--- a/ui/components/atoms/timeline/index.module.css
+++ b/ui/components/atoms/timeline/index.module.css
@@ -119,7 +119,7 @@
   gap: 4px;
 }
 
-.description span {
+.description a {
   color: #7191fc;
 }
 
diff --git a/ui/components/atoms/timeline/timeline.tsx b/ui/components/atoms/timeline/timeline.tsx
index 32d5b31..2f1d4ff 100644
--- a/ui/components/atoms/timeline/timeline.tsx
+++ b/ui/components/atoms/timeline/timeline.tsx
@@ -11,6 +11,7 @@ import Image from "next/image";
 import { StaticEllipse } from "@/components/molecules/staticEllipse";
 import { DOMAIN_STATUS } from "@/comman/types";
 import { chain } from "@/comman/constants";
+import Link from "next/link";
 
 const getPendingComponent = (message) => (
   <span style={{ display: "flex", alignItems: "center", gap: "12px" }}>
@@ -18,12 +19,12 @@ const getPendingComponent = (message) => (
   </span>
 );
 
-const getDescription = (value) => {
+const getDescription = (value, hash?: string) => {
   const text = value?.match(/[^\d]+/);
   const number = value?.match(/\d+/);
   return (
     <div className={styles.description}>
-      {text} <span>{number}</span>
+      {text} <Link href={`https://minascan.io/${chain}/tx/${hash}`} target="_blank">{number}</Link>
     </div>
   );
 };
@@ -111,7 +112,7 @@ const Timeline: FC<TimelineProps> = ({
             hash: item?.hash,
             statusTime,
             status: "Block Created",
-            description: getDescription(status),
+            description: getDescription(status, item?.hash),
           },
           isLastItem && {
             pendingComponent: getPendingComponent("Validating block.."),
@@ -124,7 +125,7 @@ const Timeline: FC<TimelineProps> = ({
           {
             statusTime,
             status: "Block Validated",
-            description: getDescription(status),
+            description: getDescription(status, item?.hash),
             hash: item?.hash,
           },
           isLastItem && {
@@ -138,7 +139,7 @@ const Timeline: FC<TimelineProps> = ({
           {
             statusTime,
             status: "Block Proved",
-            description: getDescription(status),
+            description: getDescription(status, item?.hash),
             hash: item?.hash,
           },
           isLastItem && DOMAIN_STATUS.ACTIVE !== domainStatus