Up WEX Ticker Extension version to v0.2.0

CoinWizard · Oct 21, 2017 · b389c6d · b389c6d
1 parent 2801b2f
commit b389c6d
Show file tree

Hide file tree

Showing 9 changed files with 174 additions and 111 deletions.
diff --git a/resources/images/wex-logo.png b/resources/images/wex-logo.png
diff --git a/resources/manifest.json b/resources/manifest.json
@@ -1,8 +1,8 @@
 {
     "manifest_version": 2,
-    "name": "Wex Exchange Ticker",
-    "version": "0.1.1",
-    "short_name": "Wex Ticker",
+    "name": "WEX Exchange ticker",
+    "version": "0.2.0",
+    "short_name": "WEX Ticker",
     "description": "The best way to track Bitcoin, Litecoin and other cryptocurrencies price at Wex exchange",
     "content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'",
     "permissions": [
@@ -23,6 +23,6 @@
             "128": "/images/wex_128.png"
         },
         "default_popup": "/views/popup.html",
-        "default_title": "Wex Exchange Ticker"
+        "default_title": "WEX Exchange ticker"
     }
 }
diff --git a/src/Popup/Screens/HomeScreen.jsx b/src/Popup/Screens/HomeScreen.jsx
@@ -42,18 +42,6 @@ class HomeScreen extends React.Component {
         this.setState({selectMode: false});
     };
 
-
-    getDropDownOptions() {
-        const {tickers = []} = this.props;
-
-        return _.map(tickers, (trc) => {
-            return {
-                value: trc.key,
-                label: `${trc.baseCurrency}/${trc.quoteCurrency}`
-            };
-        });
-    }
-
     drawTickerList() {
         const {tickers = [], currentTickerKey = null} = this.props;
         const {selectMode = false} = this.state;
@@ -89,8 +77,8 @@ class HomeScreen extends React.Component {
 
         const currentTicker = _.find(tickers, {key: currentTickerKey});
 
-        const currentTickerLabelProps = {
-            className: "current-ticker-label",
+        const currentMarketLabelProps = {
+            className: "header__current-market",
             onClick: () => {
                 this.setState({selectMode: true});
             }
@@ -99,15 +87,20 @@ class HomeScreen extends React.Component {
         return (
             <div>
                 {this.drawTickerList()}
-                {
-                    currentTicker && (
-                        <div {...currentTickerLabelProps}>
-                            <label className="current-ticker-label__item">
+
+                <header className="header">
+                    <a href="https://wex.nz/" target="_blank" className="header__logo" alt="WEX.nz Exchange">
+                        <img className="header__logo-img" src="/images/wex-logo.png"/>
+                    </a>
+                    {
+                        currentTicker && (
+                            <label {...currentMarketLabelProps}>
                                 {currentTicker.baseCurrency} / {currentTicker.quoteCurrency}
                             </label>
-                        </div>
-                    )
-                }
+                        )
+                    }
+                </header>
+
                 <CurrentTickerView ticker={currentTicker}/>
             </div>
         );

diff --git a/src/Popup/Screens/HomeViews/CurrentTickerView.tsx b/src/Popup/Screens/HomeViews/CurrentTickerView.tsx
@@ -19,34 +19,52 @@ class CurrentTickerView extends React.Component<CurrentTickerViewPropsInterface,
 
         return (
             <div className="current-ticker">
-                <label className="current-ticker__price">
-                    {Numeral(ticker.price).format(ticker.format)}
-                    <span className="current-ticker__price-currency">{ticker.quoteCurrency}</span>
-                </label>
-
-                <div className="current-ticker__market">
-                    <a
-                        href={`https://wex.nz/exchange/${ticker.key}`}
-                        className="current-ticker__market-link"
-                        target="_blank"
-                    >Market {ticker.baseCurrency}/{ticker.quoteCurrency}</a>
+                <div className="current-ticker__bugged">
+                    <label className="current-ticker__price">
+                        {Numeral(ticker.price).format(ticker.format)}
+                        <span className="current-ticker__price-currency">{ticker.quoteCurrency}</span>
+                    </label>
+
+                    <div className="current-ticker__market">
+                        <a
+                            href={`https://wex.nz/exchange/${ticker.key}`}
+                            className="current-ticker__market-link"
+                            target="_blank"
+                        >Market {ticker.baseCurrency}/{ticker.quoteCurrency}</a>
+                    </div>
                 </div>
 
-                <div className="current-ticker__title">Volume 24h</div>
-
-                <label className="current-ticker__vol">
-                    <span className="current-ticker__vol-currency">{ticker.baseCurrency}</span>
-                    <span className="current-ticker__vol-value">
-                        {Numeral(ticker.volume_base).format("0,0.[00]")}
-                    </span>
-                </label>
-
-                <label className="current-ticker__vol">
-                    <span className="current-ticker__vol-currency">{ticker.quoteCurrency}</span>
-                    <span className="current-ticker__vol-value">
-                        {Numeral(ticker.volume_quote).format("0,0.[00]")}
-                    </span>
-                </label>
+                <div className="current-ticker__info-container">
+                    <label className="current-ticker__info">
+                        <span className="current-ticker__info-label">Volume {ticker.baseCurrency}</span>
+                        <span className="current-ticker__info-value">
+                            {Numeral(ticker.volume_base).format("0,0.[00]")}
+                        </span>
+                    </label>
+
+                    <label className="current-ticker__info">
+                        <span className="current-ticker__info-label">Volume {ticker.quoteCurrency}</span>
+                        <span className="current-ticker__info-value">
+                            {Numeral(ticker.volume_quote).format("0,0.[00]")}
+                        </span>
+                    </label>
+
+
+
+                    <label className="current-ticker__info">
+                        <span className="current-ticker__info-label">Low price</span>
+                        <span className="current-ticker__info-value">
+                            {Numeral(ticker.OHLC.low).format("0,0.[00]")}
+                        </span>
+                    </label>
+
+                    <label className="current-ticker__info">
+                        <span className="current-ticker__info-label">High price</span>
+                        <span className="current-ticker__info-value">
+                            {Numeral(ticker.OHLC.high).format("0,0.[00]")}
+                        </span>
+                    </label>
+                </div>
             </div>
         );
     }

diff --git a/src/Style/parts/header.scss b/src/Style/parts/header.scss
@@ -0,0 +1,42 @@
+.header {
+    padding: 0 10px;
+    height: 50px;
+    background: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    border-bottom: 1px solid $color-alto;
+
+    &__logo {
+        display: block;
+        &-img {
+            display: block;
+            height: 21px;
+        }
+    }
+
+    &__current-market {
+        display: block;
+        cursor: pointer;
+        padding: 0 22px 0 8px;
+        border-radius: 4px;
+        font-size: 14px;
+        color: $color-shuttle-gray;
+
+        &:after {
+            border-style: solid;
+            border-color: $color-shuttle-gray;
+            border-width: 1px 1px 0 0;
+            content: '';
+            transform: rotate(135deg);
+            display: block;
+            height: 4px;
+            width: 4px;
+            margin-top: -4px;
+            position: absolute;
+            right: 8px;
+            top: 50%;
+        }
+    }
+}
diff --git a/src/Style/popup.scss b/src/Style/popup.scss
@@ -9,14 +9,16 @@ html {
 
 body {
     width: 300px;
-    height: 200px;
+    height: 255px;
     overflow: hidden;
     font-size: 16px;
     background: white;
-    color: rgb(38, 38, 38);
+    color: $color-dark-gray;
     font-family: $font;
 }
 
+@import "parts/header";
+
 .created-by {
     display: none;
     position: fixed;
@@ -48,4 +50,8 @@ body {
     letter-spacing: 0.8px;
 }
 
+.application {
+    padding: 0;
+}
+
 @import "screens/home";