fix: Use new navbar

index.html

@@ -10,7 +10,7 @@
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@decentraland" />
     <meta name="twitter:creator" content="@decentraland" />
-    <meta property="og:url" content="https://play.decentraland.org/" />
+    <meta property="og:url" content="https://decentraland.org/play" />
     <meta property="og:title" content="Decentraland" />
     <meta
       property="og:description"

package.json

@@ -34,6 +34,8 @@
     ]
   },
   "dependencies": {
+    "@0xsquid/sdk": "^2.8.9",
+    "@0xsquid/squid-types": "^0.1.51",
     "@dcl/explorer": "^1.0.158859-20240110140315.commit-19935b0",
     "@dcl/feature-flags": "^1.2.0",
     "@dcl/kernel-interface": "^2.0.0-20230512115658.commit-b582e05",
@@ -43,7 +45,7 @@
     "@sentry/browser": "^7.91.0",
     "@sentry/tracing": "^7.91.0",
     "decentraland-connect": "^5.5.0",
-    "decentraland-dapps": "^16.31.3",
+    "decentraland-dapps": "^17.0.0",
     "decentraland-ui": "^5.2.0",
     "detect-browser": "^5.2.0",
     "dotenv": "^16.3.1",
@@ -77,4 +79,4 @@
     "typescript": "^4.5.5"
   },
   "homepage": ""
-}
+}

src/components/App.tsx

@@ -89,7 +89,11 @@ const App: React.FC<AppProps> = (props) => {
   }
 
   if (small || mobile) {
-    return <MobileContainer />
+    return (
+      <WalletProvider>
+        <MobileContainer />
+      </WalletProvider>
+    )
   }
 
   if (props.error) {

src/components/common/Layout/Navbar/Navbar.container.ts

@@ -0,0 +1,31 @@
+import { connect } from 'react-redux'
+import { Dispatch } from 'redux'
+import {
+  isConnected,
+  isConnecting,
+  getAddress,
+  getManaBalances
+} from 'decentraland-dapps/dist/modules/wallet/selectors'
+import { disconnectWallet } from 'decentraland-dapps/dist/modules/wallet/actions'
+import { getData as getProfiles } from 'decentraland-dapps/dist/modules/profile/selectors'
+// import { MapStateProps, MapDispatchProps } from './Navbar.types'
+import { StoreType } from '../../../../state/redux'
+import Navbar from './Navbar'
+
+const mapState = (state: StoreType): any => {
+  const address = getAddress(state)
+  const profile = address ? getProfiles(state)[address] : undefined
+  return {
+    avatar: profile ? profile.avatars[0] : undefined,
+    manaBalances: getManaBalances(state),
+    address: getAddress(state),
+    isSignedIn: isConnected(state),
+    isSigningIn: isConnecting(state)
+  }
+}
+
+const mapDispatch = (dispatch: Dispatch): any => ({
+  onSignOut: () => dispatch(disconnectWallet())
+})
+
+export default connect(mapState, mapDispatch)(Navbar) as any

src/components/common/Layout/Navbar/Navbar.tsx

@@ -0,0 +1,25 @@
+import { useCallback } from 'react'
+import { Navbar as Base } from 'decentraland-ui/dist/components/Navbar/Navbar'
+
+const Navbar = (props: any) => {
+  const handleSignIn = useCallback(() => {
+    const site = /^decentraland.(zone|org|today)$/.test(window.location.host) ? '/play' : ''
+    window.location.replace(`/auth/login?redirectTo=${site}`)
+  }, [])
+
+  const handleSignOut = useCallback(() => {
+    props.onSignOut()
+  }, [props.onSignOut])
+
+  return (
+    <Base
+      onClickSignIn={handleSignIn}
+      onClickSignOut={handleSignOut}
+      onClickSignOut={handleSignOut}
+      activePage="play"
+      {...props}
+    />
+  )
+}
+
+export default Navbar

src/components/common/Layout/Navbar/index.ts

@@ -0,0 +1,2 @@
+import Navbar from './Navbar.container'
+export default Navbar

src/components/common/MobileContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { useMobileResize } from '../../integration/mobile'
-import { Navbar } from './Layout/Navbar'
+import Navbar from './Layout/Navbar'
 import { track } from '../../utils/tracking'
 import './MobileContainer.css'
 
@@ -14,13 +14,13 @@ export default React.memo(function MobileContainer() {
 
   return (
     <div className="MobileContainer">
-      <Navbar rightMenu={false} />
+      <Navbar />
       <main className="MobileHero">
         <div>
           <h1>Play Decentraland on Desktop</h1>
           <p>Decentraland is not available on mobile.</p>
           <p>
-            Visit <strong>play.decentraland.org</strong> in your desktop browser to access Decentraland.
+            Visit <strong>decentraland.org/play</strong> in your desktop browser to access Decentraland.
           </p>
         </div>
       </main>