From 2920e4430d3ea02a7092729bbe0855796ab83e32 Mon Sep 17 00:00:00 2001
From: zugdev <zug.dev@proton.me>
Date: Tue, 4 Feb 2025 18:38:38 -0300
Subject: [PATCH] feat: render something on error/fail

---
 .../render-transaction/read-claim-data-from-url.ts     |  4 ++--
 .../rewards/render-transaction/set-claim-message.ts    |  6 ++----
 static/styles/rewards/claim-table.css                  | 10 ++++++++--
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
index c7ace425..a9ac5ae8 100644
--- a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
+++ b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
@@ -28,7 +28,7 @@ export async function readClaimDataFromUrl(app: AppState) {
   if (!base64encodedTxData) {
     // No claim data found
     setClaimMessage({ type: "Notice", message: `No claim data found.` });
-    table.setAttribute(`data-make-claim`, "error");
+    table.setAttribute(`data-make-claim`, "empty");
     return;
   }
 
@@ -125,7 +125,7 @@ function decodeClaimData(base64encodedTxData: string): Permit[] {
   } catch (error) {
     console.error(error);
     setClaimMessage({ type: "Error", message: `Invalid claim data passed in URL` });
-    table.setAttribute(`data-make-claim`, "error");
+    table.setAttribute(`data-make-claim`, "empty");
     throw error;
   }
 }
diff --git a/static/scripts/rewards/render-transaction/set-claim-message.ts b/static/scripts/rewards/render-transaction/set-claim-message.ts
index 34602d42..ea464aef 100644
--- a/static/scripts/rewards/render-transaction/set-claim-message.ts
+++ b/static/scripts/rewards/render-transaction/set-claim-message.ts
@@ -1,6 +1,4 @@
 export function setClaimMessage({ type, message }: { type: string; message: string }): void {
-  const claimMessageType = document.querySelector(`.receipt > .head .row`) as Element;
-  const claimMessageBody = document.querySelector(`.receipt > .head .cell`) as Element;
-  claimMessageType.innerHTML = `<div>${type}</div>`;
-  claimMessageBody.innerHTML = `<div>${message}</div>`;
+  const claimMessageBody = document.querySelector(`#mainDetailsTable`) as Element;
+  claimMessageBody.innerHTML = `<div><span id="notice">${type}</span><br/><br/>${message}</div>`;
 }
diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index 640a0022..1f1370c4 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -147,14 +147,20 @@ a, .cell, div {
   animation: shimmer 1s infinite linear;
   background-size: 300%;
   background-position-x: 100%;
-}
-  
+} 
 @keyframes shimmer {
   to {
     background-position-x: 0%
   }
 }
 
+#notice {
+  color: #404040;
+}
+.receipt[data-make-claim="empty"] #mainDetailsTable{
+  text-align: center;
+} 
+
 .receipt[data-make-claim-rendered="true"][data-contract-loaded="true"][data-make-claim="ok"] #controls {
   opacity: 1;
   pointer-events: unset;