Rename a component, preparing for extension

Author: csillag

.storybook/preview.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Preview } from '@storybook/react'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import '../src/locales/i18n'
-import { withDefaultTheme } from '../src/app/components/ThemeByNetwork'
+import { withDefaultTheme } from '../src/app/components/ThemeByScope'
 import { initialize, mswLoader } from 'msw-storybook-addon'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { handlers } from '../internals/mocks/msw-handlers'

src/app/components/AnalyticsConsent/index.tsx

@@ -6,7 +6,7 @@ import Button from '@mui/material/Button'
 import Link from '@mui/material/Link'
 import { Trans, useTranslation } from 'react-i18next'
 import * as matomo from './initializeMatomo'
-import { ThemeByNetwork } from '../ThemeByNetwork'
+import { ThemeByScope } from '../ThemeByScope'
 import { Network } from '../../../types/network'
 import { AnalyticsIsBlocked } from './AnalyticsIsBlocked'
 import { AnalyticsDialogLayout } from './AnalyticsDialogLayout'
@@ -63,7 +63,7 @@ export const AnalyticsConsentProvider = (props: { children: React.ReactNode }) =
     >
       {props.children}
       {/* Theme is needed because AnalyticsConsentProvider is outside network-themed routes */}
-      <ThemeByNetwork isRootTheme={false} network={Network.mainnet}>
+      <ThemeByScope isRootTheme={false} network={Network.mainnet}>
         <AnalyticsConsentView
           isOpen={hasAccepted === 'not-chosen'}
           onAccept={async () => {
@@ -80,7 +80,7 @@ export const AnalyticsConsentProvider = (props: { children: React.ReactNode }) =
           onReload={() => window.location.reload()}
           onClose={() => setHasAccepted('timed_out_matomo_not_loaded')}
         />
-      </ThemeByNetwork>
+      </ThemeByScope>
     </AnalyticsContext.Provider>
   )
 }

…/app/components/ThemeByNetwork/index.tsx src/app/components/ThemeByScope/index.tsxsrc/app/components/ThemeByNetwork/index.tsx renamed to src/app/components/ThemeByScope/index.tsx src/app/components/ThemeByNetwork/index.tsx renamed to src/app/components/ThemeByScope/index.tsx

@@ -5,7 +5,7 @@ import { getThemesForNetworks } from '../../../styles/theme'
 import CssBaseline from '@mui/material/CssBaseline'
 import { fixedNetwork } from '../../utils/route-utils'
 
-export const ThemeByNetwork: FC<{ network: Network; isRootTheme: boolean; children: React.ReactNode }> = ({
+export const ThemeByScope: FC<{ network: Network; isRootTheme: boolean; children: React.ReactNode }> = ({
   network,
   isRootTheme,
   children,
@@ -17,10 +17,10 @@ export const ThemeByNetwork: FC<{ network: Network; isRootTheme: boolean; childr
 )
 
 export const withDefaultTheme = (node: ReactNode, alwaysMainnet = false) => (
-  <ThemeByNetwork
+  <ThemeByScope
     isRootTheme={true}
     network={alwaysMainnet ? Network.mainnet : fixedNetwork ?? Network.mainnet}
   >
     {node}
-  </ThemeByNetwork>
+  </ThemeByScope>
 )

src/app/pages/HomePage/index.tsx

@@ -14,7 +14,7 @@ import { useTranslation } from 'react-i18next'
 import { ParaTimeSelectorStep } from './Graph/types'
 import { BuildBanner } from '../../components/BuildBanner'
 import { useSearchQueryNetworkParam } from '../../hooks/useSearchQueryNetworkParam'
-import { ThemeByNetwork } from '../../components/ThemeByNetwork'
+import { ThemeByScope } from '../../components/ThemeByScope'
 import { NetworkOfflineBanner } from '../../components/OfflineBanner'
 import { useIsApiReachable } from '../../components/OfflineBanner/hook'
 
@@ -168,7 +168,7 @@ export const HomePage: FC = () => {
               </InfoScreenBtn>
             )}
           </SearchInputContainer>
-          <ThemeByNetwork isRootTheme={false} network={network}>
+          <ThemeByScope isRootTheme={false} network={network}>
             <Box sx={{ zIndex: zIndexHomePage.paraTimeSelector }}>
               <ParaTimeSelector
                 step={step}
@@ -179,7 +179,7 @@ export const HomePage: FC = () => {
                 onGraphZoomedIn={setIsGraphZoomedIn}
               />
             </Box>
-          </ThemeByNetwork>
+          </ThemeByScope>
         </Content>
 
         <FooterStyled>

src/app/pages/RoutingErrorPage/index.tsx

@@ -3,18 +3,18 @@ import Divider from '@mui/material/Divider'
 import { PageLayout } from '../../components/PageLayout'
 import { ErrorDisplay } from '../../components/ErrorDisplay'
 import { useRouteError } from 'react-router-dom'
-import { ThemeByNetwork } from '../../components/ThemeByNetwork'
+import { ThemeByScope } from '../../components/ThemeByScope'
 import { useScopeParam } from '../../hooks/useScopeParam'
 import { Network } from '../../../types/network'
 
 export const RoutingErrorPage: FC = () => {
   const scope = useScopeParam()
   return (
-    <ThemeByNetwork isRootTheme={true} network={scope?.network ?? Network.mainnet}>
+    <ThemeByScope isRootTheme={true} network={scope?.network ?? Network.mainnet}>
       <PageLayout>
         <Divider variant="layout" />
         <ErrorDisplay error={useRouteError()} />
       </PageLayout>
-    </ThemeByNetwork>
+    </ThemeByScope>
   )
 }

src/app/utils/renderWithProviders.tsx

@@ -1,6 +1,6 @@
 import { MemoryRouter } from 'react-router-dom'
 import { render } from '@testing-library/react'
-import { withDefaultTheme } from '../components/ThemeByNetwork'
+import { withDefaultTheme } from '../components/ThemeByScope'
 import React from 'react'
 import { useIsApiReachable, useRuntimeFreshness } from '../components/OfflineBanner/hook'
 

src/routes.tsx

@@ -26,7 +26,7 @@ import {
   skipGraph,
 } from './app/utils/route-utils'
 import { RoutingErrorPage } from './app/pages/RoutingErrorPage'
-import { ThemeByNetwork, withDefaultTheme } from './app/components/ThemeByNetwork'
+import { ThemeByScope, withDefaultTheme } from './app/components/ThemeByScope'
 import { useRequiredScopeParam } from './app/hooks/useScopeParam'
 import { TokensPage } from './app/pages/TokensOverviewPage'
 import { ContractCodeCard } from './app/pages/RuntimeAccountDetailsPage/ContractCodeCard'
@@ -60,9 +60,9 @@ import { FC, useEffect } from 'react'
 import { AnalyticsConsentProvider } from './app/components/AnalyticsConsent'
 
 const NetworkSpecificPart = () => (
-  <ThemeByNetwork isRootTheme={true} network={useRequiredScopeParam().network}>
+  <ThemeByScope isRootTheme={true} network={useRequiredScopeParam().network}>
     <Outlet />
-  </ThemeByNetwork>
+  </ThemeByScope>
 )
 
 /**