1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-28 03:08:30 +00:00

Move 'RowCoin' to its own component

- 'RowCoin' is used in both 'AccountMenu' and 'CoinMenu'
This commit is contained in:
Vasek Mlejnsky 2018-08-17 11:49:04 +02:00
parent 8b511e7f0b
commit 27e3385b7d
5 changed files with 138 additions and 86 deletions

View File

@ -1,12 +1,13 @@
/* @flow */
import React, { components } from 'react';
import BigNumber from 'bignumber.js';
import colors from 'config/colors';
import Loader from 'components/LoaderCircle';
import PropTypes from 'prop-types';
import React from 'react';
import styled, { css } from 'styled-components';
import * as stateUtils from 'reducers/utils';
import Tooltip from 'rc-tooltip';
import ICONS from 'config/icons';
import { NavLink } from 'react-router-dom';
import { findDeviceAccounts } from 'reducers/AccountsReducer';
@ -14,8 +15,9 @@ import { FONT_SIZE, BORDER_WIDTH } from 'config/variables';
import type { Accounts } from 'flowtype';
import type { Props } from '../common';
import Row from '../Row';
import RowCoin from '../RowCoin';
const Text = styled.span`
font-size: ${FONT_SIZE.SMALLER};
@ -63,7 +65,6 @@ const RowAccount = ({
</RowAccountWrapper>
</NavLink>
);
RowAccount.propTypes = {
accountIndex: PropTypes.number.isRequired,
url: PropTypes.string.isRequired,
@ -183,12 +184,28 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
}
}
let backButton = null;
if (selectedCoin) {
let imgName = selectedCoin.network;
if (selectedCoin.network === 'ethereum') {
imgName = 'eth';
} else if (selectedCoin.network === 'ethereum-classic') {
imgName = 'etc';
}
const imgUrl = `../images/${imgName}-logo.png`;
backButton = (
<NavLink to={baseUrl} className={`back ${selectedCoin.network}`}>
<span className={selectedCoin.network}>{selectedCoin.name}</span>
<NavLink to={baseUrl}>
<RowCoin
coin={{
img: imgUrl,
name: selectedCoin.name,
}}
iconLeft={{
type: ICONS.ARROW_LEFT,
color: colors.TEXT_PRIMARY,
size: 20,
}}
/>
</NavLink>
);
}

View File

@ -1,88 +1,12 @@
/* @flow */
import coins from 'constants/coins';
import colors from 'config/colors';
import Icon from 'components/Icon';
import ICONS from 'config/icons';
import { NavLink } from 'react-router-dom';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import styled from 'styled-components';
import { FONT_SIZE, ICON_SIZE } from 'config/variables';
import { NavLink } from 'react-router-dom';
import Divider from '../Divider';
import Row from '../Row';
const CoinNameWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
`;
const Logo = styled.div`
height: ${ICON_SIZE.BASE};
width: ${ICON_SIZE.BASE};
margin-right: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: auto ${ICON_SIZE.BASE};
background-image: url('${props => props.coinImg}');
`;
const CoinName = ({
coinImg, text,
}) => (
<CoinNameWrapper>
<Logo
coinImg={coinImg}
/>
<p>{text}</p>
</CoinNameWrapper>
);
CoinName.propTypes = {
coinImg: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
};
const RowCoinWrapper = styled.div`
display: block;
height: 50px;
font-size: ${FONT_SIZE.BASE};
color: ${colors.TEXT_PRIMARY};
&:hover {
background-color: ${colors.GRAY_LIGHT};
}
`;
const RowCoin = ({
coin, icon,
}) => (
<RowCoinWrapper>
<Row>
<CoinName
coinImg={coin.img}
text={coin.name}
/>
{icon && (
<Icon
icon={icon.type}
size={27}
color={icon.color}
/>
)}
</Row>
</RowCoinWrapper>
);
RowCoin.propTypes = {
coin: PropTypes.shape({
img: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
}).isRequired,
icon: PropTypes.shape({
type: PropTypes.string.isRequired,
color: PropTypes.string.isRequired,
}),
};
import RowCoin from '../RowCoin';
class CoinMenu extends Component {
getBaseUrl() {
@ -136,9 +60,10 @@ class CoinMenu extends Component {
img: coin.image,
name: coin.coinName,
}}
icon={{
iconRight={{
type: ICONS.SKIP,
color: colors.TEXT_SECONDARY,
size: 27,
}}
/>
</a>

View File

@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
import { TRANSITION_TIME } from 'config/variables';
const Wrapper = styled.div`
padding: 16px 24px;
height: 100%;
display: flex;

View File

@ -0,0 +1,35 @@
import PropTypes from 'prop-types';
import React from 'react';
import styled from 'styled-components';
import { ICON_SIZE } from 'config/variables';
const CoinNameWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
`;
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 CoinName = ({
coinImg, text,
}) => (
<CoinNameWrapper>
{coinImg && <Logo coinImg={coinImg} />}
<p>{text}</p>
</CoinNameWrapper>
);
CoinName.propTypes = {
coinImg: PropTypes.string,
text: PropTypes.string.isRequired,
};
export default CoinName;

View File

@ -0,0 +1,76 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Icon from 'components/Icon';
import { FONT_SIZE } from 'config/variables';
import colors from 'config/colors';
import Row from '../Row';
import CoinName from './components/CoinName';
const RowCoinWrapper = styled.div`
padding: 16px 24px;
height: 50px;
display: block;
font-size: ${FONT_SIZE.BASE};
color: ${colors.TEXT_PRIMARY};
&:hover {
background-color: ${colors.GRAY_LIGHT};
}
`;
const Left = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
`;
const IconWrapper = styled.div`
margin-right: 10px;
`;
const RowCoin = ({
coin, iconLeft, iconRight,
}) => (
<RowCoinWrapper>
<Row>
<Left>
{iconLeft && (
<IconWrapper>
<Icon
icon={iconLeft.type}
size={iconLeft.size}
color={iconLeft.color}
/>
</IconWrapper>
)}
<CoinName
coinImg={coin.img}
text={coin.name}
/>
</Left>
{iconRight && (
<Icon
icon={iconRight.type}
size={iconRight.size}
color={iconRight.color}
/>
)}
</Row>
</RowCoinWrapper>
);
const iconShape = {
type: PropTypes.string.isRequired,
color: PropTypes.string.isRequired,
size: PropTypes.number.isRequired,
};
RowCoin.propTypes = {
coin: PropTypes.shape({
img: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
}).isRequired,
iconLeft: PropTypes.shape(iconShape),
iconRight: PropTypes.shape(iconShape),
};
export default RowCoin;