From 630bcca3fb55bcf00850c63414790b74247a0c13 Mon Sep 17 00:00:00 2001 From: Miika Turunen Date: Tue, 29 Aug 2017 00:46:31 +0300 Subject: [PATCH 1/8] Qr Invoice modal --- .../dashboard/invoiceModal/invoiceModal.js | 214 ++++++++++++++++++ .../invoiceModal/invoiceModal.render.js | 77 +++++++ .../dashboard/receiveCoin/receiveCoin.js | 8 +- .../receiveCoin/receiveCoin.render.js | 5 +- react/src/translate/en.js | 1 + 5 files changed, 303 insertions(+), 2 deletions(-) create mode 100755 react/src/components/dashboard/invoiceModal/invoiceModal.js create mode 100644 react/src/components/dashboard/invoiceModal/invoiceModal.render.js diff --git a/react/src/components/dashboard/invoiceModal/invoiceModal.js b/react/src/components/dashboard/invoiceModal/invoiceModal.js new file mode 100755 index 0000000..e77bf72 --- /dev/null +++ b/react/src/components/dashboard/invoiceModal/invoiceModal.js @@ -0,0 +1,214 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { connect } from 'react-redux'; +import Store from '../../../store'; +import { translate } from '../../../translate/translate'; +import BodyEnd from '../bodyBottom/bodyBottom'; +import { + InvoiceModalRender, + InvoiceModalButtonRender, +} from './invoiceModal.render'; + +class InvoiceModal extends React.Component { + constructor() { + super(); + this.state = { + modalIsOpen: false, + content: '', + amount: 0, + addressSelectorOpen: false, + }; + this.openModal = this.openModal.bind(this); + this.closeModal = this.closeModal.bind(this); + this.updateInput = this.updateInput.bind(this); + this.renderAddressList = this.renderAddressList.bind(this); + this.openDropMenu = this.openDropMenu.bind(this); + } + + openModal() { + this.setState({ + modalIsOpen: true + }); + } + + updateInput(e) { + console.log(e.target.value); + this.setState({ + [e.target.name]: e.target.value, + content: e.target.value, + }); + } + + closeModal() { + this.setState({ + modalIsOpen: false, + }); + } + + openDropMenu() { + this.setState(Object.assign({}, this.state, { + addressSelectorOpen: !this.state.addressSelectorOpen, + })); + } + + renderAddressByType(type) { + const _addresses = this.props.ActiveCoin.addresses; + + if (_addresses && + _addresses[type] && + _addresses[type].length) { + if (this.state.sendApiType) { + const mainAddress = this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]; + const mainAddressAmount = this.renderAddressAmount(mainAddress); + + return( +
  • + this.updateAddressSelection(mainAddress, type, mainAddressAmount) }> +    + + [ { mainAddressAmount } { this.props.ActiveCoin.coin } ]   + { mainAddress } + + + +
    • + ); + } else { + let items = []; + const _addresses = this.props.ActiveCoin.addresses; + const _cache = this.props.ActiveCoin.cache; + const _coin = this.props.ActiveCoin.coin; + + for (let i = 0; i < _addresses[type].length; i++) { + const address = _addresses[type][i].address; + let _amount = address.amount; + + if (this.props.ActiveCoin.mode === 'basilisk' && + _cache) { + _amount = _cache[_coin][address] && _cache[_coin][address].getbalance.data && _cache[_coin][address].getbalance.data.balance ? _cache[_coin][address].getbalance.data.balance : 'N/A'; + } + + if (_amount !== 'N/A') { + items.push( +
  • + this.updateAddressSelection(address, type, _amount) }> +    + [ { _amount } { _coin } ]  { address } + + +
    • + ); + } + } + + return items; + } + } else { + return null; + } + } + + renderSelectorCurrentLabel() { + if (this.state.sendFrom) { + let _amount; + const _cache = this.props.ActiveCoin.cache; + const _coin = this.props.ActiveCoin.coin; + const _sendFrom = this.state.sendFrom; + + if (this.state.sendFromAmount === 0 && + this.props.ActiveCoin.mode === 'basilisk' && + _cache) { + _amount = _cache[_coin][_sendFrom].getbalance.data && _cache[_coin][_sendFrom].getbalance.data.balance ? _cache[_coin][_sendFrom].getbalance.data.balance : 'N/A'; + } else { + _amount = this.state.sendFromAmount; + } + + return ( + +    + [ { _amount } { _coin } ]  { _sendFrom } + + ); + } else if (this.state.sendApiType) { + const mainAddress = this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]; + const mainAddressAmount = this.renderAddressAmount(mainAddress); + + return ( + +    + [ { mainAddressAmount } { this.props.ActiveCoin.coin } ]  { mainAddress } + + ); + } else { + return ( + { translate('SEND.SELECT_T_OR_Z_ADDR') } + ); + } + } + + renderAddressList() { + return ( +
    + +
    + +
    +
    + ); + } + + render() { + if (this.state.modalIsOpen) { + return { InvoiceModalRender.call(this) } + } else { + return InvoiceModalButtonRender.call(this); + } + + } +} + +const mapStateToProps = (state) => { + return { + ActiveCoin: { + coin: state.ActiveCoin.coin, + mode: state.ActiveCoin.mode, + send: state.ActiveCoin.send, + receive: state.ActiveCoin.receive, + balance: state.ActiveCoin.balance, + cache: state.ActiveCoin.cache, + activeAddress: state.ActiveCoin.activeAddress, + lastSendToResponse: state.ActiveCoin.lastSendToResponse, + addresses: state.ActiveCoin.addresses, + }, + Dashboard: { + activeHandle: state.Dashboard.activeHandle, + } + + }; + +}; + +export default connect(mapStateToProps)(InvoiceModal); diff --git a/react/src/components/dashboard/invoiceModal/invoiceModal.render.js b/react/src/components/dashboard/invoiceModal/invoiceModal.render.js new file mode 100644 index 0000000..d81ce7e --- /dev/null +++ b/react/src/components/dashboard/invoiceModal/invoiceModal.render.js @@ -0,0 +1,77 @@ +import React from 'react'; +import { translate } from '../../../translate/translate'; +import QRCode from 'qrcode.react'; + +export const InvoiceModalRender = function () { + return ( + +
    +
    +
    +
    + +

    { translate('INDEX.SCAN_QR_CODE') }

    +
    +
    +
    +
    +
    +
    + + { this.renderAddressList() } + + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +     + ); +}; + +export const InvoiceModalButtonRender = function () { + return ( + + + + ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/receiveCoin/receiveCoin.js b/react/src/components/dashboard/receiveCoin/receiveCoin.js index c9f0097..f069c1e 100644 --- a/react/src/components/dashboard/receiveCoin/receiveCoin.js +++ b/react/src/components/dashboard/receiveCoin/receiveCoin.js @@ -99,11 +99,17 @@ class ReceiveCoin extends React.Component { } renderAddressActions(address, type) { + let qrContent = { + qrAddress: address, + qrAmount: address.amount, + qrCoin: this.props.coin, + }; + console.log(qrContent); if (this.isBasiliskMode()) { return AddressActionsBasiliskModeRender.call(this, address); } - return AddressActionsNonBasiliskModeRender.call(this, address, type); + return AddressActionsNonBasiliskModeRender.call(this, address, type, qrContent); } hasNoAmount(address) { diff --git a/react/src/components/dashboard/receiveCoin/receiveCoin.render.js b/react/src/components/dashboard/receiveCoin/receiveCoin.render.js index 13dc485..8cb9932 100644 --- a/react/src/components/dashboard/receiveCoin/receiveCoin.render.js +++ b/react/src/components/dashboard/receiveCoin/receiveCoin.render.js @@ -1,6 +1,7 @@ import React from 'react'; import { translate } from '../../../translate/translate'; import QRModal from '../qrModal/qrModal'; +import InvoiceModal from '../invoiceModal/invoiceModal'; export const AddressActionsBasiliskModeRender = function(address) { return ( @@ -31,7 +32,7 @@ export const AddressActionsBasiliskModeRender = function(address) { ); }; -export const AddressActionsNonBasiliskModeRender = function(address, type) { +export const AddressActionsNonBasiliskModeRender = function(address, type,qrContent) { return ( @@ -69,6 +70,7 @@ export const _ReceiveCoinTableRender = function() {