[DDW-521] Display Transaction Metadata (#2338)

* [DDW-521] Prepare json-bigint integration

* [DDW-521] Fix json-bigint dependency and lockfile

* [DDW-521] Render transaction metadata

* [DDW-521] Fix flow issues

* [DDW-521] Add changelog entry

* [DDW-521] Finish api integration with json stringify rendering

* [DDW-521] improve handling of metadata maps

* [DDW-521] add more metadata map examples

* [DDW-521] Fix small linting issue

* [DDW-521] Add 0x prefix for metadata byte strings

* [DDW-521] Fix tx metadata toggling recalculation

* [DDW-521] Fix distance of tx metadata section

* [DDW-521] Translations and improvements

Co-authored-by: Nikola Glumac <niglumac@gmail.com>

Author: DominikGuzei

CHANGELOG.md

@@ -5,6 +5,7 @@ Changelog
 
 ### Features
 
+- Implemented transaction metadata display ([PR 2338](https://github.com/input-output-hk/daedalus/pull/2338))
 - Displayed fee and deposit info in transaction details and in the delegation wizard ([PR 2339](https://github.com/input-output-hk/daedalus/pull/2339))
 - Added SMASH server configuration options ([PR 2259](https://github.com/input-output-hk/daedalus/pull/2259))
 

package.json

@@ -201,6 +201,7 @@
     "history": "4.10.1",
     "humanize-duration": "3.23.1",
     "inquirer": "7.3.3",
+    "json-bigint": "1.0.0",
     "lodash": "4.17.20",
     "lodash-es": "4.17.15",
     "mime-types": "2.1.27",

source/renderer/app/api/api.js

@@ -2313,6 +2313,7 @@ const _createTransactionFromServerData = action(
       outputs,
       withdrawals,
       status,
+      metadata,
     } = data;
     const state = _conditionToTxState(status);
     const stateInfo =
@@ -2343,6 +2344,7 @@ const _createTransactionFromServerData = action(
         withdrawals: withdrawals.map(({ stake_address: address }) => address),
       },
       state,
+      metadata,
     });
   }
 );

source/renderer/app/api/transactions/types.js

@@ -3,6 +3,7 @@ import BigNumber from 'bignumber.js';
 import { WalletTransaction } from '../../domains/WalletTransaction';
 import { WalletUnits } from '../../domains/Wallet';
 import type { DelegationAction } from '../../types/stakingTypes';
+import type { TransactionMetadata } from '../../types/TransactionMetadata';
 
 export type TransactionAmount = {
   quantity: number,
@@ -50,6 +51,7 @@ export type Transaction = {
   outputs: Array<TransactionOutputs>,
   withdrawals: Array<TransactionWithdrawals>,
   status: TransactionState,
+  metadata?: TransactionMetadata,
 };
 
 export type Transactions = Array<Transaction>;

source/renderer/app/api/utils/request.js

@@ -1,5 +1,6 @@
 // @flow
 import { includes, omit, size } from 'lodash';
+import JSONBigInt from 'json-bigint';
 import querystring from 'querystring';
 import { getContentLength } from '.';
 
@@ -106,10 +107,10 @@ function typedRequest<Response>(
                 "data": ${data}
               }`;
             }
-            resolve(JSON.parse(body));
+            resolve(JSONBigInt.parse(body));
           } else if (body) {
             // Error response with a body
-            const parsedBody = JSON.parse(body);
+            const parsedBody = JSONBigInt.parse(body);
             if (parsedBody.code && parsedBody.message) {
               reject(parsedBody);
             } else {

source/renderer/app/components/wallet/transactions/Transaction.js

@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import { Link } from 'react-polymorph/lib/components/Link';
 import { LinkSkin } from 'react-polymorph/lib/skins/simple/LinkSkin';
 import CancelTransactionButton from './CancelTransactionButton';
+import { TransactionMetadataView } from './metadata/TransactionMetadataView';
 import styles from './Transaction.scss';
 import TransactionTypeIcon from './TransactionTypeIcon';
 import adaSymbol from '../../../assets/images/ada-symbol.inline.svg';
@@ -46,6 +47,22 @@ const messages = defineMessages({
     defaultMessage: '!!!Transaction ID',
     description: 'Transaction ID.',
   },
+  metadataLabel: {
+    id: 'wallet.transaction.metadataLabel',
+    defaultMessage: '!!!Transaction metadata',
+    description: 'Transaction metadata label',
+  },
+  metadataDisclaimer: {
+    id: 'wallet.transaction.metadataDisclaimer',
+    defaultMessage:
+      '!!!Transaction metadata is not moderated and may contain inappropriate content.',
+    description: 'Transaction metadata disclaimer',
+  },
+  metadataConfirmationLabel: {
+    id: 'wallet.transaction.metadataConfirmationLabel',
+    defaultMessage: '!!!Show unmoderated content',
+    description: 'Transaction metadata confirmation toggle',
+  },
   conversionRate: {
     id: 'wallet.transaction.conversion.rate',
     defaultMessage: '!!!Conversion rate',
@@ -171,9 +188,11 @@ type Props = {
   isExpanded: boolean,
   isRestoreActive: boolean,
   isLastInList: boolean,
+  isShowingMetadata: boolean,
   formattedWalletAmount: Function,
   onDetailsToggled: ?Function,
   onOpenExternalLink: Function,
+  onShowMetadata: () => void,
   getUrlByType: Function,
   currentTimeFormat: string,
   walletId: string,
@@ -182,6 +201,7 @@ type Props = {
 
 type State = {
   showConfirmationDialog: boolean,
+  showUnmoderatedMetadata: boolean,
 };
 
 export default class Transaction extends Component<Props, State> {
@@ -191,8 +211,20 @@ export default class Transaction extends Component<Props, State> {
 
   state = {
     showConfirmationDialog: false,
+    showUnmoderatedMetadata: false,
   };
 
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    // Tell parent components that meta data was toggled
+    if (
+      !prevState.showUnmoderatedMetadata &&
+      this.state.showUnmoderatedMetadata &&
+      this.props.onShowMetadata
+    ) {
+      this.props.onShowMetadata();
+    }
+  }
+
   toggleDetails() {
     const { onDetailsToggled } = this.props;
     if (onDetailsToggled) onDetailsToggled();
@@ -310,6 +342,7 @@ export default class Transaction extends Component<Props, State> {
     const {
       data,
       isLastInList,
+      isShowingMetadata,
       state,
       formattedWalletAmount,
       onOpenExternalLink,
@@ -532,6 +565,35 @@ export default class Transaction extends Component<Props, State> {
                   />
                 </div>
                 {this.renderCancelPendingTxnContent()}
+
+                {data.metadata != null && (
+                  <div className={styles.metadata}>
+                    <h2>{intl.formatMessage(messages.metadataLabel)}</h2>
+                    {data.metadata &&
+                    (this.state.showUnmoderatedMetadata ||
+                      isShowingMetadata) ? (
+                      <TransactionMetadataView data={data.metadata} />
+                    ) : (
+                      <>
+                        <p className={styles.metadataDisclaimer}>
+                          {intl.formatMessage(messages.metadataDisclaimer)}
+                        </p>
+                        <Link
+                          isUnderlined={false}
+                          hasIconAfter={false}
+                          underlineOnHover
+                          label={intl.formatMessage(
+                            messages.metadataConfirmationLabel
+                          )}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            this.setState({ showUnmoderatedMetadata: true });
+                          }}
+                        />
+                      </>
+                    )}
+                  </div>
+                )}
               </div>
             </div>
             <SVGInline svg={arrow} className={arrowStyles} />

source/renderer/app/components/wallet/transactions/Transaction.scss

@@ -256,3 +256,18 @@
     }
   }
 }
+
+.metadataDisclaimer {
+  font-family: var(--font-light);
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.metadata {
+  margin-top: 20px;
+
+  pre {
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+}

source/renderer/app/components/wallet/transactions/WalletTransactionsList.js

@@ -83,6 +83,7 @@ export default class WalletTransactionsList extends Component<Props> {
   };
 
   expandedTransactionIds: Map<string, WalletTransaction> = new Map();
+  transactionsShowingMetadata: Map<string, WalletTransaction> = new Map();
   virtualList: ?VirtualTransactionList;
   simpleList: ?SimpleTransactionList;
   loadingSpinner: ?LoadingSpinner;
@@ -136,6 +137,9 @@ export default class WalletTransactionsList extends Component<Props> {
   isTxExpanded = (tx: WalletTransaction) =>
     this.expandedTransactionIds.has(tx.id);
 
+  isTxShowingMetadata = (tx: WalletTransaction) =>
+    this.transactionsShowingMetadata.has(tx.id);
+
   toggleTransactionExpandedState = (tx: WalletTransaction) => {
     const isExpanded = this.isTxExpanded(tx);
     if (isExpanded) {
@@ -150,6 +154,19 @@ export default class WalletTransactionsList extends Component<Props> {
     }
   };
 
+  /**
+   * Update the height of the transaction when metadata is shown
+   * @param tx
+   */
+  onShowMetadata = (tx: WalletTransaction) => {
+    this.transactionsShowingMetadata.set(tx.id, tx);
+    if (this.virtualList) {
+      this.virtualList.updateTxRowHeight(tx, true, true);
+    } else if (this.simpleList) {
+      this.simpleList.forceUpdate();
+    }
+  };
+
   onShowMoreTransactions = (walletId: string) => {
     if (this.props.onShowMoreTransactions) {
       this.props.onShowMoreTransactions(walletId);
@@ -186,10 +203,12 @@ export default class WalletTransactionsList extends Component<Props> {
           deletePendingTransaction={deletePendingTransaction}
           formattedWalletAmount={formattedWalletAmount}
           isExpanded={this.isTxExpanded(tx)}
+          isShowingMetadata={this.isTxShowingMetadata(tx)}
           isLastInList={isLastInGroup}
           isRestoreActive={isRestoreActive}
           onDetailsToggled={() => this.toggleTransactionExpandedState(tx)}
           onOpenExternalLink={onOpenExternalLink}
+          onShowMetadata={() => this.onShowMetadata(tx)}
           getUrlByType={getUrlByType}
           state={tx.state}
           walletId={walletId}

source/renderer/app/components/wallet/transactions/metadata/MetadataValueView.js

@@ -0,0 +1,76 @@
+// @flow
+import React from 'react';
+import type {
+  MetadataBytes,
+  MetadataInteger,
+  MetadataList,
+  MetadataMap,
+  MetadataString,
+  MetadataValue,
+} from '../../../../types/TransactionMetadata';
+import styles from './TransactionMetadataView.scss';
+
+/**
+ * NOTE: These components are currently not used because we simply
+ * JSON.stringify the metadata for transactions. This can be
+ * used as the basis for a more sophisticated implementation
+ * later on:
+ */
+
+function IntegerView({ value }: { value: MetadataInteger }) {
+  return <p>{value.int}</p>;
+}
+
+function StringView({ value }: { value: MetadataString }) {
+  return <p>{value.string}</p>;
+}
+
+function BytesView({ value }: { value: MetadataBytes }) {
+  return <p>{value.bytes}</p>;
+}
+
+function ListView({ value }: { value: MetadataList }) {
+  return (
+    <ol className={styles.list}>
+      {value.list.map((v, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <li key={index}>
+          <MetadataValueView value={v} />
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+function MapView({ value }: { value: MetadataMap }) {
+  return (
+    <ol className={styles.map}>
+      {value.map.map((v, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <li key={index}>
+          <MetadataValueView value={v.k} />: <MetadataValueView value={v.v} />
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+function MetadataValueView(props: { value: MetadataValue }) {
+  const { value } = props;
+  if (value.int) {
+    return <IntegerView value={value} />;
+  }
+  if (value.string) {
+    return <StringView value={value} />;
+  }
+  if (value.bytes) {
+    return <BytesView value={value} />;
+  }
+  if (value.list) {
+    return <ListView value={value} />;
+  }
+  if (value.map) {
+    return <MapView value={value} />;
+  }
+  return null;
+}

source/renderer/app/components/wallet/transactions/metadata/TransactionMetadataView.js

@@ -0,0 +1,57 @@
+// @flow
+import React from 'react';
+import JSONBigInt from 'json-bigint';
+import type {
+  MetadataMapValue,
+  MetadataValue,
+  TransactionMetadata,
+} from '../../../../types/TransactionMetadata';
+import styles from './TransactionMetadataView.scss';
+
+function flattenMetadata(data: MetadataValue) {
+  if (data.int) {
+    return data.int;
+  }
+  if (data.string) {
+    return data.string;
+  }
+  if (data.bytes) {
+    return `0x${data.bytes}`;
+  }
+  if (data.list) {
+    return data.list.map((v: MetadataValue) => flattenMetadata(v));
+  }
+  if (data.map) {
+    return data.map.map((v: MetadataMapValue) => {
+      if (v.k.list || v.k.map) {
+        return {
+          key: flattenMetadata(v.k),
+          value: flattenMetadata(v.v),
+        };
+      }
+      if (v.k.int) {
+        return { [v.k.int]: flattenMetadata(v.v) };
+      }
+      if (v.k.string) {
+        return { [v.k.string]: flattenMetadata(v.v) };
+      }
+      if (v.k.bytes) {
+        return { [v.k.bytes]: flattenMetadata(v.v) };
+      }
+      return null;
+    });
+  }
+  return null;
+}
+
+export function TransactionMetadataView(props: { data: TransactionMetadata }) {
+  return (
+    <div className={styles.root}>
+      {Object.keys(props.data).map((key: string) => (
+        <pre key={key}>
+          {JSONBigInt.stringify(flattenMetadata(props.data[key]), null, 2)}
+        </pre>
+      ))}
+    </div>
+  );
+}