From 35cf335305cfd88ab89868ae20f627e88a0662b0 Mon Sep 17 00:00:00 2001
From: odiseus <20369369+odiseusme@users.noreply.github.com>
Date: Wed, 15 Apr 2026 22:18:55 +0300
Subject: [PATCH] fix: use Id component for txId display in watcher actions
 (#9)

---
 apps/watcher/src/app/actions/@form/lock/page.tsx    | 11 +++++------
 apps/watcher/src/app/actions/@form/unlock/page.tsx  | 13 ++++++-------
 .../watcher/src/app/actions/@form/withdraw/page.tsx | 12 +++++-------
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/apps/watcher/src/app/actions/@form/lock/page.tsx b/apps/watcher/src/app/actions/@form/lock/page.tsx
index 22a25a795..6645bc8d7 100644
--- a/apps/watcher/src/app/actions/@form/lock/page.tsx
+++ b/apps/watcher/src/app/actions/@form/lock/page.tsx
@@ -7,7 +7,7 @@ import {
   AlertCard,
   AlertProps,
   ApiKeyModalWarning,
-  Link,
+  Id,
   Stack,
   SubmitButton,
   Typography,
@@ -111,12 +111,11 @@ const LockForm = () => {
           message: (
             <>
               Lock operation is in progress. Wait for tx [
-              <Link
-                target="_blank"
+              <Id
+                id={response.txId}
+                indicator="middle"
                 href={getTxURL(NETWORKS.ergo.key, response.txId)}
-              >
-                {response.txId}
-              </Link>
+              />
               ] to be confirmed by some blocks, so your new permits will be
               activated.
             </>
diff --git a/apps/watcher/src/app/actions/@form/unlock/page.tsx b/apps/watcher/src/app/actions/@form/unlock/page.tsx
index af8c24b1e..c071d2881 100644
--- a/apps/watcher/src/app/actions/@form/unlock/page.tsx
+++ b/apps/watcher/src/app/actions/@form/unlock/page.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import Link from 'next/link';
 import { useMemo, useState, useEffect, ReactNode } from 'react';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 
 import {
   AlertCard,
   AlertProps,
+  Id,
   SubmitButton,
   useApiKey,
   ApiKeyModalWarning,
@@ -133,12 +133,11 @@ const UnlockForm = () => {
           message: (
             <>
               Unlock operation is in progress. Wait for tx [
-              <Link
-                target="_blank"
-                href={getTxURL(NETWORKS.ergo.key, response.txId) ?? '/'}
-              >
-                {response.txId}
-              </Link>
+              <Id
+                id={response.txId}
+                indicator="middle"
+                href={getTxURL(NETWORKS.ergo.key, response.txId)}
+              />
               ] to be confirmed by some blocks.
             </>
           ),
diff --git a/apps/watcher/src/app/actions/@form/withdraw/page.tsx b/apps/watcher/src/app/actions/@form/withdraw/page.tsx
index c4fd371d7..e35c4ba58 100644
--- a/apps/watcher/src/app/actions/@form/withdraw/page.tsx
+++ b/apps/watcher/src/app/actions/@form/withdraw/page.tsx
@@ -20,7 +20,6 @@ import {
   TextField,
   useApiKey,
   ApiKeyModalWarning,
-  Link,
   Stack,
 } from '@rosen-bridge/ui-kit';
 import { NETWORKS, TOKEN_NAME_PLACEHOLDER } from '@rosen-ui/constants';
@@ -145,12 +144,11 @@ const WithdrawForm = () => {
           message: (
             <>
               Withdrawal is successful. Wait for tx [
-              <Link
-                target="_blank"
-                href={getTxURL(NETWORKS.ergo.key, response.txId) ?? ''}
-              >
-                {response.txId}
-              </Link>
+              <Id
+                id={response.txId}
+                indicator="middle"
+                href={getTxURL(NETWORKS.ergo.key, response.txId)}
+              />
               ] to be confirmed.
             </>
           ),