Release v4.6.0

CHANGELOG.md

@@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.6.0] - 2023-08-17
+
+### Added
+
+- Added New Segment events
+
+### Changed
+
+- Simplified YPP landing page
+- Changed YPP reward multipliers
+
+### Fixed
+
+- Fixed error with crashes when Google Translate is used
+- Fixed wrong channel balance
+- Minor bugfixes and improvements
+
 ## [4.5.1] - 2023-08-14
 
 ### Changed

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@joystream/atlas",
   "description": "UI for consuming Joystream - a user governed video platform",
-  "version": "4.5.1",
+  "version": "4.6.0",
   "license": "GPL-3.0",
   "scripts": {
     "start": "vite",

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`, {