From 37937b8bec551eff111820cd25c032686c372f60 Mon Sep 17 00:00:00 2001 From: IvanMahda Date: Mon, 9 Dec 2024 21:07:21 +0200 Subject: [PATCH] Add tooltip component --- .../MainLayout/Header/Header.scss | 16 +++++ .../Header/components/Connection.tsx | 5 +- .../page-layouts/MainLayout/Header/i18n/en.ts | 4 ++ .../popup/popupX/pages/MainPage/MainPage.scss | 19 ++++++ .../popup/popupX/pages/MainPage/MainPage.tsx | 15 +++-- .../popup/popupX/pages/MainPage/i18n/en.ts | 4 ++ .../popup/popupX/shared/Tooltip/Tooltip.scss | 61 +++++++++++++++++++ .../popup/popupX/shared/Tooltip/Tooltip.tsx | 27 ++++++++ .../src/popup/popupX/shared/Tooltip/index.ts | 1 + .../src/popup/popupX/styles/_colors.scss | 1 + .../src/popup/popupX/styles/_elements.scss | 1 + 11 files changed, 149 insertions(+), 5 deletions(-) create mode 100644 packages/browser-wallet/src/popup/popupX/shared/Tooltip/Tooltip.scss create mode 100644 packages/browser-wallet/src/popup/popupX/shared/Tooltip/Tooltip.tsx create mode 100644 packages/browser-wallet/src/popup/popupX/shared/Tooltip/index.ts 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 index c5cd6bd5..489be9da 100644 --- 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/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/Connection.tsx b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/Connection.tsx index 5f26d623..0f25c889 100644 --- a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/Connection.tsx +++ b/packages/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) { {connectionText} - + + + ); 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 index 34106777..3943871d 100644 --- 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 index 765f58ee..d2764545 100644 --- 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 index 7cff7794..7b7bb67c 100644 --- 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 (
- - {ccdBalance} CCD - +
+ + {ccdBalance} CCD + + + + +
{ccdAvailableBalance} {t('atDisposal')} 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 index 20ec4201..caf3e1ea 100644 --- 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 new file mode 100644 index 00000000..68f95a1e --- /dev/null +++ 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 new file mode 100644 index 00000000..a0b71a97 --- /dev/null +++ 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 ( +
+ + {title} + {text} + + {children} +
+ ); +} diff --git a/packages/browser-wallet/src/popup/popupX/shared/Tooltip/index.ts b/packages/browser-wallet/src/popup/popupX/shared/Tooltip/index.ts new file mode 100644 index 00000000..cdc0fab1 --- /dev/null +++ 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 index c5b8983e..b482d875 100644 --- 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 index e8d0de11..94808ca2 100644 --- 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';