Feature: Update Rollups 1.0.0 and wire subsquid

.github/workflows/docker-rollups.yml

@@ -95,6 +95,8 @@ jobs:
               env:
                   WC_PROJECT_ID: ${{ secrets.WC_PROJECT_ID }}
                   INFURA_PROJECT_ID: ${{ secrets.INFURA_PROJECT_ID }}
+                  SEPOLIA_GRAPHQL_URL: ${{ secrets.SEPOLIA_GRAPHQL_URL }}
+                  ARB_GOERLI_GRAPHQL_URL: ${{ secrets.ARB_GOERLI_GRAPHQL_URL }}
               with:
                   project: ${{ vars.DEPOT_PROJECT }}
                   workdir: .

apps/rollups/.env.development

@@ -5,4 +5,7 @@ NEXT_PUBLIC_USE_GRAPHQL_MOCK=false
 NEXT_PUBLIC_DAPP_LOCAL_DEV=false
 NEXT_PUBLIC_PROJECT_ID=YOUR_INFURA_PROJECT_ID
 NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=YOUR_WALLETCONNECT_PROJECT_ID
-NEXT_PUBLIC_ROLLUPS_EXPLORER_URL=THE_ROLLUPS_PUBLIC_URL
+NEXT_PUBLIC_ROLLUPS_EXPLORER_URL=THE_ROLLUPS_PUBLIC_URL
+NEXT_PUBLIC_SEPOLIA_GRAPHQL_URL=YOUR_SEPOLIA_SQUID_GRAPHQL_ENDPOINT
+NEXT_PUBLIC_ARB_GOERLI_GRAPHQL_URL=YOUR_ARB_GOERLI_SQUID_GRAPHQL_ENDPOINT
+NEXT_PUBLIC_LOCAL_GRAPHQL_URL=YOUR_LOCAL_GRAPHQL_URL

apps/rollups/.env.production

@@ -5,4 +5,6 @@ NEXT_PUBLIC_USE_GRAPHQL_MOCK=false
 NEXT_PUBLIC_DAPP_LOCAL_DEV=false
 NEXT_PUBLIC_PROJECT_ID=YOUR_INFURA_PROJECT_ID
 NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=YOUR_WALLETCONNECT_PROJECT_ID
-NEXT_PUBLIC_ROLLUPS_EXPLORER_URL=THE_ROLLUPS_PUBLIC_URL
+NEXT_PUBLIC_ROLLUPS_EXPLORER_URL=THE_ROLLUPS_PUBLIC_URL
+NEXT_PUBLIC_SEPOLIA_GRAPHQL_URL=YOUR_SEPOLIA_SQUID_GRAPHQL_ENDPOINT
+NEXT_PUBLIC_ARB_GOERLI_GRAPHQL_URL=YOUR_ARB_GOERLI_SQUID_GRAPHQL_ENDPOINT

apps/rollups/__tests__/containers/rollups/Dapps.test.tsx

@@ -17,53 +17,57 @@ import {
     screen,
 } from '@testing-library/react';
 import { CombinedError } from '@urql/core';
-import { withChakraTheme } from '../../test-utilities';
 import {
-    dappsFilterOptions,
+    Dapps,
     DappsFilters,
     DappsSummary,
-    Dapps,
+    dappsFilterOptions,
 } from '../../../src/containers/rollups/Dapps';
+import { withChakraTheme } from '../../test-utilities';
+
 import {
-    DApp_OrderBy,
-    useDappsQuery,
-    useDashboardQuery,
-} from '../../../src/generated/graphql/subgraph';
-
-const path = '../../../src/generated/graphql/subgraph/';
-jest.mock(path, () => {
-    const originalModule = jest.requireActual(path);
+    ApplicationOrderByInput,
+    useApplicationsQuery,
+    useRollupsSummaryQuery,
+} from '../../../src/generated/graphql/squid';
+
+const squidPath = '../../../src/generated/graphql/squid/';
+
+jest.mock(squidPath, () => {
+    const originalModule = jest.requireActual(squidPath);
     return {
         __esModule: true,
         ...originalModule,
-        useDappsQuery: jest.fn(),
-        useDashboardQuery: jest.fn(),
+        useRollupsSummaryQuery: jest.fn(),
+        useApplicationsQuery: jest.fn(),
     };
 });
 
 const DappsSummaryComponent = withChakraTheme(DappsSummary);
 const DappsFiltersComponent = withChakraTheme(DappsFilters);
 
-const mockUseDappsQuery = useDappsQuery as jest.MockedFunction<
-    typeof useDappsQuery
->;
-const mockUseDashboardQuery = useDashboardQuery as jest.MockedFunction<
-    typeof useDashboardQuery
+const mockUseApplicationsQuery = useApplicationsQuery as jest.MockedFunction<
+    typeof useApplicationsQuery
 >;
 
+const mockUseRollupsSummaryQuery =
+    useRollupsSummaryQuery as jest.MockedFunction<
+        typeof useRollupsSummaryQuery
+    >;
+
 const DappsComponent = withChakraTheme(Dapps);
 
 describe('DApps container', () => {
     describe('Dapps component', () => {
         beforeEach(() => {
-            mockUseDappsQuery.mockReturnValue([
+            mockUseApplicationsQuery.mockReturnValue([
                 {
                     fetching: false,
                     stale: false,
                 },
                 () => undefined,
             ]);
-            mockUseDashboardQuery.mockReturnValue([
+            mockUseRollupsSummaryQuery.mockReturnValue([
                 {
                     fetching: false,
                     stale: false,
@@ -78,41 +82,27 @@ describe('DApps container', () => {
         });
 
         it('should display dapps summary', () => {
-            mockUseDashboardQuery.mockReturnValue([
+            mockUseRollupsSummaryQuery.mockReturnValue([
                 {
                     fetching: false,
                     stale: false,
                     data: {
-                        dashboard: {
-                            id: '1',
-                            factoryCount: 1,
-                            dappCount: 0,
-                            inputCount: 0,
+                        rollupsSummary: {
+                            totalApplications: 3,
+                            totalInputs: 2,
                         },
                     },
                 },
                 () => undefined,
             ]);
 
-            const { rerender } = render(<DappsComponent chainId={5} />);
-            expect(screen.getByTestId('dapps-summary')).toBeInTheDocument();
-
-            mockUseDashboardQuery.mockReturnValue([
-                {
-                    fetching: false,
-                    stale: false,
-                },
-                () => undefined,
-            ]);
-            rerender(<DappsComponent chainId={5} />);
+            render(<DappsComponent chainId={11155111} />);
 
-            expect(() => screen.getByTestId('dapps-summary')).toThrow(
-                'Unable to find an element'
-            );
+            expect(screen.getByTestId('dapps-summary')).toBeInTheDocument();
         });
 
         it('should display error', () => {
-            mockUseDappsQuery.mockReturnValue([
+            mockUseApplicationsQuery.mockReturnValue([
                 {
                     fetching: false,
                     stale: false,
@@ -128,7 +118,7 @@ describe('DApps container', () => {
                 screen.getByText('Error fetching DApps!')
             ).toBeInTheDocument();
 
-            mockUseDappsQuery.mockReturnValue([
+            mockUseApplicationsQuery.mockReturnValue([
                 {
                     fetching: false,
                     stale: false,
@@ -143,23 +133,23 @@ describe('DApps container', () => {
         });
 
         it('should not display dapps filters and list when error has occurred', () => {
-            mockUseDappsQuery.mockReturnValue([
+            mockUseApplicationsQuery.mockReturnValue([
                 {
                     fetching: false,
                     stale: false,
                     error: {
                         message: 'Error',
                     } as CombinedError,
                     data: {
-                        dapps: [
+                        applications: [
                             {
                                 id: '1',
-                                deploymentTimestamp:
-                                    new Date().getTime() / 1000,
-                                activityTimestamp: new Date().getTime() / 1000,
-                                factory: {
-                                    id: '2',
-                                },
+                                deploymentTimestamp: new Date()
+                                    .getTime()
+                                    .toString(),
+                                activityTimestamp: new Date()
+                                    .getTime()
+                                    .toString(),
                                 inputCount: 0,
                             },
                         ],
@@ -206,7 +196,7 @@ describe('DApps container', () => {
         it('should render correct options', () => {
             render(
                 <DappsFiltersComponent
-                    orderBy={DApp_OrderBy.ActivityTimestamp}
+                    orderBy={ApplicationOrderByInput.ActivityTimestampDesc}
                     fetching={false}
                     onChangeSearch={() => undefined}
                     onChangeOrderBy={() => undefined}
@@ -224,7 +214,7 @@ describe('DApps container', () => {
             const onChangeSearch = jest.fn();
             render(
                 <DappsFiltersComponent
-                    orderBy={DApp_OrderBy.ActivityTimestamp}
+                    orderBy={ApplicationOrderByInput.ActivityTimestampDesc}
                     fetching={false}
                     onChangeSearch={onChangeSearch}
                     onChangeOrderBy={() => undefined}
@@ -244,7 +234,7 @@ describe('DApps container', () => {
             const onChangeOrderBy = jest.fn();
             render(
                 <DappsFiltersComponent
-                    orderBy={DApp_OrderBy.ActivityTimestamp}
+                    orderBy={ApplicationOrderByInput.ActivityTimestampDesc}
                     fetching={false}
                     onChangeSearch={() => undefined}
                     onChangeOrderBy={onChangeOrderBy}
@@ -264,7 +254,7 @@ describe('DApps container', () => {
         it('should display spinner when fetching', () => {
             render(
                 <DappsFiltersComponent
-                    orderBy={DApp_OrderBy.ActivityTimestamp}
+                    orderBy={ApplicationOrderByInput.ActivityTimestampDesc}
                     fetching
                     onChangeSearch={() => undefined}
                     onChangeOrderBy={() => undefined}

apps/rollups/__tests__/containers/rollups/RollupsGraphQLProvider.test.tsx

@@ -17,10 +17,10 @@ import {
     screen,
 } from '@testing-library/react';
 import { Client } from 'urql';
-import { withChakraTheme } from '../../test-utilities';
 import GraphQLProvider from '../../../src/containers/rollups/RollupsGraphQLProvider';
 import { Network, useNetwork } from '../../../src/services/useNetwork';
 import { useRollupsGraphQL } from '../../../src/services/useRollupsGraphQL';
+import { withChakraTheme } from '../../test-utilities';
 
 jest.mock('urql', () => {
     const originalModule = jest.requireActual('urql');
@@ -65,7 +65,7 @@ const Component = withChakraTheme(GraphQLProvider);
 
 const defaultProps = {
     address: '0x907eA0e65Ecf3af503007B382E1280Aeb46104ad',
-    chainId: 5,
+    chainId: 11155111,
 };
 
 describe('GraphQLProvider container', () => {

apps/rollups/__tests__/services/useNetwork.test.tsx

@@ -9,10 +9,10 @@
 // WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
 // PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
-import { renderHook, cleanup } from '@testing-library/react';
-import { useWallet } from '@explorer/wallet';
 import { Web3Provider } from '@ethersproject/providers';
+import { useWallet } from '@explorer/wallet';
 import { WalletConnectionContextProps } from '@explorer/wallet/src/definitions';
+import { cleanup, renderHook } from '@testing-library/react';
 import { useNetwork } from '../../src/services/useNetwork';
 
 const walletMod = '@explorer/wallet';
@@ -35,7 +35,7 @@ describe('useNetwork hook', () => {
     });
 
     it('should set network to the wallet chainId when wallet exists', () => {
-        const chainId = 5;
+        const chainId = 11155111;
         mockUseWallet.mockReturnValue({
             library: {} as Web3Provider,
             chainId,

apps/rollups/__tests__/services/useRollupsGraphQL.test.tsx

@@ -46,7 +46,7 @@ const defaultUseWalletData = {
     chainId: 3,
 };
 
-const defaultNetwork = networks[0x5];
+const defaultNetwork = networks[0xaa36a7];
 
 describe('useRollupsGraphQL hook', () => {
     beforeEach(() => {

apps/rollups/codegen.yml

@@ -1,10 +1,9 @@
 generates:
-    ./src/generated/graphql/subgraph/index.ts:
+    ./src/generated/graphql/squid/index.ts:
         schema:
-            - https://api.thegraph.com/subgraphs/name/cartesi/rollups-goerli
-            - https://api.thegraph.com/subgraphs/name/cartesi/rollups-arbitrum-goerli
+            - https://squid.subsquid.io/rollups-sepolia/v/v5/graphql
         documents:
-            - ./graphql/subgraph/rollups.graphql
+            - ./graphql/squid/rollups.graphql
         plugins:
             - typescript
             - typescript-operations

apps/rollups/graphql/squid/rollups.graphql

@@ -0,0 +1,55 @@
+query applications(
+    $limit: Int!
+    $offset: Int
+    $orderBy: [ApplicationOrderByInput!]
+    $where: ApplicationWhereInput
+) {
+    applications(
+        limit: $limit
+        offset: $offset
+        orderBy: $orderBy
+        where: $where
+    ) {
+        id
+        inputCount
+        deploymentTimestamp
+        activityTimestamp
+    }
+}
+
+query rollupsSummary {
+    rollupsSummary {
+        totalInputs
+        totalApplications
+    }
+}
+
+query applicationConnection(
+    $first: Int
+    $after: String
+    $orderBy: [ApplicationOrderByInput!]!
+    $where: ApplicationWhereInput
+) {
+    applicationsConnection(
+        orderBy: $orderBy
+        first: $first
+        after: $after
+        where: $where
+    ) {
+        totalCount
+        pageInfo {
+            hasNextPage
+            hasPreviousPage
+            startCursor
+            endCursor
+        }
+        edges {
+            node {
+                id
+                inputCount
+                deploymentTimestamp
+                activityTimestamp
+            }
+        }
+    }
+}