fix: eas hooks types

packages/gql/codegen.ts

@@ -1,6 +1,7 @@
 import type { CodegenConfig } from "@graphql-codegen/cli";
 
 // Document mode is used for smaller bundle size
+// https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#when-to-use-a-string-documentmode
 // https://github.com/mswjs/msw/issues/1583
 
 // https://github.com/dotansimha/graphql-code-generator/discussions/8707
@@ -12,7 +13,7 @@ const config: CodegenConfig = {
 	generates: {
 		"./src/graphql/eas/": {
 			preset: "client",
-			documents: ["../../packages/ui-react/src/lib/eas/**/*.ts"],
+			documents: ["../../packages/ui-react/src/{lib,hooks}/eas/**/*.ts"],
 			schema: "https://easscan.org/graphql",
 			presetConfig: {
 				gqlTagName: "gql",
@@ -25,7 +26,7 @@ const config: CodegenConfig = {
 		// https://discuss.ens.domains/t/ens-subgraph-migration-to-the-decentralised-version/19183
 		"./src/graphql/ens/": {
 			preset: "client",
-			documents: ["../../packages/ui-react/src/lib/ens/**/*.ts"],
+			documents: ["../../packages/ui-react/src/{lib,hooks}/ens/**/*.ts"],
 			schema:
 				"https://api.studio.thegraph.com/query/49574/enssepolia/version/latest",
 			presetConfig: {

packages/gql/package.json

@@ -5,7 +5,9 @@
 	"main": "index.js",
 	"files": ["dist"],
 	"exports": {
-		".": "./src/graphql/index.ts"
+		".": "./src/graphql/index.ts",
+		"./eas/*": "./src/graphql/eas/*.ts",
+		"./ens/*": "./src/graphql/ens/*.ts"
 	},
 	"scripts": {
 		"build:gql": "graphql-codegen --config codegen.ts"

packages/gql/src/graphql/eas/gql.ts

@@ -3,7 +3,26 @@ import * as types from './graphql';
 
 
 
-const documents = {}
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ */
+const documents = {
+    "\n  query allAttestationsBy(\n    $where: AttestationWhereInput\n  ) {\n    attestations(where: $where) {\n      id\n      txid\n      recipient\n      schema {\n        index\n        schemaNames {\n          name\n        }\n      }\n      time\n      isOffchain\n      schemaId\n      attester\n    }\n  }\n": types.AllAttestationsByDocument,
+};
+
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(source: "\n  query allAttestationsBy(\n    $where: AttestationWhereInput\n  ) {\n    attestations(where: $where) {\n      id\n      txid\n      recipient\n      schema {\n        index\n        schemaNames {\n          name\n        }\n      }\n      time\n      isOffchain\n      schemaId\n      attester\n    }\n  }\n"): typeof import('./graphql').AllAttestationsByDocument;
+
+
 export function gql(source: string) {
   return (documents as any)[source] ?? {};
 }

packages/gql/src/graphql/eas/graphql.ts

@@ -1,4 +1,5 @@
 /* eslint-disable */
+import { DocumentTypeDecoration } from '@graphql-typed-document-node/core';
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
@@ -2849,6 +2850,13 @@ export type TimestampWhereUniqueInput = {
   id?: InputMaybe<Scalars['String']['input']>;
 };
 
+export type AllAttestationsByQueryVariables = Exact<{
+  where?: InputMaybe<AttestationWhereInput>;
+}>;
+
+
+export type AllAttestationsByQuery = { __typename?: 'Query', attestations: Array<{ __typename?: 'Attestation', id: string, txid: string, recipient: string, time: number, isOffchain: boolean, schemaId: string, attester: string, schema: { __typename?: 'Schema', index: string, schemaNames: Array<{ __typename?: 'SchemaName', name: string }> } }> };
+
 export class TypedDocumentString<TResult, TVariables>
   extends String
   implements DocumentTypeDecoration<TResult, TVariables>
@@ -2863,3 +2871,23 @@ export class TypedDocumentString<TResult, TVariables>
     return this.value;
   }
 }
+
+export const AllAttestationsByDocument = new TypedDocumentString(`
+    query allAttestationsBy($where: AttestationWhereInput) {
+  attestations(where: $where) {
+    id
+    txid
+    recipient
+    schema {
+      index
+      schemaNames {
+        name
+      }
+    }
+    time
+    isOffchain
+    schemaId
+    attester
+  }
+}
+    `) as unknown as TypedDocumentString<AllAttestationsByQuery, AllAttestationsByQueryVariables>;

packages/ui-react/src/components/attestations/attestation-badge.tsx

@@ -1,7 +1,7 @@
 import { Address } from "viem";
 import { useChainId } from "wagmi";
 import { Badge } from "#components/shadcn/badge";
-import { useGetAttestations } from "#hooks/eas/get-attestations";
+import { useGetAttestations } from "#hooks/eas/use-get-attestations";
 
 // TODO
 export function AttestationBadge({

packages/ui-react/src/components/attestations/attestation-card.tsx

@@ -14,7 +14,7 @@ import {
 } from "#components/shadcn/card";
 import { Separator } from "#components/shadcn/separator";
 import { Skeleton } from "#components/shadcn/skeleton";
-import { useGetAttestationWithUid } from "#hooks/eas/get-attestation-with-uid";
+import { useGetAttestationWithUid } from "#hooks/eas/use-get-attestation-with-uid.js";
 import { getShortHex } from "#lib/utils/hex";
 import { AttestationSchemaBadge } from "./attestation-schema-badge";
 import { AttestationMeta, asAttestationMeta } from "./attestations";

packages/ui-react/src/components/attestations/attestations-table.tsx

@@ -4,7 +4,7 @@ import { Address, fromBlobs } from "viem";
 import { mainnet } from "viem/chains";
 import { useChainId } from "wagmi";
 import { DataTable } from "#components/data-table";
-import { useGetAttestations } from "#hooks/eas/get-attestations";
+import { useGetAttestations } from "#hooks/eas/use-get-attestations";
 import { getEasscanAttestationUrl } from "#lib/eas/easscan";
 import { truncate } from "#lib/utils/hex";
 import { AttestationSchemaBadge } from "./attestation-schema-badge";

packages/ui-react/src/components/attestations/attestations.ts

@@ -1,6 +1,6 @@
 import { format, formatDistance, subDays } from "date-fns";
 import { Address } from "viem";
-import { AttestationQueryResult } from "#hooks/eas/get-attestations";
+import { AttestationQueryResult } from "#hooks/eas/use-get-attestations";
 
 // TODO sync graphql type
 export const asAttestationMeta = (attestation: AttestationQueryResult) => {

packages/ui-react/src/hooks/eas/use-attestation.ts

@@ -12,6 +12,7 @@ import {
 	Address,
 	Chain,
 	Hex,
+	TransactionReceipt,
 	createWalletClient,
 	stringToHex,
 	zeroHash,
@@ -26,6 +27,11 @@ export type UseAttestationParams = {
 	schemaString: string;
 };
 
+export type UseAttestationReturnType = {
+	uids: string[];
+	txnReceipt?: TransactionReceipt;
+};
+
 export const useAttestation = (params: UseAttestationParams) => {
 	const { account, chain, isOffchain, schemaId, schemaString } = params;
 	const client = createWalletClient({

packages/ui-react/src/hooks/eas/get-attestation-with-uid.tsx → packages/ui-react/src/hooks/eas/use-get-attestation-with-uid.tsx

@@ -1,24 +1,25 @@
-import { QueryClient, useQuery } from "@tanstack/react-query";
+import { Attestation } from "@geist/graphql/eas/graphql";
+import { QueryClient, UseQueryResult, useQuery } from "@tanstack/react-query";
 import { gql, rawRequest } from "graphql-request";
 import { getEasscanEndpoint } from "#lib/eas/easscan";
 
-export type AttestationByIdResponse = {
-	attestation: {
-		id: string;
-		txid: string;
-		recipient: string;
-		schema: {
-			index: number;
-			schemaNames: {
-				name: string;
-			}[];
-		};
-		time: string; // Assuming time is returned as a string (e.g., ISO 8601 format)
-		isOffchain: boolean;
-		schemaId: string;
-		attester: string;
-	} | null; // In case attestation can be null
-};
+// export type AttestationByIdResponse = {
+// 	attestation: {
+// 		id: string;
+// 		txid: string;
+// 		recipient: string;
+// 		schema: {
+// 			index: number;
+// 			schemaNames: {
+// 				name: string;
+// 			}[];
+// 		};
+// 		time: string; // Assuming time is returned as a string (e.g., ISO 8601 format)
+// 		isOffchain: boolean;
+// 		schemaId: string;
+// 		attester: string;
+// 	} | null; // In case attestation can be null
+// };
 
 const allAttestationsByQuery = gql`
   query AttestationById($where: AttestationWhereUniqueInput!) {
@@ -40,17 +41,21 @@ const allAttestationsByQuery = gql`
   }
 `;
 
+export type UseGetAttestationParams = {
+	uid: string;
+	chainId: number;
+};
+
+export type UseGetAttestationsReturnType = UseQueryResult<Attestation, Error>;
+
 export const createGetAttestationWithUidQueryOptions = ({
 	uid,
 	chainId,
-}: {
-	uid: string;
-	chainId: number;
-}) => {
+}: UseGetAttestationParams) => {
 	return {
 		queryKey: ["attestation", chainId, uid],
 		queryFn: async () =>
-			rawRequest<AttestationByIdResponse>(
+			rawRequest(
 				`${getEasscanEndpoint(chainId)}/graphql`,
 				allAttestationsByQuery.toString(),
 				{
@@ -65,10 +70,7 @@ export const createGetAttestationWithUidQueryOptions = ({
 export const useGetAttestationWithUid = ({
 	uid,
 	chainId,
-}: {
-	uid: string;
-	chainId: number;
-}) => {
+}: UseGetAttestationParams): UseGetAttestationsReturnType => {
 	const queryOptions = createGetAttestationWithUidQueryOptions({
 		uid,
 		chainId,

packages/ui-react/src/hooks/eas/get-attestations.int.test.tsx → packages/ui-react/src/hooks/eas/use-get-attestations.int.test.tsx

@@ -1,6 +1,6 @@
 import { mainnet, optimism } from "viem/chains";
 import { describe, expect, test } from "vitest";
-import { useGetAttestations } from "./get-attestations";
+import { useGetAttestations } from "./use-get-attestations";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { renderHook, waitFor } from "@testing-library/react";

packages/ui-react/src/hooks/eas/get-attestations.ts → packages/ui-react/src/hooks/eas/use-get-attestations.ts

@@ -1,11 +1,9 @@
 import { gql } from "@geist/graphql";
-import { useQuery } from "@tanstack/react-query";
+import type { Attestation } from "@geist/graphql/eas/graphql";
+import { UseQueryResult, useQuery } from "@tanstack/react-query";
 import { rawRequest, request } from "graphql-request";
 import { Address, Hex } from "viem";
 import { getEasscanEndpoint } from "#lib/eas/easscan";
-// import { AllAttestationsByQuery } from 'node_modules/@geist/graphql/src/graphql/graphql';
-
-type AllAttestationsByQuery = any;
 
 const allAttestationsByQuery = gql(`
   query allAttestationsBy(
@@ -29,22 +27,23 @@ const allAttestationsByQuery = gql(`
   }
 `);
 
-export type AttestationQueryResult = AllAttestationsByQuery["attestations"][0];
+export type UseGetAttestationsParams = {
+	chainId: number;
+	address: Address;
+};
+
+export type UseGetAttestationsReturnType = UseQueryResult<Attestation[], Error>;
 
-// TODO type safety
 export const useGetAttestations = ({
 	chainId,
 	address,
-}: {
-	chainId: number;
-	address: Address;
-}) => {
+}: UseGetAttestationsParams): UseGetAttestationsReturnType => {
 	// https://github.com/dotansimha/graphql-code-generator/blob/master/examples/react/tanstack-react-query/src/use-graphql.ts
 
 	const results = useQuery({
 		queryKey: ["attestations", chainId, address],
 		queryFn: async () =>
-			rawRequest<AllAttestationsByQuery>(
+			rawRequest<Attestation[]>(
 				`${getEasscanEndpoint(chainId)}/graphql`,
 				allAttestationsByQuery.toString(),
 				{
@@ -54,7 +53,7 @@ export const useGetAttestations = ({
 						},
 					},
 				},
-			),
+			).then(({ data }) => data),
 	});
 
 	return results;

packages/ui-react/src/hooks/eas/use-upload-attestation.ts

@@ -1,7 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useWalletClient } from "wagmi";
 import { UploadAttestationParams } from "#components/attestations/attestations";
-import { createGetAttestationWithUidQueryOptions } from "#hooks/eas/get-attestation-with-uid";
+import { createGetAttestationWithUidQueryOptions } from "#hooks/eas/use-get-attestation-with-uid.js";
 import { useToast } from "#hooks/shadcn/use-toast";
 import {
 	createLighthouseParams,