YPP rewards fix (#4347)

* changed YPP rewards

---------

Co-authored-by: Artem <Artem Slugin>

packages/atlas/src/components/JoyTokenIcon/JoyTokenIcon.tsx

@@ -18,8 +18,10 @@ import {
   SvgJoyTokenSilver48,
 } from '@/assets/icons'
 import { Tooltip } from '@/components/Tooltip'
+import { TooltipText } from '@/components/Tooltip/Tooltip.styles'
 import { atlasConfig } from '@/config'
 import { cVar } from '@/styles'
+import { Anchor } from '@/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.styles'
 
 type JoyTokenIconVariant = 'primary' | 'silver' | 'regular' | 'gray'
 type JoyTokenIconSize = 16 | 24 | 32 | 48
@@ -70,8 +72,19 @@ export const JoyTokenIcon: FC<JoyTokenIconProps> = ({
   return (
     <>
       <Tooltip
+        interactive
         hidden={withoutInformationTooltip}
-        text={`${atlasConfig.joystream.tokenTicker} 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.`}
+        customContent={
+          <TooltipText as="span" variant="t100">
+            {atlasConfig.joystream.tokenTicker} 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{' '}
+            <Anchor href="https://www.mexc.com/exchange/JOYSTREAM_USDT" target="__blank">
+              MEXC
+            </Anchor>{' '}
+            exchange under JOYSTREAM ticker
+          </TooltipText>
+        }
         multiline
         reference={ref.current}
         delay={1000}

packages/atlas/src/components/NumberFormat/NumberFormat.tsx

@@ -100,15 +100,10 @@ const numberCompactFormatter = new Intl.NumberFormat('en-US', {
   maximumFractionDigits: 2,
 })
 
-const dollarFormatter = new Intl.NumberFormat('en-US', {
-  style: 'currency',
-  currency: 'USD',
-})
-
 const dollarSmallNumberFormatter = new Intl.NumberFormat('en-US', {
   style: 'currency',
   currency: 'USD',
-  minimumSignificantDigits: 2,
+  minimumSignificantDigits: 1,
   maximumSignificantDigits: 3,
 })
 
@@ -116,5 +111,4 @@ const formatNumberShort = (num: number): string => {
   return numberCompactFormatter.format(num).replaceAll(',', ' ')
 }
 
-const formatDollars = (num: number) =>
-  (num >= 1 ? dollarFormatter.format(num) : dollarSmallNumberFormatter.format(num)).replaceAll(',', ' ')
+const formatDollars = (num: number) => dollarSmallNumberFormatter.format(num).replaceAll(',', ' ')

packages/atlas/src/views/global/YppLandingView/YppRewardSection.styles.ts

@@ -2,7 +2,8 @@ import styled from '@emotion/styled'
 
 import { GridItem } from '@/components/LayoutGrid'
 import { Button } from '@/components/_buttons/Button'
-import { sizes } from '@/styles'
+import { cVar, sizes } from '@/styles'
+import { Anchor } from '@/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.styles'
 
 export const BenefitsCardButton = styled(Button)`
   border-radius: 999px;
@@ -27,3 +28,20 @@ export const BenefitsCardsContainerGridItem = styled(GridItem)`
   display: grid;
   gap: ${sizes(4)};
 `
+
+export const ColorAnchor = styled(Anchor)`
+  color: ${cVar('colorTextPrimary')};
+`
+
+export const RewardsSubtitleGridItem = styled(GridItem)`
+  display: grid;
+  gap: ${sizes(4)};
+  margin-top: ${sizes(8)};
+`
+
+export const RewardsSubtitleWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+`

packages/atlas/src/views/global/YppLandingView/YppRewardSection.tsx

@@ -1,8 +1,10 @@
-import { FC, useState } from 'react'
+import { FC, useRef, useState } from 'react'
 
+import { Information } from '@/components/Information'
 import { LayoutGrid } from '@/components/LayoutGrid'
 import { NumberFormat } from '@/components/NumberFormat'
 import { Text } from '@/components/Text'
+import { TooltipText } from '@/components/Tooltip/Tooltip.styles'
 import { BenefitCard } from '@/components/_ypp/BenefitCard'
 import { atlasConfig } from '@/config'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
@@ -17,6 +19,9 @@ import {
   BenefitsCardButton,
   BenefitsCardsButtonsGroup,
   BenefitsCardsContainerGridItem,
+  ColorAnchor,
+  RewardsSubtitleGridItem,
+  RewardsSubtitleWrapper,
 } from './YppRewardSection.styles'
 
 export const YppRewardSection: FC = () => {
@@ -24,6 +29,7 @@ export const YppRewardSection: FC = () => {
   const tiers = atlasConfig.features.ypp.tiersDefinition?.tiers
   const rewards = atlasConfig.features.ypp.rewards
   const [rewardMultiplier, setRewardMultiplier] = useState<number>(tiers ? tiers[tiers.length - 1].multiplier : 1)
+  const ref = useRef<HTMLDivElement>(null)
 
   if (!rewards?.length) {
     return null
@@ -159,6 +165,30 @@ export const YppRewardSection: FC = () => {
               )
             })}
           </BenefitsCardsContainerGridItem>
+          <RewardsSubtitleGridItem colStart={{ base: 6 }} colSpan={{ base: 7, lg: 6 }}>
+            <RewardsSubtitleWrapper>
+              <Text variant="t200" as="p" color="colorText" margin={{ right: 1 }}>
+                Payments are made in {atlasConfig.joystream.tokenTicker} tokens
+              </Text>
+              <Information
+                interactive
+                customContent={
+                  <TooltipText as="span" variant="t100">
+                    {atlasConfig.joystream.tokenTicker} 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{' '}
+                    <ColorAnchor href="https://www.mexc.com/exchange/JOYSTREAM_USDT" target="__blank">
+                      MEXC
+                    </ColorAnchor>{' '}
+                    exchange under "JOYSTREAM" ticker.
+                  </TooltipText>
+                }
+                multiline
+                reference={ref.current}
+                delay={1000}
+              />
+            </RewardsSubtitleWrapper>
+          </RewardsSubtitleGridItem>
         </LayoutGrid>
       </StyledLimitedWidthContainer>
     </BackgroundContainer>