Referrals landing page (#5214)

* referrals landing page init

* fixed images imports

* CR fixes, referrals banner

* increased video playback rate

* hide layers section

* CR fixes, animations, styling

* design fixes

* fixed video aspect, session gap

* fixed section gaps

* bugfix, styling fix, refactoring

* fixed banner width in studio, removed video speed increase

* fixed main video width

* fixed step border, disabled steps selection for passed steps

---------

Co-authored-by: Artem <Artem Slugin>

packages/atlas/atlas.config.yml

@@ -264,6 +264,9 @@ features:
     statusPollingInterval: 20000 # Interval for polling NFT status on VideoView in ms
   notifications:
     pollingInterval: 10000 # Interval for polling notifications in ms
+  referrals:
+    referrerBonusPercent: 5 # How much referrer would get from the invitee reward
+    signupBonusPercent: 5 # How much invitee would get from the referral link signup
   members:
     avatarServiceUrl: '$VITE_AVATAR_SERVICE_URL' # URL for avatar service - used to upload member's avatar
     hcaptchaSiteKey: '$VITE_HCAPTCHA_SITE_KEY' # Site key for hCaptcha - used to verify users are not bots when creating memberships - depends on hCaptcha being enabled in the faucet

packages/atlas/package.json

@@ -5,7 +5,7 @@
   "license": "GPL-3.0",
   "scripts": {
     "start": "vite",
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build -o dist-storybook",

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://50.19.175.219.nip.io
+VITE_YOUTUBE_SYNC_API_URL=https://35.156.81.207.nip.io
 VITE_YOUTUBE_COLLABORATOR_MEMBER_ID=18
 
 # Analytics tools

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

@@ -0,0 +1,45 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgPulseLineCurved = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg width={182} height={70} viewBox="0 0 182 70" fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+    <mask
+      id="mask0_1487_14631"
+      style={{
+        maskType: 'alpha',
+      }}
+      maskUnits="userSpaceOnUse"
+      x={0}
+      y={0}
+      width={182}
+      height={70}
+    >
+      <path d="M181 1H65C29.654 1 1 29.654 1 65v4" stroke="#000" strokeWidth={2} strokeLinecap="round" />
+    </mask>
+    <g mask="url(#mask0_1487_14631)">
+      <path
+        transform="matrix(-.56317 -.82634 -.89831 .43936 234.728 6.304)"
+        fill="url(#paint0_linear_1487_14631)"
+        d="M0 0h122.402v258.829H0z"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_1487_14631"
+        x1={61.201}
+        y1={0}
+        x2={61.201}
+        y2={258.829}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#007DFF" stopOpacity={0} />
+        <stop offset={0.307} stopColor="#007DFF" />
+        <stop offset={0.813} stopColor="#AFD5FC" />
+        <stop offset={1} stopColor="#AFD5FC" stopOpacity={0} />
+      </linearGradient>
+    </defs>
+  </svg>
+))
+SvgPulseLineCurved.displayName = 'SvgPulseLineCurved'
+const Memo = memo(SvgPulseLineCurved)
+export { Memo as SvgPulseLineCurved }

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

@@ -0,0 +1,41 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgPulseLineStraight = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg width={3} height={58} viewBox="0 0 3 58" fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+    <mask
+      id="mask0_1487_14602"
+      style={{
+        maskType: 'alpha',
+      }}
+      maskUnits="userSpaceOnUse"
+      x={0}
+      y={0}
+      width={3}
+      height={85}
+    >
+      <path d="M1.761 2v81.63" stroke="#007DFF" strokeWidth={2.148} strokeLinecap="round" />
+    </mask>
+    <g mask="url(#mask0_1487_14602)">
+      <path fill="url(#paint0_linear_1487_14602)" d="M-12.202.926h27.926v56.926h-27.926z" />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_1487_14602"
+        x1={1.761}
+        y1={0.926}
+        x2={1.761}
+        y2={57.852}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#007DFF" stopOpacity={0} />
+        <stop offset={0.307} stopColor="#007DFF" />
+        <stop offset={0.813} stopColor="#AFD5FC" />
+        <stop offset={1} stopColor="#AFD5FC" stopOpacity={0} />
+      </linearGradient>
+    </defs>
+  </svg>
+))
+SvgPulseLineStraight.displayName = 'SvgPulseLineStraight'
+const Memo = memo(SvgPulseLineStraight)
+export { Memo as SvgPulseLineStraight }

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

@@ -0,0 +1,20 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgSidebarReferrals = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg width={22} height={18} viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15 0a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 4a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"
+      fill="#F4F6F8"
+    />
+    <path
+      d="M5 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM11.5 16H20v-1a3 3 0 0 0-3-3h-4a3 3 0 0 0-3 3v1.5H8V15c0-.342.034-.677.1-1H4v-2h3.991A2.2 2.2 0 0 0 5.8 10H4a2 2 0 0 0-2 2v2H0v-2a4 4 0 0 1 4-4h1.8a4.202 4.202 0 0 1 4.057 3.11A4.98 4.98 0 0 1 13 10h4a5 5 0 0 1 5 5v1a2 2 0 0 1-2 2h-8.5v-2Z"
+      fill="#F4F6F8"
+    />
+  </svg>
+))
+SvgSidebarReferrals.displayName = 'SvgSidebarReferrals'
+const Memo = memo(SvgSidebarReferrals)
+export { Memo as SvgSidebarReferrals }

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

@@ -250,6 +250,8 @@ export * from './LogoWhatsAppOnDark'
 export * from './LogoWhatsAppOnLight'
 export * from './LogoYoutubeWhiteFull'
 export * from './LogoYoutube'
+export * from './PulseLineCurved'
+export * from './PulseLineStraight'
 export * from './SidebarChannel'
 export * from './SidebarChannels'
 export * from './SidebarExplore'
@@ -263,6 +265,7 @@ export * from './SidebarNft'
 export * from './SidebarPayments'
 export * from './SidebarPlaylist'
 export * from './SidebarPopular'
+export * from './SidebarReferrals'
 export * from './SidebarSettings'
 export * from './SidebarToken'
 export * from './SidebarUpload'

packages/atlas/src/components/Avatar/Avatar.styles.ts

@@ -8,7 +8,7 @@ import { AssetImage } from '@/components/AssetImage'
 import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
 import { cVar, square, zIndex } from '@/styles'
 
-export type AvatarSize = 136 | 104 | 88 | 40 | 32 | 24
+export type AvatarSize = 136 | 104 | 88 | 56 | 40 | 32 | 24
 
 type ContainerProps = {
   size: AvatarSize

packages/atlas/src/components/Banner/Banner.styles.ts

@@ -1,8 +1,9 @@
+import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
-import { cVar, sizes } from '@/styles'
+import { cVar, media, sizes } from '@/styles'
 
 export const BannerHeader = styled.div`
   width: 100%;
@@ -20,9 +21,18 @@ export const BannerText = styled(Text)`
   flex: 1;
 `
 
-export const CloseButton = styled(Button)`
+export const CloseButton = styled(Button)<{ rightActionButton?: boolean }>`
   margin-left: ${sizes(4)};
   align-self: start;
+
+  ${({ rightActionButton }) =>
+    rightActionButton &&
+    css`
+      align-self: start;
+      ${media.sm} {
+        align-self: center;
+      }
+    `}
 `
 
 export const BannerDescription = styled.div<{ withTitle?: boolean }>`
@@ -43,8 +53,8 @@ export const BannerWrapper = styled.div<{ size: 'small' | 'medium'; borderColor?
   border-left: 2px solid ${({ borderColor }) => borderColor ?? cVar('colorBorderPrimary')};
 `
 
-export const ActionButton = styled(Button)`
-  margin-top: ${sizes(2)};
+export const ActionButton = styled(Button)<{ rightActionButton?: boolean }>`
+  margin-top: ${({ rightActionButton }) => (rightActionButton ? 0 : sizes(2))};
 `
 
 export const Container = styled.div`

packages/atlas/src/components/Banner/Banner.tsx

@@ -1,7 +1,9 @@
 import { FC, ReactNode } from 'react'
 
 import { SvgActionClose } from '@/assets/icons'
+import { FlexBox } from '@/components/FlexBox'
 import { ButtonProps } from '@/components/_buttons/Button'
+import { useMediaMatch } from '@/hooks/useMediaMatch'
 import { usePersonalDataStore } from '@/providers/personalData'
 
 import {
@@ -29,6 +31,8 @@ export type BannerProps = {
   icon?: ReactNode
   size?: 'small' | 'medium'
   actionButton?: ActionButtonProps
+  rightActionButton?: boolean
+  children?: ReactNode
 }
 
 export const Banner: FC<BannerProps> = ({
@@ -40,20 +44,22 @@ export const Banner: FC<BannerProps> = ({
   dismissibleId,
   size = 'small',
   actionButton,
+  rightActionButton,
+  children,
 }) => {
   const isDismissedMessage =
     usePersonalDataStore((state) => state.dismissedMessages.some((message) => message.id === dismissibleId)) &&
     !!dismissibleId
   const updateDismissedMessages = usePersonalDataStore((state) => state.actions.updateDismissedMessages)
-
+  const smMatch = useMediaMatch('sm')
   if (isDismissedMessage) {
     return null
   }
 
   return (
     <BannerWrapper size={size} className={className} borderColor={borderColor}>
       <Container>
-        <div>
+        <FlexBox flow="column">
           {title && (
             <BannerHeader>
               {icon && <IconWrapper>{icon}</IconWrapper>}
@@ -70,21 +76,30 @@ export const Banner: FC<BannerProps> = ({
               </BannerText>
             </BannerDescription>
           )}
-          {actionButton && (
-            <ActionButton {...actionButton} variant="primary" _textOnly>
+          {actionButton && (!rightActionButton || !smMatch) && (
+            <ActionButton variant="primary" _textOnly {...actionButton}>
               {actionButton.text}
             </ActionButton>
           )}
-        </div>
-        {dismissibleId && (
-          <CloseButton
-            icon={<SvgActionClose />}
-            aria-label="close dialog"
-            onClick={() => updateDismissedMessages(dismissibleId)}
-            variant="tertiary"
-            size="small"
-          />
-        )}
+        </FlexBox>
+        <FlexBox flow="row" justifyContent="end" alignItems="center">
+          {actionButton && rightActionButton && smMatch && (
+            <ActionButton variant="primary" rightActionButton _textOnly {...actionButton}>
+              {actionButton.text}
+            </ActionButton>
+          )}
+          {dismissibleId && (
+            <CloseButton
+              icon={<SvgActionClose />}
+              aria-label="close dialog"
+              rightActionButton
+              onClick={() => updateDismissedMessages(dismissibleId)}
+              variant="tertiary"
+              size="small"
+            />
+          )}
+        </FlexBox>
+        {children}
       </Container>
     </BannerWrapper>
   )

packages/atlas/src/components/FlexBox/FlexBox.ts

@@ -3,7 +3,7 @@ import styled from '@emotion/styled'
 
 import { sizes } from '@/styles'
 
-type FlexBoxProps = {
+export type FlexBoxProps = {
   gap?: number
   flow?: 'row' | 'column' | 'column-reverse' | 'row-reverse'
   alignItems?: string

packages/atlas/src/components/LayoutGrid/LayoutGrid.tsx

@@ -10,6 +10,7 @@ export const LayoutGrid = styled.div<{ gap?: number }>`
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-gap: 16px;
+  width: 100%;
 
   ${media.md} {
     grid-gap: 24px;

packages/atlas/src/components/Text/Text.styles.ts

@@ -21,7 +21,7 @@ type MarginProps =
     }
   | number
 
-type AlignProps = 'left' | 'center' | 'right' | 'justify' | 'end'
+export type AlignProps = 'left' | 'center' | 'right' | 'justify' | 'end'
 
 const alignStyles = ({ align }: TextBaseProps) =>
   !!align &&

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

@@ -6,6 +6,7 @@ import {
   SvgActionNewTab,
   SvgSidebarHome,
   SvgSidebarMarketplace,
+  SvgSidebarReferrals,
   SvgSidebarYpp,
 } from '@/assets/icons'
 import { AppLogo } from '@/components/AppLogo'
@@ -47,6 +48,12 @@ export const viewerNavItems = [
         },
       ]
     : []),
+  {
+    icon: <SvgSidebarReferrals />,
+    name: 'Referrals',
+    expandedName: 'Referrals program',
+    to: absoluteRoutes.viewer.referrals(),
+  },
 ]
 export const SidenavViewer: FC = () => {
   const [expanded, setExpanded] = useState(false)

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

@@ -102,7 +102,7 @@ export const TopbarViewer: FC = () => {
 
   const topbarButtonLoading = isAuthenticating || membershipsLoading
 
-  if (pathname === absoluteRoutes.viewer.ypp()) {
+  if ((pathname === absoluteRoutes.viewer.referrals() && mdMatch) || pathname === absoluteRoutes.viewer.ypp()) {
     return null
   }