feat: enable network switch (#3)

subsquid · May 8, 2024 · 5e82fdf · 5e82fdf
1 parent aeb0e6e
commit 5e82fdf
Show file tree

Hide file tree

Showing 15 changed files with 78 additions and 40 deletions.
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -43,11 +43,13 @@ jobs:
           if [ "$REF" = "refs/heads/main" ]; then
               echo "::set-output name=app_env::prod"
               echo "::set-output name=wc_project_id::475eff0658d0f3300ca18971418d261b"
-              echo "::set-output name=squid_api_url::https://subsquid.squids.live/subsquid-network-testnet/v/v1/graphql"
+              echo "::set-output name=testnet_squid_api_url::https://subsquid.squids.live/subsquid-network-testnet/v/v1/graphql"
+              echo "::set-output name=mainnet_squid_api_url::https://subsquid.squids.live/subsquid-network-mainnet/v/v1/graphql"
           else
               echo "::set-output name=app_env::dev"
               echo "::set-output name=wc_project_id::ec2facac9eaaca7cc0584baadc935c01"
-              echo "::set-output name=squid_api_url::https://subsquid.squids.live/subsquid-network-testnet/v/v1/graphql"
+              echo "::set-output name=testnet_squid_api_url::https://subsquid.squids.live/subsquid-network-testnet/v/v1/graphql"
+              echo "::set-output name=mainnet_squid_api_url::https://subsquid.squids.live/subsquid-network-mainnet/v/v1/graphql"
           fi
         env:
           REF: ${{ github.ref }}

diff --git a/src/api/subsquid-network-squid/accounts-graphql.ts b/src/api/subsquid-network-squid/accounts-graphql.ts
@@ -5,7 +5,7 @@ import Decimal from 'decimal.js';
 import { formatSqd } from '@api/contracts/utils';
 import { useAccount } from '@network/useAccount';
 
-import { SQUID_DATASOURCE } from './datasource';
+import { useSquidDataSource } from './datasource';
 import { AccountType, useAccountQuery, useMyAssetsQuery } from './graphql';
 
 export type SourceWallet = {
@@ -16,10 +16,11 @@ export type SourceWallet = {
 };
 
 export function useMySources({ enabled }: { enabled?: boolean } = {}) {
+  const datasource = useSquidDataSource();
   const { address } = useAccount();
   const requestEnabled = enabled && !!address;
   const { data: data, isPending } = useAccountQuery(
-    SQUID_DATASOURCE,
+    datasource,
     {
       address: address || '',
     },
@@ -60,11 +61,12 @@ export function useMySources({ enabled }: { enabled?: boolean } = {}) {
 }
 
 export function useMyAssets() {
+  const datasource = useSquidDataSource();
   const { address } = useAccount();
 
   const enabled = !!address;
   const { data, isLoading } = useMyAssetsQuery(
-    SQUID_DATASOURCE,
+    datasource,
     {
       address: address || '',
     },

diff --git a/src/api/subsquid-network-squid/datasource.ts b/src/api/subsquid-network-squid/datasource.ts
@@ -1,8 +1,17 @@
-export const SQUID_DATASOURCE: { endpoint: string; fetchParams?: RequestInit } = {
-  endpoint: process.env.SQUID_API_URL || `/graphql`,
-  fetchParams: {
-    headers: {
-      'Content-type': 'application/json',
+import { NetworkName, useSubsquidNetwork } from '@network/useSubsquidNetwork';
+
+export function useSquidDataSource() {
+  const [network] = useSubsquidNetwork();
+
+  return {
+    endpoint:
+      network === NetworkName.Testnet
+        ? process.env.TESTNET_SQUID_API_URL || '/graphql'
+        : process.env.MAINNET_SQUID_API_URL || '/graphql',
+    fetchParams: {
+      headers: {
+        'Content-type': 'application/json',
+      },
     },
-  },
-};
+  };
+}
diff --git a/src/api/subsquid-network-squid/gateways-graphql.ts b/src/api/subsquid-network-squid/gateways-graphql.ts
@@ -1,4 +1,4 @@
-import { SQUID_DATASOURCE } from '@api/subsquid-network-squid/datasource';
+import { useSquidDataSource } from '@api/subsquid-network-squid/datasource';
 import { useAccount } from '@network/useAccount';
 
 import { GatewayFragmentFragment, useGatewayByPeerIdQuery, useMyGatewaysQuery } from './graphql';
@@ -25,11 +25,12 @@ export class BlockchainGateway {
 }
 
 export function useMyGateways() {
+  const datasource = useSquidDataSource();
   const { address } = useAccount();
 
   const enabled = !!address;
   const { data, isLoading } = useMyGatewaysQuery(
-    SQUID_DATASOURCE,
+    datasource,
     {
       address: address || '',
     },
@@ -54,11 +55,12 @@ export function useMyGateways() {
 }
 
 export function useGatewayByPeerId(peerId?: string) {
+  const datasource = useSquidDataSource();
   const { address } = useAccount();
   const enabled = !!peerId;
 
   const { data, isLoading } = useGatewayByPeerIdQuery(
-    SQUID_DATASOURCE,
+    datasource,
     {
       peerId: peerId || '',
     },

diff --git a/src/api/subsquid-network-squid/settings-graphql.ts b/src/api/subsquid-network-squid/settings-graphql.ts
@@ -2,11 +2,12 @@ import Decimal from 'decimal.js';
 
 import { fromSqd } from '@api/contracts/utils';
 
-import { SQUID_DATASOURCE } from './datasource';
+import { useSquidDataSource } from './datasource';
 import { useSettingsQuery } from './graphql';
 
 export function useNetworkSettings() {
-  const { data, isPending } = useSettingsQuery(SQUID_DATASOURCE);
+  const datasource = useSquidDataSource();
+  const { data, isPending } = useSettingsQuery(datasource);
 
   const settings = data?.settingsConnection.edges?.[0]?.node;
   const bondAmount = settings?.bondAmount ? fromSqd(settings?.bondAmount) : new Decimal(100_000);

diff --git a/src/api/subsquid-network-squid/workers-graphql.ts b/src/api/subsquid-network-squid/workers-graphql.ts
@@ -6,7 +6,7 @@ import { groupBy, mapValues, values } from 'lodash-es';
 import { formatSqd, fromSqd, humanReadableSqd } from '@api/contracts/utils';
 import { useAccount } from '@network/useAccount.ts';
 
-import { SQUID_DATASOURCE } from './datasource';
+import { useSquidDataSource } from './datasource';
 import {
   AccountType,
   ClaimType,
@@ -111,10 +111,11 @@ export function useWorkers({
   sortBy: WorkerSortBy;
   sortDir: SortDir;
 }) {
+  const datasource = useSquidDataSource();
   const { address } = useAccount();
   const { isPending: isSettingsLoading, delegationLimit } = useNetworkSettings();
 
-  const { data, isPending } = useAllWorkersQuery(SQUID_DATASOURCE, {});
+  const { data, isPending } = useAllWorkersQuery(datasource, {});
 
   const filteredData = useMemo(() => {
     const filtered = (data?.workers || [])
@@ -172,12 +173,13 @@ export function useWorkers({
 }
 
 export function useMyWorkers() {
+  const datasource = useSquidDataSource();
   const { address } = useAccount();
   const { isPending: isSettingsLoading, delegationLimit } = useNetworkSettings();
 
   const enabled = !!address;
   const { data, isLoading } = useMyWorkersQuery(
-    SQUID_DATASOURCE,
+    datasource,
     {
       address: address || '',
     },
@@ -203,12 +205,13 @@ export function useMyWorkers() {
 }
 
 export function useWorkerByPeerId(peerId?: string) {
+  const datasource = useSquidDataSource();
   const enabled = !!peerId;
   const { address } = useAccount();
   const { isPending: isSettingsLoading, delegationLimit } = useNetworkSettings();
 
   const { data, isPending } = useWorkerByPeerIdQuery(
-    SQUID_DATASOURCE,
+    datasource,
     {
       peerId: peerId || '',
       address: address || '',
@@ -234,9 +237,10 @@ export function useWorkerByPeerId(peerId?: string) {
 // TODO: remove hardcoded date
 export function useWorkerDaysUptimeById(workerId?: string) {
   const enabled = !!workerId;
+  const datasource = useSquidDataSource();
 
   const { data, isLoading } = useWorkerDaysUptimeByIdQuery(
-    SQUID_DATASOURCE,
+    datasource,
     {
       id: workerId || '',
       from: '2024-01-23T12:00:00.000000Z',
@@ -259,8 +263,9 @@ export function useWorkerDaysUptimeById(workerId?: string) {
 
 export function useMyClaimsAvailable({ source }: { source?: string } = {}) {
   const { address } = useAccount();
+  const datasource = useSquidDataSource();
 
-  const { data, isLoading } = useMyClaimsAvailableQuery(SQUID_DATASOURCE, {
+  const { data, isLoading } = useMyClaimsAvailableQuery(datasource, {
     address: address || '',
   });
 
@@ -334,8 +339,9 @@ type Delegation = ArrayElement<MyDelegationsQuery['delegations']> & {
 export function useMyDelegations() {
   const { address } = useAccount();
   const { isPending: isSettingsLoading, delegationLimit } = useNetworkSettings();
+  const datasource = useSquidDataSource();
 
-  const { data, isLoading } = useMyDelegationsQuery(SQUID_DATASOURCE, {
+  const { data, isLoading } = useMyDelegationsQuery(datasource, {
     address: address || '',
   });
 

diff --git a/src/hooks/useSquidNetworkHeightHooks.ts b/src/hooks/useSquidNetworkHeightHooks.ts
@@ -4,19 +4,20 @@ import { logger } from '@logger';
 import { useQueryClient } from '@tanstack/react-query';
 import { max, partition } from 'lodash-es';
 
-import { SQUID_DATASOURCE, useSquidNetworkHeightQuery } from '@api/subsquid-network-squid';
+import { useSquidDataSource, useSquidNetworkHeightQuery } from '@api/subsquid-network-squid';
 import { localStorageStringSerializer, useLocalStorageState } from '@hooks/useLocalStorageState';
 
 type HeightHook = { height: number; invalidateQueries: unknown[] };
 
 export function useSquidNetworkHeightHooks() {
   const queryClient = useQueryClient();
+  const dataSource = useSquidDataSource();
   const [heightHooksRaw, setHeightHooksRaw] = useLocalStorageState<string>('squid_height_hooks', {
     defaultValue: '[]',
     serializer: localStorageStringSerializer,
   });
   const { data, isLoading } = useSquidNetworkHeightQuery(
-    SQUID_DATASOURCE,
+    dataSource,
     {},
     {
       refetchInterval: 2000,

diff --git a/src/layouts/NetworkLayout/NetworkLayout.tsx b/src/layouts/NetworkLayout/NetworkLayout.tsx
@@ -14,6 +14,7 @@ import classnames from 'classnames';
 import { Outlet } from 'react-router-dom';
 
 import { Logo } from '@components/Logo';
+import { NetworkSwitcher } from '@components/NetworkSwitcher';
 import { TopBanner, useBannerHeight } from '@components/TopBanner';
 import { MenuIcon } from '@icons/MenuIcon';
 import { UserMenu } from '@layouts/NetworkLayout/UserMenu.tsx';
@@ -261,7 +262,7 @@ export const NetworkLayout = ({
   const theme = useTheme();
   const narrowLg = useMediaQuery(theme.breakpoints.down('lg'));
   const narrowXs = useMediaQuery(theme.breakpoints.down('xs'));
-  // const isMobile = useMediaQuery(theme.breakpoints.down('xxs'));
+  const isMobile = useMediaQuery(theme.breakpoints.down('xxs'));
 
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
@@ -289,7 +290,7 @@ export const NetworkLayout = ({
             ) : null}
           </AppToolbarSidebar>
           <AppToolbarContent />
-          {/*<NetworkSwitcher hideText={isMobile} />*/}
+          <NetworkSwitcher hideText={isMobile} />
           {/*{narrowXs ? null : <AppToolbarDivider />}*/}
           {narrowXs ? <AppToolbarContent /> : null}
           <UserMenu />

diff --git a/src/network/useContracts.ts b/src/network/useContracts.ts
@@ -25,12 +25,12 @@ export function useContracts(): {
     }
     case NetworkName.Mainnet: {
       return {
-        SQD: `0x1337420ded5adb9980cfc35f8f2b054ea86f8ab1`,
-        WORKER_REGISTRATION: `0xxxxxxxxxxxx`,
-        STAKING: `0xxxxxxxxxxxx`,
-        REWARD_TREASURY: `0xxxxxxxxxxxx`,
-        REWARD_DISTRIBUTION: `0xxxxxxxxxxxx`,
-        GATEWAY_REGISTRATION: `0xxxxxxxxxxxx`,
+        SQD: `0x1337420dED5ADb9980CFc35f8f2B054ea86f8aB1`,
+        WORKER_REGISTRATION: `0x36e2b147db67e76ab67a4d07c293670ebefcae4e`,
+        STAKING: `0xb31a0d39d2c69ed4b28d96e12cbf52c5f9ac9a51`,
+        REWARD_TREASURY: `0x237abf43bc51fd5c50d0d598a1a4c26e56a8a2a0`,
+        REWARD_DISTRIBUTION: `0xab690da5815659fe94f08f73e870d91a4d376d8f`,
+        GATEWAY_REGISTRATION: `0x8a90a1ce5fa8cf71de9e6f76b7d3c0b72feb8c4b`,
         SQD_TOKEN: 'SQD',
       };
     }

diff --git a/src/network/useSubsquidNetwork.ts b/src/network/useSubsquidNetwork.ts
@@ -1,3 +1,6 @@
+import { useEffect } from 'react';
+
+import { useQueryClient } from '@tanstack/react-query';
 import useLocalStorageState from 'use-local-storage-state';
 
 import { localStorageStringSerializer } from '@hooks/useLocalStorageState.ts';
@@ -19,5 +22,12 @@ export function useSubsquidNetwork(): [NetworkName, (app: NetworkName) => void]
     defaultValue: defaultApp,
   });
 
-  return [validate(app), changeApp];
+  const queryClient = useQueryClient();
+
+  const changeAndReset = (network: NetworkName) => {
+    changeApp(network);
+    queryClient.clear();
+  };
+
+  return [validate(app), changeAndReset];
 }
diff --git a/src/network/useSwitchNetwork.ts b/src/network/useSwitchNetwork.ts
@@ -44,7 +44,7 @@ export function useSwitchNetwork() {
         severity: 'warning',
       });
     }
-  }, [connector, enqueueSnackbar]);
+  }, [connector, enqueueSnackbar, contracts.SQD]);
 
   useEffect(() => {
     if (!isConnected) return;

diff --git a/src/pages/DashboardPage/Assets.tsx b/src/pages/DashboardPage/Assets.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 
 import { addressFormatter } from '@lib/formatters/formatters';
-import { Box, Chip, Stack, Tooltip } from '@mui/material';
+import { Box, Chip, Stack } from '@mui/material';
 import { Cell, Pie, PieChart } from 'recharts';
 
 import { formatSqd, fromSqd } from '@api/contracts/utils';

diff --git a/src/pages/DashboardPage/Workers.tsx b/src/pages/DashboardPage/Workers.tsx
@@ -8,7 +8,6 @@ import { Box } from '@mui/system';
 import { useNavigate } from 'react-router-dom';
 
 import { SortDir, useWorkers, WorkerSortBy } from '@api/subsquid-network-squid';
-import { HelpTooltip } from '@components/HelpTooltip';
 import { Loader } from '@components/Loader';
 import { Search } from '@components/Search/Search';
 import { BorderedTable, SortableHeaderCell } from '@components/Table/BorderedTable';

diff --git a/src/pages/WorkersPage/AddNewWorker.tsx b/src/pages/WorkersPage/AddNewWorker.tsx
@@ -4,7 +4,7 @@ import { LoadingButton } from '@mui/lab';
 import { Box } from '@mui/material';
 import Decimal from 'decimal.js';
 import { useFormik } from 'formik';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { fromSqd } from '@api/contracts/utils.ts';
 import { useRegisterWorker } from '@api/contracts/worker-registration/useRegisterWorker';

diff --git a/vite.config.ts b/vite.config.ts
@@ -16,7 +16,12 @@ export default defineConfig({
     ),
     'process.env.DOCS_API_URL': encode(process.env.DOCS_API_URL || 'https://docs.subsquid.io'),
 
-    'process.env.SQUID_API_URL': encode(process.env.SQUID_API_URL || 'http://localhost:4350'),
+    'process.env.TESTNET_SQUID_API_URL': encode(
+      process.env.TESTNET_SQUID_API_URL || 'http://localhost:4350',
+    ),
+    'process.env.MAINNET_SQUID_API_URL': encode(
+      process.env.MAINNET_SQUID_API_URL || 'http://localhost:4350',
+    ),
     'process.env.WALLET_CONNECT_PROJECT_ID': encode(process.env.WALLET_CONNECT_PROJECT_ID || ''),
     'process.env.ENABLE_DEMO_FEATURES': encode(process.env.ENABLE_DEMO_FEATURES || 'false'),
     'process.env.BLOCK_CHAIN_NODE_ADDRESS': encode(process.env.BLOCK_CHAIN_NODE_ADDRESS),