diff --git a/src/components/ConnectButton/index.jsx b/src/components/ConnectButton/index.jsx
index 14b57aa8..a00f1124 100644
--- a/src/components/ConnectButton/index.jsx
+++ b/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) => {
- 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)
+ }
+ })
+ }, [])
-export default ConnectButton
+ return (
+
+ )
+}
+
+export default connect(
+ null,
+ { registerProvider: fetchProvider },
+)(withSnackbar(ConnectButton))
diff --git a/src/logic/wallets/store/actions/fetchProvider.js b/src/logic/wallets/store/actions/fetchProvider.js
index 5c010743..e25e7b8d 100644
--- a/src/logic/wallets/store/actions/fetchProvider.js
+++ b/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)
}