aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
Diffstat (limited to 'ui')
-rw-r--r--ui/app/components/send-token/index.js54
-rw-r--r--ui/app/components/send/currency-toggle.js19
-rw-r--r--ui/app/components/tx-list.js4
-rw-r--r--ui/app/css/itcss/components/buttons.scss18
-rw-r--r--ui/app/css/itcss/components/send.scss49
-rw-r--r--ui/app/css/itcss/generic/reset.scss1
-rw-r--r--ui/app/send.js2
7 files changed, 105 insertions, 42 deletions
diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js
index a49e559dc..985116409 100644
--- a/ui/app/components/send-token/index.js
+++ b/ui/app/components/send-token/index.js
@@ -23,16 +23,16 @@ function mapStateToProps (state) {
const addressBook = state.metamask.addressBook
const conversionRate = state.metamask.conversionRate
const currentBlockGasLimit = state.metamask.currentBlockGasLimit
- // const accounts = state.metamask.accounts
+ const accounts = state.metamask.accounts
// const network = state.metamask.network
const selectedTokenAddress = state.metamask.selectedTokenAddress
- // const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+ const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
// const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress)
// const identity = identities[selectedAddress]
return {
// sidebarOpen,
- // selectedAddress,
+ selectedAddress,
// checksumAddress,
selectedTokenAddress,
identities,
@@ -48,6 +48,7 @@ function mapStateToProps (state) {
function mapDispatchToProps (dispatch) {
return {
+ backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
// showSidebar: () => { dispatch(actions.showSidebar()) },
// hideSidebar: () => { dispatch(actions.hideSidebar()) },
// showModal: (payload) => { dispatch(actions.showModal(payload)) },
@@ -121,6 +122,7 @@ SendTokenScreen.prototype.renderAmountInput = function () {
h('span', ['Amount']),
h(CurrencyToggle, {
selectedCurrency,
+ currencies: [ symbol, 'USD' ],
onClick: currency => this.setState({ selectedCurrency: currency }),
}),
]),
@@ -178,7 +180,7 @@ SendTokenScreen.prototype.renderGasInput = function () {
}
SendTokenScreen.prototype.renderMemoInput = function () {
- return h('div.send-screen-input-wrapper', {}, [
+ return h('div.send-screen-input-wrapper', [
h('div', {}, ['Transaction memo (optional)']),
h(
'input.large-input.send-screen-input',
@@ -187,6 +189,19 @@ SendTokenScreen.prototype.renderMemoInput = function () {
])
}
+SendTokenScreen.prototype.renderButtons = function () {
+ const { selectedAddress, backToAccountDetail } = this.props
+
+ return h('div.send-token__button-group', [
+ h('button.send-token__button-next.btn-secondary', {
+
+ }, ['Next']),
+ h('button.send-token__button-cancel.btn-tertiary', {
+ onClick: () => backToAccountDetail(selectedAddress),
+ }, ['Cancel']),
+ ])
+}
+
SendTokenScreen.prototype.render = function () {
const {
selectedTokenAddress,
@@ -194,20 +209,23 @@ SendTokenScreen.prototype.render = function () {
} = this.props
return h('div.send-token', [
- h(Identicon, {
- diameter: 75,
- address: selectedTokenAddress,
- }),
- h('div.send-token__title', ['Send Tokens']),
- h('div.send-token__description', ['Send Tokens to anyone with an Ethereum account']),
- h('div.send-token__balance-text', ['Your Token Balance is:']),
- h('div.send-token__token-balance', [
- h(TokenBalance, { token: selectedToken, balanceOnly: true }),
+ h('div.send-token__content', [
+ h(Identicon, {
+ diameter: 75,
+ address: selectedTokenAddress,
+ }),
+ h('div.send-token__title', ['Send Tokens']),
+ h('div.send-token__description', ['Send Tokens to anyone with an Ethereum account']),
+ h('div.send-token__balance-text', ['Your Token Balance is:']),
+ h('div.send-token__token-balance', [
+ h(TokenBalance, { token: selectedToken, balanceOnly: true }),
+ ]),
+ h('div.send-token__token-symbol', [selectedToken.symbol]),
+ this.renderToAddressInput(),
+ this.renderAmountInput(),
+ this.renderGasInput(),
+ this.renderMemoInput(),
]),
- h('div.send-token__token-symbol', [selectedToken.symbol]),
- this.renderToAddressInput(),
- this.renderAmountInput(),
- this.renderGasInput(),
- this.renderMemoInput(),
+ this.renderButtons(),
])
}
diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js
index d3c2222a4..adaade301 100644
--- a/ui/app/components/send/currency-toggle.js
+++ b/ui/app/components/send/currency-toggle.js
@@ -1,6 +1,8 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
+const classnames = require('classnames')
+
module.exports = CurrencyToggle
inherits(CurrencyToggle, Component)
@@ -8,18 +10,25 @@ function CurrencyToggle () {
Component.call(this)
}
+const defaultCurrencies = [ 'ETH', 'USD' ]
+
CurrencyToggle.prototype.render = function () {
const { onClick, currentCurrency } = this.props
+ const [currencyA, currencyB] = this.props.currencies || defaultCurrencies
- return h('span', {}, [
+ return h('span.currency-toggle', {}, [
h('span', {
- className: currentCurrency === 'ETH' ? 'selected-currency' : 'unselected-currency',
- onClick: () => onClick('ETH'),
+ className: classnames('currency-toggle__item', {
+ 'currency-toggle__item--selected': currencyA === currentCurrency,
+ }),
+ onClick: () => onClick(currencyA),
}, ['ETH']),
'<>',
h('span', {
- className: currentCurrency === 'USD' ? 'selected-currency' : 'unselected-currency',
- onClick: () => onClick('USD'),
+ className: classnames('currency-toggle__item', {
+ 'currency-toggle__item--selected': currencyB === currentCurrency,
+ }),
+ onClick: () => onClick(currencyB),
}, ['USD']),
]) // holding on icon from design
}
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 26782900c..a7d11203d 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -49,9 +49,7 @@ TxList.prototype.renderTranstions = function () {
const { txsToRender } = this.props
return txsToRender.length
- ? txsToRender.map((transaction) => {
- return this.renderTransactionListItem(transaction)
- })
+ ? txsToRender.map((transaction) => this.renderTransactionListItem(transaction))
: [h('div.tx-list-item.tx-list-item--empty', [ 'No Transactions' ])]
}
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 7fff5969c..0946cdbbb 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -82,3 +82,21 @@ button.btn-thin {
padding: 6px;
font-size: 13px;
}
+
+.btn-secondary {
+ border: 1px solid #979797;
+ border-radius: 2px;
+ background-color: $white;
+ font-size: 16px;
+ line-height: 24px;
+ padding: 16px 42px;
+}
+
+.btn-tertiary {
+ border: 1px solid transparent;
+ border-radius: 2px;
+ background-color: transparent;
+ font-size: 16px;
+ line-height: 24px;
+ padding: 16px 42px;
+}
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index a2a77f763..091816e7d 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -80,12 +80,16 @@
justify-content: space-between;
}
-.selected-currency {
- color: $curious-blue;
-}
-
-.unselected-currency {
- cursor: pointer;
+.currency-toggle {
+ &__item {
+ color: $curious-blue;
+ cursor: pointer;
+
+ &--selected {
+ color: $black;
+ cursor: default;
+ }
+ }
}
.send-screen-gas-input-customize {
@@ -115,7 +119,7 @@
padding: 13px 19px;
font-size: 16px;
border-radius: 4px;
- font-family: 'Lato';
+ font-family: "Lato";
font-weight: 500;
}
@@ -205,19 +209,24 @@
}
.send-token {
- width: 498px;
- height: 605px;
- background-color: #fff;
display: flex;
flex-flow: column nowrap;
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
- padding: 46px 40.5px 26px;
- position: relative;
- top: -26px;
z-index: 25;
- align-items: center;
font-family: "Montserrat Light";
+ &__content {
+ width: 498px;
+ height: 605px;
+ background-color: #fff;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
+ padding: 46px 40.5px 26px;
+ position: relative;
+ top: -26px;
+ align-items: center;
+ display: flex;
+ flex-flow: column nowrap;
+ }
+
.identicon {
position: absolute;
top: -35px;
@@ -244,6 +253,16 @@
margin-top: 13px;
}
+ &__button-group {
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: center;
+
+ button {
+ width: 163px;
+ }
+ }
+
.send-screen-input-wrapper {
.fa-bolt {
padding-right: 4px;
diff --git a/ui/app/css/itcss/generic/reset.scss b/ui/app/css/itcss/generic/reset.scss
index 2c70ee70a..e054d533e 100644
--- a/ui/app/css/itcss/generic/reset.scss
+++ b/ui/app/css/itcss/generic/reset.scss
@@ -141,6 +141,7 @@ table {
button {
border-style: none;
+ cursor: pointer;
}
/* stylelint-enable */
diff --git a/ui/app/send.js b/ui/app/send.js
index c15409b31..96401cd23 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -674,7 +674,7 @@ SendTransactionScreen.prototype.onSubmit = function () {
// New: gas will now be specified on this step
gas: this.state.newTx.gas,
- gasPrice: this.state.newTx.gasPrice
+ gasPrice: this.state.newTx.gasPrice,
}
if (recipient) txParams.to = addHexPrefix(recipient)
generated by cgit (git 2.34.1) at 2024-10-17 00:22:40 +0800