refactor tooltip api

gear-tech · Dec 19, 2024 · 59bd3d6 · 59bd3d6
1 parent 2d4e83f
commit 59bd3d6
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 36 deletions.
diff --git a/frontend/src/components/tooltip/tooltip.module.scss b/frontend/src/components/tooltip/tooltip.module.scss
@@ -4,25 +4,25 @@
 }
 
 .container {
-  display: flex;
-
   position: relative;
 
-  svg {
-    transition: 0.25s opacity;
-
-    &:hover {
-      opacity: 0.75;
-    }
-  }
-
   &:hover {
     .tooltip {
       opacity: 1;
     }
+
+    .body {
+      opacity: 0.75;
+    }
   }
 }
 
+.body {
+  display: flex;
+
+  transition: 0.25s opacity;
+}
+
 .tooltip {
   position: absolute;
 

diff --git a/frontend/src/components/tooltip/tooltip.tsx b/frontend/src/components/tooltip/tooltip.tsx
@@ -8,24 +8,20 @@ import { Skeleton } from '../layout';
 import QuestionSVG from './question.svg?react';
 import styles from './tooltip.module.scss';
 
-type BaseProps = {
-  text?: string;
-  children?: ReactNode;
+type Props = {
+  value?: ReactNode;
   position?: 'top' | 'bottom-end';
   SVG?: SVGComponent;
+  children?: ReactNode;
 };
 
-type TextProps = BaseProps & { text: string };
-type ChildrenProps = BaseProps & { children: ReactNode };
-type Props = TextProps | ChildrenProps;
-
-function Tooltip({ text, children, position = 'top', SVG = QuestionSVG }: Props) {
+function Tooltip({ value, position = 'top', SVG = QuestionSVG, children }: Props) {
   return (
     <div className={styles.container}>
-      <SVG />
+      <div className={styles.body}>{children || <SVG />}</div>
 
       <div className={cx(styles.tooltip, styles[position])}>
-        {text ? <p className={styles.heading}>{text}</p> : children}
+        {typeof value === 'string' ? <p className={styles.heading}>{value}</p> : value}
       </div>
     </div>
   );

diff --git a/frontend/src/features/swap/components/account-balance/account-balance.tsx b/frontend/src/features/swap/components/account-balance/account-balance.tsx
@@ -44,13 +44,18 @@ function AccountBalance({ data: value, isLoading, isVaraNetwork, submit }: Props
       </div>
 
       {isBalanceError && (
-        <Tooltip SVG={DangerSVG}>
-          <p>{error.message}</p>
+        <Tooltip
+          SVG={DangerSVG}
+          value={
+            <>
+              <p>{error.message}</p>
 
-          <p>
-            At least {formatUnits(error.requiredValue, decimals)} {symbol} is needed
-          </p>
-        </Tooltip>
+              <p>
+                At least {formatUnits(error.requiredValue, decimals)} {symbol} is needed
+              </p>
+            </>
+          }
+        />
       )}
     </div>
   );

diff --git a/frontend/src/features/swap/components/ft-allowance-tip/ft-allowance-tip.tsx b/frontend/src/features/swap/components/ft-allowance-tip/ft-allowance-tip.tsx
@@ -35,15 +35,19 @@ function FTAllowanceTip({ allowance, decimals, symbol, amount, isVaraNetwork, is
   };
 
   return (
-    <Tooltip>
-      <p className={styles.heading}>
-        {allowance > 0
-          ? `You have already approved ${formattedAllowance} ${symbol} to the ${contractName} contract.`
-          : `You don't have any approved tokens to the ${contractName} contract yet.`}
-      </p>
-
-      <p className={styles.subheading}>{getSubheading()}</p>
-    </Tooltip>
+    <Tooltip
+      value={
+        <>
+          <p className={styles.heading}>
+            {allowance > 0
+              ? `You have already approved ${formattedAllowance} ${symbol} to the ${contractName} contract.`
+              : `You don't have any approved tokens to the ${contractName} contract yet.`}
+          </p>
+
+          <p className={styles.subheading}>{getSubheading()}</p>
+        </>
+      }
+    />
   );
 }
 

diff --git a/frontend/src/features/token-tracker/components/token-tracker/token-tracker.tsx b/frontend/src/features/token-tracker/components/token-tracker/token-tracker.tsx
@@ -26,7 +26,7 @@ function TokenTracker() {
         </button>
 
         {Boolean(lockedBalance) && (
-          <Tooltip SVG={WarningSVG} text="You have tokens available to unlock" position="bottom-end" />
+          <Tooltip SVG={WarningSVG} value="You have tokens available to unlock" position="bottom-end" />
         )}
       </div>