diff --git a/app/components/topbar-account-panel/component.js b/app/components/topbar-account-panel/component.js index 65185e7..4934e88 100644 --- a/app/components/topbar-account-panel/component.js +++ b/app/components/topbar-account-panel/component.js @@ -1,5 +1,7 @@ import Component from '@ember/component'; import { inject as service } from '@ember/service'; +import { computed } from '@ember/object'; +import { isPresent } from '@ember/utils'; export default Component.extend({ @@ -8,10 +10,35 @@ export default Component.extend({ kredits: service(), router: service(), + setupInProgress: false, + + userHasEthereumWallet: computed(function() { + return isPresent(window.ethereum); + }).volatile(), + + showConnectButton: computed('userHasEthereumWallet', + 'kredits.hasAccounts', function() { + return this.userHasEthereumWallet && + !this.kredits.hasAccounts; + }), + actions: { signup() { this.router.transitionTo('signup'); + }, + + async connectAccount() { + try { + await window.ethereum.enable(); + this.set('setupInProgress', true); + await this.kredits.setup(); + this.set('setupInProgress', false); + this.router.transitionTo('dashboard'); + } catch (error) { + this.set('setupInProgress', false); + console.log('Opening Ethereum wallet failed:', error); + } } } diff --git a/app/components/topbar-account-panel/template.hbs b/app/components/topbar-account-panel/template.hbs index 0731a4c..bb50629 100644 --- a/app/components/topbar-account-panel/template.hbs +++ b/app/components/topbar-account-panel/template.hbs @@ -1,11 +1,18 @@
- {{#if (and kredits.hasAccounts kredits.currentUser)}} - {{kredits.currentUser.name}} - {{#if kredits.currentUserIsCore}} - (core) - {{/if}} + {{#if setupInProgress}} + Connecting account... {{else}} - Anonymous - + {{#if (and kredits.hasAccounts kredits.currentUser)}} + {{kredits.currentUser.name}} + {{#if kredits.currentUserIsCore}} + (core) + {{/if}} + {{else}} + Anonymous + + {{#if showConnectButton}} + + {{/if}} + {{/if}} {{/if}}
\ No newline at end of file diff --git a/app/routes/application.js b/app/routes/application.js index e02d727..85eabe9 100644 --- a/app/routes/application.js +++ b/app/routes/application.js @@ -4,7 +4,7 @@ import Route from '@ember/routing/route'; export default Route.extend({ kredits: service(), - beforeModel(transition) { + beforeModel(/* transition */) { const kredits = this.kredits; return kredits.setup().then(() => { @@ -12,11 +12,6 @@ export default Route.extend({ console.error('Kredits preflight check failed!'); console.error(error); }); - if (kredits.get('accountNeedsUnlock')) { - if (confirm('It looks like you have an Ethereum wallet available. Please unlock your account.')) { - transition.retry(); - } - } }).catch((error) => { console.log('Error initializing Kredits', error); }); diff --git a/app/services/kredits.js b/app/services/kredits.js index a1b9ec2..e651336 100644 --- a/app/services/kredits.js +++ b/app/services/kredits.js @@ -6,7 +6,7 @@ import Service from '@ember/service'; import EmberObject from '@ember/object'; import { computed } from '@ember/object'; import { alias, notEmpty } from '@ember/object/computed'; -import { isEmpty } from '@ember/utils'; +import { isEmpty, isPresent } from '@ember/utils'; import groupBy from 'kredits-web/utils/group-by'; import formatKredits from 'kredits-web/utils/format-kredits'; @@ -30,10 +30,6 @@ export default Service.extend({ currentUserIsCore: alias('currentUser.isCore'), hasAccounts: notEmpty('currentUserAccounts'), - accountNeedsUnlock: computed('currentUserAccounts', function() { - return this.currentUserAccounts && isEmpty(this.currentUserAccounts); - }), - contributionsUnconfirmed: computed('contributions.[]', 'currentBlock', function() { return this.contributions.filter(contribution => { return contribution.confirmedAt > this.currentBlock; @@ -105,7 +101,14 @@ export default Service.extend({ async function instantiateWithAccount (web3Provider, context) { console.debug('[kredits] Using user-provided instance, e.g. from Mist browser or Metamask'); ethProvider = new ethers.providers.Web3Provider(web3Provider); - // const network = await ethProvider.getNetwork(); + + const network = await ethProvider.getNetwork(); + if (isPresent(config.web3RequiredNetwork) && + network.name !== config.web3RequiredNetwork) { + window.alert(`Please switch your Ethereum wallet to the "${config.web3RequiredNetwork}" network before connecting your account.`); + return instantiateWithoutAccount(); + } + ethProvider.listAccounts().then(accounts => { context.set('currentUserAccounts', accounts); const ethSigner = accounts.length === 0 ? null : ethProvider.getSigner(); @@ -117,12 +120,9 @@ export default Service.extend({ } if (window.ethereum) { - try { - // Request account access if needed - await window.ethereum.enable(); - // Acccounts now exposed + if (window.ethereum.isConnected()) { instantiateWithAccount(window.ethereum, this); - } catch (error) { + } else { instantiateWithoutAccount(); } } diff --git a/app/styles/components/_topbar-account-panel.scss b/app/styles/components/_topbar-account-panel.scss index 900eb04..2f04ce1 100644 --- a/app/styles/components/_topbar-account-panel.scss +++ b/app/styles/components/_topbar-account-panel.scss @@ -1,7 +1,11 @@ header#topbar section#user-account { button { - margin-left: 1.2rem; + margin-left: 1.5rem; + } + + button + button { + margin-left: 0.6rem; } } diff --git a/config/environment.js b/config/environment.js index 393e14d..3554ed2 100644 --- a/config/environment.js +++ b/config/environment.js @@ -36,6 +36,7 @@ module.exports = function(environment) { }, web3ProviderUrl: 'https://rinkeby.infura.io/v3/d4f788b7a6584f7db2fc3c268d4d09e9', + web3RequiredNetwork: 'rinkeby', githubConnectUrl: 'https://hal8000.chat.kosmos.org/kredits/signup/connect/github', githubSignupUrl: 'https://hal8000.chat.kosmos.org/kredits/signup/github', @@ -79,13 +80,9 @@ module.exports = function(environment) { ENV.APP.autoboot = false; } - if (environment === 'production') { - // here you can enable a production-specific feature - ENV.kreditsApmDomain = process.env.KREDITS_APM_DOMAIN || 'open.aragonpm.eth'; - } - if (process.env.WEB3_PROVIDER_URL) { ENV.web3ProviderUrl = process.env.WEB3_PROVIDER_URL; + ENV.web3RequiredNetwork = null; } if (process.env.KREDITS_DAO_ADDRESS) { ENV.kreditsKernelAddress = process.env.KREDITS_DAO_ADDRESS; diff --git a/package.json b/package.json index 49c3748..7a50833 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "lint:hbs": "ember-template-lint .", "lint:js": "eslint .", "test": "ember test", - "start": "KREDITS_APM_DOMAIN=open.aragonpm.eth ember serve", - "start:local": "WEB3_PROVIDER_URL=http://localhost:7545 ember s", + "start": "ember serve", + "start:local": "WEB3_PROVIDER_URL=http://localhost:7545 ember serve", "build": "ember build", "build-prod": "rm -rf release/* && ember build -prod --output-path release", "preversion": "npm test",