reset skin when switching to wallet without nft

components/SideNav.tsx

@@ -39,13 +39,16 @@ import { SIDEBAR_COLLAPSE_KEY } from 'utils/constants'
 import { createTransferInstruction } from '@solana/spl-token'
 import { PublicKey, TransactionInstruction } from '@solana/web3.js'
 
+const set = mangoStore.getState().set
+
 const SideNav = ({ collapsed }: { collapsed: boolean }) => {
   const { t } = useTranslation(['common', 'search'])
   const { connected, publicKey } = useWallet()
-  const { theme } = useTheme()
+  const { theme, setTheme } = 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,
@@ -72,6 +75,9 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
   // fetch nfts when pk changes
   useEffect(() => {
     if (publicKey) {
+      set((state) => {
+        state.wallet.nfts.initialLoad = true
+      })
       const actions = mangoStore.getState().actions
       const connection = mangoStore.getState().connection
       actions.fetchNfts(connection, publicKey)
@@ -131,6 +137,19 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
     return themeData.sideImagePath
   }, [mangoNfts, theme, themeData])
 
+  // 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()],
+      )
+      if (!hasSkin) {
+        setTheme(t('settings:mango-classic'))
+      }
+    }
+  }, [loadingNfts, mangoNfts, publicKey, theme])
+
   return (
     <div
       className={`transition-all duration-${sideBarAnimationDuration} ${

components/TopBar.tsx

@@ -207,7 +207,7 @@ const TopBar = () => {
               className="mr-4"
             >{`${t('deposit')} / ${t('withdraw')}`}</Button>
           )}
-          <div className="h-[63px]">
+          <div className="h-[63px] bg-th-bkg-1">
             <button
               className={TOPBAR_ICON_BUTTON_CLASSES}
               onClick={() => setShowSettingsModal(true)}

store/mangoStore.ts

@@ -261,6 +261,7 @@ export type MangoStore = {
     tokens: TokenAccount[]
     nfts: {
       data: NFT[] | []
+      initialLoad: boolean
       loading: boolean
     }
   }
@@ -440,6 +441,7 @@ const mangoStore = create<MangoStore>()(
         nfts: {
           data: [],
           loading: false,
+          initialLoad: true,
         },
       },
       window: {
@@ -728,8 +730,12 @@ const mangoStore = create<MangoStore>()(
           } catch (error) {
             console.warn('Error: unable to fetch nfts.', error)
           } finally {
+            const notLoaded = mangoStore.getState().wallet.nfts.initialLoad
             set((state) => {
               state.wallet.nfts.loading = false
+              if (notLoaded) {
+                state.wallet.nfts.initialLoad = false
+              }
             })
           }
         },