From 81fa4852bf4d0a0d31ef7e3a2e15c76f982f4851 Mon Sep 17 00:00:00 2001 From: Leroy Jethro Gibbs Date: Tue, 13 Mar 2018 02:08:13 +0100 Subject: [PATCH] Add timezone to expiration on create-limit-order modal #17 --- app/components/Blockchain/Transaction.jsx | 1369 ++++++++++++++++----- 1 file changed, 1085 insertions(+), 284 deletions(-) diff --git a/app/components/Blockchain/Transaction.jsx b/app/components/Blockchain/Transaction.jsx index 95832501a6..9d512da17c 100644 --- a/app/components/Blockchain/Transaction.jsx +++ b/app/components/Blockchain/Transaction.jsx @@ -28,9 +28,7 @@ let listings = Object.keys(account_constants.account_listing); class OpType extends React.Component { shouldComponentUpdate(nextProps) { - return ( - nextProps.type !== this.props.type - ); + return nextProps.type !== this.props.type; } render() { @@ -44,8 +42,7 @@ class OpType extends React.Component { {trxTypes[ops[this.props.type]]} - - + ); } @@ -58,58 +55,72 @@ class NoLinkDecorator extends React.Component { } class OperationTable extends React.Component { - render() { - - let fee_row = this.props.fee.amount > 0 ? ( - - - - ) : null; + let fee_row = + this.props.fee.amount > 0 ? ( + + + + + + + + + ) : null; return ( -
- {/*
#{this.props.index + 1}/{this.props.opCount}
*/} +
+ {/*
#{this.props.index + 1}/{this.props.opCount}
*/} - + - + {this.props.children} {fee_row}
- ); + ); } } class Transaction extends React.Component { - componentDidMount() { ReactTooltip.rebuild(); } linkToAccount(name_or_id) { - if(!name_or_id) return -; + if (!name_or_id) return -; let Link = this.props.no_links ? NoLinkDecorator : RealLink; - return utils.is_object_id(name_or_id) ? - : - {name_or_id}; + return utils.is_object_id(name_or_id) ? ( + + ) : ( + {name_or_id} + ); } linkToAsset(symbol_or_id) { - if(!symbol_or_id) return -; + if (!symbol_or_id) return -; let Link = this.props.no_links ? NoLinkDecorator : RealLink; - return utils.is_object_id(symbol_or_id) ? - : - {symbol_or_id}; + return utils.is_object_id(symbol_or_id) ? ( + + ) : ( + {symbol_or_id} + ); } _toggleLock(e) { e.preventDefault(); WalletUnlockActions.unlock().then(() => { this.forceUpdate(); - }) + }); } render() { @@ -121,19 +132,18 @@ class Transaction extends React.Component { let memo = null; trx.operations.forEach((op, opIndex) => { - let rows = []; let key = 0; let color = ""; switch (ops[op[0]]) { // For a list of trx types, see chain_types.coffee - case "transfer": - color = "success"; - if(op[1].memo) { - let {text, isMine} = PrivateKeyStore.decodeMemo(op[1].memo); + if (op[1].memo) { + let {text, isMine} = PrivateKeyStore.decodeMemo( + op[1].memo + ); memo = text ? ( {text} @@ -141,7 +151,7 @@ class Transaction extends React.Component {   - + ) : null; @@ -149,38 +159,68 @@ class Transaction extends React.Component { rows.push( - + + + {this.linkToAccount(op[1].from)} ); rows.push( - + + + {this.linkToAccount(op[1].to)} ); rows.push( - - + + + + + + ); - {memo ? - rows.push( - - - {memo} - - ) : null} + { + memo + ? rows.push( + + + + + {memo} + + ) + : null; + } break; - case "limit_order_create": + case "limit_order_create": color = "warning"; rows.push( - + + + - - + + + + + + ); rows.push( - - + + + + + + ); @@ -215,17 +282,28 @@ class Transaction extends React.Component { // ); rows.push( - + + + {this.linkToAccount(op[1].seller)} ); rows.push( - + + + @@ -237,14 +315,26 @@ class Transaction extends React.Component { color = "cancel"; rows.push( - + + + {op[1].order} ); rows.push( - - {this.linkToAccount(op[1].fee_paying_account)} + + + + + {this.linkToAccount(op[1].fee_paying_account)} + ); @@ -254,14 +344,26 @@ class Transaction extends React.Component { color = "cancel"; rows.push( - + + + {op[1].order} ); rows.push( - - {this.linkToAccount(op[1].fee_paying_account)} + + + + + {this.linkToAccount(op[1].fee_paying_account)} + ); @@ -270,20 +372,45 @@ class Transaction extends React.Component { case "call_order_update": rows.push( - + + + {this.linkToAccount(op[1].funding_account)} ); rows.push( - - + + + + + + ); rows.push( - - + + + + + + ); break; @@ -291,13 +418,25 @@ class Transaction extends React.Component { case "key_create": rows.push( - - {this.linkToAccount(op[1].fee_paying_account)} + + + + + {this.linkToAccount(op[1].fee_paying_account)} + ); rows.push( - + + + {op[1].key_data[1]} ); @@ -307,19 +446,34 @@ class Transaction extends React.Component { case "account_create": rows.push( - + + + {this.linkToAccount(op[1].name)} ); rows.push( - + + + {this.linkToAccount(op[1].registrar)} ); rows.push( - + + + {this.linkToAccount(op[1].referrer)} ); @@ -329,67 +483,129 @@ class Transaction extends React.Component { case "account_update": rows.push( - + + + {this.linkToAccount(op[1].account)} ); // let voting_account = ChainStore.getAccount(op[1].new_options.voting_account) // let updating_account = ChainStore.getAccount(op[1].account) - if(op[1].new_options) { - if( op[1].new_options.voting_account ) - { - // let proxy_account_name = voting_account.get('name') + if (op[1].new_options) { + if (op[1].new_options.voting_account) { + // let proxy_account_name = voting_account.get('name') rows.push( - - {this.linkToAccount(op[1].new_options.voting_account)} + + + + + {this.linkToAccount( + op[1].new_options.voting_account + )} + - ); - } - else - { - console.log( "num witnesses: ", op[1].new_options.num_witness ) - console.log( "===============> NEW: ", op[1].new_options ) + ); + } else { + console.log( + "num witnesses: ", + op[1].new_options.num_witness + ); + console.log( + "===============> NEW: ", + op[1].new_options + ); rows.push( - - - - - ); + + + + + + + + + ); rows.push( - - - {op[1].new_options.num_committee} - - ); + + + + + {op[1].new_options.num_committee} + + ); rows.push( - - - {op[1].new_options.num_witness} - - ); + + + + + {op[1].new_options.num_witness} + + ); rows.push( - - - {JSON.stringify( op[1].new_options.votes) } - - ); + + + + + + {JSON.stringify( + op[1].new_options.votes + )} + + + ); } rows.push( - - {/* TODO replace with KEY render component that provides a popup */} - {op[1].new_options.memo_key.substring(0,10)+"..."} + + + + {/* TODO replace with KEY render component that provides a popup */} + + {op[1].new_options.memo_key.substring( + 0, + 10 + ) + "..."} + ); } - rows.push( - - + + + + + + ); @@ -398,28 +614,52 @@ class Transaction extends React.Component { case "account_whitelist": let listing; for (var i = 0; i < listings.length; i++) { - if (account_constants.account_listing[listings[i]] === op[1].new_listing) { + if ( + account_constants.account_listing[listings[i]] === + op[1].new_listing + ) { console.log("listings:", listings[i]); listing = listings[i]; } - }; + } rows.push( - - {this.linkToAccount(op[1].authorizing_account)} + + + + + {this.linkToAccount(op[1].authorizing_account)} + ); rows.push( - + + + {this.linkToAccount(op[1].account_to_list)} ); rows.push( - - + + + + + + ); @@ -428,14 +668,28 @@ class Transaction extends React.Component { case "account_upgrade": rows.push( - - {this.linkToAccount(op[1].account_to_upgrade)} + + + + + {this.linkToAccount(op[1].account_to_upgrade)} + ); rows.push( - - {op[1].upgrade_to_lifetime_member.toString()} + + + + + {op[1].upgrade_to_lifetime_member.toString()} + ); break; @@ -444,7 +698,12 @@ class Transaction extends React.Component { /* This case is uncomplete, needs filling out with proper fields */ rows.push( - + + + {this.linkToAccount(op[1].account_id)} ); @@ -456,50 +715,104 @@ class Transaction extends React.Component { rows.push( - + + + {this.linkToAccount(op[1].issuer)} ); rows.push( - + + + {this.linkToAsset(op[1].symbol)} ); rows.push( - + + + {op[1].precision} ); rows.push( - - {utils.format_asset(op[1].common_options.max_supply, op[1])} + + + + + {utils.format_asset( + op[1].common_options.max_supply, + op[1] + )} + ); rows.push( - + + + {op[1].common_options.description} ); rows.push( - - {op[1].common_options.market_fee_percent / 100}% + + + + + {op[1].common_options.market_fee_percent / 100}% + ); rows.push( - - {utils.format_asset(op[1].common_options.max_market_fee, op[1])} + + + + + {utils.format_asset( + op[1].common_options.max_market_fee, + op[1] + )} + ); rows.push( - - + + + + + + ); @@ -512,34 +825,66 @@ class Transaction extends React.Component { rows.push( - + + + {this.linkToAsset(op[1].asset_to_update)} ); rows.push( - + + + {this.linkToAccount(op[1].issuer)} ); if (op[1].new_issuer !== op[1].issuer) { rows.push( - + + + {this.linkToAccount(op[1].new_issuer)} ); - } + } if (op[1].new_options.core_exchange_rate) { rows.push( - + + + @@ -549,8 +894,18 @@ class Transaction extends React.Component { rows.push( - - + + + + + + ); @@ -562,18 +917,33 @@ class Transaction extends React.Component { let producers = []; op[1].new_feed_producers.forEach(producer => { // let missingAsset = this.getAccounts([producer])[0]; - producers.push(
{this.linkToAccount(producer)}
); + producers.push( +
+ {this.linkToAccount(producer)} +
+
+ ); }); rows.push( - + + + {this.linkToAsset(op[1].asset_to_update)} ); rows.push( - + + + {producers} ); @@ -583,8 +953,10 @@ class Transaction extends React.Component { case "asset_issue": color = "warning"; - if(op[1].memo) { - let {text, isMine} = PrivateKeyStore.decodeMemo(op[1].memo); + if (op[1].memo) { + let {text, isMine} = PrivateKeyStore.decodeMemo( + op[1].memo + ); memo = text ? ( {text} @@ -592,7 +964,7 @@ class Transaction extends React.Component {   - + ) : null; @@ -600,32 +972,60 @@ class Transaction extends React.Component { rows.push( - + + + {this.linkToAccount(op[1].issuer)} ); rows.push( - - + + + + + + ); rows.push( - - {this.linkToAccount(op[1].issue_to_account)} + + + + + {this.linkToAccount(op[1].issue_to_account)} + ); - {memo ? - rows.push( - - - {memo} - - ) : null} + { + memo + ? rows.push( + + + + + {memo} + + ) + : null; + } break; @@ -634,15 +1034,30 @@ class Transaction extends React.Component { rows.push( - + + + {this.linkToAccount(op[1].payer)} ); rows.push( - - + + + + + + ); @@ -652,22 +1067,42 @@ class Transaction extends React.Component { color = "warning"; rows.push( - + + + {this.linkToAccount(op[1].from_account)} ); rows.push( - + + + {this.linkToAsset(op[1].asset_id)} ); rows.push( - - + + + + + + ); @@ -678,22 +1113,42 @@ class Transaction extends React.Component { rows.push( - + + + {this.linkToAccount(op[1].account)} ); rows.push( - + + + {this.linkToAsset(op[1].amount.asset_id)} ); rows.push( - - + + + + + + ); @@ -705,41 +1160,82 @@ class Transaction extends React.Component { rows.push( - + + + {this.linkToAccount(op[1].publisher)} ); rows.push( - + + + {this.linkToAsset(op[1].asset_id)} ); rows.push( - - {(feed.maximum_short_squeeze_ratio / 1000).toFixed(2)} + + + + + {( + feed.maximum_short_squeeze_ratio / 1000 + ).toFixed(2)} + ); rows.push( - - {(feed.maintenance_collateral_ratio / 1000).toFixed(2)} + + + + + {( + feed.maintenance_collateral_ratio / 1000 + ).toFixed(2)} + ); rows.push( - + + + @@ -748,13 +1244,26 @@ class Transaction extends React.Component { rows.push( - + + + @@ -764,21 +1273,33 @@ class Transaction extends React.Component { break; case "committee_member_create": - rows.push( - - {this.linkToAccount(op[1].committee_member_account)} + + + + + {this.linkToAccount( + op[1].committee_member_account + )} + ); break; case "witness_create": - rows.push( - + + + {this.linkToAccount(op[1].witness_account)} ); @@ -786,10 +1307,14 @@ class Transaction extends React.Component { break; case "witness_update": - rows.push( - + + + {this.linkToAccount(op[1].witness_account)} ); @@ -797,8 +1322,21 @@ class Transaction extends React.Component { if (op[1].new_url) { rows.push( - - {op[1].new_url} + + + + + + {op[1].new_url} + + ); } @@ -813,26 +1351,55 @@ class Transaction extends React.Component { rows.push( - - + + + + + + ); rows.push( - - {this.linkToAccount(op[1].deposit_to_account)} + + + + + {this.linkToAccount(op[1].deposit_to_account)} + ); rows.push( - + + + #{bal_id} ); rows.push( - - {op[1].balance_owner_key.substring(0,10)}... + + + + + {op[1].balance_owner_key.substring(0, 10)}... + ); break; @@ -841,15 +1408,30 @@ class Transaction extends React.Component { color = "success"; rows.push( - - + + + + {this.linkToAccount(op[1].owner)} ); rows.push( - - + + + + + + ); @@ -858,26 +1440,58 @@ class Transaction extends React.Component { case "transfer_to_blind": rows.push( - + + + {this.linkToAccount(op[1].from)} ); rows.push( - - + + + + + + ); rows.push( - - {op[1].blinding_factor} + + + + + {op[1].blinding_factor} + ); rows.push( - - + + + + + + ); break; @@ -885,26 +1499,58 @@ class Transaction extends React.Component { case "transfer_from_blind": rows.push( - + + + {this.linkToAccount(op[1].to)} ); rows.push( - - + + + + + + ); rows.push( - - {op[1].blinding_factor} + + + + + {op[1].blinding_factor} + ); rows.push( - - + + + + + + ); break; @@ -912,50 +1558,86 @@ class Transaction extends React.Component { case "blind_transfer": rows.push( - - + + + + + + ); rows.push( - - + + + + + + ); break; case "proposal_create": - var expiration_date = new Date(op[1].expiration_time+'Z') - var has_review_period = op[1].review_period_seconds !== undefined - var review_begin_time = ! has_review_period ? null : - expiration_date.getTime() - op[1].review_period_seconds * 1000 + var expiration_date = new Date(op[1].expiration_time + "Z"); + var has_review_period = + op[1].review_period_seconds !== undefined; + var review_begin_time = !has_review_period + ? null + : expiration_date.getTime() - + op[1].review_period_seconds * 1000; rows.push( - - { has_review_period ? - - :—} + + + {has_review_period ? ( + + ) : ( + — + )} - ) + ); rows.push( - - + + + + - ) + ); var operations = []; - for(let pop of op[1].proposed_ops) operations.push( pop.op ) + for (let pop of op[1].proposed_ops) operations.push(pop.op); - let proposalsText = op[1].proposed_ops.map( (o, index) => { + let proposalsText = op[1].proposed_ops.map((o, index) => { return ( - + + + {proposalsText} - ) + ); rows.push( - - {this.linkToAccount(op[1].fee_paying_account)} + + + + + {this.linkToAccount(op[1].fee_paying_account)} + - ) - break + ); + break; case "proposal_update": let fields = [ - "active_approvals_to_add", "active_approvals_to_remove", - "owner_approvals_to_add", "owner_approvals_to_remove", - "key_approvals_to_add", "key_approvals_to_remove" + "active_approvals_to_add", + "active_approvals_to_remove", + "owner_approvals_to_add", + "owner_approvals_to_remove", + "key_approvals_to_add", + "key_approvals_to_remove" ]; rows.push( - - {this.linkToAccount(op[1].fee_paying_account)} + + + + + {this.linkToAccount(op[1].fee_paying_account)} + ); rows.push( - + + + {op[1].proposal} ); - fields.forEach((field) => { + fields.forEach(field => { if (op[1][field].length) { rows.push( - - {op[1][field].map(value => { - return
{this.linkToAccount(value)}
} - )} + + + + + {op[1][field].map(value => { + return ( +
+ {this.linkToAccount(value)} +
+ ); + })} - ) + ); } - }) + }); break; @@ -1028,14 +1746,29 @@ class Transaction extends React.Component { rows.push( - - + + + + + + ); rows.push( - + + + {this.linkToAccount(op[1].issuer)} ); @@ -1043,11 +1776,13 @@ class Transaction extends React.Component { break; case "asset_reserve": - rows.push( - + {this.linkToAccount(op[1].payer)} @@ -1055,15 +1790,34 @@ class Transaction extends React.Component { rows.push( - - {this.linkToAsset(op[1].amount_to_reserve.asset_id)} + + + + + {this.linkToAsset( + op[1].amount_to_reserve.asset_id + )} + ); rows.push( - - + + + + + + ); break; @@ -1072,37 +1826,62 @@ class Transaction extends React.Component { rows.push( - + {op[1].name} ); - let startDate = counterpart.localize(new Date(op[1].work_begin_date), { type: "date" }); - let endDate = counterpart.localize(new Date(op[1].work_end_date), { type: "date" }); + let startDate = counterpart.localize( + new Date(op[1].work_begin_date), + {type: "date"} + ); + let endDate = counterpart.localize( + new Date(op[1].work_end_date), + {type: "date"} + ); rows.push( - + + + + {startDate} - {endDate} - {startDate} - {endDate} ); rows.push( - + + + + - ); rows.push( - + {op[1].url} @@ -1112,9 +1891,17 @@ class Transaction extends React.Component { rows.push( - + + + + { + op[1].initializer[1] + .pay_vesting_period_days + } - {op[1].initializer[1].pay_vesting_period_days} ); } @@ -1126,15 +1913,29 @@ class Transaction extends React.Component { rows.push( - - + + + + + + ); break; } info.push( - + {rows} ); @@ -1142,7 +1943,7 @@ class Transaction extends React.Component { return (
- {/*
#{index + 1}
*/ } + {/*
#{index + 1}
*/} {info}
);