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,24 +33,39 @@ const web3Connect = new Web3Connect.Core({
   },
 })
 
-web3Connect.on('connect', (provider: any) => {
+type Props = {
-  if (provider) {
+  registerProvider: Function,
-    console.log('wop')
+  enqueueSnackbar: Function,
-  }
+  closeSnackbar: Function,
-})
+}
 
-const ConnectButton = (props: Object) => (
+const ConnectButton = ({
-  <Button
+  registerProvider, enqueueSnackbar, closeSnackbar, ...props
-    color="primary"
+}: Props) => {
-    variant="contained"
+  useEffect(() => {
-    minWidth={140}
+    web3Connect.on('connect', (provider: any) => {
-    onClick={() => {
+      if (provider) {
-      web3Connect.toggleModal()
+        registerProvider(provider, enqueueSnackbar, closeSnackbar)
-    }}
+      }
-    {...props}
+    })
-  >
+  }, [])
-    Connect
-  </Button>
-)
 
-export default ConnectButton
+  return (
+    <Button
+      color="primary"
+      variant="contained"
+      minWidth={140}
+      onClick={() => {
+        web3Connect.toggleModal()
+      }}
+      {...props}
+    >
+      Connect
+    </Button>
+  )
+}
+
+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)
+  const providerInfo: ProviderProps = await getProviderInfo(provider)
-  processProviderResponse(dispatch, provider)
+  await handleProviderNotification(providerInfo, enqueueSnackbar, closeSnackbar)
+  processProviderResponse(dispatch, providerInfo)
 }