Sign in button to connect account

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

@@ -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;
@@ -103,6 +99,7 @@ export default Service.extend({
       }
 
       async function instantiateWithAccount (web3Provider, context) {
+        // TODO check if network is rinkeby
         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();
@@ -120,7 +117,7 @@ export default Service.extend({
         try {
           // Request account access if needed
           await window.ethereum.enable();
-          // Acccounts now exposed
+          // Accounts now exposed
           instantiateWithAccount(window.ethereum, this);
         } catch (error) {
           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;
   }
 
 }