🐛 Fix flickering of tutorial and migrationbanner (#507)

src/components/Intro.tsx

@@ -4,9 +4,7 @@ import Card from 'components/Card'
 import { GridGlobe, GridHole, GridLandscape, GridTire } from 'components/Icons'
 import Text from 'components/Text'
 import { Tooltip } from 'components/Tooltip'
-import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { TUTORIAL_KEY } from 'constants/localStore'
-import useLocalStorage from 'hooks/useLocalStorage'
+import useStore from 'store'
 
 interface Props {
   text: string | ReactNode
@@ -28,9 +26,8 @@ function IntroBackground(props: { bg: Props['bg'] }) {
 }
 
 export default function Intro(props: Props) {
-  const [tutorial] = useLocalStorage<boolean>(TUTORIAL_KEY, DEFAULT_SETTINGS.tutorial)
-
-  if (!tutorial) return null
+  const showTutorial = useStore((s) => s.tutorial)
+  if (!showTutorial) return null
   return (
     <Card
       className={`relative w-full p-8 bg-intro bg-cover h-55`}

src/components/MigrationBanner.tsx

@@ -5,14 +5,17 @@ import { TextLink } from 'components/TextLink'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { MIGRATION_BANNER_KEY } from 'constants/localStore'
 import useLocalStorage from 'hooks/useLocalStorage'
+import useStore from 'store'
 
 export default function MigrationBanner() {
-  const [migrationBanner, setMigrationBanner] = useLocalStorage<boolean>(
+  const [_, setMigrationBanner] = useLocalStorage<boolean>(
     MIGRATION_BANNER_KEY,
     DEFAULT_SETTINGS.migrationBanner,
   )
 
-  if (!migrationBanner) return null
+  const showMigrationBanner = useStore((s) => s.migrationBanner)
+
+  if (!showMigrationBanner) return null
   return (
     <Card
       className='relative w-full bg-info-bg/20 text-info'

src/hooks/useLocalStorage.ts

@@ -1,10 +1,17 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
+import useStore from 'store'
+
 export default function useLocalStorage<T>(key: string, defaultValue: T): [T, (value: T) => void] {
   const keyRef = useRef(key)
   const defaultValueRef = useRef(defaultValue)
   const [value, _setValue] = useState(defaultValueRef.current)
 
+  const updateValue = useCallback((value: T) => {
+    useStore.setState({ [keyRef.current]: value })
+    _setValue(value)
+  }, [])
+
   useEffect(() => {
     const savedItem = localStorage.getItem(keyRef.current)
 
@@ -12,13 +19,13 @@ export default function useLocalStorage<T>(key: string, defaultValue: T): [T, (v
       localStorage.setItem(keyRef.current, JSON.stringify(defaultValueRef.current))
     }
 
-    _setValue(savedItem ? JSON.parse(savedItem) : defaultValueRef.current)
+    updateValue(savedItem ? JSON.parse(savedItem) : defaultValueRef.current)
 
     function handler(e: StorageEvent) {
       if (e.key !== keyRef.current) return
 
       const item = localStorage.getItem(keyRef.current)
-      _setValue(JSON.parse(item ?? JSON.stringify(defaultValueRef.current)))
+      updateValue(JSON.parse(item ?? JSON.stringify(defaultValueRef.current)))
     }
 
     window.addEventListener('storage', handler)
@@ -30,7 +37,7 @@ export default function useLocalStorage<T>(key: string, defaultValue: T): [T, (v
 
   const setValue = useCallback((value: T) => {
     try {
-      _setValue(value)
+      updateValue(value)
 
       localStorage.setItem(keyRef.current, JSON.stringify(value))
       if (typeof window !== 'undefined') {

src/store/slices/common.ts

@@ -9,5 +9,7 @@ export default function createCommonSlice(set: SetState<CommonSlice>, get: GetSt
     selectedAccount: null,
     focusComponent: null,
     accountDetailsExpanded: false,
+    migrationBanner: true,
+    tutorial: true,
   }
 }

src/types/interfaces/store/common.d.ts

@@ -8,6 +8,8 @@ interface CommonSlice {
   updatedAccount?: Account
   focusComponent: FocusComponent | null
   accountDetailsExpanded: boolean
+  migrationBanner: boolean
+  tutorial: boolean
 }
 
 interface FocusComponent {