diff --git a/webapp/src/App.js b/webapp/src/App.js index 4b53164..77ee52d 100644 --- a/webapp/src/App.js +++ b/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 ( - - - - - - - - }> - {userRoutes?.browser?.map(renderRoute)} - - - - - - - + + + + + + + }> + {userRoutes?.browser?.map(renderRoute)} + + + + + + ) } diff --git a/webapp/src/components/SwapComponent/index.js b/webapp/src/components/SwapComponent/index.js index 980dbfb..af21feb 100644 --- a/webapp/src/components/SwapComponent/index.js +++ b/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( diff --git a/webapp/src/components/Vmpxswap/index.js b/webapp/src/components/Vmpxswap/index.js index 7547c9d..4dad6e6 100644 --- a/webapp/src/components/Vmpxswap/index.js +++ b/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 (