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

move interest/funding to history tab and align secondary tab styles

This commit is contained in:
saml33 2022-06-20 14:29:32 +10:00
parent 21a0050e6c
commit 2261c93e23
7 changed files with 82 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/TabButtons.tsx Normal file
View File

@ -0,0 +1,44 @@
import * as MonoIcons from './icons'
import { QuestionMarkCircleIcon } from '@heroicons/react/outline'
import { useTranslation } from 'next-i18next'
const TabButtons = ({
tabs,
activeTab,
showSymbolIcon,
onClick,
}: {
tabs: Array<{ label: string; key: string }>
activeTab: string
showSymbolIcon?: boolean
onClick: (x) => void
}) => {
const { t } = useTranslation('common')
const renderSymbolIcon = (s) => {
const iconName = `${s.slice(0, 1)}${s.slice(1, 4).toLowerCase()}MonoIcon`
const SymbolIcon = MonoIcons[iconName] || QuestionMarkCircleIcon
return <SymbolIcon className="mr-1.5 h-3.5 w-auto" />
}
return (
<div className="flex flex-wrap">
{tabs.map((tab) => (
<div
className={`default-transition mb-2 mr-2 flex cursor-pointer items-center rounded-full px-3 py-2 font-bold leading-none ring-1 ring-inset ${
tab.key === activeTab
? `text-th-primary ring-th-primary`
: `text-th-fgd-4 ring-th-fgd-4 hover:text-th-fgd-3 hover:ring-th-fgd-3`
} ${showSymbolIcon ? 'uppercase' : ''}
`}
onClick={() => onClick(tab.key)}
role="button"
key={tab.key}
>
{showSymbolIcon ? renderSymbolIcon(tab.label) : null}
{t(tab.label.toLowerCase().replace(/\s/g, '-'))}
</div>
))}
</div>
)
}
export default TabButtons

2
components/Tabs.tsx
View File

@ -22,7 +22,7 @@ const Tabs: FunctionComponent<TabsProps> = ({
const { t } = useTranslation('common')
return (
<div className={`relative mb-6 border-b border-th-bkg-3`}>
<div className={`relative mb-6 border-b border-th-bkg-4`}>
<div
className={`default-transition absolute bottom-[-1px] left-0 h-0.5 bg-th-primary`}
style={{

51
components/account_page/AccountFunding.tsx
View File

@ -11,7 +11,6 @@ import {
} from '../TableElements'
import isEmpty from 'lodash/isEmpty'
import { useTranslation } from 'next-i18next'
import Select from '../Select'
import Pagination from '../Pagination'
import usePagination from '../../hooks/usePagination'
import { roundToDecimal } from '../../utils'
@ -25,6 +24,7 @@ dayjs.extend(utc)
import { exportDataToCSV } from '../../utils/export'
import Button from '../Button'
import { SaveIcon } from '@heroicons/react/outline'
import TabButtons from 'components/TabButtons'
const QUOTE_DECIMALS = 6
@ -305,44 +305,17 @@ const AccountFunding = () => {
<>
{!isEmpty(hourlyFunding) && !loadHourlyStats ? (
<>
<div className="flex w-full items-center justify-between pb-4 pt-6">
<h2>{t('history')}</h2>
<Select
value={selectedAsset}
onChange={(a) => setSelectedAsset(a)}
className="w-24 sm:hidden"
>
<div className="space-y-2">
{Object.keys(hourlyFunding).map((token: string) => (
<Select.Option
key={token}
value={token}
className={`default-transition relative flex w-full cursor-pointer rounded-md bg-th-bkg-1 px-3 py-3 hover:bg-th-bkg-3 focus:outline-none`}
>
<div className="flex w-full items-center justify-between">
{token}
</div>
</Select.Option>
))}
</div>
</Select>
<div className="hidden pb-4 sm:flex sm:pb-0">
{Object.keys(hourlyFunding).map((token: string) => (
<div
className={`default-transition ml-2 cursor-pointer rounded-md bg-th-bkg-3 px-2 py-1
${
selectedAsset === token
? `text-th-primary ring-1 ring-inset ring-th-primary`
: `text-th-fgd-1 opacity-50 hover:opacity-100`
}
`}
onClick={() => setSelectedAsset(token)}
key={token}
>
{token}-PERP
</div>
))}
</div>
<div className="pb-2 pt-6">
<h2 className="mb-4">{t('history')}</h2>
<TabButtons
activeTab={selectedAsset}
tabs={Object.keys(hourlyFunding).map((token: string) => ({
label: token,
key: token,
}))}
onClick={setSelectedAsset}
showSymbolIcon
/>
</div>
{selectedAsset && chartData.length > 0 ? (
<div className="flex w-full flex-col space-x-0 sm:flex-row sm:space-x-4">

30
components/account_page/AccountHistory.tsx
View File

@ -34,16 +34,20 @@ import Button from '../Button'
import { useViewport } from '../../hooks/useViewport'
import { breakpoints } from '.././TradePageGrid'
import MobileTableHeader from 'components/mobile/MobileTableHeader'
import AccountInterest from './AccountInterest'
import AccountFunding from './AccountFunding'
import TabButtons from 'components/TabButtons'
const historyViews = [
{ label: 'Trades', key: 'Trades' },
{ label: 'Deposits', key: 'Deposit' },
{ label: 'Withdrawals', key: 'Withdraw' },
{ label: 'Interest', key: 'Interest' },
{ label: 'Funding', key: 'Funding' },
{ label: 'Liquidations', key: 'Liquidation' },
]
export default function AccountHistory() {
const { t } = useTranslation('common')
const [view, setView] = useState('Trades')
const [history, setHistory] = useState(null)
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
@ -70,24 +74,8 @@ export default function AccountHistory() {
return (
<>
<div className="mb-4 flex rounded-md bg-th-bkg-3 px-3 py-2 md:mb-6 md:px-4">
{historyViews.map(({ label, key }, index) => (
<div
className={`py-1 text-xs font-bold md:px-2 md:text-sm ${
index > 0 ? 'ml-4 md:ml-2' : null
} default-transition cursor-pointer rounded-md
${
view === key
? `text-th-primary`
: `text-th-fgd-3 hover:text-th-fgd-1`
}
`}
onClick={() => setView(key)}
key={key as string}
>
{t(label.toLowerCase())}
</div>
))}
<div className="mb-2">
<TabButtons activeTab={view} tabs={historyViews} onClick={setView} />
</div>
<ViewContent view={view} history={history} />
</>
@ -102,6 +90,10 @@ const ViewContent = ({ view, history }) => {
return <HistoryTable history={history} view={view} />
case 'Withdraw':
return <HistoryTable history={history} view={view} />
case 'Interest':
return <AccountInterest />
case 'Funding':
return <AccountFunding />
case 'Liquidation':
return <LiquidationHistoryTable history={history} view={view} />
default:

50
components/account_page/AccountInterest.tsx
View File

@ -2,7 +2,6 @@ import { getTokenBySymbol } from '@blockworks-foundation/mango-client'
import { useEffect, useMemo, useState } from 'react'
import dayjs from 'dayjs'
import useMangoStore from '../../stores/useMangoStore'
import Select from '../Select'
import {
Table,
TableDateDisplay,
@ -29,6 +28,7 @@ dayjs.extend(utc)
import { exportDataToCSV } from '../../utils/export'
import { SaveIcon } from '@heroicons/react/outline'
import Button from '../Button'
import TabButtons from 'components/TabButtons'
interface InterestStats {
[key: string]: {
@ -437,44 +437,16 @@ const AccountInterest = () => {
<>
{!isEmpty(hourlyInterestStats) && !loadHourlyStats ? (
<>
<div className="flex w-full items-center justify-between pb-4 pt-8">
<h2>{t('history')}</h2>
<Select
value={selectedAsset}
onChange={(a) => setSelectedAsset(a)}
className="w-24 md:hidden"
>
<div className="space-y-2">
{Object.keys(hourlyInterestStats).map((token: string) => (
<Select.Option
key={token}
value={token}
className={`default-transition relative flex w-full cursor-pointer rounded-md bg-th-bkg-1 px-3 py-3 hover:bg-th-bkg-3 focus:outline-none`}
>
<div className="flex w-full items-center justify-between">
{token}
</div>
</Select.Option>
))}
</div>
</Select>
<div className="hidden pb-4 sm:pb-0 md:flex">
{Object.keys(hourlyInterestStats).map((token: string) => (
<div
className={`default-transition ml-2 cursor-pointer rounded-md bg-th-bkg-3 px-2 py-1
${
selectedAsset === token
? `text-th-primary ring-1 ring-inset ring-th-primary`
: `text-th-fgd-1 opacity-50 hover:opacity-100`
}
`}
onClick={() => setSelectedAsset(token)}
key={token}
>
{token}
</div>
))}
</div>
<div className="pb-2 pt-8">
<h2 className="mb-4">{t('history')}</h2>
<TabButtons
activeTab={selectedAsset}
tabs={Object.keys(hourlyInterestStats).map(
(token: string) => ({ label: token, key: token })
)}
onClick={setSelectedAsset}
showSymbolIcon
/>
</div>
{selectedAsset && chartData.length > 0 ? (
<div className="flex w-full flex-col space-x-0 sm:flex-row sm:space-x-4">

2
components/mobile/SwipeableTabs.tsx
View File

@ -148,7 +148,7 @@ function Tab({
} items-center justify-center font-bold focus:text-th-primary focus:outline-none ${
selected
? 'border-b-2 border-th-primary text-th-primary'
: 'border-b border-th-bkg-3 text-th-fgd-3'
: 'border-b border-th-bkg-4 text-th-fgd-3'
}`}
>
{t(title.toLowerCase().replace(/\s/g, '-'))}

15
pages/account.tsx
View File

@ -76,14 +76,7 @@ export async function getStaticProps({ locale }) {
}
}
const TABS = [
'Overview',
'Orders',
'History',
'Interest',
'Funding',
'Performance',
]
const TABS = ['Overview', 'Orders', 'History', 'Performance']
export default function Account() {
const { t } = useTranslation(['common', 'close-account', 'delegate'])
@ -470,7 +463,7 @@ export default function Account() {
onChange={handleChangeViewIndex}
items={TABS}
tabIndex={viewIndex}
width="w-24 sm:w-32"
width="w-40 sm:w-48"
/>
<Swipeable
index={viewIndex}
@ -579,10 +572,6 @@ const TabContent = ({ activeTab }) => {
return <AccountOrders />
case 'History':
return <AccountHistory />
case 'Interest':
return <AccountInterest />
case 'Funding':
return <AccountFunding />
case 'Performance':
return <AccountPerformancePerToken />
default: