Develop to Goerli

package.json

@@ -129,10 +129,6 @@
     "postcss": "^8.4.31",
     "crypto-js": "^4.2.0"
   },
-  "resolutions": {
-    "postcss": "^8.4.31",
-    "crypto-js": "^4.2.0"
-  },
   "lint-staged": {
     "./**/*.{ts,tsx}": [
       "eslint --ignore-path .gitignore --max-warnings=0"

pages/_app.tsx

@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import NextApp, { AppProps, AppContext } from 'next/app';
+import { AppProps } from 'next/app';
 import 'nprogress/nprogress.css';
 
 import {
@@ -13,9 +13,7 @@ import { dynamics } from 'config';
 import { Providers } from 'providers';
 import { BackgroundGradient } from 'shared/components/background-gradient/background-gradient';
 import { nprogress, COOKIES_ALLOWED_FULL_KEY } from 'utils';
-import { parseEnvConfig } from 'utils/parse-env-config';
 import { withCsp } from 'utilsApi/withCSP';
-import { AppWrapperProps } from 'types';
 
 // Migrations old theme cookies to new cross domain cookies
 migrationThemeCookiesToCrossDomainCookiesClientSide();
@@ -34,11 +32,11 @@ const App = (props: AppProps) => {
 
 const MemoApp = memo(App);
 
-const AppWrapper = (props: AppWrapperProps): JSX.Element => {
-  const { envConfig, ...rest } = props;
+const AppWrapper = (props: AppProps): JSX.Element => {
+  const { ...rest } = props;
 
   return (
-    <Providers envConfig={envConfig}>
+    <Providers>
       <BackgroundGradient
         width={1560}
         height={784}
@@ -53,14 +51,6 @@ const AppWrapper = (props: AppWrapperProps): JSX.Element => {
   );
 };
 
-AppWrapper.getInitialProps = async (appContext: AppContext) => {
-  const appProps = await NextApp.getInitialProps(appContext);
-  return {
-    ...appProps,
-    envConfig: parseEnvConfig(dynamics),
-  };
-};
-
 export default dynamics.ipfsMode || process.env.NODE_ENV === 'development'
   ? AppWrapper
   : withCsp(AppWrapper);

providers/client-config.tsx

@@ -1,5 +1,5 @@
 import {
-  ReactNode,
+  PropsWithChildren,
   useMemo,
   useState,
   useContext,
@@ -10,9 +10,11 @@ import invariant from 'tiny-invariant';
 
 import { useLocalStorage } from '@lido-sdk/react';
 
+import { dynamics } from 'config';
 import { STORAGE_CLIENT_CONFIG } from 'config/storage';
 import { EnvConfigParsed } from 'config/types';
 import { CHAINS } from 'utils/chains';
+import { parseEnvConfig } from 'utils/parse-env-config';
 
 type SavedClientConfig = {
   rpcUrls: Partial<Record<CHAINS, string>>;
@@ -33,16 +35,11 @@ export const useClientConfig = () => {
   return context;
 };
 
-type Props = {
-  envConfig: EnvConfigParsed;
-  children?: ReactNode;
-};
-
 const DEFAULT_STATE: SavedClientConfig = {
   rpcUrls: {},
 };
 
-export const ClientConfigProvider = ({ children, envConfig }: Props) => {
+export const ClientConfigProvider = ({ children }: PropsWithChildren) => {
   const [restoredSettings, setLocalStorage] = useLocalStorage(
     STORAGE_CLIENT_CONFIG,
     DEFAULT_STATE,
@@ -60,12 +57,14 @@ export const ClientConfigProvider = ({ children, envConfig }: Props) => {
   );
 
   const contextValue = useMemo(() => {
+    const envConfig = parseEnvConfig(dynamics);
+
     return {
       ...envConfig,
       savedClientConfig,
       setSavedClientConfig: setSavedConfigAndRemember,
     };
-  }, [envConfig, savedClientConfig, setSavedConfigAndRemember]);
+  }, [savedClientConfig, setSavedConfigAndRemember]);
 
   return (
     <ClientConfigContext.Provider value={contextValue}>

providers/index.tsx

@@ -2,18 +2,15 @@ import { FC, PropsWithChildren } from 'react';
 import { CookieThemeProvider } from '@lidofinance/lido-ui';
 import { GlobalStyle } from 'styles';
 
-import { EnvConfigParsed } from '../config';
 import { ClientConfigProvider } from './client-config';
 import ModalProvider from './modals';
 import Web3Provider from './web3';
 import { AppFlagProvider } from './app-flag';
 
 export { MODAL, ModalContext } from './modals';
 
-export const Providers: FC<
-  PropsWithChildren<{ envConfig: EnvConfigParsed }>
-> = ({ envConfig, children }) => (
-  <ClientConfigProvider envConfig={envConfig}>
+export const Providers: FC<PropsWithChildren> = ({ children }) => (
+  <ClientConfigProvider>
     <AppFlagProvider>
       <CookieThemeProvider>
         <GlobalStyle />

types/components.ts

@@ -1,6 +1,4 @@
 import { FC, ReactNode } from 'react';
-import { AppProps } from 'next/app';
-import { EnvConfigParsed } from 'config';
 
 export type ComponentProps<
   T extends keyof JSX.IntrinsicElements,
@@ -16,9 +14,3 @@ export type Override<
   T extends Record<string, unknown>,
   P extends Record<string, unknown>,
 > = Omit<T, keyof P> & P;
-
-export type AppWrapperProps = AppProps & {
-  envConfig: EnvConfigParsed;
-};
-
-export type AppWrapperType = FC<AppWrapperProps>;

utils/check-rpc-url.ts

@@ -24,7 +24,7 @@ export const checkRpcUrl = async (rpcUrl: string, chainId: CHAINS) => {
     }
 
     // Doing a request to check rpc url is fetchable
-    const stethAddress = getTokenAddress(CHAINS.Mainnet, TOKENS.STETH);
+    const stethAddress = getTokenAddress(chainId, TOKENS.STETH);
     const stethContract = StethAbiFactory.connect(stethAddress, rpcProvider);
     await stethContract.name();
 

utilsApi/withCSP.ts

@@ -1,9 +1,9 @@
 import { FC } from 'react';
+import { AppProps } from 'next/app';
 import getConfig from 'next/config';
 import { withSecureHeaders } from 'next-secure-headers';
 
 import { dynamics } from 'config';
-import { AppWrapperType } from 'types';
 
 const { serverRuntimeConfig } = getConfig();
 const { cspTrustedHosts, cspReportOnly, cspReportUri, developmentMode } =
@@ -76,7 +76,7 @@ export const contentSecurityPolicy = {
   reportOnly,
 };
 
-export const withCsp = (app: AppWrapperType): FC =>
+export const withCsp = (app: FC<AppProps>): FC =>
   withSecureHeaders({
     contentSecurityPolicy,
     frameGuard: false,