Merge pull request #14 from decentraland/feat/use-new-auth

feat: Use new auth flow

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 140,
+    "tabWidth": 2,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
+}

src/components/Navbar/Navbar.tsx

@@ -1,20 +1,22 @@
 import React, { useCallback } from 'react'
 import { Navbar as BaseNavbar } from 'decentraland-dapps/dist/containers'
+import { useHistory, useLocation } from 'react-router-dom'
 
 import { locations } from '../../modules/locations'
 import { Props } from './Navbar.types'
 import './Navbar.css'
 
 const Navbar = (props: Props) => {
-  const { pathname, onNavigate } = props
+  const navigate = useHistory()
+  const location = useLocation()
 
   const handleOnSignIn = useCallback(() => {
-    onNavigate(locations.signIn())
-  }, [onNavigate])
+    if (location.pathname !== locations.signIn()) {
+      navigate.push(locations.signIn())
+    }
+  }, [navigate, location.pathname])
 
-  return (
-    <BaseNavbar {...props} isSignedIn={props.isConnected} isSigningIn={pathname === locations.signIn()} onClickSignIn={handleOnSignIn} />
-  )
+  return <BaseNavbar {...props} onSignIn={handleOnSignIn} />
 }
 
 export default React.memo(Navbar)

src/components/Navbar/Navbar.types.ts

@@ -1,13 +1,2 @@
-import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
 import { NavbarProps } from 'decentraland-dapps/dist/containers/Navbar/Navbar.types'
-
-export type Props = Partial<NavbarProps> & {
-  pathname: string
-  isConnected: boolean
-  onNavigate: (path: string) => void
-}
-
-export type MapStateProps = Pick<Props, 'pathname' | 'isConnected'>
-export type MapDispatchProps = Pick<Props, 'onNavigate'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction>
+export type Props = Partial<NavbarProps>

src/components/Navbar/index.ts

@@ -1,3 +1,3 @@
-import Navbar from './Navbar.container'
+import Navbar from './Navbar'
 
 export { Navbar }

src/components/Routes/Routes.container.ts

@@ -0,0 +1,16 @@
+import { connect } from "react-redux";
+import {
+  isConnected,
+  isConnecting,
+} from "decentraland-dapps/dist/modules/wallet/selectors";
+
+import { RootState } from "../../modules/reducer";
+import Routes from "./Routes";
+import { MapStateProps } from "./Routes.types";
+
+const mapState = (state: RootState): MapStateProps => ({
+  isConnected: isConnected(state),
+  isConnecting: isConnecting(state),
+});
+
+export default connect(mapState)(Routes);

src/components/Routes/Routes.types.ts

@@ -2,8 +2,9 @@ import { Dispatch } from 'redux'
 
 export type Props = {
   isConnected: boolean
+  isConnecting: boolean
 }
-export type MapStateProps = Pick<Props, 'isConnected'>
+export type MapStateProps = Pick<Props, 'isConnected' | 'isConnecting'>
 
 export type MapDispatchProps = Props
 export type MapDispatch = Dispatch

src/components/SignIn/SignIn.tsx

@@ -1,13 +1,23 @@
-import React from "react";
-import { default as DCLSignIn } from "decentraland-dapps/dist/containers/SignInPage";
-import Page from "../Page";
+import React, { useCallback } from 'react'
+import { useLocation } from 'react-router-dom'
+import { default as DCLSignIn } from 'decentraland-dapps/dist/containers/SignInPage'
+import { config } from '../../config'
+import Page from '../Page'
 
 const SignIn = () => {
+  const location = useLocation()
+  const handleOnConnect = useCallback(() => {
+    const searchParams = new URLSearchParams(location.search)
+    const basename = /^decentraland.(zone|org|today)$/.test(window.location.host) ? '/linked-wearables' : ''
+
+    window.location.replace(`${config.get('AUTH_URL')}/login?redirectTo=${basename}${location.pathname}${searchParams}`)
+  }, [location.search, location.pathname])
+
   return (
     <Page>
-      <DCLSignIn />
+      <DCLSignIn onConnect={handleOnConnect} />
     </Page>
-  );
-};
+  )
+}
 
-export default React.memo(SignIn);
+export default React.memo(SignIn)