fix(tangle-dapp): update result type and reduce refetch interval in useCredits (#3026)

Author: AtelyPham

apps/leaderboard/src/features/leaderboard/components/LeaderboardTable.tsx

@@ -204,7 +204,7 @@ export const LeaderboardTable = () => {
   });
 
   // TODO: Add network tabs when we support both mainnet and testnet
-  const [networkTab] = useState<NetworkType.Testnet>(NetworkType.Testnet);
+  const [networkTab] = useState<NetworkType>('TESTNET');
 
   const {
     data: latestBlock,

apps/leaderboard/src/features/leaderboard/queries/accountIdentitiesQuery.ts

@@ -1,4 +1,3 @@
-import { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
 import {
   getMultipleAccountInfo,
   IdentityType,
@@ -9,13 +8,13 @@ import { getRpcEndpoint } from '../../../utils/getRpcEndpoint';
 import { Account } from '../types';
 
 const fetcher = async (accounts: Pick<Account, 'id' | 'network'>[]) => {
-  const { testnetRpc, mainnetRpc } = getRpcEndpoint('all');
+  const { testnetRpc, mainnetRpc } = getRpcEndpoint('ALL');
 
   const testnetAccounts: string[] = [];
   const mainnetAccounts: string[] = [];
 
   accounts.forEach((account) => {
-    if (account.network === NetworkType.Testnet) {
+    if (account.network === 'TESTNET') {
       testnetAccounts.push(account.id);
     } else {
       mainnetAccounts.push(account.id);

apps/leaderboard/src/features/leaderboard/utils/createAccountExplorerUrl.ts

@@ -13,9 +13,9 @@ export const createAccountExplorerUrl = (
   network: NetworkType,
 ) => {
   switch (network) {
-    case NetworkType.Mainnet:
+    case 'MAINNET':
       return TANGLE_MAINNET_NETWORK.createExplorerAccountUrl(address);
-    case NetworkType.Testnet:
+    case 'TESTNET':
       return TANGLE_TESTNET_NATIVE_NETWORK.createExplorerAccountUrl(address);
     default:
       console.error(`Unsupported network: ${network}`);

apps/leaderboard/src/features/leaderboard/utils/processLeaderboardRecord.ts

@@ -1,5 +1,4 @@
 import { ZERO_BIG_INT } from '@tangle-network/dapp-config/constants';
-import { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
 import type { IdentityType } from '@tangle-network/tangle-shared-ui/utils/polkadot/identity';
 import { toBigInt } from '@tangle-network/ui-components';
 import find from 'lodash/find';
@@ -252,6 +251,6 @@ export const processLeaderboardRecord = (
     lastUpdatedAtTimestamp: record.lastUpdatedAtTimestamp,
     identity,
     // TODO: This should fetch from the API once the server supports multi-chain
-    network: NetworkType.Testnet,
+    network: 'TESTNET',
   } satisfies Account;
 };

apps/leaderboard/src/queries/latestFinalizedBlockQuery.ts

@@ -1,4 +1,3 @@
-import { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
 import { getApiPromise } from '@tangle-network/tangle-shared-ui/utils/polkadot/api';
 import { useQuery } from '@tanstack/react-query';
 import { LATEST_FINALIZED_BLOCK_QUERY_KEY } from '../constants/query';
@@ -11,12 +10,12 @@ type UseLatestFinalizedBlockResult<TNetwork extends Network> =
         mainnetBlock: number;
         testnetBlock: number;
       }
-    : TNetwork extends NetworkType.Testnet
+    : TNetwork extends 'TESTNET'
       ? {
           mainnetBlock: never;
           testnetBlock: number;
         }
-      : TNetwork extends NetworkType.Mainnet
+      : TNetwork extends 'MAINNET'
         ? {
             mainnetBlock: number;
             testnetBlock: never;

apps/leaderboard/src/types/index.ts

@@ -1,3 +1,3 @@
 import { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
 
-export type Network = 'all' | NetworkType.Testnet | NetworkType.Mainnet;
+export type Network = 'ALL' | NetworkType;

apps/leaderboard/src/utils/getRpcEndpoint.ts

@@ -1,43 +1,41 @@
-import { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
-import { Network } from '../types';
 import {
   TANGLE_MAINNET_WS_DWELLIR_RPC_ENDPOINT,
   TANGLE_TESTNET_WS_RPC_ENDPOINT,
 } from '@tangle-network/dapp-config';
+import { Network } from '../types';
 
-type GetRpcEndpointResult<TNetwork extends Network> =
-  TNetwork extends NetworkType.Testnet
+type GetRpcEndpointResult<TNetwork extends Network> = TNetwork extends 'TESTNET'
+  ? {
+      testnetRpc: typeof TANGLE_TESTNET_WS_RPC_ENDPOINT;
+      mainnetRpc: undefined;
+    }
+  : TNetwork extends 'MAINNET'
     ? {
-        testnetRpc: typeof TANGLE_TESTNET_WS_RPC_ENDPOINT;
-        mainnetRpc: undefined;
+        testnetRpc: undefined;
+        mainnetRpc: typeof TANGLE_MAINNET_WS_DWELLIR_RPC_ENDPOINT;
       }
-    : TNetwork extends NetworkType.Mainnet
+    : TNetwork extends 'ALL'
       ? {
-          testnetRpc: undefined;
+          testnetRpc: typeof TANGLE_TESTNET_WS_RPC_ENDPOINT;
           mainnetRpc: typeof TANGLE_MAINNET_WS_DWELLIR_RPC_ENDPOINT;
         }
-      : TNetwork extends 'all'
-        ? {
-            testnetRpc: typeof TANGLE_TESTNET_WS_RPC_ENDPOINT;
-            mainnetRpc: typeof TANGLE_MAINNET_WS_DWELLIR_RPC_ENDPOINT;
-          }
-        : never;
+      : never;
 
 export function getRpcEndpoint<TNetwork extends Network>(
   network: TNetwork,
 ): GetRpcEndpointResult<TNetwork> {
   switch (network) {
-    case NetworkType.Testnet:
+    case 'TESTNET':
       return {
         testnetRpc: TANGLE_TESTNET_WS_RPC_ENDPOINT,
         mainnetRpc: undefined,
       } as GetRpcEndpointResult<TNetwork>;
-    case NetworkType.Mainnet:
+    case 'MAINNET':
       return {
         testnetRpc: undefined,
         mainnetRpc: TANGLE_MAINNET_WS_DWELLIR_RPC_ENDPOINT,
       } as GetRpcEndpointResult<TNetwork>;
-    case 'all':
+    case 'ALL':
       return {
         testnetRpc: TANGLE_TESTNET_WS_RPC_ENDPOINT,
         mainnetRpc: TANGLE_MAINNET_WS_DWELLIR_RPC_ENDPOINT,

apps/tangle-dapp/src/data/credits/useCredits.ts

@@ -75,7 +75,7 @@ const responseSchema = z.union([
   z.object({
     id: z.number(),
     jsonrpc: z.string(),
-    result: z.bigint(),
+    result: z.bigint().or(z.number()),
   }),
 ]);
 
@@ -149,7 +149,7 @@ export function getQueryOptions(
     queryKey: [ReactQueryKey.GetCredits, rpcEndpoint, activeSubstrateAddress],
     queryFn: () => fetcher(rpcEndpoint, activeSubstrateAddress),
     retry: 3,
-    refetchInterval: 30000, // Refetch every 30 seconds
+    refetchInterval: 6000, // Refetch every 6 seconds
     placeholderData: (prev) => prev,
   });
 }

codegen.ts

@@ -17,6 +17,7 @@ const config: CodegenConfig = {
       config: {
         defaultScalarType: 'unknown',
         documentMode: 'string',
+        enumsAsTypes: true,
         scalars: {
           BigFloat: 'string',
           Date: 'Date',