mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
updated account list based on new designs
This commit is contained in:
parent
e89350b19f
commit
cb97517b26
@ -877,6 +877,12 @@
|
|||||||
"selectAnAddress": {
|
"selectAnAddress": {
|
||||||
"message": "Select an Address"
|
"message": "Select an Address"
|
||||||
},
|
},
|
||||||
|
"selectAnAccount": {
|
||||||
|
"message": "Select an Account"
|
||||||
|
},
|
||||||
|
"selectAnAccountHelp": {
|
||||||
|
"message": "These are the accounts available in your hardware wallet. Select the one you’d like to use in MetaMask."
|
||||||
|
},
|
||||||
"sendTokensAnywhere": {
|
"sendTokensAnywhere": {
|
||||||
"message": "Send Tokens to anyone with an Ethereum account"
|
"message": "Send Tokens to anyone with an Ethereum account"
|
||||||
},
|
},
|
||||||
|
@ -8,16 +8,20 @@ class AccountList extends Component {
|
|||||||
super(props)
|
super(props)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderHeader () {
|
||||||
|
return (
|
||||||
|
h('div.hw-connect', [
|
||||||
|
h('h3.hw-connect__title', {}, this.context.t('selectAnAccount')),
|
||||||
|
h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')),
|
||||||
|
])
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
renderAccounts () {
|
renderAccounts () {
|
||||||
return h('div.hw-account-list', [
|
return h('div.hw-account-list', [
|
||||||
h('div.hw-account-list__title_wrapper', [
|
|
||||||
h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]),
|
|
||||||
h('div.hw-account-list__device', {}, ['Trezor - ETH']),
|
|
||||||
]),
|
|
||||||
this.props.accounts.map((a, i) => {
|
this.props.accounts.map((a, i) => {
|
||||||
|
|
||||||
return h('div.hw-account-list__item', { key: a.address }, [
|
return h('div.hw-account-list__item', { key: a.address }, [
|
||||||
h('span.hw-account-list__item__index', a.index + 1),
|
|
||||||
h('div.hw-account-list__item__radio', [
|
h('div.hw-account-list__item__radio', [
|
||||||
h('input', {
|
h('input', {
|
||||||
type: 'radio',
|
type: 'radio',
|
||||||
@ -32,10 +36,12 @@ class AccountList extends Component {
|
|||||||
{
|
{
|
||||||
htmlFor: `address-${i}`,
|
htmlFor: `address-${i}`,
|
||||||
},
|
},
|
||||||
`${a.address.slice(0, 4)}...${a.address.slice(-4)}`
|
[
|
||||||
),
|
h('span.hw-account-list__item__index', a.index + 1),
|
||||||
|
`${a.address.slice(0, 4)}...${a.address.slice(-4)}`,
|
||||||
|
h('span.hw-account-list__item__balance', `${a.balance}`),
|
||||||
|
]),
|
||||||
]),
|
]),
|
||||||
h('span.hw-account-list__item__balance', `${a.balance}`),
|
|
||||||
h(
|
h(
|
||||||
'a.hw-account-list__item__link',
|
'a.hw-account-list__item__link',
|
||||||
{
|
{
|
||||||
@ -71,9 +77,15 @@ class AccountList extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
renderButtons () {
|
renderButtons () {
|
||||||
return h('div.new-account-create-form__buttons', {}, [
|
const disabled = this.props.selectedAccount === null
|
||||||
|
const buttonProps = {}
|
||||||
|
if (disabled) {
|
||||||
|
buttonProps.disabled = true
|
||||||
|
}
|
||||||
|
|
||||||
|
return h('div.new-account-connect-form__buttons', {}, [
|
||||||
h(
|
h(
|
||||||
'button.btn-default.btn--large.new-account-create-form__button',
|
'button.btn-default.btn--large.new-account-connect-form__button',
|
||||||
{
|
{
|
||||||
onClick: this.props.onCancel.bind(this),
|
onClick: this.props.onCancel.bind(this),
|
||||||
},
|
},
|
||||||
@ -81,9 +93,10 @@ class AccountList extends Component {
|
|||||||
),
|
),
|
||||||
|
|
||||||
h(
|
h(
|
||||||
`button.btn-primary.btn--large.new-account-create-form__button ${this.props.selectedAccount === null ? '.btn-primary--disabled' : ''}`,
|
`button.btn-primary.btn--large.new-account-connect-form__button ${disabled ? '.btn-primary--disabled' : ''}`,
|
||||||
{
|
{
|
||||||
onClick: this.props.onUnlockAccount.bind(this),
|
onClick: this.props.onUnlockAccount.bind(this),
|
||||||
|
...buttonProps,
|
||||||
},
|
},
|
||||||
[this.context.t('unlock')]
|
[this.context.t('unlock')]
|
||||||
),
|
),
|
||||||
@ -99,7 +112,8 @@ class AccountList extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
return h('div', {}, [
|
return h('div.new-account-connect-form', {}, [
|
||||||
|
this.renderHeader(),
|
||||||
this.renderAccounts(),
|
this.renderAccounts(),
|
||||||
this.renderPagination(),
|
this.renderPagination(),
|
||||||
this.renderButtons(),
|
this.renderButtons(),
|
||||||
|
@ -29,7 +29,7 @@ class ConnectScreen extends Component {
|
|||||||
|
|
||||||
renderConnectScreen () {
|
renderConnectScreen () {
|
||||||
return (
|
return (
|
||||||
h('div', {}, [
|
h('div.new-account-connect-form', {}, [
|
||||||
h('div.hw-connect', [
|
h('div.hw-connect', [
|
||||||
h('h3.hw-connect__title', {}, this.context.t('trezorHardwareWallet')),
|
h('h3.hw-connect__title', {}, this.context.t('trezorHardwareWallet')),
|
||||||
h('p.hw-connect__msg', {}, this.context.t('connectToTrezorHelp')),
|
h('p.hw-connect__msg', {}, this.context.t('connectToTrezorHelp')),
|
||||||
|
@ -150,7 +150,7 @@ class ConnectHardwareForm extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
return h('div.new-account-create-form', [
|
return h('div', [
|
||||||
this.renderError(),
|
this.renderError(),
|
||||||
this.renderContent(),
|
this.renderContent(),
|
||||||
])
|
])
|
||||||
|
@ -157,13 +157,14 @@
|
|||||||
&__title {
|
&__title {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__msg {
|
&__msg {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #9b9b9b;
|
color: #9b9b9b;
|
||||||
margin-top: 15px;
|
margin-top: 10px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__link {
|
&__link {
|
||||||
@ -242,12 +243,16 @@
|
|||||||
|
|
||||||
&__item__index {
|
&__item__index {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 28px;
|
width: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item__radio {
|
&__item__radio {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin-right: 9px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item__label {
|
&__item__label {
|
||||||
@ -264,6 +269,7 @@
|
|||||||
|
|
||||||
&__item__link {
|
&__item__link {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
margin-top: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item__link img {
|
&__item__link img {
|
||||||
@ -278,11 +284,55 @@
|
|||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
||||||
&__button {
|
&__button {
|
||||||
height: 25px;
|
height: 19px;
|
||||||
flex: initial;
|
display: flex;
|
||||||
min-width: 90px;
|
width: 47px;
|
||||||
font-size: 12px;
|
color: #33a4e7;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
border: none;
|
||||||
|
min-width: 46px;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-left: 16px;
|
||||||
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-account-connect-form {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px 30px 0;
|
||||||
|
|
||||||
|
&__buttons {
|
||||||
|
margin-top: 39px;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
width: 150px;
|
||||||
|
min-width: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button.btn-primary {
|
||||||
|
background-color: #259DE5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button.btn-primary {
|
||||||
|
background-color: #259DE5;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button.btn-primary--disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hw-forget-device-container {
|
.hw-forget-device-container {
|
||||||
@ -337,8 +387,4 @@
|
|||||||
width: 150px;
|
width: 150px;
|
||||||
min-width: initial;
|
min-width: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__button.btn-primary--disabled {
|
|
||||||
cursor: 'not-allowed';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user