use web3connect to get provider

src/components/ConnectButton/index.jsx

@@ -1,10 +1,13 @@
 // @flow
-import * as React from 'react'
+import React, { useEffect } from 'react'
+import { withSnackbar } from 'notistack'
+import { connect } from 'react-redux'
 import Web3Connect from 'web3connect'
 import WalletConnectProvider from '@walletconnect/web3-provider'
 import Portis from '@portis/web3'
 import Fortmatic from 'fortmatic'
 import Button from '~/components/layout/Button'
+import { fetchProvider } from '~/logic/wallets/store/actions'
 
 const web3Connect = new Web3Connect.Core({
   network: 'rinkeby',
@@ -30,13 +33,24 @@ const web3Connect = new Web3Connect.Core({
   },
 })
 
-web3Connect.on('connect', (provider: any) => {
-  if (provider) {
-    console.log('wop')
-  }
-})
+type Props = {
+  registerProvider: Function,
+  enqueueSnackbar: Function,
+  closeSnackbar: Function,
+}
 
-const ConnectButton = (props: Object) => (
+const ConnectButton = ({
+  registerProvider, enqueueSnackbar, closeSnackbar, ...props
+}: Props) => {
+  useEffect(() => {
+    web3Connect.on('connect', (provider: any) => {
+      if (provider) {
+        registerProvider(provider, enqueueSnackbar, closeSnackbar)
+      }
+    })
+  }, [])
+
+  return (
     <Button
       color="primary"
       variant="contained"
@@ -48,6 +62,10 @@ const ConnectButton = (props: Object) => (
     >
       Connect
     </Button>
-)
+  )
+}
 
-export default ConnectButton
+export default connect(
+  null,
+  { registerProvider: fetchProvider },
+)(withSnackbar(ConnectButton))

src/logic/wallets/store/actions/fetchProvider.js

@@ -1,6 +1,6 @@
 // @flow
 import type { Dispatch as ReduxDispatch } from 'redux'
-import { ETHEREUM_NETWORK_IDS, ETHEREUM_NETWORK } from '~/logic/wallets/getWeb3'
+import { ETHEREUM_NETWORK_IDS, ETHEREUM_NETWORK, getProviderInfo } from '~/logic/wallets/getWeb3'
 import { getNetwork } from '~/config'
 import type { ProviderProps } from '~/logic/wallets/store/model/provider'
 import { makeProvider } from '~/logic/wallets/store/model/provider'
@@ -28,7 +28,7 @@ const handleProviderNotification = (
   enqueueSnackbar: Function,
   closeSnackbar: Function,
 ) => {
-  const { loaded, available, network } = provider
+  const { loaded, network, available } = provider
 
   if (!loaded) {
     showSnackbar(NOTIFICATIONS.CONNECT_WALLET_ERROR_MSG, enqueueSnackbar, closeSnackbar)
@@ -55,9 +55,10 @@ const handleProviderNotification = (
   }
 }
 
-export default (provider: ProviderProps, enqueueSnackbar: Function, closeSnackbar: Function) => (
+export default (provider: Object, enqueueSnackbar: Function, closeSnackbar: Function) => async (
   dispatch: ReduxDispatch<*>,
 ) => {
-  handleProviderNotification(provider, enqueueSnackbar, closeSnackbar)
-  processProviderResponse(dispatch, provider)
+  const providerInfo: ProviderProps = await getProviderInfo(provider)
+  await handleProviderNotification(providerInfo, enqueueSnackbar, closeSnackbar)
+  processProviderResponse(dispatch, providerInfo)
 }