Add tooltip component

Concordium · Dec 9, 2024 · 37937b8 · 37937b8
1 parent a59886b
commit 37937b8
Show file tree

Hide file tree

Showing 11 changed files with 149 additions and 5 deletions.
diff --git a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/Header.scss b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/Header.scss
@@ -91,6 +91,22 @@
                 background: unset;
             }
 
+            .info-icon {
+                margin-top: rem(1px);
+                cursor: pointer;
+
+                .tooltip-x_text.top {
+                    top: rem(24px);
+                    left: rem(-187px);
+                    text-wrap: auto;
+                    width: rem(205px);
+
+                    &::after {
+                        left: 91%;
+                    }
+                }
+            }
+
             & .connection_status {
                 display: flex;
                 align-items: center;

diff --git a/.../browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/Connection.tsx b/.../browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/Connection.tsx
@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import { Location, useLocation } from 'react-router-dom';
 import { relativeRoutes } from '@popup/popupX/constants/routes';
 import Text from '@popup/popupX/shared/Text';
+import Tooltip from '@popup/popupX/shared/Tooltip';
 
 type Props = {
     hideConnection?: boolean;
@@ -57,7 +58,9 @@ export default function Connection({ hideConnection }: Props) {
                     <Dot />
                     <Text.Capture>{connectionText}</Text.Capture>
                 </span>
-                <Info />
+                <Tooltip position="top" title={t('tooltip.title')} text={t('tooltip.text')} className="info-icon">
+                    <Info />
+                </Tooltip>
             </div>
         </div>
     );

diff --git a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/en.ts b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/en.ts
@@ -20,6 +20,10 @@ const t = {
     connection: {
         siteNotConnected: 'No website connected',
         waiting: 'Waiting',
+        tooltip: {
+            title: 'Connect dApps',
+            text: 'You can connect you wallet to a\ndApp. An active connection will be\nshown here.',
+        },
     },
 };
 

diff --git a/packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.scss b/packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.scss
@@ -23,6 +23,25 @@
         flex-direction: column;
         align-items: flex-start;
 
+        &_info {
+            display: flex;
+
+            .info-icon {
+                height: rem(12px);
+                margin: rem(8px) 0 0 rem(8px);
+                cursor: pointer;
+
+                .tooltip-x_text.top {
+                    top: rem(24px);
+                    left: rem(-194px);
+
+                    &::after {
+                        left: 90%;
+                    }
+                }
+            }
+        }
+
         .heading_large {
             font-family: $t-font-family-ibm;
         }

diff --git a/packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.tsx b/packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.tsx
@@ -11,6 +11,7 @@ import { useFlattenedAccountTokens } from '@popup/pages/Account/Tokens/utils';
 import { getMetadataUnique } from '@shared/utils/token-helpers';
 import { contractBalancesFamily } from '@popup/store/token';
 import { useBlockChainParameters } from '@popup/shared/BlockChainParametersProvider';
+import { formatTokenAmount } from '@popup/popupX/shared/utils/helpers';
 import Page from '@popup/popupX/shared/Page';
 import Text from '@popup/popupX/shared/Text';
 import Button from '@popup/popupX/shared/Button';
@@ -21,7 +22,8 @@ import ConcordiumLogo from '@assets/svgX/concordium-logo.svg';
 import Percent from '@assets/svgX/percent.svg';
 import Gear from '@assets/svgX/gear.svg';
 import Dot from '@assets/svgX/dot.svg';
-import { formatTokenAmount } from '@popup/popupX/shared/utils/helpers';
+import Info from '@assets/svgX/info.svg';
+import Tooltip from '@popup/popupX/shared/Tooltip';
 
 /** Hook loading every fungible token added to the account. */
 function useAccountFungibleTokens(account: WalletCredential) {
@@ -75,9 +77,14 @@ function Balance({ credential }: { credential: WalletCredential }) {
 
     return (
         <div className="main-page-x__balance">
-            <Text.DynamicSize baseFontSize={55} baseTextLength={10} className="heading_large">
-                {ccdBalance} CCD
-            </Text.DynamicSize>
+            <div className="main-page-x__balance_info">
+                <Text.DynamicSize baseFontSize={55} baseTextLength={10} className="heading_large">
+                    {ccdBalance} CCD
+                </Text.DynamicSize>
+                <Tooltip position="top" title={t('tooltip.title')} text={t('tooltip.text')} className="info-icon">
+                    <Info />
+                </Tooltip>
+            </div>
             <Text.Capture>
                 {ccdAvailableBalance} {t('atDisposal')}
             </Text.Capture>

diff --git a/packages/browser-wallet/src/popup/popupX/pages/MainPage/i18n/en.ts b/packages/browser-wallet/src/popup/popupX/pages/MainPage/i18n/en.ts
@@ -7,6 +7,10 @@ const t = {
     pendingAccount: 'Creating account',
     pendingSubText: 'Ready within a few minutes',
     atDisposal: 'CCD at disposal',
+    tooltip: {
+        title: 'Total CCD balance',
+        text: 'This balance shows your total CCD in\nthis account. It does not include any\nother tokens.',
+    },
 };
 
 export default t;
diff --git a/packages/browser-wallet/src/popup/popupX/shared/Tooltip/Tooltip.scss b/packages/browser-wallet/src/popup/popupX/shared/Tooltip/Tooltip.scss
@@ -0,0 +1,61 @@
+.tooltip-x {
+    position: relative;
+
+    &:hover {
+        .tooltip-x_text {
+            visibility: visible;
+        }
+    }
+
+    &_text {
+        display: flex;
+        flex-direction: column;
+        gap: rem(6px);
+        visibility: hidden;
+        background-color: $color-tooltip-bg;
+        text-wrap: nowrap;
+        text-align: left;
+        border-radius: 6px;
+        padding: rem(12px);
+        position: absolute;
+        z-index: 1;
+        left: -108px;
+        top: 28px;
+
+        &::after {
+            content: '';
+            position: absolute;
+            border-left: 8px solid $color-tooltip-bg;
+            border-right: 6px solid $color-tooltip-bg;
+            border-top: 8px solid $color-tooltip-bg;
+            border-bottom: 6px solid $color-tooltip-bg;
+            border-top-left-radius: 1px;
+        }
+
+        &.top {
+            top: 100%;
+
+            &::after {
+                top: -5%;
+                left: 50%;
+                transform: rotate(45deg) skew(10deg, 10deg);
+            }
+        }
+
+        &.bottom {
+            top: unset;
+            left: unset;
+
+            &::after {
+                top: 90%;
+                left: 50%;
+                transform: rotate(225deg) skew(10deg, 10deg);
+            }
+        }
+
+        .text__main_medium,
+        .capture__main_small {
+            color: $color-black;
+        }
+    }
+}
diff --git a/packages/browser-wallet/src/popup/popupX/shared/Tooltip/Tooltip.tsx b/packages/browser-wallet/src/popup/popupX/shared/Tooltip/Tooltip.tsx
@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+import clsx from 'clsx';
+import Text from '@popup/popupX/shared/Text';
+
+export default function Tooltip({
+    title,
+    text,
+    className,
+    position = 'top',
+    children,
+}: {
+    title?: string;
+    text?: string;
+    className?: string;
+    position?: 'top' | 'bottom';
+    children: ReactNode;
+}) {
+    return (
+        <div className={clsx('tooltip-x', className)}>
+            <span className={clsx('tooltip-x_text', position)}>
+                <Text.MainMedium>{title}</Text.MainMedium>
+                <Text.Capture>{text}</Text.Capture>
+            </span>
+            {children}
+        </div>
+    );
+}
diff --git a/packages/browser-wallet/src/popup/popupX/shared/Tooltip/index.ts b/packages/browser-wallet/src/popup/popupX/shared/Tooltip/index.ts
@@ -0,0 +1 @@
+export { default } from './Tooltip';
diff --git a/packages/browser-wallet/src/popup/popupX/styles/_colors.scss b/packages/browser-wallet/src/popup/popupX/styles/_colors.scss
@@ -20,6 +20,7 @@ $color-bg: #101010;
 $color-main-bg: rgba($color-white, 0.07);
 $color-main-bg-hover: rgba($color-white, 0.15);
 $secondary-button-bg: rgba(#1c3a41, 0.07);
+$color-tooltip-bg: #f8f6f5;
 $gradient-header-button-bg: linear-gradient(rgb(255 255 255 / 50%), rgb(255 255 255 / 50%)),
     radial-gradient(200% 380% at -10% -50%, rgb(158 242 235) 0%, rgb(164 154 227) 100%);
 $gradient-card-bg: linear-gradient(0deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 70%)),

diff --git a/packages/browser-wallet/src/popup/popupX/styles/_elements.scss b/packages/browser-wallet/src/popup/popupX/styles/_elements.scss
@@ -48,6 +48,7 @@
 @import '../shared/BinaryDisplay/BinaryDisplay';
 @import '../shared/TokenList/TokenList';
 @import '../shared/Text/Text';
+@import '../shared/Tooltip/Tooltip';
 @import '../shared/Loader/Loader';
 @import '../shared/IdCard/IdCard';
 @import '../shared/PasswordProtect/PasswordProtect';