Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: instruct user to install Frame as their Ethereum provider in electron environments #619

Merged
merged 4 commits into from
Feb 19, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 14 additions & 9 deletions src/components/SignerPanel/ConfirmTransaction.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,11 @@ class ConfirmTransaction extends React.Component {
neededText="You need to have Frame installed and enabled"
actionText={
<span>
Please install and enable Frame (
<SafeLink href={'https://frame.sh/'} target="_blank">
frame.sh
Please install and enable{' '}
<SafeLink href="https://frame.sh/" target="_blank">
Frame
</SafeLink>
).
.
</span>
}
/>
Expand All @@ -73,11 +73,16 @@ class ConfirmTransaction extends React.Component {
<Web3ProviderError
intent={intent}
onClose={onClose}
neededText="You need to have a Web3 instance installed and enabled"
actionText={`Please enable ${providerString(
'your Ethereum provider',
walletProviderId
)}.`}
neededText="You need to have an Ethereum provider installed and enabled"
actionText={
<span>
Please install and enable{' '}
<SafeLink href="https://metamask.io/" target="_blank">
Metamask
</SafeLink>
.
</span>
}
/>
)
}
Expand Down
5 changes: 2 additions & 3 deletions src/components/SignerPanel/SignerPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import styled from 'styled-components'
import { SidePanel } from '@aragon/ui'
import { Transition, animated } from 'react-spring'
import { AppType, EthereumAddressType } from '../../prop-types'
import { addressesEqual } from '../../web3-utils'
import { addressesEqual, getInjectedProvider } from '../../web3-utils'
import ConfirmTransaction from './ConfirmTransaction'
import SigningStatus from './SigningStatus'
import { network } from '../../environment'
Expand Down Expand Up @@ -162,7 +162,6 @@ class SignerPanel extends React.Component {
onRequestEnable,
walletNetwork,
walletProviderId,
walletWeb3,
} = this.props

const {
Expand Down Expand Up @@ -204,7 +203,7 @@ class SignerPanel extends React.Component {
<ConfirmTransaction
direct={directPath}
hasAccount={Boolean(account)}
hasWeb3={Boolean(walletWeb3)}
hasWeb3={Boolean(getInjectedProvider())}
intent={intent}
locator={locator}
networkType={network.type}
Expand Down
25 changes: 19 additions & 6 deletions src/onboarding/Start.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ import {
import { animated } from 'react-spring'
import { network, getDemoDao, web3Providers } from '../environment'
import { sanitizeNetworkType } from '../network-config'
import { noop } from '../utils'
import providerString from '../provider-strings'
import { isElectron, noop } from '../utils'
import {
fromWei,
toWei,
Expand Down Expand Up @@ -327,11 +327,24 @@ class StartContent extends React.PureComponent {
if (!hasWallet) {
return (
<ActionInfo>
Please install an Ethereum provider (e.g.{' '}
<SafeLink href="https://metamask.io/" target="_blank">
MetaMask
</SafeLink>
) .
{isElectron() ? (
<React.Fragment>
Please install{' '}
<SafeLink href="https://frame.sh/" target="_blank">
Frame
</SafeLink>{' '}
as your Ethereum provider
</React.Fragment>
) : (
<React.Fragment>
Please install an Ethereum provider (e.g.{' '}
<SafeLink href="https://metamask.io/" target="_blank">
MetaMask
</SafeLink>
)
</React.Fragment>
)}
.
</ActionInfo>
)
}
Expand Down
3 changes: 3 additions & 0 deletions src/provider-strings.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
// be detected.

const PROVIDERS_STRINGS = {
frame: {
'your Ethereum provider': 'Frame',
},
metamask: {
'your Ethereum provider': 'Metamask',
},
Expand Down
4 changes: 4 additions & 0 deletions src/web3-utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import Web3 from 'web3'
import BN from 'bn.js'
import { InvalidNetworkType, InvalidURI, NoConnection } from './errors'
import { isElectron } from './utils'

const EMPTY_ADDRESS = '0x0000000000000000000000000000000000000000'

Expand Down Expand Up @@ -139,6 +140,9 @@ export function getWeb3(provider) {

// Returns an identifier for the provider, if it can be detected
export function identifyProvider(provider) {
if (provider && isElectron()) {
Copy link
Contributor Author

@sohkai sohkai Feb 15, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that there's not a really good way to check for if we're connected to frame yet (could try checking against localhost:1234).

See #621 on detecting frame better.

return 'frame'
}
if (provider && provider.isMetaMask) {
return 'metamask'
}
Expand Down