feat: add mainnet support to leaderboard with network toggle (#3052)

Author: AtelyPham

.env.example

@@ -9,4 +9,4 @@ export NX_ADD_PLUGINS=false
 
 export ESLINT_USE_FLAT_CONFIG=false
 
-export VITE_GRAPHQL_ENDPOINT='https://testnet-gql.tangle.tools/graphql'
+export VITE_GRAPHQL_ENDPOINT='https://mainnet-gql.tangle.tools/graphql'

apps/leaderboard/src/features/indexingProgress/components/SyncProgressIndicator.tsx

@@ -1,5 +1,6 @@
 import { CrossCircledIcon } from '@radix-ui/react-icons';
 import { StatusIndicator } from '@tangle-network/icons';
+import { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
 import {
   Chip,
   EMPTY_VALUE_PLACEHOLDER,
@@ -8,8 +9,12 @@ import {
 import { useMemo } from 'react';
 import { useIndexingProgress } from '../queries';
 
-export const SyncProgressIndicator = () => {
-  const { data, error, isPending } = useIndexingProgress();
+export const SyncProgressIndicator = ({
+  network,
+}: {
+  network: NetworkType;
+}) => {
+  const { data, error, isPending } = useIndexingProgress(network);
 
   const progress = useMemo(() => {
     if (!data?.lastProcessedHeight || !data?.targetHeight) {

apps/leaderboard/src/features/indexingProgress/queries/indexingProgressQuery.ts

@@ -1,5 +1,6 @@
 import { BLOCK_TIME_MS } from '@tangle-network/dapp-config/constants/tangle';
 import { graphql } from '@tangle-network/tangle-shared-ui/graphql';
+import { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
 import { executeGraphQL } from '@tangle-network/tangle-shared-ui/utils/executeGraphQL';
 import { useQuery } from '@tanstack/react-query';
 import { INDEXING_PROGRESS_QUERY_KEY } from '../../../constants/query';
@@ -13,15 +14,15 @@ const IndexingProgressQueryDocument = graphql(/* GraphQL */ `
   }
 `);
 
-const fetcher = async () => {
-  const result = await executeGraphQL(IndexingProgressQueryDocument);
+const fetcher = async (network: NetworkType) => {
+  const result = await executeGraphQL(network, IndexingProgressQueryDocument);
   return result.data._metadata;
 };
 
-export function useIndexingProgress() {
+export function useIndexingProgress(network: NetworkType) {
   return useQuery({
-    queryKey: [INDEXING_PROGRESS_QUERY_KEY],
-    queryFn: fetcher,
+    queryKey: [INDEXING_PROGRESS_QUERY_KEY, network],
+    queryFn: () => fetcher(network),
     refetchInterval: BLOCK_TIME_MS,
     placeholderData: (prev) => prev,
   });

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

@@ -8,6 +8,9 @@ import {
   isSubstrateAddress,
   KeyValueWithButton,
   Table,
+  TabsListWithAnimation,
+  TabsRoot,
+  TabsTriggerWithAnimation,
   Tooltip,
   TooltipBody,
   TooltipTrigger,
@@ -203,8 +206,7 @@ export const LeaderboardTable = () => {
     pageSize: 15,
   });
 
-  // TODO: Add network tabs when we support both mainnet and testnet
-  const [networkTab] = useState<NetworkType>('TESTNET' as NetworkType);
+  const [networkTab, setNetworkTab] = useState<NetworkType>('MAINNET');
 
   const {
     data: latestBlock,
@@ -243,6 +245,7 @@ export const LeaderboardTable = () => {
     isPending,
     isFetching,
   } = useLeaderboard(
+    networkTab,
     pagination.pageSize,
     pagination.pageIndex * pagination.pageSize,
     blockNumberSevenDaysAgo,
@@ -304,52 +307,36 @@ export const LeaderboardTable = () => {
   return (
     <Card className="space-y-6 !bg-transparent !border-transparent p-0">
       <div className="flex items-center justify-between flex-wrap sm:flex-nowrap gap-4">
-        {/* <TabsRoot
-              className="max-w-xs flex-auto"
-              value={networkTab}
-              onValueChange={(tab) =>
-                setNetworkTab(tab as 'all' | 'mainnet' | 'testnet')
-              }
+        <TabsRoot
+          className="max-w-xs flex-auto"
+          value={networkTab}
+          onValueChange={(tab) => setNetworkTab(tab as NetworkType)}
+        >
+          <TabsListWithAnimation>
+            <TabsTriggerWithAnimation
+              className="min-h-8"
+              value="MAINNET"
+              isActive={networkTab === 'MAINNET'}
+              hideSeparator
+              labelVariant="body2"
+              labelClassName="py-1 px-0"
+            >
+              Mainnet
+            </TabsTriggerWithAnimation>
+            <TabsTriggerWithAnimation
+              className="min-h-8"
+              value="TESTNET"
+              isActive={networkTab === 'TESTNET'}
+              hideSeparator
+              labelVariant="body2"
+              labelClassName="py-1 px-0"
             >
-              <TabsListWithAnimation>
-                <TabsTriggerWithAnimation
-                  className="min-h-8"
-                  value="all"
-                  isActive={networkTab === 'all'}
-                  hideSeparator
-                  labelVariant="body2"
-                  labelClassName="py-1 px-0"
-                >
-                  <span className="block xs:hidden !text-inherit">All</span>
-
-                  <span className="hidden xs:block !text-inherit">
-                    All Networks
-                  </span>
-                </TabsTriggerWithAnimation>
-                <TabsTriggerWithAnimation
-                  className="min-h-8"
-                  value="mainnet"
-                  isActive={networkTab === 'mainnet'}
-                  hideSeparator
-                  labelVariant="body2"
-                  labelClassName="py-1 px-0"
-                >
-                  Mainnet
-                </TabsTriggerWithAnimation>
-                <TabsTriggerWithAnimation
-                  className="min-h-8"
-                  value="testnet"
-                  isActive={networkTab === 'testnet'}
-                  hideSeparator
-                  labelVariant="body2"
-                  labelClassName="py-1 px-0"
-                >
-                  Testnet
-                </TabsTriggerWithAnimation>
-              </TabsListWithAnimation>
-            </TabsRoot> */}
-
-        <SyncProgressIndicator />
+              Testnet
+            </TabsTriggerWithAnimation>
+          </TabsListWithAnimation>
+        </TabsRoot>
+
+        <SyncProgressIndicator network={networkTab} />
 
         <div className="flex items-center justify-end gap-2 grow">
           <Input

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

@@ -3,7 +3,10 @@ import {
   SafeNestedType,
 } from '@tangle-network/dapp-types/utils/types';
 import { graphql } from '@tangle-network/tangle-shared-ui/graphql';
-import { LeaderboardTableDocumentQuery } from '@tangle-network/tangle-shared-ui/graphql/graphql';
+import {
+  LeaderboardTableDocumentQuery,
+  NetworkType,
+} from '@tangle-network/tangle-shared-ui/graphql/graphql';
 import { executeGraphQL } from '@tangle-network/tangle-shared-ui/utils/executeGraphQL';
 import { useQuery } from '@tanstack/react-query';
 import { LEADERBOARD_QUERY_KEY } from '../../../constants/query';
@@ -104,12 +107,13 @@ const LeaderboardQueryDocument = graphql(/* GraphQL */ `
 `);
 
 const fetcher = async (
+  network: NetworkType,
   first: number,
   offset: number,
   blockNumberSevenDaysAgo: number,
   accountIdQuery?: string,
 ) => {
-  const result = await executeGraphQL(LeaderboardQueryDocument, {
+  const result = await executeGraphQL(network, LeaderboardQueryDocument, {
     first,
     offset,
     blockNumberSevenDaysAgo,
@@ -120,6 +124,7 @@ const fetcher = async (
 };
 
 export function useLeaderboard(
+  network: NetworkType,
   first: number,
   offset: number,
   blockNumberSevenDaysAgo: number,
@@ -128,13 +133,14 @@ export function useLeaderboard(
   return useQuery({
     queryKey: [
       LEADERBOARD_QUERY_KEY,
+      network,
       first,
       offset,
       blockNumberSevenDaysAgo,
       accountIdQuery,
     ],
     queryFn: () =>
-      fetcher(first, offset, blockNumberSevenDaysAgo, accountIdQuery),
+      fetcher(network, first, offset, blockNumberSevenDaysAgo, accountIdQuery),
     enabled: first > 0 && offset >= 0 && blockNumberSevenDaysAgo > 0,
     placeholderData: (prev) => prev,
   });

apps/tangle-dapp/src/features/points/data/useActiveAccountPoints.ts

@@ -4,6 +4,9 @@ import { executeGraphQL } from '@tangle-network/tangle-shared-ui/utils/executeGr
 import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { ReactQueryKey } from '../../../constants/reactQuery';
+import useNetworkStore from '@tangle-network/tangle-shared-ui/context/useNetworkStore';
+import { NetworkId } from '@tangle-network/ui-components/constants/networks';
+import { NetworkType } from '@tangle-network/tangle-shared-ui/graphql/graphql';
 
 const GetAccountPointsQueryDocument = graphql(/* GraphQL */ `
   query GetAccountPoints($account: String!) {
@@ -14,24 +17,29 @@ const GetAccountPointsQueryDocument = graphql(/* GraphQL */ `
   }
 `);
 
-const fetcher = async (activeAccount: string | null) => {
+const fetcher = async (network: NetworkType, activeAccount: string | null) => {
   if (activeAccount === null) {
     return null;
   }
 
-  const result = await executeGraphQL(GetAccountPointsQueryDocument, {
+  const result = await executeGraphQL(network, GetAccountPointsQueryDocument, {
     account: activeAccount,
   });
 
   return result.data;
 };
 
 export default function useActiveAccountPoints() {
+  const network = useNetworkStore((state) => state.network);
   const activeAccount = useSubstrateAddress(false);
 
   const { data: accountPointsResponse, ...rest } = useQuery({
     queryKey: [ReactQueryKey.GetAccountPoints, activeAccount],
-    queryFn: () => fetcher(activeAccount),
+    queryFn: () =>
+      fetcher(
+        network.id === NetworkId.TANGLE_MAINNET ? 'MAINNET' : 'TESTNET',
+        activeAccount,
+      ),
     retry: 10,
     refetchInterval: 6000,
   });

codegen.ts

@@ -1,7 +1,9 @@
-import { DEFAULT_GRAPHQL_ENDPOINT } from './libs/dapp-config/src/constants/graphql';
 import type { CodegenConfig } from '@graphql-codegen/cli';
 import 'dotenv/config';
 
+export const DEFAULT_GRAPHQL_ENDPOINT =
+  'https://mainnet-gql.tangle.tools/graphql';
+
 const VITE_GRAPHQL_ENDPOINT =
   process.env.VITE_GRAPHQL_ENDPOINT ?? DEFAULT_GRAPHQL_ENDPOINT;
 

libs/dapp-config/src/constants/graphql.ts

@@ -1,14 +1,13 @@
-import { DEFAULT_GRAPHQL_ENDPOINT } from '@tangle-network/dapp-config/constants/graphql';
-import type { TypedDocumentString } from '../graphql/graphql';
-
-const ENDPOINT =
-  import.meta.env.VITE_GRAPHQL_ENDPOINT ?? DEFAULT_GRAPHQL_ENDPOINT;
+import type { NetworkType, TypedDocumentString } from '../graphql/graphql';
 
 export async function executeGraphQL<TResult, TVariables>(
+  network: NetworkType,
   query: TypedDocumentString<TResult, TVariables>,
   ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
 ) {
-  const response = await fetch(ENDPOINT, {
+  const endpoint = getGraphQLEndpointFromNetwork(network);
+
+  const response = await fetch(endpoint, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -26,3 +25,14 @@ export async function executeGraphQL<TResult, TVariables>(
 
   return response.json() as Promise<{ data: TResult }>;
 }
+
+const getGraphQLEndpointFromNetwork = (network: NetworkType) => {
+  switch (network) {
+    case 'MAINNET':
+      return 'https://mainnet-gql.tangle.tools/graphql';
+    case 'TESTNET':
+      return 'https://testnet-gql.tangle.tools/graphql';
+    default:
+      throw new Error(`Invalid network: ${network}`);
+  }
+};