feat: add auth dapp flow

.env.development

@@ -1,3 +1,4 @@
 # EXPLORER_PATH points to the browser-interface/static folder in your local filesystem
 
-EXPLORER_PATH="../unity-renderer/browser-interface/static"
+EXPLORER_PATH="../unity-renderer/browser-interface/static"
+FAST_REFRESH=false

.github/workflows/main.yml

@@ -14,6 +14,8 @@ jobs:
     outputs:
       public_url: ${{ steps.install.outputs.public_url }}
       public_path: ${{ steps.install.outputs.public_path }}
+    env:
+      CI: false
     steps:
       - uses: actions/checkout@master
       - name: Use Node.js 14.x

package.json

@@ -43,21 +43,23 @@
     "@dcl/feature-flags": "^1.2.0",
     "@dcl/kernel-interface": "^2.0.0-20230512115658.commit-b582e05",
     "@dcl/schemas": "^9.10.0",
+    "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/urn-resolver": "^1.4.0",
-    "@sentry/browser": "^7.45.0",
-    "@sentry/tracing": "^7.45.0",
+    "@sentry/browser": "^7.91.0",
+    "@sentry/tracing": "^7.91.0",
     "decentraland-connect": "^5.3.4",
-    "decentraland-dapps": "^16.21.4",
+    "decentraland-dapps": "^16.21.5",
     "decentraland-ui": "^4.31.0",
     "detect-browser": "^5.2.0",
-    "eth-connect": "^6.1.0",
+    "eth-connect": "^6.2.4",
     "md5-file": "^5.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.9",
     "react-scripts": "^4.0.3",
     "react-virtualized": "^9.22.5",
     "redux": "^4.0.5",
+    "redux-saga": "^1.2.3",
     "uuid": "^9.0.1",
     "validator": "^13.7.0"
   },
@@ -83,10 +85,11 @@
     "babel-loader": "^8.1.0",
     "customize-cra": "^1.0.0",
     "fs-extra": "^10.0.0",
+    "http-proxy-middleware": "^2.0.6",
     "react-app-rewired": "^2.2.1",
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "redux-devtools-extension": "^2.13.8",
     "typescript": "^4.5.5"
   }
-}
+}

src/components/App.tsx

@@ -1,9 +1,10 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { connect } from 'react-redux'
+import { ApplicationName } from 'decentraland-dapps/dist/modules/features/types'
 import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media'
-import { isMobile } from '../integration/browser'
 import { StoreType } from '../state/redux'
 import { isElectron } from '../integration/desktop'
+import { SHOW_WALLET_SELECTOR } from '../integration/url'
 import {
   FeatureFlags,
   isWaitingForRenderer,
@@ -13,16 +14,18 @@ import {
   getFeatureVariantValue,
   isFeatureEnabled
 } from '../state/selectors'
-import { SHOW_WALLET_SELECTOR } from '../integration/url'
-import ErrorContainer from './errors/ErrorContainer'
-import LoginContainer from './auth/LoginContainer'
+import { isMobile } from '../integration/browser'
 import { BeginnersGuide } from './auth/BeginnersGuide'
 import { BigFooter } from './common/Layout/BigFooter'
+import { Navbar } from './common/Layout/Navbar'
 import BannerContainer from './banners/BannerContainer'
 import { LoadingRender } from './common/Loading/LoadingRender'
-import { Navbar } from './common/Layout/Navbar'
+import { initializeKernel } from '../integration/kernel'
 import StreamContainer from './common/StreamContainer'
+import ErrorContainer from './errors/ErrorContainer'
+import LoginContainer from './auth/LoginContainer'
 import { Audio } from './common/Audio'
+import Start from './start'
 import MobileContainer from './common/MobileContainer'
 import CatalystWarningContainer from './warning/CatalystWarningContainer'
 import { LoginWithAuthServerPage } from './auth/LoginWithAuthServerPage'
@@ -56,6 +59,8 @@ function mapStateToProps(state: StoreType): AppProps {
     trustedCatalyst,
     error,
     sound,
+    featureFlagsLoaded: !!state.featureFlags.ready,
+    isAuthDappEnabled: isFeatureEnabled(state, `${ApplicationName.DAPPS}-${FeatureFlags.AuthDapp}`),
     isDesktopClientSignInWithAuthDappEnabled
   }
 }
@@ -71,13 +76,21 @@ export interface AppProps {
   trustedCatalyst: boolean
   error: boolean
   sound: boolean
+  isAuthDappEnabled: boolean
+  featureFlagsLoaded: boolean
   isDesktopClientSignInWithAuthDappEnabled: boolean
 }
 
 const App: React.FC<AppProps> = (props) => {
   const mobile = useMemo(() => isMobile(), [])
   const small = useMobileMediaQuery()
 
+  useEffect(() => {
+    if (isElectron() || (props.featureFlagsLoaded && !props.isAuthDappEnabled)) {
+      initializeKernel()
+    }
+  }, [props.isAuthDappEnabled, props.featureFlagsLoaded])
+
   if (!props.trustedCatalyst) {
     return <CatalystWarningContainer />
   }
@@ -102,6 +115,10 @@ const App: React.FC<AppProps> = (props) => {
     return <LoadingRender />
   }
 
+  if (props.isAuthDappEnabled && !isElectron()) {
+    return <Start />
+  }
+
   if (isElectron() && props.isDesktopClientSignInWithAuthDappEnabled) {
     return <LoginWithAuthServerPage />
   }

src/components/common/MobileContainer.tsx

@@ -27,10 +27,13 @@ export default React.memo(function MobileContainer() {
 
       <section>
         <h2>Get a reminder</h2>
-        <p>Get an email reminder to jump into Decentraland the next time you are back at a computer. You will also be added to the Decentraland Weekly newsletter to receive the latest news and events.</p>
+        <p>
+          Get an email reminder to jump into Decentraland the next time you are back at a computer. You will also be
+          added to the Decentraland Weekly newsletter to receive the latest news and events.
+        </p>
         <iframe
-          title='subscribe'
-          className='MobileSubscribe'
+          title="subscribe"
+          className="MobileSubscribe"
           src="https://embeds.beehiiv.com/d7d652da-adc8-422f-9176-4b653a244020?slim=true"
           data-test-id="beehiiv-embed"
         ></iframe>

src/components/start/Start.container.ts

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux'
+import { isConnected, isConnecting, getData as getWallet } from 'decentraland-dapps/dist/modules/wallet/selectors'
+import { StoreType } from '../../state/redux'
+import { Props } from './Start.types'
+import Start from './Start'
+
+const mapStateToProps = (state: StoreType): Props => {
+  return {
+    wallet: getWallet(state),
+    isConnecting: isConnecting(state),
+    isConnected: isConnected(state),
+  }
+}
+
+export default connect(mapStateToProps)(Start)

src/components/start/Start.css

@@ -0,0 +1,128 @@
+#root {
+  position: fixed;
+}
+
+.explorer-website-start {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: radial-gradient(70% 108% at 90% 50%, #ff00f5 0%, #540880 100%);
+  display: flex;
+  align-items: center;
+}
+
+.explorer-website-start .ui.loader:after {
+  border-color: #540880 transparent transparent !important
+}
+
+.explorer-website-start .start-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 150px;
+  padding-right: 40px;
+  height: 100%;
+}
+
+.explorer-website-start .start-wearable-preview {
+  height: 80vh;
+  width: 50%;
+  position: relative;
+}
+
+.explorer-website-start .start-wearable-preview::before {
+  border-radius: 595.795px;
+  opacity: 0.6;
+  background: #ff00f5;
+  filter: blur(126.40625px);
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.explorer-website-start .start-wearable-preview iframe {
+  background: transparent;
+}
+
+.explorer-website-start .start-links {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.explorer-website-start .start-links .ui.button {
+  max-width: 300px;
+  display: flex;
+  justify-content: center;
+}
+
+.explorer-website-start .start-links .ui.button.inverted {
+  color: white;
+  border-color: white;
+}
+
+.explorer-website-start .start-title {
+  display: flex;
+  flex-direction: column;
+  color: white;
+  font-size: 30px;
+  line-height: normal;
+  margin-bottom: 20px;
+  letter-spacing: 1px;
+}
+
+.explorer-website-start .start-desktop-download {
+  color: white;
+  display: flex;
+  flex-direction: column;
+  font-size: 18px;
+  font-weight: 300;
+  gap: 10px;
+  border-top: 1px solid white;
+  padding-top: 20px;
+  width: fit-content;
+  letter-spacing: 1px;
+}
+
+.explorer-website-start .start-desktop-download a span {
+  text-decoration: underline;
+  color: white;
+}
+
+.explorer-website-start .start-links .icon:before {
+  font-size: 20px;
+}
+
+.explorer-website-start .start-links .icon {
+  width: fit-content;
+  height: fit-content;
+  opacity: 1;
+}
+
+.explorer-website-start .discord-link-button {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  color: white;
+  border-radius: 12px;
+  padding: 14px;
+  background: #161518;
+  align-items: flex-end;
+  gap: 5px;
+}
+
+.explorer-website-start .discord-info {
+  display: flex;
+  flex-direction: column;
+  color: white;
+}
+
+.explorer-website-start .discord-icon {
+  font-size: 28px;
+}