Ypp rewards (#4345)

* changed YPP rewards

* added usd reward in the config

---------

Co-authored-by: Artem <Artem Slugin>

packages/atlas/atlas.config.yml

@@ -59,7 +59,8 @@ features:
       - title: Sign Up to YouTube Partner Program
         showInDashboard: false # Optional. If false the reward will be shown only on YouTube partner program landing page. Default true
         shortDescription: Connect your YouTube channels via a simple step-by-step flow and get your first reward.
-        baseAmount: 5000 # Base amount that will be multiplied by tier multiplier
+        baseAmount: null # Base amount that will be multiplied by tier multiplier
+        baseUsdAmount: 20
       - title: Sync videos from your YouTube channel
         shortDescription: Opt in to auto-sync feature upon sign up and all YouTube content will get uploaded to $VITE_APP_NAME automatically. Get paid for every new video synced to your $VITE_APP_NAME channel.
         stepsDescription: Publishing your existing and new content with $VITE_APP_NAME is the fastest way to earn more JOY tokens.
@@ -68,7 +69,8 @@ features:
           - Wait till your videos get synced to your $VITE_APP_NAME channel.
           - Publish new videos to your YouTube channel.
           - Get rewarded for every new video synced to $VITE_APP_NAME.
-        baseAmount: 300
+        baseAmount: null
+        baseUsdAmount: 3
       - title: Refer another YouTube creator
         shortDescription: Get JOY for every new creator who signs up to YPP program using your referral link. Referrals multiplier depends on the popularity tier of the channel signed up using referral link.
         stepsDescription: Earn when another YouTube creator signs up to the program by using your your referral link.
@@ -77,9 +79,10 @@ features:
           - Send it to as many Web3 YouTube creators as you want.
           - Get rewarded for every new successful sign up, that uses your referral link. Referral reward depends on their popularity tier.
           - If signed up without the link they can simply add your channel name to the referral field in the registration flow.
-        baseAmount:
-          min: 1000
-          max: 5000
+        baseAmount: null
+        baseUsdAmount:
+          min: 10
+          max: 50
         actionButtonText: Get referral link
         actionButtonAction: copyReferral
     widgets: # Widgets on Ypp landing page

packages/atlas/src/components/_ypp/BenefitCard/BenefitCard.tsx

@@ -51,8 +51,8 @@ export type BenefitCardProps = {
     onClick?: () => void
     to?: string
   }
-  joyAmount: JoyAmountNumber | JoyAmountRange
-  dollarAmount?: DollarAmountNumber | DollarAmountRange
+  joyAmount: JoyAmountNumber | JoyAmountRange | null
+  dollarAmount?: DollarAmountNumber | DollarAmountRange | null
   className?: string
 }
 
@@ -71,83 +71,101 @@ export const BenefitCard: FC<BenefitCardProps> = ({
 
   const RewardAmount = () => {
     const isJoyTokenIconVisible =
-      (!smMatch && !isFullVariant && dollarAmount) || (!isFullVariant && dollarAmount) || isFullVariant
+      !(dollarAmount && !joyAmount) &&
+      ((!smMatch && !isFullVariant && dollarAmount) || (!isFullVariant && dollarAmount) || isFullVariant)
     return (
       <RewardWrapper isCompact={!isFullVariant}>
-        {!!dollarAmount && dollarAmount.type === 'number' && (
-          <NumberFormat
-            as="p"
-            format="dollar"
-            variant={!smMatch ? 'h500' : 'h600'}
-            value={dollarAmount.amount}
-            margin={{ right: dollarAmount && !isFullVariant && !smMatch ? 2 : 0 }}
-          />
-        )}
-        {!!dollarAmount && dollarAmount.type === 'range' && (
-          <>
-            <NumberFormat
-              as="p"
-              format="dollar"
-              variant={!smMatch ? 'h500' : 'h600'}
-              value={dollarAmount.min}
-              margin={{ right: dollarAmount && !isFullVariant && !smMatch ? 2 : 0 }}
-            />
+        <TokenRewardWrapper>
+          {!!dollarAmount && !isFullVariant && (
             <Text as="span" variant={smMatch ? 'h600' : 'h500'} color="colorText" margin={{ right: 1 }}>
-              -
+              +
             </Text>
+          )}
+          {!!dollarAmount && dollarAmount.type === 'number' && (
             <NumberFormat
               as="p"
               format="dollar"
               variant={!smMatch ? 'h500' : 'h600'}
-              value={dollarAmount.max}
+              value={dollarAmount.amount}
               margin={{ right: dollarAmount && !isFullVariant && !smMatch ? 2 : 0 }}
             />
-          </>
-        )}
-        <TokenRewardWrapper>
-          {isJoyTokenIconVisible ? (
-            <StyledJoyTokenIcon variant="silver" size={smMatch && !dollarAmount ? 24 : 16} />
-          ) : (
-            <Text as="span" variant={smMatch ? 'h600' : 'h500'} color="colorText" margin={{ right: 1 }}>
-              +
-            </Text>
           )}
-          {joyAmount.type === 'number' && (
-            <NumberFormat
-              as="span"
-              format="short"
-              color={!dollarAmount ? 'colorTextStrong' : 'colorText'}
-              variant={!dollarAmount ? (!smMatch ? 'h500' : 'h600') : !smMatch ? 'h300' : 'h400'}
-              value={joyAmount.amount}
-            />
-          )}
-          {joyAmount.type === 'range' && (
+          {!!dollarAmount && dollarAmount.type === 'range' && (
             <>
               <NumberFormat
-                as="span"
-                format="short"
-                color={!dollarAmount ? 'colorTextStrong' : 'colorText'}
-                variant={!dollarAmount ? (!smMatch ? 'h500' : 'h600') : !smMatch ? 'h300' : 'h400'}
-                value={joyAmount.min}
+                as="p"
+                format="dollar"
+                variant={!smMatch ? 'h500' : 'h600'}
+                value={dollarAmount.min}
+                margin={{ right: dollarAmount && !isFullVariant && !smMatch ? 2 : 0 }}
               />
               <Text as="span" variant={smMatch ? 'h600' : 'h500'} color="colorText" margin={{ right: 1 }}>
                 -
               </Text>
               <NumberFormat
-                as="span"
-                format="short"
-                color={!dollarAmount ? 'colorTextStrong' : 'colorText'}
-                variant={!dollarAmount ? (!smMatch ? 'h500' : 'h600') : !smMatch ? 'h300' : 'h400'}
-                value={joyAmount.max}
+                as="p"
+                format="dollar"
+                variant={!smMatch ? 'h500' : 'h600'}
+                value={dollarAmount.max}
+                margin={{ right: dollarAmount && !isFullVariant && !smMatch ? 2 : 0 }}
               />
             </>
           )}
-          {!dollarAmount && !isFullVariant && (
+          {!!dollarAmount && !joyAmount && (
             <Text as="span" variant={smMatch ? 'h400' : 'h300'} color="colorText" margin={{ left: 1 }}>
-              {atlasConfig.joystream.tokenTicker}
+              USD
             </Text>
           )}
         </TokenRewardWrapper>
+        {joyAmount && (
+          <>
+            <TokenRewardWrapper>
+              {isJoyTokenIconVisible ? (
+                <StyledJoyTokenIcon variant="silver" size={smMatch && !dollarAmount ? 24 : 16} />
+              ) : (
+                <Text as="span" variant={smMatch ? 'h600' : 'h500'} color="colorText" margin={{ right: 1 }}>
+                  +
+                </Text>
+              )}
+              {joyAmount.type === 'number' && (
+                <NumberFormat
+                  as="span"
+                  format="short"
+                  color={!dollarAmount ? 'colorTextStrong' : 'colorText'}
+                  variant={!dollarAmount ? (!smMatch ? 'h500' : 'h600') : !smMatch ? 'h300' : 'h400'}
+                  value={joyAmount.amount}
+                />
+              )}
+              {joyAmount.type === 'range' && (
+                <>
+                  <NumberFormat
+                    as="span"
+                    format="short"
+                    color={!dollarAmount ? 'colorTextStrong' : 'colorText'}
+                    variant={!dollarAmount ? (!smMatch ? 'h500' : 'h600') : !smMatch ? 'h300' : 'h400'}
+                    value={joyAmount.min}
+                  />
+                  <Text as="span" variant={smMatch ? 'h600' : 'h500'} color="colorText" margin={{ right: 1 }}>
+                    -
+                  </Text>
+                  <NumberFormat
+                    as="span"
+                    format="short"
+                    color={!dollarAmount ? 'colorTextStrong' : 'colorText'}
+                    variant={!dollarAmount ? (!smMatch ? 'h500' : 'h600') : !smMatch ? 'h300' : 'h400'}
+                    value={joyAmount.max}
+                  />
+                </>
+              )}
+              {(!dollarAmount && !isFullVariant) ||
+                (dollarAmount && !joyAmount && (
+                  <Text as="span" variant={smMatch ? 'h400' : 'h300'} color="colorText" margin={{ left: 1 }}>
+                    {dollarAmount ? 'USD' : atlasConfig.joystream.tokenTicker}
+                  </Text>
+                ))}
+            </TokenRewardWrapper>
+          </>
+        )}
       </RewardWrapper>
     )
   }

packages/atlas/src/config/configSchema.ts

@@ -62,13 +62,24 @@ export const configSchema = z.object({
             shortDescription: z.string(),
             stepsDescription: z.string().optional(),
             steps: z.array(z.string()).optional(),
-            baseAmount: z.union([
-              z.number(),
-              z.object({
-                min: z.number(),
-                max: z.number(),
-              }),
-            ]),
+            baseAmount: z
+              .union([
+                z.number(),
+                z.object({
+                  min: z.number(),
+                  max: z.number(),
+                }),
+              ])
+              .nullable(),
+            baseUsdAmount: z
+              .union([
+                z.number(),
+                z.object({
+                  min: z.number(),
+                  max: z.number(),
+                }),
+              ])
+              .nullable(),
             actionButtonText: z.string().optional(),
             actionButtonAction: z
               .string()

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

@@ -23,7 +23,7 @@ export const YppRewardSection: FC = () => {
   const mdMatch = useMediaMatch('md')
   const tiers = atlasConfig.features.ypp.tiersDefinition?.tiers
   const rewards = atlasConfig.features.ypp.rewards
-  const [rewardMultiplier, setRewardMultiplier] = useState<number>(tiers ? tiers[0].multiplier : 1)
+  const [rewardMultiplier, setRewardMultiplier] = useState<number>(tiers ? tiers[tiers.length - 1].multiplier : 1)
 
   if (!rewards?.length) {
     return null
@@ -137,15 +137,22 @@ export const YppRewardSection: FC = () => {
         <LayoutGrid data-aos="fade-up" data-aos-delay="200" data-aos-offset="80" data-aos-easing="atlas-easing">
           <BenefitsCardsContainerGridItem colStart={{ lg: 2 }} colSpan={{ base: 12, lg: 10 }}>
             {rewards.map((reward) => {
-              const joyAmount =
-                typeof reward.baseAmount === 'number'
+              const rewardAmount = reward.baseAmount
+                ? typeof reward.baseAmount === 'number'
                   ? { type: 'number' as const, amount: reward.baseAmount * rewardMultiplier }
                   : { type: 'range' as const, min: reward.baseAmount.min, max: reward.baseAmount.max }
+                : null
+              const rewardAmountUsd = reward.baseUsdAmount
+                ? typeof reward.baseUsdAmount === 'number'
+                  ? { type: 'number' as const, amount: reward.baseUsdAmount * rewardMultiplier }
+                  : { type: 'range' as const, min: reward.baseUsdAmount.min, max: reward.baseUsdAmount.max }
+                : null
               return (
                 <BenefitCard
                   key={reward.title}
                   title={reward.title}
-                  joyAmount={joyAmount}
+                  joyAmount={rewardAmount}
+                  dollarAmount={rewardAmountUsd}
                   variant="compact"
                   description={reward.shortDescription}
                 />

packages/atlas/src/views/studio/YppDashboard/YppDashboard.config.tsx

@@ -86,6 +86,7 @@ export const REWARDS =
       description: reward.stepsDescription,
       steps: reward.steps,
       joyAmount: reward.baseAmount,
+      usdAmount: reward.baseUsdAmount,
       ...(reward.actionButtonText
         ? {
             actionButton: {

packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx

@@ -87,10 +87,16 @@ export const YppDashboardMainTab: FC<YppDashboardMainTabProps> = ({ currentTier
       )}
       <RewardsWrapper>
         {REWARDS?.map((reward) => {
-          const joyAmount =
-            typeof reward.joyAmount === 'number'
+          const rewardAmount = reward.joyAmount
+            ? typeof reward.joyAmount === 'number'
               ? { type: 'number' as const, amount: reward.joyAmount * multiplier }
               : { type: 'range' as const, min: reward.joyAmount.min, max: reward.joyAmount.max }
+            : null
+          const rewardAmountUsd = reward.usdAmount
+            ? typeof reward.usdAmount === 'number'
+              ? { type: 'number' as const, amount: reward.usdAmount * multiplier }
+              : { type: 'range' as const, min: reward.usdAmount.min, max: reward.usdAmount.max }
+            : null
           return (
             <BenefitCard
               key={reward.title}
@@ -116,7 +122,8 @@ export const YppDashboardMainTab: FC<YppDashboardMainTabProps> = ({ currentTier
                     }
                   : undefined
               }
-              joyAmount={joyAmount}
+              joyAmount={rewardAmount}
+              dollarAmount={rewardAmountUsd}
             />
           )
         })}