From 66b90c357f26e29932e4d730e237196aa175dea7 Mon Sep 17 00:00:00 2001 From: Ermal Kaleci Date: Mon, 30 Jan 2023 17:48:30 +0100 Subject: [PATCH] update template to expand objectLike values (#180) --- e2e/__snapshots__/dev.test.ts.snap | 226 ++++++++--------------------- src/utils/decoder.ts | 6 +- template/diff.html | 217 +++++++++++++++++---------- 3 files changed, 208 insertions(+), 241 deletions(-) diff --git a/e2e/__snapshots__/dev.test.ts.snap b/e2e/__snapshots__/dev.test.ts.snap index 2f9327fb..19c52805 100644 --- a/e2e/__snapshots__/dev.test.ts.snap +++ b/e2e/__snapshots__/dev.test.ts.snap @@ -234,153 +234,79 @@ exports[`dev rpc > dryRun 1`] = ` "6", ], "events": { - "0": { - "event": { - "data": { - "amount": [ - "2,429,299", - "1,821,974", - ], - }, - }, - }, - "1": { - "event": { - "data": { - "amount": [ - "2,429,299", - "1,821,974", - ], - }, - }, - }, - "2": { - "event": { - "data": { - "amount": [ - "44,234,035", - "33,175,527", - ], + "0": [ + { + "event": { + "data": { + "amount": "1,821,974", + "currencyId": { + "Token": "AUSD", + }, + "who": "5EYCAe5fiQJsnopDHfvJYerPqVF1pvpnwJUGmUUrV5Kzp5MZ", + }, + "index": "0x0b0a", + "method": "Deposited", + "section": "tokens", }, + "phase": "Initialization", + "topics": [], }, - }, - "3": { - "event": { - "data": { - "amount": [ - "365,959,263", - "274,469,453", - ], + ], + "1": [ + { + "event": { + "data": { + "amount": "1,821,974", + "currencyId": { + "Token": "AUSD", + }, + "who": "5EYCAe5fiQJsnopDHfvJYerPqVF1pvpnwJUGmUUrV5Kzp5MZ", + }, + "index": "0x0b00", + "method": "Endowed", + "section": "tokens", }, + "phase": "Initialization", + "topics": [], }, - }, - "4": { - "event": { - "data": { - "amount": [ - "1,000,000,000,000", - 0, - 0, - ], - "currencyId": [ - { - "Token": "TAI", - }, - 0, - 0, - ], - "dispatchInfo": [ - { - "class": "Mandatory", - "paysFee": "Yes", - "weight": "158,080,000", + ], + "2": [ + { + "event": { + "data": { + "amount": "33,175,527", + "currencyId": { + "Token": "AUSD", }, - ], - "from": [ - "5EYCAe5fiQJsoMt16QywpBQwyn5cgfkXFFJApwwKPXFoF2h7", - 0, - 0, - ], - "to": [ - "5EYCAe5fiQJsnzYGdTNgiw719xk2hhoFczYFMNqwMx6JDf7h", - 0, - 0, - ], + "who": "5EYCAe5fiQJsnopDHfvJYerPqVF1pvpnwJUGmUUrV5Kzp5MZ", + }, + "index": "0x0b0a", + "method": "Deposited", + "section": "tokens", }, - "index": [ - "0x0b02", - "0x0000", - ], - "method": [ - "Transfer", - "ExtrinsicSuccess", - ], - "section": [ - "tokens", - "system", - ], + "phase": "Initialization", + "topics": [], }, - "phase": [ - "Initialization", - { - "ApplyExtrinsic": "0", - }, - ], - }, - "5": { - "event": { - "data": { - "amount": [ - "1,000,000,000,000", - 0, - 0, - ], - "currencyId": [ - { - "Token": "TAI", - }, - 0, - 0, - ], - "dispatchInfo": [ - { - "class": "Mandatory", - "paysFee": "Yes", - "weight": "0", + ], + "3": [ + { + "event": { + "data": { + "amount": "274,469,453", + "currencyId": { + "Token": "AUSD", }, - ], - "from": [ - "5EYCAe5fiQJsoMt16QywpBQwyn5cgfkXFFJApwwKPXFoF2h7", - 0, - 0, - ], - "to": [ - "5EYCAe5fiQJsnzYGdTNgiw719xk2hhoFczYFMNqwMx6JDf7h", - 0, - 0, - ], + "who": "5EYCAe5fiQJsnopDHfvJYerPqVF1pvpnwJUGmUUrV5Kzp5MZ", + }, + "index": "0x0b0a", + "method": "Deposited", + "section": "tokens", }, - "index": [ - "0x0c00", - "0x0000", - ], - "method": [ - "Transferred", - "ExtrinsicSuccess", - ], - "section": [ - "currencies", - "system", - ], + "phase": "Initialization", + "topics": [], }, - "phase": [ - "Initialization", - { - "ApplyExtrinsic": "1", - }, - ], - }, - "_6": [ + ], + "4": [ { "event": { "data": { @@ -399,10 +325,8 @@ exports[`dev rpc > dryRun 1`] = ` }, "topics": [], }, - 0, - 0, ], - "_7": [ + "5": [ { "event": { "data": { @@ -421,28 +345,6 @@ exports[`dev rpc > dryRun 1`] = ` }, "topics": [], }, - 0, - 0, - ], - "_8": [ - { - "event": { - "data": { - "amount": "412,622,597", - "currencyId": { - "Token": "AUSD", - }, - "who": "5EYCAe5fiQJsnopDHfvJYerPqVF1pvpnwJUGmUUrV5Kzp5MZ", - }, - "index": "0x0b08", - "method": "Withdrawn", - "section": "tokens", - }, - "phase": "Finalization", - "topics": [], - }, - 0, - 0, ], "_t": "a", }, diff --git a/src/utils/decoder.ts b/src/utils/decoder.ts index c53084e5..4eebdb05 100644 --- a/src/utils/decoder.ts +++ b/src/utils/decoder.ts @@ -107,5 +107,9 @@ export const decodeStorageDiff = async (block: Block, diff: [HexString, HexStrin _.merge(oldState, await decodeKeyValue(block, key, (await block.get(key)) as any)) _.merge(newState, await decodeKeyValue(block, key, value)) } - return [oldState, newState, diffPatcher.diff(oldState, newState)] + const oldStateWithoutEvents = _.cloneDeep(oldState) + if (oldStateWithoutEvents['system']?.['events']) { + oldStateWithoutEvents['system']['events'] = [] + } + return [oldState, newState, diffPatcher.diff(oldStateWithoutEvents, newState)] } diff --git a/template/diff.html b/template/diff.html index d543e487..4e4bf1d9 100644 --- a/template/diff.html +++ b/template/diff.html @@ -13,7 +13,7 @@ div#app { margin: 0 !important; - padding: 10px !important; + padding: 0 !important; } .diff { @@ -24,6 +24,36 @@ line-height: 150%; } + .diff > button { + position: absolute; + display: none; + left: 50%; + top: 50%; + translate: -50% -50%; + background: #fff; + border: none; + border-radius: 50%; + padding: 10px; + cursor: pointer; + cursor: pointer; + opacity: 80%; + width: 40px; + height: 40px; + } + + .diff > button > img { + width: 100%; + height: 100%; + } + + .diff > button:hover { + opacity: 100%; + } + + .diff:hover > button { + display: block; + } + .diffWrap { position: relative; z-index: 1; @@ -37,30 +67,36 @@ .diffAdd { color: darkseagreen; + display: inline-flex; } .diffRemove { text-decoration: line-through; text-decoration-thickness: 1px; color: red; + display: inline-flex; } .diffUpdateFrom { text-decoration: line-through; text-decoration-thickness: 1px; color: red; + display: inline-flex; } .diffUpdateTo { color: darkseagreen; + display: inline-flex; } .diffUpdateArrow { color: #ccc; } + .unchanged { color: #666; } + .delta { color: #ccc; font-size: 12px; @@ -94,76 +130,82 @@ return { className: className.join(' ') } } - function valueRenderer(raw, value, ...keys) { - const modifyPath = keys.reverse().join('.') - const removePath = keys.map(x => Number.isInteger(parseInt(x)) ? '_' + x : x).join('.') - const isDelta = _.has(delta, modifyPath) || _.has(delta, removePath) + function valueRenderer(viewPartial) { + return function (raw, value, ...keys) { + const modifyPath = keys.reverse().join('.') + const removePath = keys.map(x => Number.isInteger(parseInt(x)) ? '_' + x : x).join('.') + const isDelta = _.has(delta, modifyPath) || _.has(delta, removePath) - function renderSpan(name, body) { - return ( - - {body} - - ); - } + function renderSpan(name, body, raw) { + return ( + + {body} + {_.isObjectLike(raw) ? : null} + + ); + } - function renderDelta(value) { - if (/^\d+(,\d+)*$/.test(value[0]) && /^\d+(,\d+)*$/.test(value[1])) { - const oldValue = parseInt(value[0].replace(/,/g, '')) - const newValue = parseInt(value[1].replace(/,/g, '')) - if (oldValue > 0 && newValue > 0) { - const delta = Number(newValue - oldValue) - return ({delta > 0 ? '+' : ''}{delta.toLocaleString()}) + function renderDelta(value) { + if (/^\d+(,\d+)*$/.test(value[0]) && /^\d+(,\d+)*$/.test(value[1])) { + const oldValue = parseInt(value[0].replace(/,/g, '')) + const newValue = parseInt(value[1].replace(/,/g, '')) + if (oldValue > 0 && newValue > 0) { + const delta = Number(newValue - oldValue) + return ({delta > 0 ? '+' : ''}{delta.toLocaleString()}) + } } } - } - if (isDelta && Array.isArray(value)) { - switch (value.length) { - case 0: - return ( - - {renderSpan('diff', '[]')} - - ) - case 1: - return ( - - {renderSpan( - 'diffAdd', - stringifyAndShrink(value[0]) - )} - - ); - case 2: - return ( - - {renderSpan( - 'diffUpdateFrom', - stringifyAndShrink(value[0]) - )} - {renderSpan('diffUpdateArrow', ' => ')} - {renderSpan( - 'diffUpdateTo', - stringifyAndShrink(value[1]) - )} - {renderDelta(value)} - - ); - case 3: - return ( - - {renderSpan('diffRemove', stringifyAndShrink(value[0]))} - - ); + if (isDelta && Array.isArray(value)) { + switch (value.length) { + case 0: + return ( + + {renderSpan('diff', '[]')} + + ) + case 1: + return ( + + {renderSpan( + 'diffAdd', + stringifyAndShrink(value[0]), + value[0] + )} + + ); + case 2: + return ( + + {renderSpan( + 'diffUpdateFrom', + stringifyAndShrink(value[0]), + value[0] + )} + {renderSpan('diffUpdateArrow', ' => ')} + {renderSpan( + 'diffUpdateTo', + stringifyAndShrink(value[1]), + value[1] + )} + {renderDelta(value)} + + ); + case 3: + return ( + + {renderSpan('diffRemove', stringifyAndShrink(value[0]), value[0])} + + ); + } } - } - return ( - - {renderSpan('unchanged', stringifyAndShrink(value))} - - ); + return ( + + {renderSpan('unchanged', stringifyAndShrink(value), value)} + + ); + } }; function prepareDelta(value) { @@ -208,30 +250,49 @@ class App extends React.Component { constructor(props) { super(props); - this.state = { showUnchanged: false }; + this.state = { showUnchanged: false, partial: null }; } toggle = (e) => { this.setState(state => { - return { showUnchanged: !state.showUnchanged } + return { ...state, showUnchanged: !state.showUnchanged } + }) + } + + viewPartial = (value) => { + this.setState(state => { + return { ...state, partial: _.isEqual(state.partial, value) ? null : value } }) } render() { return (
- - - +
+
+ + + +
+ {this.state.partial ?
+ true} + hideRoot + /> +
: null} +
); }