From fa570953dd7403b7807473023deee24b3b29b75b Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Mon, 20 Feb 2017 18:08:20 -0800
Subject: [PATCH 1/4] Use `activeTab` props to for navigation indicator

---
 src/components/Layout/Layout.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index aa349cf..f8ce96e 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -15,6 +15,7 @@ const Layout = ({
   children,
   footer,
   alwaysLoad,
+  activeTab,
   border = true,
 }) => {
   const onClickPrices = () => ui.changeView('prices');
@@ -32,16 +33,16 @@ const Layout = ({
         <HeaderTab
           onClick={ onClickPrices }
           label="Prices"
-          active={ ui.view === 'prices' }
+          active={ activeTab === 'prices' }
         />
         <HeaderTab
           onClick={ onClickPortfolio }
           label="Portfolio"
-          active={ ui.view === 'portfolio' }
+          active={ activeTab === 'portfolio' }
         />
         <SettingsTab
           onClick={ onClickSettings }
-          active={ ui.view === 'settings' }
+          active={ activeTab === 'settings' }
         />
       </Header>
       <Flex auto>

From 8eadefdc43e813ae914f169dbe12adbc9132f810 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Mon, 20 Feb 2017 18:08:42 -0800
Subject: [PATCH 2/4] Added currency details views

---
 src/scenes/Application/Application.js         |  3 ++
 src/scenes/Currency/Currency.js               | 35 +++++++++++++++++++
 src/scenes/Currency/Currency.scss             |  0
 src/scenes/Currency/index.js                  |  2 ++
 src/scenes/Prices/Prices.js                   |  4 ++-
 .../Prices/components/PriceList/PriceList.js  |  7 +++-
 src/stores/UiStore.js                         |  9 +++++
 7 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 src/scenes/Currency/Currency.js
 create mode 100644 src/scenes/Currency/Currency.scss
 create mode 100644 src/scenes/Currency/index.js

diff --git a/src/scenes/Application/Application.js b/src/scenes/Application/Application.js
index 1c1e038..172a35f 100644
--- a/src/scenes/Application/Application.js
+++ b/src/scenes/Application/Application.js
@@ -5,6 +5,7 @@ import { Flex } from 'reflexbox';
 import 'styles/base.scss';
 
 import Prices from 'scenes/Prices';
+import Currency from 'scenes/Currency';
 import Portfolio from 'scenes/Portfolio';
 import Settings from 'scenes/Settings';
 
@@ -19,6 +20,8 @@ class Application extends React.Component {
     switch (this.props.ui.view) {
       case 'prices':
         return <Prices />;
+      case 'currency':
+        return <Currency />;
       case 'portfolio':
         return <Portfolio />;
       case 'settings':
diff --git a/src/scenes/Currency/Currency.js b/src/scenes/Currency/Currency.js
new file mode 100644
index 0000000..91131a1
--- /dev/null
+++ b/src/scenes/Currency/Currency.js
@@ -0,0 +1,35 @@
+import React, { PropTypes } from 'react';
+import { observer, inject } from 'mobx-react';
+
+import Layout from 'components/Layout';
+
+@inject('prices', 'ui')
+@observer
+class Currency extends React.Component {
+  static propTypes = {
+    prices: PropTypes.object.isRequired,
+    ui: PropTypes.object.isRequired,
+  }
+
+  render() {
+    // const {
+    //   rateData,
+    //   marketData,
+    // } = this.props.prices;
+    const {
+      viewCurrency,
+    } = this.props.ui;
+    const currency = viewCurrency;
+
+    return (
+      <Layout
+        title="Bitcoin"
+        activeTab="prices"
+      >
+        { currency }
+      </Layout>
+    );
+  }
+}
+
+export default Currency;
diff --git a/src/scenes/Currency/Currency.scss b/src/scenes/Currency/Currency.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scenes/Currency/index.js b/src/scenes/Currency/index.js
new file mode 100644
index 0000000..f0c6de6
--- /dev/null
+++ b/src/scenes/Currency/index.js
@@ -0,0 +1,2 @@
+import Currency from './Currency';
+export default Currency;
diff --git a/src/scenes/Prices/Prices.js b/src/scenes/Prices/Prices.js
index dce4463..12eb9bb 100644
--- a/src/scenes/Prices/Prices.js
+++ b/src/scenes/Prices/Prices.js
@@ -19,7 +19,8 @@ class Prices extends React.Component {
     } = this.props.prices;
     const {
       visibleCurrencies,
-      sortBy
+      sortBy,
+      openCurrency,
     } = this.props.ui;
 
     return (
@@ -32,6 +33,7 @@ class Prices extends React.Component {
             assets={ priceListData }
             visibleCurrencies={ visibleCurrencies }
             sortBy={ sortBy }
+            openCurrency={ openCurrency }
           />
         ) }
       </Layout>
diff --git a/src/scenes/Prices/components/PriceList/PriceList.js b/src/scenes/Prices/components/PriceList/PriceList.js
index 88a03f5..702e318 100644
--- a/src/scenes/Prices/components/PriceList/PriceList.js
+++ b/src/scenes/Prices/components/PriceList/PriceList.js
@@ -15,7 +15,7 @@ import classNames from 'classnames/bind';
 import styles from './PriceList.scss';
 const cx = classNames.bind(styles);
 
-const PriceList = ({ assets, visibleCurrencies, sortBy }) => {
+const PriceList = ({ assets, visibleCurrencies, sortBy, openCurrency }) => {
   const includedAssets = assets.filter(asset => visibleCurrencies.includes(asset.symbol));
   const sorted = sortByType(includedAssets, sortBy);
 
@@ -24,6 +24,7 @@ const PriceList = ({ assets, visibleCurrencies, sortBy }) => {
       { sorted.map(asset => (
         <AssetRow
           key={ asset.symbol }
+          openCurrency={ openCurrency }
           { ...asset }
         />
       )) }
@@ -40,6 +41,7 @@ const AssetRow = ({
   highestPrice,
   lowestPrice,
   marketCap,
+  openCurrency,
 }) => {
   const direction = change >= 0 ? 'up' : 'down';
   const chartOptions = {
@@ -59,12 +61,15 @@ const AssetRow = ({
       }],
     },
   };
+  const onClick = () => openCurrency(symbol);
 
   return (
     <Flex
       align="center"
       justify="space-between"
       className={ styles.row }
+      role="button"
+      onClick={ onClick }
     >
       <Flex className={ styles.rowLeft }>
         <CurrencyColor color={ color } className={ styles.colorDot } />
diff --git a/src/stores/UiStore.js b/src/stores/UiStore.js
index e3bcd39..239af53 100644
--- a/src/stores/UiStore.js
+++ b/src/stores/UiStore.js
@@ -6,12 +6,14 @@ import { SORT_TYPES } from 'utils/sortBy';
 const UI_STORE_KEY = 'UI_STORE_KEY';
 const AVAILABLE_VIEWS = [
   'prices',
+  'currency',
   'portfolio',
   'settings',
 ];
 
 export default class Ui {
   @observable view = AVAILABLE_VIEWS[0];
+  @observable viewCurrency;
   @observable visibleCurrencies = CURRENCIES.map(currency => currency.symbol);
   @observable sortBy = SORT_TYPES.marketCap;
   @observable dockItemVisible = true;
@@ -46,6 +48,11 @@ export default class Ui {
     this.visibleCurrencies = [];
   }
 
+  @action openCurrency = (currency) => {
+    this.viewCurrency = currency;
+    this.changeView('currency');
+  }
+
   @action setLaunchOnStartup = (launchOnStartup) => {
     this.launchOnStartup = launchOnStartup;
   }
@@ -57,6 +64,7 @@ export default class Ui {
   @action fromJSON = (jsonData) => {
     const parsed = JSON.parse(jsonData);
     this.view = parsed.view;
+    this.viewCurrency = parsed.viewCurrency;
     this.visibleCurrencies.replace(parsed.visibleCurrencies);
 
     const setIfDefined = (key) => {
@@ -75,6 +83,7 @@ export default class Ui {
   toObject = () => {
     return {
       view: this.view,
+      viewCurrency: this.viewCurrency,
       visibleCurrencies: this.visibleCurrencies,
       sortBy: this.sortBy,
       launchOnStartup: this.launchOnStartup,

From ee87c8fdeb731ba0d3762d0d5b6e0bba9ce38c6e Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Mon, 20 Feb 2017 18:39:15 -0800
Subject: [PATCH 3/4] Live data for currency view

---
 src/scenes/Currency/Currency.js               | 35 ++++++++++++++++---
 src/scenes/Currency/Currency.scss             | 10 ++++++
 .../Currency/components/Section/Section.js    | 14 ++++++++
 .../Currency/components/Section/Section.scss  | 11 ++++++
 .../Currency/components/Section/index.js      |  2 ++
 .../Prices/components/PriceList/PriceList.js  |  2 +-
 .../components/PriceList/PriceList.scss       | 12 -------
 src/stores/PricesStore.js                     |  4 ++-
 8 files changed, 71 insertions(+), 19 deletions(-)
 create mode 100644 src/scenes/Currency/components/Section/Section.js
 create mode 100644 src/scenes/Currency/components/Section/Section.scss
 create mode 100644 src/scenes/Currency/components/Section/index.js

diff --git a/src/scenes/Currency/Currency.js b/src/scenes/Currency/Currency.js
index 91131a1..62c9ea4 100644
--- a/src/scenes/Currency/Currency.js
+++ b/src/scenes/Currency/Currency.js
@@ -1,7 +1,15 @@
+import _ from 'lodash';
 import React, { PropTypes } from 'react';
 import { observer, inject } from 'mobx-react';
+import { formatNumber } from 'utils/formatting';
+import { Flex } from 'reflexbox';
 
+import ChangeHighlight from 'components/ChangeHighlight';
+import ColoredChange from 'components/ColoredChange';
 import Layout from 'components/Layout';
+import Section from './components/Section';
+
+import styles from './Currency.scss';
 
 @inject('prices', 'ui')
 @observer
@@ -12,21 +20,38 @@ class Currency extends React.Component {
   }
 
   render() {
-    // const {
-    //   rateData,
-    //   marketData,
-    // } = this.props.prices;
+    const {
+      priceListData,
+    } = this.props.prices;
     const {
       viewCurrency,
     } = this.props.ui;
     const currency = viewCurrency;
+    const currencyData = _.find(priceListData, (data) => data.symbol === currency);
 
     return (
       <Layout
         title="Bitcoin"
         activeTab="prices"
       >
-        { currency }
+        <Flex column auto>
+          <Section>
+            <div className={ styles.price }>
+              <ChangeHighlight trigger={ currencyData.price }>
+                { formatNumber(currencyData.price, 'USD', { minPrecision: true }) }
+              </ChangeHighlight>
+            </div>
+            <div className={ styles.change }>
+              <ColoredChange direction={ currencyData.direction }>
+                { formatNumber(currencyData.change, undefined, { directionSymbol: true,
+                                                    minPrecision: true }) }%
+              </ColoredChange>
+            </div>
+          </Section>
+          <Section>
+            More data
+          </Section>
+        </Flex>
       </Layout>
     );
   }
diff --git a/src/scenes/Currency/Currency.scss b/src/scenes/Currency/Currency.scss
index e69de29..9c7859b 100644
--- a/src/scenes/Currency/Currency.scss
+++ b/src/scenes/Currency/Currency.scss
@@ -0,0 +1,10 @@
+@import '~styles/constants.scss';
+
+.price {
+  font-size: 32px;
+  line-height: 1.2;
+}
+
+.change {
+  font-size: 14px;
+}
diff --git a/src/scenes/Currency/components/Section/Section.js b/src/scenes/Currency/components/Section/Section.js
new file mode 100644
index 0000000..60da3f4
--- /dev/null
+++ b/src/scenes/Currency/components/Section/Section.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Flex } from 'reflexbox';
+
+import styles from './Section.scss';
+
+const Section = ({
+  children,
+}) => (
+  <Flex column className={ styles.container }>
+    { children }
+  </Flex>
+);
+
+export default Section;
diff --git a/src/scenes/Currency/components/Section/Section.scss b/src/scenes/Currency/components/Section/Section.scss
new file mode 100644
index 0000000..7c632c1
--- /dev/null
+++ b/src/scenes/Currency/components/Section/Section.scss
@@ -0,0 +1,11 @@
+@import '~styles/constants.scss';
+
+.container {
+  width: 100%;
+  padding: 10px;
+  border-bottom: 1px solid $darkGray;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
diff --git a/src/scenes/Currency/components/Section/index.js b/src/scenes/Currency/components/Section/index.js
new file mode 100644
index 0000000..14170cb
--- /dev/null
+++ b/src/scenes/Currency/components/Section/index.js
@@ -0,0 +1,2 @@
+import Section from './Section';
+export default Section;
diff --git a/src/scenes/Prices/components/PriceList/PriceList.js b/src/scenes/Prices/components/PriceList/PriceList.js
index 702e318..22b2084 100644
--- a/src/scenes/Prices/components/PriceList/PriceList.js
+++ b/src/scenes/Prices/components/PriceList/PriceList.js
@@ -37,13 +37,13 @@ const AssetRow = ({
   color,
   price,
   change,
+  direction,
   chartData,
   highestPrice,
   lowestPrice,
   marketCap,
   openCurrency,
 }) => {
-  const direction = change >= 0 ? 'up' : 'down';
   const chartOptions = {
     animation: false,
     legend: {
diff --git a/src/scenes/Prices/components/PriceList/PriceList.scss b/src/scenes/Prices/components/PriceList/PriceList.scss
index 675180f..f55038d 100644
--- a/src/scenes/Prices/components/PriceList/PriceList.scss
+++ b/src/scenes/Prices/components/PriceList/PriceList.scss
@@ -54,18 +54,6 @@
   line-height: 1.2;
 }
 
-.change {
-  color: $gray;
-}
-
-.up {
-  color: $up;
-}
-
-.down {
-  color: $down;
-}
-
 .chart {
   transition: opacity 0.25s ease;
 }
diff --git a/src/stores/PricesStore.js b/src/stores/PricesStore.js
index be4e7c7..f87ded0 100644
--- a/src/stores/PricesStore.js
+++ b/src/stores/PricesStore.js
@@ -46,6 +46,7 @@ export default class PricesStore {
         const color = currencyColors[key];
         const labels = [];
         const historic = [];
+        const change = this.changes[key] * 100;
         for (const rate of value) {
           historic.push(parseFloat(rate));
           labels.push('');
@@ -55,7 +56,8 @@ export default class PricesStore {
           color,
           symbol: key,
           price: this.rates[key],
-          change: this.changes[key] * 100,
+          change,
+          direction: change >= 0 ? 'up' : 'down',
           chartData: {
             labels,
             datasets: [{

From 1af94b79526273aec0712de5b85c1c51e8a9c263 Mon Sep 17 00:00:00 2001
From: Ben Jennings <ben@coinbase.com>
Date: Mon, 20 Feb 2017 23:03:44 -0800
Subject: [PATCH 4/4] Add currency view header

---
 src/scenes/Currency/Currency.js   | 16 +++++++++++++
 src/scenes/Currency/Currency.scss | 39 +++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)

diff --git a/src/scenes/Currency/Currency.js b/src/scenes/Currency/Currency.js
index 62c9ea4..545ba09 100644
--- a/src/scenes/Currency/Currency.js
+++ b/src/scenes/Currency/Currency.js
@@ -10,6 +10,8 @@ import Layout from 'components/Layout';
 import Section from './components/Section';
 
 import styles from './Currency.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
 
 @inject('prices', 'ui')
 @observer
@@ -35,6 +37,19 @@ class Currency extends React.Component {
         activeTab="prices"
       >
         <Flex column auto>
+          <Section>
+            <Flex justify="space-between">
+              <div role="button" className={ styles.back }>← Back</div>
+              <div className={ styles.title }>
+                Bitcoin <span className={ styles.titleDull }>(BTC)</span>
+              </div>
+              <Flex>
+                <div role="button" className={ styles.period }>1D</div>
+                <div role="button" className={ cx(styles.period, styles.periodActive) }>1W</div>
+                <div role="button" className={ styles.period }>1M</div>
+              </Flex>
+            </Flex>
+          </Section>
           <Section>
             <div className={ styles.price }>
               <ChangeHighlight trigger={ currencyData.price }>
@@ -47,6 +62,7 @@ class Currency extends React.Component {
                                                     minPrecision: true }) }%
               </ColoredChange>
             </div>
+            <div>Chart goes here</div>
           </Section>
           <Section>
             More data
diff --git a/src/scenes/Currency/Currency.scss b/src/scenes/Currency/Currency.scss
index 9c7859b..6b03287 100644
--- a/src/scenes/Currency/Currency.scss
+++ b/src/scenes/Currency/Currency.scss
@@ -8,3 +8,42 @@
 .change {
   font-size: 14px;
 }
+
+.back {
+  color: $darkGray;
+
+  &:hover {
+    color: $white;
+  }
+}
+
+.titleDull {
+  color: $darkGray;
+}
+
+.period {
+  color: $darkGray;
+
+  &:hover {
+    color: $white;
+  }
+
+  & + .period {
+    margin-left: 10px;
+  }
+}
+
+.periodActive {
+  position: relative;
+  color: $white;
+
+  &:after {
+    position: absolute;
+    left: 0;
+    bottom: -11px;
+    content: '';
+    width: 18px;
+    height: 1px;
+    background-color: $white;
+  }
+}