diff --git a/src/Status/SignerPending/RequestItem/requestItem.js b/src/Status/SignerPending/RequestItem/requestItem.js index f96bd7859711a390594f8d98335e7d2c48098b82..9df359f6bc362aff9a77e89d14fcf064cd2e1565 100644 --- a/src/Status/SignerPending/RequestItem/requestItem.js +++ b/src/Status/SignerPending/RequestItem/requestItem.js @@ -31,14 +31,12 @@ import EtherValue from '../EtherValue'; import styles from './requestItem.css'; @observer -@connect(({ tokens }, { transaction }) => ({ - token: Object.values(tokens).find(({ address }) => address === transaction.to) -})) +@connect(({ tokens }) => ({ tokens })) class RequestItem extends Component { static propTypes = { onClick: PropTypes.func.isRequired, - transaction: PropTypes.object.isRequired, - token: PropTypes.object + request: PropTypes.object.isRequired, + tokens: PropTypes.array }; static contextTypes = { @@ -52,7 +50,10 @@ class RequestItem extends Component { methodDecodingStore = MethodDecodingStore.get(this.context.api); componentWillMount () { - const { transaction } = this.props; + const { payload } = this.props.request; + const transaction = payload.sendTransaction || payload.signTransaction; + + if (!transaction) { return; } // Decode the transaction and put it into the state this.methodDecodingStore @@ -62,56 +63,153 @@ class RequestItem extends Component { })); } - renderDescription = () => { - // Decide what to display in the description, depending - // on what type of transaction we're dealing with - const { token } = this.props; - const { - inputs, - signature, - contract, - deploy - } = this.state.decoded; - - if (deploy) { - return this.renderDeploy(); + /** + * Get the author of a request + * TODO Duplicate code of https://github.com/Parity-JS/ui/blob/master/src/Signer/Request/request.js#L54-L69 + */ + getRequestAuthor = () => { + const { payload } = this.props.request; + + if (payload.sign) { + return payload.sign.address; + } + if (payload.decrypt) { + return payload.decrypt.address; } + const transaction = payload.sendTransaction || payload.signTransaction; - if (contract && signature) { - if (token && TOKEN_METHODS[signature] && inputs) { - return this.renderTokenTransfer(); - } - return this.renderContractMethod(); + if (transaction) { + return transaction.from; } + }; - return this.renderValueTransfer(); - } + render () { + const { onClick } = this.props; - renderDeploy = () => { return ( + + + + + + + + + {this.renderDescription()} + + + ); + } + + /** + * Render description when calling a contract method + */ + renderContractMethod = (transaction) => ( + - ); - }; + {this.renderRecipient(transaction.to)} + + ); - renderContractMethod = () => { - const { transaction } = this.props; + /** + * Render description when decrypting a message with parity_decrypt + */ + renderDecrypt = () => ( + + ); - return ( - - - {this.renderRecipient(transaction.to)} - - ); - }; + /** + * Render description when deploying a contract + */ + renderDeploy = () => ( + + ); + + /** + * Render the description of the request + */ + renderDescription = () => { + const { payload } = this.props.request; + + // Decide what to display in the description, depending + // on what type of transaction we're dealing with + if (payload.sign) { + return this.renderSign(); + } + if (payload.decrypt) { + return this.renderDecrypt(); + } + const transaction = payload.sendTransaction || payload.signTransaction; + + if (transaction) { + const { tokens } = this.props; + const token = Object.values(tokens).find(({ address }) => address === transaction.to); + + if (!this.state.decoded) { return null; } + + const { + inputs, + signature, + contract, + deploy + } = this.state.decoded; + + if (deploy) { + return this.renderDeploy(transaction); + } + + if (contract && signature) { + if (token && TOKEN_METHODS[signature] && inputs) { + return this.renderTokenTransfer(transaction, token); + } + return this.renderContractMethod(transaction); + } - renderTokenTransfer = () => { - const { token } = this.props; + return this.renderValueTransfer(transaction); + } + return null; + } + + /** + * Render recipient (of token transfer or eth transfer) + */ + renderRecipient = address => ( + + ); + + /** + * Render description when signing some data with eth_sign + */ + renderSign = () => ( + + ); + + /** + * Render description when transferring tokens + */ + renderTokenTransfer = (transaction, token) => { const { inputs } = this.state.decoded; const valueInput = inputs.find(({ name }) => name === '_value'); const toInput = inputs.find(({ name }) => name === '_to'); @@ -119,7 +217,7 @@ class RequestItem extends Component { return ( { - const { transaction } = this.props; - - return ( - - - } - } - /> - {this.renderRecipient(transaction.to)} - - ); - }; - - renderRecipient = address => ( - + /** + * Render description when transferring ETH + */ + renderValueTransfer = (transaction) => ( + + + } + } + /> + {this.renderRecipient(transaction.to)} + ); - - render () { - const { transaction, onClick } = this.props; - - if (!this.state.decoded) { return null; } - - return ( - - - - - - - - - {this.renderDescription()} - - - ); - } } export default RequestItem; diff --git a/src/Status/SignerPending/signerPending.js b/src/Status/SignerPending/signerPending.js index 024e4527293385646713b5e4e47835ae92e1a1c6..ab3b99536e9fe078b5e7399d26020c917812c660 100644 --- a/src/Status/SignerPending/signerPending.js +++ b/src/Status/SignerPending/signerPending.js @@ -74,7 +74,7 @@ class SignerPending extends Component { {this.store.pending.map(request => (