Connect wallet and fill in address during signup

In case there's a wallet available, ask the user to connect it and fill
in their account address in the form field.

Also, check the status code when submitting it to the back-end and show
an error message instead of the success/completion page in case the
contributor could not be created.

app/controllers/signup/account.js

@@ -1,49 +1,53 @@
 import Controller from '@ember/controller';
-import { computed } from '@ember/object';
-import { alias, not } from '@ember/object/computed';
-import { isAddress } from 'web3-utils';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import { tracked } from '@glimmer/tracking';
 import config from 'kredits-web/config/environment';
+import { isAddress } from 'web3-utils';
 
-export default Controller.extend({
+export default class BudgetController extends Controller {
+  @service kredits;
 
-  kredits: service(),
+  @tracked accountAddress = null;
 
-  accountAddress: null,
-  githubAccessToken: alias('kredits.githubAccessToken'),
+  @alias('kredits.githubAccessToken') githubAccessToken;
 
-  isValidEthAccount: computed('accountAddress', function() {
+  get isValidEthAccount () {
     return isAddress(this.accountAddress);
-  }),
-
-  signupButtonDisabled: not('isValidEthAccount'),
-
-  actions: {
-
-    completeSignup () {
-      const payload = {
-        accessToken: this.githubAccessToken,
-        account: this.accountAddress
-      }
-
-      fetch(config.githubSignupUrl, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload)
-      })
-      .then(res => res.json())
-      .then(data => {
-        console.log('Created contributor:', data);
-
-        this.setProperties({
-          githubAccessToken: null,
-          accountAddress: null
-        });
-
-        this.transitionToRoute('signup.complete');
-      });
-    }
-
   }
 
-});
+  get signupButtonDisabled () {
+    return !this.isValidEthAccount;
+  }
+
+  @action
+  completeSignup () {
+    const payload = {
+      accessToken: this.githubAccessToken,
+      account: this.accountAddress
+    }
+
+    fetch(config.githubSignupUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    })
+    .then(res => res.json())
+    .then(data => {
+      if (data.error) {
+        alert('Creating profile failed. We have been notified about this error and will take a look soon. Sorry!');
+        console.warn('Creating contributor profile failed:',
+          JSON.parse(data.error.body).error.message)
+        return false;
+      } else {
+        console.log('[signup/account] Created contributor:', data);
+
+        this.githubAccessToken = null;
+        this.accountAddress = null;
+
+        this.transitionToRoute('signup.complete');
+      }
+    })
+  }
+}

app/routes/signup/account.js

@@ -2,16 +2,22 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { isEmpty } from '@ember/utils';
 
-export default Route.extend({
+export default class SignupAccountRoute extends Route {
+  @service kredits;
 
-  kredits: service(),
+  async setupController (controller) {
+    if (!window.ethereum) return;
+
+    if (this.kredits.hasAccounts) {
+      controller.accountAddress = this.kredits.currentUserAccounts.firstObject;
+    } else {
+      return this.kredits.connectWallet();
+    }
+  }
 
   redirect () {
-    this._super(...arguments);
-
     if (isEmpty(this.kredits.githubAccessToken)) {
       this.transitionTo('signup.index');
     }
   }
-
-});
+}