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) }