diff --git a/src/components/Order/OrderCta/OrderCta.scss b/src/components/Order/OrderCta/OrderCta.scss index a7ea395e7..2129748bd 100644 --- a/src/components/Order/OrderCta/OrderCta.scss +++ b/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; diff --git a/src/components/Order/OrderMain/OrderState/OrderState.scss b/src/components/Order/OrderMain/OrderState/OrderState.scss index ac5a69a20..a333bedca 100644 --- a/src/components/Order/OrderMain/OrderState/OrderState.scss +++ b/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; diff --git a/src/components/Pair/Pair.js b/src/components/Pair/Pair.js index 437933d21..20790645f 100644 --- a/src/components/Pair/Pair.js +++ b/src/components/Pair/Pair.js @@ -1,43 +1,44 @@ 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 ( - -
+ +

Price Chart for {pair.toUpperCase()}

- +
@@ -45,7 +46,7 @@ const Pair = (props) => { {/* TODO API Access Widget */} ); -} +}; const StyledPairPage = styled.div` margin-bottom: 8rem; @@ -53,13 +54,9 @@ const StyledPairPage = styled.div` 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); diff --git a/src/components/WhiteLabel/SupportedAssets/index.js b/src/components/WhiteLabel/SupportedAssets/index.js index 767c31144..0dbd89ece 100644 --- a/src/components/WhiteLabel/SupportedAssets/index.js +++ b/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, ] + : availableAssetComponentList; + }; + + const assetComponentList = useMemo(() => ASSETS.reduce(getAvailableAssets, []), [ASSETS, coinsInfo]); return (

Supported Assets

- - {assets && assets.length && assets.map((asset, index) => )} - + {assetComponentList} - ) - -} + ); +}; -const Asset = ({asset}) => { - const { linkTo, name } = asset +const Asset = ({ asset }) => { + const { linkTo, name } = asset; return ( -
+
{name} {name}
-
- {name} -
+
{name}
- ) -} + ); +}; 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); diff --git a/src/css/_variables.scss b/src/css/_variables.scss index 0d3b65a37..003c55ce0 100644 --- a/src/css/_variables.scss +++ b/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);