feat: loosen up the zod validations and return null instead of throwing

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

@@ -0,0 +1,45 @@
+"use client"
+
+import { trpc } from "@/lib/trpc/client"
+
+import DesktopTable from "./Desktop"
+import MobileTable from "./Mobile"
+
+import type {
+  ClientEarnAndBurnProps,
+  TransactionsObject,
+} from "@/types/components/myPages/myPage/earnAndBurn"
+
+export default function ClientEarnAndBurn({
+  initialData,
+  lang,
+}: ClientEarnAndBurnProps) {
+  /**
+   * desctruct fetchNextPage, hasNextPage once pagination is
+   * possible through API
+   */
+  const { data } = trpc.user.transaction.friendTransactions.useInfiniteQuery(
+    { limit: 5 },
+    {
+      getNextPageParam: (lastPage) => lastPage?.nextCursor,
+      initialData: {
+        pageParams: [undefined, 1],
+        pages: [initialData],
+      },
+    }
+  )
+
+  // TS having a hard time with the filtered type.
+  // This is only temporary as we will not return null
+  // later on when we handle errors appropriately.
+  const filteredTransactions = (data?.pages.filter(
+    (page) => page && page.data
+  ) ?? []) as unknown as TransactionsObject[]
+  const transactions = filteredTransactions.flatMap((page) => page.data)
+  return (
+    <>
+      <MobileTable lang={lang} transactions={transactions} />
+      <DesktopTable lang={lang} transactions={transactions} />
+    </>
+  )
+}