refactor: replace wallet selector modal

src/components/Layout/Layout.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import { ChainId } from '@dcl/schemas/dist/dapps/chain-id'
-import WalletSelectorModal from 'decentraland-gatsby/dist/components/Modal/WalletSelectorModal'
 import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext'
 import { changeLocale } from 'decentraland-gatsby/dist/plugins/intl'
 import { DecentralandIntlContext } from 'decentraland-gatsby/dist/plugins/intl/types'
@@ -12,6 +11,7 @@ import { Navbar, NavbarProps } from 'decentraland-ui/dist/components/Navbar/Navb
 import type { PageProps } from 'gatsby'
 import type { DropdownProps } from 'semantic-ui-react/dist/commonjs/modules/Dropdown'
 
+import WalletSelectorModal from '../Modal/WalletSelectorModal'
 import WrongNetworkModal from '../Modal/WrongNetworkModal'
 
 import './Layout.css'
@@ -67,6 +67,7 @@ export default function Layout({ children, pageContext, ...props }: LayoutProps)
       <WalletSelectorModal
         open={state.selecting}
         loading={state.loading}
+        chainId={getSupportedChainIds()[0]}
         error={state.error}
         onConnect={(providerType, chainId) => state.connect(providerType, chainId)}
         onClose={() => state.select(false)}

src/components/Modal/WalletSelectorModal.css

@@ -0,0 +1,18 @@
+.ui.modal.dcl.login-modal {
+  width: 90%;
+  max-width: 520px;
+}
+
+.ui.modal.dcl.login-modal .content {
+  margin: 28px 32px;
+}
+
+.ui.modal.dcl.login-modal .dcl.option {
+  width: 100%;
+  max-width: 360px;
+}
+
+.ui.modal.dcl.login-modal small p.dg.Paragraph {
+  font-size: 13px;
+  line-height: 1.5;
+}

src/components/Modal/WalletSelectorModal.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback, useEffect, useState } from 'react'
+
+import { ChainId } from '@dcl/schemas/dist/dapps/chain-id'
+import { ProviderType } from '@dcl/schemas/dist/dapps/provider-type'
+import { connection } from 'decentraland-connect/dist/ConnectionManager'
+import { toModalOptionType } from 'decentraland-dapps/dist/containers/LoginModal/utils'
+import Markdown from 'decentraland-gatsby/dist/components/Text/Markdown'
+import { useFeatureFlagContext } from 'decentraland-gatsby/dist/context/FeatureFlag'
+import useAnchor from 'decentraland-gatsby/dist/hooks/useAnchor'
+import useFormatMessage from 'decentraland-gatsby/dist/hooks/useFormatMessage'
+import { Loader } from 'decentraland-ui/dist/components/Loader/Loader'
+import { LoginModal, LoginModalOptionType } from 'decentraland-ui/dist/components/LoginModal/LoginModal'
+import 'decentraland-ui/dist/components/LoginModal/LoginModal.css'
+import { Modal } from 'decentraland-ui/dist/components/Modal/Modal'
+import { ModalNavigation } from 'decentraland-ui/dist/components/ModalNavigation/ModalNavigation'
+import ModalContent from 'semantic-ui-react/dist/commonjs/modules/Modal/ModalContent'
+
+import './WalletSelectorModal.css'
+
+type Props = {
+  open: boolean
+  loading: boolean
+  chainId: ChainId
+  error: string | null
+  onConnect: (providerType: ProviderType, chainId: ChainId) => void
+  onClose: () => void
+}
+
+const availableProviders = new Set(connection.getAvailableProviders())
+
+export default function WalletSelectorModal({ chainId, onConnect, onClose, error, open, loading }: Props) {
+  const t = useFormatMessage()
+  const [provider, setProvider] = useState(LoginModalOptionType.METAMASK)
+  const [ff] = useFeatureFlagContext()
+
+  useEffect(() => {
+    setProvider(toModalOptionType(ProviderType.INJECTED) || LoginModalOptionType.METAMASK)
+  }, [])
+
+  const handleConnect = useCallback(
+    (providerType: ProviderType, chainId: ChainId) => {
+      if (onConnect) {
+        onConnect(providerType, chainId)
+      }
+    },
+    [onConnect]
+  )
+
+  const handleDownloadMetamaskClick = useAnchor('https://metamask.io/download.html')
+  const handleConnectInjected = useCallback(() => {
+    if (availableProviders.has(ProviderType.INJECTED)) {
+      handleConnect(ProviderType.INJECTED, chainId)
+    } else {
+      handleDownloadMetamaskClick()
+    }
+  }, [handleConnect, handleDownloadMetamaskClick, chainId])
+  const handleConnectFortmatic = useCallback(
+    () => handleConnect(ProviderType.FORTMATIC, chainId),
+    [chainId, handleConnect]
+  )
+  const handleConnectWalletConnect = useCallback(
+    () =>
+      handleConnect(
+        ff.enabled('dapps-wallet-connect-v2') ? ProviderType.WALLET_CONNECT_V2 : ProviderType.WALLET_CONNECT,
+        chainId
+      ),
+    [ff, chainId, handleConnect]
+  )
+  const handleConnectWalletLink = useCallback(
+    () => handleConnect(ProviderType.WALLET_LINK, chainId),
+    [chainId, handleConnect]
+  )
+
+  return (
+    <Modal open={open} className="dcl login-modal">
+      <ModalNavigation
+        title={t('modal.wallet_selector.title')}
+        subtitle={t('modal.wallet_selector.subtitle')}
+        onClose={onClose}
+      />
+      <ModalContent>
+        <LoginModal.Option type={provider} onClick={handleConnectInjected} />
+        {availableProviders.has(ProviderType.FORTMATIC) && (
+          <LoginModal.Option type={LoginModalOptionType.FORTMATIC} onClick={handleConnectFortmatic} />
+        )}
+        {availableProviders.has(ProviderType.WALLET_CONNECT) && (
+          <LoginModal.Option type={LoginModalOptionType.WALLET_CONNECT} onClick={handleConnectWalletConnect} />
+        )}
+        {availableProviders.has(ProviderType.WALLET_LINK) && (
+          <LoginModal.Option type={LoginModalOptionType.WALLET_LINK} onClick={handleConnectWalletLink} />
+        )}
+        <small className="message">
+          <Markdown>{t('modal.wallet_selector.trezor')}</Markdown>
+        </small>
+      </ModalContent>
+      {error && <p className="error visible">{error}</p>}
+      {loading ? (
+        <>
+          <Loader size="big" active />
+          <div className="loader-background"></div>
+        </>
+      ) : null}
+    </Modal>
+  )
+}