feat(core): replace server-side api calls with client-side for list pages

src/api/BlocksApi.ts

@@ -5,7 +5,11 @@ import {
   MAIN_BLOCKS_URL,
   wrapResponse,
 } from "./index";
-import { BlockProps, RawTxnWithPaginationProps } from "./types";
+import {
+  BlockProps,
+  BlockWithPaginationProps,
+  RawTxnWithPaginationProps,
+} from "./types";
 
 export default {
   getBlocks: async (
@@ -55,15 +59,6 @@ export default {
   },
 };
 
-interface BlockWithPaginationProps {
-  items: BlockProps[];
-  next_page_params?: {
-    block_number?: string;
-    items_count?: string;
-    index?: string;
-  };
-}
-
 export interface BlockNextPageParamsProps {
   block_number: string;
   items_count: string;

src/api/SmartContractApi.ts

@@ -1,31 +1,12 @@
 import {
-  SMART_CONTRACT_URL,
   VERIFY_SMART_CONTRACT_URL,
-  filterParams,
   getBaseUrl,
   wrapResponse,
 } from "@api/index";
-import {
-  SmartContractPageParamsProps,
-  SmartContractWithPaginationProps,
-  CompilerType,
-} from "@api/types";
+import { SmartContractPageParamsProps, CompilerType } from "@api/types";
 import { NetworkConnection } from "@contexts/Environment";
 
 export default {
-  getSmartContracts: async (
-    network: NetworkConnection,
-    smartContractId?: string,
-    itemsCount?: string
-  ): Promise<SmartContractWithPaginationProps> => {
-    const baseUrl = getBaseUrl(network);
-    const params = filterParams([
-      { key: "smart_contract_id", value: smartContractId },
-      { key: "items_count", value: itemsCount },
-    ]);
-    const res = await fetch(`${baseUrl}/${SMART_CONTRACT_URL}${params}`);
-    return wrapResponse<SmartContractWithPaginationProps>(res);
-  },
   verifySmartContract: async (
     network: NetworkConnection,
     data,

src/api/types.ts

@@ -1,5 +1,15 @@
 import { TokenProps } from "./TokenApi";
 
+export interface BlocksPageParamsProps {
+  block_number: string;
+  items_count: string;
+}
+
+export interface BlockWithPaginationProps {
+  items: BlockProps[];
+  next_page_params: BlocksPageParamsProps;
+}
+
 export interface WalletAddressToken {
   address: string;
   type: string;

src/components/LatestDataTable.tsx

@@ -14,7 +14,7 @@ type DataType = "blocks" | "transactions";
 interface Props {
   type: DataType;
   title: string;
-  data: RowData[];
+  data: RowData[] | [];
   listPageUrl: string;
   detailsPageBaseUrl: string;
   containerClass?: string;
@@ -47,7 +47,11 @@ export default function LatestDataTable({
             <div className="md:order-last md:flex-1 md:pt-6 md:col-span-8">
               {isLoading ? (
                 <SkeletonLoader
-                  screen={SkeletonLoaderScreen.MainTable}
+                  screen={
+                    type === "transactions"
+                      ? SkeletonLoaderScreen.MainTableTxs
+                      : SkeletonLoaderScreen.MainTableBlocks
+                  }
                   rows={5}
                 />
               ) : (

src/components/skeletonLoaders/MainTableBlocksLoader.tsx

@@ -0,0 +1,50 @@
+import clsx from "clsx";
+
+export default function MainTableTxs() {
+  const valueStyle = "h-3 md:h-4 lg:h-6 bg-dark-200 rounded";
+  return (
+    <div>
+      <div className="py-5">
+        <div className="hidden md:flex items-center gap-2">
+          <div className="rounded-full w-6 h-6 bg-dark-200 shrink-0" />
+
+          {/* desktop */}
+          <div className="hidden xl:grid grid-cols-4 w-full gap-16">
+            <div className={clsx("w-full", valueStyle)} />
+            <div className={clsx("w-full", valueStyle)} />
+            <div className={clsx("w-full", valueStyle)} />
+            <div className={clsx("w-full", valueStyle)} />
+          </div>
+
+          {/* tablet */}
+          <div className="xl:hidden grid grid-cols-3 grid-rows-2 w-full gap-x-16 gap-y-2">
+            <div className={clsx("w-full", valueStyle)} />
+            <div className={clsx("w-full", valueStyle)} />
+            <div className={clsx("w-full", valueStyle)} />
+            <div className={clsx("w-full", valueStyle)} />
+            <div className={clsx("w-full", valueStyle)} />
+            <div className={clsx("w-full", valueStyle)} />
+          </div>
+        </div>
+
+        {/* mobile */}
+        <div className="md:hidden flex flex-col gap-y-6">
+          <div className="flex items-center gap-2 w-full">
+            <div className="rounded-full w-6 h-6 bg-dark-200 shrink-0" />
+            <div className="flex justify-between w-full">
+              <div className={clsx("w-2/4", valueStyle)} />
+              <div className={clsx("w-1/4", valueStyle)} />
+            </div>
+          </div>
+          <div className="grid grid-cols-2 grid-rows-2 w-full gap-x-12 gap-y-4">
+            <div className={clsx(valueStyle)} />
+            <div className={clsx(valueStyle)} />
+            <div className={clsx(valueStyle)} />
+            <div className={clsx(valueStyle)} />
+          </div>
+        </div>
+      </div>
+      <div className="border-b border-black-600 ml-8 lg:ml-10" />
+    </div>
+  );
+}

src/components/skeletonLoaders/MainTableTxsLoader.tsx

@@ -0,0 +1,51 @@
+import clsx from "clsx";
+
+export default function MainTableTxs() {
+  const valueStyle = "h-3 md:h-4 lg:h-6 bg-dark-200 rounded";
+  return (
+    <div>
+      <div className="py-5">
+        <div className="flex gap-2">
+          <div className="rounded-full w-6 h-6 bg-dark-200 shrink-0" />
+          <div className="grid grid-cols-4 xl:grid-cols-12 w-full gap-8">
+            <div
+              className={clsx(
+                "col-span-1 mt-[6px] xl:col-span-2 lg:mr-4 xl:mr-0",
+                "w-[124px] md:w-auto md:mt-0",
+                valueStyle
+              )}
+            />
+
+            {/* from & to */}
+            <div
+              className={clsx(
+                "col-span-2 gap-4 grid w-3/4",
+                "col-start-1 md:col-start-2 md:gap-2 md:-ml-4",
+                "xl:col-span-5 xl:gap-5 xl:grid-cols-2 xl:w-full xl:ml-0"
+              )}
+            >
+              <div className={clsx("w-36 md:w-auto", valueStyle)} />
+              <div className={clsx("w-32 md:w-auto", valueStyle)} />
+              <div className={clsx("w-[184px] md:hidden", valueStyle)} />
+            </div>
+
+            {/* amount & timeago */}
+            <div className="col-span-1 col-end-5 xl:col-end-13 xl:col-span-4 gap-2 xl:gap-5 xl:grid-cols-2 -ml-4 lg:ml-0 hidden md:grid">
+              <div className={clsx(valueStyle)} />
+              <div className={clsx(valueStyle)} />
+            </div>
+
+            {/* timeago in mobile */}
+            <div
+              className={clsx(
+                "col-span-1 row-start-1 col-end-5 md:hidden w-[72px] -ml-5 mt-[6px]",
+                valueStyle
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="border-b border-black-600 ml-8 lg:ml-10" />
+    </div>
+  );
+}

src/components/skeletonLoaders/SkeletonLoader.tsx

@@ -1,10 +1,11 @@
 import BlockRowLoader from "pages/blocks/_components/BlockRowLoader";
 import TransactionRowLoader from "./TransactionRowLoader";
-import RowItemLoader from "./RowItemLoader";
+import MainTableBlocksLoader from "./MainTableBlocksLoader";
 import SmartContractLoader from "./SmartContractLoader";
 import AddressTokenLoader from "./AddressTokenLoader";
 import TokenHoldersLoader from "./TokenHoldersLoader";
 import AddressLogsLoader from "./AddressLogsLoader";
+import MainTableTxsLoader from "./MainTableTxsLoader";
 
 interface SkeletonLoaderProp {
   rows: number;
@@ -13,7 +14,8 @@ interface SkeletonLoaderProp {
 
 export enum SkeletonLoaderScreen {
   // Main page
-  "MainTable" = "MainTable",
+  "MainTableBlocks" = "MainTableBlocks",
+  "MainTableTxs" = "MainTableTxs",
 
   // Child pages
   "Tx" = "Tx",
@@ -30,11 +32,19 @@ export function SkeletonLoader(props: SkeletonLoaderProp): JSX.Element {
 
   // eslint-disable-next-line default-case
   switch (screen) {
-    case SkeletonLoaderScreen.MainTable:
+    case SkeletonLoaderScreen.MainTableBlocks:
       return (
         <>
           {skeletonRow.map((row) => (
-            <RowItemLoader key={row} />
+            <MainTableBlocksLoader key={row} />
+          ))}
+        </>
+      );
+    case SkeletonLoaderScreen.MainTableTxs:
+      return (
+        <>
+          {skeletonRow.map((row) => (
+            <MainTableTxsLoader key={row} />
           ))}
         </>
       );