centralize queries

src/app/accounts/page.tsx

@@ -11,19 +11,7 @@ import { columns } from "../data/accounts";
 import PaginationControls from "@/components/PaginationControls";
 import { useSearchParams } from "next/navigation";
 import SearchInput from "@/components/SearchInput";
-
-const GET_ACCOUNTS = gql`
-  query Accounts {
-    accounts {
-      evmAddress
-      freeBalance
-      id
-      totalBalance
-      updatedAt
-      reservedBalance
-    }
-  }
-`;
+import { GET_ACCOUNTS } from "@/graphql/queries";
 
 function Accounts() {
   const PAGE_SiZE = useSearchParams().get("page") ?? "1";

src/app/blocks/[id]/page.tsx

@@ -10,23 +10,7 @@ import timeAgo from "@/lib/ConvertTime";
 import { gql, useQuery } from "@apollo/client";
 import { Card, CardBody } from "@nextui-org/react";
 import { Check, CheckCircle, Copy } from "lucide-react";
-
-const BLOCK_BY_ID = gql`
-  query BlockByID($id: String!) {
-    blockById(id: $id) {
-      id
-      validator
-      hash
-      specVersion
-      timestamp
-      height
-      parentHash
-      extrinsicsCount
-      eventsCount
-      callsCount
-    }
-  }
-`;
+import { BLOCK_BY_ID } from "@/graphql/queries";
 
 /**
  * Interface for the props passed to the BlockPage component.

src/app/blocks/page.tsx

@@ -19,20 +19,7 @@ import { columns } from "../data/blocks";
 import { useExtrinsic } from "@/context/ExtrinsicsContext";
 import ExplorerNav from "@/components/ExplorerNav";
 import SearchInput from "@/components/SearchInput";
-
-export const GET_LATEST_BLOCKS = gql`
-  query GetLatestBlocks($limit: Int, $offset: Int) {
-    blocks(limit: $limit, offset: $offset, orderBy: timestamp_DESC) {
-      eventsCount
-      id
-      timestamp
-      extrinsicsCount
-      height
-      hash
-      validator
-    }
-  }
-`;
+import { GET_LATEST_BLOCKS } from "@/graphql/queries";
 
 function Blocks() {
   const PAGE_SiZE = useSearchParams().get("page") ?? "1";

src/app/evm/contracts/[id]/page.tsx

@@ -27,6 +27,7 @@ import {
   QrCode,
   Wallet,
 } from "lucide-react";
+import { EVM_CONTRACT_BY_ID } from "@/graphql/queries";
 
 function page() {
   return (
@@ -66,19 +67,7 @@ function page() {
 
 export default page;
 
-const EVM_CONTRACT_BY_ID = gql`
-  query evmContractById($id: String!) {
-    evmContractById(id: $id) {
-      account
-      extrinsicHash
-      id
-      timestamp
-      type
-    }
-  }
-`;
-
-function EvmContractAccount({}): React.ReactElement {
+function EvmContractAccount({ }): React.ReactElement {
   const params = useParams();
   const { loading, error, data } = useQuery(EVM_CONTRACT_BY_ID, {
     variables: { id: params.id },
@@ -163,9 +152,9 @@ function EvmContractAccount({}): React.ReactElement {
                   aria-label="Single selection example"
                   variant="flat"
                   disallowEmptySelection
-                  // selectionMode="single"
-                  // selectedKeys={selectedKeys}
-                  // onSelectionChange={setSelectedKeys}
+                // selectionMode="single"
+                // selectedKeys={selectedKeys}
+                // onSelectionChange={setSelectedKeys}
                 >
                   <DropdownItem
                     key="copy"

src/app/evm/contracts/page.tsx

@@ -10,18 +10,7 @@ import { Card, CardBody, Tab, Tabs } from "@nextui-org/react";
 
 import { columns } from "../../data/evm_contracts";
 import { FileCheck2 } from "lucide-react";
-
-const GET_EVM_CONTRACTS = gql`
-  query evmContracts {
-    evmContracts {
-      account
-      id
-      extrinsicHash
-      timestamp
-      type
-    }
-  }
-`;
+import { GET_EVM_CONTRACTS } from "@/graphql/queries";
 
 function EvmContracts() {
   const accounts = [

src/app/extrinsics/[id]/page.tsx

@@ -11,32 +11,7 @@ import { gql, useQuery } from "@apollo/client";
 import { Card, CardBody } from "@nextui-org/react";
 import { CheckCircle, Copy } from "lucide-react";
 import { useExtrinsic } from "@/context/ExtrinsicsContext";
-
-const GET_EXTRINSICS_BY_ID = gql`
-  query ExtrinsicById($id: String!) {
-    extrinsicById(id: $id) {
-      timestamp
-      extrinsicHash
-      blockNumber
-      fee
-      tip
-      version
-      success
-      signerPublicKey
-      indexInBlock
-      events {
-        eventName
-      }
-      calls {
-        callName
-      }
-      block {
-        height
-        id
-      }
-    }
-  }
-`;
+import { GET_EXTRINSICS_BY_ID } from "@/graphql/queries";
 
 export default function ExtrinsicPage() {
   const { extrinsic, toggleExtrinsic } = useExtrinsic();

src/app/extrinsics/page.tsx

@@ -11,23 +11,8 @@ import PaginationControls from "@/components/PaginationControls";
 import { useSearchParams } from "next/navigation";
 import { useExtrinsic } from "@/context/ExtrinsicsContext";
 import SearchInput from "@/components/SearchInput";
+import { GET_LATEST_EXTRINSICS } from "@/graphql/queries";
 
-const GET_LATEST_EXTRINSICS = gql`
-  query GetLastestExtrinsics($limit: Int, $offset: Int) {
-    extrinsics(limit: $limit, offset: $offset, orderBy: block_timestamp_DESC) {
-      id
-      extrinsicHash
-      timestamp
-      success
-      fee
-      block {
-        height
-        id
-      }
-      blockNumber
-    }
-  }
-`;
 let signedExtrinsics = null;
 function Extrinsics() {
   const PAGE_SiZE = useSearchParams().get("page") ?? "1";

src/app/page.tsx

@@ -43,17 +43,9 @@ import Link from "next/link";
 import ConvertBigNumber from "@/lib/ConvertBigNumber";
 import truncateMiddle from "@/lib/TruncateMiddle";
 import { gql, useQuery } from "@apollo/client";
-import { GET_LATEST_TRANSACTIONS } from "./tx/page"
-import { GET_LATEST_BLOCKS } from "./blocks/page";
 import { useExtrinsic } from "@/context/ExtrinsicsContext";
 import { log } from "console";
-
-const GET_LAST_MONTHS_TRANSACTIONS = gql`
-query LastMonth($t: DateTime!) {
-  transfers(where: {timestamp_gt: $t}) {
-    timestamp
-  }
-}`;
+import { GET_LAST_MONTHS_TRANSACTIONS, GET_LATEST_BLOCKS, GET_LATEST_TRANSACTIONS } from "@/graphql/queries";
 
 function frequency(d: Date[]): number[] {
   let map = Array<number>(30).fill(0);

src/app/tx/[id]/TransferDetails.tsx

@@ -0,0 +1,130 @@
+"use client";
+import * as React from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import ConvertBigNumber from "@/lib/ConvertBigNumber";
+import timeAgo from "@/lib/ConvertTime";
+import truncateMiddle from "@/lib/TruncateMiddle";
+import { useQuery } from "@apollo/client";
+import { Card, CardBody } from "@nextui-org/react";
+import { CheckCircle, Copy } from "lucide-react";
+import { BlockPageProps } from "./page";
+import { TRANSFER_BY_ID } from "@/graphql/queries";
+
+export const TransferDetails: React.FC<BlockPageProps> = () => {
+    const params = useParams();
+    const id = (params.id as string).startsWith("0x") ? params.id as string : "0x" + params.id;
+    console.log("params", id);
+
+    const { loading, error, data } = useQuery(TRANSFER_BY_ID, {
+        variables: { id },
+    });
+
+    if (loading) return <p>Loading...</p>;
+    if (error) {
+        console.error("GraphQL error:", error);
+        return <p>Error: {error.message}</p>;
+    }
+    const transfer = data.transferById;
+    console.log(transfer);
+
+    return (
+        <div className="px-4">
+            <div className="flex items-center">
+                <span className="text-2xl w-[8ch]">Transfer</span><span className="text-gray-400">#{truncateMiddle(transfer.id, 50)}</span>
+                {transfer.success ? (<CheckCircle color="green" size="32px" />) : ("-")}
+            </div>
+            <Card>
+                <CardBody>
+                    <div className="py-2 inline-block min-w-full sm:px-6 lg:px-8">
+                        <table className="min-w-full">
+                            <tbody>
+                                <tr className="border-b">
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                                        Timestamp
+                                    </td>
+                                    <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
+                                        {transfer.timestamp}
+                                    </td>
+                                </tr>
+                                <tr className="bg-white border-b">
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                                        Block Time
+                                    </td>
+                                    <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
+                                        {timeAgo(transfer.timestamp)}
+                                    </td>
+                                </tr>
+                                <tr className="bg-white border-b">
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                                        Block Number
+                                    </td>
+                                    <td className=" flex items-center gap-2 text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
+                                        <span>
+                                            <CheckCircle color="green" size="24px" />
+                                        </span>
+                                        {transfer.blockNumber}
+                                    </td>
+                                </tr>
+
+                                <tr className="bg-white border-b">
+                                    <td className="px-6 py-4 text-sm font-medium text-gray-900">
+                                        Extrinsic Hash
+                                    </td>
+                                    <td className=" flex items-center gap-2 text-sm text-gray-900 font-light px-6 py-4">
+                                        {transfer.extrinsicHash}
+                                        <span>
+                                            <Copy
+                                                size="24px"
+                                                color="gray"
+                                                className="cursor-pointer"
+                                                onClick={() => navigator.clipboard.writeText(transfer.hash)} />
+                                        </span>
+                                    </td>
+                                </tr>
+                                <tr className="bg-white border-b">
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                                        Asset Transfer
+                                    </td>
+                                    <td className="text-sm font-light px-6 py-4 whitespace-normal">
+                                        <p>
+                                            From
+                                            <span className="text-sel_blue ml-2">
+                                                <Link href="/explorer/accounts/1">
+                                                    {truncateMiddle(transfer.from.evmAddress, 20)}
+                                                </Link>
+                                                <span className="px-2 text-gray-400">To</span>
+                                                <Link href="#" className="truncate">
+                                                    {truncateMiddle(transfer.to.evmAddress, 20)}
+                                                </Link>
+                                            </span>
+                                        </p>
+                                    </td>
+                                </tr>
+                                <tr className="bg-white border-b">
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                                        Value
+                                    </td>
+                                    <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
+                                        {`${ConvertBigNumber(transfer.amount ? transfer.amount : "-")} ${transfer.symbol}`}
+                                    </td>
+                                </tr>
+                                <tr className="bg-white border-b">
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                                        Type
+                                    </td>
+
+                                    <td className="text-sm  font-light px-6 py-4 whitespace-nowrap">
+                                        <span className="px-3 py-2 text-white bg-primary rounded-3xl">
+                                            {transfer.type ? transfer.type : "-"}
+                                        </span>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </CardBody>
+            </Card>
+        </div>
+    );
+};

src/app/tx/[id]/page.tsx

@@ -12,35 +12,13 @@ import truncateMiddle from "@/lib/TruncateMiddle";
 import { gql, useQuery } from "@apollo/client";
 import { Card, CardBody } from "@nextui-org/react";
 import { CheckCircle, Copy } from "lucide-react";
-
-export const TRANSFER_BY_ID = gql`
-query TransferByID($id: String!) {
-  transferById(id: $id) {
-    amount
-    blockNumber
-    extrinsicHash
-    id
-    timestamp
-    symbol
-    success
-    type
-    from {
-      evmAddress
-      id
-    }
-    to {
-      evmAddress
-      id
-    }
-  }
-}
-`;
+import { TRANSFER_BY_ID } from "@/graphql/queries";
 
 /**
  * Interface for the props passed to the BlockPage component.
  * Contains the route params with the block ID.
  */
-interface BlockPageProps {
+export interface BlockPageProps {
   params: {
     id: string;
   };