Merge remote-tracking branch 'Joystream/dev'

packages/atlas/codegen.config.ts

@@ -2,7 +2,7 @@ import { CodegenConfig } from '@graphql-codegen/cli'
 
 import { customSchemaLoader } from './scripts/customSchemaLoader'
 
-const ENV = process.env.VITE_DEFAULT_DATA_ENV?.toUpperCase() ?? process.env.VITE_ENV?.toUpperCase() ?? 'PRODUCTION'
+const ENV = process.env.VITE_DEFAULT_DATA_ENV?.toUpperCase() || process.env.VITE_ENV?.toUpperCase() || 'PRODUCTION'
 const schemaUrl = process.env[`VITE_${ENV}_ORION_URL`]
 if (!schemaUrl) throw new Error(`VITE_${ENV}_ORION_URL is not defined`)
 

packages/atlas/src/api/hooks/channel.ts

@@ -87,18 +87,18 @@ export const useBasicChannels = (
 export type PayeeChannel = {
   id: string
   title?: string | null
-  cumulativeRewardPaid: BN
+  cumulativeReward: BN
   avatarPhoto?: { resolvedUrls: string[] } | null
 }
 export const useMostPaidChannels = (): { channels: PayeeChannel[] | undefined; loading: boolean } => {
   const { data, loading } = useGetMostPaidChannelsQuery()
 
   const channels = useMemo<PayeeChannel[] | undefined>(
     () =>
-      data?.channels.map(({ id, title, cumulativeRewardPaid, avatarPhoto }) => ({
+      data?.channels.map(({ id, title, cumulativeReward, avatarPhoto }) => ({
         id,
         title: title ?? undefined,
-        cumulativeRewardPaid: cumulativeRewardPaid ? new BN(cumulativeRewardPaid) : BN_ZERO,
+        cumulativeReward: cumulativeReward ? new BN(cumulativeReward) : BN_ZERO,
         avatarPhoto: avatarPhoto ?? undefined,
       })),
     [data]

packages/atlas/src/api/queries/channels.graphql

@@ -297,13 +297,16 @@ query GetChannelPaymentEvents($channelId: String) {
 }
 
 query GetMostPaidChannels {
-  channels(orderBy: cumulativeRewardPaid_DESC, limit: 50) {
+  channels(orderBy: cumulativeReward_DESC, limit: 50) {
     id
     title
-    cumulativeRewardPaid
+    cumulativeReward
     avatarPhoto {
       resolvedUrls
       isAccepted
+      storageBag {
+        id
+      }
     }
   }
 }

packages/atlas/src/components/_channel/ChannelCard/PaidChannelCard.stories.tsx

@@ -23,16 +23,16 @@ export default {
     channel: {
       title: 'my channel',
       id: '3',
-      cumulativeRewardPaid: 123_456,
+      cumulativeReward: 123_456,
       avatarPhoto: { id: '1' },
     },
   },
 
   render: (args) => {
-    const amount = (args.channel?.cumulativeRewardPaid as number) ?? 0
+    const amount = (args.channel?.cumulativeReward as number) ?? 0
     const channel = args.channel && {
       ...args.channel,
-      cumulativeRewardPaid: new BN(`${Math.trunc(amount)}${(amount % 1).toFixed(10).substring(2)}`),
+      cumulativeReward: new BN(`${Math.trunc(amount)}${(amount % 1).toFixed(10).substring(2)}`),
     }
     return (
       <Grid>

packages/atlas/src/components/_channel/ChannelCard/PaidChannelCard.tsx

@@ -45,7 +45,7 @@ export const PaidChannelCard: FC<PaidChannelCardProps> = ({ onClick, channel, lo
               ) : (
                 <>
                   <Amount
-                    value={channel.cumulativeRewardPaid}
+                    value={channel.cumulativeReward}
                     as="span"
                     withToken="small"
                     withTooltip

packages/atlas/src/components/_navigation/NavItem/NavItem.styles.tsx

@@ -53,7 +53,7 @@ export const SidebarNavLink = styled(Link, { shouldForwardProp: isPropValid })<S
   }
 
   > span {
-    margin-left: ${sizes(6)};
+    margin-left: ${sizes(7)};
     font: ${cVar('typographyDesktopH400')};
     letter-spacing: ${cVar('typographyDesktopH400LetterSpacing')};
     text-transform: ${cVar('typographyDesktopH400TextTransform')};

packages/atlas/src/components/_navigation/SidenavViewer/SidenavViewer.tsx

@@ -53,6 +53,7 @@ export const viewerNavItems = [
     name: 'Referrals',
     expandedName: 'Referrals program',
     to: absoluteRoutes.viewer.referrals(),
+    bottomNav: true,
   },
 ]
 export const SidenavViewer: FC = () => {

packages/atlas/src/components/_referrals/Step/Step.styles.ts

@@ -27,6 +27,7 @@ export const StyledStepContainer = styled(FlexBox)<{ isSelected: boolean; disabl
   opacity: ${({ isSelected }) => (isSelected ? '1' : '0.5')};
   flex: 1;
   background-size: 200% 100%;
+  text-align: left;
 
   ${({ disabled }) =>
     !disabled &&

packages/atlas/src/components/_referrals/TierCard/TierCard.styles.ts

@@ -51,14 +51,14 @@ const pulse = keyframes`
 `
 export const TierBanner = styled.div<{ tier: 'bronze' | 'silver' | 'gold' | 'diamond' }>`
   width: 100%;
-  max-height: 80px;
   border-radius: calc(1.5 * ${cVar('radiusLarge')}) calc(1.5 * ${cVar('radiusLarge')}) 0 0;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
   padding: ${sizes(2.5)};
+  padding-bottom: ${sizes(6)};
   background: ${(props) => {
     switch (props.tier) {
       case 'diamond':
@@ -83,6 +83,10 @@ export const TierBanner = styled.div<{ tier: 'bronze' | 'silver' | 'gold' | 'dia
     ${square(36)}
   }
 
+  .absolute-container {
+    position: absolute;
+  }
+
   ::before {
     content: ' ';
     position: absolute;

packages/atlas/src/components/_referrals/TierCard/TierCard.tsx

@@ -14,6 +14,7 @@ import {
   TierBanner,
   Wrapper,
 } from '@/components/_referrals/TierCard/TierCard.styles'
+import { atlasConfig } from '@/config'
 import { capitalizeFirstLetter } from '@/utils/misc'
 import { getTierRewards } from '@/utils/ypp'
 import { TickWrapper } from '@/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationSteps/YppAuthorizationRequirementsStep/YppAuthorizationRequirementsStep.styles'
@@ -40,7 +41,8 @@ export const getTierIcon = (tier: TierCardProps['tier']) => {
 }
 
 export const TierCard = ({ reqs, tier }: TierCardProps) => {
-  const referralReward = getTierRewards(tier)?.referral
+  const signupMultiplier = tier === 'bronze' ? 1 : atlasConfig.features.ypp.tierBoostMultiplier || 1
+  const referralReward = (getTierRewards(tier)?.referral || 0) * signupMultiplier
   return (
     <Wrapper>
       <TierBanner tier={tier}>
@@ -50,12 +52,14 @@ export const TierCard = ({ reqs, tier }: TierCardProps) => {
             {capitalizeFirstLetter(tier)}
           </Text>
         </FlexBox>
-        <svg>
-          <filter id="noise">
-            <feTurbulence type="fractalNoise" baseFrequency="1" numOctaves="1" stitchTiles="stitch" />
-            <feBlend in="SourceGraphic" in2="colorNoise" mode="multiply" />
-          </filter>
-        </svg>
+        <div className="absolute-container">
+          <svg>
+            <filter id="noise">
+              <feTurbulence type="fractalNoise" baseFrequency="1" numOctaves="1" stitchTiles="stitch" />
+              <feBlend in="SourceGraphic" in2="colorNoise" mode="multiply" />
+            </filter>
+          </svg>
+        </div>
       </TierBanner>
 
       <ContentWrapper gap={2} flow="column">

packages/atlas/src/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-
+    <preference name="AllowInlineMediaPlayback" value="true" />
     <!--  The following node will be replaced by Optimize init script during Vite's build step (see ../plugins)  -->
     <optimize-script />
 

packages/atlas/src/providers/assets/assets.helpers.ts

@@ -48,7 +48,6 @@ export const testAssetDownload = (url: string, type: AssetType | null): Promise<
 
     const reject = (err?: unknown) => {
       cleanup()
-      UserEventsLogger.logAssetUploadFailedEvent({ resolvedUrl: url }, err as Error)
       _reject(err)
     }
 
@@ -76,10 +75,7 @@ export const testAssetDownload = (url: string, type: AssetType | null): Promise<
       video.src = url
     } else if (type === 'subtitles') {
       fetch(url, { method: 'HEAD', mode: 'cors', cache: 'no-store' })
-        .then((response) => {
-          if (!response.ok) {
-            UserEventsLogger.logAssetUploadFailedEvent({ resolvedUrl: url }, new Error(response.statusText))
-          }
+        .then(() => {
           resolve()
         })
         .catch(reject)

packages/atlas/src/views/global/ReferralsView/sections/ReferralSteps/ReferralSteps.tsx

@@ -130,7 +130,7 @@ export const ReferralSteps = () => {
           onMouseLeave={() => (shouldSwitch.current = true)}
         >
           <StepVideoContainer>
-            <StyledStepVideo ref={videoRef} autoPlay loop muted>
+            <StyledStepVideo ref={videoRef} playsInline autoPlay loop muted>
               <source src={videoSrcs[selectedStep]} type="video/mp4" />
             </StyledStepVideo>
           </StepVideoContainer>

packages/atlas/src/views/global/ReferralsView/sections/ReferralTiers/ReferralTiers.styles.ts

@@ -5,6 +5,7 @@ import { media, sizes, square } from '@/styles'
 
 export const TiersGraphicWrapper = styled.div`
   display: grid;
+  justify-content: center;
   grid-template-rows: 1fr 1fr;
   grid-template-columns: 2fr 1fr 2fr;
   gap: 0;

packages/atlas/src/views/global/ReferralsView/sections/ReferralsVideo/ReferralsVideo.tsx

@@ -39,7 +39,7 @@ export const ReferralsVideo = () => {
           </LogosContainer>
           <Text
             as="h1"
-            margin={{ top: 14 }}
+            margin={{ top: smMatch ? 14 : 8 }}
             variant={mainTitleVariant}
             data-aos="fade-up"
             data-aos-delay="250"

packages/atlas/src/views/global/ReferralsView/sections/TopReferrals/TopReferrals.tsx

@@ -50,7 +50,7 @@ export const TopReferrals = () => {
   const channelById = (id: string) => topReferrersChannels?.find((channel) => channel.channel.id === id)?.channel
 
   return (
-    <FlexBox flow="column" marginTop={mdMatch ? 24 : xsMatch ? 16 : 14} gap={18} alignItems="center">
+    <FlexBox flow="column" marginTop={mdMatch ? 24 : xsMatch ? 16 : 14} gap={xsMatch ? 18 : 12} alignItems="center">
       <Text
         as="h2"
         variant={titleVariant}