Merge pull request #24 from subsquid/feat/apps-split

feat: split apps
subsquid · May 31, 2024 · 6e9da8b · 6e9da8b
2 parents 27ce9ad + 2b21e1e
commit 6e9da8b
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 128 deletions.
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -11,7 +11,9 @@ env:
 jobs:
   build:
     runs-on: ubuntu-latest
-
+    strategy:
+      matrix:
+        network: [mainnet, tethys]
     steps:
 #      - name: cancel previous runs
 #        uses: styfle/[email protected]
@@ -64,16 +66,17 @@ jobs:
           APP_VERSION: ${{ steps.env.outputs.tag }}
           WALLET_CONNECT_PROJECT_ID: ${{ steps.env.outputs.wc_project_id }}
           ENABLE_DEMO_FEATURES: ${{ steps.env.outputs.enable_demo_features }}
-          NETWORK: ${{ steps.env.outputs.network }}
+          NETWORK: ${{ matrix.network }}
           TESTNET_SQUID_API_URL: ${{ steps.env.outputs.testnet_squid_api_url }}
           MAINNET_SQUID_API_URL: ${{ steps.env.outputs.mainnet_squid_api_url }}
 
 
       # Build and push images to Google Container Registry
       - name: Build image
-        run: docker build --progress=plain -t "gcr.io/${PROJECT_ID}/subsquid-network-app-${APP_ENV}:${TAG}" -t "gcr.io/${PROJECT_ID}/subsquid-network-app-${APP_ENV}:latest" .
+        run: docker build --progress=plain -t "gcr.io/${PROJECT_ID}/subsquid-network-app-${NETWORK}-${APP_ENV}:${TAG}" -t "gcr.io/${PROJECT_ID}/subsquid-network-app-${NETWORK}-${APP_ENV}:latest" .
         env:
           APP_ENV: ${{ steps.env.outputs.app_env }}
+          NETWORK: ${{ matrix.network }}
           TAG: ${{ steps.env.outputs.tag }}
 
       - id: auth
@@ -90,8 +93,9 @@ jobs:
 
       - name: Push image
         run: |
-          docker push "gcr.io/${PROJECT_ID}/subsquid-network-app-${APP_ENV}:${TAG}"
-          docker push "gcr.io/${PROJECT_ID}/subsquid-network-app-${APP_ENV}:latest"
+          docker push "gcr.io/${PROJECT_ID}/subsquid-network-app-${NETWORK}-${APP_ENV}:${TAG}"
+          docker push "gcr.io/${PROJECT_ID}/subsquid-network-app-${NETWORK}-${APP_ENV}:latest"
         env:
           APP_ENV: ${{ steps.env.outputs.app_env }}
+          NETWORK: ${{ matrix.network }}
           TAG: ${{ steps.env.outputs.tag }}
diff --git a/src/api/subsquid-network-squid/datasource.ts b/src/api/subsquid-network-squid/datasource.ts
@@ -1,7 +1,7 @@
-import { NetworkName, useSubsquidNetwork } from '@network/useSubsquidNetwork';
+import { NetworkName, getSubsquidNetwork } from '@network/useSubsquidNetwork';
 
 export function useSquidDataSource() {
-  const { network } = useSubsquidNetwork();
+  const { network } = getSubsquidNetwork();
 
   return {
     endpoint:

diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Box, styled, useMediaQuery, useTheme } from '@mui/material';
 import { upperFirst } from 'lodash-es';
 
-import { useSubsquidNetwork } from '@network/useSubsquidNetwork';
+import { getSubsquidNetwork } from '@network/useSubsquidNetwork';
 
 export const LogoWrapper = styled('div', {
   name: 'LogoWrapper',
@@ -43,7 +43,7 @@ export function Logo({ color = '#fff' }: { color?: string }) {
   const narrow = useMediaQuery(theme.breakpoints.down('lg'));
   const size = 32;
 
-  const { network } = useSubsquidNetwork();
+  const network = getSubsquidNetwork();
 
   return (
     <LogoWrapper>

diff --git a/src/components/NetworkSwitcher/NetworkSwitcher.tsx b/src/components/NetworkSwitcher/NetworkSwitcher.tsx
@@ -4,7 +4,7 @@ import { Button, styled, SxProps } from '@mui/material';
 import capitalize from 'lodash-es/capitalize';
 
 import { SwitchArrowsIcon } from '@icons/SwitchArrowsIcon';
-import { NetworkName, useSubsquidNetwork } from '@network/useSubsquidNetwork.ts';
+import { NetworkName, getSubsquidNetwork } from '@network/useSubsquidNetwork.ts';
 
 const inverseNetworkName = (name: string) =>
   name === NetworkName.Mainnet ? NetworkName.Testnet : NetworkName.Mainnet;
@@ -17,27 +17,27 @@ const SwitchButton = styled(Button)<{ fill?: string }>(({ theme, fill }) => ({
   margin: theme.spacing(0, 1),
 }));
 
-export function NetworkSwitcher({
-  sx,
-  color,
-  hideText = false,
-}: {
-  sx?: SxProps;
-  color?: string;
-  hideText?: boolean;
-}) {
-  const { network, switchAndReset } = useSubsquidNetwork();
+// export function NetworkSwitcher({
+//   sx,
+//   color,
+//   hideText = false,
+// }: {
+//   sx?: SxProps;
+//   color?: string;
+//   hideText?: boolean;
+// }) {
+//   const { network, switchAndReset } = getSubsquidNetwork();
 
-  return (
-    <>
-      <SwitchButton
-        fill={color}
-        onClick={async () => switchAndReset(inverseNetworkName(network))}
-        sx={sx}
-      >
-        <SwitchArrowsIcon fill={color} />
-        {hideText ? null : `Switch to ${capitalize(inverseNetworkName(network))}`}
-      </SwitchButton>
-    </>
-  );
-}
+//   return (
+//     <>
+//       <SwitchButton
+//         fill={color}
+//         onClick={async () => switchAndReset(inverseNetworkName(network))}
+//         sx={sx}
+//       >
+//         <SwitchArrowsIcon fill={color} />
+//         {hideText ? null : `Switch to ${capitalize(inverseNetworkName(network))}`}
+//       </SwitchButton>
+//     </>
+//   );
+// }
diff --git a/src/index.tsx b/src/index.tsx
@@ -20,8 +20,7 @@ declare global {
       DOCS_API_URL: string;
       DISABLE_DEMO_FEATURES: string;
 
-      /** NETWORK **/
-      DEFAULT_NETWORK: string;
+      NETWORK: string;
       SQUID_API_URL: string;
       WALLET_CONNECT_PROJECT_ID: string;
       BLOCK_CHAIN_NODE_ADDRESS: string;

diff --git a/src/layouts/NetworkLayout/NetworkLayout.tsx b/src/layouts/NetworkLayout/NetworkLayout.tsx
@@ -16,7 +16,7 @@ import classnames from 'classnames';
 import { Outlet } from 'react-router-dom';
 
 import { Logo } from '@components/Logo';
-import { NetworkSwitcher } from '@components/NetworkSwitcher';
+// import { NetworkSwitcher } from '@components/NetworkSwitcher';
 import { TopBanner, useBannerHeight } from '@components/TopBanner';
 import { MenuIcon } from '@icons/MenuIcon';
 
@@ -284,7 +284,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/config.ts b/src/network/config.ts
@@ -1,6 +1,9 @@
 import { getDefaultConfig } from '@rainbow-me/rainbowkit';
+import { upperFirst } from 'lodash-es';
 import { arbitrumSepolia, arbitrum } from 'wagmi/chains';
 
+import { getSubsquidNetwork, NetworkName } from './useSubsquidNetwork';
+
 // export let CHAIN: Chain = arbitrumSepolia;
 // if (process.env.NETWORK === 'hardhat') {
 //   CHAIN = {
@@ -13,27 +16,33 @@ import { arbitrumSepolia, arbitrum } from 'wagmi/chains';
 //   };
 // }
 
+const network = getSubsquidNetwork();
+
 export const wagmiConfig = getDefaultConfig({
-  appName: 'Subsquid Network',
+  appName: `Subsquid Network ${upperFirst(network)}`,
   projectId: process.env.WALLET_CONNECT_PROJECT_ID || '',
-  chains: [
-    {
-      ...arbitrumSepolia,
-      rpcUrls: {
-        default: {
-          http: ['https://arbitrum-sepolia.public.blastapi.io'],
-          webSocket: ['wss://arbitrum-sepolia.public.blastapi.io'],
-        },
-      },
-    },
-    {
-      ...arbitrum,
-      rpcUrls: {
-        default: {
-          http: ['https://arbitrum-one.public.blastapi.io'],
-          webSocket: ['wss://arbitrum-one.public.blastapi.io'],
-        },
-      },
-    },
-  ],
+  chains:
+    network === NetworkName.Mainnet
+      ? [
+          {
+            ...arbitrum,
+            rpcUrls: {
+              default: {
+                http: ['https://arbitrum-one.public.blastapi.io'],
+                webSocket: ['wss://arbitrum-one.public.blastapi.io'],
+              },
+            },
+          },
+        ]
+      : [
+          {
+            ...arbitrumSepolia,
+            rpcUrls: {
+              default: {
+                http: ['https://arbitrum-sepolia.public.blastapi.io'],
+                webSocket: ['wss://arbitrum-sepolia.public.blastapi.io'],
+              },
+            },
+          },
+        ],
 });
diff --git a/src/network/useContracts.ts b/src/network/useContracts.ts
@@ -1,4 +1,4 @@
-import { NetworkName, useSubsquidNetwork } from './useSubsquidNetwork.ts';
+import { NetworkName, getSubsquidNetwork } from './useSubsquidNetwork.ts';
 
 export function useContracts(): {
   SQD: `0x${string}`;
@@ -9,7 +9,7 @@ export function useContracts(): {
   GATEWAY_REGISTRATION: `0x${string}`;
   SQD_TOKEN: string;
 } {
-  const { network } = useSubsquidNetwork();
+  const network = getSubsquidNetwork();
 
   switch (network) {
     case NetworkName.Testnet: {

diff --git a/src/network/useSubsquidNetwork.ts b/src/network/useSubsquidNetwork.ts
@@ -1,75 +1,18 @@
-import { useCallback, useEffect } from 'react';
-
-import { useQueryClient } from '@tanstack/react-query';
-import useLocalStorageState from 'use-local-storage-state';
-import { useWalletClient, useAccount, useDisconnect, useSwitchChain } from 'wagmi';
 import { arbitrum, arbitrumSepolia } from 'wagmi/chains';
 
-import { localStorageStringSerializer } from '@hooks/useLocalStorageState.ts';
-
 export enum NetworkName {
   Testnet = 'testnet',
   Mainnet = 'mainnet',
 }
 
-const defaultApp = (process.env.DEFAULT_NETWORK as NetworkName) || NetworkName.Mainnet;
-
-function validate(app: NetworkName): NetworkName {
-  return Object.values(NetworkName).includes(app) ? (app as NetworkName) : defaultApp;
+function validate(app?: string): NetworkName {
+  return app && Object.values(NetworkName).includes(app as NetworkName)
+    ? (app as NetworkName)
+    : NetworkName.Mainnet;
 }
 
-export function useSubsquidNetwork() {
-  const queryClient = useQueryClient();
-  const walletClient = useWalletClient();
-  const { switchChainAsync } = useSwitchChain();
-  const { isConnected, chain } = useAccount();
-  const { disconnect } = useDisconnect();
-  const [app, setApp] = useLocalStorageState<NetworkName>('network', {
-    serializer: localStorageStringSerializer,
-    defaultValue: defaultApp,
-    storageSync: false,
-  });
-
-  const changeApp = useCallback(
-    (network: NetworkName) => {
-      setApp(network);
-      queryClient.clear();
-    },
-    [queryClient, setApp],
-  );
-
-  const switchAndReset = async (network: NetworkName) => {
-    if (isConnected) {
-      try {
-        await switchChainAsync?.({ chainId: getChainId(network) });
-      } catch (e: unknown) {
-        if (e instanceof Error) {
-          if (e.message.toLowerCase().includes('user rejected the request')) return;
-          if (e.message.toLowerCase().includes('already pending for origin')) return;
-        }
-
-        throw e;
-      }
-    }
-
-    changeApp(network);
-    // eslint-disable-next-line no-console
-    console.log('switched to ' + network);
-  };
-
-  useEffect(() => {
-    if (!isConnected || walletClient.isLoading) return;
-    if (chain?.id === getChainId(app)) return;
-
-    if (chain) {
-      changeApp(getNetworkName(chain.id));
-      return;
-    }
-
-    disconnect();
-  }, [isConnected, chain, app, disconnect, walletClient, changeApp]);
-
-  return { network: validate(app), switchAndReset };
+export function getSubsquidNetwork() {
+  return validate(process.env.NETWORK);
 }
 
 export function getChainId(network: NetworkName) {

diff --git a/src/network/useWorkersChat.ts b/src/network/useWorkersChat.ts
@@ -1,7 +1,7 @@
-import { NetworkName, useSubsquidNetwork } from './useSubsquidNetwork';
+import { NetworkName, getSubsquidNetwork } from './useSubsquidNetwork';
 
 export function useWorkersChatUrl(): string | undefined {
-  const { network } = useSubsquidNetwork();
+  const network = getSubsquidNetwork();
 
   switch (network) {
     case NetworkName.Testnet: {

diff --git a/src/pages/AssetsPage/Assets.tsx b/src/pages/AssetsPage/Assets.tsx
@@ -13,7 +13,7 @@ import { HelpTooltip } from '@components/HelpTooltip';
 import { Loader } from '@components/Loader';
 import { NetworkPageTitle } from '@layouts/NetworkLayout';
 import { useContracts } from '@network/useContracts';
-import { useSubsquidNetwork } from '@network/useSubsquidNetwork';
+import { getSubsquidNetwork } from '@network/useSubsquidNetwork';
 
 import { ClaimButton } from './ClaimButton';
 
@@ -101,7 +101,7 @@ export function MyAssets() {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
   const { isLoading, assets } = useMyAssets();
-  const { network } = useSubsquidNetwork();
+  const { network } = getSubsquidNetwork();
 
   const data = useMemo(
     () => [

diff --git a/vite.config.ts b/vite.config.ts
@@ -34,7 +34,7 @@ export default defineConfig({
     'process.env.MULTICALL_3_CONTRACT_ADDRESS': encode(
       process.env.MULTICALL_3_CONTRACT_ADDRESS || '',
     ),
-    'process.env.DEFAULT_NETWORK': encode(process.env.DEFAULT_NETWORK || 'mainnet'),
+    'process.env.NETWORK': encode(process.env.NETWORK || 'mainnet'),
     'process.env.SENTRY_DSN': encode(process.env.SENTRY_DSN || ''),
   },
   plugins: [tsconfigPaths(), react(), splitVendorChunkPlugin()],