diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml index 0b41fd8..6c3d119 100644 --- 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 index b1e9f60..3e406d7 100644 --- 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 index 07749a0..c8af1ab 100644 --- 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 index 946e275..e621306 100644 --- 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 index 2443bf2..91743c5 100644 --- 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 index fe1a170..0ce7726 100644 --- 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 & { 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 index ba6f1c4..63b60e2 100644 --- 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('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 index 73cc504..ef12742 100644 --- 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} - {/**/} + {/*{narrowXs ? null : }*/} {narrowXs ? : null} diff --git a/src/network/useContracts.ts b/src/network/useContracts.ts index 51fa1dc..171c87d 100644 --- 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 index 6c38632..e4878df 100644 --- 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 index 1b51d5c..7e97820 100644 --- 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 index 0e35128..4915bbd 100644 --- 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 index 40e40fe..6d34da1 100644 --- 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 index 1ad3043..2272302 100644 --- 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 index 9e59260..6f80f78 100644 --- 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),