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

general refinements

This commit is contained in:
tjs 2022-09-30 00:21:23 -04:00
parent fc933758dc
commit 32578711b2
20 changed files with 79 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Layout.tsx
View File

@ -35,7 +35,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
}, [width])
useEffect(() => {
const animationFrames = 5
const animationFrames = 15
for (let x = 1; x <= animationFrames; x++) {
setTimeout(() => {
@ -55,7 +55,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
<BounceLoader />
</div>
) : null}
<div className="flex-grow bg-th-bkg-1 text-th-fgd-1 transition-all">
<div className="flex-grow bg-th-bkg-1 text-th-fgd-2 transition-all">
<div className="flex">
<div className="fixed bottom-0 left-0 z-20 w-full md:hidden">
<BottomBar />

4
components/MangoAccountsList.tsx
View File

@ -76,7 +76,7 @@ const MangoAccountsList = ({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Popover.Panel className="absolute top-[13.5px] -right-5 z-10 mr-4 w-56 rounded-md rounded-t-none border border-th-bkg-3 bg-th-bkg-1 p-4">
<Popover.Panel className="absolute top-[13.5px] -right-5 z-10 mr-4 w-56 rounded-md rounded-t-none border border-th-bkg-2 bg-th-bkg-3 p-4 text-th-fgd-3">
{loading ? (
<Loading />
) : mangoAccounts.length ? (
@ -84,7 +84,7 @@ const MangoAccountsList = ({
<div key={acc.publicKey.toString()}>
<button
onClick={() => handleSelectMangoAccount(acc)}
className="mb-3 flex w-full items-center justify-between border-b border-th-bkg-3 pb-3"
className="mb-3 flex w-full items-center justify-between border-b border-th-bkg-4 pb-3 hover:text-th-fgd-1"
>
{acc.name}
{acc.publicKey.toString() ===

2
components/OnboardingTour.tsx
View File

@ -28,7 +28,7 @@ const OnboardingTour = () => {
onClick={handleClose}
className={`absolute right-4 top-4 z-50 text-th-bkg-3 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
>
<XMarkIcon className={`h-5 w-5`} />
<XMarkIcon className={`h-6 w-6`} />
</button>
<h3 className="text-th-bkg-1">{title}</h3>
<p className="text-sm text-th-bkg-1">{description}</p>

32
components/SideNav.tsx
View File

@ -42,7 +42,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
return (
<div
className={`transition-all duration-500 ${
className={`transition-all duration-300 ${
collapsed ? 'w-[64px]' : 'w-44 lg:w-48 xl:w-52'
} border-r border-th-bkg-3 bg-th-bkg-1`}
>
@ -50,7 +50,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
<div className="my-2">
<Link href={'/'} shallow={true} passHref>
<div
className={`h-14 items-center transition-all duration-500 ease-in-out ${
className={`h-14 items-center transition-all duration-300 ease-in-out ${
collapsed ? '' : 'justify-start'
} pb-1 pt-2 pl-4`}
>
@ -323,26 +323,16 @@ export const ExpandableMenuItem = ({
{icon}
</div>
</Popover.Button>
<Transition
show={showMenu}
as={Fragment}
enter="transition ease-in duration-300"
enterFrom="opacity-0 scale-90"
enterTo="opacity-100 scale-100"
leave="transition ease-out duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
<Popover.Panel
className={`absolute z-20 w-56 rounded-md rounded-l-none border border-th-bkg-3 bg-th-bkg-1 py-2 ${
alignBottom
? 'bottom-0 left-[63px] rounded-b-none border-b-0 p-0'
: 'top-1/2 left-[63px] -translate-y-1/2'
}`}
>
<Popover.Panel
className={`absolute z-20 w-56 rounded-md rounded-l-none border border-th-bkg-3 bg-th-bkg-1 py-2 ${
alignBottom
? 'bottom-0 left-[63px] rounded-b-none border-b-0 p-0'
: 'top-1/2 left-[63px] -translate-y-1/2'
}`}
>
{children}
</Popover.Panel>
</Transition>
{children}
</Popover.Panel>
</div>
</Popover>
) : (

24
components/mobile/BottomBar.tsx
View File

@ -12,6 +12,7 @@ import {
ChevronRightIcon,
CurrencyDollarIcon as FeesIcon,
LightBulbIcon,
ArrowsRightLeftIcon,
} from '@heroicons/react/20/solid'
const StyledBarItemLabel = ({
@ -58,18 +59,18 @@ const BottomBar = () => {
asPath === '/swap' ? 'text-th-primary' : 'text-th-fgd-3'
} col-span-1 flex cursor-pointer flex-col items-center`}
>
<TradeIcon className="mb-1 h-4 w-4" />
<StyledBarItemLabel>{t('trade')}</StyledBarItemLabel>
<ArrowsRightLeftIcon className="mb-1 h-4 w-4" />
<StyledBarItemLabel>{t('swap')}</StyledBarItemLabel>
</a>
</Link>
<Link href="/stats" shallow={true}>
<Link href="/trade" shallow={true}>
<a
className={`${
asPath === '/stats' ? 'text-th-primary' : 'text-th-fgd-3'
asPath === '/trade' ? 'text-th-primary' : 'text-th-fgd-3'
} col-span-1 flex cursor-pointer flex-col items-center`}
>
<ChartBarIcon className="mb-1 h-4 w-4" />
<StyledBarItemLabel>{t('stats')}</StyledBarItemLabel>
<TradeIcon className="mb-1 h-4 w-4" />
<StyledBarItemLabel>{t('trade')}</StyledBarItemLabel>
</a>
</Link>
<a
@ -99,19 +100,24 @@ const MoreMenuPanel = ({
const { t } = useTranslation('common')
return (
<div
className={`fixed bottom-0 z-30 h-96 w-full overflow-hidden bg-th-bkg-2 px-4 transition duration-500 ease-in-out ${
className={`fixed bottom-0 z-30 h-96 w-full overflow-hidden rounded-t-3xl bg-th-bkg-2 px-4 transition duration-300 ease-in-out ${
showPanel ? 'translate-y-0' : 'translate-y-full'
}`}
>
<div className="flex justify-end py-4">
<IconButton onClick={() => setShowPanel(false)} hideBg>
<XMarkIcon className="h-5 w-5" />
<XMarkIcon className="h-6 w-6" />
</IconButton>
</div>
<div
className="border-b border-th-bkg-4"
onClick={() => setShowPanel(false)}
>
<MoreMenuItem
title={t('stats')}
path="/stats"
icon={<ChartBarIcon className="h-5 w-5" />}
/>
<MoreMenuItem
title={t('fees')}
path="/fees"
@ -140,7 +146,7 @@ const MoreMenuItem = ({
isExternal?: boolean
}) => {
const classNames =
'default-transition flex w-full items-center justify-between border-t border-th-bkg-4 px-2 py-3 text-th-fgd-2 hover:text-th-fgd-1'
'default-transition flex w-full items-center justify-between border-t border-th-bkg-4 px-2 py-4 text-th-fgd-2 hover:text-th-fgd-1'
return isExternal ? (
<a
className={classNames}

6
components/shared/IconDropMenu.tsx
View File

@ -49,15 +49,15 @@ const IconDropMenu = ({
}`}
disabled={disabled}
>
{open ? <XMarkIcon className="h-5 w-5" /> : icon}
{open ? <XMarkIcon className="h-6 w-6" /> : icon}
</Popover.Button>
<Transition
appear={true}
show={open}
as={Fragment}
enter="transition ease-in duration-100"
enterFrom="opacity-0 scale-90"
enterTo="opacity-100 scale-100"
enterFrom="scale-90"
enterTo="scale-100"
leave="transition ease-out duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"

4
components/shared/Modal.tsx
View File

@ -26,7 +26,7 @@ function Modal({
>
<div className="min-h-screen px-4 text-center">
<Dialog.Overlay
className={`fixed inset-0 bg-black opacity-50 ${
className={`fixed inset-0 backdrop-blur-sm ${
disableOutsideClose ? 'pointer-events-none' : ''
}`}
/>
@ -39,7 +39,7 @@ function Modal({
onClick={onClose}
className={`absolute right-4 top-4 z-50 text-th-fgd-4 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
>
<XMarkIcon className={`h-5 w-5`} />
<XMarkIcon className={`h-6 w-6`} />
</button>
) : null}
<Dialog.Title>{title}</Dialog.Title>

8
components/shared/Notification.tsx
View File

@ -106,8 +106,10 @@ const Notification = ({ notification }: { notification: Notification }) => {
hideNotification()
}
},
parsedTitle || type === 'confirm' || type === 'error'
parsedTitle || type === 'confirm'
? CLIENT_TX_TIMEOUT
: type === 'error'
? 30000
: 8000
)
@ -151,7 +153,9 @@ const Notification = ({ notification }: { notification: Notification }) => {
{parsedTitle || title}
</p>
{description ? (
<p className={`mb-0 mt-0.5 leading-tight text-th-fgd-3`}>
<p
className={`mb-0 mt-0.5 break-all text-sm leading-tight text-th-fgd-3`}
>
{description}
</p>
) : null}

13
components/shared/TabButtons.tsx
View File

@ -29,7 +29,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
{values.map(([label, count], i) => (
<div className={fillWidth ? 'flex-1' : ''} key={label + i}>
<button
className={`default-transition h-12 w-full px-6 font-bold ${
className={`default-transition flex h-12 w-full items-center justify-center px-6 font-bold ${
rounded ? 'rounded-md' : 'rounded-none'
} ${showBorders ? 'border-r border-th-bkg-3' : ''} ${
label === activeValue
@ -39,7 +39,16 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
key={`${label}${i}`}
onClick={() => onChange(label)}
>
{t(label)} {count ? ` (${count})` : null}
<span className="">{t(label)} </span>
{count ? (
<div
className={`ml-1.5 rounded ${
label === activeValue ? 'bg-th-bkg-4' : 'bg-th-bkg-3'
} px-1.5 font-mono text-xxs`}
>
{count}
</div>
) : null}
</button>
</div>
))}

4
components/shared/Transitions.tsx
View File

@ -1,8 +1,8 @@
import { Transition } from '@headlessui/react'
import { CSSProperties, ReactNode } from 'react'
const transitionEnterStyle = 'transition-all ease-in duration-300'
const transitionExitStyle = 'transition-all ease-out duration-300'
const transitionEnterStyle = 'transition-all ease-out duration-500'
const transitionExitStyle = 'transition-all ease-in duration-300'
export const EnterRightExitLeft = ({
children,

2
components/swap/SwapForm.tsx
View File

@ -287,7 +287,7 @@ const SwapForm = () => {
/>
) : null}
</div>
<div className="flex justify-center">
<div className="-mb-2 flex justify-center">
<button
className="rounded-full border border-th-bkg-4 p-1.5 text-th-fgd-3 md:hover:text-th-primary"
onClick={handleSwitchTokens}

27
components/swap/SwapFormTokenList.tsx
View File

@ -106,19 +106,19 @@ const SwapFormTokenList = ({
const [search, setSearch] = useState('')
const tokens = mangoStore.getState().jupiterTokens
const walletTokens = mangoStore((s) => s.wallet.tokens)
const jupiterTokens = mangoStore((s) => s.jupiterTokens)
// const jupiterTokens = mangoStore((s) => s.jupiterTokens)
const inputBank = mangoStore((s) => s.swap.inputBank)
const outputBank = mangoStore((s) => s.swap.outputBank)
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
const group = mangoStore((s) => s.group)
const popularTokens = useMemo(() => {
return tokens.filter((token) => {
return !token?.name || !token?.symbol
? false
: popularTokenSymbols.includes(token.symbol)
})
}, [tokens])
// const popularTokens = useMemo(() => {
// return tokens.filter((token) => {
// return !token?.name || !token?.symbol
// ? false
// : popularTokenSymbols.includes(token.symbol)
// })
// }, [tokens])
useEffect(() => {
function onEscape(e: any) {
@ -170,11 +170,12 @@ const SwapFormTokenList = ({
}
}, [tokens, walletTokens, inputBank, outputBank, mangoAccount, group])
const handleUpdateSearch = (e: ChangeEvent<HTMLInputElement>) => {
setSearch(e.target.value)
}
// const handleUpdateSearch = (e: ChangeEvent<HTMLInputElement>) => {
// setSearch(e.target.value)
// }
const sortedTokens = search ? startSearch(tokenInfos, search) : tokenInfos
// const sortedTokens = search ? startSearch(tokenInfos, search) : tokenInfos
const sortedTokens = tokenInfos
return (
<>
@ -184,7 +185,7 @@ const SwapFormTokenList = ({
: `${t('swap')} ${t('swap:to')}`}
</p>
<IconButton className="absolute top-2 right-2" onClick={onClose} hideBg>
<XMarkIcon className="h-5 w-5" />
<XMarkIcon className="h-6 w-6" />
</IconButton>
{/* No need for search/popular tokens until we have more tokens */}

2
components/swap/SwapSettings.tsx
View File

@ -34,7 +34,7 @@ const SwapSettings = ({ onClose }: { onClose: () => void }) => {
<>
<h3 className="mb-3">{t('settings')}</h3>
<IconButton className="absolute top-2 right-2" onClick={onClose} hideBg>
<XMarkIcon className="h-5 w-5" />
<XMarkIcon className="h-6 w-6" />
</IconButton>
<div className="mt-4">

4
components/trade/AdvancedMarketHeader.tsx
View File

@ -52,7 +52,7 @@ const MarketSelectDropdown = () => {
<div className="relative flex flex-col overflow-visible">
<Popover.Button className="default-transition flex w-full items-center justify-between hover:text-th-primary">
<MarketLogos baseURI={baseLogoURI} quoteURI={quoteLogoURI} />
<div className="text-xl font-bold md:text-base">
<div className="text-xl font-bold text-th-fgd-1 md:text-base">
{selectedMarket?.name || DEFAULT_MARKET_NAME}
</div>
<ChevronDownIcon
@ -122,7 +122,7 @@ const OraclePrice = () => {
)
return (
<div className="font-mono text-xs text-th-fgd-1">
<div className="font-mono text-xs text-th-fgd-2">
$
{baseTokenBank.uiPrice
? formatFixedDecimals(baseTokenBank.uiPrice)

2
components/trade/RecentTrades.tsx
View File

@ -96,7 +96,7 @@ const RecentTrades = () => {
<div className={`text-right text-th-fgd-2`}>
{formattedSize.toFixed()}
</div>
<div className={`text-right text-th-fgd-4`}>
<div className={`text-right tracking-tighter text-th-fgd-4`}>
{trade.time && new Date(trade.time).toLocaleTimeString()}
</div>
</div>

1
components/trade/TradingViewChart.tsx
View File

@ -138,6 +138,7 @@ const TradingViewChart = () => {
'header_interval_dialog_button',
'show_interval_dialog_on_key_press',
'header_symbol_search',
'popup_hints',
],
fullscreen: defaultProps.fullscreen,
autosize: defaultProps.autosize,

2
styles/colors.ts
View File

@ -1,6 +1,6 @@
export const COLORS: any = {
BKG1: { Mango: '#18181C', Dark: '#17171B', Light: '#FDFDFD' },
GREEN: { Mango: '#AFD803', Dark: '#5EBF4d', Light: '#5EBF4d' },
GREEN: { Mango: '#A6CD03', Dark: '#5EBF4d', Light: '#5EBF4d' },
PRIMARY: { Mango: '#F2C94C', Dark: '#F2C94C', Light: '#FF9C24' },
RED: { Mango: '#F84638', Dark: '#CC2929', Light: '#CC2929' },
}

3
styles/globals.css
View File

@ -266,13 +266,12 @@ table th {
}
table p {
@apply font-mono text-sm tracking-tight text-th-fgd-1;
@apply font-mono text-sm tracking-tight text-th-fgd-2;
}
/* Scrollbars */
.font-mono {
@apply tracking-tight;
-webkit-font-feature-settings: 'zero' 1;
font-feature-settings: 'zero' 1;
}

2
tailwind.config.js
View File

@ -64,7 +64,7 @@ module.exports = {
dark: '#E4AF11',
},
red: { DEFAULT: '#F84638', dark: '#C7251A', muted: '#6d2832' },
green: { DEFAULT: '#AFD803', dark: '#91B503', muted: '#49601b' },
green: { DEFAULT: '#A6CD03', dark: '#84A21C', muted: '#49601b' },
orange: { DEFAULT: '#FF9C24' },
'bkg-1': '#1C1924', // '#141026',
'bkg-2': '#252232', // '#1D1832',

2
utils/constants.ts
View File

@ -1,6 +1,6 @@
export const LAST_ACCOUNT_KEY = 'mangoAccount-0.1'
export const CLIENT_TX_TIMEOUT = 60000
export const CLIENT_TX_TIMEOUT = 90000
export const INPUT_TOKEN_DEFAULT = 'USDC'