From 30650296002454fa84e120179f745da08c785c2b Mon Sep 17 00:00:00 2001
From: Rye Nguyen <ryenguyen7411@gmail.com>
Date: Tue, 29 Aug 2023 23:19:53 +0700
Subject: [PATCH] feat: enable interactive tooltip

---
 .../scenes/Main/Explorer/Browser/index.tsx    |  1 +
 .../scenes/Main/Explorer/StatsInfo/index.tsx  | 33 +++++++++++--------
 .../scenes/Main/SwapLegacy/SwapFees/index.tsx | 11 ++++---
 .../Main/SwapLegacy/SwapFees/styled.tsx       |  5 +++
 4 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/modules/scenes/Main/Explorer/Browser/index.tsx b/src/modules/scenes/Main/Explorer/Browser/index.tsx
index ebe24f14..8822b745 100644
--- a/src/modules/scenes/Main/Explorer/Browser/index.tsx
+++ b/src/modules/scenes/Main/Explorer/Browser/index.tsx
@@ -95,6 +95,7 @@ export const Browser = () => {
             </Tooltip.Content>
           }
           data-testid="tooltip"
+          interactive={true}
         >
           <IconInfo />
         </Tooltip>
diff --git a/src/modules/scenes/Main/Explorer/StatsInfo/index.tsx b/src/modules/scenes/Main/Explorer/StatsInfo/index.tsx
index fe588ccc..8bcf9a89 100644
--- a/src/modules/scenes/Main/Explorer/StatsInfo/index.tsx
+++ b/src/modules/scenes/Main/Explorer/StatsInfo/index.tsx
@@ -239,26 +239,31 @@ export const StatsInfo = () => {
                             content={
                               <Tooltip.Content>
                                 <Text variant="accent">
-                                  <a
-                                    href="https://app.swingby.network/liquidity"
-                                    target="_blank"
-                                    rel="noreferrer"
-                                  >
-                                    Deposit liquidity
-                                  </a>
+                                  <ValidatorLinkSpan>
+                                    <a
+                                      href="https://app.swingby.network/liquidity"
+                                      target="_blank"
+                                      rel="noreferrer"
+                                    >
+                                      Deposit liquidity
+                                    </a>
+                                  </ValidatorLinkSpan>
                                   &nbsp; and then stake the LP tokens in the&nbsp;
-                                  <a
-                                    href="https://farm.swingby.network"
-                                    target="_blank"
-                                    rel="noreferrer"
-                                  >
-                                    Farm
-                                  </a>
+                                  <ValidatorLinkSpan>
+                                    <a
+                                      href="https://farm.swingby.network"
+                                      target="_blank"
+                                      rel="noreferrer"
+                                    >
+                                      Farm
+                                    </a>
+                                  </ValidatorLinkSpan>
                                   .
                                 </Text>
                               </Tooltip.Content>
                             }
                             data-testid="tooltip"
+                            interactive={true}
                           >
                             <IconInfo />
                           </Tooltip>
diff --git a/src/modules/scenes/Main/SwapLegacy/SwapFees/index.tsx b/src/modules/scenes/Main/SwapLegacy/SwapFees/index.tsx
index e1aa5c61..7b131bf1 100644
--- a/src/modules/scenes/Main/SwapLegacy/SwapFees/index.tsx
+++ b/src/modules/scenes/Main/SwapLegacy/SwapFees/index.tsx
@@ -8,7 +8,6 @@ import { useDispatch } from 'react-redux';
 import { TTxRawObject } from '../../../../explorer';
 import { useSdkContext } from '../../../../sdk-context';
 import { toggleIsExistPreviousPage } from '../../../../store';
-import { TextPrimary } from '../../../Common';
 import { swingbyTextDisplay } from '../../../../coins';
 
 import {
@@ -21,6 +20,7 @@ import {
   SwapFeesContainer,
   TitleText,
   Top,
+  TextPrimary,
 } from './styled';
 
 interface Props {
@@ -57,13 +57,16 @@ export const SwapFees = (props: Props) => {
             content={
               <Tooltip.Content>
                 <FormattedMessage id="swap.node-explanation1" />
-                <TextPrimary>
-                  <FormattedMessage id="common.click" />
-                </TextPrimary>
+                <Link href="/fees">
+                  <TextPrimary>
+                    <FormattedMessage id="common.click" />
+                  </TextPrimary>
+                </Link>
                 <FormattedMessage id="swap.node-explanation2" />
               </Tooltip.Content>
             }
             data-testid="tooltip"
+            interactive={true}
           >
             <Link href="/fees">
               <IconInfo onClick={() => dispatch(toggleIsExistPreviousPage(true))} />
diff --git a/src/modules/scenes/Main/SwapLegacy/SwapFees/styled.tsx b/src/modules/scenes/Main/SwapLegacy/SwapFees/styled.tsx
index 643089a7..a7d99a61 100644
--- a/src/modules/scenes/Main/SwapLegacy/SwapFees/styled.tsx
+++ b/src/modules/scenes/Main/SwapLegacy/SwapFees/styled.tsx
@@ -3,6 +3,7 @@ import { rem } from 'polished';
 import styled from 'styled-components';
 
 import { StylingConstants } from '../../../../styles';
+import { TextPrimary as CommonTextPrimary } from '../../../Common';
 
 const { media } = StylingConstants;
 
@@ -64,3 +65,7 @@ export const Center = styled.div`
   justify-content: space-between;
   align-items: center;
 `;
+
+export const TextPrimary = styled(CommonTextPrimary)`
+  cursor: pointer;
+`;