😄 Joystream earnings and small fixes (#6316)

* Add earnings to ypp landing page * Change discord links * Usersnap roles test * Revert config changes
Joystream · May 24, 2024 · 4110194 · 4110194
1 parent 66fcc81
commit 4110194
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 54 deletions.
diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml
@@ -45,7 +45,7 @@ features:
     googleConsoleClientId: '$VITE_GOOGLE_CONSOLE_CLIENT_ID'
     youtubeSyncApiUrl: '$VITE_YOUTUBE_SYNC_API_URL'
     suspensionReasonsLink: https://joystream.notion.site/My-channel-is-suspended-what-to-do-86a3df16c55c434ab2184d61dfcfc41b # Link with explanation what might be the reason of ypp channel suspension
-    suspendedSupportLink: https://discord.com/channels/811216481340751934/1053294778529353788 # Link that will be displayed for users suspended in YPP
+    suspendedSupportLink: https://discord.gg/joystream # Link that will be displayed for users suspended in YPP
     suspendedLinkText: '#ypp-support channel on our Discord server'
     youtubeCollaboratorMemberId: '$VITE_YOUTUBE_COLLABORATOR_MEMBER_ID'
     enrollmentReward: 5000 # Amount for successful enrollment in YPP in joystream.tokenTicker units.
@@ -127,7 +127,7 @@ features:
         label: Studio
         icon: tokenStack
       - title: Community
-        link: https://discord.com/channels/811216481340751934/1224709788592767136
+        link: https://discord.gg/joystream
         linkText: Go to Discord
         label: Discord
         icon: message

diff --git a/packages/atlas/src/api/queries/__generated__/baseTypes.generated.ts b/packages/atlas/src/api/queries/__generated__/baseTypes.generated.ts
diff --git a/packages/atlas/src/api/queries/__generated__/nfts.generated.tsx b/packages/atlas/src/api/queries/__generated__/nfts.generated.tsx
diff --git a/packages/atlas/src/api/queries/nfts.graphql b/packages/atlas/src/api/queries/nfts.graphql
@@ -59,3 +59,11 @@ mutation RequestNftFeatured($nftId: String!, $rationale: String!) {
     createdAt
   }
 }
+
+query GetJoystreamTotalEarnings {
+  totalJoystreamEarnings {
+    crtSaleVolume
+    totalRewardsPaid
+    nftSaleVolume
+  }
+}
diff --git a/packages/atlas/src/api/schemas/orion.json b/packages/atlas/src/api/schemas/orion.json
diff --git a/packages/atlas/src/providers/user/user.provider.tsx b/packages/atlas/src/providers/user/user.provider.tsx
@@ -71,9 +71,15 @@ export const UserProvider: FC<PropsWithChildren> = ({ children }) => {
       memberId: currentUser?.membershipId,
       channelId: currentMemberships?.[0].channels[0]?.id,
     }
+    const hasCreatedSingleVideo = currentMemberships?.[0]?.channels.some((channel) => channel.totalVideosCreated > 0)
 
     SentryLogger.setUser(user)
     UserEventsLogger.setUser(user)
+    // @ts-ignore custom prop required by usersnap
+    window.Usersnap?.init({
+      ...user,
+      role: hasCreatedSingleVideo ? 'creator' : 'default',
+    })
   }, [
     currentMemberships,
     currentUser?.email,

diff --git a/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx b/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx
@@ -1,15 +1,19 @@
+import BN from 'bn.js'
 import { FC } from 'react'
 import { CSSTransition, SwitchTransition } from 'react-transition-group'
 import useResizeObserver from 'use-resize-observer'
 
 import { useMostPaidChannels } from '@/api/hooks/channel'
+import { useGetJoystreamTotalEarningsQuery } from '@/api/queries/__generated__/nfts.generated'
 import { SvgActionChevronR, SvgActionNewTab } from '@/assets/icons'
 import crt_card from '@/assets/images/ypp-hero/crt-card-hero.webp'
 import crt_dashboard from '@/assets/images/ypp-hero/crt-dashboard-hero.webp'
 import payments from '@/assets/images/ypp-hero/crt-payments-hero.webp'
 import { AppLogo } from '@/components/AppLogo'
 import { FlexBox } from '@/components/FlexBox'
+import { GlassDetailsWidget } from '@/components/GlassDetailsWidget'
 import { GridItem, LayoutGrid } from '@/components/LayoutGrid'
+import { NumberFormat } from '@/components/NumberFormat'
 import { Text } from '@/components/Text'
 import { Button, TextButton } from '@/components/_buttons/Button'
 import { PaidChannelCard } from '@/components/_channel/ChannelCard'
@@ -31,6 +35,7 @@ import {
   LogosContainer,
   RightImage,
   StyledInfiniteCarousel,
+  WidgetsContainer,
 } from './YppHero.styles'
 
 import {
@@ -55,16 +60,19 @@ export const YppHero: FC<YppHeroProps> = ({ onSignUpClick, yppAtlasStatus, onVie
   const xsMatch = useMediaMatch('xs')
   const xxsMatch = useMediaMatch('xxs')
   const smMatch = useMediaMatch('sm')
+  const mdMatch = useMediaMatch('md')
   const { ref, width, height } = useResizeObserver({ box: 'border-box' })
   const [, subtitleVariant, titleVariant] = useSectionTextVariants()
   const setIsYppChannelFlow = useYppStore((state) => state.actions.setIsYppChannelFlow)
   const setAuthModalOpenName = useAuthStore((state) => state.actions.setAuthModalOpenName)
   const { memberChannels, isLoggedIn } = useUser()
   const { trackRewardsCreateChannelButtonClick } = useSegmentAnalytics()
   const { channels, loading } = useMostPaidChannels()
+  const { data, loading: loadingEarnings } = useGetJoystreamTotalEarningsQuery()
   const items = !loading
     ? channels?.map((channel) => <PaidChannelCard key={channel.id} channel={channel} />)
     : Array.from({ length: 30 }).map((_, idx) => <PaidChannelCard key={idx} loading />)
+  const widgetContentTextVariant = mdMatch ? ('h700' as const) : ('h600' as const)
 
   return (
     <HeroBackgroundContainer noBackground>
@@ -194,51 +202,72 @@ export const YppHero: FC<YppHeroProps> = ({ onSignUpClick, yppAtlasStatus, onVie
                 </>
               )}
               {yppAtlasStatus !== 'ypp-signed' && 'It takes under 1 minute and is 100% free.'}
-            </Text> */}
+            </Text>  */}
           </GridItem>
         </LayoutGrid>
 
-        {/*<LayoutGrid data-aos="fade-up" data-aos-delay="450" data-aos-offset="40" data-aos-easing="atlas-easing">*/}
-        {/*  <GridItem margin={{ top: 6 }} colStart={{ base: 1, lg: 2 }} colSpan={{ base: 12, lg: 10 }}>*/}
-        {/*    <WidgetsContainer>*/}
-        {/*      <Text margin={{ bottom: 6 }} variant="h500" as="h5">*/}
-        {/*        Creator Earnings*/}
-        {/*      </Text>*/}
-        {/*    </WidgetsContainer>*/}
-        {/*    <WidgetsContainer justifyContent="space-between" gap={4} width="100%">*/}
-        {/*      <GlassDetailsWidget*/}
-        {/*        title="Total Rewards Paid"*/}
-        {/*        titleVariant="h300"*/}
-        {/*        tooltip={{ text: 'xd' }}*/}
-        {/*        customNode={*/}
-        {/*          <Text variant={widgetContentTextVariant} as="h2">*/}
-        {/*            204M*/}
-        {/*          </Text>*/}
-        {/*        }*/}
-        {/*      />*/}
-        {/*      <GlassDetailsWidget*/}
-        {/*        title="NFTs sold"*/}
-        {/*        titleVariant="h300"*/}
-        {/*        tooltip={{ text: 'xd' }}*/}
-        {/*        customNode={*/}
-        {/*          <Text variant={widgetContentTextVariant} as="h2">*/}
-        {/*            204M*/}
-        {/*          </Text>*/}
-        {/*        }*/}
-        {/*      />*/}
-        {/*      <GlassDetailsWidget*/}
-        {/*        title="Creator Tokens Sold"*/}
-        {/*        titleVariant="h300"*/}
-        {/*        tooltip={{ text: 'xd' }}*/}
-        {/*        customNode={*/}
-        {/*          <Text variant={widgetContentTextVariant} as="h2">*/}
-        {/*            204M*/}
-        {/*          </Text>*/}
-        {/*        }*/}
-        {/*      />*/}
-        {/*    </WidgetsContainer>*/}
-        {/*  </GridItem>*/}
-        {/*</LayoutGrid>*/}
+        <LayoutGrid data-aos="fade-up" data-aos-delay="450" data-aos-offset="40" data-aos-easing="atlas-easing">
+          <GridItem margin={{ top: 6 }} colStart={{ base: 1, lg: 2 }} colSpan={{ base: 12, lg: 10 }}>
+            <WidgetsContainer>
+              <Text margin={{ bottom: 6 }} variant="h500" as="h5">
+                Creator Earnings
+              </Text>
+            </WidgetsContainer>
+            <WidgetsContainer justifyContent="space-between" gap={4} width="100%">
+              <GlassDetailsWidget
+                title="Total Rewards Paid"
+                titleVariant="h300"
+                customNode={
+                  loadingEarnings ? (
+                    <SkeletonLoader width={120} height={60} />
+                  ) : (
+                    <NumberFormat
+                      as="h2"
+                      format="short"
+                      withDenomination
+                      variant={widgetContentTextVariant}
+                      value={new BN(data?.totalJoystreamEarnings.totalRewardsPaid ?? 0)}
+                    />
+                  )
+                }
+              />
+              <GlassDetailsWidget
+                title="NFTs Sold"
+                titleVariant="h300"
+                customNode={
+                  loadingEarnings ? (
+                    <SkeletonLoader width={120} height={60} />
+                  ) : (
+                    <NumberFormat
+                      as="h2"
+                      format="short"
+                      withDenomination
+                      variant={widgetContentTextVariant}
+                      value={new BN(data?.totalJoystreamEarnings.nftSaleVolume ?? 0)}
+                    />
+                  )
+                }
+              />
+              <GlassDetailsWidget
+                title="Creator Tokens Sold"
+                titleVariant="h300"
+                customNode={
+                  loadingEarnings ? (
+                    <SkeletonLoader width={120} height={60} />
+                  ) : (
+                    <NumberFormat
+                      as="h2"
+                      format="short"
+                      withDenomination
+                      variant={widgetContentTextVariant}
+                      value={new BN(data?.totalJoystreamEarnings.crtSaleVolume ?? 0)}
+                    />
+                  )
+                }
+              />
+            </WidgetsContainer>
+          </GridItem>
+        </LayoutGrid>
 
         <ImagesContainer width="100%" justifyContent="center">
           <FrontImage src={crt_dashboard} alt="Hero back" width="1152" height="824" />

diff --git a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx
@@ -43,13 +43,12 @@ const benefitsMetadata = {
     title: 'Discord Community',
     description: (
       <>
-        Introduce yourself to the{' '}
-        <TextButton to="https://discord.com/channels/811216481340751934/1231910540243238932">intros</TextButton> channel
+        Introduce yourself to the <TextButton to={atlasConfig.general.joystreamDiscordUrl}>#intros</TextButton> channel
         and share the link to your {atlasConfig.general.appName} channel page. Five best intros per weeks are rewarded!
       </>
     ),
     reward: '10 USD',
-    actionLink: 'https://discord.com/channels/811216481340751934/1224709788592767136',
+    actionLink: atlasConfig.general.joystreamDiscordUrl,
     tooltipLink: 'https://www.notion.so/joystream/Creators-Discord-bc8df1d87b58435a9ea325b073bea4d6?pvs=4',
   },
   twitterPost: {
@@ -64,7 +63,7 @@ const benefitsMetadata = {
     title: 'Roundtable events',
     description: `Participate in Creator Roundtable events held on Discord to exchange perspectives on current ${atlasConfig.general.appName} opportunities and features in the pipeline. Best questions are rewarded.`,
     reward: '25 USD',
-    actionLink: 'https://discord.com/channels/811216481340751934/1231911228398637077',
+    actionLink: atlasConfig.general.joystreamDiscordUrl,
     tooltipLink: 'https://www.notion.so/joystream/Roundtable-Events-cd106924a7314f75acf8813277fc21a8?pvs=4',
   },
   originalCreatorsContent: {
@@ -98,7 +97,7 @@ const benefitsMetadata = {
     actionLink: 'https://joystream.notion.site/Ambassador-Program-Space-93dfd2767d6b4729ac7dab79f9970d5b',
     tooltipLink: 'https://joystream.notion.site/Ambassador-Program-Space-93dfd2767d6b4729ac7dab79f9970d5b',
   },
-  discordLink: 'https://discord.com/channels/811216481340751934/1053294778529353788',
+  discordLink: atlasConfig.general.joystreamDiscordUrl,
 }
 
 export const YppDashboardMainTab: FC = () => {
@@ -493,8 +492,8 @@ export const YppDashboardMainTab: FC = () => {
             description={
               <>
                 Drop the link of your post to{' '}
-                <TextButton as="span" to="https://discord.com/channels/811216481340751934/1224714104552558682">
-                  shared NFTs channel
+                <TextButton as="span" to={atlasConfig.general.joystreamDiscordUrl}>
+                  #shared-NFTs
                 </TextButton>{' '}
                 on Discord to participate in rewards.
               </>
@@ -522,8 +521,8 @@ export const YppDashboardMainTab: FC = () => {
             description={
               <>
                 Drop the link of your post to{' '}
-                <TextButton as="span" to="https://discord.com/channels/811216481340751934/1233002048979603487">
-                  shared Tokens channel{' '}
+                <TextButton as="span" to={atlasConfig.general.joystreamDiscordUrl}>
+                  #shared-CRTs
                 </TextButton>{' '}
                 on Discord to participate in rewards.
               </>