fix(theme): fix the missing background radial gradient

fixes https://github.com/Uniswap/uniswap-interface/issues/1925

public/index.html

@@ -63,9 +63,9 @@
             pointer-events: none;
             width: 200vw;
             height: 200vh;
-            mix-blend-mode: color;
             background: radial-gradient(50% 50% at 50% 50%, #fc077d10 0%, rgba(255, 255, 255, 0) 100%);
             transform: translate(-50vw, -100vh);
+            mix-blend-mode: color;
             z-index: -1;
         }
 

src/index.tsx

@@ -19,6 +19,7 @@ import MulticallUpdater from './state/multicall/updater'
 import TransactionUpdater from './state/transactions/updater'
 import UserUpdater from './state/user/updater'
 import ThemeProvider, { ThemedGlobalStyle } from './theme'
+import RadialGradientByChainUpdater from './theme/RadialGradientByChainUpdater'
 import getLibrary from './utils/getLibrary'
 
 const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName)
@@ -50,6 +51,7 @@ if (typeof GOOGLE_ANALYTICS_ID === 'string') {
 function Updaters() {
   return (
     <>
+      <RadialGradientByChainUpdater />
       <ListsUpdater />
       <UserUpdater />
       <ApplicationUpdater />

src/state/application/updater.ts

 import { useCallback, useEffect, useState } from 'react'
-import { useActiveWeb3React } from '../../hooks/web3'
+import { useAppDispatch } from 'state/hooks'
 import useDebounce from '../../hooks/useDebounce'
 import useIsWindowVisible from '../../hooks/useIsWindowVisible'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { updateBlockNumber } from './actions'
-import { useAppDispatch } from 'state/hooks'
-import { SupportedChainId } from 'constants/chains'
 
 export default function Updater(): null {
   const { library, chainId } = useActiveWeb3React()
@@ -54,25 +53,5 @@ export default function Updater(): null {
     dispatch(updateBlockNumber({ chainId: debouncedState.chainId, blockNumber: debouncedState.blockNumber }))
   }, [windowVisible, dispatch, debouncedState.blockNumber, debouncedState.chainId])
 
-  // manage background color
-  const background = document.getElementById('background-radial-gradient')
-  useEffect(() => {
-    if (!background) {
-      return
-    }
-
-    let gradient
-    switch (chainId) {
-      case SupportedChainId.ARBITRUM_ONE:
-        gradient =
-          'radial-gradient(96.19% 96.19% at 50% -5.43%, hsla(204, 87%, 55%, 0.2) 0%, hsla(227, 0%, 0%, 0) 100%)'
-        break
-      default:
-        gradient = 'radial-gradient(50% 50% at 50% 50%, #fc077d10 0%, rgba(255, 255, 255, 0) 100%)'
-    }
-
-    background.style.background = gradient
-  }, [background, chainId])
-
   return null
 }

src/theme/RadialGradientByChainUpdater.ts

+import { useEffect } from 'react'
+import { SupportedChainId } from '../constants/chains'
+import { useActiveWeb3React } from '../hooks/web3'
+
+const backgroundRadialGradientElement = document.getElementById('background-radial-gradient')
+export default function RadialGradientByChainUpdater(): null {
+  const { chainId } = useActiveWeb3React()
+  // manage background color
+  useEffect(() => {
+    if (!backgroundRadialGradientElement) {
+      return
+    }
+
+    if (chainId === SupportedChainId.ARBITRUM_ONE) {
+      backgroundRadialGradientElement.style.background =
+        'radial-gradient(96.19% 96.19% at 50% -5.43%, hsla(204, 87%, 55%, 0.2) 0%, hsla(227, 0%, 0%, 0) 100%)'
+    } else {
+      backgroundRadialGradientElement.style.background = ''
+    }
+  }, [chainId])
+  return null
+}