diff options
| -rw-r--r-- | app/scripts/lib/is-popup-or-notification.js | 5 | ||||
| -rw-r--r-- | ui/app/app.js | 11 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/send.scss | 140 | ||||
| -rw-r--r-- | ui/app/css/itcss/settings/variables.scss | 3 | ||||
| -rw-r--r-- | ui/app/send-v2.js | 61 |
5 files changed, 218 insertions, 2 deletions
diff --git a/app/scripts/lib/is-popup-or-notification.js b/app/scripts/lib/is-popup-or-notification.js index 73a812d5f..e2999411f 100644 --- a/app/scripts/lib/is-popup-or-notification.js +++ b/app/scripts/lib/is-popup-or-notification.js @@ -1,6 +1,9 @@ module.exports = function isPopupOrNotification () { const url = window.location.href - if (url.match(/popup.html$/) || url.match(/home.html$/)) { + // if (url.match(/popup.html$/) || url.match(/home.html$/)) { + // Below regexes needed for feature toggles (e.g. see line ~340 in ui/app/app.js) + // Revert below regexes to above commented out regexes before merge to master + if (url.match(/popup.html(?:\?.+)*$/) || url.match(/home.html(?:\?.+)*$/)) { return 'popup' } else { return 'notification' diff --git a/ui/app/app.js b/ui/app/app.js index f1a671ab1..ac017da05 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -9,6 +9,7 @@ const NewKeyChainScreen = require('./new-keychain') // accounts const MainContainer = require('./main-container') const SendTransactionScreen = require('./send') +const SendTransactionScreen2 = require('./send-v2.js') const SendTokenScreen = require('./components/send-token') const ConfirmTxScreen = require('./conf-tx') // notice @@ -333,7 +334,15 @@ App.prototype.renderPrimary = function () { case 'sendTransaction': log.debug('rendering send tx screen') - return h(SendTransactionScreen, {key: 'send-transaction'}) + // Below param and ternary operator used for feature toggle + // Remove before merged to master + const windowParam = window.location.search.substr(1).split('=') + + const SendComponentToRender = windowParam[0] === "ft" && windowParam[1] === "send-v2" + ? SendTransactionScreen2 + : SendTransactionScreen + + return h(SendComponentToRender, {key: 'send-transaction'}) case 'sendToken': log.debug('rendering send token screen') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index dee8157ef..72a01dc89 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -397,3 +397,143 @@ width: 100%; } } + +.send-v2 { + &__container { + height: 701px; + width: 380px; + border-radius: 8px; + background-color: $white; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + display: flex; + flex-flow: column nowrap; + z-index: 25; + align-items: center; + font-family: Roboto; + position: relative; + top: -26px; + + @media screen and (max-width: $break-small) { + width: 100%; + overflow-y: auto; + top: 0; + width: 100%; + box-shadow: none; + } + } + + &__send-eth-icon { + border-radius: 50%; + width: 48px; + height: 48px; + border: 1px solid $alto; + z-index: 25; + padding: 4px; + background-color: $white; + + @media screen and (max-width: $break-small) { + position: relative; + top: 0; + } + } + + &__send-arrow-icon { + color: #f28930; + transform: rotate(-45deg); + position: absolute; + top: -2px; + left: 0; + font-size: 1.12em; + } + + &__arrow-background { + background-color: $white; + height: 14px; + width: 14px; + position: absolute; + top: 52px; + left: 199px; + border-radius: 50%; + z-index: 100; + } + + &__header { + height: 88px; + width: 380px; + background-color: $athens-grey; + position: relative; + display: flex; + justify-content: center; + align-items: center; + } + + &__header-tip { + height: 25px; + width: 25px; + background: $athens-grey; + position: absolute; + transform: rotate(45deg); + left: 178px; + top: 71px; + } + + &__title { + color: $scorpion; + font-size: 22px; + line-height: 29px; + text-align: center; + margin-top: 25px; + } + + &__copy { + color: $gray; + font-size: 14px; + font-weight: 300; + line-height: 19px; + text-align: center; + margin-top: 10px; + width: 287px; + } + + &__footer { + height: 92px; + width: 100%; + display: flex; + justify-content: space-evenly; + align-items: center; + border-top: 1px solid $alto; + position: absolute; + bottom: 0; + } + + &__next-btn, + &__cancel-btn { + width: 163px; + text-align: center; + height: 55px; + width: 163px; + border-radius: 2px; + background-color: $white; + font-family: Roboto; + font-size: 16px; + font-weight: 300; + line-height: 21px; + text-align: center; + border: 1px solid; + } + + &__next-btn__disabled { + opacity: .5; + cursor: auto; + } + + &__next-btn { + color: $curious-blue; + border-color: $curious-blue; + } + + &__cancel-btn { + color: $dusty-gray; + border-color: $dusty-gray; + } +} diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 103a7ffe0..b0ef86075 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -7,6 +7,7 @@ $white: #fff; $black: #000; $orange: #ffa500; $red: #f00; +$gray: #808080; /* Colors @@ -39,6 +40,8 @@ $blue-lagoon: #038789; $purple: #690496; $tulip-tree: #ebb33f; $malibu-blue: #7ac9fd; +$athens-grey: #e9edf0; +$jaffa: #f28930; /* Z-Indicies diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js new file mode 100644 index 000000000..f423b90ff --- /dev/null +++ b/ui/app/send-v2.js @@ -0,0 +1,61 @@ +const { inherits } = require('util') +const PersistentForm = require('../lib/persistent-form') +const h = require('react-hyperscript') +const connect = require('react-redux').connect +const Identicon = require('./components/identicon') + +module.exports = connect(mapStateToProps)(SendTransactionScreen) + +function mapStateToProps (state) { + return {} +} + +inherits(SendTransactionScreen, PersistentForm) +function SendTransactionScreen () { + PersistentForm.call(this) + + this.state = { + newTx: { + from: '', + to: '', + amountToSend: '0x0', + gasPrice: null, + gas: null, + amount: '0x0', + txData: null, + memo: '', + }, + } +} + +SendTransactionScreen.prototype.render = function () { + return ( + + h('div.send-v2__container', [ + h('div.send-v2__header', {}, [ + + h('img.send-v2__send-eth-icon', { src: '../images/eth_logo.svg' }), + + h('div.send-v2__arrow-background', [ + h('i.fa.fa-lg.fa-arrow-circle-right.send-v2__send-arrow-icon'), + ]), + + h('div.send-v2__header-tip'), + + ]), + + h('div.send-v2__title', 'Send Funds'), + + h('div.send-v2__copy', 'Only send ETH to an Ethereum address.'), + + h('div.send-v2__copy', 'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'), + + // Buttons underneath card + h('div.send-v2__footer', [ + h('button.send-v2__cancel-btn', {}, 'Cancel'), + h('button.send-v2__next-btn', {}, 'Next'), + ]), + ]) + + ) +} |