From cacbad38ccf44fdd4c465bc823fe1a748740d8a6 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
Date: Sat, 19 Mar 2022 22:11:46 -0700
Subject: [PATCH 1/5] Change table-vx-* from id to class

---
 .../transactions-list/transactions-list.component.html        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html
index 790f38cfc..37903beae 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -18,7 +18,7 @@
     <div *ngIf="errorUnblinded" class="error-unblinded">{{ errorUnblinded }}</div>
     <div class="row">
       <div class="col">
-        <table class="table table-borderless smaller-text table-sm" id="table-tx-vin">
+        <table class="table table-borderless smaller-text table-sm table-tx-vin">
           <tbody>
             <ng-template ngFor let-vin [ngForOf]="tx['@vinLimit'] ? ((tx.vin.length>12)?tx.vin.slice(0, 10): tx.vin.slice(0, 12)) : tx.vin" [ngForTrackBy]="trackByIndexFn">
               <tr [ngClass]="{
@@ -143,7 +143,7 @@
       </div>
       <div class="w-100 d-block d-md-none"></div>
       <div class="col mobile-bottomcol">
-        <table class="table table-borderless smaller-text table-sm"  id="table-tx-vout">
+        <table class="table table-borderless smaller-text table-sm table-tx-vout">
           <tbody>
             <ng-template ngFor let-vout let-vindex="index" [ngForOf]="tx['@voutLimit'] && !outputIndex ? ((tx.vout.length > 12) ? tx.vout.slice(0, 10) : tx.vout.slice(0, 12)) : tx.vout" [ngForTrackBy]="trackByIndexFn">
               <tr [ngClass]="{

From db4a13389a0fe934bbbc30a38caccef70ec731c5 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
Date: Sat, 19 Mar 2022 22:12:44 -0700
Subject: [PATCH 2/5] Update liquid tests to use the new css selector

---
 .../cypress/integration/liquid/liquid.spec.ts | 46 +++++++++----------
 .../liquidtestnet/liquidtestnet.spec.ts       | 42 ++++++++---------
 2 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/frontend/cypress/integration/liquid/liquid.spec.ts b/frontend/cypress/integration/liquid/liquid.spec.ts
index d8d1c366d..732afa261 100644
--- a/frontend/cypress/integration/liquid/liquid.spec.ts
+++ b/frontend/cypress/integration/liquid/liquid.spec.ts
@@ -84,8 +84,8 @@ describe('Liquid', () => {
         cy.visit(`${basePath}/tx/fe764f7bedfc2a37b29d9c8aef67d64a57d253a6b11c5a55555cfd5826483a58`);
         cy.waitForSkeletonGone();
         //TODO: Change to an element id so we don't assert on a string
-        cy.get('#table-tx-vin').should('contain', 'Peg-in');
-        cy.get('#table-tx-vin a').click().then(() => {
+        cy.get('.table-tx-vin').should('contain', 'Peg-in');
+        cy.get('.table-tx-vin a').click().then(() => {
           cy.waitForSkeletonGone();
           if (baseModule === 'liquid') {
             cy.url().should('eq', 'https://mempool.space/tx/f148c0d854db4174ea420655235f910543f0ec3680566dcfdf84fb0a1697b592');
@@ -99,7 +99,7 @@ describe('Liquid', () => {
       it('loads peg out addresses', () => {
         cy.visit(`${basePath}/tx/ecf6eba04ffb3946faa172343c87162df76f1a57b07b0d6dc6ad956b13376dc8`);
         cy.waitForSkeletonGone();
-        cy.get('#table-tx-vout a').first().click().then(() => {
+        cy.get('.table-tx-vout a').first().click().then(() => {
           cy.waitForSkeletonGone();
           if (baseModule === 'liquid') {
             cy.url().should('eq', 'https://mempool.space/address/1BxoGcMg14oaH3CwHD2hF4gU9VcfgX5yoR');
@@ -149,57 +149,57 @@ describe('Liquid', () => {
       it('show unblinded TX', () => {
         cy.visit(`${basePath}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=100000,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,0ab9f70650f16b1db8dfada05237f7d0d65191c3a13183da8a2ddddfbde9a2ad,fd98b2edc5530d76acd553f206a431f4c1fab27e10e290ad719582af878e98fc,2364760,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,90c7a43b15b905bca045ca42a01271cfe71d2efe3133f4197792c24505cb32ed,12eb5959d9293b8842e7dd8bc9aa9639fd3fd031c5de3ba911adeca94eb57a3a`);
         cy.waitForSkeletonGone();
-        cy.get('#table-tx-vin tr:nth-child(1) .amount').should('contain.text', '0.02465000 L-BTC');
-        cy.get('#table-tx-vin tr').should('have.class', 'assetBox');
-        cy.get('#table-tx-vout tr:nth-child(1) .amount').should('contain.text', '0.00100000 L-BTC');
-        cy.get('#table-tx-vout tr:nth-child(2) .amount').should('contain.text', '0.02364760 L-BTC');
-        cy.get('#table-tx-vout tr').should('have.class', 'assetBox');
+        cy.get('.table-tx-vin tr:nth-child(1) .amount').should('contain.text', '0.02465000 L-BTC');
+        cy.get('.table-tx-vin tr').should('have.class', 'assetBox');
+        cy.get('.table-tx-vout tr:nth-child(1) .amount').should('contain.text', '0.00100000 L-BTC');
+        cy.get('.table-tx-vout tr:nth-child(2) .amount').should('contain.text', '0.02364760 L-BTC');
+        cy.get('.table-tx-vout tr').should('have.class', 'assetBox');
       });
 
       it('show empty unblinded TX', () => {
         cy.visit(`${basePath}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=`);
         cy.waitForSkeletonGone();
-        cy.get('#table-tx-vin tr:nth-child(1)').should('have.class', '');
-        cy.get('#table-tx-vin tr:nth-child(1) .amount').should('contain.text', 'Confidential');
-        cy.get('#table-tx-vout tr:nth-child(1)').should('have.class', '');
-        cy.get('#table-tx-vout tr:nth-child(2)').should('have.class', '');
-        cy.get('#table-tx-vout tr:nth-child(1) .amount').should('contain.text', 'Confidential');
-        cy.get('#table-tx-vout tr:nth-child(2) .amount').should('contain.text', 'Confidential');
+        cy.get('.table-tx-vin tr:nth-child(1)').should('have.class', '');
+        cy.get('.table-tx-vin tr:nth-child(1) .amount').should('contain.text', 'Confidential');
+        cy.get('.table-tx-vout tr:nth-child(1)').should('have.class', '');
+        cy.get('.table-tx-vout tr:nth-child(2)').should('have.class', '');
+        cy.get('.table-tx-vout tr:nth-child(1) .amount').should('contain.text', 'Confidential');
+        cy.get('.table-tx-vout tr:nth-child(2) .amount').should('contain.text', 'Confidential');
       });
 
       it('show invalid unblinded TX hex', () => {
         cy.visit(`${basePath}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=123`);
         cy.waitForSkeletonGone();
-        cy.get('#table-tx-vin tr').should('have.class', '');
-        cy.get('#table-tx-vout tr').should('have.class', '');
+        cy.get('.table-tx-vin tr').should('have.class', '');
+        cy.get('.table-tx-vout tr').should('have.class', '');
         cy.get('.error-unblinded').contains('Error: Invalid blinding data (invalid hex)');
       });
 
       it('show first unblinded vout', () => {
         cy.visit(`${basePath}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=100000,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,0ab9f70650f16b1db8dfada05237f7d0d65191c3a13183da8a2ddddfbde9a2ad,fd98b2edc5530d76acd553f206a431f4c1fab27e10e290ad719582af878e98fc`);
         cy.waitForSkeletonGone();
-        cy.get('#table-tx-vout tr:nth-child(1)').should('have.class', 'assetBox');
-        cy.get('#table-tx-vout tr:nth-child(1) .amount').should('contain.text', '0.00100000 L-BTC');
+        cy.get('.table-tx-vout tr:nth-child(1)').should('have.class', 'assetBox');
+        cy.get('.table-tx-vout tr:nth-child(1) .amount').should('contain.text', '0.00100000 L-BTC');
       });
 
       it('show second unblinded vout', () => {
         cy.visit(`${basePath}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=2364760,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,90c7a43b15b905bca045ca42a01271cfe71d2efe3133f4197792c24505cb32ed,12eb5959d9293b8842e7dd8bc9aa9639fd3fd031c5de3ba911adeca94eb57a3a`);
-        cy.get('#table-tx-vout tr:nth-child(2').should('have.class', 'assetBox');
-        cy.get('#table-tx-vout tr:nth-child(2) .amount').should('contain.text', '0.02364760 L-BTC');
+        cy.get('.table-tx-vout tr:nth-child(2').should('have.class', 'assetBox');
+        cy.get('.table-tx-vout tr:nth-child(2) .amount').should('contain.text', '0.02364760 L-BTC');
       });
 
       it('show invalid error unblinded TX', () => {
         cy.visit(`${basePath}/tx/f2f41c0850e8e7e3f1af233161fd596662e67c11ef10ed15943884186fbb7f46#blinded=100000,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,0ab9f70650f16b1db8dfada05237f7d0d65191c3a13183da8a2ddddfbde9a2ad,fd98b2edc5530d76acd553f206a431f4c1fab27e10e290ad719582af878e98fc,2364760,6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d,90c7a43b15b905bca045ca42a01271cfe71d2efe3133f4197792c24505cb32ed,12eb5959d9293b8842e7dd8bc9aa9639fd3fd031c5de3ba911adeca94eb57a3c`);
         cy.waitForSkeletonGone();
-        cy.get('#table-tx-vout tr').should('have.class', 'assetBox');
+        cy.get('.table-tx-vout tr').should('have.class', 'assetBox');
         cy.get('.error-unblinded').contains('Error: Invalid blinding data.');
       });
 
       it('shows asset peg in/out and burn transactions', () => {
         cy.visit(`${basePath}/assets/asset/6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`);
         cy.waitForSkeletonGone();
-        cy.get('#table-tx-vout tr').not('.assetBox');
-        cy.get('#table-tx-vin tr').not('.assetBox');
+        cy.get('.table-tx-vout tr').not('.assetBox');
+        cy.get('.table-tx-vin tr').not('.assetBox');
       });
 
       it('prevents regressing issue #644', () => {
diff --git a/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts b/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts
index 90741539b..3ca23425e 100644
--- a/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts
+++ b/frontend/cypress/integration/liquidtestnet/liquidtestnet.spec.ts
@@ -100,49 +100,49 @@ describe('Liquid Testnet', () => {
       it('show unblinded TX', () => {
         cy.visit(`${basePath}/tx/c3d908ab77891e4c569b0df71aae90f4720b157019ebb20db176f4f9c4d626b8#blinded=100000,144c654344aa716d6f3abcc1ca90e5641e4e2a7f633bc09fe3baf64585819a49,df290ead654d7d110ebc5aaf0bcf11d5b5d360431a467f1cde0a856fde986893,33cb3a2fd2e76643843691cf44a78c5cd28ec652a414da752160ad63fbd37bc9,49741,144c654344aa716d6f3abcc1ca90e5641e4e2a7f633bc09fe3baf64585819a49,edb0713bcbfcb3daabf601cb50978439667d208e15fed8a5ebbfea5696cda1d5,4de70115501e8c7d6bd763e229bf42781edeacf6e75e1d7bdfa4c63104bc508a`);
         cy.waitForSkeletonGone();
-        cy.get('#table-tx-vin tr:nth-child(1) .amount').should('contain.text', '0.00100000 tL-BTC');
-        cy.get('#table-tx-vin tr').should('have.class', 'assetBox');
-        cy.get('#table-tx-vout tr:nth-child(1) .amount').should('contain.text', '0.00050000 tL-BTC');
-        cy.get('#table-tx-vout tr:nth-child(2) .amount').should('contain.text', '0.00049741 tL-BTC');
-        cy.get('#table-tx-vout tr').should('have.class', 'assetBox');
+        cy.get('.table-tx-vin tr:nth-child(1) .amount').should('contain.text', '0.00100000 tL-BTC');
+        cy.get('.table-tx-vin tr').should('have.class', 'assetBox');
+        cy.get('.table-tx-vout tr:nth-child(1) .amount').should('contain.text', '0.00050000 tL-BTC');
+        cy.get('.table-tx-vout tr:nth-child(2) .amount').should('contain.text', '0.00049741 tL-BTC');
+        cy.get('.table-tx-vout tr').should('have.class', 'assetBox');
       });
 
       it('show empty unblinded TX', () => {
         cy.visit(`${basePath}/tx/c3d908ab77891e4c569b0df71aae90f4720b157019ebb20db176f4f9c4d626b8#blinded=`);
         cy.waitForSkeletonGone();
-        cy.get('#table-tx-vin tr:nth-child(1)').should('have.class', '');
-        cy.get('#table-tx-vin tr:nth-child(1) .amount').should('contain.text', 'Confidential');
-        cy.get('#table-tx-vout tr:nth-child(1)').should('have.class', '');
-        cy.get('#table-tx-vout tr:nth-child(2)').should('have.class', '');
-        cy.get('#table-tx-vout tr:nth-child(1) .amount').should('contain.text', 'Confidential');
-        cy.get('#table-tx-vout tr:nth-child(2) .amount').should('contain.text', 'Confidential');
+        cy.get('.table-tx-vin tr:nth-child(1)').should('have.class', '');
+        cy.get('.table-tx-vin tr:nth-child(1) .amount').should('contain.text', 'Confidential');
+        cy.get('.table-tx-vout tr:nth-child(1)').should('have.class', '');
+        cy.get('.table-tx-vout tr:nth-child(2)').should('have.class', '');
+        cy.get('.table-tx-vout tr:nth-child(1) .amount').should('contain.text', 'Confidential');
+        cy.get('.table-tx-vout tr:nth-child(2) .amount').should('contain.text', 'Confidential');
       });
 
       it('show invalid unblinded TX hex', () => {
         cy.visit(`${basePath}/tx/2477f220eef1d03f8ffa4a2861c275d155c3562adf0d79523aeeb0c59ee611ba#blinded=5000`);
         cy.waitForSkeletonGone();
-        cy.get('#table-tx-vin tr').should('have.class', '');
-        cy.get('#table-tx-vout tr').should('have.class', '');
+        cy.get('.table-tx-vin tr').should('have.class', '');
+        cy.get('.table-tx-vout tr').should('have.class', '');
         cy.get('.error-unblinded').contains('Error: Invalid blinding data (invalid hex)');
       });
 
       it('show first unblinded vout', () => {
         cy.visit(`${basePath}/tx/0877bc0c7aa5c2b8d0e4b15450425879b8783c40e341806037a605ef836fb886#blinded=5000,38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5,328de54e90e867a9154b4f1eb7fcab86267e880fa2ee9e53b41a91e61dab86e6,8885831e6b089eaf06889d53a24843f0da533d300a7b1527b136883a6819f3ae,5000,38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5,aca78b953615d69ae0ae68c4c5c3c0ee077c10bc20ad3f0c5960706004e6cb56,d2ec175afe5f761e2dbd443faf46abbb7091f341deb3387e5787d812bdb2df9f,100000,144c654344aa716d6f3abcc1ca90e5641e4e2a7f633bc09fe3baf64585819a49,4b54a4ca809b3844f34dd88b68617c4c866d92a02211f02ba355755bac20a1c6,eddd02e92b0cfbad8cab89828570a50f2c643bb2a54d886c86e25ce47e818685,99729,144c654344aa716d6f3abcc1ca90e5641e4e2a7f633bc09fe3baf64585819a49,8b86d565c9549eb0352bb81ee576d01d064435b64fddcc045decebeb1d9913ce,b082ce3448d40d47b5b39f15d72b285f4a1046b636b56c25f32f498ece29d062,10000,38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5,62b04ee86198d6b41681cdd0acb450ab366af727a010aaee8ba0b9e69ff43896,3f98429bca9b538dc943c22111f25d9c4448d45a63ff0f4e58b22fd434c0365e`);
         cy.waitForSkeletonGone();
-        cy.get('#table-tx-vout tr:nth-child(1)').should('have.class', 'assetBox');
-        cy.get('#table-tx-vout tr:nth-child(1) .amount').should('contain.text', '0.00099729 tL-BTC');
+        cy.get('.table-tx-vout tr:nth-child(1)').should('have.class', 'assetBox');
+        cy.get('.table-tx-vout tr:nth-child(1) .amount').should('contain.text', '0.00099729 tL-BTC');
       });
 
       it('show second unblinded vout (asset)', () => {
         cy.visit(`${basePath}/tx/0877bc0c7aa5c2b8d0e4b15450425879b8783c40e341806037a605ef836fb886#blinded=5000,38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5,328de54e90e867a9154b4f1eb7fcab86267e880fa2ee9e53b41a91e61dab86e6,8885831e6b089eaf06889d53a24843f0da533d300a7b1527b136883a6819f3ae,5000,38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5,aca78b953615d69ae0ae68c4c5c3c0ee077c10bc20ad3f0c5960706004e6cb56,d2ec175afe5f761e2dbd443faf46abbb7091f341deb3387e5787d812bdb2df9f,100000,144c654344aa716d6f3abcc1ca90e5641e4e2a7f633bc09fe3baf64585819a49,4b54a4ca809b3844f34dd88b68617c4c866d92a02211f02ba355755bac20a1c6,eddd02e92b0cfbad8cab89828570a50f2c643bb2a54d886c86e25ce47e818685,99729,144c654344aa716d6f3abcc1ca90e5641e4e2a7f633bc09fe3baf64585819a49,8b86d565c9549eb0352bb81ee576d01d064435b64fddcc045decebeb1d9913ce,b082ce3448d40d47b5b39f15d72b285f4a1046b636b56c25f32f498ece29d062,10000,38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5,62b04ee86198d6b41681cdd0acb450ab366af727a010aaee8ba0b9e69ff43896,3f98429bca9b538dc943c22111f25d9c4448d45a63ff0f4e58b22fd434c0365e`);
-        cy.get('#table-tx-vout tr:nth-child(2)').should('have.class', 'assetBox');
+        cy.get('.table-tx-vout tr:nth-child(2)').should('have.class', 'assetBox');
         //TODO Update after the precision bug fix is merged
-        cy.get('#table-tx-vout tr:nth-child(2) .amount').should('contain.text', '0 TEST');
+        cy.get('.table-tx-vout tr:nth-child(2) .amount').should('contain.text', '0 TEST');
       });
 
       it('should link to the asset page from the unblinded tx', () => {
         cy.visit(`${basePath}/tx/0877bc0c7aa5c2b8d0e4b15450425879b8783c40e341806037a605ef836fb886#blinded=5000,38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5,328de54e90e867a9154b4f1eb7fcab86267e880fa2ee9e53b41a91e61dab86e6,8885831e6b089eaf06889d53a24843f0da533d300a7b1527b136883a6819f3ae,5000,38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5,aca78b953615d69ae0ae68c4c5c3c0ee077c10bc20ad3f0c5960706004e6cb56,d2ec175afe5f761e2dbd443faf46abbb7091f341deb3387e5787d812bdb2df9f,100000,144c654344aa716d6f3abcc1ca90e5641e4e2a7f633bc09fe3baf64585819a49,4b54a4ca809b3844f34dd88b68617c4c866d92a02211f02ba355755bac20a1c6,eddd02e92b0cfbad8cab89828570a50f2c643bb2a54d886c86e25ce47e818685,99729,144c654344aa716d6f3abcc1ca90e5641e4e2a7f633bc09fe3baf64585819a49,8b86d565c9549eb0352bb81ee576d01d064435b64fddcc045decebeb1d9913ce,b082ce3448d40d47b5b39f15d72b285f4a1046b636b56c25f32f498ece29d062,10000,38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5,62b04ee86198d6b41681cdd0acb450ab366af727a010aaee8ba0b9e69ff43896,3f98429bca9b538dc943c22111f25d9c4448d45a63ff0f4e58b22fd434c0365e`);
-        cy.get('#table-tx-vout tr:nth-child(2) .amount a').click().then(() => {
+        cy.get('.table-tx-vout tr:nth-child(2) .amount a').click().then(() => {
           cy.waitForSkeletonGone();
           cy.url().should('contain', '/assets/asset/38fca2d939696061a8f76d4e6b5eecd54e3b4221c846f24a6b279e79952850a5');
         });
@@ -151,15 +151,15 @@ describe('Liquid Testnet', () => {
       it('show invalid error unblinded TX', () => {
         cy.visit(`${basePath}/tx/c3d908ab77891e4c569b0df71aae90f4720b157019ebb20db176f4f9c4d626b8#blinded=100000,144c654344aa716d6f3abcc1ca90e5641e4e2a7f633bc09fe3baf64585819a49,df290ead654d7d110ebc5aaf0bcf11d5b5d360431a467f1cde0a856fde986893,33cb3a2fd2e76643843691cf44a78c5cd28ec652a414da752160ad63fbd37bc9,49741,144c654344aa716d6f3abcc1ca90e5641e4e2a7f633bc09fe3baf64585819a49,edb0713bcbfcb3daabf601cb50978439667d208e15fed8a5ebbfea5696cda1d5,4de70115501e8c7d6bd763e229bf42781edeacf6e75e1d7bdfa4c63104bc508c`);
         cy.waitForSkeletonGone();
-        cy.get('#table-tx-vin tr').should('have.class', 'assetBox');
+        cy.get('.table-tx-vin tr').should('have.class', 'assetBox');
         cy.get('.error-unblinded').contains('Error: Invalid blinding data.');
       });
 
       it('shows asset peg in/out and burn transactions', () => {
         cy.visit(`${basePath}/assets/asset/ac3e0ff248c5051ffd61e00155b7122e5ebc04fd397a0ecbdd4f4e4a56232926`);
         cy.waitForSkeletonGone();
-        cy.get('#table-tx-vout tr').not('.assetBox');
-        cy.get('#table-tx-vin tr').not('.assetBox');
+        cy.get('.table-tx-vout tr').not('.assetBox');
+        cy.get('.table-tx-vin tr').not('.assetBox');
       });
 
     });

From 2d4d9d80bd933b264544d930ce28b772a368532f Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
Date: Sat, 19 Mar 2022 22:14:37 -0700
Subject: [PATCH 3/5] Add new directive for UI tests

---
 frontend/src/app/app.module.ts        |  2 ++
 frontend/src/app/data-cy.directive.ts | 13 +++++++++++++
 2 files changed, 15 insertions(+)
 create mode 100644 frontend/src/app/data-cy.directive.ts

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 99917815c..cb59c19dc 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -78,6 +78,7 @@ import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-st
 import { GraphsComponent } from './components/graphs/graphs.component';
 import { DifficultyAdjustmentsTable } from './components/difficulty-adjustments-table/difficulty-adjustments-table.components';
 import { BlocksList } from './components/blocks-list/blocks-list.component';
+import { DataCyDirective } from './data-cy.directive';
 
 @NgModule({
   declarations: [
@@ -137,6 +138,7 @@ import { BlocksList } from './components/blocks-list/blocks-list.component';
     GraphsComponent,
     DifficultyAdjustmentsTable,
     BlocksList,
+    DataCyDirective,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
diff --git a/frontend/src/app/data-cy.directive.ts b/frontend/src/app/data-cy.directive.ts
new file mode 100644
index 000000000..1e8e9aec7
--- /dev/null
+++ b/frontend/src/app/data-cy.directive.ts
@@ -0,0 +1,13 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+import { environment } from '../environments/environment';
+
+@Directive({
+  selector: '[data-cy]'
+})
+export class DataCyDirective {
+  constructor(private el: ElementRef, private renderer: Renderer2) {
+    if (environment.production) {
+      renderer.removeAttribute(el.nativeElement, 'data-cy');
+    }
+  }
+}

From bbc6b8cfbfba1b86a1dc0f83eba3df28086a7f03 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
Date: Sat, 19 Mar 2022 22:15:37 -0700
Subject: [PATCH 4/5] Use the new data-cy directive for deterministic tx
 locators

---
 .../transactions-list/transactions-list.component.html          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html
index 37903beae..3d9c67b17 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -13,7 +13,7 @@
     <div class="clearfix"></div>
   </div>
 
-  <div class="header-bg box" infiniteScroll [alwaysCallback]="true" [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()">
+  <div class="header-bg box" infiniteScroll [alwaysCallback]="true" [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [attr.data-cy]="'tx-' + i">
 
     <div *ngIf="errorUnblinded" class="error-unblinded">{{ errorUnblinded }}</div>
     <div class="row">

From 827760cae5652e36179b3954d7b8b1f985a9491b Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
Date: Sat, 19 Mar 2022 22:16:22 -0700
Subject: [PATCH 5/5] Add tests for the address highlighting feature

---
 .../integration/mainnet/mainnet.spec.ts       | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/frontend/cypress/integration/mainnet/mainnet.spec.ts b/frontend/cypress/integration/mainnet/mainnet.spec.ts
index 4d89a3268..c3d5d803c 100644
--- a/frontend/cypress/integration/mainnet/mainnet.spec.ts
+++ b/frontend/cypress/integration/mainnet/mainnet.spec.ts
@@ -171,6 +171,50 @@ describe('Mainnet', () => {
 
     });
 
+    describe('address highlighting', () => {
+      it('highlights single input addresses', () => {
+        const address = '1wiz32gbHZwMzJCRHMGehJuBgsMTPdaCa';
+        cy.visit(`/address/${address}`);
+        cy.waitForSkeletonGone();
+        cy.get('[data-cy="tx-0"] .table-tx-vin .highlight').should('exist');
+        cy.get('[data-cy="tx-0"] .table-tx-vin .highlight').invoke('text').should('contain', `${address}`);
+      });
+
+      it('highlights multiple input addresses', () => {
+        const address = '1wiz1rtKFBA58qjb582WF5KAFg9mWCuZV';
+        cy.visit(`/address/${address}`);
+        cy.waitForSkeletonGone();
+        cy.get('[data-cy="tx-2"] .table-tx-vin .highlight').should('exist');
+        cy.get('[data-cy="tx-2"] .table-tx-vin .highlight').its('length').should('equal', 2);
+        cy.get('[data-cy="tx-2"] .table-tx-vin .highlight').invoke('text').should('contain', `${address}`);
+      });
+
+      it.only('highlights both input and output addresses in the same transaction', () => {
+        const address = 'bc1q03u63r6hm7a3v6em58zdqtp446w2pw30nm63mv';
+        cy.visit(`/address/${address}`);
+        cy.waitForSkeletonGone();
+        cy.get('[data-cy="tx-1"] .table-tx-vin .highlight').should('exist');
+        cy.get('[data-cy="tx-1"] .table-tx-vout .highlight').should('exist');
+      });
+
+      it('highlights single output addresses', () => {
+        const address = '1wiz32gbHZwMzJCRHMGehJuBgsMTPdaCa';
+        cy.visit(`/address/${address}`);
+        cy.waitForSkeletonGone();
+        cy.get('[data-cy="tx-1"] .table-tx-vout .highlight').should('exist');
+        cy.get('[data-cy="tx-1"] .table-tx-vout .highlight').invoke('text').should('contain', `${address}`);
+      });
+
+      it('highlights multiple output addresses', () => {
+        const address = '1F3Q3sQmiGsWSqK5K6T9tYnX8yqzYRgQbe';
+        cy.visit(`/address/${address}`);
+        cy.waitForSkeletonGone();
+        cy.get('[data-cy="tx-1"] .table-tx-vout .highlight').should('exist');
+        cy.get('[data-cy="tx-1"] .table-tx-vout .highlight').its('length').should('equal', 2);
+        cy.get('[data-cy="tx-1"] .table-tx-vout .highlight').invoke('text').should('contain', `${address}`);
+      });
+    });
+
     describe('blocks navigation', () => {
 
       describe('keyboard events', () => {