fix theme fallback for no nft wallets
This commit is contained in:
parent
c2465caec5
commit
6527220575
|
@ -34,7 +34,7 @@ import { CUSTOM_SKINS, breakpoints } from 'utils/theme'
|
||||||
import { NFT } from 'types'
|
import { NFT } from 'types'
|
||||||
import { useViewport } from 'hooks/useViewport'
|
import { useViewport } from 'hooks/useViewport'
|
||||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
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 { createTransferInstruction } from '@solana/spl-token'
|
||||||
import { PublicKey, TransactionInstruction } from '@solana/web3.js'
|
import { PublicKey, TransactionInstruction } from '@solana/web3.js'
|
||||||
|
|
||||||
|
@ -52,6 +52,10 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
|
||||||
const setPrependedGlobalAdditionalInstructions = mangoStore(
|
const setPrependedGlobalAdditionalInstructions = mangoStore(
|
||||||
(s) => s.actions.setPrependedGlobalAdditionalInstructions,
|
(s) => s.actions.setPrependedGlobalAdditionalInstructions,
|
||||||
)
|
)
|
||||||
|
const [customTheme] = useLocalStorageState(
|
||||||
|
`${publicKey}${CUSTOM_THEME_SUFFIX}`,
|
||||||
|
'',
|
||||||
|
)
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const { pathname } = router
|
const { pathname } = router
|
||||||
|
@ -139,13 +143,17 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
|
||||||
// change theme if switching to wallet without nft
|
// change theme if switching to wallet without nft
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (loadingNfts || !theme) return
|
if (loadingNfts || !theme) return
|
||||||
if (theme.toLowerCase() in CUSTOM_SKINS) {
|
const hasSkin = mangoNfts.find(
|
||||||
const hasSkin = mangoNfts.find(
|
(nft) =>
|
||||||
(nft) => nft.collectionAddress === CUSTOM_SKINS[theme.toLowerCase()],
|
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])
|
}, [loadingNfts, mangoNfts, publicKey, theme])
|
||||||
|
|
||||||
|
|
|
@ -17,6 +17,7 @@ import { useTheme } from 'next-themes'
|
||||||
import { useCallback } from 'react'
|
import { useCallback } from 'react'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import {
|
import {
|
||||||
|
CUSTOM_THEME_SUFFIX,
|
||||||
NOTIFICATION_POSITION_KEY,
|
NOTIFICATION_POSITION_KEY,
|
||||||
SIZE_INPUT_UI_KEY,
|
SIZE_INPUT_UI_KEY,
|
||||||
TRADE_CHART_UI_KEY,
|
TRADE_CHART_UI_KEY,
|
||||||
|
@ -24,6 +25,7 @@ import {
|
||||||
} from 'utils/constants'
|
} from 'utils/constants'
|
||||||
import mangoStore from '@store/mangoStore'
|
import mangoStore from '@store/mangoStore'
|
||||||
import { CUSTOM_SKINS } from 'utils/theme'
|
import { CUSTOM_SKINS } from 'utils/theme'
|
||||||
|
import { useWallet } from '@solana/wallet-adapter-react'
|
||||||
|
|
||||||
const NOTIFICATION_POSITIONS = [
|
const NOTIFICATION_POSITIONS = [
|
||||||
'bottom-left',
|
'bottom-left',
|
||||||
|
@ -65,6 +67,7 @@ const DisplaySettings = () => {
|
||||||
const { theme, setTheme } = useTheme()
|
const { theme, setTheme } = useTheme()
|
||||||
const [themes, setThemes] = useState(DEFAULT_THEMES)
|
const [themes, setThemes] = useState(DEFAULT_THEMES)
|
||||||
const nfts = mangoStore((s) => s.wallet.nfts.data)
|
const nfts = mangoStore((s) => s.wallet.nfts.data)
|
||||||
|
const { publicKey } = useWallet()
|
||||||
|
|
||||||
const [savedLanguage, setSavedLanguage] = useLocalStorageState(
|
const [savedLanguage, setSavedLanguage] = useLocalStorageState(
|
||||||
'language',
|
'language',
|
||||||
|
@ -84,6 +87,11 @@ const DisplaySettings = () => {
|
||||||
TRADE_CHART_UI_KEY,
|
TRADE_CHART_UI_KEY,
|
||||||
'trading-view',
|
'trading-view',
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const [, setCustomTheme] = useLocalStorageState(
|
||||||
|
`${publicKey}${CUSTOM_THEME_SUFFIX}`,
|
||||||
|
'',
|
||||||
|
)
|
||||||
const [, setTradeLayout] = useLocalStorageState(TRADE_LAYOUT_KEY, 'chartLeft')
|
const [, setTradeLayout] = useLocalStorageState(TRADE_LAYOUT_KEY, 'chartLeft')
|
||||||
|
|
||||||
// add nft skins to theme selection list
|
// add nft skins to theme selection list
|
||||||
|
@ -126,7 +134,14 @@ const DisplaySettings = () => {
|
||||||
<div className="w-full min-w-[140px] md:w-auto">
|
<div className="w-full min-w-[140px] md:w-auto">
|
||||||
<Select
|
<Select
|
||||||
value={theme || DEFAULT_THEMES[0]}
|
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"
|
className="w-full"
|
||||||
>
|
>
|
||||||
{themes.map((theme) => (
|
{themes.map((theme) => (
|
||||||
|
|
|
@ -49,6 +49,8 @@ export const FAVORITE_SWAPS_KEY = 'favoriteSwaps-0.1'
|
||||||
|
|
||||||
export const THEME_KEY = 'theme-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 RPC_PROVIDER_KEY = 'rpcProviderKey-0.9'
|
||||||
|
|
||||||
export const PRIORITY_FEE_KEY = 'priorityFeeKey-0.2'
|
export const PRIORITY_FEE_KEY = 'priorityFeeKey-0.2'
|
||||||
|
|
Loading…
Reference in New Issue