mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
[NewUI-flat] New deposit ether modal UI. (#2642)
* New deposit ether modal. * New deposit modal full screen on mobile, and other style fixes. * Hide shapeshift option from deposit modal for now. * Add shapeshift form to new deposit modal. * Store recipient address for shapeshift tx in background. * Use Simpledropdown to achieve desired styling in coin selector. * Lint fix * Fix typos and remove dead code. * Remove storage of shapeshift receiving address from background. * Fix typos
This commit is contained in:
Dan J Miller
Alexander Tseung
parent
b72610fb53
commit
5c1dcf3e9b
BIN
app/images/coinbase logo.png
Normal file
BIN
app/images/coinbase logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
app/images/shapeshift logo.png
Normal file
BIN
app/images/shapeshift logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -1438,7 +1438,6 @@ function pairUpdate (coin) {
|
||||
|
||||
function shapeShiftSubview (network) {
|
||||
var pair = 'btc_eth'
|
||||
|
||||
return (dispatch) => {
|
||||
dispatch(actions.showSubLoadingIndication())
|
||||
shapeShiftRequest('marketinfo', {pair}, (mktResponse) => {
|
||||
@ -1464,7 +1463,7 @@ function coinShiftRquest (data, marketData) {
|
||||
dispatch(actions.hideLoadingIndication())
|
||||
if (response.error) return dispatch(actions.displayWarning(response.error))
|
||||
var message = `
|
||||
Deposit your ${response.depositType} to the address bellow:`
|
||||
Deposit your ${response.depositType} to the address below:`
|
||||
log.debug(`background.createShapeShiftTx`)
|
||||
background.createShapeShiftTx(response.deposit, response.depositType)
|
||||
dispatch(actions.showQrView(response.deposit, [message].concat(marketData)))
|
||||
@ -1500,7 +1499,7 @@ function reshowQrCode (data, coin) {
|
||||
if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error))
|
||||
|
||||
var message = [
|
||||
`Deposit your ${coin} to the address bellow:`,
|
||||
`Deposit your ${coin} to the address below:`,
|
||||
`Deposit Limit: ${mktResponse.limit}`,
|
||||
`Deposit Minimum:${mktResponse.minimum}`,
|
||||
]
|
||||
|
||||
@ -69,7 +69,7 @@ BuyOptions.prototype.render = function () {
|
||||
// h('div.buy-modal-content-option', {}, [
|
||||
// h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
|
||||
// h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
|
||||
// ]),
|
||||
// ]),,
|
||||
|
||||
this.renderModalContentOption(
|
||||
'Direct Deposit',
|
||||
|
||||
182
ui/app/components/modals/deposit-ether-modal.js
Normal file
182
ui/app/components/modals/deposit-ether-modal.js
Normal file
@ -0,0 +1,182 @@
|
||||
const Component = require('react').Component
|
||||
const h = require('react-hyperscript')
|
||||
const inherits = require('util').inherits
|
||||
const connect = require('react-redux').connect
|
||||
const actions = require('../../actions')
|
||||
const networkNames = require('../../../../app/scripts/config.js').networkNames
|
||||
const ShapeshiftForm = require('../shapeshift-form')
|
||||
|
||||
const DIRECT_DEPOSIT_ROW_TITLE = 'Directly Deposit Ether'
|
||||
const DIRECT_DEPOSIT_ROW_TEXT = `If you already have some Ether, the quickest way to get Ether in
|
||||
your new wallet by direct deposit.`
|
||||
const COINBASE_ROW_TITLE = 'Buy on Coinbase'
|
||||
const COINBASE_ROW_TEXT = `Coinbase is the world’s most popular way to buy and sell bitcoin,
|
||||
ethereum, and litecoin.`
|
||||
const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift'
|
||||
const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether
|
||||
directly into your MetaMask wallet. No Account Needed.`
|
||||
const FAUCET_ROW_TITLE = 'Test Faucet'
|
||||
const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
|
||||
|
||||
function mapStateToProps (state) {
|
||||
return {
|
||||
network: state.metamask.network,
|
||||
address: state.metamask.selectedAddress,
|
||||
}
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return {
|
||||
toCoinbase: (address) => {
|
||||
dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
|
||||
},
|
||||
hideModal: () => {
|
||||
dispatch(actions.hideModal())
|
||||
},
|
||||
showAccountDetailModal: () => {
|
||||
dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
|
||||
},
|
||||
toFaucet: network => dispatch(actions.buyEth({ network })),
|
||||
}
|
||||
}
|
||||
|
||||
inherits(DepositEtherModal, Component)
|
||||
function DepositEtherModal () {
|
||||
Component.call(this)
|
||||
|
||||
this.state = {
|
||||
buyingWithShapeshift: false,
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal)
|
||||
|
||||
DepositEtherModal.prototype.renderRow = function ({
|
||||
logo,
|
||||
title,
|
||||
text,
|
||||
buttonLabel,
|
||||
onButtonClick,
|
||||
hide,
|
||||
className,
|
||||
hideButton,
|
||||
hideTitle,
|
||||
onBackClick,
|
||||
}) {
|
||||
if (hide) {
|
||||
return null
|
||||
}
|
||||
|
||||
return h('div', {
|
||||
className: className || 'deposit-ether-modal__buy-row',
|
||||
}, [
|
||||
|
||||
h('div.deposit-ether-modal__buy-row__back', {
|
||||
onClick: onBackClick,
|
||||
}, [
|
||||
|
||||
h('i.fa.fa-arrow-left.cursor-pointer'),
|
||||
|
||||
]),
|
||||
|
||||
h('div.deposit-ether-modal__buy-row__logo', [logo]),
|
||||
|
||||
h('div.deposit-ether-modal__buy-row__description', [
|
||||
|
||||
!hideTitle && h('div.deposit-ether-modal__buy-row__description__title', [title]),
|
||||
|
||||
h('div.deposit-ether-modal__buy-row__description__text', [text]),
|
||||
|
||||
]),
|
||||
|
||||
!hideButton && h('div.deposit-ether-modal__buy-row__button', [
|
||||
h('button.deposit-ether-modal__deposit-button', {
|
||||
onClick: onButtonClick,
|
||||
}, [buttonLabel]),
|
||||
]),
|
||||
|
||||
])
|
||||
}
|
||||
|
||||
DepositEtherModal.prototype.render = function () {
|
||||
const { network, toCoinbase, address, toFaucet } = this.props
|
||||
const { buyingWithShapeshift } = this.state
|
||||
|
||||
const isTestNetwork = ['3', '4', '42'].find(n => n === network)
|
||||
const networkName = networkNames[network]
|
||||
|
||||
return h('div.deposit-ether-modal', {}, [
|
||||
|
||||
h('div.deposit-ether-modal__header', [
|
||||
|
||||
h('div.deposit-ether-modal__header__title', ['Deposit Ether']),
|
||||
|
||||
h('div.deposit-ether-modal__header__description', [
|
||||
'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.',
|
||||
]),
|
||||
|
||||
h('div.deposit-ether-modal__header__close', {
|
||||
onClick: () => {
|
||||
this.setState({ buyingWithShapeshift: false })
|
||||
this.props.hideModal()
|
||||
},
|
||||
}),
|
||||
|
||||
]),
|
||||
|
||||
h('div.deposit-ether-modal__buy-rows', [
|
||||
|
||||
this.renderRow({
|
||||
logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
|
||||
title: DIRECT_DEPOSIT_ROW_TITLE,
|
||||
text: DIRECT_DEPOSIT_ROW_TEXT,
|
||||
buttonLabel: 'View Account',
|
||||
onButtonClick: () => this.goToAccountDetailsModal(),
|
||||
hide: buyingWithShapeshift,
|
||||
}),
|
||||
|
||||
this.renderRow({
|
||||
logo: h('i.fa.fa-tint.fa-2x'),
|
||||
title: FAUCET_ROW_TITLE,
|
||||
text: facuetRowText(networkName),
|
||||
buttonLabel: 'Get Ether',
|
||||
onButtonClick: () => toFaucet(network),
|
||||
hide: !isTestNetwork || buyingWithShapeshift,
|
||||
}),
|
||||
|
||||
this.renderRow({
|
||||
logo: h('img.deposit-ether-modal__buy-row__coinbase-logo', {
|
||||
src: '../../../images/coinbase logo.png',
|
||||
}),
|
||||
title: COINBASE_ROW_TITLE,
|
||||
text: COINBASE_ROW_TEXT,
|
||||
buttonLabel: 'Continue to Coinbase',
|
||||
onButtonClick: () => toCoinbase(address),
|
||||
hide: isTestNetwork || buyingWithShapeshift,
|
||||
}),
|
||||
|
||||
this.renderRow({
|
||||
logo: h('img.deposit-ether-modal__buy-row__shapeshift-logo', {
|
||||
src: '../../../images/shapeshift logo.png',
|
||||
}),
|
||||
title: SHAPESHIFT_ROW_TITLE,
|
||||
text: SHAPESHIFT_ROW_TEXT,
|
||||
buttonLabel: 'Buy with Shapeshift',
|
||||
onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
|
||||
hide: isTestNetwork,
|
||||
hideButton: buyingWithShapeshift,
|
||||
hideTitle: buyingWithShapeshift,
|
||||
onBackClick: () => this.setState({ buyingWithShapeshift: false }),
|
||||
className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
|
||||
}),
|
||||
|
||||
buyingWithShapeshift && h(ShapeshiftForm),
|
||||
|
||||
]),
|
||||
])
|
||||
}
|
||||
|
||||
DepositEtherModal.prototype.goToAccountDetailsModal = function () {
|
||||
this.props.hideModal()
|
||||
this.props.showAccountDetailModal()
|
||||
}
|
||||
@ -9,6 +9,7 @@ const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-n
|
||||
|
||||
// Modal Components
|
||||
const BuyOptions = require('./buy-options-modal')
|
||||
const DepositEtherModal = require('./deposit-ether-modal')
|
||||
const AccountDetailsModal = require('./account-details-modal')
|
||||
const EditAccountNameModal = require('./edit-account-name-modal')
|
||||
const ExportPrivateKeyModal = require('./export-private-key-modal')
|
||||
@ -73,6 +74,37 @@ const MODALS = {
|
||||
},
|
||||
},
|
||||
|
||||
DEPOSIT_ETHER: {
|
||||
contents: [
|
||||
h(DepositEtherModal, {}, []),
|
||||
],
|
||||
mobileModalStyle: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
transform: 'none',
|
||||
left: '0',
|
||||
right: '0',
|
||||
margin: '0 auto',
|
||||
boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
|
||||
top: '0',
|
||||
display: 'flex',
|
||||
},
|
||||
laptopModalStyle: {
|
||||
width: '900px',
|
||||
maxWidth: '900px',
|
||||
top: 'calc(10% + 10px)',
|
||||
left: '0',
|
||||
right: '0',
|
||||
margin: '0 auto',
|
||||
boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)',
|
||||
borderRadius: '8px',
|
||||
transform: 'none',
|
||||
},
|
||||
contentStyle: {
|
||||
borderRadius: '8px',
|
||||
},
|
||||
},
|
||||
|
||||
EDIT_ACCOUNT_NAME: {
|
||||
contents: [
|
||||
h(EditAccountNameModal, {}, []),
|
||||
|
||||
@ -1,308 +1,242 @@
|
||||
const PersistentForm = require('../../lib/persistent-form')
|
||||
const h = require('react-hyperscript')
|
||||
const inherits = require('util').inherits
|
||||
const Component = require('react').Component
|
||||
const connect = require('react-redux').connect
|
||||
const actions = require('../actions')
|
||||
const Qr = require('./qr-code')
|
||||
const isValidAddress = require('../util').isValidAddress
|
||||
module.exports = connect(mapStateToProps)(ShapeshiftForm)
|
||||
const classnames = require('classnames')
|
||||
const { qrcode } = require('qrcode-npm')
|
||||
const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions')
|
||||
const { isValidAddress } = require('../util')
|
||||
const SimpleDropdown = require('./dropdowns/simple-dropdown')
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const {
|
||||
coinOptions,
|
||||
tokenExchangeRates,
|
||||
selectedAddress,
|
||||
} = state.metamask
|
||||
|
||||
return {
|
||||
warning: state.appState.warning,
|
||||
isSubLoading: state.appState.isSubLoading,
|
||||
qrRequested: state.appState.qrRequested,
|
||||
coinOptions,
|
||||
tokenExchangeRates,
|
||||
selectedAddress,
|
||||
}
|
||||
}
|
||||
|
||||
inherits(ShapeshiftForm, PersistentForm)
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return {
|
||||
shapeShiftSubview: () => dispatch(shapeShiftSubview()),
|
||||
pairUpdate: coin => dispatch(pairUpdate(coin)),
|
||||
buyWithShapeShift: data => dispatch(buyWithShapeShift(data)),
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftForm)
|
||||
|
||||
inherits(ShapeshiftForm, Component)
|
||||
function ShapeshiftForm () {
|
||||
PersistentForm.call(this)
|
||||
this.persistentFormParentId = 'shapeshift-buy-form'
|
||||
Component.call(this)
|
||||
|
||||
this.state = {
|
||||
depositCoin: 'btc',
|
||||
refundAddress: '',
|
||||
showQrCode: false,
|
||||
depositAddress: '',
|
||||
errorMessage: '',
|
||||
isLoading: false,
|
||||
bought: false,
|
||||
}
|
||||
}
|
||||
|
||||
ShapeshiftForm.prototype.render = function () {
|
||||
return this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain()
|
||||
ShapeshiftForm.prototype.componentWillMount = function () {
|
||||
this.props.shapeShiftSubview()
|
||||
}
|
||||
|
||||
ShapeshiftForm.prototype.renderMain = function () {
|
||||
const marketinfo = this.props.buyView.formView.marketinfo
|
||||
const coinOptions = this.props.buyView.formView.coinOptions
|
||||
var coin = marketinfo.pair.split('_')[0].toUpperCase()
|
||||
|
||||
return h('.flex-column', {
|
||||
style: {
|
||||
position: 'relative',
|
||||
padding: '25px',
|
||||
paddingTop: '5px',
|
||||
width: '90%',
|
||||
minHeight: '215px',
|
||||
alignItems: 'center',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
}, [
|
||||
h('.flex-row', {
|
||||
style: {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'baseline',
|
||||
height: '42px',
|
||||
},
|
||||
}, [
|
||||
h('img', {
|
||||
src: coinOptions[coin].image,
|
||||
width: '25px',
|
||||
height: '25px',
|
||||
style: {
|
||||
marginRight: '5px',
|
||||
},
|
||||
}),
|
||||
|
||||
h('.input-container', {
|
||||
position: 'relative',
|
||||
}, [
|
||||
h('input#fromCoin.buy-inputs.ex-coins', {
|
||||
type: 'text',
|
||||
list: 'coinList',
|
||||
autoFocus: true,
|
||||
dataset: {
|
||||
persistentFormId: 'input-coin',
|
||||
},
|
||||
style: {
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
onChange: this.handleLiveInput.bind(this),
|
||||
defaultValue: 'BTC',
|
||||
}),
|
||||
|
||||
this.renderCoinList(),
|
||||
|
||||
h('i.fa.fa-pencil-square-o.edit-text', {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
color: '#F7861C',
|
||||
position: 'absolute',
|
||||
},
|
||||
}),
|
||||
]),
|
||||
|
||||
h('.icon-control', {
|
||||
style: {
|
||||
position: 'relative',
|
||||
},
|
||||
}, [
|
||||
// Not visible on the screen, can't see it on master.
|
||||
|
||||
// h('i.fa.fa-refresh.fa-4.orange', {
|
||||
// style: {
|
||||
// bottom: '5px',
|
||||
// left: '5px',
|
||||
// color: '#F7861C',
|
||||
// },
|
||||
// onClick: this.updateCoin.bind(this),
|
||||
// }),
|
||||
h('i.fa.fa-chevron-right.fa-4.orange', {
|
||||
style: {
|
||||
position: 'absolute',
|
||||
bottom: '35%',
|
||||
left: '0%',
|
||||
color: '#F7861C',
|
||||
},
|
||||
onClick: this.updateCoin.bind(this),
|
||||
}),
|
||||
]),
|
||||
|
||||
h('#toCoin.ex-coins', marketinfo.pair.split('_')[1].toUpperCase()),
|
||||
|
||||
h('img', {
|
||||
src: coinOptions[marketinfo.pair.split('_')[1].toUpperCase()].image,
|
||||
width: '25px',
|
||||
height: '25px',
|
||||
style: {
|
||||
marginLeft: '5px',
|
||||
},
|
||||
}),
|
||||
]),
|
||||
|
||||
h('.flex-column', {
|
||||
style: {
|
||||
marginTop: '1%',
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
}, [
|
||||
this.props.warning ?
|
||||
this.props.warning &&
|
||||
h('span.error.flex-center', {
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
width: '229px',
|
||||
height: '82px',
|
||||
},
|
||||
}, this.props.warning)
|
||||
: this.renderInfo(),
|
||||
|
||||
this.renderRefundAddressForCoin(coin),
|
||||
]),
|
||||
|
||||
])
|
||||
ShapeshiftForm.prototype.onCoinChange = function (e) {
|
||||
const coin = e.target.value
|
||||
this.setState({
|
||||
depositCoin: coin,
|
||||
errorMessage: '',
|
||||
})
|
||||
this.props.pairUpdate(coin)
|
||||
}
|
||||
|
||||
ShapeshiftForm.prototype.renderRefundAddressForCoin = function (coin) {
|
||||
return h(this.activeToggle('.input-container'), {
|
||||
style: {
|
||||
marginTop: '1%',
|
||||
},
|
||||
}, [
|
||||
ShapeshiftForm.prototype.onBuyWithShapeShift = function () {
|
||||
this.setState({
|
||||
isLoading: true,
|
||||
showQrCode: true,
|
||||
})
|
||||
|
||||
h('div', `${coin} Address:`),
|
||||
|
||||
h('input#fromCoinAddress.buy-inputs', {
|
||||
type: 'text',
|
||||
placeholder: `Your ${coin} Refund Address`,
|
||||
dataset: {
|
||||
persistentFormId: 'refund-address',
|
||||
|
||||
},
|
||||
style: {
|
||||
boxSizing: 'border-box',
|
||||
width: '227px',
|
||||
height: '30px',
|
||||
padding: ' 5px ',
|
||||
},
|
||||
}),
|
||||
|
||||
h('i.fa.fa-pencil-square-o.edit-text', {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
color: '#F7861C',
|
||||
position: 'absolute',
|
||||
},
|
||||
}),
|
||||
h('div.flex-row', {
|
||||
style: {
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
}, [
|
||||
h('button', {
|
||||
onClick: this.shift.bind(this),
|
||||
style: {
|
||||
marginTop: '1%',
|
||||
},
|
||||
},
|
||||
'Submit'),
|
||||
]),
|
||||
])
|
||||
}
|
||||
|
||||
ShapeshiftForm.prototype.shift = function () {
|
||||
var props = this.props
|
||||
var withdrawal = this.props.buyView.buyAddress
|
||||
var returnAddress = document.getElementById('fromCoinAddress').value
|
||||
var pair = this.props.buyView.formView.marketinfo.pair
|
||||
var data = {
|
||||
'withdrawal': withdrawal,
|
||||
'pair': pair,
|
||||
'returnAddress': returnAddress,
|
||||
const {
|
||||
buyWithShapeShift,
|
||||
selectedAddress: withdrawal,
|
||||
} = this.props
|
||||
const {
|
||||
refundAddress: returnAddress,
|
||||
depositCoin,
|
||||
} = this.state
|
||||
const pair = `${depositCoin}_eth`
|
||||
const data = {
|
||||
withdrawal,
|
||||
pair,
|
||||
returnAddress,
|
||||
// Public api key
|
||||
'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6',
|
||||
}
|
||||
var message = [
|
||||
`Deposit Limit: ${props.buyView.formView.marketinfo.limit}`,
|
||||
`Deposit Minimum:${props.buyView.formView.marketinfo.minimum}`,
|
||||
]
|
||||
|
||||
if (isValidAddress(withdrawal)) {
|
||||
this.props.dispatch(actions.coinShiftRquest(data, message))
|
||||
buyWithShapeShift(data)
|
||||
.then(d => this.setState({
|
||||
showQrCode: true,
|
||||
depositAddress: d.deposit,
|
||||
isLoading: false,
|
||||
}))
|
||||
.catch(() => this.setState({
|
||||
showQrCode: false,
|
||||
errorMessage: 'Invalid Request',
|
||||
isLoading: false,
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
ShapeshiftForm.prototype.renderCoinList = function () {
|
||||
var list = Object.keys(this.props.buyView.formView.coinOptions).map((item) => {
|
||||
return h('option', {
|
||||
value: item,
|
||||
}, item)
|
||||
})
|
||||
ShapeshiftForm.prototype.renderMetadata = function (label, value) {
|
||||
return h('div', {className: 'shapeshift-form__metadata-wrapper'}, [
|
||||
|
||||
return h('datalist#coinList', {
|
||||
onClick: (event) => {
|
||||
event.preventDefault()
|
||||
},
|
||||
}, list)
|
||||
}
|
||||
h('div.shapeshift-form__metadata-label', {}, [
|
||||
h('span', `${label}:`),
|
||||
]),
|
||||
|
||||
ShapeshiftForm.prototype.updateCoin = function (event) {
|
||||
event.preventDefault()
|
||||
const props = this.props
|
||||
var coinOptions = this.props.buyView.formView.coinOptions
|
||||
var coin = document.getElementById('fromCoin').value
|
||||
h('div.shapeshift-form__metadata-value', {}, [
|
||||
h('span', value),
|
||||
]),
|
||||
|
||||
if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
|
||||
var message = 'Not a valid coin'
|
||||
return props.dispatch(actions.displayWarning(message))
|
||||
} else {
|
||||
return props.dispatch(actions.pairUpdate(coin))
|
||||
}
|
||||
}
|
||||
|
||||
ShapeshiftForm.prototype.handleLiveInput = function () {
|
||||
const props = this.props
|
||||
var coinOptions = this.props.buyView.formView.coinOptions
|
||||
var coin = document.getElementById('fromCoin').value
|
||||
|
||||
if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
|
||||
return null
|
||||
} else {
|
||||
return props.dispatch(actions.pairUpdate(coin))
|
||||
}
|
||||
}
|
||||
|
||||
ShapeshiftForm.prototype.renderInfo = function () {
|
||||
const marketinfo = this.props.buyView.formView.marketinfo
|
||||
const coinOptions = this.props.buyView.formView.coinOptions
|
||||
var coin = marketinfo.pair.split('_')[0].toUpperCase()
|
||||
|
||||
return h('span', {
|
||||
style: {
|
||||
},
|
||||
}, [
|
||||
h('h3.flex-row.text-transform-uppercase', {
|
||||
style: {
|
||||
color: '#868686',
|
||||
paddingTop: '4px',
|
||||
justifyContent: 'space-around',
|
||||
textAlign: 'center',
|
||||
fontSize: '17px',
|
||||
},
|
||||
}, `Market Info for ${marketinfo.pair.replace('_', ' to ').toUpperCase()}:`),
|
||||
h('.marketinfo', ['Status : ', `${coinOptions[coin].status}`]),
|
||||
h('.marketinfo', ['Exchange Rate: ', `${marketinfo.rate}`]),
|
||||
h('.marketinfo', ['Limit: ', `${marketinfo.limit}`]),
|
||||
h('.marketinfo', ['Minimum : ', `${marketinfo.minimum}`]),
|
||||
])
|
||||
}
|
||||
|
||||
ShapeshiftForm.prototype.activeToggle = function (elementType) {
|
||||
if (!this.props.buyView.formView.response || this.props.warning) return elementType
|
||||
return `${elementType}.inactive`
|
||||
}
|
||||
ShapeshiftForm.prototype.renderMarketInfo = function () {
|
||||
const { depositCoin } = this.state
|
||||
const coinPair = `${depositCoin}_eth`
|
||||
const { tokenExchangeRates } = this.props
|
||||
const {
|
||||
limit,
|
||||
rate,
|
||||
minimum,
|
||||
} = tokenExchangeRates[coinPair] || {}
|
||||
|
||||
return h('div.shapeshift-form__metadata', {}, [
|
||||
|
||||
this.renderMetadata('Status', limit ? 'Available' : 'Unavailable'),
|
||||
this.renderMetadata('Limit', limit),
|
||||
this.renderMetadata('Exchange Rate', rate),
|
||||
this.renderMetadata('Minimum', minimum),
|
||||
|
||||
ShapeshiftForm.prototype.renderLoading = function () {
|
||||
return h('span', {
|
||||
style: {
|
||||
position: 'absolute',
|
||||
left: '70px',
|
||||
bottom: '194px',
|
||||
background: 'transparent',
|
||||
width: '229px',
|
||||
height: '82px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
}, [
|
||||
h('img', {
|
||||
style: {
|
||||
width: '60px',
|
||||
},
|
||||
src: 'images/loading.svg',
|
||||
}),
|
||||
])
|
||||
}
|
||||
|
||||
ShapeshiftForm.prototype.renderQrCode = function () {
|
||||
const { depositAddress, isLoading } = this.state
|
||||
const qrImage = qrcode(4, 'M')
|
||||
qrImage.addData(depositAddress)
|
||||
qrImage.make()
|
||||
|
||||
return h('div.shapeshift-form', {}, [
|
||||
|
||||
h('div.shapeshift-form__deposit-instruction', [
|
||||
'Deposit your BTC to the address below:',
|
||||
]),
|
||||
|
||||
h('div', depositAddress),
|
||||
|
||||
h('div.shapeshift-form__qr-code', [
|
||||
isLoading
|
||||
? h('img', {
|
||||
src: 'images/loading.svg',
|
||||
style: { width: '60px'},
|
||||
})
|
||||
: h('div', {
|
||||
dangerouslySetInnerHTML: { __html: qrImage.createTableTag(4) },
|
||||
}),
|
||||
]),
|
||||
|
||||
this.renderMarketInfo(),
|
||||
|
||||
])
|
||||
}
|
||||
|
||||
|
||||
ShapeshiftForm.prototype.render = function () {
|
||||
const { coinOptions, btnClass } = this.props
|
||||
const { depositCoin, errorMessage, showQrCode, depositAddress } = this.state
|
||||
const coinPair = `${depositCoin}_eth`
|
||||
const { tokenExchangeRates } = this.props
|
||||
const token = tokenExchangeRates[coinPair]
|
||||
|
||||
return h('div.shapeshift-form-wrapper', [
|
||||
showQrCode
|
||||
? this.renderQrCode()
|
||||
: h('div.shapeshift-form', [
|
||||
h('div.shapeshift-form__selectors', [
|
||||
|
||||
h('div.shapeshift-form__selector', [
|
||||
|
||||
h('div.shapeshift-form__selector-label', 'Deposit'),
|
||||
|
||||
h(SimpleDropdown, {
|
||||
selectedOption: this.state.depositCoin,
|
||||
onSelect: this.onCoinChange,
|
||||
options: Object.entries(coinOptions).map(([coin]) => ({
|
||||
value: coin.toLowerCase(),
|
||||
displayValue: coin,
|
||||
})),
|
||||
}),
|
||||
|
||||
]),
|
||||
|
||||
h('div.icon.shapeshift-form__caret', {
|
||||
style: { backgroundImage: 'url(images/caret-right.svg)'},
|
||||
}),
|
||||
|
||||
h('div.shapeshift-form__selector', [
|
||||
|
||||
h('div.shapeshift-form__selector-label', [
|
||||
'Receive',
|
||||
]),
|
||||
|
||||
h('div.shapeshift-form__selector-input', ['ETH']),
|
||||
|
||||
]),
|
||||
|
||||
]),
|
||||
|
||||
h('div', {
|
||||
className: classnames('shapeshift-form__address-input-wrapper', {
|
||||
'shapeshift-form__address-input-wrapper--error': errorMessage,
|
||||
}),
|
||||
}, [
|
||||
|
||||
h('div.shapeshift-form__address-input-label', [
|
||||
'Your Refund Address',
|
||||
]),
|
||||
|
||||
h('input.shapeshift-form__address-input', {
|
||||
type: 'text',
|
||||
onChange: e => this.setState({
|
||||
refundAddress: e.target.value,
|
||||
errorMessage: '',
|
||||
}),
|
||||
}),
|
||||
|
||||
h('divshapeshift-form__address-input-error-message', [errorMessage]),
|
||||
]),
|
||||
|
||||
this.renderMarketInfo(),
|
||||
|
||||
]),
|
||||
|
||||
!depositAddress && h('button.shapeshift-form__shapeshift-buy-btn', {
|
||||
className: btnClass,
|
||||
disabled: !token,
|
||||
onClick: () => this.onBuyWithShapeShift(),
|
||||
}, ['Buy']),
|
||||
|
||||
])
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ module.exports = connect(mapStateToProps)(ShiftListItem)
|
||||
|
||||
function mapStateToProps (state) {
|
||||
return {
|
||||
selectedAddress: state.metamask.selectedAddress,
|
||||
conversionRate: state.metamask.conversionRate,
|
||||
currentCurrency: state.metamask.currentCurrency,
|
||||
}
|
||||
@ -28,36 +29,39 @@ function ShiftListItem () {
|
||||
}
|
||||
|
||||
ShiftListItem.prototype.render = function () {
|
||||
const { selectedAddress, receivingAddress } = this.props
|
||||
return (
|
||||
h('div.tx-list-item.tx-list-clickable', {
|
||||
style: {
|
||||
paddingTop: '20px',
|
||||
paddingBottom: '20px',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
},
|
||||
}, [
|
||||
h('div', {
|
||||
selectedAddress === receivingAddress
|
||||
? h('div.tx-list-item.tx-list-clickable', {
|
||||
style: {
|
||||
width: '0px',
|
||||
position: 'relative',
|
||||
bottom: '19px',
|
||||
paddingTop: '20px',
|
||||
paddingBottom: '20px',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
},
|
||||
}, [
|
||||
h('img', {
|
||||
src: 'https://info.shapeshift.io/sites/default/files/logo.png',
|
||||
h('div', {
|
||||
style: {
|
||||
height: '35px',
|
||||
width: '132px',
|
||||
position: 'absolute',
|
||||
clip: 'rect(0px,23px,34px,0px)',
|
||||
width: '0px',
|
||||
position: 'relative',
|
||||
bottom: '19px',
|
||||
},
|
||||
}),
|
||||
]),
|
||||
}, [
|
||||
h('img', {
|
||||
src: 'https://info.shapeshift.io/sites/default/files/logo.png',
|
||||
style: {
|
||||
height: '35px',
|
||||
width: '132px',
|
||||
position: 'absolute',
|
||||
clip: 'rect(0px,23px,34px,0px)',
|
||||
},
|
||||
}),
|
||||
]),
|
||||
|
||||
this.renderInfo(),
|
||||
this.renderUtilComponents(),
|
||||
])
|
||||
this.renderInfo(),
|
||||
this.renderUtilComponents(),
|
||||
])
|
||||
: null
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -52,7 +52,7 @@ TxList.prototype.render = function () {
|
||||
TxList.prototype.renderTransaction = function () {
|
||||
const { txsToRender, conversionRate } = this.props
|
||||
return txsToRender.length
|
||||
? txsToRender.map((transaction, i) => this.renderTransactionListItem(transaction, conversionRate))
|
||||
? txsToRender.map((transaction, i) => this.renderTransactionListItem(transaction, conversionRate, i))
|
||||
: [h(
|
||||
'div.tx-list-item.tx-list-item--empty',
|
||||
{ key: 'tx-list-none' },
|
||||
@ -61,12 +61,16 @@ TxList.prototype.renderTransaction = function () {
|
||||
}
|
||||
|
||||
// TODO: Consider moving TxListItem into a separate component
|
||||
TxList.prototype.renderTransactionListItem = function (transaction, conversionRate) {
|
||||
TxList.prototype.renderTransactionListItem = function (transaction, conversionRate, index) {
|
||||
// console.log({transaction})
|
||||
// refer to transaction-list.js:line 58
|
||||
|
||||
if (transaction.key === 'shapeshift') {
|
||||
return h(ShiftListItem, transaction)
|
||||
return h('div', {
|
||||
key: `shapeshift${index}`,
|
||||
}, [
|
||||
h(ShiftListItem, transaction),
|
||||
])
|
||||
}
|
||||
|
||||
const props = {
|
||||
|
||||
@ -73,7 +73,7 @@ TxView.prototype.renderButtons = function () {
|
||||
textAlign: 'center',
|
||||
},
|
||||
onClick: () => showModal({
|
||||
name: 'BUY',
|
||||
name: 'DEPOSIT_ETHER',
|
||||
}),
|
||||
}, 'DEPOSIT'),
|
||||
|
||||
|
||||
@ -598,4 +598,256 @@
|
||||
justify-content: center;
|
||||
font-size: 17px;
|
||||
color: $nile-blue;
|
||||
}
|
||||
}
|
||||
|
||||
// Deposit Ether Modal
|
||||
.deposit-ether-modal {
|
||||
border-radius: 8px;
|
||||
font-family: Roboto;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
|
||||
&__header {
|
||||
width: 100%;
|
||||
border-radius: 8px 8px 0 0;
|
||||
background-color: $mid-gray;
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding: 25px;
|
||||
flex-flow: column;
|
||||
align-items: flex-start;
|
||||
|
||||
&__title {
|
||||
color: $white;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $white;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&__close::after {
|
||||
content: '\00D7';
|
||||
font-size: 2em;
|
||||
color: $white;
|
||||
position: absolute;
|
||||
top: 20.8px;
|
||||
right: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&__buy-rows {
|
||||
width: 100%;
|
||||
padding: 33px;
|
||||
padding-top: 0px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__buy-row {
|
||||
border-bottom: 1px solid $alto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding-bottom: 25px;
|
||||
padding-top: 25px;
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
min-height: 360px;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
padding-top: 45px;
|
||||
}
|
||||
|
||||
&__back {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
&__shapeshift-buy {
|
||||
padding-top: 25px;
|
||||
position: relative;
|
||||
@media screen and (max-width: 575px) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding-bottom: 25px;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
padding-top: 20px;
|
||||
min-height: 240px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 0.3 1 auto;
|
||||
|
||||
@media screen and (min-width: 575px) {
|
||||
min-width: 215px;
|
||||
}
|
||||
}
|
||||
|
||||
&__coinbase-logo {
|
||||
height: 40px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
&__shapeshift-logo {
|
||||
height: 60px;
|
||||
width: 174px;
|
||||
}
|
||||
|
||||
&__eth-logo {
|
||||
border-radius: 50%;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
border: 3px solid $tundora;
|
||||
z-index: 25;
|
||||
padding: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&__right {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $cape-cod;
|
||||
flex: 0.5 1 auto;
|
||||
|
||||
@media screen and (min-width: 575px) {
|
||||
min-width: 315px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@media screen and (min-width: 575px) {
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__buy-row:last-of-type {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
&__deposit-button, .shapeshift-form__shapeshift-buy-btn {
|
||||
height: 54px;
|
||||
width: 257px;
|
||||
border: 1px solid $curious-blue;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: $curious-blue;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.shapeshift-form-wrapper {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 28px;
|
||||
flex: 1 0 auto;
|
||||
|
||||
.shapeshift-form {
|
||||
width: auto;
|
||||
|
||||
&__caret {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shapeshift-form__shapeshift-buy-btn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.simple-dropdown {
|
||||
color: #5B5D67;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 21px;
|
||||
border: 1px solid #D8D8D8;
|
||||
background-color: #FFFFFF;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
line-height: 44px;
|
||||
font-family: Montserrat Light;
|
||||
}
|
||||
|
||||
.simple-dropdown__selected {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
//Notification Modal
|
||||
|
||||
.notification-modal-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border: 1px solid $alto;
|
||||
box-shadow: 0 0 2px 2px $alto;
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
.notification-modal-header {
|
||||
background: $wild-sand;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 30px;
|
||||
font-size: 22px;
|
||||
color: $nile-blue;
|
||||
height: 79px;
|
||||
}
|
||||
|
||||
.notification-modal-message {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.notification-modal-message {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 17px;
|
||||
color: $nile-blue;
|
||||
}
|
||||
|
||||
@ -42,6 +42,8 @@ $malibu-blue: #7ac9fd;
|
||||
$athens-grey: #e9edf0;
|
||||
$jaffa: #f28930;
|
||||
$geyser: #d2d8dd;
|
||||
$mid-gray: #5b5d67;
|
||||
$cape-cod: #38393a;
|
||||
|
||||
/*
|
||||
Z-Indicies
|
||||
|
||||
@ -58,6 +58,7 @@ function reduceApp (state, action) {
|
||||
isLoading: false,
|
||||
// Used to display error text
|
||||
warning: null,
|
||||
buyView: {},
|
||||
}, state.appState)
|
||||
|
||||
switch (action.type) {
|
||||
@ -591,8 +592,8 @@ function reduceApp (state, action) {
|
||||
marketinfo: action.value.marketinfo,
|
||||
coinOptions: action.value.coinOptions,
|
||||
},
|
||||
buyAddress: appState.buyView.buyAddress,
|
||||
amount: appState.buyView.amount,
|
||||
buyAddress: action.value.buyAddress || appState.buyView.buyAddress,
|
||||
amount: appState.buyView.amount || 0,
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
23
yarn.lock
23
yarn.lock
@ -508,7 +508,7 @@ async-eventemitter@^0.2.2:
|
||||
dependencies:
|
||||
async "^2.4.0"
|
||||
|
||||
"async-eventemitter@github:ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c":
|
||||
async-eventemitter@ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c:
|
||||
version "0.2.3"
|
||||
resolved "https://codeload.github.com/ahultgren/async-eventemitter/tar.gz/fa06e39e56786ba541c180061dbf2c0a5bbf951c"
|
||||
dependencies:
|
||||
@ -2210,10 +2210,6 @@ clone-stats@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
|
||||
|
||||
clone@^0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/clone/-/clone-0.2.0.tgz#c6126a90ad4f72dbf5acdb243cc37724fe93fc1f"
|
||||
|
||||
clone@^1.0.0, clone@^1.0.2:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.3.tgz#298d7e2231660f40c003c2ed3140decf3f53085f"
|
||||
@ -11141,12 +11137,12 @@ vinyl-fs@^3.0.0:
|
||||
vinyl "^2.0.0"
|
||||
vinyl-sourcemap "^1.1.0"
|
||||
|
||||
vinyl-source-stream@^1.1.0:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/vinyl-source-stream/-/vinyl-source-stream-1.1.2.tgz#62b53a135610a896e98ca96bee3a87f008a8e780"
|
||||
vinyl-source-stream@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/vinyl-source-stream/-/vinyl-source-stream-2.0.0.tgz#f38a5afb9dd1e93b65d550469ac6182ac4f54b8e"
|
||||
dependencies:
|
||||
through2 "^2.0.3"
|
||||
vinyl "^0.4.3"
|
||||
vinyl "^2.1.0"
|
||||
|
||||
vinyl-sourcemap@^1.1.0:
|
||||
version "1.1.0"
|
||||
@ -11166,13 +11162,6 @@ vinyl-sourcemaps-apply@^0.2.0:
|
||||
dependencies:
|
||||
source-map "^0.5.1"
|
||||
|
||||
vinyl@^0.4.3:
|
||||
version "0.4.6"
|
||||
resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.4.6.tgz#2f356c87a550a255461f36bbeb2a5ba8bf784847"
|
||||
dependencies:
|
||||
clone "^0.2.0"
|
||||
clone-stats "^0.0.1"
|
||||
|
||||
vinyl@^0.5.0:
|
||||
version "0.5.3"
|
||||
resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.5.3.tgz#b0455b38fc5e0cf30d4325132e461970c2091cde"
|
||||
@ -11189,7 +11178,7 @@ vinyl@^1.1.0, vinyl@^1.2.0:
|
||||
clone-stats "^0.0.1"
|
||||
replace-ext "0.0.1"
|
||||
|
||||
vinyl@^2.0.0:
|
||||
vinyl@^2.0.0, vinyl@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.1.0.tgz#021f9c2cf951d6b939943c89eb5ee5add4fd924c"
|
||||
dependencies:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user