use tab component orderbook and trade form
This commit is contained in:
parent
611399b2f5
commit
f62955bf76
|
@ -3,10 +3,11 @@ import { FunctionComponent } from 'react'
|
|||
|
||||
interface TabButtonsProps {
|
||||
activeValue: string
|
||||
onChange: (x: string) => void
|
||||
onChange: (x: any) => void
|
||||
values: Array<any>
|
||||
showBorders?: boolean
|
||||
rounded?: boolean
|
||||
fillWidth?: boolean
|
||||
}
|
||||
|
||||
const TabButtons: FunctionComponent<TabButtonsProps> = ({
|
||||
|
@ -15,6 +16,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
|
|||
onChange,
|
||||
showBorders = false,
|
||||
rounded = false,
|
||||
fillWidth = false,
|
||||
}) => {
|
||||
const { t } = useTranslation(['common', 'swap'])
|
||||
|
||||
|
@ -25,9 +27,9 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
|
|||
}`}
|
||||
>
|
||||
{values.map((v, i) => (
|
||||
<div key={v + i}>
|
||||
<div className={fillWidth ? 'flex-1' : ''} key={v + i}>
|
||||
<button
|
||||
className={`default-transition h-12 px-6 font-bold ${
|
||||
className={`default-transition h-12 w-full px-6 font-bold ${
|
||||
rounded ? 'rounded-md' : 'rounded-none'
|
||||
} ${showBorders ? 'border-r border-th-bkg-3' : ''} ${
|
||||
v === activeValue
|
||||
|
|
|
@ -5,6 +5,7 @@ import {
|
|||
} from '@blockworks-foundation/mango-v4'
|
||||
import Checkbox from '@components/forms/Checkbox'
|
||||
import Button from '@components/shared/Button'
|
||||
import TabButtons from '@components/shared/TabButtons'
|
||||
import Tooltip from '@components/shared/Tooltip'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import Decimal from 'decimal.js'
|
||||
|
@ -136,28 +137,12 @@ const AdvancedTradeForm = () => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div className="grid select-none grid-cols-2 justify-between border-b border-th-bkg-3 text-base">
|
||||
<div
|
||||
onClick={() => setTradeType('Limit')}
|
||||
className={`flex h-12 items-center justify-center px-4 text-sm font-bold hover:cursor-pointer ${
|
||||
tradeForm.tradeType === 'Limit'
|
||||
? 'bg-th-bkg-2 text-th-primary'
|
||||
: 'text-th-fgd-4 hover:text-th-fgd-2'
|
||||
}`}
|
||||
>
|
||||
Limit
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setTradeType('Market')}
|
||||
className={`flex h-12 items-center justify-center px-4 text-sm font-bold hover:cursor-pointer ${
|
||||
tradeForm.tradeType === 'Market'
|
||||
? 'bg-th-bkg-2 text-th-primary'
|
||||
: 'text-th-fgd-4 hover:text-th-fgd-2'
|
||||
}`}
|
||||
>
|
||||
Market
|
||||
</div>
|
||||
</div>
|
||||
<TabButtons
|
||||
activeValue={tradeForm.tradeType}
|
||||
onChange={(tab: 'Limit' | 'Market') => setTradeType(tab)}
|
||||
values={['Limit', 'Market']}
|
||||
fillWidth
|
||||
/>
|
||||
<div className="mt-6 px-4">
|
||||
<div
|
||||
className={`relative mb-3 pb-1 md:-mt-2.5 md:border-b md:border-th-bkg-3`}
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import TabButtons from '@components/shared/TabButtons'
|
||||
import { useState } from 'react'
|
||||
import Orderbook from './Orderbook'
|
||||
import RecentTrades from './RecentTrades'
|
||||
|
@ -6,27 +7,13 @@ const OrderbookAndTrades = () => {
|
|||
const [activeTab, setActiveTab] = useState('book')
|
||||
return (
|
||||
<div className="hide-scroll h-full">
|
||||
<div className="grid h-[49px] select-none grid-cols-2 items-center justify-between border-b border-th-bkg-3 text-base">
|
||||
<div
|
||||
onClick={() => setActiveTab('book')}
|
||||
className={`flex h-12 items-center justify-center px-4 text-sm font-bold hover:cursor-pointer ${
|
||||
activeTab === 'book'
|
||||
? 'bg-th-bkg-2 text-th-primary'
|
||||
: 'text-th-fgd-4 hover:text-th-fgd-2'
|
||||
}`}
|
||||
>
|
||||
Book
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setActiveTab('trades')}
|
||||
className={`flex h-12 items-center justify-center px-4 text-sm font-bold hover:cursor-pointer ${
|
||||
activeTab === 'trades'
|
||||
? 'bg-th-bkg-2 text-th-primary'
|
||||
: 'text-th-fgd-4 hover:text-th-fgd-2'
|
||||
}`}
|
||||
>
|
||||
Trades
|
||||
</div>
|
||||
<div className="border-b border-r border-th-bkg-3">
|
||||
<TabButtons
|
||||
activeValue={activeTab}
|
||||
onChange={(tab: string) => setActiveTab(tab)}
|
||||
values={['book', 'trades']}
|
||||
fillWidth
|
||||
/>
|
||||
</div>
|
||||
<div className={`h-full ${activeTab === 'book' ? 'visible' : 'hidden'}`}>
|
||||
<Orderbook />
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
"available-balance": "Available Balance",
|
||||
"balance": "Balance",
|
||||
"balances": "Balances",
|
||||
"book": "Book",
|
||||
"borrow": "Borrow",
|
||||
"borrow-amount": "Borrow Amount",
|
||||
"borrow-fee": "Borrow Fee",
|
||||
|
@ -91,6 +92,7 @@
|
|||
"total-deposit-value": "Total Deposit Value",
|
||||
"total-interest-value": "Total Interest Value",
|
||||
"trade": "Trade",
|
||||
"trades": "Trades",
|
||||
"trade-history": "Trade History",
|
||||
"transaction": "Transaction",
|
||||
"unavailable": "Unavailable",
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
"available-balance": "Available Balance",
|
||||
"balance": "Balance",
|
||||
"balances": "Balances",
|
||||
"book": "Book",
|
||||
"borrow": "Borrow",
|
||||
"borrow-amount": "Borrow Amount",
|
||||
"borrow-fee": "Borrow Fee",
|
||||
|
@ -91,6 +92,7 @@
|
|||
"total-deposit-value": "Total Deposit Value",
|
||||
"total-interest-value": "Total Interest Value",
|
||||
"trade": "Trade",
|
||||
"trades": "Trades",
|
||||
"trade-history": "Trade History",
|
||||
"transaction": "Transaction",
|
||||
"unavailable": "Unavailable",
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
"available-balance": "Available Balance",
|
||||
"balance": "Balance",
|
||||
"balances": "Balances",
|
||||
"book": "Book",
|
||||
"borrow": "Borrow",
|
||||
"borrow-amount": "Borrow Amount",
|
||||
"borrow-fee": "Borrow Fee",
|
||||
|
@ -91,6 +92,7 @@
|
|||
"total-deposit-value": "Total Deposit Value",
|
||||
"total-interest-value": "Total Interest Value",
|
||||
"trade": "Trade",
|
||||
"trades": "Trades",
|
||||
"trade-history": "Trade History",
|
||||
"transaction": "Transaction",
|
||||
"unavailable": "Unavailable",
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
"available-balance": "Available Balance",
|
||||
"balance": "Balance",
|
||||
"balances": "Balances",
|
||||
"book": "Book",
|
||||
"borrow": "Borrow",
|
||||
"borrow-amount": "Borrow Amount",
|
||||
"borrow-fee": "Borrow Fee",
|
||||
|
@ -91,6 +92,7 @@
|
|||
"total-deposit-value": "Total Deposit Value",
|
||||
"total-interest-value": "Total Interest Value",
|
||||
"trade": "Trade",
|
||||
"trades": "Trades",
|
||||
"trade-history": "Trade History",
|
||||
"transaction": "Transaction",
|
||||
"unavailable": "Unavailable",
|
||||
|
|
Loading…
Reference in New Issue