diff --git a/components/Layout.tsx b/components/Layout.tsx index cef9d66d..21653440 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -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 }) => { ) : null} -
+
diff --git a/components/MangoAccountsList.tsx b/components/MangoAccountsList.tsx index f3ce584d..e96b8efa 100644 --- a/components/MangoAccountsList.tsx +++ b/components/MangoAccountsList.tsx @@ -79,7 +79,7 @@ const MangoAccountsList = ({ leaveFrom="opacity-100" leaveTo="opacity-0" > - + {loading ? ( ) : mangoAccounts.length ? ( @@ -87,7 +87,7 @@ const MangoAccountsList = ({

{title}

{description}

diff --git a/components/SideNav.tsx b/components/SideNav.tsx index 8f5e5ac5..b6ebc118 100644 --- a/components/SideNav.tsx +++ b/components/SideNav.tsx @@ -42,7 +42,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => { return (
@@ -50,7 +50,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
@@ -323,26 +323,16 @@ export const ExpandableMenuItem = ({ {icon}
- - - {children} - - + {children} +
) : ( diff --git a/components/account/AccountTabs.tsx b/components/account/AccountTabs.tsx index 8573e0a5..270122f2 100644 --- a/components/account/AccountTabs.tsx +++ b/components/account/AccountTabs.tsx @@ -1,16 +1,20 @@ -import { useEffect, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import mangoStore from '@store/mangoStore' import TabButtons from '../shared/TabButtons' import TokenList from '../TokenList' import SwapHistoryTable from '../swap/SwapHistoryTable' -import { useRouter } from 'next/router' import ActivityFeed from './ActivityFeed' +const TABS = ['balances', 'activity:activity', 'swap:swap-history'] + const AccountTabs = () => { const [activeTab, setActiveTab] = useState('balances') const actions = mangoStore((s) => s.actions) const mangoAccount = mangoStore((s) => s.mangoAccount.current) - const { pathname } = useRouter() + + const tabsWithCount: [string, number][] = useMemo(() => { + return TABS.map((t) => [t, 0]) + }, []) useEffect(() => { if (mangoAccount) { @@ -23,7 +27,7 @@ const AccountTabs = () => { setActiveTab(v)} - values={['balances', 'activity:activity', 'swap:swap-history']} + values={tabsWithCount} showBorders /> diff --git a/components/mobile/BottomBar.tsx b/components/mobile/BottomBar.tsx index 930dc182..69fcb964 100644 --- a/components/mobile/BottomBar.tsx +++ b/components/mobile/BottomBar.tsx @@ -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`} > - - {t('trade')} + + {t('swap')} - + - - {t('stats')} + + {t('trade')}
setShowPanel(false)} hideBg> - +
setShowPanel(false)} > + } + /> { 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 ? ( - {open ? : icon} + {open ? : icon}
@@ -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`} > - + ) : null} {title} diff --git a/components/shared/Notification.tsx b/components/shared/Notification.tsx index 2b23a1f5..e5833f4c 100644 --- a/components/shared/Notification.tsx +++ b/components/shared/Notification.tsx @@ -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}

{description ? ( -

+

{description}

) : null} diff --git a/components/shared/TabButtons.tsx b/components/shared/TabButtons.tsx index 2a0cd8b5..137bb190 100644 --- a/components/shared/TabButtons.tsx +++ b/components/shared/TabButtons.tsx @@ -4,7 +4,7 @@ import { FunctionComponent } from 'react' interface TabButtonsProps { activeValue: string onChange: (x: any) => void - values: Array + values: [string, number][] showBorders?: boolean rounded?: boolean fillWidth?: boolean @@ -26,20 +26,29 @@ const TabButtons: FunctionComponent = ({ showBorders ? 'border-b border-th-bkg-3' : '' }`} > - {values.map((v, i) => ( -
+ {values.map(([label, count], i) => ( +
))} diff --git a/components/shared/Transitions.tsx b/components/shared/Transitions.tsx index ffb3428c..5fc1940a 100644 --- a/components/shared/Transitions.tsx +++ b/components/shared/Transitions.tsx @@ -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, diff --git a/components/swap/SwapForm.tsx b/components/swap/SwapForm.tsx index 70607aff..b5ac8975 100644 --- a/components/swap/SwapForm.tsx +++ b/components/swap/SwapForm.tsx @@ -287,7 +287,7 @@ const SwapForm = () => { /> ) : null}
-
+