fix skin flash

components/SideNav.tsx

@@ -34,7 +34,7 @@ import { CUSTOM_SKINS, breakpoints } from 'utils/theme'
 import { NFT } from 'types'
 import { useViewport } from 'hooks/useViewport'
 import useLocalStorageState from 'hooks/useLocalStorageState'
-import { CUSTOM_THEME_SUFFIX, SIDEBAR_COLLAPSE_KEY } from 'utils/constants'
+import { SIDEBAR_COLLAPSE_KEY } from 'utils/constants'
 import { createTransferInstruction } from '@solana/spl-token'
 import { PublicKey, TransactionInstruction } from '@solana/web3.js'
 
@@ -43,19 +43,14 @@ const set = mangoStore.getState().set
 const SideNav = ({ collapsed }: { collapsed: boolean }) => {
   const { t } = useTranslation(['common', 'search'])
   const { connected, publicKey } = useWallet()
-  const { theme, setTheme } = useTheme()
+  const { theme } = useTheme()
   const group = mangoStore.getState().group
   const themeData = mangoStore((s) => s.themeData)
   const nfts = mangoStore((s) => s.wallet.nfts.data)
-  const loadingNfts = mangoStore((s) => s.wallet.nfts.initialLoad)
   const { mangoAccount } = useMangoAccount()
   const setPrependedGlobalAdditionalInstructions = mangoStore(
     (s) => s.actions.setPrependedGlobalAdditionalInstructions,
   )
-  const [customTheme] = useLocalStorageState(
-    `${publicKey}${CUSTOM_THEME_SUFFIX}`,
-    '',
-  )
 
   const router = useRouter()
   const { pathname } = router
@@ -140,23 +135,6 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
     return themeData.sideImagePath
   }, [mangoNfts, theme, themeData])
 
-  // change theme if switching to wallet without nft
-  useEffect(() => {
-    if (loadingNfts || !theme) return
-    const hasSkin = mangoNfts.find(
-      (nft) =>
-        nft.collectionAddress === CUSTOM_SKINS[customTheme.toLowerCase()],
-    )
-
-    if (hasSkin && customTheme && theme !== customTheme) {
-      setTheme(customTheme)
-    } else if (!hasSkin) {
-      setTheme(
-        CUSTOM_SKINS[theme.toLowerCase()] ? t('settings:mango-classic') : theme,
-      )
-    }
-  }, [loadingNfts, mangoNfts, publicKey, theme])
-
   return (
     <div
       className={`transition-all duration-${sideBarAnimationDuration} ${

components/settings/DisplaySettings.tsx

@@ -17,7 +17,6 @@ import { useTheme } from 'next-themes'
 import { useCallback } from 'react'
 import { useRouter } from 'next/router'
 import {
-  CUSTOM_THEME_SUFFIX,
   NOTIFICATION_POSITION_KEY,
   SIZE_INPUT_UI_KEY,
   TRADE_CHART_UI_KEY,
@@ -25,7 +24,6 @@ import {
 } from 'utils/constants'
 import mangoStore from '@store/mangoStore'
 import { CUSTOM_SKINS } from 'utils/theme'
-import { useWallet } from '@solana/wallet-adapter-react'
 
 const NOTIFICATION_POSITIONS = [
   'bottom-left',
@@ -67,7 +65,6 @@ const DisplaySettings = () => {
   const { theme, setTheme } = useTheme()
   const [themes, setThemes] = useState(DEFAULT_THEMES)
   const nfts = mangoStore((s) => s.wallet.nfts.data)
-  const { publicKey } = useWallet()
 
   const [savedLanguage, setSavedLanguage] = useLocalStorageState(
     'language',
@@ -88,10 +85,6 @@ const DisplaySettings = () => {
     'trading-view',
   )
 
-  const [, setCustomTheme] = useLocalStorageState(
-    `${publicKey}${CUSTOM_THEME_SUFFIX}`,
-    '',
-  )
   const [, setTradeLayout] = useLocalStorageState(TRADE_LAYOUT_KEY, 'chartLeft')
 
   // add nft skins to theme selection list
@@ -136,11 +129,6 @@ const DisplaySettings = () => {
             value={theme || DEFAULT_THEMES[0]}
             onChange={(t: string) => {
               setTheme(t)
-              if (CUSTOM_SKINS[t.toLowerCase()]) {
-                setCustomTheme(t)
-              } else {
-                setCustomTheme('')
-              }
             }}
             className="w-full"
           >

utils/constants.ts

@@ -49,8 +49,6 @@ export const FAVORITE_SWAPS_KEY = 'favoriteSwaps-0.1'
 
 export const THEME_KEY = 'theme-0.1'
 
-export const CUSTOM_THEME_SUFFIX = 'CUSTOM_NFT_THEME'
-
 export const RPC_PROVIDER_KEY = 'rpcProviderKey-0.9'
 
 export const PRIORITY_FEE_KEY = 'priorityFeeKey-0.2'