Merge pull request #7 from edenia/feat/mm-mobile

feat(webapp): implemented metamask mobile

webapp/src/App.js

@@ -1,8 +1,6 @@
 import React, { Suspense, useMemo } from 'react'
 import CssBaseline from '@mui/material/CssBaseline'
 import { ThemeProvider } from '@mui/material/styles'
-import { Web3ReactProvider } from '@web3-react/core'
-import { Web3Provider } from '@ethersproject/providers'
 import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
 import { StylesProvider, createGenerateClassName } from '@mui/styles'
@@ -19,12 +17,6 @@ const generateClassName = createGenerateClassName({
   productionPrefix: 'vmpxwebapp'
 })
 
-function getLibrary(provider) {
-  console.log({ provider })
-  const library = new Web3Provider(provider)
-  library.pollingInterval = 12000
-  return library
-}
 const App = () => {
   const [state] = useSharedState()
 
@@ -47,22 +39,20 @@ const App = () => {
   const theme = useMemo(() => getTheme(state.useDarkMode), [state.useDarkMode])
 
   return (
-    <Web3ReactProvider getLibrary={getLibrary}>
-      <BrowserRouter>
-        <StylesProvider generateClassName={generateClassName}>
-          <ThemeProvider theme={theme}>
-            <CssBaseline />
-            <LocalizationProvider dateAdapter={AdapterDateFns}>
-              <DashboardLayout routes={userRoutes.sidebar}>
-                <Suspense fallback={<Loader />}>
-                  <Switch>{userRoutes?.browser?.map(renderRoute)}</Switch>
-                </Suspense>
-              </DashboardLayout>
-            </LocalizationProvider>
-          </ThemeProvider>
-        </StylesProvider>
-      </BrowserRouter>
-    </Web3ReactProvider>
+    <BrowserRouter>
+      <StylesProvider generateClassName={generateClassName}>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <DashboardLayout routes={userRoutes.sidebar}>
+              <Suspense fallback={<Loader />}>
+                <Switch>{userRoutes?.browser?.map(renderRoute)}</Switch>
+              </Suspense>
+            </DashboardLayout>
+          </LocalizationProvider>
+        </ThemeProvider>
+      </StylesProvider>
+    </BrowserRouter>
   )
 }
 

webapp/src/components/SwapComponent/index.js

@@ -3,6 +3,7 @@ import { ethers } from 'ethers'
 import Box from '@mui/material/Box'
 import Modal from '@mui/material/Modal'
 import { makeStyles } from '@mui/styles'
+import { MetaMaskSDK } from '@metamask/sdk'
 import { useLazyQuery } from '@apollo/client'
 import MenuIcon from '@mui/icons-material/Menu'
 import { BigNumber } from '@ethersproject/bignumber'
@@ -158,26 +159,38 @@ const SwapComponent = () => {
 
   const connectMetaMask = async () => {
     try {
-      const { ethereum } = window
+      let ethereum = window.ethereum
+      const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
 
       if (!ethereum) {
-        showMessage({
-          type: 'warning',
-          content: 'Make sure you have MetaMask installed!'
-        })
-
-        return
+        if (isMobile) {
+          try {
+            const MMSDK = new MetaMaskSDK({
+              useDeeplink: false,
+              communicationLayerPreference: 'socket'
+            })
+
+            await sleep(1000)
+            ethereum = MMSDK.getProvider()
+          } catch (error) {
+            console.error(error)
+          }
+        } else {
+          showMessage({
+            type: 'warning',
+            content: 'Make sure you have MetaMask installed!'
+          })
+        }
       }
 
-      await setSpecificChainMetaMask(ethereum)
+      if (!isMobile) await setSpecificChainMetaMask(ethereum)
 
       const accounts = await ethereum.request({
-        method: 'eth_requestAccounts'
+        method: 'eth_requestAccounts',
+        params: []
       })
 
       setState({ param: 'ethAccountAddress', ethAccountAddress: accounts[0] })
-
-      return accounts[0]
     } catch (error) {
       if (error.message.includes('User rejected the request')) {
         console.log(

webapp/src/components/Vmpxswap/index.js

@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react'
 import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
-import { useWeb3React } from '@web3-react/core'
+import { MetaMaskSDK } from '@metamask/sdk'
 import { Button, Link, Typography } from '@mui/material'
-import { InjectedConnector } from '@web3-react/injected-connector'
 
+import { sleep } from '../../utils'
 import { blockchainConfig } from '../../config'
 import { useSharedState } from '../../context/state.context'
 import { logout as walletLogout } from '../../utils/LibreClient'
@@ -13,22 +13,10 @@ import styles from './styles'
 
 const useStyles = makeStyles(styles)
 
-const injectedConnector = new InjectedConnector({
-  supportedChainIds: [
-    1, // Mainet
-    3, // Ropsten
-    4, // Rinkeby
-    5, // Goerli
-    42 // Kovan
-  ]
-})
-
 const Vmpxswap = () => {
   const [state, { setState, login, logout, showMessage }] = useSharedState()
   const classes = useStyles()
 
-  const { activate, deactivate, active, error } = useWeb3React()
-
   const setSpecificChainMetaMask = async ethereum => {
     const chainId = blockchainConfig.ethChainId
 
@@ -59,44 +47,38 @@ const Vmpxswap = () => {
 
   const connectMetaMask = async () => {
     try {
-      const { ethereum } = window
+      let ethereum = window.ethereum
+      const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
 
       if (!ethereum) {
-        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
-
         if (isMobile) {
-          injectedConnector.isAuthorized().then(isAuthorized => {
-            if (isAuthorized) {
-              activate(injectedConnector, undefined, true).catch(error => {
-                console.log(error)
-              })
-            }
+          try {
+            const MMSDK = new MetaMaskSDK({
+              useDeeplink: false,
+              communicationLayerPreference: 'socket'
+            })
+
+            await sleep(1000)
+            ethereum = MMSDK.getProvider()
+          } catch (error) {
+            console.error(error)
+          }
+        } else {
+          showMessage({
+            type: 'warning',
+            content: 'Make sure you have MetaMask installed!'
           })
-
-          return
         }
-
-        showMessage({
-          type: 'warning',
-          content: 'Asegúrate de tener MetaMask instalado.'
-        })
-
-        return
       }
 
-      await ethereum.request({ method: 'eth_requestAccounts' })
+      if (!isMobile) await setSpecificChainMetaMask(ethereum)
 
-      showMessage({
-        type: 'success',
-        content: 'Conectado correctamente a MetaMask.'
+      const accounts = await ethereum.request({
+        method: 'eth_requestAccounts',
+        params: []
       })
 
-      const accounts = await ethereum.request({ method: 'eth_accounts' })
-
-      setState({
-        param: 'ethAccountAddress',
-        ethAccountAddress: accounts[0] || null
-      })
+      setState({ param: 'ethAccountAddress', ethAccountAddress: accounts[0] })
     } catch (error) {
       if (error.code === 4001) {
         console.log(
@@ -110,29 +92,22 @@ const Vmpxswap = () => {
 
   const checkIfMetaMaskIsConnected = async () => {
     try {
+      const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
+
+      if (isMobile) return
+
       const ethereum = window.ethereum
 
       if (ethereum) {
         await setSpecificChainMetaMask(ethereum)
 
-        const accounts = await ethereum.enable()
+        const accounts = await ethereum.request({
+          method: 'eth_requestAccounts'
+        })
         const account = accounts[0]
 
         setState({ param: 'ethAccountAddress', ethAccountAddress: account })
       } else {
-        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
-
-        if (isMobile) {
-          injectedConnector.isAuthorized().then(isAuthorized => {
-            if (isAuthorized) {
-              activate(injectedConnector, undefined, true).catch(error => {
-                console.log(error)
-              })
-            }
-          })
-
-          return
-        }
         showMessage({
           type: 'warning',
           content: 'Make sure you have MetaMask installed!'
@@ -162,16 +137,6 @@ const Vmpxswap = () => {
     checkIfMetaMaskIsConnected()
   }, [])
 
-  // useEffect(() => {
-  //   injectedConnector.isAuthorized().then(isAuthorized => {
-  //     if (isAuthorized) {
-  //       activate(injectedConnector, undefined, true).catch(error => {
-  //         console.log(error)
-  //       })
-  //     }
-  //   })
-  // }, [activate, active, deactivate])
-  console.log({ activate, deactivate, active, error })
   return (
     <Box
       className={classes.centerContainer}

webapp/yarn.lock

@@ -2679,14 +2679,14 @@
   integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
 
 "@types/ms@*":
-  version "0.7.31"
-  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
-  integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
+  version "0.7.32"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.32.tgz#f6cd08939ae3ad886fcc92ef7f0109dacddf61ab"
+  integrity sha512-xPSg0jm4mqgEkNhowKgZFBNtwoEwF6gJ4Dhww+GFpm3IgtNseHQZ5IqdNwnquZEoANxyDAKDRAdVo4Z72VvD/g==
 
 "@types/node@*":
-  version "20.7.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.7.0.tgz#c03de4572f114a940bc2ca909a33ddb2b925e470"
-  integrity sha512-zI22/pJW2wUZOVyguFaUL1HABdmSVxpXrzIqkjsHmyUjNhPoWM1CKfvVuXfetHhIok4RY573cqS0mZ1SJEnoTg==
+  version "20.7.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.7.1.tgz#06d732ead0bd5ad978ef0ea9cbdeb24dc8717514"
+  integrity sha512-LT+OIXpp2kj4E2S/p91BMe+VgGX2+lfO+XTpfXhh+bCk2LkQtHZSub8ewFBMGP5ClysPjTDFa4sMI8Q3n4T0wg==
 
 "@types/[email protected]":
   version "18.15.13"
@@ -2719,9 +2719,9 @@
   integrity sha512-IKjZ8RjTSwD4/YG+2gtj7BPFRB/lNbWKTiSj3M7U/TD2B7HfYCxvp2Zz6xA2WIY7pAuL1QOUPw8gQRbUrrq4fQ==
 
 "@types/react-transition-group@^4.4.6":
-  version "4.4.6"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
-  integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==
+  version "4.4.7"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.7.tgz#bf69f269d74aa78b99097673ca6dd6824a68ef1c"
+  integrity sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==
   dependencies:
     "@types/react" "*"
 
@@ -4069,12 +4069,12 @@ [email protected]:
     node-releases "^1.1.61"
 
 browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.21.10, browserslist@^4.21.9, browserslist@^4.6.2, browserslist@^4.6.4:
-  version "4.21.11"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.11.tgz#35f74a3e51adc4d193dcd76ea13858de7b8fecb8"
-  integrity sha512-xn1UXOKUz7DjdGlg9RrUr0GGiWzI97UQJnugHtH0OLDfJB7jMgoIkYvRIEO1l9EeEERVqeqLYOcFBW9ldjypbQ==
+  version "4.22.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.0.tgz#6adc8116589ccea8a99d0df79c5de2436199abdb"
+  integrity sha512-v+Jcv64L2LbfTC6OnRcaxtqJNJuQAVhZKSJfR/6hn7lhnChUXl4amwVviqN1k411BB+3rRoKMitELRn1CojeRA==
   dependencies:
-    caniuse-lite "^1.0.30001538"
-    electron-to-chromium "^1.4.526"
+    caniuse-lite "^1.0.30001539"
+    electron-to-chromium "^1.4.530"
     node-releases "^2.0.13"
     update-browserslist-db "^1.0.13"
 
@@ -4265,10 +4265,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001538:
-  version "1.0.30001539"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001539.tgz#325a387ab1ed236df2c12dc6cd43a4fff9903a44"
-  integrity sha512-hfS5tE8bnNiNvEOEkm8HElUHroYwlqMMENEzELymy77+tJ6m+gA2krtHl5hxJaj71OlpC2cHZbdSMX1/YEqEkA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001539:
+  version "1.0.30001541"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001541.tgz#b1aef0fadd87fb72db4dcb55d220eae17b81cdb1"
+  integrity sha512-bLOsqxDgTqUBkzxbNlSBt8annkDpQB9NdzdTbO2ooJ+eC/IQcvDspDc058g84ejCelF7vHUx57KIOjEecOHXaw==
 
 canvas@^2.8.0:
   version "2.11.2"
@@ -5490,10 +5490,10 @@ ejs@^2.6.1:
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
-electron-to-chromium@^1.3.564, electron-to-chromium@^1.4.526:
-  version "1.4.530"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.530.tgz#c31a44346739bb34acb1a4026a07c3b9eeeb326c"
-  integrity sha512-rsJ9O8SCI4etS8TBsXuRfHa2eZReJhnGf5MHZd3Vo05PukWHKXhk3VQGbHHnDLa8nZz9woPCpLCMQpLGgkGNRA==
+electron-to-chromium@^1.3.564, electron-to-chromium@^1.4.530:
+  version "1.4.534"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.534.tgz#2056c1fc41a7157cdd5c634f96e758d727b69201"
+  integrity sha512-ikY7wAMtMt3jTnHsHG0YLl4MKJiKz2tgidenGSNgwUX2StBLNZ8VCxflD9tZK/ceTs4j8gDC9+6LQQ6iGkK04g==
 
 [email protected], elliptic@^6.5.3, elliptic@^6.5.4:
   version "6.5.4"
@@ -8649,11 +8649,12 @@ json-rpc-engine@^6.1.0:
     eth-rpc-errors "^4.0.2"
 
 json-rpc-middleware-stream@^4.2.1:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/json-rpc-middleware-stream/-/json-rpc-middleware-stream-4.2.2.tgz#b620d86e8f321f80c9f041c51bd783fa92a8ccb2"
-  integrity sha512-tmTQCI/R8wKMTWB50xlzkyh90JR5VuKiDVlWlmG7DjeKfdDtbLL/4vYCRlG5HnSSKkhrkVPI0TrHQz1Dethl7A==
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/json-rpc-middleware-stream/-/json-rpc-middleware-stream-4.2.3.tgz#08340846ffaa2a60287930773546eb4b7f7dbba2"
+  integrity sha512-4iFb0yffm5vo3eFKDbQgke9o17XBcLQ2c3sONrXSbcOLzP8LTojqo8hRGVgtJShhm5q4ZDSNq039fAx9o65E1w==
   dependencies:
     "@metamask/safe-event-emitter" "^3.0.0"
+    json-rpc-engine "^6.1.0"
     readable-stream "^2.3.3"
 
 json-schema-traverse@^0.4.1: