how to buy joy complete

Joystream · Sep 1, 2023 · cf020fd · cf020fd
1 parent c91b637
commit cf020fd
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 3 deletions.
diff --git 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 = () => {
             <PageTitle>My Profile</PageTitle>
             <MyProfileTabs />
           </PageHeaderWrapper>
+          {!shouldDismissBanner && <BannerSection setShouldDismissBanner={setShouldDismissBanner} />}
           {!shouldHideStatistics && (
             <Statistics>
               <TokenValueStat {...hints.total} value={total} />

diff --git a/packages/ui/src/app/pages/Profile/components/BannerSection.tsx 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 (
+    <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{' '}
+        <a href="https://www.mexc.com/exchange/JOYSTREAM_USDT?_from=market" target="_blank">
+          MEXC exchange{' '}
+        </a>
+        under "JOYSTREAM" ticker.
+      </TextMedium>
+      <TextLink href="https://www.joystream.org/token/" 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;
+`
diff --git 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<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',
@@ -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
@@ -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() {
       <MemberBalance>
         <BalanceTitle>Total Balance</BalanceTitle>
         <TotalBalance>
-          <TotalTokenValue value={total} />
+          <TokenDetail>
+            <TotalTokenValue value={total} />
+            <Tooltip
+              className={'popper-light'}
+              tooltipLinkText="Learn how to earn JOY’s"
+              tooltipLinkURL="https://www.joystream.org/token/"
+              placement="top-start"
+            >
+              <StyledDefaultTooltip>
+                <QuestionIcon />
+              </StyledDefaultTooltip>
+            </Tooltip>
+          </TokenDetail>
           <TextSmall>
             <BuyTokenLink href="https://www.joystream.org/token" target="_blank">
               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;
+`