feat: Refactor components

src/components/CharacterCounter/CharacterCounter.styled.ts

@@ -1,6 +1,5 @@
-import { Box, Typography, muiIcons, styled } from 'decentraland-ui2'
-
-const WarningAmberOutlinedIcon = muiIcons.WarningAmberOutlined
+import { Box, Typography, styled } from 'decentraland-ui2'
+import { ErrorText, WarningIcon } from '../shared/ErrorDisplay.styled'
 
 const CharacterCounter = styled(Box)({
   display: 'flex',
@@ -16,15 +15,4 @@ const CharacterCounterText = styled(Typography)<{ isError: boolean }>(({ isError
   margin: 0
 }))
 
-const WarningIcon = styled(WarningAmberOutlinedIcon)({
-  color: 'rgba(224, 0, 0, 1)',
-  height: '15px',
-  width: '15px'
-})
-
-const ErrorText = styled('span')({
-  color: 'rgba(224, 0, 0, 1)',
-  fontSize: '14px'
-})
-
 export { CharacterCounter, CharacterCounterText, WarningIcon, ErrorText }

src/components/Connection/Connection.types.ts

@@ -38,13 +38,15 @@ const connectionOptionTitles: { [key in ConnectionOptionType]: string } = {
 
 type MetamaskEthereumWindow = typeof window.ethereum & { isMetaMask?: boolean }
 
+type ConnectionOptions = {
+  primary: ConnectionOptionType
+  secondary?: ConnectionOptionType
+  extraOptions?: ConnectionOptionType[]
+}
+
 type ConnectionProps = {
   shouldShowGoogleOptionAsPrimary?: boolean
-  connectionOptions?: {
-    primary: ConnectionOptionType
-    secondary?: ConnectionOptionType
-    extraOptions?: ConnectionOptionType[]
-  }
+  connectionOptions?: ConnectionOptions
   className?: string
   loadingOption?: ConnectionOptionType
   isNewUser?: boolean
@@ -57,4 +59,4 @@ type ConnectionProps = {
 }
 
 export { SignInOptionsMode, ConnectionOptionType, connectionOptionTitles }
-export type { MetamaskEthereumWindow, ConnectionProps }
+export type { ConnectionOptions, MetamaskEthereumWindow, ConnectionProps }

src/components/Pages/AvatarSetupPage/AvatarSetupPage.styled.ts

@@ -1,12 +1,10 @@
 // eslint-disable-next-line @typescript-eslint/naming-convention
 import Lottie from 'lottie-react'
 import { brand, neutral } from 'decentraland-ui2/dist/theme/colors'
-import { Box, Button, Checkbox, FormControlLabel, Link, Logo, TextField, Typography, muiIcons, styled } from 'decentraland-ui2'
+import { Box, Button, Checkbox, FormControlLabel, Link, Logo, TextField, Typography, styled } from 'decentraland-ui2'
 // eslint-disable-next-line @typescript-eslint/naming-convention
 import SetupRightBackground from '../../../assets/images/setup-right-background.webp'
 
-const WarningAmberOutlinedIcon = muiIcons.WarningAmberOutlined
-
 const MainContainer = styled(Box)({
   display: 'flex',
   height: '100vh',
@@ -160,23 +158,6 @@ const TextInput = styled(TextField)<{ hasError?: boolean }>(({ hasError }) => ({
   }
 }))
 
-const ErrorContainer = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '4px'
-})
-
-const ErrorText = styled('span')({
-  color: 'rgba(224, 0, 0, 1)',
-  fontSize: '14px'
-})
-
-const WarningIcon = styled(WarningAmberOutlinedIcon)({
-  color: 'rgba(224, 0, 0, 1)',
-  height: '15px',
-  width: '15px'
-})
-
 const EmailDescription = styled(Typography)({
   fontSize: '14px',
   lineHeight: '100%',
@@ -292,10 +273,7 @@ export {
   InputContainer,
   InputLabel,
   TextInput,
-  ErrorContainer,
   ErrorLabel,
-  ErrorText,
-  WarningIcon,
   EmailDescription,
   CheckboxContainer,
   CheckboxRow,
@@ -307,3 +285,5 @@ export {
   AvatarParticles,
   PreloadedWearableContainer
 }
+
+export { ErrorContainer, ErrorText, WarningIcon } from '../../shared/ErrorDisplay.styled'

src/components/Pages/AvatarSetupPage/AvatarSetupPage.tsx

@@ -1,31 +1,30 @@
 // eslint-disable-next-line @typescript-eslint/naming-convention
 import * as React from 'react'
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { useTranslation } from '@dcl/hooks'
-import { EthAddress } from '@dcl/schemas'
 import { PreviewUnityMode } from '@dcl/schemas/dist/dapps/preview'
 import { CircularProgress, WearablePreview, launchDesktopApp } from 'decentraland-ui2'
 import avatarFloat from '../../../assets/animations/AvatarFloat_Lottie.json'
 import avatarParticles from '../../../assets/animations/AvatarParticles_Lottie.json'
 import { useNavigateWithSearchParams } from '../../../hooks/navigation'
 import { useAfterLoginRedirection } from '../../../hooks/redirection'
 import { useAnalytics } from '../../../hooks/useAnalytics'
+import { usePostSignupActions } from '../../../hooks/usePostSignupActions'
+import { useRequestIdFromRedirect } from '../../../hooks/useRequestIdFromRedirect'
+import { useRequireAuth } from '../../../hooks/useRequireAuth'
 import { useSignRequest } from '../../../hooks/useSignRequest'
-import { useTrackReferral } from '../../../hooks/useTrackReferral'
 import { config } from '../../../modules/config'
 import { fetchProfile } from '../../../modules/profile'
 import { IpValidationError, createAuthServerHttpClient, createAuthServerWsClient } from '../../../shared/auth'
-import { useCurrentConnectionData } from '../../../shared/connection/hooks'
 import { isEmailValid } from '../../../shared/email'
 import { locations } from '../../../shared/locations'
 import { isProfileComplete } from '../../../shared/profile'
 import { handleError } from '../../../shared/utils/errorHandler'
 import { checkWebGpuSupport } from '../../../shared/utils/webgpu'
 import { AnimatedBackground } from '../../AnimatedBackground'
 import { CharacterCounterComponent } from '../../CharacterCounter'
-import { FeatureFlagsContext, FeatureFlagsKeys } from '../../FeatureFlagsProvider'
-import { subscribeToNewsletter } from '../SetupPage/utils'
+import { FeatureFlagsKeys } from '../../FeatureFlagsProvider'
 import { deployProfileFromAvatarShape } from './utils'
 import { AvatarSetupState, AvatarShape } from './AvatarSetupPage.types'
 import {
@@ -62,16 +61,14 @@ const MAX_CHARACTERS = 15
 
 const AvatarSetupPage: React.FC = () => {
   const { t } = useTranslation()
-  const hasTrackedReferral = useRef(false)
   const [urlSearchParams] = useSearchParams()
-  const { flags, initialized: initializedFlags } = useContext(FeatureFlagsContext)
+  const { isReady, isAuthenticated, flags, account, identity, provider } = useRequireAuth()
   const [initialized, setInitialized] = useState(false)
   const { url: redirectTo, redirect } = useAfterLoginRedirection()
-  const { isLoading: isConnecting, account, identity, provider } = useCurrentConnectionData()
   const { signRequest, authServerClient } = useSignRequest(redirect)
   const navigate = useNavigateWithSearchParams()
   const referrer = urlSearchParams.get('referrer')
-  const { track: trackReferral } = useTrackReferral()
+  const { trackReferralOnDeploy, trackReferralOnInit, subscribeEmail } = usePostSignupActions(referrer)
   const { trackClick, trackAvatarEditSuccess, trackTermsOfServiceSuccess, trackCheckTermsOfService } = useAnalytics()
 
   const [state, setState] = useState<AvatarSetupState>({
@@ -92,18 +89,7 @@ const AvatarSetupPage: React.FC = () => {
 
   const [isAvatarParticlesAnimationEnded, setIsAvatarParticlesAnimationEnded] = useState(false)
 
-  const requestId = useMemo(() => {
-    const redirectTo = urlSearchParams.get('redirectTo')
-    let requestId: string | null = null
-    try {
-      const url = new URL(redirectTo ?? '', window.location.origin)
-      const regex = /^\/?auth\/requests\/([a-zA-Z0-9-]+)$/
-      requestId = url.pathname.match(regex)?.[1] ?? null
-    } catch {
-      // Do nothing
-    }
-    return requestId
-  }, [urlSearchParams])
+  const requestId = useRequestIdFromRedirect()
 
   const characterCount = useMemo(() => state.username.length, [state.username])
 
@@ -202,22 +188,8 @@ const AvatarSetupPage: React.FC = () => {
           avatarShape
         })
 
-        if (referrer && EthAddress.validate(referrer)) {
-          try {
-            await trackReferral(referrer, 'PATCH')
-          } catch {
-            // Error is already handled in trackReferral
-          }
-        }
-
-        // Subscribe to the newsletter only if the user has provided an email
-        if (state.email) {
-          try {
-            await subscribeToNewsletter(state.email)
-          } catch (e) {
-            handleError(e, 'Error subscribing to newsletter', { skipTracking: true })
-          }
-        }
+        await trackReferralOnDeploy()
+        await subscribeEmail(state.email)
 
         const storedEmail = localStorage.getItem('dcl_magic_user_email')
         if (storedEmail) {
@@ -260,14 +232,14 @@ const AvatarSetupPage: React.FC = () => {
       state.email,
       account,
       identity,
-      referrer,
       requestId,
       provider,
       flags,
       redirect,
       signRequest,
       trackClick,
-      trackReferral,
+      trackReferralOnDeploy,
+      subscribeEmail,
       trackTermsOfServiceSuccess,
       isProcessingMessage
     ]
@@ -310,13 +282,10 @@ const AvatarSetupPage: React.FC = () => {
       console.warn('Failed to get user email from localStorage:', error)
     }
 
-    if (referrer && EthAddress.validate(referrer) && !hasTrackedReferral.current) {
-      await trackReferral(referrer, 'POST')
-      hasTrackedReferral.current = true
-    }
+    await trackReferralOnInit()
 
     setInitialized(true)
-  }, [account, flags, provider, referrer, redirect, trackReferral])
+  }, [account, flags, provider, redirect, trackReferralOnInit])
 
   useEffect(() => {
     window.addEventListener('message', handleMessage, false)
@@ -332,9 +301,9 @@ const AvatarSetupPage: React.FC = () => {
   }, [state.hasWearablePreviewLoaded])
 
   useEffect(() => {
-    if (isConnecting || !initializedFlags) return
+    if (!isReady) return
 
-    if (!account || !identity) {
+    if (!isAuthenticated) {
       console.warn('No previous connection found')
       return navigate(locations.login(redirectTo, referrer))
     }
@@ -345,7 +314,7 @@ const AvatarSetupPage: React.FC = () => {
       }
       initializeAvatarSetup()
     })
-  }, [initializeAvatarSetup, account, identity, isConnecting, initializedFlags, navigate, redirectTo, referrer])
+  }, [initializeAvatarSetup, account, identity, isReady, isAuthenticated, navigate, redirectTo, referrer])
 
   if (!initialized) {
     return (

src/components/Pages/LoginPage/LoginPage.styled.ts

@@ -1,4 +1,5 @@
 import { Box, keyframes, styled } from 'decentraland-ui2'
+import { desktopLinearGradient, gradientPseudoElement, mobileLinearGradient } from '../../shared/GradientBackground.styled'
 
 const moveBackground = keyframes({
   from: {
@@ -20,15 +21,8 @@ const Main = styled('main')(({ theme }) => ({
   minWidth: 0,
   boxSizing: 'border-box',
   ['&::before']: {
-    content: '""',
-    position: 'fixed',
-    width: '100%',
-    height: '350%',
-    background:
-      'linear-gradient(89.65deg, rgba(149, 45, 198, 0) 29.59%, rgba(94, 30, 130, 0.559754) 39.08%, rgba(75, 25, 106, 0.750004) 45.36%, rgba(64, 23, 93, 0.859976) 54.22%, #32134C 72.84%)',
-    top: '-100%',
-    transform: 'rotate(180deg)',
-    overflow: 'hidden'
+    ...(gradientPseudoElement as object),
+    background: desktopLinearGradient
   },
   [theme.breakpoints.down('lg')]: {
     gridTemplateColumns: '50% 50%'
@@ -37,7 +31,7 @@ const Main = styled('main')(({ theme }) => ({
     display: 'flex',
     height: 'auto',
     ['&::before']: {
-      background: 'linear-gradient(151.89deg, #491975 47.67%, #D72CCD 103.3%)'
+      background: mobileLinearGradient
     }
   }
 }))

src/components/Pages/MobileAuthPage/MobileAuthPage.styled.ts

@@ -1,4 +1,5 @@
 import { Box, styled } from 'decentraland-ui2'
+import { desktopRadialGradient, gradientPseudoElement, mobileRadialGradient } from '../../shared/GradientBackground.styled'
 
 const Main = styled(Box)({
   display: 'flex',
@@ -13,19 +14,13 @@ const Main = styled(Box)({
   padding: '20vh 20px 0',
   boxSizing: 'border-box',
   ['&::before']: {
-    content: '""',
-    position: 'fixed',
-    width: '100%',
-    height: '350%',
-    background: 'radial-gradient(ellipse at 0 50%, transparent 10%, #e02dd3 40%, #491975 70%)',
-    top: '-100%',
-    transform: 'rotate(180deg)',
-    overflow: 'hidden',
+    ...(gradientPseudoElement as object),
+    background: desktopRadialGradient,
     zIndex: -1
   },
   ['@media screen and (max-width: 800px)']: {
     ['&::before']: {
-      background: 'radial-gradient(ellipse at 0 50%, #e02dd3 0%, #491975 70%)'
+      background: mobileRadialGradient
     }
   }
 })

src/components/Pages/RequestPage/Views/RecoverError.styled.ts

@@ -1,7 +1 @@
-import { muiIcons, styled } from 'decentraland-ui2'
-
-const ErrorMessageIcon = styled(muiIcons.ErrorOutline)({
-  color: '#fb3b3b'
-})
-
-export { ErrorMessageIcon }
+export { ErrorMessageIcon } from '../../../shared/ErrorDisplay.styled'