Merge remote-tracking branch 'Joystream/dev'

packages/atlas/atlas.config.yml

@@ -75,7 +75,7 @@ features:
           - Get rewarded for every new video synced to $VITE_APP_NAME. Min length of rewarded video is 5 minutes. Sync rewards capped to 3 per week.
         baseAmount: null
         baseUsdAmount: 1
-        customMultiplier: [1, 5, 10]
+        customMultiplier: [1, 2, 5]
       - 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.

packages/atlas/src/components/NumberFormat/NumberFormat.tsx

@@ -92,7 +92,7 @@ export const NumberFormat = forwardRef<HTMLHeadingElement, NumberFormatProps>(
             variant={variant}
             ref={denominationRef}
           >
-            ({formattedDenominatedValue !== '<$0.01' ? '$' : ''}
+            ({formattedDenominatedValue !== '<$0.01' ? <span>$</span> : null}
             {formattedDenominatedValue}){' '}
           </Text>
         )}
@@ -103,7 +103,7 @@ export const NumberFormat = forwardRef<HTMLHeadingElement, NumberFormatProps>(
           withToken={withToken}
           ref={mergeRefs([ref, textRef])}
         >
-          {displayedValue || formattedValue}
+          {displayedValue ? <span>{displayedValue}</span> : <span>{formattedValue}</span>}
         </StyledText>
         {withDenomination === 'after' && (
           <Text
@@ -114,7 +114,7 @@ export const NumberFormat = forwardRef<HTMLHeadingElement, NumberFormatProps>(
             ref={denominationRef}
           >
             {' '}
-            ({formattedDenominatedValue !== '<$0.01' ? '$' : ''}
+            ({formattedDenominatedValue !== '<$0.01' ? <span>$</span> : null}
             {formattedDenominatedValue}){' '}
           </Text>
         )}
@@ -142,7 +142,7 @@ export const NumberFormat = forwardRef<HTMLHeadingElement, NumberFormatProps>(
                 variant="t100"
                 ref={denominationRef}
               >
-                {formattedDenominatedValue !== '<$0.01' ? '$' : ''}
+                {formattedDenominatedValue !== '<$0.01' ? <span>$</span> : null}
                 {formattedDenominatedValue}
               </Denomination>
             )}

packages/atlas/src/components/Searchbar/SearchBox/ResultTitle.tsx

@@ -1,4 +1,4 @@
-import { FC, Fragment } from 'react'
+import { FC } from 'react'
 
 import { SPECIAL_CHARACTERS } from '@/config/regex'
 
@@ -14,7 +14,7 @@ export const ResultTitle: FC<ResultTitleProps> = ({ title, query }) => {
     return null
   }
   if (!query) {
-    return <>{title}</>
+    return <span>{title}</span>
   }
 
   const filteredQuery = query.replace(SPECIAL_CHARACTERS, '\\$&').replace(/\s+/g, '|')
@@ -23,7 +23,7 @@ export const ResultTitle: FC<ResultTitleProps> = ({ title, query }) => {
   const match = title.match(regex)
 
   if (!match || !match.length) {
-    return <>{title}</>
+    return <span>{title}</span>
   }
 
   return (
@@ -32,7 +32,7 @@ export const ResultTitle: FC<ResultTitleProps> = ({ title, query }) => {
         if (match.includes(word)) {
           return <HighlightedWord key={`${word}-${idx}`}>{word} </HighlightedWord>
         }
-        return <Fragment key={`${word}-${idx}`}>{word} </Fragment>
+        return <span key={`${word}-${idx}`}>{word} </span>
       })}
     </>
   )

packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInModal.tsx

@@ -64,7 +64,8 @@ export const ExternalSignInModal: FC = () => {
   }, [currentStep])
 
   useEffect(() => {
-    authModalOpenName === 'externalLogIn' && trackPageView(stepToPageName[currentStep] ?? '')
+    authModalOpenName === 'externalLogIn' &&
+      trackPageView(stepToPageName[currentStep] ?? 'External login - unknown page')
   }, [authModalOpenName, currentStep, trackPageView])
 
   const renderStep = () => {

packages/atlas/src/components/_auth/LogInModal/LogInModal.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import shallow from 'zustand/shallow'
@@ -10,6 +10,7 @@ import { Input } from '@/components/_inputs/Input'
 import { DialogModal } from '@/components/_overlays/DialogModal'
 import { atlasConfig } from '@/config'
 import { useHidePasswordInInput } from '@/hooks/useHidePasswordInInput'
+import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
 import { useAuth } from '@/providers/auth/auth.hooks'
 import { useAuthStore } from '@/providers/auth/auth.store'
 import { LogInErrors } from '@/providers/auth/auth.types'
@@ -25,11 +26,16 @@ export const LogInModal = () => {
   const { handleLogin, refetchCurrentUser } = useAuth()
   const { displaySnackbar } = useSnackbar()
   const [hidePasswordProps] = useHidePasswordInInput()
+  const { trackPageView } = useSegmentAnalytics()
 
   const setYppModalOpenName = useYppStore((state) => state.actions.setYppModalOpenName)
 
   const shouldContinueYppFlowAfterLogin = useYppStore((store) => store.shouldContinueYppFlowAfterLogin)
 
+  useEffect(() => {
+    trackPageView('Log In')
+  }, [trackPageView])
+
   const {
     register,
     handleSubmit: _handleSubmit,

packages/atlas/src/components/_auth/SignUpModal/SignUpModal.tsx

@@ -45,7 +45,7 @@ const stepToPageName: Partial<Record<SignUpSteps, string>> = {
   [SignUpSteps.SignUpSeed]: 'Signup modal - seed',
   [SignUpSteps.SignUpPassword]: 'Signup modal - password',
   [SignUpSteps.SignUpEmail]: 'Signup modal - email',
-  [SignUpSteps.Creating]: 'Signup modal - creating',
+  [SignUpSteps.Creating]: 'Signup modal - creating account',
   [SignUpSteps.Success]: 'Signup modal - success',
 }
 
@@ -308,7 +308,8 @@ export const SignUpModal = () => {
   }, [isSuccess, signUpFormData.current.email, signUpFormData.current.handle, trackMembershipCreation])
 
   useEffect(() => {
-    authModalOpenName === 'signUp' && trackPageView(stepToPageName[currentStep] ?? '', { isYppFlow })
+    authModalOpenName === 'signUp' &&
+      trackPageView(stepToPageName[currentStep] ?? 'Sign up - unknown page', { isYppFlow })
   }, [authModalOpenName, currentStep, isYppFlow, trackPageView])
 
   const smMatch = useMediaMatch('sm')

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

@@ -1,5 +1,5 @@
 import { ChangeEvent, FC, MouseEvent, useCallback, useEffect, useState } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useSearchParams } from 'react-router-dom'
 import { CSSTransition, SwitchTransition } from 'react-transition-group'
 import shallow from 'zustand/shallow'
 
@@ -12,6 +12,7 @@ import { NotificationsWidget } from '@/components/_notifications/NotificationsWi
 import { MemberDropdown } from '@/components/_overlays/MemberDropdown'
 import { QUERY_PARAMS, absoluteRoutes } from '@/config/routes'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
+import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
 import { getMemberAvatar } from '@/providers/assets/assets.helpers'
 import { getCorrectLoginModal } from '@/providers/auth/auth.helpers'
 import { useAuth } from '@/providers/auth/auth.hooks'
@@ -35,6 +36,9 @@ import {
 export const TopbarViewer: FC = () => {
   const { activeMembership, isLoggedIn, membershipsLoading } = useUser()
   const { isAuthenticating } = useAuth()
+  const [searchParams] = useSearchParams()
+  const [utmSource, utmCampaign] = [searchParams.get('utm_source'), searchParams.get('utm_campaign')]
+  const { trackClickTopBarSignInButton } = useSegmentAnalytics()
   const [isMemberDropdownActive, setIsMemberDropdownActive] = useState(false)
 
   const { urls: memberAvatarUrls, isLoadingAsset: memberAvatarLoading } = getMemberAvatar(activeMembership)
@@ -98,6 +102,10 @@ export const TopbarViewer: FC = () => {
 
   const topbarButtonLoading = isAuthenticating || membershipsLoading
 
+  if (pathname === absoluteRoutes.viewer.ypp()) {
+    return null
+  }
+
   return (
     <>
       <StyledTopbarBase
@@ -156,7 +164,10 @@ export const TopbarViewer: FC = () => {
                         icon={<SvgActionMember />}
                         iconPlacement="left"
                         size="medium"
-                        onClick={() => setAuthModalOpenName(getCorrectLoginModal())}
+                        onClick={() => {
+                          trackClickTopBarSignInButton(utmSource, utmCampaign)
+                          setAuthModalOpenName(getCorrectLoginModal())
+                        }}
                       >
                         Sign in
                       </Button>

packages/atlas/src/components/_overlays/SendTransferDialogs/WithdrawFundsDialog.tsx

@@ -11,6 +11,7 @@ import { FormField } from '@/components/_inputs/FormField'
 import { TokenInput } from '@/components/_inputs/TokenInput'
 import { DialogModal } from '@/components/_overlays/DialogModal'
 import { atlasConfig } from '@/config'
+import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
 import { hapiBnToTokenNumber, tokenNumberToHapiBn } from '@/joystream-lib/utils'
 import { useFee, useJoystream, useTokenPrice } from '@/providers/joystream'
 import { useTransaction } from '@/providers/transactions/transactions.hooks'
@@ -55,6 +56,7 @@ export const WithdrawFundsDialog: FC<WithdrawFundsDialogProps> = ({
     setValue,
     formState: { errors },
   } = useForm<{ amount: number | null }>()
+  const { trackWithdrawnFunds } = useSegmentAnalytics()
   const { fetchPaymentsData } = useChannelPaymentsHistory(channelId || '')
   const { convertHapiToUSD } = useTokenPrice()
   const amountBn = tokenNumberToHapiBn(watch('amount') || 0)
@@ -93,6 +95,7 @@ export const WithdrawFundsDialog: FC<WithdrawFundsDialogProps> = ({
           ),
         onTxSync: async () => {
           fetchPaymentsData()
+          trackWithdrawnFunds(channelId, formatNumber(data.amount || 0))
           onExitClick()
         },
       })

packages/atlas/src/hooks/useGetAssetUrl.ts

@@ -39,7 +39,7 @@ export const getSingleAssetUrl = async (
       promises.push(assetTestPromise)
     }
 
-    Promise.race(promises)
+    Promise.any(promises)
       .then(res)
       .catch((error) => {
         ConsoleLogger.warn(`Error during fallback asset promise race`, {