Add how to buy $JOY links (#4513)

* Buy token link

* how to buy joy complete

* requested changes

* Update packages/ui/src/memberships/components/ProfileComponent.tsx

Co-authored-by: Theophile Sandoz <theophile.sandoz@gmail.com>

* requested changes

* requested changes

* link update

---------

Co-authored-by: Theophile Sandoz <theophile.sandoz@gmail.com>

packages/ui/src/app/pages/Profile/MyAccounts.tsx

@@ -8,7 +8,9 @@ import { PageHeaderWrapper, PageLayout } from '@/app/components/PageLayout'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { PageTitle } from '@/common/components/page/PageTitle'
 import { Statistics, TokenValueStat } from '@/common/components/statistics'
+import { useLocalStorage } from '@/common/hooks/useLocalStorage'
 
+import { BannerSection } from './components/BannerSection'
 import { MyProfileTabs } from './components/MyProfileTabs'
 
 const hints = {
@@ -52,6 +54,7 @@ export const MyAccounts = () => {
   const { total, transferable, locked, recoverable, vestingTotal, vestedClaimable, vestingLocked } =
     useMyTotalBalances()
   const { hasAccounts, isLoading } = useMyAccounts()
+  const [shouldDismissBanner, setShouldDismissBanner] = useLocalStorage<boolean>('buy-joy-banner') ?? false
   const shouldHideStatistics = !hasAccounts && !isLoading
 
   return (
@@ -62,6 +65,7 @@ export const MyAccounts = () => {
             <PageTitle>My Profile</PageTitle>
             <MyProfileTabs />
           </PageHeaderWrapper>
+          {!shouldDismissBanner && <BannerSection setShouldDismissBanner={setShouldDismissBanner} />}
           {!shouldHideStatistics && (
             <Statistics>
               <TokenValueStat {...hints.total} value={total} />

packages/ui/src/app/pages/Profile/components/BannerSection.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { CloseButton } from '@/common/components/buttons'
+import { LinkButtonLinkStyles } from '@/common/components/buttons/LinkButtons'
+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 (
+    <Banner gap={8}>
+      <BannerHeader>
+        <BannerTitle>
+          <BannerTooltip>
+            <QuestionIcon />
+          </BannerTooltip>
+          <TextInlineMedium bold={true}>What is Joy Token?</TextInlineMedium>
+        </BannerTitle>
+        <CloseButton onClick={() => setShouldDismissBanner(true)} />
+      </BannerHeader>
+      <TextMedium>
+        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&nbsp;
+        <CustomLinkStyle
+          as={'a'}
+          to={''}
+          href="https://www.mexc.com/exchange/JOYSTREAM_USDT?_from=market"
+          target="_blank"
+          size={'medium'}
+        >
+          <TextInlineMedium>MEXC</TextInlineMedium>
+        </CustomLinkStyle>
+        &nbsp;exchange under "JOYSTREAM" ticker.
+      </TextMedium>
+      <TextLink href="https://www.joystream.org/token#earn" target="_blank">
+        <TextInlineMedium bold={true}>Learn how to earn JOY's</TextInlineMedium> <Arrow size={'24'} direction="right" />
+      </TextLink>
+    </Banner>
+  )
+}
+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;
+`
+const CustomLinkStyle = styled(LinkButtonLinkStyles)`
+  display: inline-flex;
+  // margin-left: 2px;
+  // margin-right: 2px;
+`

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<TooltipPopupProps, 'popUpHandlers' | 'position'> {
   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<HTMLElement | null>(null)
 
   const { styles, attributes } = usePopper(referenceElementRef, popperElementRef, {
-    placement: 'bottom-start',
+    placement: placement || 'bottom-start',
     modifiers: [
       {
         name: 'offset',

packages/ui/src/memberships/components/ProfileComponent.tsx

@@ -1,9 +1,12 @@
 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 { TokenValue } from '../../common/components/typography'
+import { TextSmall, TokenValue } from '../../common/components/typography'
 import { Colors } from '../../common/constants'
 
 import { Memberships } from '.'
@@ -18,7 +21,23 @@ export function ProfileComponent() {
       <MemberBalance>
         <BalanceTitle>Total Balance</BalanceTitle>
         <TotalBalance>
-          <TotalTokenValue value={total} />
+          <TokenDetail>
+            <TotalTokenValue value={total} />
+            <StyledTooltip
+              tooltipLinkText="Learn how to earn JOY’s"
+              tooltipLinkURL="https://www.joystream.org/token#earn"
+              placement="top-start"
+            >
+              <StyledDefaultTooltip>
+                <QuestionIcon />
+              </StyledDefaultTooltip>
+            </StyledTooltip>
+          </TokenDetail>
+          <TextSmall>
+            <BuyTokenLink href="https://www.joystream.org/token/#exchanges" target="_blank">
+              Buy Joy tokens
+            </BuyTokenLink>
+          </TextSmall>
         </TotalBalance>
         <TransferButtonStyled />
       </MemberBalance>
@@ -79,8 +98,33 @@ const TotalBalance = styled.span`
   line-height: 24px;
   color: ${Colors.White};
   font-weight: 700;
+  flex-direction: column;
 `
 
 const TotalTokenValue = styled(TokenValue)`
   color: ${Colors.White};
 `
+const BuyTokenLink = styled.a`
+  color: ${Colors.White};
+  font-weight: 400;
+  text-decoration: underline;
+`
+const TokenDetail = styled.div`
+  display: flex;
+  column-gap: 8px;
+`
+const StyledDefaultTooltip = styled(DefaultTooltip)`
+  margin-top: 4px;
+`
+const StyledTooltip = styled(Tooltip)`
+  background-color: ${Colors.Black[75]};
+  border-color: ${Colors.Black[300]};
+  a {
+    color: ${Colors.Blue[500]};
+    font-weight: 700;
+  }
+  :after {
+    background-color: ${Colors.Black[75]};
+    border-color: ${Colors.Black[300]};
+  }
+`