fix: temp disable features using unavailable data

components/MyPages/Blocks/Points/EarnAndBurn/earnAndBurn.module.css

@@ -30,3 +30,13 @@
   text-align: left;
   padding: 16px 32px;
 }
+
+.emptyPlaceholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  font-size: var(--typography-Title5-Desktop-fontSize);
+  border: 1px solid var(--Base-Fill-Normal);
+  border-top: none;
+}

components/MyPages/Blocks/Points/EarnAndBurn/index.tsx

@@ -38,8 +38,7 @@ function EarnAndBurn({ lang }: EarnAndBurnProps) {
   }
 
   const transactions = data?.pages.flatMap((page) => page.data) ?? []
-
-  return (
+  return transactions.length ? (
     <div className={styles.container}>
       <table className={styles.table}>
         <thead className={styles.thead}>
@@ -61,7 +60,8 @@ function EarnAndBurn({ lang }: EarnAndBurnProps) {
           ))}
         </tbody>
       </table>
-      <Button
+      {/* TODO: add once pagination is available through API */}
+      {/* <Button
         disabled={isFetching}
         intent="primary"
         bgcolor="white"
@@ -69,7 +69,24 @@ function EarnAndBurn({ lang }: EarnAndBurnProps) {
         onClick={loadMoreData}
       >
         {_("See more transactions")}
-      </Button>
+      </Button> */}
+    </div>
+  ) : (
+    <div>
+      <table className={styles.table}>
+        <thead className={styles.thead}>
+          <tr>
+            {tableHeadings.map((heading) => (
+              <th key={heading} className={styles.th}>
+                {heading}
+              </th>
+            ))}
+          </tr>
+        </thead>
+      </table>
+      <div className={styles.emptyPlaceholder}>
+        {_("No transactions available")}
+      </div>
     </div>
   )
 }