Enable users to choose between BTC and USD currency

.jshintrc

@@ -47,7 +47,8 @@
     "$":          true,
     "_":          true,
     "Backbone":   true,
-    "Bloodhound": true
+    "Bloodhound": true,
+    "cf":         true
   },
   "regexdash":    false,
   "scripturl":    false,

controllers/coinbase_api.js

@@ -17,15 +17,15 @@ exports.getExchangeRates = function(params, cb) {
   });
 };
 
-// @Todo: Figure this out.
+// TODO: Figure this out.
 exports.sendMoney = function(params, cb) {
   var accessToken = getCoinbaseAccessToken(params.user);
   if (!accessToken) {
     cb(new Error('No Coinbase access token provided.'));
   }
 };
 
-// @Todo: Figure this out.
+// TODO: Figure this out.
 exports.getBalance = function(params, cb) {
   var accessToken = getCoinbaseAccessToken(params.user);
   if (!accessToken) {

controllers/new_transaction.js

@@ -11,6 +11,7 @@ var coinbase_api = require('./coinbase_api.js');
 exports.getNewTransaction = function(req, res, next) {
   var token = _.findWhere(req.user.tokens, { kind: 'facebook' });
   graph.setAccessToken(token.accessToken);
+  // TODO: Filter out friends that do not match a user in DB
   async.parallel(
     {
       getMyFriends: function(done) {
@@ -51,6 +52,7 @@ exports.getNewTransaction = function(req, res, next) {
       }
 
       res.render('new_transaction', {
+        controllerJs: 'new_transaction',
         title: 'New Transaction',
         balance_amount: balance_amount,
         balance_currency: balance_currency,

public/css/styles.less

@@ -85,7 +85,15 @@ body {
   bottom: 25px;
 }
 
+// New Transaction
+// -------------------------
+
+.form-control.amount {
+  margin-top: 15px;
+}
+
 // Buttons
+
 .btn.btn-pay {
   background-color: @brand-primary;
   color: white;
@@ -97,20 +105,18 @@ body {
 }
 
 // Typeahead
+// -------------------------
 
-typeahead,
+.tt-dropdown-menu,
+.tt-hint,
+.tt-input,
 .tt-query,
+.twitter-typeahead {
+  width: 100%;
+}
+
 .tt-hint {
-  width: 396px;
-  height: 30px;
-  padding: 8px 12px;
-  font-size: 14px;
-  line-height: 30px;
-  border: 2px solid #ccc;
-  -webkit-border-radius: 8px;
-     -moz-border-radius: 8px;
-          border-radius: 8px;
-  outline: none;
+  color: #999
 }
 
 .typeahead {
@@ -121,29 +127,12 @@ typeahead,
   border: 2px solid #0097cf;
 }
 
-.tt-query {
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-.tt-hint {
-  color: #999
-}
-
 .tt-dropdown-menu {
-  width: 396px;
   margin-top: 12px;
   padding: 8px 0;
   background-color: #fff;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
-  -webkit-border-radius: 8px;
-     -moz-border-radius: 8px;
-          border-radius: 8px;
-  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-          box-shadow: 0 5px 10px rgba(0,0,0,.2);
 }
 
 .tt-suggestion {

public/js/application.js

@@ -13,3 +13,4 @@
 //= require lib/bootstrap.min
 //= require lib/typeahead.bundle.min
 //= require main
+//= require new_transaction

public/js/main.js

@@ -1,19 +1,7 @@
-$(document).ready(function() {
-  var $transactionRecipient = $('#transactionRecipient');
-  if ($transactionRecipient.length) {
-    var names = new Bloodhound({
-      datumTokenizer: function(d) {
-        return Bloodhound.tokenizers.whitespace(d.name);
-      },
-      queryTokenizer: Bloodhound.tokenizers.whitespace,
-      local: window.cf.dump.friends
-    });
+if (typeof window.cf === 'undefined') {
+  window.cf = { apps: {} };
+}
 
-    names.initialize();
-
-    $transactionRecipient.typeahead(null, {
-      displayKey: 'name',
-      source: names.ttAdapter()
-    });
-  }
-});
+if (typeof window.cf.apps === 'undefined') {
+  window.cf.apps = {};
+}

public/js/new_transaction.js

@@ -0,0 +1,47 @@
+function usdToBtc(usd) {
+  return (Number(usd) * Number(window.cf.dump.rates.usd_to_btc));
+}
+
+function btcToUsd(btc) {
+  return (Number(btc) / Number(window.cf.dump.rates.usd_to_btc));
+}
+
+cf.apps.new_transaction = function() {
+  this.initializeForm();
+};
+
+cf.apps.new_transaction.prototype.initializeForm = function() {
+  var $transactionRecipient = $('.transactionRecipient');
+  if ($transactionRecipient.length) {
+    var names = new Bloodhound({
+      datumTokenizer: function(d) {
+        return Bloodhound.tokenizers.whitespace(d.name);
+      },
+      queryTokenizer: Bloodhound.tokenizers.whitespace,
+      local: window.cf.dump.friends
+    });
+
+    names.initialize();
+
+    $transactionRecipient.typeahead(null, {
+      displayKey: 'name',
+      source: names.ttAdapter()
+    });
+  }
+
+  $(".currency-btns label").on('click', function(event) {
+    var $target = $(event.target);
+    var $amount = $('.amount');
+    var $currencyLabel = $('.currencyLabel');
+
+    // TODO: Check if valid currency format
+    // TODO: If you click fast enough, the conversion will be incorrect
+    if ($target.is(".optionBTC:not(.active)")) {
+      $currencyLabel.html('<i class="fa fa-btc"></i>');
+      $amount.val(usdToBtc($amount.val()));
+    } else if ($target.is(".optionUSD:not(.active)")) {
+      $currencyLabel.html('<i class="fa fa-usd"></i>');
+      $amount.val(btcToUsd($amount.val()));
+    }
+  });
+};

views/layout.jade

@@ -17,3 +17,8 @@ html
     include partials/footer
     include partials/dump
     != js('application')
+    if controllerJs
+      script.
+        $(document).ready(function() {
+          cf.currentApp = new window.cf.apps.#{controllerJs}();
+        });

views/new_transaction.jade

@@ -11,24 +11,34 @@ block content
   form.form-horizontal(role='form', method='POST')
     input(type='hidden', name='_csrf', value=token)
     .form-group
-      label(class='col-sm-2 control-label', for='name') To
-      .col-sm-8
+      label(class='col-xs-2 control-label', for='name')
+        i.fa.fa-user
+      .col-xs-8
         .example-numbers
-          input#transactionRecipient.form-control(class='tt-query typeahead', type='text', autofocus=true, autocomplete='off', spellcheck='false', dir='auto', style='position: relative; vertical-align: top; background-color: transparent;')
+          input.form-control.transactionRecipient(class='typeahead', type='text', autofocus=true, autocomplete='off', spellcheck='false', dir='auto')
     .form-group
-      label(class='col-sm-2 control-label', for='amount') Amount
-      .col-sm-8
-        input.form-control(class='tt-query', type='text', name='amount', id='amount')
+      label.currencyLabel(class='col-xs-2 control-label', for='amount')
+        i.fa.fa-btc
+      .col-xs-8
+        .btn-group.btn-group-justified.currency-btns(data-toggle='buttons')
+          label.btn.btn-primary.optionBTC.active
+            input(type='radio')
+            i.fa.fa-btc
+          label.btn.btn-primary.optionUSD
+            input(type='radio')
+            i.fa.fa-usd
+        input.form-control.amount(type='text', name='amount')
     .form-group
-      label(class='col-sm-2 control-label', for='message') What's it for?
-      .col-sm-8
-        textarea.form-control(class='tt-query', type='text', name='message', id='message', rows='7')
+      label(class='col-xs-2 control-label', for='message')
+        i.fa.fa-comment
+      .col-xs-8
+        textarea.form-control(type='text', name='message', id='message', rows='7')
     .form-group
-      .col-sm-offset-2.col-sm-2
+      .col-xs-offset-2.col-xs-2
         button.btn.btn-pay(type='submit')
           i.fa.fa-btc
           | Pay
-      .col-sm-2
+      .col-xs-2
         button.btn.btn-charge(type='submit')
           i.fa.fa-btc
           | Charge