blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

use themeData for vars

This commit is contained in:
saml33 2023-06-07 15:00:59 +10:00
parent a00caa6c8c
commit 9ffd337fe0
12 changed files with 107 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/Layout.tsx
View File

@ -24,14 +24,13 @@ 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
const Layout = ({ children }: { children: ReactNode }) => {
const { connected } = useWallet()
const { theme } = useTheme()
const themeData = mangoStore((s) => s.themeData)
const loadingMangoAccount = mangoStore((s) => s.mangoAccount.initialLoad)
const [isCollapsed, setIsCollapsed] = useLocalStorageState(
SIDEBAR_COLLAPSE_KEY,
@ -87,7 +86,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
) : null}
<div
className={`min-h-screen flex-grow ${
theme !== 'Bonk'
!themeData.useGradientBg
? 'bg-th-bkg-1'
: 'bg-gradient-to-b from-th-bkg-1 to-th-bkg-2'
} text-th-fgd-2 transition-all`}

57
components/SideNav.tsx
View File

@ -34,10 +34,10 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
const { t } = useTranslation(['common', 'search'])
const { connected } = useWallet()
const group = mangoStore.getState().group
const themeData = mangoStore((s) => s.themeData)
const { mangoAccount } = useMangoAccount()
const router = useRouter()
const { pathname } = router
const { theme } = useTheme()
const playAnimation = () => {
const set = mangoStore.getState().set
@ -50,17 +50,14 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
<div
className={`transition-all duration-300 ${
collapsed ? 'w-[64px]' : 'w-[200px]'
} border-r border-th-bkg-3 ${
theme === 'Bonk'
? `bg-th-bkg-1 bg-[url('/images/themes/bonk/bonk-tile.png')] bg-repeat`
: 'bg-th-bkg-1'
}`}
} border-r border-th-bkg-3 bg-th-bkg-1 bg-repeat`}
style={{ backgroundImage: `url(${themeData.sideTilePath})` }}
>
{theme === 'Bonk' && !collapsed ? (
{themeData.sideImagePath && !collapsed ? (
<img
className={`absolute bottom-16 h-auto w-full flex-shrink-0`}
onClick={() => playAnimation()}
src="/images/themes/bonk/sidenav-image.png"
src={themeData.sideImagePath}
alt="next"
/>
) : null}
@ -70,24 +67,16 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
<div
className={`items-center transition-all duration-300 ease-in-out ${
collapsed ? '' : 'justify-start'
} pb-1 ${theme === 'Bonk' ? 'pl-3' : 'pl-4'}`}
} pb-1 pl-3`}
>
<div
className={`flex h-16 flex-shrink-0 cursor-pointer items-center bg-th-bkg-1`}
>
{theme !== 'Bonk' ? (
<img
className={`h-8 w-8 flex-shrink-0`}
src="/logos/logo-mark.svg"
alt="next"
/>
) : (
<img
className={`h-10 w-10 flex-shrink-0`}
src="/images/themes/bonk/bonk-logo.png"
alt="next"
/>
)}
<img
className={`h-9 w-9 flex-shrink-0`}
src={themeData.logoPath}
alt="logo"
/>
<Transition
show={!collapsed}
as={Fragment}
@ -98,12 +87,8 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<span
className={`${
theme !== 'Bonk' ? 'ml-3' : 'ml-2'
} font-display text-lg text-th-fgd-1`}
>
{theme !== 'Bonk' ? 'Mango' : 'Bongo'}
<span className={`ml-3 font-display text-lg text-th-fgd-1`}>
{themeData.platformName}
</span>
</Transition>
</div>
@ -309,11 +294,7 @@ const MenuItem = ({
hideIconBg
? ''
: `flex h-8 w-8 items-center justify-center rounded-full ${
theme === 'Light'
? 'bg-th-bkg-2'
: theme === 'Bonk'
? 'bg-th-button'
: 'bg-th-bkg-3'
theme === 'Light' ? 'bg-th-bkg-2' : 'bg-th-bkg-3'
}`
}
>
@ -375,11 +356,7 @@ export const ExpandableMenuItem = ({
hideIconBg
? ''
: `flex h-8 w-8 items-center justify-center rounded-full ${
theme === 'Light'
? 'bg-th-bkg-2'
: theme === 'Bonk'
? 'bg-th-button'
: 'bg-th-bkg-3'
theme === 'Light' ? 'bg-th-bkg-2' : 'bg-th-bkg-3'
}`
} ${
alignBottom
@ -427,9 +404,7 @@ export const ExpandableMenuItem = ({
className={
hideIconBg
? ''
: `flex h-8 w-8 items-center justify-center rounded-full ${
theme === 'Bonk' ? 'bg-th-button' : 'bg-th-bkg-3'
}`
: 'flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3'
}
>
{icon}

29
components/TopBar.tsx
View File

@ -30,12 +30,13 @@ import useUnownedAccount from 'hooks/useUnownedAccount'
import NotificationsButton from './notifications/NotificationsButton'
import Tooltip from './shared/Tooltip'
import { copyToClipboard } from 'utils'
import { useTheme } from 'next-themes'
import mangoStore from '@store/mangoStore'
const TopBar = () => {
const { t } = useTranslation('common')
const { mangoAccount } = useMangoAccount()
const { connected } = useWallet()
const themeData = mangoStore((s) => s.themeData)
const [isOnboarded, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
const [action, setAction] = useState<'deposit' | 'withdraw'>('deposit')
const [showUserSetup, setShowUserSetup] = useState(false)
@ -49,7 +50,6 @@ const TopBar = () => {
const { width } = useViewport()
const isMobile = width ? width < breakpoints.sm : false
const { isUnownedAccount } = useUnownedAccount()
const { theme } = useTheme()
const handleCloseSetup = useCallback(() => {
setShowUserSetup(false)
@ -80,11 +80,8 @@ const TopBar = () => {
return (
<div
className={`flex h-16 items-center justify-between border-b border-th-bkg-3 ${
theme === 'Bonk'
? `bg-th-bkg-1 bg-[url('/images/themes/bonk/bonk-tile.png')]`
: 'bg-th-bkg-1'
}`}
className={`flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1`}
style={{ backgroundImage: `url(${themeData.topTilePath})` }}
>
<div className="flex w-full items-center justify-between md:space-x-4">
<span className="mb-0 flex items-center">
@ -101,19 +98,11 @@ const TopBar = () => {
<SolanaTps />
</div>
) : null}
{theme !== 'Bonk' ? (
<img
className="mr-4 h-8 w-8 flex-shrink-0 md:hidden"
src="/logos/logo-mark.svg"
alt="next"
/>
) : (
<img
className="mr-4 h-10 w-10 flex-shrink-0 md:hidden"
src="/images/themes/bonk/bonk-logo.png"
alt="next"
/>
)}
<img
className="mr-4 h-9 w-9 flex-shrink-0 md:hidden"
src={themeData.logoPath}
alt="logo"
/>
{!connected ? (
mangoAccount ? (
<span className="hidden items-center md:flex md:pl-6">

30
components/settings/DisplaySettings.tsx
View File

@ -22,8 +22,9 @@ import {
TRADE_CHART_UI_KEY,
TRADE_LAYOUT_KEY,
} from 'utils/constants'
import mangoStore from '@store/mangoStore'
import mangoStore, { DEFAULT_THEME_DATA } from '@store/mangoStore'
import { useWallet } from '@solana/wallet-adapter-react'
import { ThemeData } from 'types'
const NOTIFICATION_POSITIONS = [
'bottom-left',
@ -61,6 +62,19 @@ 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: '',
useGradientBg: true,
}
const DisplaySettings = () => {
const { t } = useTranslation(['common', 'settings'])
const { theme, setTheme } = useTheme()
@ -96,6 +110,20 @@ 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?
console.log(nfts)

6
components/shared/Button.tsx
View File

@ -1,3 +1,4 @@
import mangoStore from '@store/mangoStore'
import { useTheme } from 'next-themes'
import { forwardRef, FunctionComponent, ReactNode, Ref } from 'react'
@ -27,13 +28,14 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
...props
}) => {
const { theme } = useTheme()
const themeData = mangoStore((s) => s.themeData)
return (
<button
onClick={onClick}
disabled={disabled}
className={`rounded-md ${
theme === 'Bonk'
? 'bonk-button'
themeData.buttonStyle === 'raised'
? 'raised-button'
: secondary
? 'border border-th-button focus-visible:border-th-fgd-4 md:hover:border-th-button-hover'
: 'bg-th-button focus-visible:border focus-visible:border-th-fgd-4 md:hover:bg-th-button-hover'

5
components/shared/SuccessParticles.tsx
View File

@ -14,6 +14,7 @@ const SuccessParticles = () => {
const showForTheme = mangoStore((s) => s.successAnimation.theme)
const showForTrade = mangoStore((s) => s.successAnimation.trade)
const tradeType = mangoStore((s) => s.tradeForm.tradeType)
const themeData = mangoStore((s) => s.themeData)
const set = mangoStore((s) => s.set)
const [animationSettings] = useLocalStorageState(
ANIMATION_SETTINGS_KEY,
@ -45,9 +46,7 @@ const SuccessParticles = () => {
}
}
if (showForTheme) {
return theme === 'Bonk'
? '/images/themes/bonk/bonk-animation-logo.png'
: null
return themeData.rainAnimationImagePath
}
}, [mangoTokens, showForSwap, showForTheme, showForTrade, theme])

6
components/trade/AdvancedMarketHeader.tsx
View File

@ -18,7 +18,6 @@ import useMangoGroup from 'hooks/useMangoGroup'
import OraclePrice from './OraclePrice'
import SpotMarketDetailsModal from '@components/modals/SpotMarketDetailsModal'
import { useQuery } from '@tanstack/react-query'
import { useTheme } from 'next-themes'
type TickerData = {
base_currency: string
@ -51,7 +50,6 @@ const AdvancedMarketHeader = ({
setShowChart?: (x: boolean) => void
}) => {
const { t } = useTranslation(['common', 'trade'])
const { theme } = useTheme()
const perpStats = mangoStore((s) => s.perpStats.data)
const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
const {
@ -137,9 +135,7 @@ const AdvancedMarketHeader = ({
return (
<>
<div
className={`flex flex-col md:h-12 md:flex-row md:items-center ${
theme === 'Bonk' ? 'bg-th-bkg-2' : 'bg-th-bkg-1'
}`}
className={`flex flex-col bg-th-bkg-1 md:h-12 md:flex-row md:items-center`}
>
<div className="w-full pl-4 md:w-auto md:py-0 md:pl-6 lg:pb-0">
<MarketSelectDropdown />

9
components/trade/AdvancedTradeForm.tsx
View File

@ -56,7 +56,6 @@ import { useWallet } from '@solana/wallet-adapter-react'
import { useEnhancedWallet } from '@components/wallet/EnhancedWalletProvider'
import { isMangoError } from 'types'
import InlineNotification from '@components/shared/InlineNotification'
import { useTheme } from 'next-themes'
const set = mangoStore.getState().set
@ -81,6 +80,7 @@ const AdvancedTradeForm = () => {
const { t } = useTranslation(['common', 'trade'])
const { mangoAccount } = useMangoAccount()
const tradeForm = mangoStore((s) => s.tradeForm)
const themeData = mangoStore((s) => s.themeData)
const [placingOrder, setPlacingOrder] = useState(false)
const [tradeFormSizeUi] = useLocalStorageState(SIZE_INPUT_UI_KEY, 'slider')
const [savedCheckboxSettings, setSavedCheckboxSettings] =
@ -101,7 +101,6 @@ const AdvancedTradeForm = () => {
quoteSymbol,
serumOrPerpMarket,
} = useSelectedMarket()
const { theme } = useTheme()
const setTradeType = useCallback((tradeType: 'Limit' | 'Market') => {
set((s) => {
@ -712,12 +711,12 @@ const AdvancedTradeForm = () => {
? ''
: tradeForm.side === 'buy'
? `bg-th-up-dark md:hover:bg-th-up-dark ${
theme === 'Bonk'
? 'bonk-buy-button'
themeData.buttonStyle === 'raised'
? 'raised-buy-button'
: 'text-white md:hover:brightness-90'
}`
: `bg-th-down-dark text-white ${
theme === 'Bonk'
themeData.buttonStyle === 'raised'
? ''
: 'md:hover:bg-th-down-dark md:hover:brightness-90'
}`

8
components/trade/TradingViewChart.tsx
View File

@ -83,6 +83,7 @@ const TradingViewChart = () => {
showOrderLinesLocalStorage
)
const tradeExecutions = mangoStore((s) => s.tradingView.tradeExecutions)
const themeData = mangoStore((s) => s.themeData)
const { data: combinedTradeHistory, isLoading: loadingTradeHistory } =
useTradeHistory()
const [showTradeExecutions, toggleShowTradeExecutions] = useState(false)
@ -576,12 +577,9 @@ const TradingViewChart = () => {
autosize: defaultProps.autosize,
studies_overrides: defaultProps.studiesOverrides,
theme:
theme === 'Light' ||
theme === 'Banana' ||
theme === 'Lychee' ||
theme === 'Bonk'
theme === 'Light' || theme === 'Banana' || theme === 'Lychee'
? 'Light'
: 'Dark',
: themeData.tvChartTheme,
custom_css_url: '/styles/tradingview.css',
loading_screen: {
backgroundColor: COLORS.BKG1[theme],

17
store/mangoStore.ts
View File

@ -58,17 +58,30 @@ import {
TourSettings,
ProfileDetails,
MangoTokenStatsItem,
ThemeData,
} from 'types'
import spotBalancesUpdater from './spotBalancesUpdater'
import { PerpMarket } from '@blockworks-foundation/mango-v4/'
import perpPositionsUpdater from './perpPositionsUpdater'
import { DEFAULT_PRIORITY_FEE } from '@components/settings/RpcSettings'
import {
EntityId,
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,
}
const GROUP = new PublicKey('78b8f4cGCwmZ9ysPFMWLaLTkkaYnUjwMJYStWe5RTSSX')
const ENDPOINTS = [
@ -209,6 +222,7 @@ export type MangoStore = {
amountOut: string
}
set: (x: (x: MangoStore) => void) => void
themeData: ThemeData
tokenStats: {
initialLoad: boolean
loading: boolean
@ -364,6 +378,7 @@ const mangoStore = create<MangoStore>()(
amountIn: '',
amountOut: '',
},
themeData: DEFAULT_THEME_DATA,
tokenStats: {
initialLoad: false,
loading: true,

16
styles/globals.css
View File

@ -679,38 +679,38 @@ input[type='range']::-webkit-slider-runnable-track {
@apply absolute h-screen w-full;
}
/* bonk button */
/* raised button */
.bonk-button {
.raised-button {
@apply relative flex items-center justify-center bg-th-button text-th-fgd-1 transition-none;
box-shadow: 0 6px var(--button-hover);
}
.bonk-button:hover {
.raised-button:hover {
background-color: var(--button);
box-shadow: 0 4px var(--button-hover);
top: 2px;
}
.bonk-button:active {
.raised-button:active {
box-shadow: 0 0 var(--button-hover);
top: 6px;
}
/* bonk buy button */
/* raised buy button */
.bonk-buy-button {
.raised-buy-button {
@apply relative flex items-center justify-center bg-th-up text-th-active transition-none;
box-shadow: 0 6px var(--up-dark);
}
.bonk-buy-button:hover {
.raised-buy-button:hover {
background-color: var(--up) !important;
box-shadow: 0 4px var(--up-dark);
top: 2px;
}
.bonk-buy-button:active {
.raised-buy-button:active {
box-shadow: 0 0 var(--up-dark);
top: 6px;
}

13
types/index.ts
View File

@ -360,6 +360,19 @@ export interface TradeForm {
reduceOnly: boolean
}
export interface ThemeData {
buttonStyle: 'flat' | 'raised'
logoPath: string
platformName: string
rainAnimationImagePath: string
sideImagePath: string
sideTilePath: string
topTilePath: string
tvChartTheme: 'Light' | 'Dark'
tvImagePath: string
useGradientBg: boolean
}
export interface MangoError extends Error {
txid: string
}