From 4a6d0cff38425d3c6b3215b2be51394450a3ff4b Mon Sep 17 00:00:00 2001 From: Patrik Stas Date: Tue, 3 Aug 2021 00:25:38 +0200 Subject: [PATCH] Add copy value button to UI Signed-off-by: Patrik Stas --- indypool-client/package.json | 2 +- indyscan-api-client/package.json | 2 +- indyscan-api/package.json | 2 +- indyscan-daemon-api-client/package.json | 2 +- indyscan-daemon-ui/package.json | 2 +- indyscan-daemon/package.json | 2 +- indyscan-storage/package.json | 2 +- indyscan-txtype/package.json | 2 +- .../BadgedValueDisplay/BadgedValueDisplay.js | 63 +++++++++++++++++++ .../BadgedValueDisplay.scss | 27 ++++++++ .../components/TxDisplay/TxDisplay.js | 40 ++---------- indyscan-webapp/package.json | 2 +- version.json | 4 +- 13 files changed, 106 insertions(+), 46 deletions(-) create mode 100644 indyscan-webapp/components/BadgedValueDisplay/BadgedValueDisplay.js create mode 100644 indyscan-webapp/components/BadgedValueDisplay/BadgedValueDisplay.scss diff --git a/indypool-client/package.json b/indypool-client/package.json index a4b8067e..9d0cc709 100644 --- a/indypool-client/package.json +++ b/indypool-client/package.json @@ -1,6 +1,6 @@ { "name": "indyscan-daemon", - "version": "4.3.1", + "version": "4.4.0", "author": "Patrik Staš", "license": "ISC", "description": "Application scanning Hyperledger Indy blockchain for fetching and processing transactions.", diff --git a/indyscan-api-client/package.json b/indyscan-api-client/package.json index 9318b909..a1cce264 100644 --- a/indyscan-api-client/package.json +++ b/indyscan-api-client/package.json @@ -1,6 +1,6 @@ { "name": "indyscan-api-client", - "version": "4.3.1", + "version": "4.4.0", "author": "Patrik Staš", "license": "ISC", "description": "IndyScan HTTP API client.", diff --git a/indyscan-api/package.json b/indyscan-api/package.json index fd36635b..80bae033 100644 --- a/indyscan-api/package.json +++ b/indyscan-api/package.json @@ -1,6 +1,6 @@ { "name": "indyscan-api", - "version": "4.3.1", + "version": "4.4.0", "description": "Web application to browse Hyperledger Indy blockchain transactions.", "main": "index.js", "scripts": { diff --git a/indyscan-daemon-api-client/package.json b/indyscan-daemon-api-client/package.json index a374faae..9f522eda 100644 --- a/indyscan-daemon-api-client/package.json +++ b/indyscan-daemon-api-client/package.json @@ -1,6 +1,6 @@ { "name": "indyscan-daemon-api-client", - "version": "4.3.1", + "version": "4.4.0", "author": "Patrik Staš", "license": "ISC", "description": "IndyScan Daemon HTTP API client.", diff --git a/indyscan-daemon-ui/package.json b/indyscan-daemon-ui/package.json index 435454a5..21434b97 100644 --- a/indyscan-daemon-ui/package.json +++ b/indyscan-daemon-ui/package.json @@ -1,6 +1,6 @@ { "name": "indyscan-daemon-ui", - "version": "4.3.1", + "version": "4.4.0", "author": "Patrik Staš", "license": "ISC", "description": "UI to view and manage the state of indyscan-daemon.", diff --git a/indyscan-daemon/package.json b/indyscan-daemon/package.json index 56c5b9fe..8c12f325 100644 --- a/indyscan-daemon/package.json +++ b/indyscan-daemon/package.json @@ -1,6 +1,6 @@ { "name": "indyscan-daemon", - "version": "4.3.1", + "version": "4.4.0", "author": "Patrik Staš", "license": "ISC", "description": "Application scanning Hyperledger Indy blockchain for fetching and processing transactions.", diff --git a/indyscan-storage/package.json b/indyscan-storage/package.json index f94395a5..e34d6257 100644 --- a/indyscan-storage/package.json +++ b/indyscan-storage/package.json @@ -1,6 +1,6 @@ { "name": "indyscan-storage", - "version": "4.3.1", + "version": "4.4.0", "author": "Patrik Staš", "license": "ISC", "description": "", diff --git a/indyscan-txtype/package.json b/indyscan-txtype/package.json index d7b47dfe..b6a5e592 100644 --- a/indyscan-txtype/package.json +++ b/indyscan-txtype/package.json @@ -1,6 +1,6 @@ { "name": "indyscan-txtype", - "version": "4.3.1", + "version": "4.4.0", "description": "", "main": "index.js", "scripts": { diff --git a/indyscan-webapp/components/BadgedValueDisplay/BadgedValueDisplay.js b/indyscan-webapp/components/BadgedValueDisplay/BadgedValueDisplay.js new file mode 100644 index 00000000..cb69e2c3 --- /dev/null +++ b/indyscan-webapp/components/BadgedValueDisplay/BadgedValueDisplay.js @@ -0,0 +1,63 @@ +import React, { useState } from 'react' +import './BadgedValueDisplay.scss' +import { Icon, Label, List } from 'semantic-ui-react' +import ReactTooltip from 'react-tooltip' +import { renderValuesAsBadges } from '../Common' + +export function BadgedValueDisplay (props) { + + const [copied, setCopied] = useState(false) + + function renderKeyValuePair (key, value, keyValueId, color = 'red') { + return ( + + + + {Array.isArray(value) ? renderValuesAsBadges(key, value) : } + + ) + } + + function renderKeyValues (obj, groupId, color) { + let items = [] + let i = 0 + for (let [key, value] of Object.entries(obj)) { + if (value) { + if (Array.isArray(value) && value.length > 0) { + items.push(renderKeyValuePair(key, value, `${groupId}-${i}`, color)) + } else { + let stringified = value.toString().trim() + if (stringified) { + items.push(renderKeyValuePair(key, value, `${groupId}-${i}`, color)) + } else { + continue + } + } + i++ + } + } + return items + } + + return
+ {renderKeyValues(props.obj, props.groupId, props.color)} +
+} + diff --git a/indyscan-webapp/components/BadgedValueDisplay/BadgedValueDisplay.scss b/indyscan-webapp/components/BadgedValueDisplay/BadgedValueDisplay.scss new file mode 100644 index 00000000..b8b08390 --- /dev/null +++ b/indyscan-webapp/components/BadgedValueDisplay/BadgedValueDisplay.scss @@ -0,0 +1,27 @@ + /* Tooltip container */ +.tooltip { + position: relative; + display: inline-block; +} + +/* Tooltip text */ +.tooltip .tooltiptext { + visibility: visible; + width: 60px; + background-color: black; + color: #fff; + text-align: center; + padding: 5px 0; + border-radius: 6px; + + /* Position the tooltip text - see examples below! */ + position: absolute; + left: -50px; + bottom: 0.3em; + z-index: 1; +} + +///* Show the tooltip text when you mouse over the tooltip container */ +//.tooltip:hover .tooltiptext { +// visibility: visible; +//} diff --git a/indyscan-webapp/components/TxDisplay/TxDisplay.js b/indyscan-webapp/components/TxDisplay/TxDisplay.js index 61006123..54d1d658 100644 --- a/indyscan-webapp/components/TxDisplay/TxDisplay.js +++ b/indyscan-webapp/components/TxDisplay/TxDisplay.js @@ -1,51 +1,21 @@ import React from 'react' import './TxDisplay.scss' import { - GridRow, + Button, + GridRow, Icon, Item, ItemContent, ItemDescription, ItemGroup, ItemHeader, ItemMeta, - Label, List } from 'semantic-ui-react' -import { renderValuesAsBadges } from '../Common' import { converTxDataBasicToHumanReadable, extractTxDataBasic, extractTxDataDetailsHumanReadable, } from '../../txtools' import TimeAgoText from '../TimeAgoText/TimeAgoText' +import { BadgedValueDisplay } from '../BadgedValueDisplay/BadgedValueDisplay' -function renderKeyValuePair (key, value, keyValueId, color = 'red') { - return ( - - - {Array.isArray(value) ? renderValuesAsBadges(key, value) : } - - ) -} -function renderKeyValues (obj, groupId, color) { - let items = [] - let i = 0 - for (let [key, value] of Object.entries(obj)) { - if (value) { - if (Array.isArray(value) && value.length > 0) { - items.push(renderKeyValuePair(key, value, `${groupId}-${i}`, color)) - } else { - let stringified = value.toString().trim() - if (stringified) { - items.push(renderKeyValuePair(key, value, `${groupId}-${i}`, color)) - } else { - continue - } - } - i++ - } - } - return items -} const TxDisplay = ({ txIndyscan, txLedger }) => { const keyValTxDetailsHumanReadable = extractTxDataDetailsHumanReadable(txIndyscan) @@ -61,8 +31,8 @@ const TxDisplay = ({ txIndyscan, txLedger }) => { - {renderKeyValues(keyValBasicHumanReadable, 'txbasic', 'blue')} - {renderKeyValues(keyValTxDetailsHumanReadable, 'txdetails', 'green')} + + diff --git a/indyscan-webapp/package.json b/indyscan-webapp/package.json index 9240d6ba..e8a6d395 100644 --- a/indyscan-webapp/package.json +++ b/indyscan-webapp/package.json @@ -1,6 +1,6 @@ { "name": "indyscan-webapp", - "version": "4.3.1", + "version": "4.4.0", "description": "Web application to browse Hyperledger Indy blockchain transactions.", "main": "index.js", "scripts": { diff --git a/version.json b/version.json index b1f066f0..1239ea76 100644 --- a/version.json +++ b/version.json @@ -1,5 +1,5 @@ { "major": 4, - "minor": 3, - "patch": 1 + "minor": 4, + "patch": 0 }