From 2f91f20a8645339385ada602684f4957f20f4da4 Mon Sep 17 00:00:00 2001
From: jloup <jeanloup.jamet@gmail.com>
Date: Thu, 22 Feb 2018 11:31:59 +0100
Subject: Poloniex connection.

---
 cmd/web/Makefile                 |   19 +-
 cmd/web/js/api.js                |   11 +
 cmd/web/js/main.jsx              |   41 +-
 cmd/web/js/otp.jsx               |    6 +-
 cmd/web/js/poloniex.jsx          |  176 +++++-
 cmd/web/js/signin.jsx            |    4 +-
 cmd/web/js/signup.jsx            |    4 +-
 cmd/web/static/cryptocoins.css   | 1150 ++++++++++++++++++++++++++++++++++++++
 cmd/web/static/cryptocoins.ttf   |  Bin 0 -> 96448 bytes
 cmd/web/static/cryptocoins.woff  |  Bin 0 -> 58768 bytes
 cmd/web/static/cryptocoins.woff2 |  Bin 0 -> 49976 bytes
 cmd/web/static/index.html        |    1 +
 cmd/web/static/style.css         |   15 +-
 13 files changed, 1361 insertions(+), 66 deletions(-)
 create mode 100644 cmd/web/static/cryptocoins.css
 create mode 100644 cmd/web/static/cryptocoins.ttf
 create mode 100644 cmd/web/static/cryptocoins.woff
 create mode 100644 cmd/web/static/cryptocoins.woff2

(limited to 'cmd/web')

diff --git a/cmd/web/Makefile b/cmd/web/Makefile
index 1d98085..2ebb734 100644
--- a/cmd/web/Makefile
+++ b/cmd/web/Makefile
@@ -6,6 +6,7 @@ SRC_DIR=js
 BUILD_DIR=build/js
 JSX_SRC= main.jsx signup.jsx signin.jsx otp.jsx poloniex.jsx
 JS_SRC= cookies.js app.js api.js
+STATIC_FILES= index.html style.css cryptocoins.css cryptocoins.ttf cryptocoins.woff cryptocoins.woff2
 JSX_OBJS=$(addprefix $(BUILD_DIR)/,$(JSX_SRC:.jsx=.js))
 JS_OBJS=$(addprefix $(BUILD_DIR)/,$(JS_SRC))
 STATIC_BUILD_DIR=build/static
@@ -16,18 +17,18 @@ install:
 	yarn --version
 	yarn install
 
-static: js $(STATIC_BUILD_DIR)/index.html $(STATIC_BUILD_DIR)/style.css
+static: $(STATIC_BUILD_DIR) js $(addprefix $(STATIC_BUILD_DIR)/, $(STATIC_FILES))
 
 js: build/static/main.js
 
-$(STATIC_BUILD_DIR)/index.html: static/index.html
-	cp static/index.html $@
+$(STATIC_BUILD_DIR)/%: static/%
+	cp $< $@
 
-$(STATIC_BUILD_DIR)/style.css: static/style.css
-	cp static/style.css $@
+$(STATIC_BUILD_DIR):
+	mkdir -p $(BUILD_DIR)
+	mkdir -p $@
 
 $(BUILD_DIR)/%.js: $(SRC_DIR)/%.jsx
-	mkdir -p $(@D)
 	jscs --fix $<
 	babel $< -o $@
 	jshint $@
@@ -42,11 +43,11 @@ build/static/main.js: $(JSX_OBJS) $(JS_OBJS) env/$(ENV).env
 						 -t [ debowerify ]  \
 						 $(BUILD_DIR)/main.js -o $@
 
-build/webapp.tar.gz: $(STATIC_BUILD_DIR)/main.js $(STATIC_BUILD_DIR)/index.html $(STATIC_BUILD_DIR)/style.css
+build/webapp.tar.gz: $(addprefix $(STATIC_BUILD_DIR)/, $(STATIC_FILES)) build/static/main.js
 	tar czf $@ --directory=$(dir $<) $(notdir $^)
 
-release: build/webapp.tar.gz
+release: $(STATIC_BUILD_DIR) build/webapp.tar.gz
 
 clean:
 	rm -rf build
-	rm -rf node_modules
\ No newline at end of file
+	rm -rf node_modules
diff --git a/cmd/web/js/api.js b/cmd/web/js/api.js
index e2acd1d..5c19fdf 100644
--- a/cmd/web/js/api.js
+++ b/cmd/web/js/api.js
@@ -53,6 +53,17 @@ var ApiEndpoints = {
       return '/market/' + params.name;
     }
   },
+  'MARKET_BALANCE': {
+    'type': 'GET',
+    'auth': true,
+    'parameters': [
+      {'name': 'name',     'mandatory': true, 'inquery': false},
+      {'name': 'currency', 'mandatory': true, 'inquery': true},
+    ],
+    'buildUrl': function(params) {
+      return '/market/' + params.name + '/balance';
+    }
+  },
   'UPDATE_MARKET': {
     'type': 'POST',
     'auth': true,
diff --git a/cmd/web/js/main.jsx b/cmd/web/js/main.jsx
index eb53057..e5e505d 100644
--- a/cmd/web/js/main.jsx
+++ b/cmd/web/js/main.jsx
@@ -1,15 +1,17 @@
-var SignupForm    = require('./signup.js').SignupForm;
-var SigninForm    = require('./signin.js').SigninForm;
-var OtpEnrollForm = require('./otp.js').OtpEnrollForm;
-var PoloniexForm  = require('./poloniex.js').PoloniexForm;
-var App           = require('./app.js');
-var Api           = require('./api.js').Api;
-var cookies       = require('./cookies.js');
+var SignupForm         = require('./signup.js').SignupForm;
+var SigninForm         = require('./signin.js').SigninForm;
+var OtpEnrollForm      = require('./otp.js').OtpEnrollForm;
+var PoloniexController = require('./poloniex.js').PoloniexController;
+var App                = require('./app.js');
+var Api                = require('./api.js').Api;
+var cookies            = require('./cookies.js');
 
 var Logo = React.createClass({
   render: function() {
-    return (<div id='logo'>
-              <a href='/'>Cryptoportfolio</a>
+    return (<div className='row'>
+              <div id='logo' className='offset-4 col-4'>
+                <a href='/'>Cryptoportfolio</a>
+              </div>
             </div>);
   }
 });
@@ -49,21 +51,12 @@ App.page('/signout', true, function(context) {
 });
 
 App.page('/me', true, function(context) {
-  Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) {
-    if (err) {
-      console.error(err, data);
-      return;
-    }
-
-    App.mount(
-      <div>
-        <Logo />
-        <p>Poloniex</p>
-        <PoloniexForm apiKey={data.key} apiSecret={data.secret}/>
-      </div>
-    );
-
-  }.bind(this));
+  App.mount(
+    <div>
+      <Logo />
+      <PoloniexController/>
+    </div>
+  );
 });
 
 App.page('/otp/setup', true, function(context) {
diff --git a/cmd/web/js/otp.jsx b/cmd/web/js/otp.jsx
index 2717d9f..a0ee5cc 100644
--- a/cmd/web/js/otp.jsx
+++ b/cmd/web/js/otp.jsx
@@ -53,12 +53,12 @@ module.exports.OtpEnrollForm = React.createClass({
       );
     }
     return (
-        <div className='row otp-enroll justify-content-center'>
-          <div className='col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4 col-xs-offset-1 col-xs-10'>
+        <div className='row otp-enroll'>
+          <div className='offset-4 col-4 col-xs-offset-1 col-xs-10 text-center'>
             {qrCode}
             <div className='row justify-content-center'>
               <form role='form' onSubmit={this.handleSubmit}>
-                <input className='form-control' type='pass' placeholder='pass' onChange={this.handlePassChange} />
+                <input className='form-control' type='pass' placeholder='code' onChange={this.handlePassChange} />
                 <input className='form-control submit' type='submit' value='Validate' />
                 <div className={cName} ref='message'>{this.state.msg}</div>
               </form>
diff --git a/cmd/web/js/poloniex.jsx b/cmd/web/js/poloniex.jsx
index 877198d..8b577b4 100644
--- a/cmd/web/js/poloniex.jsx
+++ b/cmd/web/js/poloniex.jsx
@@ -1,49 +1,185 @@
 var Api        = require('./api.js').Api;
-var App        = require('./app.js');
 var classNames = require('classnames');
 
-module.exports.PoloniexForm = React.createClass({
+module.exports.PoloniexController = React.createClass({
   getInitialState: function() {
-    return {'hideMsg': true, 'msg': '', 'msgOk': false, 'apiSecret': this.props.apiSecret, 'apiKey': this.props.apiKey};
+    return {'apiKey': '', 'apiSecret': '', 'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null};
   },
-  handleSubmit: function(e) {
+  handleCredentialsChange: function(key, secret) {
+    this.setState({'apiKey': key, 'apiSecret': secret});
+  },
+  handleCredentialsSubmit: function() {
+    if (!this.state.apiKey || !this.state.apiSecret) {
+      return;
+    }
     Api.Call('UPDATE_MARKET', {'key': this.state.apiKey, 'secret': this.state.apiSecret, 'name': 'poloniex'}, function(err, status, data) {
       if (err) {
         console.error(err, data);
-        this.displayMessage(App.errorCodeToMessage(err.code), false);
         return;
       }
 
-      this.displayMessage('OK', true);
+      this.setState({'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null});
+      this.loadBalance();
+    }.bind(this));
+  },
+  loadBalance: function() {
+    Api.Call('MARKET_BALANCE', {'name': 'poloniex', 'currency': 'BTC'}, function(err, status, data) {
+      if (err) {
+        console.error(err, data);
+        if (err.code === 'invalid_market_credentials') {
+          this.setState({'flag': 'invalidCredentials', 'valueCurrency': null, 'balanceValue': null, 'balance': null});
+        }
+        return;
+      }
 
+      this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance});
     }.bind(this));
+  },
+  componentDidMount: function() {
+    Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) {
+      if (err) {
+        console.error(err, data);
+        return;
+      }
+
+      var flag = this.state.flag;
+      if (!data.key || !data.secret) {
+        flag = 'emptyCredentials';
+      } else {
+        this.loadBalance();
+      }
+
+      this.setState({'apiKey': data.key, 'apiSecret': data.secret, 'flag': flag});
+    }.bind(this));
+  },
+  render: function() {
+    var displayText = null;
+    switch (this.state.flag) {
+      case 'loading':
+        displayText = 'Loading data from poloniex...';
+        break;
+      case 'invalidCredentials':
+        displayText = 'Invalid poloniex credentials';
+        break;
+      case 'emptyCredentials':
+        displayText = 'Please provide poloniex credentials';
+        break;
+      default:
+        displayText = null;
+    }
+    return (
+      <div>
+        <PoloniexBalance  balanceCurrency={this.state.valueCurrency}
+                          balanceValue={this.state.balanceValue}
+                          balance={this.state.balance}
+                          displayText={displayText}/>
+        <PoloniexCredentialsForm onLoadCredentials={this.onLoadCredentials}
+                                 onCredentialsSubmit={this.handleCredentialsSubmit}
+                                 onCredentialsChange={this.handleCredentialsChange}
+                                 apiSecret={this.state.apiSecret}
+                                 apiKey={this.state.apiKey}/>
+      </div>
+    );
+  }
+});
+
+var PoloniexBalance = React.createClass({
+  getInitialState: function() {
+    return {'hideMsg': true, 'msg': '', 'msgOk': false};
+  },
+  render: function() {
+    var dashboard = null;
+
+    if (this.props.balanceValue !== null) {
+
+      var balance = Object.keys(this.props.balance).map(function(currency) {
+        return <div key={currency}><i className={classNames('cc', currency)}></i> {this.props.balance[currency]}</div>;
+      }.bind(this));
+
+      dashboard = (
+        <div className='row'>
+          <div className='col-4 align-self-center h-100'>
+            <div>
+              {balance}
+            </div>
+          </div>
+          <div className='offset-1 col-7 h-100 align-self-center'>
+            <div className='text-center'>
+              Balance ({this.props.balanceCurrency}): <span>{this.props.balanceValue} <i className={classNames('cc', this.props.balanceCurrency)}></i></span>
+            </div>
+          </div>
+        </div>
+      );
+    } else {
+      dashboard = (
+        <div className='row'>
+          <div className='col-12 text-center'>
+           <span>{this.props.displayText}</span>
+          </div>
+        </div>
+
+      );
+    }
+
+    return (
+      <div className='row'>
+        <div className='box offset-2 col-8'>
+          <div className='row'>
+            <div className='col-4'>Portfolio</div>
+          </div>
+          <hr/>
+          {dashboard}
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports.PoloniexBalance = PoloniexBalance;
+
+var PoloniexCredentialsForm = React.createClass({
+  getInitialState: function() {
+    return {'hideMsg': true, 'msg': '', 'editMode': false, 'msgOk': false};
+  },
+  handleSubmit: function(e) {
+    this.props.onCredentialsSubmit();
+    this.setState({'editMode': false});
     e.preventDefault();
   },
   handleApiKeyChange: function(event) {
-    this.setState({'apiKey': event.target.value});
+    this.props.onCredentialsChange(event.target.value, this.props.apiSecret);
   },
   handleApiSecretChange: function(event) {
-    this.setState({'apiSecret': event.target.value});
+    this.props.onCredentialsChange(this.props.apiKey, event.target.value);
   },
-  hideMessage: function() {
-    this.setState({'hideMsg': true});
-  },
-  displayMessage: function(msg, ok) {
-    this.setState({'msg': msg, 'msgOk': ok, 'hideMsg': false});
+  onEditClick: function() {
+    this.setState({'editMode': true});
   },
   render: function() {
-    var cName = classNames('form-message', {'hidden': this.state.hideMsg, 'message-ok': this.state.msgOk});
+    var submitType      = (this.state.editMode === true) ? 'submit' : 'hidden';
+    var buttonDisplay   = (this.state.editMode === true) ? 'none' : 'inline';
+    var secretDisplayed = (this.state.editMode === true) ? this.props.apiSecret : 'XXXXXXX';
+    var keyDisplayed    = (this.state.editMode === true) ? this.props.apiKey : 'XXXXXXX';
+
     return (
-        <div className='row justify-content-center api-credentials-form'>
-          <div className='col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4 col-xs-offset-1 col-xs-10'>
+        <div className='row api-credentials-form'>
+          <div className='offset-3 col-6 box'>
+            <span className='text-center'>Poloniex credentials</span>
+            <hr/>
             <form role='form' onSubmit={this.handleSubmit}>
-              <input className='form-control' type='text' placeholder='apiKey' value={this.state.apiKey} onChange={this.handleApiKeyChange} />
-              <input className='form-control' type='text' placeholder='apiSecret' value={this.state.apiSecret} onChange={this.handleApiSecretChange} />
-              <input className='form-control submit' type='submit' value='Save' />
-              <div className={cName} ref='message'>{this.state.msg}</div>
+              <label className='w-100'>Key:
+                <input className='form-control' type='text' placeholder='key' value={keyDisplayed} onChange={this.handleApiKeyChange} disabled={!this.state.editMode}/>
+              </label>
+              <label className='w-100'>Secret:
+                <input className='form-control' type='text' placeholder='secret' value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.state.editMode}/>
+              </label>
+              <input className='form-control submit' type={submitType} value='Save' />
+              <button className='form-control submit' style={{display: buttonDisplay}} onSubmit={null} onClick={this.onEditClick} type='button'>Show/Edit</button>
             </form>
           </div>
         </div>
        );
   }
 });
+
+module.exports.PoloniexCredentialsForm = PoloniexCredentialsForm;
diff --git a/cmd/web/js/signin.jsx b/cmd/web/js/signin.jsx
index 443a461..a2cfd1b 100644
--- a/cmd/web/js/signin.jsx
+++ b/cmd/web/js/signin.jsx
@@ -35,8 +35,8 @@ module.exports.SigninForm = React.createClass({
   render: function() {
     var cName = classNames('form-message', {'hidden': this.state.hideMsg, 'message-ok': this.state.msgOk});
     return (
-        <div className='row justify-content-center sign-in'>
-          <div className='col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4 col-xs-offset-1 col-xs-10'>
+        <div className='row sign-in'>
+          <div className='offset-4 col-4 col-xs-offset-1 col-xs-10 text-center'>
             <form role='form' onSubmit={this.handleSubmit}>
               <input className='form-control' type='email' placeholder='email' onChange={this.handleEmailChange} />
               <input className='form-control' type='password' placeholder='password' onChange={this.handlePasswordChange} />
diff --git a/cmd/web/js/signup.jsx b/cmd/web/js/signup.jsx
index 149125a..404a828 100644
--- a/cmd/web/js/signup.jsx
+++ b/cmd/web/js/signup.jsx
@@ -40,8 +40,8 @@ module.exports.SignupForm = React.createClass({
   render: function() {
     var cName = classNames('form-message', {'hidden': this.state.hideMsg, 'message-ok': this.state.msgOk});
     return (
-        <div className='row justify-content-center sign-in'>
-          <div className='col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4 col-xs-offset-1 col-xs-10'>
+        <div className='row sign-in'>
+          <div className='offset-4 col-4 col-xs-offset-1 col-xs-10 text-center'>
             <form role='form' onSubmit={this.handleSubmit}>
               <input className='form-control' type='email' placeholder='email' onChange={this.handleEmailChange} />
               <input className='form-control' type='password' placeholder='password' onChange={this.handlePasswordChange} />
diff --git a/cmd/web/static/cryptocoins.css b/cmd/web/static/cryptocoins.css
new file mode 100644
index 0000000..6829169
--- /dev/null
+++ b/cmd/web/static/cryptocoins.css
@@ -0,0 +1,1150 @@
+/*! Cryptocoins - cryptocurrency icon font | https://github.com/allienworks/cryptocoins */
+
+@font-face {
+  font-family: "cryptocoins";
+  src: url('cryptocoins.woff2') format('woff2'),
+    url('cryptocoins.woff') format('woff'),
+    url('cryptocoins.ttf') format('truetype');
+}
+
+/* .cc:before { */
+.cc::before {
+  font-family: "cryptocoins";
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */
+  text-decoration: none;
+  text-transform: none;
+}
+
+
+.cc.ADA-alt::before {
+  content: "\E001";
+}
+
+.cc.ADA::before {
+  content: "\E002";
+}
+
+.cc.ADC-alt::before {
+  content: "\E003";
+}
+
+.cc.ADC::before {
+  content: "\E004";
+}
+
+.cc.AEON-alt::before {
+  content: "\E005";
+}
+
+.cc.AEON::before {
+  content: "\E006";
+}
+
+.cc.AMP-alt::before {
+  content: "\E007";
+}
+
+.cc.AMP::before {
+  content: "\E008";
+}
+
+.cc.ANC-alt::before {
+  content: "\E009";
+}
+
+.cc.ANC::before {
+  content: "\E00A";
+}
+
+.cc.ARCH-alt::before {
+  content: "\E00B";
+}
+
+.cc.ARCH::before {
+  content: "\E00C";
+}
+
+.cc.ARDR-alt::before {
+  content: "\E00D";
+}
+
+.cc.ARDR::before {
+  content: "\E00E";
+}
+
+.cc.ARK-alt::before {
+  content: "\E00F";
+}
+
+.cc.ARK::before {
+  content: "\E010";
+}
+
+.cc.AUR-alt::before {
+  content: "\E011";
+}
+
+.cc.AUR::before {
+  content: "\E012";
+}
+
+.cc.BANX-alt::before {
+  content: "\E013";
+}
+
+.cc.BANX::before {
+  content: "\E014";
+}
+
+.cc.BAT-alt::before {
+  content: "\E015";
+}
+
+.cc.BAT::before {
+  content: "\E016";
+}
+
+.cc.BAY-alt::before {
+  content: "\E017";
+}
+
+.cc.BAY::before {
+  content: "\E018";
+}
+
+.cc.BC-alt::before {
+  content: "\E019";
+}
+
+.cc.BC::before {
+  content: "\E01A";
+}
+
+.cc.BCH-alt::before {
+  content: "\E01B";
+}
+
+.cc.BCH::before {
+  content: "\E01C";
+}
+
+.cc.BCN-alt::before {
+  content: "\E01D";
+}
+
+.cc.BCN::before {
+  content: "\E01E";
+}
+
+.cc.BFT-alt::before {
+  content: "\E01F";
+}
+
+.cc.BFT::before {
+  content: "\E020";
+}
+
+.cc.BRK-alt::before {
+  content: "\E021";
+}
+
+.cc.BRK::before {
+  content: "\E022";
+}
+
+.cc.BRX-alt::before {
+  content: "\E023";
+}
+
+.cc.BRX::before {
+  content: "\E024";
+}
+
+.cc.BSD-alt::before {
+  content: "\E025";
+}
+
+.cc.BSD::before {
+  content: "\E026";
+}
+
+.cc.BTA::before {
+  content: "\E027";
+}
+
+.cc.BTC-alt::before {
+  content: "\E028";
+}
+
+.cc.BTC::before {
+  content: "\E029";
+}
+
+.cc.BTCD-alt::before {
+  content: "\E02A";
+}
+
+.cc.BTCD::before {
+  content: "\E02B";
+}
+
+.cc.BTM-alt::before {
+  content: "\E02C";
+}
+
+.cc.BTM::before {
+  content: "\E02D";
+}
+
+.cc.BTS-alt::before {
+  content: "\E02E";
+}
+
+.cc.BTS::before {
+  content: "\E02F";
+}
+
+.cc.CLAM-alt::before {
+  content: "\E030";
+}
+
+.cc.CLAM::before {
+  content: "\E031";
+}
+
+.cc.CLOAK-alt::before {
+  content: "\E032";
+}
+
+.cc.CLOAK::before {
+  content: "\E033";
+}
+
+.cc.DAO-alt::before {
+  content: "\E034";
+}
+
+.cc.DAO::before {
+  content: "\E035";
+}
+
+.cc.DASH-alt::before {
+  content: "\E036";
+}
+
+.cc.DASH::before {
+  content: "\E037";
+}
+
+.cc.DCR-alt::before {
+  content: "\E038";
+}
+
+.cc.DCR::before {
+  content: "\E039";
+}
+
+.cc.DCT-alt::before {
+  content: "\E03A";
+}
+
+.cc.DCT::before {
+  content: "\E03B";
+}
+
+.cc.DGB-alt::before {
+  content: "\E03C";
+}
+
+.cc.DGB::before {
+  content: "\E03D";
+}
+
+.cc.DGD::before {
+  content: "\E03E";
+}
+
+.cc.DGX::before {
+  content: "\E03F";
+}
+
+.cc.DMD-alt::before {
+  content: "\E040";
+}
+
+.cc.DMD::before {
+  content: "\E041";
+}
+
+.cc.DOGE-alt::before {
+  content: "\E042";
+}
+
+.cc.DOGE::before {
+  content: "\E043";
+}
+
+.cc.EMC-alt::before {
+  content: "\E044";
+}
+
+.cc.EMC::before {
+  content: "\E045";
+}
+
+.cc.EOS-alt::before {
+  content: "\E046";
+}
+
+.cc.EOS::before {
+  content: "\E047";
+}
+
+.cc.ERC-alt::before {
+  content: "\E048";
+}
+
+.cc.ERC::before {
+  content: "\E049";
+}
+
+.cc.ETC-alt::before {
+  content: "\E04A";
+}
+
+.cc.ETC::before {
+  content: "\E04B";
+}
+
+.cc.ETH-alt::before {
+  content: "\E04C";
+}
+
+.cc.ETH::before {
+  content: "\E04D";
+}
+
+.cc.FC2-alt::before {
+  content: "\E04E";
+}
+
+.cc.FC2::before {
+  content: "\E04F";
+}
+
+.cc.FCT-alt::before {
+  content: "\E050";
+}
+
+.cc.FCT::before {
+  content: "\E051";
+}
+
+.cc.FLO-alt::before {
+  content: "\E052";
+}
+
+.cc.FLO::before {
+  content: "\E053";
+}
+
+.cc.FRK-alt::before {
+  content: "\E054";
+}
+
+.cc.FRK::before {
+  content: "\E055";
+}
+
+.cc.FTC-alt::before {
+  content: "\E056";
+}
+
+.cc.FTC::before {
+  content: "\E057";
+}
+
+.cc.GAME-alt::before {
+  content: "\E058";
+}
+
+.cc.GAME::before {
+  content: "\E059";
+}
+
+.cc.GBYTE-alt::before {
+  content: "\E05A";
+}
+
+.cc.GBYTE::before {
+  content: "\E05B";
+}
+
+.cc.GDC-alt::before {
+  content: "\E05C";
+}
+
+.cc.GDC::before {
+  content: "\E05D";
+}
+
+.cc.GEMZ-alt::before {
+  content: "\E05E";
+}
+
+.cc.GEMZ::before {
+  content: "\E05F";
+}
+
+.cc.GLD-alt::before {
+  content: "\E060";
+}
+
+.cc.GLD::before {
+  content: "\E061";
+}
+
+.cc.GNO-alt::before {
+  content: "\E062";
+}
+
+.cc.GNO::before {
+  content: "\E063";
+}
+
+.cc.GNT-alt::before {
+  content: "\E064";
+}
+
+.cc.GNT::before {
+  content: "\E065";
+}
+
+.cc.GOLOS-alt::before {
+  content: "\E066";
+}
+
+.cc.GOLOS::before {
+  content: "\E067";
+}
+
+.cc.GRC-alt::before {
+  content: "\E068";
+}
+
+.cc.GRC::before {
+  content: "\E069";
+}
+
+.cc.GRS::before {
+  content: "\E06A";
+}
+
+.cc.HEAT-alt::before {
+  content: "\E06B";
+}
+
+.cc.HEAT::before {
+  content: "\E06C";
+}
+
+.cc.ICN-alt::before {
+  content: "\E06D";
+}
+
+.cc.ICN::before {
+  content: "\E06E";
+}
+
+.cc.IFC-alt::before {
+  content: "\E06F";
+}
+
+.cc.IFC::before {
+  content: "\E070";
+}
+
+.cc.INCNT-alt::before {
+  content: "\E071";
+}
+
+.cc.INCNT::before {
+  content: "\E072";
+}
+
+.cc.IOC-alt::before {
+  content: "\E073";
+}
+
+.cc.IOC::before {
+  content: "\E074";
+}
+
+.cc.IOTA-alt::before {
+  content: "\E075";
+}
+
+.cc.IOTA::before {
+  content: "\E076";
+}
+
+.cc.JBS-alt::before {
+  content: "\E077";
+}
+
+.cc.JBS::before {
+  content: "\E078";
+}
+
+.cc.KMD-alt::before {
+  content: "\E079";
+}
+
+.cc.KMD::before {
+  content: "\E07A";
+}
+
+.cc.KOBO::before {
+  content: "\E07B";
+}
+
+.cc.KORE-alt::before {
+  content: "\E07C";
+}
+
+.cc.KORE::before {
+  content: "\E07D";
+}
+
+.cc.LBC-alt::before {
+  content: "\E07E";
+}
+
+.cc.LBC::before {
+  content: "\E07F";
+}
+
+.cc.LDOGE-alt::before {
+  content: "\E080";
+}
+
+.cc.LDOGE::before {
+  content: "\E081";
+}
+
+.cc.LSK-alt::before {
+  content: "\E082";
+}
+
+.cc.LSK::before {
+  content: "\E083";
+}
+
+.cc.LTC-alt::before {
+  content: "\E084";
+}
+
+.cc.LTC::before {
+  content: "\E085";
+}
+
+.cc.MAID-alt::before {
+  content: "\E086";
+}
+
+.cc.MAID::before {
+  content: "\E087";
+}
+
+.cc.MCO-alt::before {
+  content: "\E088";
+}
+
+.cc.MCO::before {
+  content: "\E089";
+}
+
+.cc.MINT-alt::before {
+  content: "\E08A";
+}
+
+.cc.MINT::before {
+  content: "\E08B";
+}
+
+.cc.MONA-alt::before {
+  content: "\E08C";
+}
+
+.cc.MONA::before {
+  content: "\E08D";
+}
+
+.cc.MRC::before {
+  content: "\E08E";
+}
+
+.cc.MSC-alt::before {
+  content: "\E08F";
+}
+
+.cc.MSC::before {
+  content: "\E090";
+}
+
+.cc.MTR-alt::before {
+  content: "\E091";
+}
+
+.cc.MTR::before {
+  content: "\E092";
+}
+
+.cc.MUE-alt::before {
+  content: "\E093";
+}
+
+.cc.MUE::before {
+  content: "\E094";
+}
+
+.cc.NBT::before {
+  content: "\E095";
+}
+
+.cc.NEO-alt::before {
+  content: "\E096";
+}
+
+.cc.NEO::before {
+  content: "\E097";
+}
+
+.cc.NEOS-alt::before {
+  content: "\E098";
+}
+
+.cc.NEOS::before {
+  content: "\E099";
+}
+
+.cc.NEU-alt::before {
+  content: "\E09A";
+}
+
+.cc.NEU::before {
+  content: "\E09B";
+}
+
+.cc.NLG-alt::before {
+  content: "\E09C";
+}
+
+.cc.NLG::before {
+  content: "\E09D";
+}
+
+.cc.NMC-alt::before {
+  content: "\E09E";
+}
+
+.cc.NMC::before {
+  content: "\E09F";
+}
+
+.cc.NOTE-alt::before {
+  content: "\E0A0";
+}
+
+.cc.NOTE::before {
+  content: "\E0A1";
+}
+
+.cc.NVC-alt::before {
+  content: "\E0A2";
+}
+
+.cc.NVC::before {
+  content: "\E0A3";
+}
+
+.cc.NXT-alt::before {
+  content: "\E0A4";
+}
+
+.cc.NXT::before {
+  content: "\E0A5";
+}
+
+.cc.OK-alt::before {
+  content: "\E0A6";
+}
+
+.cc.OK::before {
+  content: "\E0A7";
+}
+
+.cc.OMG-alt::before {
+  content: "\E0A8";
+}
+
+.cc.OMG::before {
+  content: "\E0A9";
+}
+
+.cc.OMNI-alt::before {
+  content: "\E0AA";
+}
+
+.cc.OMNI::before {
+  content: "\E0AB";
+}
+
+.cc.OPAL-alt::before {
+  content: "\E0AC";
+}
+
+.cc.OPAL::before {
+  content: "\E0AD";
+}
+
+.cc.PART-alt::before {
+  content: "\E0AE";
+}
+
+.cc.PART::before {
+  content: "\E0AF";
+}
+
+.cc.PIGGY-alt::before {
+  content: "\E0B0";
+}
+
+.cc.PIGGY::before {
+  content: "\E0B1";
+}
+
+.cc.PINK-alt::before {
+  content: "\E0B2";
+}
+
+.cc.PINK::before {
+  content: "\E0B3";
+}
+
+.cc.PIVX-alt::before {
+  content: "\E0B4";
+}
+
+.cc.PIVX::before {
+  content: "\E0B5";
+}
+
+.cc.POT-alt::before {
+  content: "\E0B6";
+}
+
+.cc.POT::before {
+  content: "\E0B7";
+}
+
+.cc.PPC-alt::before {
+  content: "\E0B8";
+}
+
+.cc.PPC::before {
+  content: "\E0B9";
+}
+
+.cc.QRK-alt::before {
+  content: "\E0BA";
+}
+
+.cc.QRK::before {
+  content: "\E0BB";
+}
+
+.cc.QTUM-alt::before {
+  content: "\E0BC";
+}
+
+.cc.QTUM::before {
+  content: "\E0BD";
+}
+
+.cc.RADS-alt::before {
+  content: "\E0BE";
+}
+
+.cc.RADS::before {
+  content: "\E0BF";
+}
+
+.cc.RBIES-alt::before {
+  content: "\E0C0";
+}
+
+.cc.RBIES::before {
+  content: "\E0C1";
+}
+
+.cc.RBT-alt::before {
+  content: "\E0C2";
+}
+
+.cc.RBT::before {
+  content: "\E0C3";
+}
+
+.cc.RBY-alt::before {
+  content: "\E0C4";
+}
+
+.cc.RBY::before {
+  content: "\E0C5";
+}
+
+.cc.RDD-alt::before {
+  content: "\E0C6";
+}
+
+.cc.RDD::before {
+  content: "\E0C7";
+}
+
+.cc.REP-alt::before {
+  content: "\E0C8";
+}
+
+.cc.REP::before {
+  content: "\E0C9";
+}
+
+.cc.RISE-alt::before {
+  content: "\E0CA";
+}
+
+.cc.RISE::before {
+  content: "\E0CB";
+}
+
+.cc.SALT-alt::before {
+  content: "\E0CC";
+}
+
+.cc.SALT::before {
+  content: "\E0CD";
+}
+
+.cc.SAR-alt::before {
+  content: "\E0CE";
+}
+
+.cc.SAR::before {
+  content: "\E0CF";
+}
+
+.cc.SCOT-alt::before {
+  content: "\E0D0";
+}
+
+.cc.SCOT::before {
+  content: "\E0D1";
+}
+
+.cc.SDC-alt::before {
+  content: "\E0D2";
+}
+
+.cc.SDC::before {
+  content: "\E0D3";
+}
+
+.cc.SIA-alt::before {
+  content: "\E0D4";
+}
+
+.cc.SIA::before {
+  content: "\E0D5";
+}
+
+.cc.SJCX-alt::before {
+  content: "\E0D6";
+}
+
+.cc.SJCX::before {
+  content: "\E0D7";
+}
+
+.cc.SLG-alt::before {
+  content: "\E0D8";
+}
+
+.cc.SLG::before {
+  content: "\E0D9";
+}
+
+.cc.SLS-alt::before {
+  content: "\E0DA";
+}
+
+.cc.SLS::before {
+  content: "\E0DB";
+}
+
+.cc.SNRG-alt::before {
+  content: "\E0DC";
+}
+
+.cc.SNRG::before {
+  content: "\E0DD";
+}
+
+.cc.START-alt::before {
+  content: "\E0DE";
+}
+
+.cc.START::before {
+  content: "\E0DF";
+}
+
+.cc.STEEM-alt::before {
+  content: "\E0E0";
+}
+
+.cc.STEEM::before {
+  content: "\E0E1";
+}
+
+.cc.STR-alt::before {
+  content: "\E0E2";
+}
+
+.cc.STR::before {
+  content: "\E0E3";
+}
+
+.cc.STRAT-alt::before {
+  content: "\E0E4";
+}
+
+.cc.STRAT::before {
+  content: "\E0E5";
+}
+
+.cc.SWIFT-alt::before {
+  content: "\E0E6";
+}
+
+.cc.SWIFT::before {
+  content: "\E0E7";
+}
+
+.cc.SYNC-alt::before {
+  content: "\E0E8";
+}
+
+.cc.SYNC::before {
+  content: "\E0E9";
+}
+
+.cc.SYS-alt::before {
+  content: "\E0EA";
+}
+
+.cc.SYS::before {
+  content: "\E0EB";
+}
+
+.cc.TRIG-alt::before {
+  content: "\E0EC";
+}
+
+.cc.TRIG::before {
+  content: "\E0ED";
+}
+
+.cc.TX-alt::before {
+  content: "\E0EE";
+}
+
+.cc.TX::before {
+  content: "\E0EF";
+}
+
+.cc.UBQ-alt::before {
+  content: "\E0F0";
+}
+
+.cc.UBQ::before {
+  content: "\E0F1";
+}
+
+.cc.UNITY-alt::before {
+  content: "\E0F2";
+}
+
+.cc.UNITY::before {
+  content: "\E0F3";
+}
+
+.cc.USDT-alt::before {
+  content: "\E0F4";
+}
+
+.cc.USDT::before {
+  content: "\E0F5";
+}
+
+.cc.VIOR-alt::before {
+  content: "\E0F6";
+}
+
+.cc.VIOR::before {
+  content: "\E0F7";
+}
+
+.cc.VNL-alt::before {
+  content: "\E0F8";
+}
+
+.cc.VNL::before {
+  content: "\E0F9";
+}
+
+.cc.VPN-alt::before {
+  content: "\E0FA";
+}
+
+.cc.VPN::before {
+  content: "\E0FB";
+}
+
+.cc.VRC-alt::before {
+  content: "\E0FC";
+}
+
+.cc.VRC::before {
+  content: "\E0FD";
+}
+
+.cc.VTC-alt::before {
+  content: "\E0FE";
+}
+
+.cc.VTC::before {
+  content: "\E0FF";
+}
+
+.cc.WAVES-alt::before {
+  content: "\E100";
+}
+
+.cc.WAVES::before {
+  content: "\E101";
+}
+
+.cc.XAI-alt::before {
+  content: "\E102";
+}
+
+.cc.XAI::before {
+  content: "\E103";
+}
+
+.cc.XBS-alt::before {
+  content: "\E104";
+}
+
+.cc.XBS::before {
+  content: "\E105";
+}
+
+.cc.XCP-alt::before {
+  content: "\E106";
+}
+
+.cc.XCP::before {
+  content: "\E107";
+}
+
+.cc.XEM-alt::before {
+  content: "\E108";
+}
+
+.cc.XEM::before {
+  content: "\E109";
+}
+
+.cc.XMR::before {
+  content: "\E10A";
+}
+
+.cc.XPM-alt::before {
+  content: "\E10B";
+}
+
+.cc.XPM::before {
+  content: "\E10C";
+}
+
+.cc.XRP-alt::before {
+  content: "\E10D";
+}
+
+.cc.XRP::before {
+  content: "\E10E";
+}
+
+.cc.XTZ-alt::before {
+  content: "\E10F";
+}
+
+.cc.XTZ::before {
+  content: "\E110";
+}
+
+.cc.XVG-alt::before {
+  content: "\E111";
+}
+
+.cc.XVG::before {
+  content: "\E112";
+}
+
+.cc.XZC-alt::before {
+  content: "\E113";
+}
+
+.cc.XZC::before {
+  content: "\E114";
+}
+
+.cc.YBC-alt::before {
+  content: "\E115";
+}
+
+.cc.YBC::before {
+  content: "\E116";
+}
+
+.cc.ZEC-alt::before {
+  content: "\E117";
+}
+
+.cc.ZEC::before {
+  content: "\E118";
+}
+
+.cc.ZEIT-alt::before {
+  content: "\E119";
+}
+
+.cc.ZEIT::before {
+  content: "\E11A";
+}
\ No newline at end of file
diff --git a/cmd/web/static/cryptocoins.ttf b/cmd/web/static/cryptocoins.ttf
new file mode 100644
index 0000000..b92c27d
Binary files /dev/null and b/cmd/web/static/cryptocoins.ttf differ
diff --git a/cmd/web/static/cryptocoins.woff b/cmd/web/static/cryptocoins.woff
new file mode 100644
index 0000000..bf8eb08
Binary files /dev/null and b/cmd/web/static/cryptocoins.woff differ
diff --git a/cmd/web/static/cryptocoins.woff2 b/cmd/web/static/cryptocoins.woff2
new file mode 100644
index 0000000..dcc195c
Binary files /dev/null and b/cmd/web/static/cryptocoins.woff2 differ
diff --git a/cmd/web/static/index.html b/cmd/web/static/index.html
index 9a70074..a372517 100644
--- a/cmd/web/static/index.html
+++ b/cmd/web/static/index.html
@@ -11,6 +11,7 @@
     <title>Cryptoportfolio</title>
     <link href='https://fonts.googleapis.com/css?family=Fira+Mono' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="/public/cryptocoins.css"/>
     <link rel="stylesheet" type="text/css" href="/public/style.css"/>
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
diff --git a/cmd/web/static/style.css b/cmd/web/static/style.css
index 12af379..bfa43f0 100644
--- a/cmd/web/static/style.css
+++ b/cmd/web/static/style.css
@@ -3,7 +3,6 @@
 body {
   font-family: 'Fira Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif;
   background-color: rgb(246, 248, 251);
-  text-align: center;
 }
 
 ul {
@@ -25,6 +24,10 @@ a:focus {
   color: inherit;
 }
 
+i.cc {
+  font-size: 1.5em;
+}
+
 #logo {
   text-align: center;
   display: inline-block;
@@ -93,8 +96,8 @@ a:focus {
   background-color: rgb(250, 250, 250);
   box-shadow: 0 2px 6px 2px rgba(0,0,0,.05);
   border-radius: 4px;
-}
-
-.box:hover {
-  box-shadow: 0 4px 15px 2px rgba(0,0,0,.20);
-}
+  margin-bottom: 10px;
+  margin-top: 10px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
\ No newline at end of file
-- 
cgit v1.2.3