Rename components & flatten folder structure

- 'CoinLogo' is now 'CoinName'
- 'CoinLink' is now 'AsideRowCoin'
- 'ExternalCoinLink' is now 'AsideRowCoinExternal'
- 'WalletCoinLink' is now 'AsideRowCoinWallet'
pull/3/head
Vasek Mlejnsky 6 years ago
parent 9d55216bf9
commit bb94eb7ed0

@ -7,7 +7,7 @@ import colors from 'config/colors';
import { FONT_SIZE, TRANSITION_TIME } from 'config/variables'; import { FONT_SIZE, TRANSITION_TIME } from 'config/variables';
import { coinProp } from './common'; import { coinProp } from './common';
import CoinLogo from './CoinLogo'; import CoinName from './CoinName';
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex; display: flex;
@ -26,9 +26,9 @@ const Wrapper = styled.div`
} }
`; `;
const CoinLink = ({ coin, iconRight }) => ( const AsideRowCoin = ({ coin, iconRight }) => (
<Wrapper> <Wrapper>
<CoinLogo <CoinName
coinImg={coin.img} coinImg={coin.img}
text={coin.name} text={coin.name}
/> />
@ -41,7 +41,7 @@ const CoinLink = ({ coin, iconRight }) => (
</Wrapper> </Wrapper>
); );
CoinLink.propTypes = { AsideRowCoin.propTypes = {
...coinProp, ...coinProp,
iconRight: PropTypes.shape({ iconRight: PropTypes.shape({
type: PropTypes.string.isRequired, type: PropTypes.string.isRequired,
@ -49,4 +49,4 @@ CoinLink.propTypes = {
}), }),
}; };
export default CoinLink; export default AsideRowCoin;

@ -6,15 +6,15 @@ import ICONS from 'constants/icons';
import colors from 'config/colors'; import colors from 'config/colors';
import { coinProp } from './common'; import { coinProp } from './common';
import CoinLink from './CoinLink'; import AsideRowCoin from './AsideRowCoin';
const A = styled.a` const A = styled.a`
display: block; display: block;
`; `;
const ExternalCoinLink = ({ coin, url }) => ( const AsideRowCoinExternal = ({ coin, url }) => (
<A href={url}> <A href={url}>
<CoinLink <AsideRowCoin
coin={coin} coin={coin}
iconRight={{ iconRight={{
type: ICONS.REDIRECT, type: ICONS.REDIRECT,
@ -24,9 +24,9 @@ const ExternalCoinLink = ({ coin, url }) => (
</A> </A>
); );
ExternalCoinLink.propTypes = { AsideRowCoinExternal.propTypes = {
...coinProp, ...coinProp,
url: PropTypes.string, url: PropTypes.string,
}; };
export default ExternalCoinLink; export default AsideRowCoinExternal;

@ -4,21 +4,21 @@ import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { coinProp } from './common'; import { coinProp } from './common';
import CoinLink from './CoinLink'; import AsideRowCoin from './AsideRowCoin';
const Wrapper = styled(NavLink)` const Wrapper = styled(NavLink)`
display: block; display: block;
`; `;
const WalletCoinLink = ({ coin, url }) => ( const AsideRowCoinWallet = ({ coin, url }) => (
<Wrapper to={url}> <Wrapper to={url}>
<CoinLink coin={coin}/> <AsideRowCoin coin={coin}/>
</Wrapper> </Wrapper>
); );
WalletCoinLink.propTypes = { AsideRowCoinWallet.propTypes = {
...coinProp, ...coinProp,
url: PropTypes.string.isRequired, url: PropTypes.string.isRequired,
}; };
export default WalletCoinLink; export default AsideRowCoinWallet;

@ -13,7 +13,6 @@ const Wrapper = styled.div`
p { p {
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
} }
`; `;
const Logo = styled.div` const Logo = styled.div`
@ -27,7 +26,7 @@ const Logo = styled.div`
background-image: url('images/${props => props.coinImg}-logo.png'); background-image: url('images/${props => props.coinImg}-logo.png');
`; `;
const CoinLogo = ({ coinImg, text }) => ( const CoinName = ({ coinImg, text }) => (
<Wrapper> <Wrapper>
<Logo <Logo
coinImg={coinImg} coinImg={coinImg}
@ -36,9 +35,9 @@ const CoinLogo = ({ coinImg, text }) => (
</Wrapper> </Wrapper>
); );
CoinLogo.propTypes = { CoinName.propTypes = {
coinImg: PropTypes.string.isRequired, coinImg: PropTypes.string.isRequired,
text: PropTypes.string.isRequired, text: PropTypes.string.isRequired,
}; };
export default CoinLogo export default CoinName

@ -4,7 +4,8 @@ import styled from 'styled-components';
import React from 'react'; import React from 'react';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { ExternalCoinLink, WalletCoinLink } from './CoinLink/'; import AsideRowCoinWallet from './AsideRowCoinWallet';
import AsideRowCoinExternal from './AsideRowCoinExternal';
import AsideDivider from './AsideDivider'; import AsideDivider from './AsideDivider';
import type { TrezorDevice } from 'flowtype'; import type { TrezorDevice } from 'flowtype';
@ -41,7 +42,7 @@ const CoinSelection = (props: Props): React$Element<string> => {
} }
return ( return (
<WalletCoinLink <AsideRowCoinWallet
key={item.network} key={item.network}
coin={{ coin={{
img: coinImg, img: coinImg,
@ -60,42 +61,42 @@ const CoinSelection = (props: Props): React$Element<string> => {
textRight={'(You will be redirected)'} textRight={'(You will be redirected)'}
/> />
<ExternalCoinLink <AsideRowCoinExternal
coin={{ coin={{
img: 'btc', img: 'btc',
name: 'Bitcoin', name: 'Bitcoin',
}} }}
url={'https://wallet.trezor.io/#/coin/ltc'} url={'https://wallet.trezor.io/#/coin/ltc'}
/> />
<ExternalCoinLink <AsideRowCoinExternal
coin={{ coin={{
img: 'ltc', img: 'ltc',
name: 'Litecoin', name: 'Litecoin',
}} }}
url={'https://wallet.trezor.io/#/coin/ltc'} url={'https://wallet.trezor.io/#/coin/ltc'}
/> />
<ExternalCoinLink <AsideRowCoinExternal
coin={{ coin={{
img: 'bch', img: 'bch',
name: 'Bitcoin Cash', name: 'Bitcoin Cash',
}} }}
url={'https://wallet.trezor.io/#/coin/bch'} url={'https://wallet.trezor.io/#/coin/bch'}
/> />
<ExternalCoinLink <AsideRowCoinExternal
coin={{ coin={{
img: 'btg', img: 'btg',
name: 'Bitcoin Gold', name: 'Bitcoin Gold',
}} }}
url={'https://wallet.trezor.io/#/coin/btg'} url={'https://wallet.trezor.io/#/coin/btg'}
/> />
<ExternalCoinLink <AsideRowCoinExternal
coin={{ coin={{
img: 'Dash', img: 'Dash',
name: 'Dash', name: 'Dash',
}} }}
url={'https://wallet.trezor.io/#/coin/dash'} url={'https://wallet.trezor.io/#/coin/dash'}
/> />
<ExternalCoinLink <AsideRowCoinExternal
coin={{ coin={{
img: 'zec', img: 'zec',
name: 'Zcash', name: 'Zcash',

Loading…
Cancel
Save