feat: render something on error/fail

ubiquity · Feb 4, 2025 · 2920e44 · 2920e44
1 parent 6cb48bd
commit 2920e44
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 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
@@ -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
@@ -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
@@ -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;