fix: Auth Magic in sepolia (#466)

* fix: Navbar props

* fix: Allow magic provider to switch to a specific chain id

* fix: Update connection flow

* chore: Upgrade packages

* chore: Update package @dcl/explorer

.env.default

@@ -1,4 +1,4 @@
 VITE_APP_WEBSITE_VERSION="0.1.0"
-VITE_APP_EXPLORER_VERSION="1.0.158859-20240110140315.commit-19935b0"
+VITE_APP_EXPLORER_VERSION="1.0.164509-20240802172549.commit-fb95b9b"
 VITE_PUBLIC_URL=""
-VITE_APP_EXPLORER_BASE_URL="/cdn/packages/explorer/1.0.158859-20240110140315.commit-19935b0/"
+VITE_APP_EXPLORER_BASE_URL="/cdn/packages/explorer/1.0.164509-20240802172549.commit-fb95b9b/"

package.json

@@ -34,17 +34,17 @@
     ]
   },
   "dependencies": {
-    "@dcl/explorer": "^1.0.158859-20240110140315.commit-19935b0",
+    "@dcl/explorer": "^1.0.164509-20240802172549.commit-fb95b9b",
     "@dcl/feature-flags": "^1.2.0",
     "@dcl/kernel-interface": "^2.0.0-20230512115658.commit-b582e05",
-    "@dcl/schemas": "^9.12.0",
+    "@dcl/schemas": "^13.6.0",
     "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/urn-resolver": "^1.4.0",
     "@sentry/browser": "^7.91.0",
     "@sentry/tracing": "^7.91.0",
-    "decentraland-connect": "^6.5.0",
-    "decentraland-dapps": "^17.4.0",
-    "decentraland-ui": "^5.4.6",
+    "decentraland-connect": "^7.0.2",
+    "decentraland-dapps": "^23.2.0",
+    "decentraland-ui": "^6.6.0",
     "detect-browser": "^5.2.0",
     "dotenv": "^16.3.1",
     "eth-connect": "^6.2.4",

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

@@ -6,7 +6,7 @@ import {
   getAddress,
   getManaBalances
 } from 'decentraland-dapps/dist/modules/wallet/selectors'
-import { disconnectWallet } from 'decentraland-dapps/dist/modules/wallet/actions'
+import { disconnectWalletRequest } from 'decentraland-dapps/dist/modules/wallet/actions'
 import { getData as getProfiles } from 'decentraland-dapps/dist/modules/profile/selectors'
 import { StoreType } from '../../../../state/redux'
 import { MapStateProps, MapDispatchProps } from './Navbar.types'
@@ -25,7 +25,7 @@ const mapState = (state: StoreType): MapStateProps => {
 }
 
 const mapDispatch = (dispatch: Dispatch): MapDispatchProps => ({
-  onSignOut: () => dispatch(disconnectWallet())
+  onSignOut: () => dispatch(disconnectWalletRequest())
 })
 
 export default connect(mapState, mapDispatch)(Navbar)

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

@@ -1,5 +1,5 @@
 import { Dispatch } from 'redux'
-import { DisconnectWalletAction } from 'decentraland-dapps/dist/modules/wallet/actions'
+import { DisconnectWalletRequestAction } from 'decentraland-dapps/dist/modules/wallet/actions'
 import { NavbarProps } from 'decentraland-ui/dist/components/Navbar/Navbar.types'
 
 export type Props = Pick<NavbarProps, 'avatar' | 'manaBalances' | 'address' | 'isSignedIn' | 'isSigningIn'> & {
@@ -8,4 +8,4 @@ export type Props = Pick<NavbarProps, 'avatar' | 'manaBalances' | 'address' | 'i
 
 export type MapStateProps = Pick<Props, 'avatar' | 'manaBalances' | 'address' | 'isSignedIn' | 'isSigningIn'>
 export type MapDispatchProps = Pick<Props, 'onSignOut'>
-export type MapDispatch = Dispatch<DisconnectWalletAction>
+export type MapDispatch = Dispatch<DisconnectWalletRequestAction>

src/components/errors/ErrorNetworkMismatch.tsx

@@ -21,7 +21,9 @@ export const ErrorNetworkMismatch = React.memo(function (props: ErrorNetworkMism
     async function () {
       // Switch to the wanted network if using certain providers.
       if (
-        [ProviderType.INJECTED, ProviderType.WALLET_CONNECT_V2, ProviderType.AUTH_SERVER].includes(props.providerType)
+        [ProviderType.INJECTED, ProviderType.WALLET_CONNECT_V2, ProviderType.AUTH_SERVER, ProviderType.MAGIC].includes(
+          props.providerType
+        )
       ) {
         try {
           await switchToChainId(props.wantedChainId, props.providerChainId)

src/kernel-loader/index.ts

@@ -1,16 +1,16 @@
 import { trackConnectWallet } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { getProviderChainId } from 'decentraland-dapps/dist/modules/wallet/utils/getProviderChainId'
 import { connection } from 'decentraland-connect'
-import { disconnect, getEthereumProvider, restoreConnection } from '../eth/provider'
+import { getConnectedProvider, getSigner } from 'decentraland-dapps/dist/lib/eth'
+import { disconnect, restoreConnection } from '../eth/provider'
 import { internalTrackEvent, identifyUser, disableAnalytics } from '../integration/analytics'
 import { injectKernel } from './injector'
 import {
   setKernelAccountState,
   setKernelError,
   setRendererLoading,
   setKernelLoaded,
-  setRendererReady,
-  setDesktopDetected
+  setRendererReady
 } from '../state/actions'
 import { ErrorType, store } from '../state/redux'
 import { ChainId } from '@dcl/schemas/dist/dapps/chain-id'
@@ -30,17 +30,14 @@ import {
   SHOW_WALLET_SELECTOR,
   LOGIN_AS_GUEST
 } from '../integration/url'
-import { isElectron, launchDesktopApp } from '../integration/desktop'
+import { isElectron } from '../integration/desktop'
 import { isMobile, setAsRecentlyLoggedIn } from '../integration/browser'
 import { FeatureFlags, isFeatureVariantEnabled } from '../state/selectors'
 
 export function getWantedChainId() {
   let chainId: ChainId
 
   switch (NETWORK) {
-    case 'goerli':
-      chainId = ChainId.ETHEREUM_GOERLI
-      break
     case 'sepolia':
       chainId = ChainId.ETHEREUM_SEPOLIA
       break
@@ -54,8 +51,21 @@ export function getWantedChainId() {
 export async function authenticate(providerType: ProviderType | null) {
   try {
     const wantedChainId = getWantedChainId()
+    const provider = await getConnectedProvider()
 
-    const { provider, chainId: providerChainId, account } = await getEthereumProvider(providerType, wantedChainId)
+    if (!provider) {
+      store.dispatch(
+        setKernelError({
+          error: new Error('Not connected provider, E01)'),
+          code: ErrorType.NOT_SUPPORTED
+        })
+      )
+      return
+    }
+
+    const providerChainId = await getProviderChainId(provider)
+    const account = await getSigner()
+    const address = await account.getAddress()
 
     if (providerChainId !== wantedChainId) {
       store.dispatch(
@@ -74,26 +84,6 @@ export async function authenticate(providerType: ProviderType | null) {
       return
     }
 
-    {
-      const providerChainId = await getProviderChainId(provider)
-      if (providerChainId !== wantedChainId) {
-        store.dispatch(
-          setKernelError({
-            error: new Error(
-              `Network mismatch NETWORK url param is not equal to the provided by Ethereum Provider (wanted: ${wantedChainId} actual: ${providerChainId}, E02)`
-            ),
-            code: ErrorType.NET_MISMATCH,
-            extra: {
-              providerType,
-              providerChainId: providerChainId,
-              wantedChainId: wantedChainId
-            }
-          })
-        )
-        return
-      }
-    }
-
     const kernel = store.getState().kernel.kernel
 
     if (!kernel) throw new Error('Kernel did not load yet')
@@ -104,8 +94,13 @@ export async function authenticate(providerType: ProviderType | null) {
 
     // Track that the users wallet has connected.
     // Only when the user has not connected as guest.
-    if (providerType && account) {
-      trackConnectWallet({ providerType, address: account, walletName: connection.getWalletName() })
+    if (providerType && address) {
+      trackConnectWallet({
+        providerType,
+        chainId: providerChainId,
+        address: address,
+        walletName: connection.getWalletName()
+      })
     }
   } catch (err) {
     if (