Merge pull request #2033 from input-output-hk/fix/ddw-267-data-outsid…

…e-transactions-component

[DDW-267]: Fix data displayed outside component on transaction list screen

CHANGELOG.md

@@ -16,6 +16,7 @@ Changelog
 
 ### Fixes
 
+- Fixed transaction list screen showing data outside the component ([PR 2033](https://github.com/input-output-hk/daedalus/pull/2033))
 - Updated the copy to cover additional Friends & Family screens ([PR 2030](https://github.com/input-output-hk/daedalus/pull/2030))
 - Fixed landing page rendering issue after initial startup of app ([PR 2032](https://github.com/input-output-hk/daedalus/pull/2032))
 - Enabled the Recovery Phrase Verification feature of Shelley wallets on ITN ([PR 2008](https://github.com/input-output-hk/daedalus/pull/2008))

source/renderer/app/components/wallet/settings/WalletRecoveryPhraseVerificationWidget.scss

@@ -22,8 +22,8 @@
     display: flex;
     font-style: italic;
     justify-content: space-between;
-    padding: 10px;
     margin-top: 10px;
+    padding: 10px;
   }
   .statusIcon {
     margin-right: 20px;

source/renderer/app/components/wallet/transactions/render-strategies/VirtualTransactionList.js

@@ -39,11 +39,32 @@ export class VirtualTransactionList extends Component<Props> {
     isSyncingSpinnerShown: false,
   };
 
+  // eslint-disable-next-line
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
+    // Recompute all row heights in case the number of rows has changed
+    const prevNumberOfRows = this.props.rows.length;
+    const nextNumberOfRows = nextProps.rows.length;
+    if (prevNumberOfRows && prevNumberOfRows !== nextNumberOfRows) {
+      this.rowHeights = this.estimateRowHeights(nextProps.rows);
+      this.recomputeVirtualRowHeights();
+    }
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.onResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.onResize);
+  }
+
   list: List;
   rowHeights: RowHeight[] = [];
   txAddressHeight: number = 0;
   txIdHeight: number = 0;
   visibleExpandedTx: Array<WalletTransaction>;
+  overscanStartIndex: number;
+  overscanStopIndex: number;
 
   componentDidUpdate(prevProps: Props) {
     // Recompute all row heights in case the number of rows has changed
@@ -215,7 +236,14 @@ export class VirtualTransactionList extends Component<Props> {
   };
 
   updateVisibleExpandedTxRowHeights = () => {
-    this.visibleExpandedTx.forEach(tx => {
+    const expandedRows = this.props.getExpandedTransactions();
+    const visibleExpandedTx = expandedRows.filter(tx => {
+      const index = this.findIndexForTx(tx);
+      return (
+        index >= this.overscanStartIndex && index <= this.overscanStopIndex
+      );
+    });
+    visibleExpandedTx.forEach(tx => {
       this.updateTxRowHeight(tx, true, false);
       const estimatedHeight = this.rowHeights[this.findIndexForTx(tx)];
       this.correctExpandedTxHeightEstimationErrors(tx, estimatedHeight);
@@ -251,11 +279,8 @@ export class VirtualTransactionList extends Component<Props> {
     overscanStartIndex: number,
     overscanStopIndex: number,
   }) => {
-    const expandedRows = this.props.getExpandedTransactions();
-    this.visibleExpandedTx = expandedRows.filter(tx => {
-      const index = this.findIndexForTx(tx);
-      return index >= overscanStartIndex && index <= overscanStopIndex;
-    });
+    this.overscanStartIndex = overscanStartIndex;
+    this.overscanStopIndex = overscanStopIndex;
     this.updateVisibleExpandedTxRowHeights();
   };