From cae13ed662aad6523477e619e46748b7c0849ac0 Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Wed, 4 Sep 2019 18:13:50 +0200
Subject: [PATCH] Sign in button to connect account

---
 .../topbar-account-panel/component.js         | 27 +++++++++++++++++++
 .../topbar-account-panel/template.hbs         | 21 ++++++++++-----
 app/routes/application.js                     |  7 +----
 app/services/kredits.js                       |  7 ++---
 .../components/_topbar-account-panel.scss     |  6 ++++-
 5 files changed, 49 insertions(+), 19 deletions(-)

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 @@
 <section id="user-account">
-  {{#if (and kredits.hasAccounts kredits.currentUser)}}
-    {{kredits.currentUser.name}}
-    {{#if kredits.currentUserIsCore}}
-      <span class="core-flag">(core)</span>
-    {{/if}}
+  {{#if setupInProgress}}
+    Connecting account...
   {{else}}
-    Anonymous
-    <button {{action "signup"}} class="small green">Sign up</button>
+    {{#if (and kredits.hasAccounts kredits.currentUser)}}
+      {{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>
\ 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..9038efb 100644
--- a/app/services/kredits.js
+++ b/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();
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;
   }
 
 }