[WIP] Currency details

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>

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':

src/scenes/Currency/Currency.js

@@ -0,0 +1,76 @@
+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';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+@inject('prices', 'ui')
+@observer
+class Currency extends React.Component {
+  static propTypes = {
+    prices: PropTypes.object.isRequired,
+    ui: PropTypes.object.isRequired,
+  }
+
+  render() {
+    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"
+      >
+        <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 }>
+                { 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>
+            <div>Chart goes here</div>
+          </Section>
+          <Section>
+            More data
+          </Section>
+        </Flex>
+      </Layout>
+    );
+  }
+}
+
+export default Currency;

src/scenes/Currency/Currency.scss

@@ -0,0 +1,49 @@
+@import '~styles/constants.scss';
+
+.price {
+  font-size: 32px;
+  line-height: 1.2;
+}
+
+.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;
+  }
+}

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;

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;
+  }
+}

src/scenes/Currency/components/Section/index.js

@@ -0,0 +1,2 @@
+import Section from './Section';
+export default Section;

src/scenes/Currency/index.js

@@ -0,0 +1,2 @@
+import Currency from './Currency';
+export default Currency;

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>

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 }
         />
       )) }
@@ -36,12 +37,13 @@ const AssetRow = ({
   color,
   price,
   change,
+  direction,
   chartData,
   highestPrice,
   lowestPrice,
   marketCap,
+  openCurrency,
 }) => {
-  const direction = change >= 0 ? 'up' : 'down';
   const chartOptions = {
     animation: false,
     legend: {
@@ -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 } />

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;
 }

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: [{

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,