feat(idea/frontend): migrate to subsquid indexer (#1602)

idea/frontend/.env.example

@@ -1,4 +1,5 @@
 VITE_API_URL=
+VITE_INDEXER_API_URL=
 VITE_MAINNET_VOUCHERS_API_URL=
 VITE_TESTNET_VOUCHERS_API_URL=
 VITE_NODES_API_URL=

idea/frontend/package.json

@@ -28,7 +28,6 @@
     "lodash.isequal": "4.5.0",
     "lodash.isplainobject": "4.0.6",
     "lodash.isstring": "4.0.1",
-    "lodash.throttle": "4.1.1",
     "react": "18.2.0",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
@@ -48,7 +47,6 @@
     "@types/lodash.isequal": "4.5.6",
     "@types/lodash.isplainobject": "4.0.7",
     "@types/lodash.isstring": "4.0.7",
-    "@types/lodash.throttle": "4.1.7",
     "@types/node": "20.8.4",
     "@types/react": "18.2.36",
     "@types/react-dom": "18.2.14",
@@ -66,7 +64,7 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-refresh": "0.4.3",
     "sass": "1.69.1",
-    "typescript": "5.2.2",
+    "typescript": "5.5.3",
     "vite": "4.4.11",
     "vite-plugin-checker": "0.6.2",
     "vite-plugin-node-polyfills": "0.15.0",

idea/frontend/src/api/consts.ts

@@ -1,6 +1,16 @@
+import { getNextPageParam, select } from './utils';
+
 enum OwnerFilter {
   All = 'all',
   User = 'user',
 }
 
-export { OwnerFilter };
+// there's a problem with return type of select if those options are destructured to useInfiniteQuery,
+// therefore a little bit of boilerplate is needed. need to figure it out
+const INFINITE_QUERY = {
+  INITIAL_PAGE_PARAM: 0,
+  GET_NEXT_PAGE_PARAM: getNextPageParam,
+  SELECT: select,
+};
+
+export { OwnerFilter, INFINITE_QUERY };

idea/frontend/src/api/index.ts

@@ -1,28 +1,13 @@
 import { NodeSection } from '@/entities/node';
 import { NODES_API_URL } from '@/shared/config';
-import { fetchCode, fetchCodes, addCodeName } from './code';
-import { fetchProgram, fetchPrograms, addProgramName } from './program';
+
 import { fetchTestBalance } from './balance';
-import { fetchMessage, fetchMessages } from './message';
 import { fetchMetadata, addMetadata } from './metadata';
-import { addState, fetchStates, fetchState } from './state';
+import { PaginationParameters, PaginationResponse } from './types';
+import { INFINITE_QUERY } from './consts';
 
 const getNodes = () => fetch(NODES_API_URL).then((result) => result.json() as unknown as NodeSection[]);
 
-export {
-  getNodes,
-  fetchProgram,
-  addProgramName,
-  fetchPrograms,
-  addMetadata,
-  addCodeName,
-  fetchMetadata,
-  addState,
-  fetchStates,
-  fetchState,
-  fetchCode as getCode,
-  fetchCodes as getCodes,
-  fetchMessage as getMessage,
-  fetchMessages as getMessages,
-  fetchTestBalance as getTestBalance,
-};
+export { INFINITE_QUERY, getNodes, addMetadata, fetchMetadata, fetchTestBalance as getTestBalance };
+
+export type { PaginationParameters, PaginationResponse };

idea/frontend/src/api/types.ts

@@ -1,11 +1,11 @@
-type PaginationModel = {
-  publicKeyRaw?: string | null;
-  source?: string | null;
-  destination?: string | null;
+type PaginationParameters = {
   limit?: number;
   offset?: number;
-  type?: string;
-  query?: string;
 };
 
-export type { PaginationModel };
+type PaginationResponse<T> = {
+  result: T[];
+  count: number;
+};
+
+export type { PaginationParameters, PaginationResponse };

idea/frontend/src/api/utils.ts

@@ -0,0 +1,17 @@
+import { DEFAULT_LIMIT } from '@/shared/config';
+
+import { PaginationResponse } from './types';
+
+const getNextPageParam = <T>({ result, count }: PaginationResponse<T>, allPages: PaginationResponse<T>[]) => {
+  const lastPageCount = result.length;
+  const fetchedCount = (allPages.length - 1) * DEFAULT_LIMIT + lastPageCount;
+
+  return fetchedCount < count ? fetchedCount : undefined;
+};
+
+const select = <T>({ pages }: { pages: PaginationResponse<T>[] }) => ({
+  result: pages.flatMap((page) => page.result),
+  count: pages[0].count,
+});
+
+export { getNextPageParam, select };

idea/frontend/src/app/providers/blocks/Context.ts

@@ -1,7 +1,7 @@
 import { createContext } from 'react';
 
-import { IChainBlock } from '@/entities/chainBlock';
+import { RecentBlock } from '@/features/recentBlocks';
 
-const BlocksContext = createContext<IChainBlock[]>([]);
+const BlocksContext = createContext<RecentBlock[]>([]);
 
 export { BlocksContext };

idea/frontend/src/app/providers/blocks/Provider.tsx

@@ -2,7 +2,7 @@ import { ReactNode, useState, useEffect } from 'react';
 import { useApi } from '@gear-js/react-hooks';
 import { Header } from '@polkadot/types/interfaces';
 
-import { IChainBlock } from '@/entities/chainBlock';
+import { RecentBlock } from '@/features/recentBlocks';
 
 import { BlocksContext } from './Context';
 import { getTime, getBlock } from './helpers';
@@ -13,9 +13,9 @@ type Props = {
 
 const BlocksProvider = ({ children }: Props) => {
   const { api, isApiReady } = useApi();
-  const [blocks, setBlocks] = useState<IChainBlock[]>([]);
+  const [blocks, setBlocks] = useState<RecentBlock[]>([]);
 
-  const updateBlocks = (block: IChainBlock) =>
+  const updateBlocks = (block: RecentBlock) =>
     setBlocks((prevBlocks) => {
       const blocksTail = prevBlocks.length > 9 ? prevBlocks.slice(0, -1) : prevBlocks;
 

idea/frontend/src/app/providers/chain/Provider.tsx

@@ -2,7 +2,7 @@ import { ProviderProps, useApi } from '@gear-js/react-hooks';
 import { useEffect, useState } from 'react';
 
 import { RpcMethods } from '@/shared/config';
-import { RPCService } from '@/shared/services/rpcService';
+import { rpcService } from '@/shared/services/rpcService';
 
 import { ChainContext } from './Context';
 
@@ -21,7 +21,7 @@ const ChainProvider = ({ children }: ProviderProps) => {
 
     if (!genesis) return;
 
-    new RPCService().callRPC<boolean>(RpcMethods.NetworkData, { genesis }).then(({ result }) => setIsDevChain(!result));
+    rpcService.callRPC<boolean>(RpcMethods.NetworkData, { genesis }).then(({ result }) => setIsDevChain(!result));
   }, [genesis]);
 
   useEffect(() => {
@@ -32,7 +32,7 @@ const ChainProvider = ({ children }: ProviderProps) => {
     if (isDevChain) {
       setIsTestBalanceAvailable(true);
     } else {
-      new RPCService()
+      rpcService
         .callRPC<boolean>(RpcMethods.TestBalanceAvailable, { genesis })
         .then(({ result }) => setIsTestBalanceAvailable(result));
     }

idea/frontend/src/app/providers/onboarding/Provider.tsx

@@ -8,7 +8,7 @@ import { disableScroll, enableScroll, isMobileDevice } from '@/shared/helpers';
 import { OnboardingContext } from './Context';
 import { getHeading, getText } from './helpers';
 
-const steps = ['wallet', 'program', 'code', 'codes', 'message', 'messages', 'explorer', 'mailbox', 'apps', 'node'];
+const steps = ['wallet', 'program', 'code', 'codes', 'message', 'explorer', 'mailbox', 'apps', 'node'];
 
 const { Provider } = OnboardingContext;
 

idea/frontend/src/app/providers/onboarding/helpers.ts

@@ -16,18 +16,15 @@ const getHeading = (stepIndex: number) => {
       return 'This option allows you to send a message to a program';
 
     case 5:
-      return 'The list of messages can be found here';
-
-    case 6:
       return 'Explorer';
 
-    case 7:
+    case 6:
       return 'Mailbox';
 
-    case 8:
+    case 7:
       return 'App examples';
 
-    case 9:
+    case 8:
       return 'Network switcher';
 
     default:
@@ -53,18 +50,15 @@ const getText = (stepIndex: number) => {
       return "Copy destination program's address where to send a message and provide necessary details in the Payload section, click the “Calculate gas” and “Send message” buttons. You will be prompted to sign the transaction for the message sending.";
 
     case 5:
-      return 'You can navigate to necessary messages using search by program id, message id or applying filters';
-
-    case 6:
       return 'Here you can get details about recent network events, search by block hash or block number or apply filters';
 
-    case 7:
+    case 6:
       return 'Here you can check messages sent from programs to currently connected account.';
 
-    case 8:
+    case 7:
       return 'If you do not have a program to upload, check a broad library of smart-contract examples created by Gear team and find what best fits your use cases. You can take it as is or adapt to your needs.';
 
-    case 9:
+    case 8:
       return "Select the network you're working with, connect to your local test net or localhost Gear node";
 
     default: