🌍 YPP Dashboard 2.0

.stylelintrc.js

@@ -3,6 +3,7 @@ module.exports = {
   defaultSeverity: 'warning',
   customSyntax: '@stylelint/postcss-css-in-js',
   rules: {
+    'function-url-quotes': null,
     'no-empty-source': null,
     'function-name-case': null,
     'custom-property-empty-line-before': null,

packages/atlas/atlas.config.yml

@@ -51,20 +51,38 @@ features:
     enrollmentUsdReward: 5 # Amount for successful enrollment in YPP in USD.
     referralBaseReward: 2.5 # Self-explanatory, it should match `baseUsdAmount.min` value in last `rewards` entry
     tiersDefinition: # Tiers for YouTube partner program rewards. You can provide maximum three tiers. Each tier should has own multiplier.
-      tiers:
-        - minimumSubscribers: 0
-          multiplier: 1
-        - minimumSubscribers: 1000
-          multiplier: 2
-        - minimumSubscribers: 5000
-          multiplier: 4
-        - minimumSubscribers: 25000
-          multiplier: 6
-        - minimumSubscribers: 50000
-          multiplier: 8
-        - minimumSubscribers: 100000
-          multiplier: 10
-      tiersTooltip: The more subscribers you have on YouTube, the higher the payouts in the program.
+      - tier: 'bronze'
+        reqs:
+          - Lower effort production.
+          - Growing subscriber count base of channel supporters.
+        rewards:
+          - 0 # Reward for signup in USD
+          - 0 # Reward for synced video
+          - 0 # Reward for referral
+      - tier: 'silver'
+        reqs:
+          - Original good quality of content.
+          - Sizeable subscriber base with high ratio of views for videos.
+        rewards:
+          - 10
+          - 1
+          - 10
+      - tier: 'gold'
+        reqs:
+          - Great quality of content.
+          - Large subscriber base of fans active in the comments section.
+        rewards:
+          - 30
+          - 3
+          - 20
+      - tier: 'diamond'
+        reqs:
+          - Top tier professional quality.
+          - Recognized influencer & large follower audience
+        rewards:
+          - 100
+          - 5
+          - 50
     rewards:
       - 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
@@ -101,11 +119,11 @@ features:
         linkText: Go to Notion # Used only on YPP Dashboard - if empty defaults to "Go to {title}"
         label: Notion # Used for YPP Dashboard to inform user which vendor given feature uses - if empty defaults to title
         icon: info # Optional icon to be displayed. Possible icons: message, info, tokenStack
-      - title: Payments
-        link: /studio/payments
-        linkText: Go to Payments
-        label: Studio
-        icon: tokenStack
+      #      - title: Payments
+      #        link: /studio/payments
+      #        linkText: Go to Payments
+      #        label: Studio
+      #        icon: tokenStack
       - title: Support
         link: https://discord.com/channels/811216481340751934/1053294778529353788
         linkText: Go to Discord

packages/atlas/src/.env

@@ -19,7 +19,7 @@ VITE_HCAPTCHA_SITE_KEY=41cae189-7676-4f6b-aa56-635be26d3ceb
 
 # YPP configuration
 VITE_GOOGLE_CONSOLE_CLIENT_ID=246331758613-rc1psegmsr9l4e33nqu8rre3gno5dsca.apps.googleusercontent.com
-VITE_YOUTUBE_SYNC_API_URL=https://52.204.147.11.nip.io
+VITE_YOUTUBE_SYNC_API_URL=https://50.19.175.219.nip.io
 VITE_YOUTUBE_COLLABORATOR_MEMBER_ID=18
 
 # Analytics tools
@@ -43,7 +43,7 @@ VITE_DEVELOPMENT_ORION_URL=https://atlas-dev.joystream.org/orion-api/graphql
 VITE_DEVELOPMENT_QUERY_NODE_SUBSCRIPTION_URL=wss://atlas-dev.joystream.org/orion-v2/graphql
 VITE_DEVELOPMENT_NODE_URL=wss://atlas-dev.joystream.org/ws-rpc
 VITE_DEVELOPMENT_FAUCET_URL=https://atlas-dev.joystream.org/member-faucet/register
-VITE_DEVELOPMENT_YPP_FAUCET_URL=https://52.204.147.11.nip.io/membership
+VITE_DEVELOPMENT_YPP_FAUCET_URL=https://50.19.175.219.nip.io/memberships
 
 # Experimental env URLs
 VITE_NEXT_ORION_AUTH_URL=

packages/atlas/src/assets/icons/IconRankBronze.tsx

@@ -0,0 +1,39 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgIconRankBronze = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    width={192}
+    height={192}
+    viewBox="0 0 192 192"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
+    <g clipPath="url(#clip0_2633_1237)">
+      <path d="M96 167.974C56.72 166.931 25.07 135.28 24.027 96H96v71.974Z" fill="#fff" />
+    </g>
+    <g clipPath="url(#clip1_2633_1237)">
+      <path d="M167.974 96C166.931 135.28 135.28 166.93 96 167.973V96h71.974Z" fill="#fff" />
+    </g>
+    <path d="M96 96H24V24h72v72Z" fill="#fff" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M168 90.36V96h-5.64L96 29.64V24h5.64L168 90.36ZM96 41.28v11.255L139.466 96h11.254L96 41.28Zm0 33.64V63.6L128.4 96h-11.32L96 74.92ZM96 96h10.08L96 85.92V96Zm17.28-72h11.254L168 67.466V78.72L113.28 24Zm33.64 0H135.6L168 56.4V45.08L146.92 24ZM168 34.08 157.92 24H168v10.08Z"
+      fill="#fff"
+    />
+    <defs>
+      <clipPath id="clip0_2633_1237">
+        <path fill="#fff" transform="rotate(-180 48 84)" d="M0 0h72v72H0z" />
+      </clipPath>
+      <clipPath id="clip1_2633_1237">
+        <path fill="#fff" transform="rotate(90 36 132)" d="M0 0h72v72H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+))
+SvgIconRankBronze.displayName = 'SvgIconRankBronze'
+const Memo = memo(SvgIconRankBronze)
+export { Memo as SvgIconRankBronze }

packages/atlas/src/assets/icons/IconRankDiamond.tsx

@@ -0,0 +1,56 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgIconRankDiamond = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    width={192}
+    height={192}
+    viewBox="0 0 192 192"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
+    <g clipPath="url(#clip0_2633_1240)" fill="#fff">
+      <path d="M24 96.026v8.004c34.861 1.037 62.933 29.109 63.97 63.97h8.004C94.93 128.72 63.28 97.069 24 96.026Z" />
+      <path d="M79.966 168C78.935 137.557 54.443 113.065 24 112.034v8.005c26.024 1.024 46.937 21.937 47.96 47.961h8.006Z" />
+      <path d="M64 168c0-22.091-17.909-40-40-40v8c17.673 0 32 14.327 32 32h8Z" />
+      <path d="M48 168c0-13.255-10.745-24-24-24v8c8.837 0 16 7.163 16 16h8ZM32 168a8 8 0 0 0-8-8v8h8Z" />
+    </g>
+    <g clipPath="url(#clip1_2633_1240)" fill="#fff">
+      <path d="M96.026 168h8.004c1.037-34.861 29.109-62.933 63.97-63.97v-8.004C128.72 97.07 97.069 128.72 96.026 168Z" />
+      <path d="M168 112.034c-30.443 1.031-54.935 25.523-55.966 55.966h8.005c1.024-26.024 21.937-46.937 47.961-47.961v-8.005Z" />
+      <path d="M168 128c-22.091 0-40 17.909-40 40h8c0-17.673 14.327-32 32-32v-8Z" />
+      <path d="M168 144c-13.255 0-24 10.745-24 24h8c0-8.837 7.163-16 16-16v-8ZM168 160a8 8 0 0 0-8 8h8v-8Z" />
+    </g>
+    <g clipPath="url(#clip2_2633_1240)" fill="#fff">
+      <path d="M95.974 24H87.97C86.933 58.861 58.861 86.933 24 87.97v8.004C63.28 94.93 94.931 63.28 95.974 24Z" />
+      <path d="M24 79.966C54.443 78.935 78.935 54.443 79.966 24h-8.005C70.937 50.024 50.024 70.937 24 71.96v8.006Z" />
+      <path d="M24 64c22.091 0 40-17.909 40-40h-8c0 17.673-14.327 32-32 32v8Z" />
+      <path d="M24 48c13.255 0 24-10.745 24-24h-8c0 8.837-7.163 16-16 16v8ZM24 32a8 8 0 0 0 8-8h-8v8Z" />
+    </g>
+    <g clipPath="url(#clip3_2633_1240)" fill="#fff">
+      <path d="M168 95.974V87.97c-34.861-1.037-62.933-29.109-63.97-63.97h-8.004C97.07 63.28 128.72 94.931 168 95.974Z" />
+      <path d="M112.034 24c1.031 30.443 25.523 54.935 55.966 55.966v-8.005C141.976 70.937 121.063 50.024 120.039 24h-8.005Z" />
+      <path d="M128 24c0 22.091 17.909 40 40 40v-8c-17.673 0-32-14.327-32-32h-8Z" />
+      <path d="M144 24c0 13.255 10.745 24 24 24v-8c-8.837 0-16-7.163-16-16h-8ZM160 24a8 8 0 0 0 8 8v-8h-8Z" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2633_1240">
+        <path fill="#fff" transform="translate(24 96)" d="M0 0h72v72H0z" />
+      </clipPath>
+      <clipPath id="clip1_2633_1240">
+        <path fill="#fff" transform="rotate(-90 132 36)" d="M0 0h72v72H0z" />
+      </clipPath>
+      <clipPath id="clip2_2633_1240">
+        <path fill="#fff" transform="rotate(90 36 60)" d="M0 0h72v72H0z" />
+      </clipPath>
+      <clipPath id="clip3_2633_1240">
+        <path fill="#fff" transform="rotate(-180 84 48)" d="M0 0h72v72H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+))
+SvgIconRankDiamond.displayName = 'SvgIconRankDiamond'
+const Memo = memo(SvgIconRankDiamond)
+export { Memo as SvgIconRankDiamond }

packages/atlas/src/assets/icons/IconRankGold.tsx

@@ -0,0 +1,38 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgIconRankGold = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    width={192}
+    height={192}
+    viewBox="0 0 192 192"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M90.36 96H96v5.64L29.64 168H24v-5.64L90.36 96Zm-49.08 72h11.255L96 124.534V113.28L41.28 168Zm33.64 0H63.6L96 135.6v11.32L74.92 168ZM96 168v-10.08L85.92 168H96Zm-72-17.28v-11.254L67.466 96H78.72L24 150.72Zm0-33.64v11.32L56.4 96H45.08L24 117.08ZM34.08 96 24 106.08V96h10.08ZM96 101.64V96h5.64L168 162.36V168h-5.64L96 101.64Zm72 49.08v-11.254L124.534 96H113.28L168 150.72Zm0-33.64v11.32L135.6 96h11.32L168 117.08ZM168 96h-10.08L168 106.08V96Zm-17.28 72h-11.254L96 124.535V113.28L150.72 168Zm-33.64 0h11.32L96 135.6v11.32L117.08 168ZM96 157.92 106.08 168H96v-10.08Z"
+      fill="#fff"
+    />
+    <g clipPath="url(#clip0_2633_1239)">
+      <path d="M24.026 96C25.07 56.72 56.72 25.07 96 24.027V96H24.026Z" fill="#fff" />
+    </g>
+    <g clipPath="url(#clip1_2633_1239)">
+      <path d="M96 24.026C135.28 25.07 166.93 56.72 167.973 96H96V24.026Z" fill="#fff" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2633_1239">
+        <path fill="#fff" transform="rotate(-90 60 36)" d="M0 0h72v72H0z" />
+      </clipPath>
+      <clipPath id="clip1_2633_1239">
+        <path fill="#fff" transform="translate(96 24)" d="M0 0h72v72H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+))
+SvgIconRankGold.displayName = 'SvgIconRankGold'
+const Memo = memo(SvgIconRankGold)
+export { Memo as SvgIconRankGold }

packages/atlas/src/assets/icons/IconRankSilver.tsx

@@ -0,0 +1,33 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgIconRankSilver = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg
+    width={192}
+    height={192}
+    viewBox="0 0 192 192"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
+    <g clipPath="url(#clip0_2633_1238)" fill="#fff">
+      <path d="M32 96v72h-8V96h8ZM96 96v72h-8V96h8ZM80 168V96h-8v72h8ZM48 96v72h-8V96h8ZM64 168V96h-8v72h8Z" />
+    </g>
+    <g clipPath="url(#clip1_2633_1238)" fill="#fff">
+      <path d="M96 160h72v8H96v-8ZM96 96h72v8H96v-8ZM168 112H96v8h72v-8ZM96 144h72v8H96v-8ZM168 128H96v8h72v-8Z" />
+    </g>
+    <path d="M96 24v72H24V24h72ZM168 96H96V24h72v72Z" fill="#fff" />
+    <defs>
+      <clipPath id="clip0_2633_1238">
+        <path fill="#fff" transform="rotate(-90 96 72)" d="M0 0h72v72H0z" />
+      </clipPath>
+      <clipPath id="clip1_2633_1238">
+        <path fill="#fff" transform="rotate(180 84 84)" d="M0 0h72v72H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+))
+SvgIconRankSilver.displayName = 'SvgIconRankSilver'
+const Memo = memo(SvgIconRankSilver)
+export { Memo as SvgIconRankSilver }

packages/atlas/src/assets/icons/index.ts

@@ -177,6 +177,10 @@ export * from './ControlsVideoModeCompactView'
 export * from './ControlsVideo'
 export * from './ControlsZoomIn'
 export * from './ControlsZoomOut'
+export * from './IconRankBronze'
+export * from './IconRankDiamond'
+export * from './IconRankGold'
+export * from './IconRankSilver'
 export * from './IllustrativeEdit'
 export * from './IllustrativeFileFailed'
 export * from './IllustrativeFileSelected'