diff --git a/src/js/components/CoinLogo/index.js b/src/js/components/CoinLogo/index.js new file mode 100644 index 00000000..fc945cc1 --- /dev/null +++ b/src/js/components/CoinLogo/index.js @@ -0,0 +1,41 @@ +import React from 'react'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; +import { ICON_SIZE } from 'config/variables'; + +const Logo = styled.div` + height: ${ICON_SIZE.BASE}; + width: ${ICON_SIZE.BASE}; + margin-right: 5px; + background-repeat: no-repeat; + background-position: center; + background-size: auto ${ICON_SIZE.BASE}; + background-image: url('${props => props.coinImg}'); +`; + +const CoinLogo = ({ + className, coinNetwork, coinImg, +}) => { + let coinImgName = coinNetwork; + if (coinImgName === 'ethereum') { + coinImgName = 'eth'; + } else if (coinImgName === 'ethereum-classic') { + coinImgName = 'etc'; + } + const coinImgUrl = `../images/${coinImgName}-logo.png`; + + return ( + + ); +}; + +CoinLogo.propTypes = { + className: PropTypes.string, + coinImg: PropTypes.string, + coinNetwork: PropTypes.string.isRequired, +}; + +export default CoinLogo;