mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Merge pull request #677 from MetaMask/i675-LoadingBuy
Show loading indication when selecting ShapeShift
This commit is contained in:
commit
2b1a8525d2
@ -8,6 +8,7 @@
|
|||||||
- Add a link to the transaction in history that goes to https://metamask.github.io/eth-tx-viz
|
- Add a link to the transaction in history that goes to https://metamask.github.io/eth-tx-viz
|
||||||
too help visualize transactions and to where they are going.
|
too help visualize transactions and to where they are going.
|
||||||
- Show "Buy Ether" button and warning on tx confirmation when sender balance is insufficient
|
- Show "Buy Ether" button and warning on tx confirmation when sender balance is insufficient
|
||||||
|
- Show loading indication when selecting ShapeShift as purchasing method.
|
||||||
|
|
||||||
## 2.12.1 2016-09-14
|
## 2.12.1 2016-09-14
|
||||||
|
|
||||||
|
@ -21,7 +21,7 @@ const ConfirmTxScreen = require('./conf-tx')
|
|||||||
const ConfigScreen = require('./config')
|
const ConfigScreen = require('./config')
|
||||||
const RevealSeedConfirmation = require('./recover-seed/confirmation')
|
const RevealSeedConfirmation = require('./recover-seed/confirmation')
|
||||||
const InfoScreen = require('./info')
|
const InfoScreen = require('./info')
|
||||||
const LoadingIndicator = require('./loading')
|
const LoadingIndicator = require('./components/loading')
|
||||||
const SandwichExpando = require('sandwich-expando')
|
const SandwichExpando = require('sandwich-expando')
|
||||||
const MenuDroppo = require('menu-droppo')
|
const MenuDroppo = require('menu-droppo')
|
||||||
const DropMenuItem = require('./components/drop-menu-item')
|
const DropMenuItem = require('./components/drop-menu-item')
|
||||||
@ -38,6 +38,7 @@ function App () { Component.call(this) }
|
|||||||
function mapStateToProps (state) {
|
function mapStateToProps (state) {
|
||||||
return {
|
return {
|
||||||
// state from plugin
|
// state from plugin
|
||||||
|
isLoading: state.appState.isLoading,
|
||||||
isConfirmed: state.metamask.isConfirmed,
|
isConfirmed: state.metamask.isConfirmed,
|
||||||
isEthConfirmed: state.metamask.isEthConfirmed,
|
isEthConfirmed: state.metamask.isEthConfirmed,
|
||||||
isInitialized: state.metamask.isInitialized,
|
isInitialized: state.metamask.isInitialized,
|
||||||
@ -57,7 +58,7 @@ function mapStateToProps (state) {
|
|||||||
|
|
||||||
App.prototype.render = function () {
|
App.prototype.render = function () {
|
||||||
var props = this.props
|
var props = this.props
|
||||||
var transForward = props.transForward
|
const { isLoading, transForward } = props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
@ -69,7 +70,7 @@ App.prototype.render = function () {
|
|||||||
},
|
},
|
||||||
}, [
|
}, [
|
||||||
|
|
||||||
h(LoadingIndicator),
|
h(LoadingIndicator, { isLoading }),
|
||||||
|
|
||||||
// app bar
|
// app bar
|
||||||
this.renderAppBar(),
|
this.renderAppBar(),
|
||||||
|
@ -6,6 +6,7 @@ const actions = require('../actions')
|
|||||||
const CoinbaseForm = require('./coinbase-form')
|
const CoinbaseForm = require('./coinbase-form')
|
||||||
const ShapeshiftForm = require('./shapeshift-form')
|
const ShapeshiftForm = require('./shapeshift-form')
|
||||||
const extension = require('../../../app/scripts/lib/extension')
|
const extension = require('../../../app/scripts/lib/extension')
|
||||||
|
const Loading = require('./loading')
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(BuyButtonSubview)
|
module.exports = connect(mapStateToProps)(BuyButtonSubview)
|
||||||
|
|
||||||
@ -17,6 +18,7 @@ function mapStateToProps (state) {
|
|||||||
network: state.metamask.network,
|
network: state.metamask.network,
|
||||||
provider: state.metamask.provider,
|
provider: state.metamask.provider,
|
||||||
context: state.appState.currentView.context,
|
context: state.appState.currentView.context,
|
||||||
|
isSubLoading: state.appState.isSubLoading,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -28,6 +30,7 @@ function BuyButtonSubview () {
|
|||||||
BuyButtonSubview.prototype.render = function () {
|
BuyButtonSubview.prototype.render = function () {
|
||||||
const props = this.props
|
const props = this.props
|
||||||
const currentForm = props.buyView.formView
|
const currentForm = props.buyView.formView
|
||||||
|
const isLoading = props.isSubLoading
|
||||||
|
|
||||||
return (
|
return (
|
||||||
h('.buy-eth-section', [
|
h('.buy-eth-section', [
|
||||||
@ -47,6 +50,9 @@ BuyButtonSubview.prototype.render = function () {
|
|||||||
}),
|
}),
|
||||||
h('h2.page-subtitle', 'Buy Eth'),
|
h('h2.page-subtitle', 'Buy Eth'),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
|
h(Loading, { isLoading }),
|
||||||
|
|
||||||
h('h3.flex-row.text-transform-uppercase', {
|
h('h3.flex-row.text-transform-uppercase', {
|
||||||
style: {
|
style: {
|
||||||
background: '#EBEBEB',
|
background: '#EBEBEB',
|
||||||
|
@ -1,18 +1,12 @@
|
|||||||
const inherits = require('util').inherits
|
const inherits = require('util').inherits
|
||||||
const Component = require('react').Component
|
const Component = require('react').Component
|
||||||
const h = require('react-hyperscript')
|
const h = require('react-hyperscript')
|
||||||
const connect = require('react-redux').connect
|
|
||||||
const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
|
const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(LoadingIndicator)
|
|
||||||
|
|
||||||
function mapStateToProps (state) {
|
|
||||||
return {
|
|
||||||
isLoading: state.appState.isLoading,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
inherits(LoadingIndicator, Component)
|
inherits(LoadingIndicator, Component)
|
||||||
|
module.exports = LoadingIndicator
|
||||||
|
|
||||||
function LoadingIndicator () {
|
function LoadingIndicator () {
|
||||||
Component.call(this)
|
Component.call(this)
|
||||||
}
|
}
|
@ -128,7 +128,6 @@ ShapeshiftForm.prototype.renderMain = function () {
|
|||||||
this.props.isSubLoading ? this.renderLoading() : null,
|
this.props.isSubLoading ? this.renderLoading() : null,
|
||||||
h('.flex-column', {
|
h('.flex-column', {
|
||||||
style: {
|
style: {
|
||||||
width: '235px',
|
|
||||||
alignItems: 'flex-start',
|
alignItems: 'flex-start',
|
||||||
},
|
},
|
||||||
}, [
|
}, [
|
||||||
@ -270,17 +269,17 @@ ShapeshiftForm.prototype.renderInfo = function () {
|
|||||||
|
|
||||||
return h('span', {
|
return h('span', {
|
||||||
style: {
|
style: {
|
||||||
marginTop: '15px',
|
marginTop: '10px',
|
||||||
marginBottom: '15px',
|
marginBottom: '15px',
|
||||||
},
|
},
|
||||||
}, [
|
}, [
|
||||||
h('h3.flex-row.text-transform-uppercase', {
|
h('h3.flex-row.text-transform-uppercase', {
|
||||||
style: {
|
style: {
|
||||||
color: '#AEAEAE',
|
color: '#868686',
|
||||||
paddingTop: '4px',
|
paddingTop: '4px',
|
||||||
justifyContent: 'space-around',
|
justifyContent: 'space-around',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
fontSize: '14px',
|
fontSize: '17px',
|
||||||
},
|
},
|
||||||
}, `Market Info for ${marketinfo.pair.replace('_', ' to ').toUpperCase()}:`),
|
}, `Market Info for ${marketinfo.pair.replace('_', ' to ').toUpperCase()}:`),
|
||||||
h('.marketinfo', ['Status : ', `${coinOptions[coin].status}`]),
|
h('.marketinfo', ['Status : ', `${coinOptions[coin].status}`]),
|
||||||
|
@ -555,8 +555,8 @@ input.large-input {
|
|||||||
.marketinfo{
|
.marketinfo{
|
||||||
font-family: 'Montserrat light';
|
font-family: 'Montserrat light';
|
||||||
color: #AEAEAE;
|
color: #AEAEAE;
|
||||||
font-size: 12px;
|
font-size: 15px;
|
||||||
line-height: 14px;
|
line-height: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#fromCoin::-webkit-calendar-picker-indicator {
|
#fromCoin::-webkit-calendar-picker-indicator {
|
||||||
|
Loading…
Reference in New Issue
Block a user