fix theme fallback for no nft wallets

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 { SIDEBAR_COLLAPSE_KEY } from 'utils/constants'
+import { CUSTOM_THEME_SUFFIX, SIDEBAR_COLLAPSE_KEY } from 'utils/constants'
 import { createTransferInstruction } from '@solana/spl-token'
 import { PublicKey, TransactionInstruction } from '@solana/web3.js'
 
@@ -52,6 +52,10 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
   const setPrependedGlobalAdditionalInstructions = mangoStore(
     (s) => s.actions.setPrependedGlobalAdditionalInstructions,
   )
+  const [customTheme] = useLocalStorageState(
+    `${publicKey}${CUSTOM_THEME_SUFFIX}`,
+    '',
+  )
 
   const router = useRouter()
   const { pathname } = router
@@ -139,13 +143,17 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
   // change theme if switching to wallet without nft
   useEffect(() => {
     if (loadingNfts || !theme) return
-    if (theme.toLowerCase() in CUSTOM_SKINS) {
-      const hasSkin = mangoNfts.find(
-        (nft) => nft.collectionAddress === CUSTOM_SKINS[theme.toLowerCase()],
+    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,
       )
-      if (!hasSkin) {
-        setTheme(t('settings:mango-classic'))
-      }
     }
   }, [loadingNfts, mangoNfts, publicKey, theme])
 

components/settings/DisplaySettings.tsx

@@ -17,6 +17,7 @@ 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,
@@ -24,6 +25,7 @@ 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',
@@ -65,6 +67,7 @@ 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',
@@ -84,6 +87,11 @@ const DisplaySettings = () => {
     TRADE_CHART_UI_KEY,
     'trading-view',
   )
+
+  const [, setCustomTheme] = useLocalStorageState(
+    `${publicKey}${CUSTOM_THEME_SUFFIX}`,
+    '',
+  )
   const [, setTradeLayout] = useLocalStorageState(TRADE_LAYOUT_KEY, 'chartLeft')
 
   // add nft skins to theme selection list
@@ -126,7 +134,14 @@ const DisplaySettings = () => {
         <div className="w-full min-w-[140px] md:w-auto">
           <Select
             value={theme || DEFAULT_THEMES[0]}
-            onChange={(t: string) => setTheme(t)}
+            onChange={(t: string) => {
+              setTheme(t)
+              if (CUSTOM_SKINS[t.toLowerCase()]) {
+                setCustomTheme(t)
+              } else {
+                setCustomTheme('')
+              }
+            }}
             className="w-full"
           >
             {themes.map((theme) => (

utils/constants.ts

@@ -49,6 +49,8 @@ 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'