#99 Remove old graphql codegen config (#106)

apps/web/codegen.ts

@@ -3,21 +3,6 @@ import type { Types } from "@graphql-codegen/plugin-helpers";
 import { join, sep } from "path";
 
 const schema = "https://mainnet.api.cartesiscan.io/graphql";
-const plugins = [
-    {
-        add: {
-            content:
-                'import type { DocumentNode } from "graphql/language/ast";',
-        },
-    },
-    "typescript",
-    "typescript-operations",
-    "typescript-urql",
-];
-
-const config = {
-    withHooks: true,
-};
 
 console.info(`Codegen will use schema URL: ${schema}`);
 
@@ -92,15 +77,6 @@ const generateConfig = (configs: CommonConfig[]): Generates => {
 
 const codegenConfig: CodegenConfig = {
     generates: {
-        /**
-         * @deprecated Will be removed in future updates see {@link https://github.com/cartesi/rollups-explorer/issues/99}
-         */
-        "src/graphql/index.tsx": {
-            schema,
-            documents: "./graphql/queries.graphql",
-            plugins,
-            config,
-        },
         ...generateConfig(setup),
     },
 };

apps/web/package.json

@@ -16,10 +16,10 @@
     "dependencies": {
         "@cartesi/rollups-explorer-ui": "*",
         "@cartesi/rollups-wagmi": "*",
-        "@mantine/core": "^7.3.0",
-        "@mantine/form": "^7.3.0",
-        "@mantine/hooks": "^7.3.0",
-        "@mantine/notifications": "^7.3.0",
+        "@mantine/core": "^7.5.0",
+        "@mantine/form": "^7.5.0",
+        "@mantine/hooks": "^7.5.0",
+        "@mantine/notifications": "^7.5.0",
         "@rainbow-me/rainbowkit": "1.2.0",
         "@react-spring/web": "^9.7.3",
         "abitype": "^0.9",
@@ -66,7 +66,7 @@
         "jsdom": "22.1.0",
         "npm-run-all": "^4",
         "postcss": "^8",
-        "postcss-preset-mantine": "^1.6",
+        "postcss-preset-mantine": "^1.12.3",
         "postcss-simple-vars": "^7",
         "ts-node": "^10",
         "typescript": "^5",

apps/web/src/components/applications/applicationRow.tsx

@@ -3,7 +3,7 @@ import { ActionIcon, Table, Tooltip } from "@mantine/core";
 import Address from "../address";
 import Link from "next/link";
 import { TbInbox, TbPlugConnected, TbPlugConnectedX } from "react-icons/tb";
-import { Application } from "../../graphql";
+import { Application } from "../../graphql/explorer/types";
 import { useConnectionConfig } from "../../providers/connectionConfig/hooks";
 
 export interface ApplicationRowProps {

apps/web/src/components/applications/applications.tsx

@@ -2,10 +2,8 @@
 
 import { Stack } from "@mantine/core";
 import { FC, useCallback, useState } from "react";
-import {
-    ApplicationOrderByInput,
-    useApplicationsConnectionQuery,
-} from "../../graphql";
+import { ApplicationOrderByInput } from "../../graphql/explorer/types";
+import { useApplicationsConnectionQuery } from "../../graphql/explorer/hooks/queries";
 import ApplicationsTable from "../applications/applicationsTable";
 import Paginated from "../paginated";
 

apps/web/src/components/applications/applicationsTable.tsx

@@ -3,8 +3,8 @@
 import { Loader, Table } from "@mantine/core";
 import { FC } from "react";
 import ApplicationRow from "./applicationRow";
-import type { ApplicationItemFragment } from "../../graphql";
-import { Application } from "../../graphql";
+import { ApplicationItemFragment } from "../../graphql/explorer/operations";
+import { Application } from "../../graphql/explorer/types";
 
 export interface ApplicationsTableProps {
     applications: ApplicationItemFragment[];

apps/web/src/components/connection/connectionForm.tsx

@@ -27,7 +27,7 @@ import {
     ApplicationsDocument,
     ApplicationsQuery,
     ApplicationsQueryVariables,
-} from "../../graphql";
+} from "../../graphql/explorer/operations";
 import {
     CheckStatusDocument,
     CheckStatusQuery,

apps/web/src/components/entriesSummary.tsx

@@ -2,7 +2,7 @@
 
 import { Summary } from "@cartesi/rollups-explorer-ui";
 import { FC } from "react";
-import { useStatsQuery } from "../graphql";
+import { useStatsQuery } from "../graphql/explorer/hooks/queries";
 
 const EntriesSummary: FC = () => {
     const [{ data: stats }] = useStatsQuery();

apps/web/src/components/inputs/inputCard.tsx

@@ -2,7 +2,7 @@ import { Group, Paper, Stack, Text } from "@mantine/core";
 import { FC } from "react";
 import prettyMilliseconds from "pretty-ms";
 import Jazzicon, { jsNumberForAddress } from "react-jazzicon";
-import { InputItemFragment } from "../../graphql";
+import { InputItemFragment } from "../../graphql/explorer/operations";
 
 export type InputCardProps = {
     input: InputItemFragment;

apps/web/src/components/inputs/inputDetailsView.tsx

@@ -5,7 +5,7 @@ import { omit, pathOr } from "ramda";
 import { FC, useEffect, useState } from "react";
 import { useQuery } from "urql";
 import { Address } from "viem";
-import { InputItemFragment } from "../../graphql";
+import { InputItemFragment } from "../../graphql/explorer/operations";
 import {
     InputDetailsDocument,
     InputDetailsQuery,

apps/web/src/components/inputs/inputRow.tsx

@@ -15,7 +15,7 @@ import prettyMilliseconds from "pretty-ms";
 import { FC } from "react";
 import { TbArrowRight, TbFileText, TbX } from "react-icons/tb";
 import { Address as AddressType, formatUnits, getAddress } from "viem";
-import { InputItemFragment } from "../../graphql";
+import { InputItemFragment } from "../../graphql/explorer/operations";
 import Address from "../address";
 import InputDetailsView from "./inputDetailsView";
 

apps/web/src/components/inputs/inputs.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { Stack } from "@mantine/core";
-import { FC, useCallback, useEffect, useState } from "react";
-import { InputOrderByInput, useInputsQuery } from "../../graphql";
+import { FC, useCallback, useState } from "react";
+import { InputOrderByInput } from "../../graphql/explorer/types";
+import { useInputsQuery } from "../../graphql/explorer/hooks/queries";
 import InputsTable from "../inputs/inputsTable";
 import Paginated from "../paginated";
 

apps/web/src/components/inputs/inputsTable.tsx

@@ -9,7 +9,7 @@ import {
 } from "@mantine/core";
 import { FC, useCallback, useRef, useState } from "react";
 import InputRow from "./inputRow";
-import type { InputItemFragment } from "../../graphql";
+import type { InputItemFragment } from "../../graphql/explorer/operations";
 import { useElementVisibility } from "../../hooks/useElementVisibility";
 import { TableResponsiveWrapper } from "../tableResponsiveWrapper";
 

apps/web/src/components/latestEntries.tsx

@@ -1,16 +1,24 @@
 "use client";
-import { Card } from "@cartesi/rollups-explorer-ui";
-import { Button, Grid, Group, Text, useMantineTheme } from "@mantine/core";
+import {
+    Button,
+    Card,
+    Grid,
+    Group,
+    Text,
+    useMantineTheme,
+} from "@mantine/core";
 import type { FC } from "react";
 import Link from "next/link";
 import { TbApps, TbInbox } from "react-icons/tb";
 import LatestEntriesTable, { Entry } from "./latestEntriesTable";
 import {
     ApplicationOrderByInput,
     InputOrderByInput,
+} from "../graphql/explorer/types";
+import {
     useApplicationsConnectionQuery,
     useInputsQuery,
-} from "../graphql";
+} from "../graphql/explorer/hooks/queries";
 import type { Address as AddressType } from "abitype/dist/types/abi";
 import { IconType } from "react-icons";
 import { useMediaQuery } from "@mantine/hooks";

apps/web/src/hooks/useSearchApplications.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { useApplicationsQuery } from "../graphql";
+import { useApplicationsQuery } from "../graphql/explorer/hooks/queries";
 
 export const useSearchApplications = ({
     address,

apps/web/src/hooks/useSearchTokens.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { useTokensQuery } from "../graphql";
+import { useTokensQuery } from "../graphql/explorer/hooks/queries";
 
 export const useSearchTokens = ({
     address,

apps/web/src/providers/styleProvider.tsx

@@ -1,10 +1,10 @@
 import { MantineProvider } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
-import { FC } from "react";
+import type { FC, ReactNode } from "react";
 import { theme } from "./theme";
 
 export type StyleProviderProps = {
-    children?: React.ReactNode;
+    children?: ReactNode;
 };
 
 const StyleProvider: FC<StyleProviderProps> = (props) => {

apps/web/src/providers/theme.tsx

@@ -4,6 +4,7 @@ import {
     List,
     MantineThemeOverride,
     Modal,
+    Card,
     createTheme,
     mergeMantineTheme,
 } from "@mantine/core";
@@ -44,6 +45,12 @@ const themeOverride: MantineThemeOverride = createTheme({
                 spacing: "0.5rem",
             },
         }),
+        Card: Card.extend({
+            defaultProps: {
+                shadow: "sm",
+                withBorder: true,
+            },
+        }),
     },
 });
 

apps/web/test/components/latestEntries.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it } from "vitest";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { withMantineTheme } from "../utils/WithMantineTheme";
 import LatestEntries from "../../src/components/latestEntries";
 
@@ -196,8 +196,10 @@ const applications = [
     },
 ];
 
-vi.mock("../../src/graphql", async () => {
-    const actual = await vi.importActual("../../src/graphql");
+vi.mock("../../src/graphql/explorer/hooks/queries", async () => {
+    const actual = await vi.importActual(
+        "../../src/graphql/explorer/hooks/queries",
+    );
     return {
         ...(actual as any),
         useInputsQuery: () => [

apps/web/test/components/sendTransaction.test.tsx

@@ -4,7 +4,7 @@ import SendTransaction from "../../src/components/sendTransaction";
 import withMantineTheme from "../utils/WithMantineTheme";
 const Component = withMantineTheme(SendTransaction);
 
-vi.mock("../../src/graphql", async () => {
+vi.mock("../../src/graphql/explorer/hooks/queries", async () => {
     return {
         useApplicationsQuery: () => [{ data: {}, fetching: false }],
         useTokensQuery: () => [{ data: {}, fetching: false }],
@@ -108,7 +108,9 @@ describe("SendTransaction component", () => {
 
     it("should initially query 10 applications with no predefined search", async () => {
         const mockedFn = vi.fn().mockReturnValue([{ data: {} }]);
-        const graphqlModule = await import("../../src/graphql");
+        const graphqlModule = await import(
+            "../../src/graphql/explorer/hooks/queries"
+        );
         graphqlModule.useApplicationsQuery = vi
             .fn()
             .mockImplementation(mockedFn);
@@ -129,7 +131,9 @@ describe("SendTransaction component", () => {
         render(<Component initialDepositType="input" />);
 
         const mockedFn = vi.fn().mockReturnValue([{ data: {} }]);
-        const graphqlModule = await import("../../src/graphql");
+        const graphqlModule = await import(
+            "../../src/graphql/explorer/hooks/queries"
+        );
         graphqlModule.useApplicationsQuery = vi
             .fn()
             .mockImplementation(mockedFn);
@@ -174,7 +178,9 @@ describe("SendTransaction component", () => {
 
     it("should initially query 10 tokens with no predefined search", async () => {
         const mockedFn = vi.fn().mockReturnValue([{ data: {} }]);
-        const graphqlModule = await import("../../src/graphql");
+        const graphqlModule = await import(
+            "../../src/graphql/explorer/hooks/queries"
+        );
         graphqlModule.useTokensQuery = vi.fn().mockImplementation(mockedFn);
 
         render(<Component initialDepositType="input" />);
@@ -193,7 +199,9 @@ describe("SendTransaction component", () => {
         render(<Component initialDepositType="erc20" />);
 
         const mockedFn = vi.fn().mockReturnValue([{ data: {} }]);
-        const graphqlModule = await import("../../src/graphql");
+        const graphqlModule = await import(
+            "../../src/graphql/explorer/hooks/queries"
+        );
         graphqlModule.useTokensQuery = vi.fn().mockImplementation(mockedFn);
 
         const tokenInputForm = screen.queryByTestId(

apps/web/test/utils/useQueryMock.tsx

@@ -9,7 +9,7 @@ import {
     ApplicationsDocument,
     ApplicationsQuery,
     ApplicationsQueryVariables,
-} from "../../src/graphql";
+} from "../../src/graphql/explorer/operations";
 import {
     CheckStatusDocument,
     CheckStatusQuery,

packages/ui/package.json

@@ -26,8 +26,8 @@
     },
     "dependencies": {
         "@cartesi/rollups-wagmi": "*",
-        "@mantine/core": "^7.3.0",
-        "@mantine/hooks": "^7.3.0",
+        "@mantine/core": "^7.5.0",
+        "@mantine/hooks": "^7.5.0",
         "@react-spring/web": "^9.7.3",
         "ramda": "^0.29.0",
         "react-icons": "^4",

packages/ui/src/SummaryCard.tsx

@@ -1,8 +1,7 @@
 "use client";
-import { Group, Text } from "@mantine/core";
+import { Card, Group, Text } from "@mantine/core";
 import { FC } from "react";
 import { IconType } from "react-icons";
-import { Card } from "./Card";
 import TweenedNumber from "./TweenedNumber";
 
 export type SummaryCardProps = {

packages/ui/src/index.tsx

@@ -1,4 +1,3 @@
-export { Card } from "./Card";
 export { ERC20DepositForm } from "./ERC20DepositForm";
 export { EtherDepositForm } from "./EtherDepositForm";
 export {