feature/hidden inactive assets & styling adjustment

src/components/Order/OrderCta/OrderCta.scss

@@ -36,7 +36,7 @@
         border: 1px solid $green;
         background: $green;
         color: #fff;
-        box-shadow: 0 14px 26px -12px rgba(29, 182, 173, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(29, 182, 173, 0.2);
+        box-shadow: $btn-box-shadow;
       }
     }
   }
@@ -79,6 +79,7 @@
     margin: 0;
     padding: 6px 15px;
     font-size: 12px;
+
     color: $green;
     border: 1px solid $green;
     background-color: #fff;

src/components/Order/OrderMain/OrderState/OrderState.scss

@@ -75,26 +75,24 @@
 }
 
 .btn.btn.btn {
-  color: $green;
-  background-color: #fff;
-  border: 1px solid $green;
   padding: 8px 10px;
   margin: 10px 0;
   font-size: 14px;
   width: 100%;
   white-space: normal;
 
-  &:hover {
-    box-shadow: none;
-  }
-
+  color: $green;
+  background-color: #fff;
+  border: 1px solid $green;
+  
   &:focus,
   &:hover,
   &:active {
-    color: $green;
-    background-color: #fff;
-    border: 1px solid $green;
+    color: #fff;
+    background-color: $green;
+    box-shadow: $btn-box-shadow;
   }
+
 
   @media (min-width: $screen-sm-min) {
     margin: 10px;

src/components/Pair/Pair.js

@@ -1,65 +1,62 @@
 import React, { useEffect, useMemo } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import styled from '@emotion/styled'
+import styled from '@emotion/styled';
+import { isEmpty } from 'lodash';
 
 import { fetchCoinDetails, fetchPairs, changeOrderMode, selectCoin } from 'Actions';
 import Hero from './Hero/Hero';
 import Articles from './Articles/Articles';
 import PriceChart from './PriceChart';
 import RecentOrders from './RecentOrders/RecentOrders';
-import { useCurrencyAPI } from 'Components/api'
+import { useCurrencyAPI } from 'Components/api';
 
-const Pair = (props) => {
 
-  const {
-    fetchCoinDetails,
-    fetchPairs,
-    match
-  } = props
-  const { base, quote } = match.params
-  const pair = useMemo(() => `${quote}${base}`, [quote, base])
-  const selectedCoin = useMemo(() => ({
-    receive: base,
-    deposit: quote
-  }), [pair])
+const Pair = props => {
+  const { coinsInfo, fetchCoinDetails, fetchPairs, match } = props;
 
-  const baseCurrency = useCurrencyAPI(base)
-  const quoteCurrency = useCurrencyAPI(quote)
+  const { base, quote } = match.params;
+  const pair = useMemo(() => `${quote}${base}`, [quote, base]);
+  const selectedCoin = useMemo(
+    () => ({
+      receive: base,
+      deposit: quote,
+    }),
+    [pair]
+  );
+
+  const baseCurrency = useCurrencyAPI(base);
+  const quoteCurrency = useCurrencyAPI(quote);
 
   useEffect(() => {
-    fetchCoinDetails()
-    fetchPairs({base, quote})
-  }, [pair])
-  
+    isEmpty(coinsInfo) && fetchCoinDetails();
+    fetchPairs({ base, quote });
+  }, [pair]);
+
   return (
     <StyledPairPage>
-      <Hero {...props} selectedCoin={selectedCoin} {...{baseCurrency, quoteCurrency}} />
-      <div className='container'>
+      <Hero {...props} selectedCoin={selectedCoin} {...{ baseCurrency, quoteCurrency }} />
+      <div className="container">
         <h2>Price Chart for {pair.toUpperCase()}</h2>
-        <PriceChart pair={pair}/>
+        <PriceChart pair={pair} />
       </div>
       <RecentOrders {...props} pair={pair} />
       <Articles baseName={`coin-${base.toLowerCase()}`} quoteName={`coin-${quote.toLowerCase()}`} quote={quote} base={base} />
       {/* TODO Referral Program Widget */}
       {/* TODO API Access Widget */}
     </StyledPairPage>
   );
-}
+};
 
 const StyledPairPage = styled.div`
   margin-bottom: 8rem;
   > .container {
     margin-top: 8rem;
     margin-bottom: 8rem;
   }
-`
-
+`;
 
 const mapStateToProps = ({ orderMode, coinsInfo, selectedCoin }) => ({ orderMode, coinsInfo, selectedCoin });
 const mapDispatchToProps = dispatch => bindActionCreators({ fetchCoinDetails, fetchPairs, changeOrderMode, selectCoin }, dispatch);
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Pair);
+export default connect(mapStateToProps, mapDispatchToProps)(Pair);

src/components/WhiteLabel/SupportedAssets/index.js

@@ -1,50 +1,62 @@
-import React, { useState } from 'react'
-import styled from '@emotion/styled'
-import { NavLink } from 'react-router-dom'
-import * as icons from './icons'
+import React, { useEffect, useMemo } from 'react';
+import styled from '@emotion/styled';
+import { NavLink } from 'react-router-dom';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { isEmpty } from 'lodash';
 
-export const SupportedAssets = (props) => {
-  const [assets] = useState(ASSETS)
+import { fetchCoinDetails } from 'Actions';
+
+import * as icons from './icons';
+
+export const SupportedAssets = ({ coinsInfo, fetchCoinDetails }) => {
+  useEffect(() => {
+    isEmpty(coinsInfo) && fetchCoinDetails();
+  }, []);
+
+  const getAvailableAssets = (availableAssetComponentList, asset, index) => {
+    const coinInfo = coinsInfo.find(coin => coin.code === asset.name);
+    return coinInfo && coinInfo.has_enabled_pairs
+      ? [...availableAssetComponentList, <Asset asset={asset} key={`asset-${index}`} />]
+      : availableAssetComponentList;
+  };
+
+  const assetComponentList = useMemo(() => ASSETS.reduce(getAvailableAssets, []), [ASSETS, coinsInfo]);
 
   return (
     <AssetsContainer>
       <h2>Supported Assets</h2>
-      <StyledAssets>
-          {assets && assets.length && assets.map((asset, index) => <Asset asset={asset} key={`asset-${index}`}></Asset>)}
-      </StyledAssets>
+      <StyledAssets>{assetComponentList}</StyledAssets>
     </AssetsContainer>
-  )
-
-}
+  );
+};
 
-const Asset = ({asset}) => {
-  const { linkTo, name } = asset
+const Asset = ({ asset }) => {
+  const { linkTo, name } = asset;
   return (
     <StyledAsset>
       <NavLink to={linkTo}>
-        <div className='art'>
+        <div className="art">
           <img src={icons[`${name.toLowerCase()}Coin`]} alt={name} />
           <span>{name}</span>
         </div>
-        <div className='name'>
-          {name}
-        </div>
+        <div className="name">{name}</div>
       </NavLink>
     </StyledAsset>
-  )
-}
+  );
+};
 
 const AssetsContainer = styled.div`
   > h2 {
     margin-bottom: 6rem;
   }
-`
+`;
 
 const StyledAssets = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   grid-gap: 2rem;
-`
+`;
 
 const StyledAsset = styled.div`
   a {
@@ -62,7 +74,7 @@ const StyledAsset = styled.div`
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      margin-bottom: .75rem; 
+      margin-bottom: 0.75rem;
       transition: all 680ms ease-out;
 
       img {
@@ -76,25 +88,22 @@ const StyledAsset = styled.div`
         display: block;
         text-align: center;
         font-weight: strong;
-        font-family: "Clan Offc Pro Medium";
+        font-family: 'Clan Offc Pro Medium';
         font-size: 18px;
-        margin-top: .5rem;
+        margin-top: 0.5rem;
       }
     }
 
-
     &:hover {
       text-decoration: none;
       filter: grayscale(23%);
-      
+
       img {
         transform: scale(1);
       }
     }
-
   }
-
-`
+`;
 
 const ASSETS = [
   { name: 'BCH', linkTo: '/convert/BCH-to-EUR' },
@@ -115,7 +124,10 @@ const ASSETS = [
   { name: 'USDT', linkTo: '/convert/USDT-to-EUR' },
   { name: 'XMR', linkTo: '/convert/XMR-to-EUR' },
   { name: 'XVG', linkTo: '/convert/XVG-to-EUR' },
-  { name: 'ZEC', linkTo: '/convert/ZEC-to-EUR' }
-]
+  { name: 'ZEC', linkTo: '/convert/ZEC-to-EUR' },
+];
+
+const mapStateToProps = ({ coinsInfo }) => ({ coinsInfo });
+const mapDispatchToProps = dispatch => bindActionCreators({ fetchCoinDetails }, dispatch);
 
-export default SupportedAssets
+export default connect(mapStateToProps, mapDispatchToProps)(SupportedAssets);

src/css/_variables.scss

@@ -7,3 +7,5 @@ $red: #e25656;
 
 $screen-lg-height: 800px;
 $screen-xl-height: 950px;
+
+$btn-box-shadow: 0 14px 26px -12px rgba(29, 182, 173, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(29, 182, 173, 0.2);