feat: discover explorer alpha from /play (#471)

* feat: discover explorer alpha from /play * chore: added feature flag * feat: rework flow to match designs * fix: disable close by clicking outside of modal
decentraland · Oct 17, 2024 · 45486be · 45486be
1 parent 1cef52a
commit 45486be
Show file tree

Hide file tree

Showing 9 changed files with 1,523 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -80,4 +80,4 @@
     "node": "^20"
   },
   "homepage": ""
-}
+}
diff --git a/src/components/start/Start.container.ts b/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 { areFeatureFlagsReady, FeatureFlags, isFeatureEnabled } from '../../state/selectors'
 import { StoreType } from '../../state/redux'
 import { MapStateProps } from './Start.types'
 import Start from './Start'
@@ -22,6 +23,8 @@ 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),
+    areFeatureFlagsReady: areFeatureFlagsReady(state),
     profile: (wallet?.address && getProfileOfAddress(state, wallet?.address)) || null
   }
 }

diff --git a/src/components/start/Start.css b/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);
+}
diff --git a/src/components/start/Start.tsx b/src/components/start/Start.tsx
@@ -1,20 +1,29 @@
 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'
 import { Props } from './Start.types'
 import './Start.css'
 
-function getAuthURL() {
+function getAuthURL(skipSetup: boolean) {
   var url = new URL(window.location.href)
-  if (!url.searchParams.has('skipSetup')) {
-    url.searchParams.append('skipSetup', 'true')
+  if (skipSetup) {
+    if (!url.searchParams.has('skipSetup')) {
+      url.searchParams.append('skipSetup', 'true')
+    }
+  } else {
+    if (url.searchParams.has('skipSetup')) {
+      url.searchParams.delete('skipSetup')
+    }
   }
   return `/auth/login?redirectTo=${encodeURIComponent(url.toString())}`
 }
@@ -34,43 +43,99 @@ 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,
+    areFeatureFlagsReady
+  } = props
   const [isLoadingExplorer, setIsLoadingExplorer] = useState(false)
+  const [showExplorerAlphaNotice, setShowExplorerAlphaNotice] = useState(false)
+  const [isExplorerAlphaInstalled, setIsExplorerAlphaInstalled] = useState(false)
+  const [isLaunchingExplorerAlpha, setIsLaunchingExplorerAlpha] = useState(false)
   const decentralandConnectStorage = useLocalStorageListener('decentraland-connect-storage-key')
   const name = profile?.avatars[0].name
 
   useEffect(() => {
+    if (!areFeatureFlagsReady) {
+      return
+    }
+
     if ((!isConnected && !isConnecting && hasInitializedConnection) || decentralandConnectStorage === null) {
-      window.location.replace(getAuthURL())
+      window.location.replace(getAuthURL(!isDiscoverExplorerAlphaEnabled))
       return
     }
 
     if (isConnected && wallet) {
       const identity = localStorageGetIdentity(wallet.address)
       if (!identity) {
-        window.location.replace(getAuthURL())
+        window.location.replace(getAuthURL(!isDiscoverExplorerAlphaEnabled))
         return
       }
     }
-  }, [isConnected, isConnecting, wallet, hasInitializedConnection, decentralandConnectStorage])
+  }, [
+    isConnected,
+    isConnecting,
+    wallet,
+    hasInitializedConnection,
+    decentralandConnectStorage,
+    isDiscoverExplorerAlphaEnabled,
+    areFeatureFlagsReady
+  ])
+
+  const handleReLaunch = useCallback(() => {
+    void launchDesktopApp(true)
+  }, [launchDesktopApp])
+
+  const handleContinueWithWebVersion = useCallback(() => {
+    setShowExplorerAlphaNotice(false)
+  }, [setShowExplorerAlphaNotice])
 
   const handleJumpIn = useCallback(() => {
+    setShowExplorerAlphaNotice(false)
     initializeKernel()
     setIsLoadingExplorer(true)
-  }, [])
+  }, [setShowExplorerAlphaNotice, initializeKernel, setIsLoadingExplorer])
 
   useEffect(() => {
     if (SKIP_SETUP) {
       handleJumpIn()
+    } else if (wallet && isDiscoverExplorerAlphaEnabled) {
+      const identity = localStorageGetIdentity(wallet.address)
+      if (identity) {
+        setIsLaunchingExplorerAlpha(true)
+        launchDesktopApp(true).then((isInstalled) => {
+          setIsExplorerAlphaInstalled(isInstalled)
+          setShowExplorerAlphaNotice(true)
+          setIsLaunchingExplorerAlpha(false)
+        })
+      }
     }
-  }, [handleJumpIn])
+  }, [
+    handleJumpIn,
+    isDiscoverExplorerAlphaEnabled,
+    setIsExplorerAlphaInstalled,
+    setShowExplorerAlphaNotice,
+    setIsLaunchingExplorerAlpha,
+    wallet
+  ])
 
   if (SKIP_SETUP) {
     return null
   }
 
-  if (!hasInitializedConnection || isLoadingProfile || isConnecting) {
+  if (
+    !hasInitializedConnection ||
+    isLoadingProfile ||
+    isConnecting ||
+    isLaunchingExplorerAlpha ||
+    !areFeatureFlagsReady
+  ) {
     return (
       <div className="explorer-website-start">
         <Loader active size="massive" />
@@ -96,7 +161,7 @@ export default function Start(props: Props) {
             jump into decentraland
             <Icon name="arrow alternate circle right outline" />
           </Button>
-          <Button inverted as="a" href={getAuthURL()} disabled={isLoadingExplorer}>
+          <Button inverted as="a" href={getAuthURL(isDiscoverExplorerAlphaEnabled)} disabled={isLoadingExplorer}>
             use a different account
           </Button>
         </div>
@@ -111,6 +176,48 @@ export default function Start(props: Props) {
         <CustomWearablePreview profile={wallet?.address ?? ''} />
       </div>
       <CommunityBubble className="start-community-bubble" />
+      <Modal
+        open={showExplorerAlphaNotice}
+        size="tiny"
+        className="explorer-alpha-notice"
+        dimmer={{ className: 'explorer-alpha-notice-dimmer' }}
+      >
+        <ModalNavigation title="" onClose={() => setShowExplorerAlphaNotice(false)} />
+        <div className="content">
+          {!isExplorerAlphaInstalled ? (
+            <>
+              <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 href="https://decentraland.org/download">
+                  Download Decentraland
+                </Button>
+                <Button onClick={handleContinueWithWebVersion}>Continue with outdated web version</Button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="header">
+                <i className="icon" />
+                <p className="title">Continue on Desktop</p>
+                <p className="text">For a better experience, we suggest you use the desktop explorer.</p>
+              </div>
+              <div className="actions">
+                <Button primary onClick={handleReLaunch}>
+                  Re-Launch
+                </Button>
+                <Button onClick={handleContinueWithWebVersion}>Continue with outdated web version</Button>
+              </div>
+            </>
+          )}
+        </div>
+      </Modal>
     </div>
   )
 }
diff --git a/src/components/start/Start.types.ts b/src/components/start/Start.types.ts
@@ -9,9 +9,18 @@ export type Props = {
   isConnecting: boolean
   isLoadingProfile: boolean
   profile: Profile | null
+  isDiscoverExplorerAlphaEnabled: boolean
+  areFeatureFlagsReady: boolean
 }
 
 export type MapStateProps = Pick<
   Props,
-  'wallet' | 'isConnected' | 'hasInitializedConnection' | 'isConnecting' | 'isLoadingProfile' | 'profile'
+  | 'wallet'
+  | 'isConnected'
+  | 'hasInitializedConnection'
+  | 'isConnecting'
+  | 'isLoadingProfile'
+  | 'profile'
+  | 'isDiscoverExplorerAlphaEnabled'
+  | 'areFeatureFlagsReady'
 >