From 614e678621dcda5cebba3067294c93cf1fd736f6 Mon Sep 17 00:00:00 2001
From: Keyrxng <106303466+Keyrxng@users.noreply.github.com>
Date: Mon, 10 Jun 2024 22:11:58 +0100
Subject: [PATCH 1/3] fix: move controls into sight

---
 static/index.html                                              | 2 +-
 .../scripts/rewards/render-transaction/render-transaction.ts   | 3 ++-
 static/styles/rewards/claim-table.css                          | 3 +++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/static/index.html b/static/index.html
index c17698d7..062aa7c2 100644
--- a/static/index.html
+++ b/static/index.html
@@ -66,7 +66,7 @@
               </td>
             </tr>
           </thead>
-          <tbody>
+          <tbody id="mainTableBody">
             <tr id="Amount">
               <th>
                 <div>Amount</div>
diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index ff55346f..50840ea9 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -63,6 +63,7 @@ export async function renderTransaction(): Promise<Success> {
   } else {
     const requestedAmountElement = insertErc721PermitTableData(app.reward, table);
     table.setAttribute(`data-make-claim`, "ok");
+    table.setAttribute(`data-additional-data-size`, "large");
     renderNftSymbol({
       tokenAddress: app.reward.tokenAddress,
       explorerUrl: networkExplorers[app.reward.networkId],
@@ -71,7 +72,7 @@ export async function renderTransaction(): Promise<Success> {
     }).catch(console.error);
 
     const toElement = document.getElementById(`rewardRecipient`) as Element;
-    renderEnsName({ element: toElement, address: app.reward.beneficiary }).catch(console.error);
+    renderEnsName({ element: toElement, address: app.reward.beneficiary, networkID: app.networkId }).catch(console.error);
 
     getMakeClaimButton().addEventListener("click", claimErc721PermitHandler(app.reward));
   }
diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index 1d5db0ad..a114f400 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -149,6 +149,9 @@ table[data-make-claim-rendered] button.show > svg#claim-loader {
 table[data-make-claim-rendered] button.hide > svg#claim-icon {
   display: unset;
 }
+table[data-details-visible="true"][data-additional-data-size="large"] #mainTableBody {
+  transform: translate(-50%, 15%);
+}
 table #controls {
   opacity: 0;
   transition: 1s ease-in-out opacity;

From 3c45c07e99bbadf0e1e2ea102285e22c4286b8d8 Mon Sep 17 00:00:00 2001
From: Keyrxng <106303466+Keyrxng@users.noreply.github.com>
Date: Tue, 11 Jun 2024 20:35:26 +0100
Subject: [PATCH 2/3] fix: use pixels and remove large on ERC20

---
 static/scripts/rewards/render-transaction/render-transaction.ts | 1 +
 static/styles/rewards/claim-table.css                           | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index 50840ea9..7831e67e 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -30,6 +30,7 @@ export async function renderTransaction(): Promise<Success> {
 
   if (isErc20Permit(app.reward)) {
     const treasury = await fetchTreasury(app.reward);
+    table.setAttribute(`data-additional-data-size`, "small");
 
     // insert tx data into table
     const requestedAmountElement = insertErc20PermitTableData(app, table, treasury);
diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index a114f400..bebeafdf 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -150,7 +150,7 @@ table[data-make-claim-rendered] button.hide > svg#claim-icon {
   display: unset;
 }
 table[data-details-visible="true"][data-additional-data-size="large"] #mainTableBody {
-  transform: translate(-50%, 15%);
+  transform: translate(-50%, 20px);
 }
 table #controls {
   opacity: 0;

From 4a2b8d1274453c44c674e92e90e87db68c3fd5a8 Mon Sep 17 00:00:00 2001
From: Keyrxng <106303466+Keyrxng@users.noreply.github.com>
Date: Sun, 16 Jun 2024 21:17:41 +0100
Subject: [PATCH 3/3] chore: move add. details up

---
 static/index.html                     | 2 +-
 static/styles/rewards/claim-table.css | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/static/index.html b/static/index.html
index 062aa7c2..c17698d7 100644
--- a/static/index.html
+++ b/static/index.html
@@ -66,7 +66,7 @@
               </td>
             </tr>
           </thead>
-          <tbody id="mainTableBody">
+          <tbody>
             <tr id="Amount">
               <th>
                 <div>Amount</div>
diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index bebeafdf..3844dd7b 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -149,9 +149,6 @@ table[data-make-claim-rendered] button.show > svg#claim-loader {
 table[data-make-claim-rendered] button.hide > svg#claim-icon {
   display: unset;
 }
-table[data-details-visible="true"][data-additional-data-size="large"] #mainTableBody {
-  transform: translate(-50%, 20px);
-}
 table #controls {
   opacity: 0;
   transition: 1s ease-in-out opacity;
@@ -173,6 +170,11 @@ table #additionalDetailsTable {
   pointer-events: none;
   transform: translate(-50%, -90px);
 }
+table[data-additional-data-size="large"] #additionalDetailsTable {
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -175px);
+}
 table[data-details-visible="true"] #additionalDetailsTable {
   opacity: 1;
   pointer-events: all;