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

feat(webapp): test mm mobile
edenia · Sep 26, 2023 · 1a6dc57 · 1a6dc57
2 parents 4de5847 + 491bdbd
commit 1a6dc57
Show file tree

Hide file tree

Showing 4 changed files with 1,446 additions and 894 deletions.
diff --git a/webapp/package.json b/webapp/package.json
@@ -31,6 +31,7 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@ethersproject/bignumber": "^5.7.0",
+    "@ethersproject/providers": "^5.7.2",
     "@libre-chain/libre-link": "^3.5.0",
     "@libre-chain/libre-link-browser-transport": "^3.4.2",
     "@metamask/sdk": "^0.5.6",
@@ -39,6 +40,8 @@
     "@mui/material": "^5.0.1",
     "@mui/styles": "^5.0.1",
     "@mui/x-date-pickers": "^6.5.0",
+    "@web3-react/core": "6.1.9",
+    "@web3-react/injected-connector": "^6.0.7",
     "anchor-link": "^3.5.1",
     "anchor-link-browser-transport": "^3.5.1",
     "core-js": "^3.15.2",

diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -1,6 +1,8 @@
 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'
@@ -17,6 +19,12 @@ 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()
 
@@ -39,20 +47,22 @@ const App = () => {
   const theme = useMemo(() => getTheme(state.useDarkMode), [state.useDarkMode])
 
   return (
-    <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 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>
   )
 }
 

diff --git a/webapp/src/components/Vmpxswap/index.js b/webapp/src/components/Vmpxswap/index.js
@@ -1,7 +1,9 @@
 import React, { useEffect } from 'react'
 import Box from '@mui/material/Box'
 import { makeStyles } from '@mui/styles'
+import { useWeb3React } from '@web3-react/core'
 import { Button, Link, Typography } from '@mui/material'
+import { InjectedConnector } from '@web3-react/injected-connector'
 
 import { blockchainConfig } from '../../config'
 import { useSharedState } from '../../context/state.context'
@@ -11,10 +13,22 @@ 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
 
@@ -48,10 +62,25 @@ const Vmpxswap = () => {
       const { ethereum } = window
 
       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)
+              })
+            }
+          })
+
+          return
+        }
+
         showMessage({
           type: 'warning',
           content: 'Asegúrate de tener MetaMask instalado.'
         })
+
         return
       }
 
@@ -63,6 +92,7 @@ const Vmpxswap = () => {
       })
 
       const accounts = await ethereum.request({ method: 'eth_accounts' })
+
       setState({
         param: 'ethAccountAddress',
         ethAccountAddress: accounts[0] || null
@@ -90,6 +120,19 @@ const Vmpxswap = () => {
 
         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!'
@@ -119,6 +162,16 @@ 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}