Merge pull request #154 from 67P/feature/sign_in

Improve account connect/loading, check network

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

app/components/topbar-account-panel/template.hbs

@@ -1,11 +1,18 @@
 <section id="user-account">
-  {{#if (and kredits.hasAccounts kredits.currentUser)}}
+  {{#if setupInProgress}}
-    {{kredits.currentUser.name}}
+    Connecting account...
-    {{#if kredits.currentUserIsCore}}
-      <span class="core-flag">(core)</span>
-    {{/if}}
   {{else}}
-    Anonymous
+    {{#if (and kredits.hasAccounts kredits.currentUser)}}
-    <button {{action "signup"}} class="small green">Sign up</button>
+      {{kredits.currentUser.name}}
+      {{#if kredits.currentUserIsCore}}
+        <span class="core-flag">(core)</span>
+      {{/if}}
+    {{else}}
+      Anonymous
+      <button {{action "signup"}} class="small">Sign up</button>
+      {{#if showConnectButton}}
+        <button {{action "connectAccount"}} class="small green">Connect account</button>
+      {{/if}}
+    {{/if}}
   {{/if}}
 </section>

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

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 {
+        if (window.ethereum.isConnected()) {
-          // Request account access if needed
-          await window.ethereum.enable();
-          // Acccounts now exposed
           instantiateWithAccount(window.ethereum, this);
-        } catch (error) {
+        } else {
           instantiateWithoutAccount();
         }
       }

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

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;

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": "ember serve",
-    "start:local": "WEB3_PROVIDER_URL=http://localhost:7545 ember s",
+    "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",