feat: discover explorer alpha from /play

package.json

@@ -80,4 +80,4 @@
     "node": "^20"
   },
   "homepage": ""
-}
+}

src/components/start/Start.container.ts

@@ -7,6 +7,7 @@ import {
 } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import { LOAD_PROFILE_REQUEST } from 'decentraland-dapps/dist/modules/profile/actions'
 import { getProfileOfAddress, getLoading } from 'decentraland-dapps/dist/modules/profile/selectors'
+import { FeatureFlags, isFeatureEnabled } from '../../state/selectors'
 import { StoreType } from '../../state/redux'
 import { MapStateProps } from './Start.types'
 import Start from './Start'
@@ -22,6 +23,7 @@ const mapStateToProps = (state: StoreType): MapStateProps => {
     isConnected: isWalletConnected,
     hasInitializedConnection: getError(state) !== null || isWalletConnected || isWalletConnecting,
     isLoadingProfile: getLoading(state).some((a) => a.type === LOAD_PROFILE_REQUEST),
+    isDiscoverExplorerAlphaEnabled: isFeatureEnabled(state, FeatureFlags.DiscoverExplorerAlpha),
     profile: (wallet?.address && getProfileOfAddress(state, wallet?.address)) || null
   }
 }

src/components/start/Start.css

@@ -101,3 +101,71 @@
   bottom: 20px;
   right: 20px;
 }
+
+.ui.dimmer.explorer-alpha-notice-dimmer {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.ui.modal.explorer-alpha-notice {
+  width: 480px;
+}
+
+.ui.modal.explorer-alpha-notice .content {
+  display: flex;
+  flex-direction: column;
+  padding: 32px;
+  margin: 0px;
+  align-items: stretch;
+}
+
+.ui.modal.explorer-alpha-notice .content .header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.ui.modal.explorer-alpha-notice .content .header .icon {
+  background-image: url('./images/launch-desktop.svg');
+  width: 225px;
+  height: 150px;
+  margin-bottom: 12px;
+}
+
+.ui.modal.explorer-alpha-notice .content .header .title {
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 39.52px;
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.ui.modal.explorer-alpha-notice .content .header .text {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+  color: #5d5b67;
+  margin-bottom: 24px;
+}
+
+.ui.modal.explorer-alpha-notice .content .actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ui.modal.explorer-alpha-notice .content .actions .ui.button + .ui.button {
+  margin: 0px;
+}
+.ui.modal.explorer-alpha-notice .content .actions .ui.button:hover {
+  transform: none;
+  box-shadow: none;
+}
+
+.ui.modal.explorer-alpha-notice .content .actions .ui.button:not(.primary) {
+  background-color: transparent;
+  color: var(--primary);
+}
+
+.ui.modal.explorer-alpha-notice .content .actions .ui.button:not(.primary):hover {
+  background-color: rgba(var(--summer-red-raw), 0.1);
+}

src/components/start/Start.tsx

@@ -1,10 +1,13 @@
 import { useCallback, useEffect, useState } from 'react'
 import { CommunityBubble } from 'decentraland-ui/dist/components/CommunityBubble'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
+import { Modal } from 'decentraland-ui/dist/components/Modal/Modal'
+import { ModalNavigation } from 'decentraland-ui/dist/components/ModalNavigation/ModalNavigation'
 import { Loader } from 'decentraland-ui/dist/components/Loader/Loader'
 import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon/Icon'
 import { localStorageGetIdentity } from '@dcl/single-sign-on-client'
 import { SKIP_SETUP } from '../../integration/url'
+import { launchDesktopApp } from '../../integration/desktop'
 import { CustomWearablePreview } from '../common/CustomWearablePreview'
 import BannerContainer from '../banners/BannerContainer'
 import logo from '../../images/simple-logo.svg'
@@ -34,9 +37,18 @@ const useLocalStorageListener = (key: string) => {
 }
 
 export default function Start(props: Props) {
-  const { isConnected, isConnecting, wallet, profile, initializeKernel, isLoadingProfile, hasInitializedConnection } =
-    props
+  const {
+    isConnected,
+    isConnecting,
+    wallet,
+    profile,
+    initializeKernel,
+    isLoadingProfile,
+    hasInitializedConnection,
+    isDiscoverExplorerAlphaEnabled
+  } = props
   const [isLoadingExplorer, setIsLoadingExplorer] = useState(false)
+  const [showExplorerAlphaNotice, setShowExplorerAlphaNotice] = useState(false)
   const decentralandConnectStorage = useLocalStorageListener('decentraland-connect-storage-key')
   const name = profile?.avatars[0].name
 
@@ -55,10 +67,28 @@ export default function Start(props: Props) {
     }
   }, [isConnected, isConnecting, wallet, hasInitializedConnection, decentralandConnectStorage])
 
-  const handleJumpIn = useCallback(() => {
+  const handleContinueOnDesktop = useCallback(() => {
+    setShowExplorerAlphaNotice(false)
+    launchDesktopApp(true).then((isInstalled) => {
+      if (!isInstalled) {
+        window.location.href = 'https://decentraland.org/download'
+      }
+    })
+  }, [launchDesktopApp, setShowExplorerAlphaNotice])
+
+  const handleContinueOnWeb = useCallback(() => {
+    setShowExplorerAlphaNotice(false)
     initializeKernel()
     setIsLoadingExplorer(true)
-  }, [])
+  }, [setShowExplorerAlphaNotice, initializeKernel, setIsLoadingExplorer])
+
+  const handleJumpIn = useCallback(() => {
+    if (isDiscoverExplorerAlphaEnabled) {
+      setShowExplorerAlphaNotice(true)
+    } else {
+      handleContinueOnWeb()
+    }
+  }, [isDiscoverExplorerAlphaEnabled, setShowExplorerAlphaNotice, handleContinueOnWeb])
 
   useEffect(() => {
     if (SKIP_SETUP) {
@@ -111,6 +141,31 @@ export default function Start(props: Props) {
         <CustomWearablePreview profile={wallet?.address ?? ''} />
       </div>
       <CommunityBubble className="start-community-bubble" />
+      <Modal
+        open={showExplorerAlphaNotice}
+        size="tiny"
+        onClose={() => setShowExplorerAlphaNotice(false)}
+        className="explorer-alpha-notice"
+        dimmer={{ className: 'explorer-alpha-notice-dimmer' }}
+      >
+        <ModalNavigation title="" onClose={() => setShowExplorerAlphaNotice(false)} />
+        <div className="content">
+          <div className="header">
+            <i className="icon" />
+            <p className="title">This is An Outdated Version of Decentraland</p>
+            <p className="text">
+              Decentraland has been re-released as a desktop app offering a completely new experience. Download and
+              discover improved performance, better graphics, and lots of new features!
+            </p>
+          </div>
+          <div className="actions">
+            <Button primary onClick={handleContinueOnDesktop}>
+              Continue on Desktop
+            </Button>
+            <Button onClick={handleContinueOnWeb}>Continue on Web</Button>
+          </div>
+        </div>
+      </Modal>
     </div>
   )
 }

src/components/start/Start.types.ts

@@ -9,9 +9,16 @@ export type Props = {
   isConnecting: boolean
   isLoadingProfile: boolean
   profile: Profile | null
+  isDiscoverExplorerAlphaEnabled: boolean
 }
 
 export type MapStateProps = Pick<
   Props,
-  'wallet' | 'isConnected' | 'hasInitializedConnection' | 'isConnecting' | 'isLoadingProfile' | 'profile'
+  | 'wallet'
+  | 'isConnected'
+  | 'hasInitializedConnection'
+  | 'isConnecting'
+  | 'isLoadingProfile'
+  | 'profile'
+  | 'isDiscoverExplorerAlphaEnabled'
 >