From 920b4da29dcae328083e4c39f31bc4f4f0cf9e76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Thu, 16 May 2019 17:58:31 +0200 Subject: [PATCH 01/10] Remove useless spaces --- .../Header/component/ProviderDetails/UserDetails.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Header/component/ProviderDetails/UserDetails.jsx b/src/components/Header/component/ProviderDetails/UserDetails.jsx index e90b3bbc..dd60a481 100644 --- a/src/components/Header/component/ProviderDetails/UserDetails.jsx +++ b/src/components/Header/component/ProviderDetails/UserDetails.jsx @@ -132,7 +132,6 @@ const UserDetails = ({ Status - {' '} @@ -144,7 +143,6 @@ const UserDetails = ({ Client - {' '} Metamask client @@ -156,7 +154,6 @@ const UserDetails = ({ Network - {' '} Network From a5db2d4ed6e0f022089a349aa376dfc12d183f8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Thu, 16 May 2019 18:18:26 +0200 Subject: [PATCH 02/10] Allow Metamask in private mode --- src/logic/wallets/getWeb3.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/logic/wallets/getWeb3.js b/src/logic/wallets/getWeb3.js index aecfaaa4..724c5b41 100644 --- a/src/logic/wallets/getWeb3.js +++ b/src/logic/wallets/getWeb3.js @@ -57,7 +57,14 @@ const getNetworkIdFrom = async (web3Provider) => { } export const getProviderInfo: Function = async (): Promise => { - if (typeof window.web3 === 'undefined') { + let web3Provider + + if (window.ethereum) { + web3Provider = window.ethereum + await web3Provider.enable() + } else if (window.web3) { + web3Provider = window.web3.currentProvider + } else { return { name: '', available: false, @@ -67,15 +74,9 @@ export const getProviderInfo: Function = async (): Promise => { } } - // Use MetaMask's provider. - web3 = new Web3(window.web3.currentProvider) + web3 = new Web3(web3Provider) - if (process.env.NODE_ENV !== 'test') { - // eslint-disable-next-line - console.log('Injected web3 detected.') - } - - const name = isMetamask(window.web3) ? WALLET_PROVIDER.METAMASK : 'UNKNOWN' + const name = isMetamask(web3) ? WALLET_PROVIDER.METAMASK : 'UNKNOWN' const account = await getAccountFrom(web3) const network = await getNetworkIdFrom(web3) From bbc738d29caa2de2be3fb45c5bfc4ac7333ebbf2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Thu, 16 May 2019 20:07:33 +0200 Subject: [PATCH 03/10] Identify the Safe web3 provider --- src/logic/wallets/getWeb3.js | 22 ++++++++++++++----- .../welcome/components/Layout.stories.js | 10 ++++++--- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/src/logic/wallets/getWeb3.js b/src/logic/wallets/getWeb3.js index 724c5b41..edd5d304 100644 --- a/src/logic/wallets/getWeb3.js +++ b/src/logic/wallets/getWeb3.js @@ -12,6 +12,7 @@ export const ETHEREUM_NETWORK = { } export const WALLET_PROVIDER = { + SAFE: 'SAFE', METAMASK: 'METAMASK', PARITY: 'PARITY', REMOTE: 'REMOTE', @@ -36,12 +37,23 @@ export const openTxInEtherScan = (tx: string, network: string) => `https://${net export const getEtherScanLink = (address: string, network: string) => `https://${network}.etherscan.io/address/${address}` let web3 -export const getWeb3 = () => web3 || new Web3(window.web3.currentProvider) +export const getWeb3 = () => web3 -const isMetamask: Function = (web3Provider): boolean => { - const isMetamaskConstructor = web3Provider.currentProvider.constructor.name === 'MetamaskInpageProvider' +const getProviderName: Function = (web3Provider): boolean => { + let name - return isMetamaskConstructor || web3Provider.currentProvider.isMetaMask + switch (web3Provider.currentProvider.constructor.name) { + case 'SafeWeb3Provider': + name = WALLET_PROVIDER.SAFE + break + case 'MetamaskInpageProvider': + name = WALLET_PROVIDER.METAMASK + break + default: + name = 'UNKNOWN' + } + + return name } const getAccountFrom: Function = async (web3Provider): Promise => { @@ -76,7 +88,7 @@ export const getProviderInfo: Function = async (): Promise => { web3 = new Web3(web3Provider) - const name = isMetamask(web3) ? WALLET_PROVIDER.METAMASK : 'UNKNOWN' + const name = getProviderName(web3) const account = await getAccountFrom(web3) const network = await getNetworkIdFrom(web3) diff --git a/src/routes/welcome/components/Layout.stories.js b/src/routes/welcome/components/Layout.stories.js index fc696c66..d5b5c62c 100644 --- a/src/routes/welcome/components/Layout.stories.js +++ b/src/routes/welcome/components/Layout.stories.js @@ -9,15 +9,19 @@ const FrameDecorator = story =>
{story()}
storiesOf('Routes /welcome', module) .addDecorator(FrameDecorator) + .add('Welcome with Gnosis Safe connected', () => { + const provider = select('Status by Provider', ['', 'UNKNOWN', 'SAFE', 'METAMASK', 'PARITY'], 'SAFE') + return {}} /> + }) .add('Welcome with Metamask connected', () => { - const provider = select('Status by Provider', ['', 'UNKNOWN', 'METAMASK', 'PARITY'], 'METAMASK') + const provider = select('Status by Provider', ['', 'UNKNOWN', 'SAFE', 'METAMASK', 'PARITY'], 'METAMASK') return {}} /> }) .add('Welcome with unknown wallet', () => { - const provider = select('Status by Provider', ['', 'UNKNOWN', 'METAMASK', 'PARITY'], 'UNKNOWN') + const provider = select('Status by Provider', ['', 'UNKNOWN', 'SAFE', 'METAMASK', 'PARITY'], 'UNKNOWN') return {}} /> }) .add('Welcome without wallet connected', () => { - const provider = select('Status by Provider', ['', 'UNKNOWN', 'METAMASK', 'PARITY'], '') + const provider = select('Status by Provider', ['', 'UNKNOWN', 'SAFE', 'METAMASK', 'PARITY'], '') return {}} /> }) From 800955fbe608aa28731aef1d2296f3578db7af6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Fri, 17 May 2019 16:03:37 +0200 Subject: [PATCH 04/10] Add loop to listen to provider updates --- src/components/Header/actions.js | 4 +- src/components/Header/index.jsx | 43 ++++++++++++------- .../wallets/store/actions/fetchProvider.js | 18 +++++++- 3 files changed, 47 insertions(+), 18 deletions(-) diff --git a/src/components/Header/actions.js b/src/components/Header/actions.js index e96a2379..9eff46e2 100644 --- a/src/components/Header/actions.js +++ b/src/components/Header/actions.js @@ -1,12 +1,14 @@ // @flow -import { fetchProvider, removeProvider } from '~/logic/wallets/store/actions' +import { fetchProvider, recurrentFetchProvider, removeProvider } from '~/logic/wallets/store/actions' export type Actions = { fetchProvider: typeof fetchProvider, + recurrentFetchProvider: typeof recurrentFetchProvider, removeProvider: typeof removeProvider, } export default { fetchProvider, + recurrentFetchProvider, removeProvider, } diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 4ff64c7f..4542a2cd 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -26,20 +26,39 @@ class HeaderComponent extends React.PureComponent { hasError: false, } - componentDidMount() { - this.onConnect() + async componentDidMount() { + const { fetchProvider, recurrentFetchProvider } = this.props + + let currentProvider: ProviderProps = await fetchProvider(this.props.openSnackbar) + this.providerListener = setInterval(async () => { + console.log('loop') + currentProvider = await recurrentFetchProvider(currentProvider, this.props.openSnackbar) + }, 2000) + } + + componentDidCatch(error: Error, info: Info) { + this.setState({ hasError: true }) + this.props.openSnackbar(WALLET_ERROR_MSG, 'error') + + logComponentStack(error, info) } onDisconnect = () => { - const { removeProvider, openSnackbar } = this.props + clearInterval(this.providerListener) - removeProvider(openSnackbar) + this.props.removeProvider(this.props.openSnackbar) } - onConnect = () => { - const { fetchProvider, openSnackbar } = this.props - - fetchProvider(openSnackbar) + onConnect = async () => { + const { fetchProvider, recurrentFetchProvider } = this.props + + clearInterval(this.providerListener) + console.log('onConnect') + let currentProvider: ProviderProps = await fetchProvider(this.props.openSnackbar) + this.providerListener = setInterval(async () => { + console.log('loopConnect') + currentProvider = await recurrentFetchProvider(currentProvider, this.props.openSnackbar) + }, 2000) } getProviderInfoBased = () => { @@ -76,14 +95,6 @@ class HeaderComponent extends React.PureComponent { ) } - componentDidCatch(error: Error, info: Info) { - const { openSnackbar } = this.props - this.setState({ hasError: true }) - openSnackbar(WALLET_ERROR_MSG, 'error') - - logComponentStack(error, info) - } - render() { const info = this.getProviderInfoBased() const details = this.getProviderDetailsBased() diff --git a/src/logic/wallets/store/actions/fetchProvider.js b/src/logic/wallets/store/actions/fetchProvider.js index 306664b0..ef6c0805 100644 --- a/src/logic/wallets/store/actions/fetchProvider.js +++ b/src/logic/wallets/store/actions/fetchProvider.js @@ -44,10 +44,26 @@ const handleProviderNotification = (openSnackbar: Function, provider: ProviderPr openSnackbar(msg, variant) } +export const recurrentFetchProvider = (currentProvider: ProviderProps, openSnackbar: Function) => async (dispatch: ReduxDispatch<*>) => { + const newProvider: ProviderProps = await getProviderInfo() + + if (JSON.stringify(currentProvider) !== JSON.stringify(newProvider)) { + console.log('provider updated') + console.log(JSON.stringify(currentProvider)) + console.log(JSON.stringify(newProvider)) + handleProviderNotification(openSnackbar, newProvider) + processProviderResponse(dispatch, newProvider) + } + + return newProvider +} + export default (openSnackbar: Function) => async (dispatch: ReduxDispatch<*>) => { const provider: ProviderProps = await getProviderInfo() - + console.log('initial provider', provider) handleProviderNotification(openSnackbar, provider) processProviderResponse(dispatch, provider) + + return provider } From ca4d298a02cbdb74e7516604d4be35696dd9a452 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Fri, 17 May 2019 18:17:24 +0200 Subject: [PATCH 05/10] Add temporary logs --- src/logic/contracts/safeContracts.js | 9 +++++-- src/logic/tokens/store/actions/fetchTokens.js | 9 ++++++- .../tokens/store/actions/loadActiveTokens.js | 3 ++- src/logic/wallets/getWeb3.js | 1 + src/routes/open/container/Open.jsx | 1 + src/routes/safe/container/index.jsx | 1 + src/routes/safe/store/actions/fetchSafe.js | 2 ++ .../safe/store/actions/fetchTokenBalances.js | 24 +++++++++++++------ src/routes/safe/store/reducer/safe.js | 1 + 9 files changed, 40 insertions(+), 11 deletions(-) diff --git a/src/logic/contracts/safeContracts.js b/src/logic/contracts/safeContracts.js index e2108346..79b3241b 100644 --- a/src/logic/contracts/safeContracts.js +++ b/src/logic/contracts/safeContracts.js @@ -10,8 +10,10 @@ import { ZERO_ADDRESS } from '~/logic/wallets/ethAddresses' let proxyFactoryMaster let safeMaster -const createGnosisSafeContract = (web3: any) => { +const createGnosisSafeContract = async (web3: any) => { + console.log('createGnosisSafeContract') const gnosisSafe = contract(GnosisSafeSol) + console.log('gnosisSafe', gnosisSafe, web3) gnosisSafe.setProvider(web3.currentProvider) return gnosisSafe @@ -75,7 +77,10 @@ export const deploySafeContract = async (safeAccounts: string[], numConfirmation export const getGnosisSafeInstanceAt = async (safeAddress: string) => { const web3 = getWeb3() - const GnosisSafe = getGnosisSafeContract(web3) + console.log('web3', web3) + const GnosisSafe = await getGnosisSafeContract(web3) + console.log('GnosisSafe', GnosisSafe) + console.log('safeAddress', safeAddress) const gnosisSafe = await GnosisSafe.at(safeAddress) return gnosisSafe diff --git a/src/logic/tokens/store/actions/fetchTokens.js b/src/logic/tokens/store/actions/fetchTokens.js index 204dc54a..af279fa8 100644 --- a/src/logic/tokens/store/actions/fetchTokens.js +++ b/src/logic/tokens/store/actions/fetchTokens.js @@ -12,14 +12,20 @@ import { ensureOnce } from '~/utils/singleton' import saveTokens from './saveTokens' const createStandardTokenContract = async () => { + console.log('createStandardTokenContract') const web3 = getWeb3() + console.log('web3', web3) const erc20Token = await contract(StandardToken) + console.log('erc20Token', erc20Token) erc20Token.setProvider(web3.currentProvider) - + console.log('erc20Token', erc20Token) return erc20Token } + const createHumanFriendlyTokenContract = async () => { + console.log('createHumanFriendlyTokenContract') const web3 = getWeb3() + console.log('web3', web3) const humanErc20Token = await contract(HumanFriendlyToken) humanErc20Token.setProvider(web3.currentProvider) @@ -32,6 +38,7 @@ export const getStandardTokenContract = ensureOnce(createStandardTokenContract) export const fetchTokens = () => async (dispatch: ReduxDispatch) => { try { + console.log('fetchTokens------') const { data: { results: tokenList }, } = await fetchTokenList() diff --git a/src/logic/tokens/store/actions/loadActiveTokens.js b/src/logic/tokens/store/actions/loadActiveTokens.js index 7ca0aa80..620bb9c7 100644 --- a/src/logic/tokens/store/actions/loadActiveTokens.js +++ b/src/logic/tokens/store/actions/loadActiveTokens.js @@ -7,9 +7,10 @@ import { getActiveTokens } from '~/logic/tokens/utils/tokensStorage' import saveTokens from './saveTokens' const loadActiveTokens = () => async (dispatch: ReduxDispatch) => { + console.log('loadActiveTokens') try { const tokens: Map = await getActiveTokens() - + console.log('tokens', tokens) const tokenRecordsList: List = List( Object.values(tokens).map((token: TokenProps): Token => makeToken(token)), ) diff --git a/src/logic/wallets/getWeb3.js b/src/logic/wallets/getWeb3.js index edd5d304..275dcbe3 100644 --- a/src/logic/wallets/getWeb3.js +++ b/src/logic/wallets/getWeb3.js @@ -87,6 +87,7 @@ export const getProviderInfo: Function = async (): Promise => { } web3 = new Web3(web3Provider) + console.log('WEB3 UPDATED!!!!', web3, getWeb3()) const name = getProviderName(web3) const account = await getAccountFrom(web3) diff --git a/src/routes/open/container/Open.jsx b/src/routes/open/container/Open.jsx index 7d65b08f..ee51b2ff 100644 --- a/src/routes/open/container/Open.jsx +++ b/src/routes/open/container/Open.jsx @@ -34,6 +34,7 @@ export const createSafe = async (values: Object, userAccount: string, addSafe: A await checkReceiptStatus(safe.tx) const safeAddress = safe.logs[0].args.proxy + console.log('createSafe') const safeContract = await getGnosisSafeInstanceAt(safeAddress) addSafe(name, safeContract.address, numConfirmations, owners, accounts) diff --git a/src/routes/safe/container/index.jsx b/src/routes/safe/container/index.jsx index bd0a7b68..f784471d 100644 --- a/src/routes/safe/container/index.jsx +++ b/src/routes/safe/container/index.jsx @@ -23,6 +23,7 @@ class SafeView extends React.Component { fetchTokenBalances(safeUrl, activeTokens) this.intervalId = setInterval(() => { + console.log('checkUpdates') this.checkForUpdates() }, TIMEOUT) } diff --git a/src/routes/safe/store/actions/fetchSafe.js b/src/routes/safe/store/actions/fetchSafe.js index 83fd2774..68b47594 100644 --- a/src/routes/safe/store/actions/fetchSafe.js +++ b/src/routes/safe/store/actions/fetchSafe.js @@ -19,7 +19,9 @@ const buildOwnersFrom = ( }) export const buildSafe = async (safeAddress: string, safeName: string) => { + console.log('build1') const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress) + console.log('build2', gnosisSafe) const ethBalance = await getBalanceInEtherOf(safeAddress) const threshold = Number(await gnosisSafe.getThreshold()) diff --git a/src/routes/safe/store/actions/fetchTokenBalances.js b/src/routes/safe/store/actions/fetchTokenBalances.js index a9b3d503..24e63a51 100644 --- a/src/routes/safe/store/actions/fetchTokenBalances.js +++ b/src/routes/safe/store/actions/fetchTokenBalances.js @@ -10,16 +10,20 @@ import updateSafe from './updateSafe' import { ETH_ADDRESS } from '~/logic/tokens/utils/tokenHelpers' export const calculateBalanceOf = async (tokenAddress: string, safeAddress: string, decimals: number = 18) => { + console.log('calculateBalanceOf start', tokenAddress, safeAddress, decimals) if (tokenAddress === ETH_ADDRESS) { + console.log('calculateBalanceOf eth') return '0' } - + console.log('calculateBalanceOf continue') const erc20Token = await getStandardTokenContract() + console.log('calculateBalanceOf end', erc20Token) let balance = 0 try { const token = await erc20Token.at(tokenAddress) balance = await token.balanceOf(safeAddress) + console.log('tokenAddress', balance) } catch (err) { console.error('Failed to fetch token balances: ', err) } @@ -30,19 +34,25 @@ export const calculateBalanceOf = async (tokenAddress: string, safeAddress: stri const fetchTokenBalances = (safeAddress: string, tokens: List) => async ( dispatch: ReduxDispatch, ) => { + console.log('fetchTokenBalances') if (!safeAddress || !tokens || !tokens.size) { return } - + console.log('fetchTokenBalances tokens', tokens) try { const withBalances = await Promise.all( - tokens.map(async token => TokenBalanceRecord({ - address: token.address, - balance: await calculateBalanceOf(token.address, safeAddress, token.decimals), - })), + tokens.map(async token => { + const balance = await calculateBalanceOf(token.address, safeAddress, token.decimals) + console.log('balance', token.address, balance) + return TokenBalanceRecord({ + address: token.address, + balance, + }) + }) ) - + console.log('fetchTokenBalances withBalances', withBalances) dispatch(updateSafe({ address: safeAddress, balances: List(withBalances) })) + console.log('fetchTokenBalances end') } catch (err) { // eslint-disable-next-line console.error('Error while loading active tokens from storage:', err) diff --git a/src/routes/safe/store/reducer/safe.js b/src/routes/safe/store/reducer/safe.js index 8e90b2cc..7f7ad859 100644 --- a/src/routes/safe/store/reducer/safe.js +++ b/src/routes/safe/store/reducer/safe.js @@ -59,6 +59,7 @@ export const safesInitialState = async (): Promise => { export default handleActions( { [UPDATE_SAFE]: (state: State, action: ActionType): State => { + console.log('updating safe') const safe = action.payload const safeAddress = safe.address From 8c1586ba3060fe2050debcbe8260ff999e176749 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Mon, 3 Jun 2019 13:23:30 +0200 Subject: [PATCH 06/10] Remove logs --- src/components/Header/index.jsx | 16 +- src/logic/contracts/safeContracts.js | 5 - src/logic/tokens/store/actions/fetchTokens.js | 7 - .../tokens/store/actions/loadActiveTokens.js | 2 - src/logic/wallets/getWeb3.js | 1 - .../wallets/store/actions/fetchProvider.js | 8 +- .../load/components/OwnerList/index.jsx | 177 ++++++++++++++++++ src/routes/open/container/Open.jsx | 1 - src/routes/safe/container/index.jsx | 1 - src/routes/safe/store/actions/addSafe.js | 10 +- src/routes/safe/store/actions/fetchSafe.js | 2 - .../safe/store/actions/fetchTokenBalances.js | 14 +- src/routes/safe/store/reducer/safe.js | 1 - src/test/safe.dom.load.test.js | 1 - 14 files changed, 190 insertions(+), 56 deletions(-) create mode 100644 src/routes/load/components/OwnerList/index.jsx diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 4542a2cd..98fa0bf6 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -27,36 +27,30 @@ class HeaderComponent extends React.PureComponent { } async componentDidMount() { - const { fetchProvider, recurrentFetchProvider } = this.props - - let currentProvider: ProviderProps = await fetchProvider(this.props.openSnackbar) - this.providerListener = setInterval(async () => { - console.log('loop') - currentProvider = await recurrentFetchProvider(currentProvider, this.props.openSnackbar) - }, 2000) + this.onConnect() } componentDidCatch(error: Error, info: Info) { + const { openSnackbar } = this.props this.setState({ hasError: true }) - this.props.openSnackbar(WALLET_ERROR_MSG, 'error') + openSnackbar(WALLET_ERROR_MSG, 'error') logComponentStack(error, info) } onDisconnect = () => { + const { removeProvider } = this.props clearInterval(this.providerListener) - this.props.removeProvider(this.props.openSnackbar) + removeProvider(this.props.openSnackbar) } onConnect = async () => { const { fetchProvider, recurrentFetchProvider } = this.props clearInterval(this.providerListener) - console.log('onConnect') let currentProvider: ProviderProps = await fetchProvider(this.props.openSnackbar) this.providerListener = setInterval(async () => { - console.log('loopConnect') currentProvider = await recurrentFetchProvider(currentProvider, this.props.openSnackbar) }, 2000) } diff --git a/src/logic/contracts/safeContracts.js b/src/logic/contracts/safeContracts.js index 79b3241b..16c6bf2f 100644 --- a/src/logic/contracts/safeContracts.js +++ b/src/logic/contracts/safeContracts.js @@ -11,9 +11,7 @@ let proxyFactoryMaster let safeMaster const createGnosisSafeContract = async (web3: any) => { - console.log('createGnosisSafeContract') const gnosisSafe = contract(GnosisSafeSol) - console.log('gnosisSafe', gnosisSafe, web3) gnosisSafe.setProvider(web3.currentProvider) return gnosisSafe @@ -77,10 +75,7 @@ export const deploySafeContract = async (safeAccounts: string[], numConfirmation export const getGnosisSafeInstanceAt = async (safeAddress: string) => { const web3 = getWeb3() - console.log('web3', web3) const GnosisSafe = await getGnosisSafeContract(web3) - console.log('GnosisSafe', GnosisSafe) - console.log('safeAddress', safeAddress) const gnosisSafe = await GnosisSafe.at(safeAddress) return gnosisSafe diff --git a/src/logic/tokens/store/actions/fetchTokens.js b/src/logic/tokens/store/actions/fetchTokens.js index af279fa8..04d8a1c3 100644 --- a/src/logic/tokens/store/actions/fetchTokens.js +++ b/src/logic/tokens/store/actions/fetchTokens.js @@ -12,20 +12,14 @@ import { ensureOnce } from '~/utils/singleton' import saveTokens from './saveTokens' const createStandardTokenContract = async () => { - console.log('createStandardTokenContract') const web3 = getWeb3() - console.log('web3', web3) const erc20Token = await contract(StandardToken) - console.log('erc20Token', erc20Token) erc20Token.setProvider(web3.currentProvider) - console.log('erc20Token', erc20Token) return erc20Token } const createHumanFriendlyTokenContract = async () => { - console.log('createHumanFriendlyTokenContract') const web3 = getWeb3() - console.log('web3', web3) const humanErc20Token = await contract(HumanFriendlyToken) humanErc20Token.setProvider(web3.currentProvider) @@ -38,7 +32,6 @@ export const getStandardTokenContract = ensureOnce(createStandardTokenContract) export const fetchTokens = () => async (dispatch: ReduxDispatch) => { try { - console.log('fetchTokens------') const { data: { results: tokenList }, } = await fetchTokenList() diff --git a/src/logic/tokens/store/actions/loadActiveTokens.js b/src/logic/tokens/store/actions/loadActiveTokens.js index 620bb9c7..e93e35fd 100644 --- a/src/logic/tokens/store/actions/loadActiveTokens.js +++ b/src/logic/tokens/store/actions/loadActiveTokens.js @@ -7,10 +7,8 @@ import { getActiveTokens } from '~/logic/tokens/utils/tokensStorage' import saveTokens from './saveTokens' const loadActiveTokens = () => async (dispatch: ReduxDispatch) => { - console.log('loadActiveTokens') try { const tokens: Map = await getActiveTokens() - console.log('tokens', tokens) const tokenRecordsList: List = List( Object.values(tokens).map((token: TokenProps): Token => makeToken(token)), ) diff --git a/src/logic/wallets/getWeb3.js b/src/logic/wallets/getWeb3.js index 275dcbe3..edd5d304 100644 --- a/src/logic/wallets/getWeb3.js +++ b/src/logic/wallets/getWeb3.js @@ -87,7 +87,6 @@ export const getProviderInfo: Function = async (): Promise => { } web3 = new Web3(web3Provider) - console.log('WEB3 UPDATED!!!!', web3, getWeb3()) const name = getProviderName(web3) const account = await getAccountFrom(web3) diff --git a/src/logic/wallets/store/actions/fetchProvider.js b/src/logic/wallets/store/actions/fetchProvider.js index ef6c0805..db33eab7 100644 --- a/src/logic/wallets/store/actions/fetchProvider.js +++ b/src/logic/wallets/store/actions/fetchProvider.js @@ -44,13 +44,12 @@ const handleProviderNotification = (openSnackbar: Function, provider: ProviderPr openSnackbar(msg, variant) } -export const recurrentFetchProvider = (currentProvider: ProviderProps, openSnackbar: Function) => async (dispatch: ReduxDispatch<*>) => { +export const recurrentFetchProvider = (currentProvider: ProviderProps, openSnackbar: Function) => async ( + dispatch: ReduxDispatch<*>, +) => { const newProvider: ProviderProps = await getProviderInfo() if (JSON.stringify(currentProvider) !== JSON.stringify(newProvider)) { - console.log('provider updated') - console.log(JSON.stringify(currentProvider)) - console.log(JSON.stringify(newProvider)) handleProviderNotification(openSnackbar, newProvider) processProviderResponse(dispatch, newProvider) } @@ -60,7 +59,6 @@ export const recurrentFetchProvider = (currentProvider: ProviderProps, openSnack export default (openSnackbar: Function) => async (dispatch: ReduxDispatch<*>) => { const provider: ProviderProps = await getProviderInfo() - console.log('initial provider', provider) handleProviderNotification(openSnackbar, provider) processProviderResponse(dispatch, provider) diff --git a/src/routes/load/components/OwnerList/index.jsx b/src/routes/load/components/OwnerList/index.jsx new file mode 100644 index 00000000..0a51c8d9 --- /dev/null +++ b/src/routes/load/components/OwnerList/index.jsx @@ -0,0 +1,177 @@ +// @flow +import * as React from 'react' +import Block from '~/components/layout/Block' +import { withStyles } from '@material-ui/core/styles' +import Field from '~/components/forms/Field' +import { required } from '~/components/forms/validator' +import TextField from '~/components/forms/TextField' +import OpenInNew from '@material-ui/icons/OpenInNew' +import Identicon from '~/components/Identicon' +import OpenPaper from '~/components/Stepper/OpenPaper' +import Col from '~/components/layout/Col' +import Row from '~/components/layout/Row' +import Link from '~/components/layout/Link' +import Paragraph from '~/components/layout/Paragraph' +import Hairline from '~/components/layout/Hairline' +import { + xs, sm, md, lg, border, secondary, +} from '~/theme/variables' +import { getOwnerNameBy } from '~/routes/open/components/fields' +import { getEtherScanLink, getWeb3 } from '~/logic/wallets/getWeb3' +import { FIELD_LOAD_ADDRESS } from '~/routes/load/components/fields' +import { getGnosisSafeContract } from '~/logic/contracts/safeContracts' + + +const openIconStyle = { + height: '16px', + color: secondary, +} + +const styles = () => ({ + details: { + padding: lg, + borderRight: `solid 1px ${border}`, + height: '100%', + }, + owners: { + display: 'flex', + justifyContent: 'flex-start', + }, + ownerNames: { + maxWidth: '400px', + }, + ownerAddresses: { + alignItems: 'center', + marginLeft: `${sm}`, + }, + address: { + paddingLeft: '6px', + }, + open: { + paddingLeft: sm, + width: 'auto', + '&:hover': { + cursor: 'pointer', + }, + }, + title: { + padding: `${md} ${lg}`, + }, + owner: { + padding: `0 ${lg}`, + marginBottom: '12px', + }, + header: { + padding: `${sm} ${lg}`, + }, + name: { + marginRight: `${sm}`, + }, +}) + +type LayoutProps = { + network: string, +} + +type Props = LayoutProps & { + values: Object, + classes: Object, +} + +type State = { + owners: Array, +} + +class OwnerListComponent extends React.PureComponent { + state = { + owners: [], + } + + mounted = false + + componentDidMount = async () => { + this.mounted = true + + const { values } = this.props + const safeAddress = values[FIELD_LOAD_ADDRESS] + const web3 = getWeb3() + + const GnosisSafe = getGnosisSafeContract(web3) + const gnosisSafe = await GnosisSafe.at(safeAddress) + const owners = await gnosisSafe.getOwners() + + if (!owners) { + return + } + + if (this.mounted) { + this.setState(() => ({ owners: owners.sort() })) + } + } + + componentWillUnmount() { + this.mounted = false + } + + render() { + const { network, classes } = this.props + const { owners } = this.state + + return ( + + + + {`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`} + + + + + NAME + ADDRESS + + + + { owners.map((x, index) => ( + + + + + + + + + {owners[index]} + + + + + + + + )) } + + + ) + } +} + +const OwnerListPage = withStyles(styles)(OwnerListComponent) + +const OwnerList = ({ network }: LayoutProps) => (controls: React$Node, { values }: Object) => ( + + + + + +) + +export default OwnerList diff --git a/src/routes/open/container/Open.jsx b/src/routes/open/container/Open.jsx index ee51b2ff..7d65b08f 100644 --- a/src/routes/open/container/Open.jsx +++ b/src/routes/open/container/Open.jsx @@ -34,7 +34,6 @@ export const createSafe = async (values: Object, userAccount: string, addSafe: A await checkReceiptStatus(safe.tx) const safeAddress = safe.logs[0].args.proxy - console.log('createSafe') const safeContract = await getGnosisSafeInstanceAt(safeAddress) addSafe(name, safeContract.address, numConfirmations, owners, accounts) diff --git a/src/routes/safe/container/index.jsx b/src/routes/safe/container/index.jsx index f784471d..bd0a7b68 100644 --- a/src/routes/safe/container/index.jsx +++ b/src/routes/safe/container/index.jsx @@ -23,7 +23,6 @@ class SafeView extends React.Component { fetchTokenBalances(safeUrl, activeTokens) this.intervalId = setInterval(() => { - console.log('checkUpdates') this.checkForUpdates() }, TIMEOUT) } diff --git a/src/routes/safe/store/actions/addSafe.js b/src/routes/safe/store/actions/addSafe.js index 0753e14d..97f3a312 100644 --- a/src/routes/safe/store/actions/addSafe.js +++ b/src/routes/safe/store/actions/addSafe.js @@ -25,13 +25,9 @@ export const addSafe = createAction( }), ) -const saveSafe = ( - name: string, - address: string, - threshold: number, - ownersName: string[], - ownersAddress: string[], -) => (dispatch: ReduxDispatch) => { +const saveSafe = (name: string, address: string, threshold: number, ownersName: string[], ownersAddress: string[]) => ( + dispatch: ReduxDispatch, +) => { const owners: List = buildOwnersFrom(ownersName, ownersAddress) const safe: Safe = SafeRecord({ diff --git a/src/routes/safe/store/actions/fetchSafe.js b/src/routes/safe/store/actions/fetchSafe.js index 68b47594..83fd2774 100644 --- a/src/routes/safe/store/actions/fetchSafe.js +++ b/src/routes/safe/store/actions/fetchSafe.js @@ -19,9 +19,7 @@ const buildOwnersFrom = ( }) export const buildSafe = async (safeAddress: string, safeName: string) => { - console.log('build1') const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress) - console.log('build2', gnosisSafe) const ethBalance = await getBalanceInEtherOf(safeAddress) const threshold = Number(await gnosisSafe.getThreshold()) diff --git a/src/routes/safe/store/actions/fetchTokenBalances.js b/src/routes/safe/store/actions/fetchTokenBalances.js index 24e63a51..d9dbcd91 100644 --- a/src/routes/safe/store/actions/fetchTokenBalances.js +++ b/src/routes/safe/store/actions/fetchTokenBalances.js @@ -10,20 +10,15 @@ import updateSafe from './updateSafe' import { ETH_ADDRESS } from '~/logic/tokens/utils/tokenHelpers' export const calculateBalanceOf = async (tokenAddress: string, safeAddress: string, decimals: number = 18) => { - console.log('calculateBalanceOf start', tokenAddress, safeAddress, decimals) if (tokenAddress === ETH_ADDRESS) { - console.log('calculateBalanceOf eth') return '0' } - console.log('calculateBalanceOf continue') const erc20Token = await getStandardTokenContract() - console.log('calculateBalanceOf end', erc20Token) let balance = 0 try { const token = await erc20Token.at(tokenAddress) balance = await token.balanceOf(safeAddress) - console.log('tokenAddress', balance) } catch (err) { console.error('Failed to fetch token balances: ', err) } @@ -34,25 +29,20 @@ export const calculateBalanceOf = async (tokenAddress: string, safeAddress: stri const fetchTokenBalances = (safeAddress: string, tokens: List) => async ( dispatch: ReduxDispatch, ) => { - console.log('fetchTokenBalances') if (!safeAddress || !tokens || !tokens.size) { return } - console.log('fetchTokenBalances tokens', tokens) try { const withBalances = await Promise.all( - tokens.map(async token => { + tokens.map(async (token) => { const balance = await calculateBalanceOf(token.address, safeAddress, token.decimals) - console.log('balance', token.address, balance) return TokenBalanceRecord({ address: token.address, balance, }) - }) + }), ) - console.log('fetchTokenBalances withBalances', withBalances) dispatch(updateSafe({ address: safeAddress, balances: List(withBalances) })) - console.log('fetchTokenBalances end') } catch (err) { // eslint-disable-next-line console.error('Error while loading active tokens from storage:', err) diff --git a/src/routes/safe/store/reducer/safe.js b/src/routes/safe/store/reducer/safe.js index 7f7ad859..8e90b2cc 100644 --- a/src/routes/safe/store/reducer/safe.js +++ b/src/routes/safe/store/reducer/safe.js @@ -59,7 +59,6 @@ export const safesInitialState = async (): Promise => { export default handleActions( { [UPDATE_SAFE]: (state: State, action: ActionType): State => { - console.log('updating safe') const safe = action.payload const safeAddress = safe.address diff --git a/src/test/safe.dom.load.test.js b/src/test/safe.dom.load.test.js index d909127b..7b07b7ed 100644 --- a/src/test/safe.dom.load.test.js +++ b/src/test/safe.dom.load.test.js @@ -30,7 +30,6 @@ afterAll(() => { console.error = originalError }) - const renderLoadSafe = async (localStore: Store) => { const provider = await getProviderInfo() const walletRecord = makeProvider(provider) From 98aeccf718be3bd02f03efd9f4c491b7cf6b226e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Mon, 3 Jun 2019 13:38:12 +0200 Subject: [PATCH 07/10] Show Safe logo when Safe is connected --- src/components/Header/assets/gnosis-safe-icon.svg | 1 + .../Header/assets/{metamask.svg => metamask-icon.svg} | 0 .../Header/component/ProviderDetails/UserDetails.jsx | 8 ++++++-- 3 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 src/components/Header/assets/gnosis-safe-icon.svg rename src/components/Header/assets/{metamask.svg => metamask-icon.svg} (100%) diff --git a/src/components/Header/assets/gnosis-safe-icon.svg b/src/components/Header/assets/gnosis-safe-icon.svg new file mode 100644 index 00000000..7c7d342a --- /dev/null +++ b/src/components/Header/assets/gnosis-safe-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Header/assets/metamask.svg b/src/components/Header/assets/metamask-icon.svg similarity index 100% rename from src/components/Header/assets/metamask.svg rename to src/components/Header/assets/metamask-icon.svg diff --git a/src/components/Header/component/ProviderDetails/UserDetails.jsx b/src/components/Header/component/ProviderDetails/UserDetails.jsx index dd60a481..4304541d 100644 --- a/src/components/Header/component/ProviderDetails/UserDetails.jsx +++ b/src/components/Header/component/ProviderDetails/UserDetails.jsx @@ -21,7 +21,8 @@ import { shortVersionOf } from '~/logic/wallets/ethAddresses' import { getEtherScanLink } from '~/logic/wallets/getWeb3' import CircleDot from '~/components/Header/component/CircleDot' -const metamask = require('../../assets/metamask.svg') +const metamaskIcon = require('../../assets/metamask-icon.svg') +const safeIcon = require('../../assets/gnosis-safe-icon.svg') const dot = require('../../assets/dotRinkeby.svg') type Props = { @@ -145,7 +146,10 @@ const UserDetails = ({ Client - Metamask client + {provider === 'safe' + ? Safe client + : Metamask client + } {upperFirst(provider)} From 461f3ef7d3a4020a3c23f62cf554fbeaef862eb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Thu, 6 Jun 2019 20:04:27 +0200 Subject: [PATCH 08/10] Fixes --- src/components/layout/Hairline/index.js | 2 +- src/logic/contracts/safeContracts.js | 2 +- src/logic/wallets/getWeb3.js | 2 +- .../load/components/OwnerList/index.jsx | 177 ------------------ 4 files changed, 3 insertions(+), 180 deletions(-) delete mode 100644 src/routes/load/components/OwnerList/index.jsx diff --git a/src/components/layout/Hairline/index.js b/src/components/layout/Hairline/index.js index b23445d8..223244f0 100644 --- a/src/components/layout/Hairline/index.js +++ b/src/components/layout/Hairline/index.js @@ -14,7 +14,7 @@ const calculateStyleFrom = (color?: string, margin?: Size) => ({ type Props = { margin?: Size, color?: string, - style?: Object + style?: Object, } const Hairline = ({ margin, color, style }: Props) => { diff --git a/src/logic/contracts/safeContracts.js b/src/logic/contracts/safeContracts.js index 16c6bf2f..cc4cab95 100644 --- a/src/logic/contracts/safeContracts.js +++ b/src/logic/contracts/safeContracts.js @@ -10,7 +10,7 @@ import { ZERO_ADDRESS } from '~/logic/wallets/ethAddresses' let proxyFactoryMaster let safeMaster -const createGnosisSafeContract = async (web3: any) => { +const createGnosisSafeContract = (web3: any) => { const gnosisSafe = contract(GnosisSafeSol) gnosisSafe.setProvider(web3.currentProvider) diff --git a/src/logic/wallets/getWeb3.js b/src/logic/wallets/getWeb3.js index edd5d304..390f6b43 100644 --- a/src/logic/wallets/getWeb3.js +++ b/src/logic/wallets/getWeb3.js @@ -37,7 +37,7 @@ export const openTxInEtherScan = (tx: string, network: string) => `https://${net export const getEtherScanLink = (address: string, network: string) => `https://${network}.etherscan.io/address/${address}` let web3 -export const getWeb3 = () => web3 +export const getWeb3 = () => web3 || (window.web3 && new Web3(window.web3.currentProvider)) || (window.ethereum && new Web3(window.ethereum)) const getProviderName: Function = (web3Provider): boolean => { let name diff --git a/src/routes/load/components/OwnerList/index.jsx b/src/routes/load/components/OwnerList/index.jsx deleted file mode 100644 index 0a51c8d9..00000000 --- a/src/routes/load/components/OwnerList/index.jsx +++ /dev/null @@ -1,177 +0,0 @@ -// @flow -import * as React from 'react' -import Block from '~/components/layout/Block' -import { withStyles } from '@material-ui/core/styles' -import Field from '~/components/forms/Field' -import { required } from '~/components/forms/validator' -import TextField from '~/components/forms/TextField' -import OpenInNew from '@material-ui/icons/OpenInNew' -import Identicon from '~/components/Identicon' -import OpenPaper from '~/components/Stepper/OpenPaper' -import Col from '~/components/layout/Col' -import Row from '~/components/layout/Row' -import Link from '~/components/layout/Link' -import Paragraph from '~/components/layout/Paragraph' -import Hairline from '~/components/layout/Hairline' -import { - xs, sm, md, lg, border, secondary, -} from '~/theme/variables' -import { getOwnerNameBy } from '~/routes/open/components/fields' -import { getEtherScanLink, getWeb3 } from '~/logic/wallets/getWeb3' -import { FIELD_LOAD_ADDRESS } from '~/routes/load/components/fields' -import { getGnosisSafeContract } from '~/logic/contracts/safeContracts' - - -const openIconStyle = { - height: '16px', - color: secondary, -} - -const styles = () => ({ - details: { - padding: lg, - borderRight: `solid 1px ${border}`, - height: '100%', - }, - owners: { - display: 'flex', - justifyContent: 'flex-start', - }, - ownerNames: { - maxWidth: '400px', - }, - ownerAddresses: { - alignItems: 'center', - marginLeft: `${sm}`, - }, - address: { - paddingLeft: '6px', - }, - open: { - paddingLeft: sm, - width: 'auto', - '&:hover': { - cursor: 'pointer', - }, - }, - title: { - padding: `${md} ${lg}`, - }, - owner: { - padding: `0 ${lg}`, - marginBottom: '12px', - }, - header: { - padding: `${sm} ${lg}`, - }, - name: { - marginRight: `${sm}`, - }, -}) - -type LayoutProps = { - network: string, -} - -type Props = LayoutProps & { - values: Object, - classes: Object, -} - -type State = { - owners: Array, -} - -class OwnerListComponent extends React.PureComponent { - state = { - owners: [], - } - - mounted = false - - componentDidMount = async () => { - this.mounted = true - - const { values } = this.props - const safeAddress = values[FIELD_LOAD_ADDRESS] - const web3 = getWeb3() - - const GnosisSafe = getGnosisSafeContract(web3) - const gnosisSafe = await GnosisSafe.at(safeAddress) - const owners = await gnosisSafe.getOwners() - - if (!owners) { - return - } - - if (this.mounted) { - this.setState(() => ({ owners: owners.sort() })) - } - } - - componentWillUnmount() { - this.mounted = false - } - - render() { - const { network, classes } = this.props - const { owners } = this.state - - return ( - - - - {`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`} - - - - - NAME - ADDRESS - - - - { owners.map((x, index) => ( - - - - - - - - - {owners[index]} - - - - - - - - )) } - - - ) - } -} - -const OwnerListPage = withStyles(styles)(OwnerListComponent) - -const OwnerList = ({ network }: LayoutProps) => (controls: React$Node, { values }: Object) => ( - - - - - -) - -export default OwnerList From 5444e56401898fc57bafd12c2e7a78623dca9f19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Thu, 6 Jun 2019 20:15:16 +0200 Subject: [PATCH 09/10] Refactor provider reducer --- .../wallets/store/test/provider.reducer.js | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/logic/wallets/store/test/provider.reducer.js b/src/logic/wallets/store/test/provider.reducer.js index 5cdb3c30..c2d648c6 100644 --- a/src/logic/wallets/store/test/provider.reducer.js +++ b/src/logic/wallets/store/test/provider.reducer.js @@ -20,9 +20,9 @@ const providerReducerTests = () => { store = createStore(reducers, compose(...enhancers)) }) - it('reducer should return default Provider record when no Metamask is loaded', () => { + it('reducer should return default Provider record when no provider is loaded', () => { // GIVEN - const emptyResponse: ProviderProps = { + const emptyProvider: ProviderProps = { name: '', loaded: false, available: false, @@ -31,17 +31,17 @@ const providerReducerTests = () => { } // WHEN - processProviderResponse(store.dispatch, emptyResponse) + processProviderResponse(store.dispatch, emptyProvider) const provider = store.getState()[PROVIDER_REDUCER_ID] // THEN - expect(makeProvider(emptyResponse)).toEqual(provider) + expect(makeProvider(emptyProvider)).toEqual(provider) }) it('reducer should return avaiable with its default value when is loaded but not available', () => { // GIVEN - const metamaskLoaded: ProviderProps = { - name: 'METAMASK', + const providerLoaded: ProviderProps = { + name: 'SAFE', loaded: true, available: false, account: '', @@ -49,17 +49,17 @@ const providerReducerTests = () => { } // WHEN - processProviderResponse(store.dispatch, metamaskLoaded) + processProviderResponse(store.dispatch, providerLoaded) const provider = store.getState()[PROVIDER_REDUCER_ID] // THEN - expect(makeProvider(metamaskLoaded)).toEqual(provider) + expect(makeProvider(providerLoaded)).toEqual(provider) }) - it('reducer should return metamask provider when it is loaded and available', () => { + it('reducer should return provider when it is loaded and available', () => { // GIVEN - const metamask: ProviderProps = { - name: 'METAMASK', + const providerLoaded: ProviderProps = { + name: 'SAFE', loaded: true, available: true, account: '', @@ -67,11 +67,11 @@ const providerReducerTests = () => { } // WHEN - processProviderResponse(store.dispatch, metamask) + processProviderResponse(store.dispatch, providerLoaded) const provider = store.getState()[PROVIDER_REDUCER_ID] // THEN - expect(makeProvider(metamask)).toEqual(provider) + expect(makeProvider(providerLoaded)).toEqual(provider) }) }) } From b615d20a65fc54b8d8bf145bbc77ea78456c6cfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Thu, 6 Jun 2019 20:31:58 +0200 Subject: [PATCH 10/10] Refactor fetch provider --- src/components/Header/actions.js | 4 +--- src/components/Header/index.jsx | 23 ++++++++++++------- .../wallets/store/actions/fetchProvider.js | 21 ++--------------- 3 files changed, 18 insertions(+), 30 deletions(-) diff --git a/src/components/Header/actions.js b/src/components/Header/actions.js index 9eff46e2..e96a2379 100644 --- a/src/components/Header/actions.js +++ b/src/components/Header/actions.js @@ -1,14 +1,12 @@ // @flow -import { fetchProvider, recurrentFetchProvider, removeProvider } from '~/logic/wallets/store/actions' +import { fetchProvider, removeProvider } from '~/logic/wallets/store/actions' export type Actions = { fetchProvider: typeof fetchProvider, - recurrentFetchProvider: typeof recurrentFetchProvider, removeProvider: typeof removeProvider, } export default { fetchProvider, - recurrentFetchProvider, removeProvider, } diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 98fa0bf6..a45b2611 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -4,6 +4,7 @@ import { connect } from 'react-redux' import { logComponentStack, type Info } from '~/utils/logBoundaries' import { SharedSnackbarConsumer, type Variant } from '~/components/SharedSnackBar/Context' import { WALLET_ERROR_MSG } from '~/logic/wallets/store/actions' +import { getProviderInfo } from '~/logic/wallets/getWeb3' import ProviderAccesible from './component/ProviderInfo/ProviderAccesible' import UserDetails from './component/ProviderDetails/UserDetails' import ProviderDisconnected from './component/ProviderInfo/ProviderDisconnected' @@ -26,7 +27,7 @@ class HeaderComponent extends React.PureComponent { hasError: false, } - async componentDidMount() { + componentDidMount() { this.onConnect() } @@ -39,19 +40,25 @@ class HeaderComponent extends React.PureComponent { } onDisconnect = () => { - const { removeProvider } = this.props + const { removeProvider, openSnackbar } = this.props clearInterval(this.providerListener) - removeProvider(this.props.openSnackbar) + removeProvider(openSnackbar) } onConnect = async () => { - const { fetchProvider, recurrentFetchProvider } = this.props - + const { fetchProvider, openSnackbar } = this.props + clearInterval(this.providerListener) - let currentProvider: ProviderProps = await fetchProvider(this.props.openSnackbar) - this.providerListener = setInterval(async () => { - currentProvider = await recurrentFetchProvider(currentProvider, this.props.openSnackbar) + let currentProvider: ProviderProps = await getProviderInfo() + fetchProvider(currentProvider, openSnackbar) + + this.providerListener = setInterval(async () => { + const newProvider: ProviderProps = await getProviderInfo() + if (JSON.stringify(currentProvider) !== JSON.stringify(newProvider)) { + fetchProvider(newProvider, openSnackbar) + } + currentProvider = newProvider }, 2000) } diff --git a/src/logic/wallets/store/actions/fetchProvider.js b/src/logic/wallets/store/actions/fetchProvider.js index db33eab7..c19f52ce 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 { getProviderInfo, ETHEREUM_NETWORK_IDS, ETHEREUM_NETWORK } from '~/logic/wallets/getWeb3' +import { ETHEREUM_NETWORK_IDS, ETHEREUM_NETWORK } from '~/logic/wallets/getWeb3' import type { ProviderProps } from '~/logic/wallets/store/model/provider' import { makeProvider } from '~/logic/wallets/store/model/provider' import addProvider from './addProvider' @@ -44,24 +44,7 @@ const handleProviderNotification = (openSnackbar: Function, provider: ProviderPr openSnackbar(msg, variant) } -export const recurrentFetchProvider = (currentProvider: ProviderProps, openSnackbar: Function) => async ( - dispatch: ReduxDispatch<*>, -) => { - const newProvider: ProviderProps = await getProviderInfo() - - if (JSON.stringify(currentProvider) !== JSON.stringify(newProvider)) { - handleProviderNotification(openSnackbar, newProvider) - processProviderResponse(dispatch, newProvider) - } - - return newProvider -} - -export default (openSnackbar: Function) => async (dispatch: ReduxDispatch<*>) => { - const provider: ProviderProps = await getProviderInfo() +export default (provider: ProviderProps, openSnackbar: Function) => (dispatch: ReduxDispatch<*>) => { handleProviderNotification(openSnackbar, provider) - processProviderResponse(dispatch, provider) - - return provider }