From cf020fda88089f0e66d6b636338392b0660e728c Mon Sep 17 00:00:00 2001 From: Victor Date: Fri, 1 Sep 2023 09:06:39 +0100 Subject: [PATCH] how to buy joy complete --- .../ui/src/app/pages/Profile/MyAccounts.tsx | 5 +- .../Profile/components/BannerSection.tsx | 66 +++++++++++++++++++ .../src/common/components/Tooltip/Tooltip.tsx | 18 ++++- .../components/ProfileComponent.tsx | 24 ++++++- 4 files changed, 110 insertions(+), 3 deletions(-) create mode 100644 packages/ui/src/app/pages/Profile/components/BannerSection.tsx diff --git a/packages/ui/src/app/pages/Profile/MyAccounts.tsx b/packages/ui/src/app/pages/Profile/MyAccounts.tsx index 8e9e7d9bc6..a0d041e8f0 100644 --- a/packages/ui/src/app/pages/Profile/MyAccounts.tsx +++ b/packages/ui/src/app/pages/Profile/MyAccounts.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState } from 'react' import { Accounts } from '@/accounts/components/Accounts' import { ClaimVestingButton } from '@/accounts/components/ClaimVestingButton' @@ -9,6 +9,7 @@ import { RowGapBlock } from '@/common/components/page/PageContent' import { PageTitle } from '@/common/components/page/PageTitle' import { Statistics, TokenValueStat } from '@/common/components/statistics' +import { BannerSection } from './components/BannerSection' import { MyProfileTabs } from './components/MyProfileTabs' const hints = { @@ -52,6 +53,7 @@ export const MyAccounts = () => { const { total, transferable, locked, recoverable, vestingTotal, vestedClaimable, vestingLocked } = useMyTotalBalances() const { hasAccounts, isLoading } = useMyAccounts() + const [shouldDismissBanner, setShouldDismissBanner] = useState(false) const shouldHideStatistics = !hasAccounts && !isLoading return ( @@ -62,6 +64,7 @@ export const MyAccounts = () => { My Profile + {!shouldDismissBanner && } {!shouldHideStatistics && ( diff --git a/packages/ui/src/app/pages/Profile/components/BannerSection.tsx b/packages/ui/src/app/pages/Profile/components/BannerSection.tsx new file mode 100644 index 0000000000..374a8d3370 --- /dev/null +++ b/packages/ui/src/app/pages/Profile/components/BannerSection.tsx @@ -0,0 +1,66 @@ +import React from 'react' +import styled from 'styled-components' + +import { CloseButton } from '@/common/components/buttons' +import { Arrow, QuestionIcon } from '@/common/components/icons' +import { RowGapBlock } from '@/common/components/page/PageContent' +import { DefaultTooltip } from '@/common/components/Tooltip' +import { TextInlineMedium, TextMedium } from '@/common/components/typography/Text' +import { Colors } from '@/common/constants' + +interface Props { + setShouldDismissBanner: (bool: boolean) => void +} + +export const BannerSection = ({ setShouldDismissBanner }: Props) => { + return ( + + + + + + + What is Joy Token? + + setShouldDismissBanner(true)} /> + + + JOY token is a native crypto asset of Joystream blockchain. It is used for platform governance, purchasing NFTs, + trading creator tokens, and covering blockchain processing fees. They are listed on{' '} + + MEXC exchange{' '} + + under "JOYSTREAM" ticker. + + + Learn how to earn JOY's + + + ) +} +const Banner = styled(RowGapBlock)` + padding: 16px; + background-color: ${Colors.Blue[50]}; +` +const BannerHeader = styled.div` + display: flex; + justify-content: space-between; +` +const BannerTitle = styled.h6` + display: flex; + column-gap: 8px; +` + +const TextLink = styled.a` + color: ${Colors.Blue[500]}; + display: flex; + column-gap: 8px; + width: 213px; + + ${TextInlineMedium} { + margin: auto 0px; + } +` +const BannerTooltip = styled(DefaultTooltip)` + margin-top: 1px; +` diff --git a/packages/ui/src/common/components/Tooltip/Tooltip.tsx b/packages/ui/src/common/components/Tooltip/Tooltip.tsx index ef35ea3b5b..b2e20cfeee 100644 --- a/packages/ui/src/common/components/Tooltip/Tooltip.tsx +++ b/packages/ui/src/common/components/Tooltip/Tooltip.tsx @@ -11,9 +11,11 @@ import { LinkSymbol, LinkSymbolStyle } from '../icons/symbols' import { DefaultTooltip } from './TooltipDefault' +type TooltipPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' export interface TooltipProps extends Omit { absolute?: boolean maxWidth?: boolean + placement?: TooltipPlacement children: React.ReactNode } @@ -45,6 +47,7 @@ export interface DarkTooltipInnerItemProps { export const Tooltip = ({ absolute, maxWidth, + placement, children, tooltipText, tooltipOpen = false, @@ -64,7 +67,7 @@ export const Tooltip = ({ const [boundaryElement, setBoundaryElement] = useState(null) const { styles, attributes } = usePopper(referenceElementRef, popperElementRef, { - placement: 'bottom-start', + placement: placement || 'bottom-start', modifiers: [ { name: 'offset', @@ -213,6 +216,19 @@ export const TooltipPopupContainer = styled.div<{ isTooltipActive?: boolean; for z-index: -1; } + &.popper-light { + background-color: ${Colors.Black[75]}; + border-color: ${Colors.Black[300]}; + } + &.popper-light a { + color: ${Colors.Blue[500]}; + font-weight: 700; + } + &.popper-light:after { + background-color: ${Colors.Black[75]}; + border-color: ${Colors.Black[300]}; + } + &[data-popper-placement^='top'] { &:after { bottom: -4px; diff --git a/packages/ui/src/memberships/components/ProfileComponent.tsx b/packages/ui/src/memberships/components/ProfileComponent.tsx index 2f18d44f5e..2c93e98726 100644 --- a/packages/ui/src/memberships/components/ProfileComponent.tsx +++ b/packages/ui/src/memberships/components/ProfileComponent.tsx @@ -1,6 +1,9 @@ import React from 'react' import styled from 'styled-components' +import { QuestionIcon } from '@/common/components/icons' +import { Tooltip, DefaultTooltip } from '@/common/components/Tooltip' + import { TransferButtonStyled } from '../../accounts/components/TransferButton' import { useMyTotalBalances } from '../../accounts/hooks/useMyTotalBalances' import { TextSmall, TokenValue } from '../../common/components/typography' @@ -18,7 +21,19 @@ export function ProfileComponent() { Total Balance - + + + + + + + + Buy Joy tokens @@ -94,3 +109,10 @@ const BuyTokenLink = styled.a` color: ${Colors.White}; text-decoration: underline; ` +const TokenDetail = styled.div` + display: flex; + column-gap: 8px; +` +const StyledDefaultTooltip = styled(DefaultTooltip)` + margin-top: 4px; +`