add tv chart meme and support changing fonts

components/Layout.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react'
 import { ArrowPathIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
 import { useViewport } from '../hooks/useViewport'
-import { breakpoints } from '../utils/theme'
+import { breakpoints, nftThemeMeta } from '../utils/theme'
 import mangoStore from '@store/mangoStore'
 import BottomBar from './mobile/BottomBar'
 import BounceLoader from './shared/BounceLoader'
@@ -24,6 +24,7 @@ import useInterval from './shared/useInterval'
 import { Transition } from '@headlessui/react'
 import { useTranslation } from 'next-i18next'
 import TermsOfUseModal from './modals/TermsOfUseModal'
+import { useTheme } from 'next-themes'
 
 const sideBarAnimationDuration = 300
 const termsLastUpdated = 1679441610978
@@ -31,6 +32,7 @@ const termsLastUpdated = 1679441610978
 const Layout = ({ children }: { children: ReactNode }) => {
   const { connected } = useWallet()
   const themeData = mangoStore((s) => s.themeData)
+  const { theme } = useTheme()
   const loadingMangoAccount = mangoStore((s) => s.mangoAccount.initialLoad)
   const [isCollapsed, setIsCollapsed] = useLocalStorageState(
     SIDEBAR_COLLAPSE_KEY,
@@ -70,6 +72,19 @@ const Layout = ({ children }: { children: ReactNode }) => {
     particlesInit()
   }, [])
 
+  useEffect(() => {
+    const set = mangoStore.getState().set
+    if (nftThemeMeta[theme]) {
+      set((s) => {
+        s.themeData = nftThemeMeta[theme]
+      })
+    } else {
+      set((s) => {
+        s.themeData = nftThemeMeta.default
+      })
+    }
+  }, [theme])
+
   const showTermsOfUse = useMemo(() => {
     return (!acceptTerms || acceptTerms < termsLastUpdated) && connected
   }, [acceptTerms, connected])

components/settings/DisplaySettings.tsx

@@ -22,9 +22,8 @@ import {
   TRADE_CHART_UI_KEY,
   TRADE_LAYOUT_KEY,
 } from 'utils/constants'
-import mangoStore, { DEFAULT_THEME_DATA } from '@store/mangoStore'
+import mangoStore from '@store/mangoStore'
 import { useWallet } from '@solana/wallet-adapter-react'
-import { ThemeData } from 'types'
 
 const NOTIFICATION_POSITIONS = [
   'bottom-left',
@@ -62,19 +61,6 @@ export const THEMES = [
   'olive',
 ]
 
-const BONK_META_DATA: ThemeData = {
-  buttonStyle: 'raised',
-  logoPath: '/images/themes/bonk/bonk-logo.png',
-  platformName: 'Bongo',
-  rainAnimationImagePath: '/images/themes/bonk/bonk-animation-logo.png',
-  sideImagePath: '/images/themes/bonk/sidenav-image.png',
-  sideTilePath: '/images/themes/bonk/bonk-tile.png',
-  topTilePath: '/images/themes/bonk/bonk-tile.png',
-  tvChartTheme: 'Light',
-  tvImagePath: '/images/themes/bonk/tv-chart-image.png',
-  useGradientBg: true,
-}
-
 const DisplaySettings = () => {
   const { t } = useTranslation(['common', 'settings'])
   const { theme, setTheme } = useTheme()
@@ -110,21 +96,7 @@ const DisplaySettings = () => {
     }
   }, [connection, publicKey])
 
-  // set nft skin data to store and localStorage (move this to theme selection). will need to use localStorage for page reloads
-  useEffect(() => {
-    const set = mangoStore.getState().set
-    if (theme === 'Bonk') {
-      set((s) => {
-        s.themeData = BONK_META_DATA
-      })
-    } else {
-      set((s) => {
-        s.themeData = DEFAULT_THEME_DATA
-      })
-    }
-  }, [theme])
-
-  // use collectionAddress to enable nft skins?
+  // use collectionAddress to enable nft skins? push theme name (theme name should come from the nft) to THEMES
   console.log(nfts)
 
   const handleLangChange = useCallback(

components/trade/TradingViewChart.tsx

@@ -1,4 +1,11 @@
-import { useEffect, useRef, useMemo, useState, useCallback } from 'react'
+import {
+  useEffect,
+  useRef,
+  useMemo,
+  useState,
+  useCallback,
+  Fragment,
+} from 'react'
 import { useTheme } from 'next-themes'
 import {
   widget,
@@ -40,6 +47,7 @@ import useTradeHistory from 'hooks/useTradeHistory'
 import dayjs from 'dayjs'
 import ModifyTvOrderModal from '@components/modals/ModifyTvOrderModal'
 import { findSerum3MarketPkInOpenOrders } from './OpenOrders'
+import { Transition } from '@headlessui/react'
 
 export interface ChartContainerProps {
   container: ChartingLibraryWidgetOptions['container']
@@ -498,7 +506,7 @@ const TradingViewChart = () => {
     if (!button) {
       return
     }
-    button.textContent = '?'
+    button.textContent = theme.toUpperCase()
     button.addEventListener('click', () => toggleThemeEasterEgg(button))
     if (showThemeEasterEgg) {
       button.style.color = COLORS.ACTIVE[theme]
@@ -816,18 +824,25 @@ const TradingViewChart = () => {
 
   return (
     <>
-      {/* <div className="no-repeat h-full w-full bg-[url('/images/themes/bonk/tv-chart-image.png')] bg-auto bg-right-top bg-no-repeat"> */}
-      {showThemeEasterEgg ? (
+      <Transition
+        show={showThemeEasterEgg}
+        as={Fragment}
+        enter="transition ease-in duration-500"
+        enterFrom="scale-0 opacity-0"
+        enterTo="scale-100 rotate-[-370deg] opacity-100"
+        leave="transition ease-out duration-500"
+        leaveFrom="scale-100 opacity-100"
+        leaveTo="scale-0 opacity-0"
+      >
         <img
-          className="absolute top-8 right-14 h-auto w-48"
+          className="absolute top-8 right-20 h-auto w-36"
           src="/images/themes/bonk/tv-chart-image.png"
         />
-      ) : null}
+      </Transition>
       <div
         id={defaultProps.container as string}
         className="tradingview-chart"
       />
-      {/* </div> */}
       {orderToModify ? (
         <ModifyTvOrderModal
           isOpen={!!orderToModify}

store/mangoStore.ts

@@ -68,19 +68,7 @@ import {
   IExecutionLineAdapter,
   IOrderLineAdapter,
 } from '@public/charting_library/charting_library'
-
-export const DEFAULT_THEME_DATA: ThemeData = {
-  buttonStyle: 'flat',
-  logoPath: '/logos/logo-mark.svg',
-  platformName: 'Mango',
-  rainAnimationImagePath: '',
-  sideImagePath: '',
-  sideTilePath: '',
-  topTilePath: '',
-  tvChartTheme: 'Dark',
-  tvImagePath: '',
-  useGradientBg: false,
-}
+import { nftThemeMeta } from 'utils/theme'
 
 const GROUP = new PublicKey('78b8f4cGCwmZ9ysPFMWLaLTkkaYnUjwMJYStWe5RTSSX')
 
@@ -378,7 +366,7 @@ const mangoStore = create<MangoStore>()(
         amountIn: '',
         amountOut: '',
       },
-      themeData: DEFAULT_THEME_DATA,
+      themeData: nftThemeMeta.default,
       tokenStats: {
         initialLoad: false,
         loading: true,

styles/globals.css

@@ -129,6 +129,9 @@ th {
   --error: theme('colors.light-theme.error');
   --success: theme('colors.light-theme.success');
   --warning: theme('colors.light-theme.warning');
+  --font-body: 'TT Commons', sans-serif;
+  --font-display: 'TT Commons Expanded', sans-serif;
+  --font-mono: 'TT Mono', mono;
 }
 
 [data-theme='Dark'] {
@@ -158,6 +161,9 @@ th {
   --error: theme('colors.dark-theme.error');
   --success: theme('colors.dark-theme.success');
   --warning: theme('colors.dark-theme.warning');
+  --font-body: 'TT Commons', sans-serif;
+  --font-display: 'TT Commons Expanded', sans-serif;
+  --font-mono: 'TT Mono', mono;
 }
 
 [data-theme='Mango Classic'] {
@@ -187,6 +193,9 @@ th {
   --error: theme('colors.mango-classic-theme.error');
   --success: theme('colors.mango-classic-theme.success');
   --warning: theme('colors.mango-classic-theme.warning');
+  --font-body: 'TT Commons', sans-serif;
+  --font-display: 'TT Commons Expanded', sans-serif;
+  --font-mono: 'TT Mono', mono;
 }
 
 [data-theme='Medium'] {
@@ -216,6 +225,9 @@ th {
   --error: theme('colors.medium-theme.error');
   --success: theme('colors.medium-theme.success');
   --warning: theme('colors.medium-theme.warning');
+  --font-body: 'TT Commons', sans-serif;
+  --font-display: 'TT Commons Expanded', sans-serif;
+  --font-mono: 'TT Mono', mono;
 }
 
 [data-theme='High Contrast'] {
@@ -245,6 +257,9 @@ th {
   --error: theme('colors.high-contrast-theme.error');
   --success: theme('colors.high-contrast-theme.success');
   --warning: theme('colors.high-contrast-theme.warning');
+  --font-body: 'TT Commons', sans-serif;
+  --font-display: 'TT Commons Expanded', sans-serif;
+  --font-mono: 'TT Mono', mono;
 }
 
 [data-theme='Blueberry'] {
@@ -274,6 +289,9 @@ th {
   --error: theme('colors.blueberry-theme.error');
   --success: theme('colors.blueberry-theme.success');
   --warning: theme('colors.blueberry-theme.warning');
+  --font-body: 'TT Commons', sans-serif;
+  --font-display: 'TT Commons Expanded', sans-serif;
+  --font-mono: 'TT Mono', mono;
 }
 
 [data-theme='Banana'] {
@@ -303,6 +321,9 @@ th {
   --error: theme('colors.banana-theme.error');
   --success: theme('colors.banana-theme.success');
   --warning: theme('colors.banana-theme.warning');
+  --font-body: 'TT Commons', sans-serif;
+  --font-display: 'TT Commons Expanded', sans-serif;
+  --font-mono: 'TT Mono', mono;
 }
 
 [data-theme='Olive'] {
@@ -332,6 +353,9 @@ th {
   --error: theme('colors.olive-theme.error');
   --success: theme('colors.olive-theme.success');
   --warning: theme('colors.olive-theme.warning');
+  --font-body: 'TT Commons', sans-serif;
+  --font-display: 'TT Commons Expanded', sans-serif;
+  --font-mono: 'TT Mono', mono;
 }
 
 [data-theme='Lychee'] {
@@ -361,6 +385,9 @@ th {
   --error: theme('colors.lychee-theme.error');
   --success: theme('colors.lychee-theme.success');
   --warning: theme('colors.lychee-theme.warning');
+  --font-body: 'TT Commons', sans-serif;
+  --font-display: 'TT Commons Expanded', sans-serif;
+  --font-mono: 'TT Mono', mono;
 }
 
 [data-theme='Avocado'] {
@@ -390,6 +417,9 @@ th {
   --error: theme('colors.avocado-theme.error');
   --success: theme('colors.avocado-theme.success');
   --warning: theme('colors.avocado-theme.warning');
+  --font-body: 'TT Commons', sans-serif;
+  --font-display: 'TT Commons Expanded', sans-serif;
+  --font-mono: 'TT Mono', mono;
 }
 
 [data-theme='Bonk'] {
@@ -419,6 +449,9 @@ th {
   --error: theme('colors.bonk-theme.error');
   --success: theme('colors.bonk-theme.success');
   --warning: theme('colors.bonk-theme.warning');
+  --font-body: 'TT Commons', sans-serif;
+  --font-display: 'TT Commons Expanded', sans-serif;
+  --font-mono: 'TT Mono', mono;
 }
 
 /* Base */

tailwind.config.js

@@ -5,9 +5,9 @@ module.exports = {
   ],
   theme: {
     fontFamily: {
-      display: ['TT Commons Expanded, sans-serif'],
-      body: 'TT Commons, sans-serif',
-      mono: ['TT Mono, mono'],
+      display: ['var(--font-display)'],
+      body: ['var(--font-body)'],
+      mono: ['var(--font-mono)'],
     },
     extend: {
       animation: {

utils/theme.ts

@@ -1,3 +1,5 @@
+import { ThemeData } from 'types'
+
 export const breakpoints = {
   sm: 640,
   // => @media (min-width: 640px) { ... }
@@ -17,3 +19,34 @@ export const breakpoints = {
   '3xl': 1792,
   // => @media (min-width: 1536px) { ... }
 }
+
+type NftThemeMeta = {
+  [key: string]: ThemeData
+}
+
+export const nftThemeMeta: NftThemeMeta = {
+  default: {
+    buttonStyle: 'flat',
+    logoPath: '/logos/logo-mark.svg',
+    platformName: 'Mango',
+    rainAnimationImagePath: '',
+    sideImagePath: '',
+    sideTilePath: '',
+    topTilePath: '',
+    tvChartTheme: 'Dark',
+    tvImagePath: '',
+    useGradientBg: false,
+  },
+  Bonk: {
+    buttonStyle: 'raised',
+    logoPath: '/images/themes/bonk/bonk-logo.png',
+    platformName: 'Bongo',
+    rainAnimationImagePath: '/images/themes/bonk/bonk-animation-logo.png',
+    sideImagePath: '/images/themes/bonk/sidenav-image.png',
+    sideTilePath: '/images/themes/bonk/bonk-tile.png',
+    topTilePath: '/images/themes/bonk/bonk-tile.png',
+    tvChartTheme: 'Light',
+    tvImagePath: '/images/themes/bonk/tv-chart-image.png',
+    useGradientBg: true,
+  },
+}