Commit 750b9045 authored by Amaury Martiny's avatar Amaury Martiny
Browse files

Change short/long addresses display

parent 66c67ff5
......@@ -96,6 +96,7 @@ class AccountsList extends Component {
? accountsInfo[address].name
: '(No name)')
}
shortAddress
/>
</li>
))
......
.account {
display: flex;
&.-header {
.account_address {
font-size: 0.6rem;
}
}
.account_avatar {
width: (ms(0) * 1.3) + 1rem;
height: (ms(0) * 1.3) + 1rem;
......@@ -38,7 +44,7 @@
.account_address {
font-family: $mono;
color: $grey;
font-size: ms(-2) * 0.9; // 0.9 is ugly here
font-size: ms(-2);
line-height: ms(-2) * 1.3;
}
}
......@@ -32,7 +32,7 @@
padding: 0.25rem 0.5rem 0.175rem;
display: inline-block;
font-size: ms(0);
line-height: ms(0) * 1.3;
line-height: ms(0) * 0.8;
color: rgba($black, 0.675);
font-weight: 500;
}
......
......@@ -4,39 +4,35 @@
// SPDX-License-Identifier: BSD-3-Clause
import React from 'react';
import Blockies from 'react-blockies';
import PropTypes from 'prop-types';
import Address from './Address';
import Avatar from './Avatar';
import Card from '../Card';
import Placeholder from '../Placeholder';
import Information from './Information';
import Name from './Name';
const AccountCard = ({ address, animate, name, ...otherProps }) => (
const AccountCard = ({ address, name, shortAddress, ...otherProps }) => (
<Card {...otherProps}>
<div className='account'>
<div className='account_avatar'>
{address ? (
<Blockies seed={address.toLowerCase()} />
) : (
<Placeholder animate={animate} height={36} width={36} />
)}
</div>
<div className='account_information'>
{name ? (
<div className='account_name'>{name}</div>
) : (
<Placeholder animate={animate} height={18} width={100} />
)}
<div className='account_address'>
{address || <Placeholder animate={animate} height={12} width={150} />}
</div>
</div>
<Avatar address={address} />
<Information>
<Name name={name} />
<Address address={address} short={shortAddress} />
</Information>
</div>
</Card>
);
AccountCard.Address = Address;
AccountCard.Avatar = Avatar;
AccountCard.Information = Information;
AccountCard.Name = Name;
AccountCard.propTypes = {
address: PropTypes.string,
name: PropTypes.string
name: PropTypes.string,
shortAddress: PropTypes.bool
};
export default AccountCard;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import React from 'react';
import PropTypes from 'prop-types';
import AddressShort from '../../AddressShort';
import Placeholder from '../../Placeholder';
const Address = ({ address, short, ...otherProps }) => (
<div className='account_address' {...otherProps}>
{address ? (
short ? (
<AddressShort address={address} />
) : (
address
)
) : (
<Placeholder height={18} width={100} />
)}
</div>
);
Address.defaultProps = {
short: false
};
Address.propTypes = {
name: PropTypes.string,
short: PropTypes.bool
};
export default Address;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import Address from './Address';
export default Address;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import React from 'react';
import Blockies from 'react-blockies';
import PropTypes from 'prop-types';
import Placeholder from '../../Placeholder';
const Avatar = ({ address, ...otherProps }) => (
<div className='account_avatar' {...otherProps}>
{address ? (
<Blockies seed={address.toLowerCase()} />
) : (
<Placeholder height={36} width={36} />
)}
</div>
);
Avatar.propTypes = {
address: PropTypes.string
};
export default Avatar;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import Avatar from './Avatar';
export default Avatar;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import React from 'react';
import PropTypes from 'prop-types';
const Information = ({ children, ...otherProps }) => (
<div className='account_information' {...otherProps}>
{children}
</div>
);
Information.propTypes = {
children: PropTypes.node
};
export default Information;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import Information from './Information';
export default Information;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import React from 'react';
import PropTypes from 'prop-types';
import Placeholder from '../../Placeholder';
const Name = ({ name, ...otherProps }) => (
<div className='account_name' {...otherProps}>
{name || <Placeholder height={18} width={100} />}
</div>
);
Name.propTypes = {
name: PropTypes.string
};
export default Name;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import Name from './Name';
export default Name;
......@@ -11,11 +11,11 @@ import ClickToCopy from '../ClickToCopy';
import Header from '../Header';
const NormalContainer = ({ children }) => (
<h1 className='account'>{children}</h1>
<h1 className='account -header'>{children}</h1>
);
const CopyContainer = ({ address, children, ...otherProps }) => (
<ClickToCopy label='Copy address' textToCopy={address} {...otherProps}>
<a className='account'>{children}</a>
<a className='account -header'>{children}</a>
</ClickToCopy>
);
......@@ -30,10 +30,8 @@ const AccountHeader = ({ address, copyAddress, name, ...otherProps }) => {
name && (
<Container address={address}>
<Blockies seed={address.toLowerCase()} scale={2} size={8} />{' '}
{name}{' '}
<span className='account_address'>
{address.slice(0, 4)}..{address.slice(-4)}
</span>
{name} <br />
<span className='account_address'>{address}</span>
</Container>
)
}
......
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import React from 'react';
import PropTypes from 'prop-types';
const AddressShort = ({ address, as: T = 'span', ...otherProps }) => (
<T {...otherProps}>
{address.slice(0, 4)}..{address.slice(-4)}
</T>
);
AddressShort.propTypes = {
address: PropTypes.string.isRequired
};
export default AddressShort;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import AddressShort from './AddressShort';
export default AddressShort;
......@@ -5,6 +5,7 @@
import AccountCard from './AccountCard';
import AccountHeader from './AccountHeader';
import AddressShort from './AddressShort';
import Card from './Card';
import FormField from './FormField';
import Header from './Header';
......@@ -14,6 +15,7 @@ import TokenCard from './TokenCard';
export {
AccountCard,
AccountHeader,
AddressShort,
Card,
FormField,
Header,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment