mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-25 00:18:07 +00:00
Unified paddings in wallet views
This commit is contained in:
parent
c4fb59af2a
commit
ac765c3966
@ -77,6 +77,7 @@ const Body = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: 40px 35px 20px 35px;
|
||||
`;
|
||||
|
||||
const Wallet = (props: WalletContainerProps) => (
|
||||
|
@ -16,22 +16,17 @@ import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
|
||||
|
||||
import type { Props } from './Container';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
padding-top: 20px;
|
||||
`;
|
||||
const Wrapper = styled.div``;
|
||||
|
||||
const Label = styled.div`
|
||||
padding: 25px 0 5px 0;
|
||||
color: ${colors.TEXT_SECONDARY};
|
||||
`;
|
||||
|
||||
const StyledH2 = styled(H2)`
|
||||
padding: 20px 48px;
|
||||
`;
|
||||
const AddressWrapper = styled.div`
|
||||
position: relative;
|
||||
padding: 0px 48px;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: ${props => (props.isShowingQrCode ? 'column' : 'row')};
|
||||
`;
|
||||
@ -148,7 +143,7 @@ const AccountReceive = (props: Props) => {
|
||||
return (
|
||||
<SelectedAccount {...props}>
|
||||
<Wrapper>
|
||||
<StyledH2>Receive Ethereum or tokens</StyledH2>
|
||||
<H2>Receive Ethereum or tokens</H2>
|
||||
<AddressWrapper
|
||||
isShowingQrCode={addressVerified || addressUnverified}
|
||||
>
|
@ -23,16 +23,10 @@ import type { Props } from './Container';
|
||||
// and put it inside config/variables.js
|
||||
const SmallScreenWidth = '850px';
|
||||
|
||||
const Wrapper = styled.section`
|
||||
padding: 20px 48px;
|
||||
`;
|
||||
|
||||
const StyledH2 = styled(H2)`
|
||||
padding: 20px 0;
|
||||
`;
|
||||
const Wrapper = styled.section``;
|
||||
|
||||
const InputRow = styled.div`
|
||||
margin-bottom: 20px;
|
||||
margin: 20px 0;
|
||||
`;
|
||||
|
||||
const SetMaxAmountButton = styled(Button)`
|
||||
@ -237,7 +231,7 @@ const AccountSend = (props: Props) => {
|
||||
return (
|
||||
<SelectedAccount {...props}>
|
||||
<Wrapper>
|
||||
<StyledH2>Send Ethereum or tokens</StyledH2>
|
||||
<H2>Send Ethereum or tokens</H2>
|
||||
<InputRow>
|
||||
<Input
|
||||
state={getAddressInputState(address, errors.address, warnings.address)}
|
@ -11,7 +11,6 @@ const Wrapper = styled.div`
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
background: ${colors.WHITE};
|
||||
padding: 50px;
|
||||
`;
|
||||
|
||||
const StyledH2 = styled(H2)`
|
@ -62,9 +62,7 @@ class AddedToken extends Component<> {
|
||||
const textColor = new ColorHash();
|
||||
|
||||
return (
|
||||
<TokenWrapper
|
||||
key={this.props.token.symbol}
|
||||
>
|
||||
<TokenWrapper key={this.props.token.symbol}>
|
||||
<TokenIcon
|
||||
textColor={textColor.hex(this.props.token.address)}
|
||||
backgroundColor={bgColor.hex(this.props.token.address)}
|
162
src/views/Wallet/views/Account/Summary/index.js
Normal file
162
src/views/Wallet/views/Account/Summary/index.js
Normal file
@ -0,0 +1,162 @@
|
||||
/* @flow */
|
||||
import styled from 'styled-components';
|
||||
import React from 'react';
|
||||
import { H2 } from 'components/Heading';
|
||||
import BigNumber from 'bignumber.js';
|
||||
import Icon from 'components/Icon';
|
||||
import { AsyncSelect } from 'components/Select';
|
||||
import ICONS from 'config/icons';
|
||||
import colors from 'config/colors';
|
||||
import Tooltip from 'components/Tooltip';
|
||||
|
||||
import CoinLogo from 'components/images/CoinLogo';
|
||||
import * as stateUtils from 'reducers/utils';
|
||||
import SelectedAccount from 'views/Wallet/components/SelectedAccount';
|
||||
import Link from 'components/Link';
|
||||
import AccountBalance from './components/Balance';
|
||||
import AddedToken from './components/Token';
|
||||
|
||||
import type { Props } from './Container';
|
||||
|
||||
const AccountHeading = styled.div`
|
||||
padding: 0 0 30px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const H2Wrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
`;
|
||||
|
||||
const StyledTooltip = styled(Tooltip)`
|
||||
position: relative;
|
||||
top: 2px;
|
||||
`;
|
||||
|
||||
const AccountName = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const StyledCoinLogo = styled(CoinLogo)`
|
||||
margin-right: 10px;
|
||||
`;
|
||||
|
||||
const StyledIcon = styled(Icon)`
|
||||
position: relative;
|
||||
top: -1px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
const AsyncSelectWrapper = styled.div`
|
||||
padding-bottom: 32px;
|
||||
`;
|
||||
|
||||
const AddedTokensWrapper = styled.div``;
|
||||
|
||||
const AccountSummary = (props: Props) => {
|
||||
const device = props.wallet.selectedDevice;
|
||||
const {
|
||||
account,
|
||||
network,
|
||||
tokens,
|
||||
pending,
|
||||
} = props.selectedAccount;
|
||||
|
||||
// flow
|
||||
if (!device || !account || !network) return <SelectedAccount {...props} />;
|
||||
|
||||
const explorerLink: string = `${network.explorer.address}${account.address}`;
|
||||
const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);
|
||||
const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10);
|
||||
|
||||
return (
|
||||
<SelectedAccount {...props}>
|
||||
<AccountHeading>
|
||||
<AccountName>
|
||||
<StyledCoinLogo coinNetwork={account.network} />
|
||||
<H2>Account #{parseInt(account.index, 10) + 1}</H2>
|
||||
</AccountName>
|
||||
<Link
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
href={explorerLink}
|
||||
isGray
|
||||
>See full transaction history
|
||||
</Link>
|
||||
</AccountHeading>
|
||||
<AccountBalance
|
||||
coin={network}
|
||||
summary={props.summary}
|
||||
balance={balance}
|
||||
network={network.network}
|
||||
fiat={props.fiat}
|
||||
localStorage={props.localStorage}
|
||||
/>
|
||||
<H2Wrapper>
|
||||
<H2>Tokens</H2>
|
||||
<StyledTooltip
|
||||
maxWidth={200}
|
||||
placement="top"
|
||||
content="Insert token name, symbol or address to be able to send it."
|
||||
>
|
||||
<StyledIcon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={24}
|
||||
/>
|
||||
</StyledTooltip>
|
||||
</H2Wrapper>
|
||||
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
|
||||
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
|
||||
|
||||
{/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */}
|
||||
{/* TODO: Input's box-shadow */}
|
||||
<AsyncSelectWrapper>
|
||||
<AsyncSelect
|
||||
isSearchable
|
||||
defaultOptions
|
||||
value={null}
|
||||
isMulti={false}
|
||||
placeholder="Search for the token"
|
||||
loadingMessage={() => 'Loading...'}
|
||||
noOptionsMessage={() => 'Token not found'}
|
||||
onChange={(token) => {
|
||||
const isAdded = tokens.find(t => t.symbol === token.symbol);
|
||||
if (!isAdded) {
|
||||
props.addToken(token, account);
|
||||
}
|
||||
}}
|
||||
loadOptions={input => props.loadTokens(input, account.network)}
|
||||
formatOptionLabel={(option) => {
|
||||
const isAdded = tokens.find(t => t.symbol === option.symbol);
|
||||
if (isAdded) {
|
||||
return `${option.name} (Already added)`;
|
||||
}
|
||||
return option.name;
|
||||
}}
|
||||
getOptionLabel={option => option.name}
|
||||
getOptionValue={option => option.symbol}
|
||||
/>
|
||||
</AsyncSelectWrapper>
|
||||
|
||||
<AddedTokensWrapper>
|
||||
{tokens.map(token => (
|
||||
<AddedToken
|
||||
key={token.symbol}
|
||||
token={token}
|
||||
pending={pending}
|
||||
removeToken={props.removeToken}
|
||||
/>
|
||||
))}
|
||||
</AddedTokensWrapper>
|
||||
</SelectedAccount>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccountSummary;
|
@ -1,170 +0,0 @@
|
||||
/* @flow */
|
||||
import styled from 'styled-components';
|
||||
import React from 'react';
|
||||
import { H2 } from 'components/Heading';
|
||||
import BigNumber from 'bignumber.js';
|
||||
import Icon from 'components/Icon';
|
||||
import { AsyncSelect } from 'components/Select';
|
||||
import ICONS from 'config/icons';
|
||||
import colors from 'config/colors';
|
||||
import Tooltip from 'components/Tooltip';
|
||||
|
||||
import CoinLogo from 'components/images/CoinLogo';
|
||||
import * as stateUtils from 'reducers/utils';
|
||||
import SelectedAccount from 'views/Wallet/components/SelectedAccount';
|
||||
import Link from 'components/Link';
|
||||
import AccountBalance from './components/AccountBalance';
|
||||
import AddedToken from './components/AddedToken';
|
||||
|
||||
import type { Props } from './Container';
|
||||
|
||||
const Content = styled.div`
|
||||
padding: 0 35px;
|
||||
`;
|
||||
|
||||
const AccountHeading = styled.div`
|
||||
padding: 30px 48px 30px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const H2Wrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
`;
|
||||
|
||||
const StyledTooltip = styled(Tooltip)`
|
||||
position: relative;
|
||||
top: 2px;
|
||||
`;
|
||||
|
||||
const AccountName = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const StyledCoinLogo = styled(CoinLogo)`
|
||||
margin-right: 10px;
|
||||
`;
|
||||
|
||||
const StyledIcon = styled(Icon)`
|
||||
position: relative;
|
||||
top: -1px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
const AsyncSelectWrapper = styled.div`
|
||||
padding-bottom: 32px;
|
||||
`;
|
||||
|
||||
const AddedTokensWrapper = styled.div``;
|
||||
|
||||
const AccountSummary = (props: Props) => {
|
||||
const device = props.wallet.selectedDevice;
|
||||
const {
|
||||
account,
|
||||
network,
|
||||
tokens,
|
||||
pending,
|
||||
} = props.selectedAccount;
|
||||
|
||||
// flow
|
||||
if (!device || !account || !network) return <SelectedAccount {...props} />;
|
||||
|
||||
const explorerLink: string = `${network.explorer.address}${account.address}`;
|
||||
const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);
|
||||
const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10);
|
||||
|
||||
return (
|
||||
<SelectedAccount {...props}>
|
||||
<Content>
|
||||
<AccountHeading>
|
||||
<AccountName>
|
||||
<StyledCoinLogo coinNetwork={account.network} />
|
||||
<H2>Account #{parseInt(account.index, 10) + 1}</H2>
|
||||
</AccountName>
|
||||
<Link
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
href={explorerLink}
|
||||
isGray
|
||||
>See full transaction history
|
||||
</Link>
|
||||
</AccountHeading>
|
||||
|
||||
<AccountBalance
|
||||
coin={network}
|
||||
summary={props.summary}
|
||||
balance={balance}
|
||||
network={network.network}
|
||||
fiat={props.fiat}
|
||||
localStorage={props.localStorage}
|
||||
/>
|
||||
|
||||
<H2Wrapper>
|
||||
<H2>Tokens</H2>
|
||||
<StyledTooltip
|
||||
maxWidth={200}
|
||||
placement="top"
|
||||
content="Insert token name, symbol or address to be able to send it."
|
||||
>
|
||||
<StyledIcon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={24}
|
||||
/>
|
||||
</StyledTooltip>
|
||||
</H2Wrapper>
|
||||
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
|
||||
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
|
||||
|
||||
{/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */}
|
||||
{/* TODO: Input's box-shadow */}
|
||||
<AsyncSelectWrapper>
|
||||
<AsyncSelect
|
||||
isSearchable
|
||||
defaultOptions
|
||||
value={null}
|
||||
isMulti={false}
|
||||
placeholder="Search for the token"
|
||||
loadingMessage={() => 'Loading...'}
|
||||
noOptionsMessage={() => 'Token not found'}
|
||||
onChange={(token) => {
|
||||
const isAdded = tokens.find(t => t.symbol === token.symbol);
|
||||
if (!isAdded) {
|
||||
props.addToken(token, account);
|
||||
}
|
||||
}}
|
||||
loadOptions={input => props.loadTokens(input, account.network)}
|
||||
formatOptionLabel={(option) => {
|
||||
const isAdded = tokens.find(t => t.symbol === option.symbol);
|
||||
if (isAdded) {
|
||||
return `${option.name} (Already added)`;
|
||||
}
|
||||
return option.name;
|
||||
}}
|
||||
getOptionLabel={option => option.name}
|
||||
getOptionValue={option => option.symbol}
|
||||
/>
|
||||
</AsyncSelectWrapper>
|
||||
|
||||
<AddedTokensWrapper>
|
||||
{tokens.map(token => (
|
||||
<AddedToken
|
||||
key={token.symbol}
|
||||
token={token}
|
||||
pending={pending}
|
||||
removeToken={props.removeToken}
|
||||
/>
|
||||
))}
|
||||
</AddedTokensWrapper>
|
||||
</Content>
|
||||
</SelectedAccount>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccountSummary;
|
@ -11,10 +11,10 @@ import LandingContainer from 'views/Landing/Container';
|
||||
|
||||
// wallet views
|
||||
import WalletContainer from 'views/Wallet';
|
||||
import AccountSummary from 'views/Wallet/views/AccountSummary/Container';
|
||||
import AccountSend from 'views/Wallet/views/AccountSend/Container';
|
||||
import AccountReceive from 'views/Wallet/views/AccountReceive/Container';
|
||||
import AccountSignVerify from 'views/Wallet/views/AccountSignVerify';
|
||||
import AccountSummary from 'views/Wallet/views/Account/Summary/Container';
|
||||
import AccountSend from 'views/Wallet/views/Account/Send/Container';
|
||||
import AccountReceive from 'views/Wallet/views/Account/Receive/Container';
|
||||
import AccountSignVerify from 'views/Wallet/views/Account/SignVerify';
|
||||
|
||||
import WalletDashboard from 'views/Wallet/views/Dashboard';
|
||||
import WalletDeviceSettings from 'views/Wallet/views/DeviceSettings';
|
||||
|
Loading…
Reference in New Issue
Block a user