arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-12 09:00:58 +00:00
Code Issues Releases Wiki Activity

Style qr code, add label

Browse Source
This commit is contained in:
Vladimir Volek 2018-09-24 17:00:11 +02:00
parent 0ef3672a54
commit a02b9883da
1 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/Wallet/views/AccountReceive/index.js
View File

@ -20,6 +20,11 @@ const Wrapper = styled.div`
padding-top: 20px; padding-top: 20px;
`; `;
const Label = styled.div`
padding: 25px 0 5px 0;
color: ${colors.TEXT_SECONDARY};
`;
const StyledH2 = styled(H2)` const StyledH2 = styled(H2)`
padding: 20px 48px; padding: 20px 48px;
`; `;
@ -31,6 +36,12 @@ const AddressWrapper = styled.div`
flex-direction: ${props => (props.isShowingQrCode ? 'column' : 'row')}; flex-direction: ${props => (props.isShowingQrCode ? 'column' : 'row')};
`; `;
const StyledQRCode = styled(QRCode)`
padding: 15px;
margin-top: 0 25px;
border: 1px solid ${colors.BODY};
`;
const ValueWrapper = styled.div` const ValueWrapper = styled.div`
font-size: ${FONT_SIZE.SMALL}; font-size: ${FONT_SIZE.SMALL};
font-weight: ${FONT_WEIGHT.SMALLEST}; font-weight: ${FONT_WEIGHT.SMALLEST};
@ -111,11 +122,6 @@ const EyeButton = styled(Button)`
top: 3px; top: 3px;
`; `;
const qrCodeStyle = {
width: 256,
margin: '20px auto',
};
const AccountReceive = (props: Props) => { const AccountReceive = (props: Props) => {
const device = props.wallet.selectedDevice; const device = props.wallet.selectedDevice;
const { const {
@ -182,19 +188,23 @@ const AccountReceive = (props: Props) => {
<ValueWrapper <ValueWrapper
isHidden={isAddressHidden} isHidden={isAddressHidden}
isVerifying={isAddressVerifying} isVerifying={isAddressVerifying}
>{address} >
{address}
</ValueWrapper> </ValueWrapper>
{isAddressVerifying && ( {isAddressVerifying && (
<AddressInfoText>{account.network} account #{account.index + 1}</AddressInfoText> <AddressInfoText>{account.network} account #{account.index + 1}</AddressInfoText>
)} )}
{(addressVerified || addressUnverified) && ( {(addressVerified || addressUnverified) && (
<QRCode <React.Fragment>
bgColor="#FFFFFF" <Label>QR code</Label>
fgColor="#000000" <StyledQRCode
level="Q" bgColor="#FFFFFF"
style={qrCodeStyle} fgColor="#000000"
value={account.address} level="Q"
/> style={{ width: 150 }}
value={account.address}
/>
</React.Fragment>
)} )}
{!(addressVerified || addressUnverified) && ( {!(addressVerified || addressUnverified) && (
<ShowAddressButton <ShowAddressButton