Merge pull request #5 from subsquid/develop

release

.env.example

@@ -1,2 +1,3 @@
 WALLET_CONNECT_PROJECT_ID=b7b3d81af86feb2af54461f26b665ee4
-SQUID_API_URL=https://squid.subsquid.io/subsquid-network-indexer/v/v7/graphql
+TESTNET_SQUID_API_URL=https://subsquid.squids.live/subsquid-network-testnet/v/v1/graphql
+MAINNET_SQUID_API_URL=https://subsquid.squids.live/subsquid-network-mainnet/v/v1/graphql

src/api/subsquid-network-squid/api.graphql

@@ -57,6 +57,7 @@ fragment WorkerFragment on Worker {
   jailed
   dialOk
   locked
+  version
   owner {
     id
   }

src/api/subsquid-network-squid/datasource.ts

@@ -1,7 +1,7 @@
 import { NetworkName, useSubsquidNetwork } from '@network/useSubsquidNetwork';
 
 export function useSquidDataSource() {
-  const [network] = useSubsquidNetwork();
+  const { network } = useSubsquidNetwork();
 
   return {
     endpoint:

src/components/NetworkSwitcher/NetworkSwitcher.tsx

@@ -2,15 +2,20 @@ import React from 'react';
 
 import { Button, styled, SxProps } from '@mui/material';
 import capitalize from 'lodash-es/capitalize';
+import { useSwitchNetwork } from 'wagmi';
 
 import { SwitchArrowsIcon } from '@icons/SwitchArrowsIcon';
-import { NetworkName, useSubsquidNetwork } from '@network/useSubsquidNetwork.ts';
+import { getChainId, NetworkName, useSubsquidNetwork } from '@network/useSubsquidNetwork.ts';
+
+const inverseNetworkName = (name: string) =>
+  name === NetworkName.Mainnet ? NetworkName.Testnet : NetworkName.Mainnet;
 
 const SwitchButton = styled(Button)<{ fill?: string }>(({ theme, fill }) => ({
   width: 'fit-content',
   fontSize: '0.875rem',
   color: fill || theme.palette?.primary?.contrastText,
-  gap: '0.625rem',
+  gap: theme.spacing(1),
+  margin: theme.spacing(0, 1),
 }));
 
 export function NetworkSwitcher({
@@ -22,18 +27,30 @@ export function NetworkSwitcher({
   color?: string;
   hideText?: boolean;
 }) {
-  const [network, changNetwork] = useSubsquidNetwork();
+  const { network, switchAndReset: changeAndReset } = useSubsquidNetwork();
+  const { switchNetworkAsync } = useSwitchNetwork();
+
+  const handleAppSwitchAsync = async (network: NetworkName) => {
+    try {
+      await switchNetworkAsync?.(getChainId(network));
+    } catch (e: any) {
+      if (e.message?.toLowerCase().includes('user rejected the request')) {
+        return;
+      }
 
-  const inverseNetworkName = (name: string) =>
-    name === NetworkName.Mainnet ? NetworkName.Testnet : NetworkName.Mainnet;
+      throw e;
+    }
 
-  const handleAppSwitch = () => {
-    changNetwork(inverseNetworkName(network));
+    changeAndReset(network);
   };
 
   return (
     <>
-      <SwitchButton fill={color} onClick={handleAppSwitch} sx={sx}>
+      <SwitchButton
+        fill={color}
+        onClick={async () => handleAppSwitchAsync(inverseNetworkName(network))}
+        sx={sx}
+      >
         <SwitchArrowsIcon fill={color} />
         {hideText ? null : `Switch to ${capitalize(inverseNetworkName(network))}`}
       </SwitchButton>

src/layouts/NetworkLayout/NetworkLayout.tsx

@@ -1,4 +1,6 @@
-import React, { PropsWithChildren, useState } from 'react';
+import '@rainbow-me/rainbowkit/styles.css';
+
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 
 import {
   AppBar as AppBarMaterial,
@@ -12,21 +14,21 @@ import {
 import { alpha } from '@mui/system/colorManipulator';
 import classnames from 'classnames';
 import { Outlet } from 'react-router-dom';
+import { useDisconnect, useNetwork, useWalletClient } from 'wagmi';
 
 import { Logo } from '@components/Logo';
 import { NetworkSwitcher } from '@components/NetworkSwitcher';
 import { TopBanner, useBannerHeight } from '@components/TopBanner';
 import { demoFeaturesEnabled } from '@hooks/demoFeaturesEnabled';
 import { MenuIcon } from '@icons/MenuIcon';
-import { UserMenu } from '@layouts/NetworkLayout/UserMenu.tsx';
-import { useSwitchNetwork } from '@network/useSwitchNetwork';
-
-import '@rainbow-me/rainbowkit/styles.css';
+import { useAccount } from '@network/useAccount';
+import { getChainId, getNetworkName, useSubsquidNetwork } from '@network/useSubsquidNetwork';
 
 import { ColorVariant } from '../../theme';
 
 import { NetworkMenu } from './NetworkMenu';
 import { SyncSquidSnackbar } from './SyncSquidSnackbar';
+import { UserMenu } from './UserMenu';
 
 const APP_BAR_HEIGHT = 52;
 const SIDEBAR_WIDTH = {
@@ -258,7 +260,24 @@ export const NetworkLayout = ({
 }: PropsWithChildren<{
   stretchContent?: boolean;
 }>) => {
-  useSwitchNetwork();
+  const { isConnected } = useAccount();
+  const { isLoading } = useWalletClient();
+  const { chain } = useNetwork();
+  const { disconnect } = useDisconnect();
+  const { network, switchAndReset } = useSubsquidNetwork();
+
+  useEffect(() => {
+    if (!isConnected || isLoading) return;
+
+    if (chain?.id === getChainId(network)) return;
+
+    if (!chain?.unsupported && demoFeaturesEnabled()) {
+      switchAndReset(getNetworkName(chain?.id));
+      return;
+    }
+
+    disconnect();
+  }, [chain, disconnect, isConnected, network, isLoading, switchAndReset]);
 
   const theme = useTheme();
   const narrowLg = useMediaQuery(theme.breakpoints.down('lg'));

src/layouts/NetworkLayout/NetworkPageTitle.tsx

@@ -8,7 +8,7 @@ import { BackButton } from '@components/BackButton';
 const PageTitleWrapper = styled('div', {
   name: 'PageTitleWrapper',
 })(({ theme }) => ({
-  marginBottom: theme.spacing(5),
+  marginBottom: theme.spacing(2.5),
   minHeight: theme.spacing(5),
 
   '& .title': {

src/network/config.ts

@@ -1,41 +1,39 @@
 import { connectorsForWallets } from '@rainbow-me/rainbowkit';
 import { metaMaskWallet, walletConnectWallet } from '@rainbow-me/rainbowkit/wallets';
 import { configureChains, createConfig } from 'wagmi';
-import { Chain } from 'wagmi';
-import { arbitrumSepolia, hardhat } from 'wagmi/chains';
+import { arbitrumSepolia, arbitrum } from 'wagmi/chains';
 import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
 import { publicProvider } from 'wagmi/providers/public';
 
-export let CHAIN: Chain = arbitrumSepolia;
-if (process.env.NETWORK === 'hardhat') {
-  CHAIN = {
-    ...hardhat,
-    contracts: {
-      multicall3: {
-        address: process.env.MULTICALL_3_CONTRACT_ADDRESS,
-      } as any,
-    },
-  };
-}
+import { demoFeaturesEnabled } from '@hooks/demoFeaturesEnabled';
+
+// export let CHAIN: Chain = arbitrumSepolia;
+// if (process.env.NETWORK === 'hardhat') {
+//   CHAIN = {
+//     ...hardhat,
+//     contracts: {
+//       multicall3: {
+//         address: process.env.MULTICALL_3_CONTRACT_ADDRESS,
+//       } as any,
+//     },
+//   };
+// }
 
 const privateNode = process.env.BLOCK_CHAIN_NODE_ADDRESS;
 
 const {
   chains: configuredChains,
   publicClient,
   webSocketPublicClient,
-} = configureChains(
-  [CHAIN],
-  [
-    privateNode
-      ? jsonRpcProvider({
-          rpc: () => ({
-            http: privateNode,
-          }),
-        })
-      : publicProvider(),
-  ],
-);
+} = configureChains(demoFeaturesEnabled() ? [arbitrumSepolia, arbitrum] : [arbitrumSepolia], [
+  privateNode
+    ? jsonRpcProvider({
+        rpc: () => ({
+          http: privateNode,
+        }),
+      })
+    : publicProvider(),
+]);
 
 const connectors = connectorsForWallets([
   {

src/network/useContracts.ts

@@ -9,7 +9,7 @@ export function useContracts(): {
   GATEWAY_REGISTRATION: `0x${string}`;
   SQD_TOKEN: string;
 } {
-  const [network] = useSubsquidNetwork();
+  const { network } = useSubsquidNetwork();
 
   switch (network) {
     case NetworkName.Testnet: {

src/network/useSubsquidNetwork.ts

@@ -1,7 +1,6 @@
-import { useEffect } from 'react';
-
 import { useQueryClient } from '@tanstack/react-query';
 import useLocalStorageState from 'use-local-storage-state';
+import { arbitrum, arbitrumSepolia } from 'wagmi/chains';
 
 import { localStorageStringSerializer } from '@hooks/useLocalStorageState.ts';
 
@@ -16,18 +15,26 @@ function validate(app: NetworkName): NetworkName {
   return Object.values(NetworkName).includes(app) ? (app as NetworkName) : defaultApp;
 }
 
-export function useSubsquidNetwork(): [NetworkName, (app: NetworkName) => void] {
+export function useSubsquidNetwork() {
   const [app, changeApp] = useLocalStorageState<NetworkName>('network', {
     serializer: localStorageStringSerializer,
     defaultValue: defaultApp,
   });
 
   const queryClient = useQueryClient();
 
-  const changeAndReset = (network: NetworkName) => {
+  const switchAndReset = (network: NetworkName) => {
     changeApp(network);
     queryClient.clear();
   };
 
-  return [validate(app), changeAndReset];
+  return { network: validate(app), switchAndReset };
+}
+
+export function getChainId(network: NetworkName) {
+  return network === NetworkName.Mainnet ? arbitrum.id : arbitrumSepolia.id;
+}
+
+export function getNetworkName(chainId?: number) {
+  return chainId === arbitrum.id ? NetworkName.Mainnet : NetworkName.Testnet;
 }

src/pages/WorkersPage/UptimeGraph.tsx

@@ -16,7 +16,7 @@ const StyledTitle = styled(Box)(({ theme: { spacing } }) => ({
 
 const StyledGraph = styled(Box)(({ theme: { spacing } }) => ({
   display: 'flex',
-  justifyContent: 'space-between',
+  justifyContent: 'space-around',
   marginBottom: spacing(1),
 }));
 
@@ -66,7 +66,7 @@ export const UptimeGraph = ({ worker }: { worker: BlockchainApiFullWorker }) =>
 
   return (
     <Box sx={{ mt: 4 }}>
-      <StyledTitle>{displayedDays} days uptime</StyledTitle>
+      <StyledTitle>Uptime graph</StyledTitle>
       <StyledGraph>
         {data.map(d => (
           <StatusBar key={d.date} dayUptime={d} />