expand trading view component by reducing padding
This commit is contained in:
Tyler Shipe
parent
5d9b95e72b
commit
459c63daa2
|
|
@ -17,6 +17,7 @@ import { useState } from 'react'
|
|||
const FeeDiscountsTable = () => {
|
||||
const { t } = useTranslation('common')
|
||||
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
|
||||
const connected = useMangoStore((s) => s.wallet.connected)
|
||||
const walletTokens = useMangoStore((s) => s.wallet.tokens)
|
||||
const { totalSrm, totalMsrm, rates } = useSrmAccount()
|
||||
const [showDeposit, setShowDeposit] = useState(false)
|
||||
|
|
@ -78,7 +79,7 @@ const FeeDiscountsTable = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{mangoAccount ? (
|
||||
{connected && mangoAccount ? (
|
||||
<div className="flex justify-center mt-6">
|
||||
<Button
|
||||
onClick={() => setShowDeposit(true)}
|
||||
|
|
|
|||
|
|
@ -83,190 +83,211 @@ const TradeHistoryTable = ({ numTrades }: { numTrades?: number }) => {
|
|||
<div className={`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
|
||||
{tradeHistory && tradeHistory.length ? (
|
||||
!isMobile ? (
|
||||
<Table>
|
||||
<thead>
|
||||
<TrHead>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('market')}
|
||||
>
|
||||
{t('market')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'market'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('side')}
|
||||
>
|
||||
{t('side')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'side'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('size')}
|
||||
>
|
||||
{t('size')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'size'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('price')}
|
||||
>
|
||||
{t('price')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'price'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('value')}
|
||||
>
|
||||
{t('value')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'value'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('liquidity')}
|
||||
>
|
||||
{t('liquidity')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'liquidity'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('feeCost')}
|
||||
>
|
||||
{t('fee')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'feeCost'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('loadTimestamp')}
|
||||
>
|
||||
{t('approximate-time')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'loadTimestamp'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
{paginatedData.map((trade: any, index) => {
|
||||
return (
|
||||
<TrBody
|
||||
index={index}
|
||||
key={`${trade.seqNum}${trade.marketName}`}
|
||||
>
|
||||
<Td>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
alt=""
|
||||
width="20"
|
||||
height="20"
|
||||
src={`/assets/icons/${trade.marketName
|
||||
.split(/-|\//)[0]
|
||||
.toLowerCase()}.svg`}
|
||||
className={`mr-2.5`}
|
||||
/>
|
||||
{renderMarketName(trade)}
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<SideBadge side={trade.side} />
|
||||
</Td>
|
||||
<Td>{trade.size}</Td>
|
||||
<Td>
|
||||
${new Intl.NumberFormat('en-US').format(trade.price)}
|
||||
</Td>
|
||||
<Td>{formatUsdValue(trade.value)}</Td>
|
||||
<Td>{trade.liquidity}</Td>
|
||||
<Td>{formatUsdValue(trade.feeCost)}</Td>
|
||||
<Td>
|
||||
{trade.loadTimestamp || trade.timestamp
|
||||
? renderTradeDateTime(
|
||||
trade.loadTimestamp || trade.timestamp
|
||||
)
|
||||
: t('recent')}
|
||||
</Td>
|
||||
</TrBody>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
<>
|
||||
<Table>
|
||||
<thead>
|
||||
<TrHead>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('market')}
|
||||
>
|
||||
{t('market')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'market'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('side')}
|
||||
>
|
||||
{t('side')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'side'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('size')}
|
||||
>
|
||||
{t('size')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'size'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('price')}
|
||||
>
|
||||
{t('price')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'price'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('value')}
|
||||
>
|
||||
{t('value')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'value'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('liquidity')}
|
||||
>
|
||||
{t('liquidity')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'liquidity'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('feeCost')}
|
||||
>
|
||||
{t('fee')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'feeCost'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
<Th>
|
||||
<LinkButton
|
||||
className="flex items-center no-underline font-normal"
|
||||
onClick={() => requestSort('loadTimestamp')}
|
||||
>
|
||||
{t('approximate-time')}
|
||||
<ArrowSmDownIcon
|
||||
className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
|
||||
sortConfig?.key === 'loadTimestamp'
|
||||
? sortConfig.direction === 'ascending'
|
||||
? 'transform rotate-180'
|
||||
: 'transform rotate-360'
|
||||
: null
|
||||
}`}
|
||||
/>
|
||||
</LinkButton>
|
||||
</Th>
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
{paginatedData.map((trade: any, index) => {
|
||||
return (
|
||||
<TrBody
|
||||
index={index}
|
||||
key={`${trade.seqNum}${trade.marketName}`}
|
||||
>
|
||||
<Td>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
alt=""
|
||||
width="20"
|
||||
height="20"
|
||||
src={`/assets/icons/${trade.marketName
|
||||
.split(/-|\//)[0]
|
||||
.toLowerCase()}.svg`}
|
||||
className={`mr-2.5`}
|
||||
/>
|
||||
{renderMarketName(trade)}
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<SideBadge side={trade.side} />
|
||||
</Td>
|
||||
<Td>{trade.size}</Td>
|
||||
<Td>
|
||||
$
|
||||
{new Intl.NumberFormat('en-US').format(trade.price)}
|
||||
</Td>
|
||||
<Td>{formatUsdValue(trade.value)}</Td>
|
||||
<Td>{trade.liquidity}</Td>
|
||||
<Td>{formatUsdValue(trade.feeCost)}</Td>
|
||||
<Td>
|
||||
{trade.loadTimestamp || trade.timestamp
|
||||
? renderTradeDateTime(
|
||||
trade.loadTimestamp || trade.timestamp
|
||||
)
|
||||
: t('recent')}
|
||||
</Td>
|
||||
</TrBody>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
{numTrades && items.length > numTrades ? (
|
||||
<div className="flex items-center justify-center mt-4">
|
||||
<Link href="/account" shallow={true}>
|
||||
{t('view-all-trades')}
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-end">
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={totalPages}
|
||||
nextPage={nextPage}
|
||||
lastPage={lastPage}
|
||||
firstPage={firstPage}
|
||||
previousPage={previousPage}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
paginatedData.map((trade: any, index) => (
|
||||
<ExpandableRow
|
||||
|
|
@ -356,24 +377,6 @@ const TradeHistoryTable = ({ numTrades }: { numTrades?: number }) => {
|
|||
) : null}
|
||||
</div>
|
||||
)}
|
||||
{numTrades && items.length > numTrades ? (
|
||||
<div className="flex items-center justify-center mt-4">
|
||||
<Link href="/account" shallow={true}>
|
||||
{t('view-all-trades')}
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-end">
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={totalPages}
|
||||
nextPage={nextPage}
|
||||
lastPage={lastPage}
|
||||
firstPage={firstPage}
|
||||
previousPage={previousPage}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ const TradePageGrid = () => {
|
|||
useCSSTransforms={false}
|
||||
>
|
||||
<div key="tvChart">
|
||||
<FloatingElement className="h-full pl-0">
|
||||
<FloatingElement className="h-full pl-0 md:pl-0 md:pr-1 md:pb-1 md:pt-3">
|
||||
<TVChartContainer />
|
||||
</FloatingElement>
|
||||
</div>
|
||||
|
|
@ -154,7 +154,7 @@ const TradePageGrid = () => {
|
|||
</FloatingElement>
|
||||
</div>
|
||||
<div key="userInfo">
|
||||
<FloatingElement className="h-full" showConnect>
|
||||
<FloatingElement className="h-full">
|
||||
<UserInfo />
|
||||
</FloatingElement>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ const TVChartContainer = () => {
|
|||
const tvWidgetRef = useRef<IChartingLibraryWidget | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (tvWidgetRef.current) {
|
||||
if (tvWidgetRef.current instanceof widget && selectedMarketConfig.name) {
|
||||
tvWidgetRef.current.setSymbol(
|
||||
selectedMarketConfig.name,
|
||||
defaultProps.interval,
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@ const TabContent = ({ activeTab }) => {
|
|||
const UserInfo = () => {
|
||||
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
|
||||
const isPerpMarket = marketConfig.kind === 'perp'
|
||||
const connected = useMangoStore((s) => s.wallet.connected)
|
||||
const [activeTab, setActiveTab] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -82,7 +81,7 @@ const UserInfo = () => {
|
|||
}, [isPerpMarket])
|
||||
|
||||
return (
|
||||
<div className={!connected ? 'filter blur-sm' : null}>
|
||||
<div>
|
||||
<UserInfoTabs activeTab={activeTab} setActiveTab={setActiveTab} />
|
||||
<TabContent activeTab={activeTab} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@ html .group-wWM3zP_M {
|
|||
|
||||
.group-wWM3zP_M:last-child {
|
||||
border-bottom-right-radius: 50%;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* Spacer between header buttons */
|
||||
|
|
@ -86,6 +87,11 @@ html .group-wWM3zP_M {
|
|||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Tooltip bottom center */
|
||||
.container-2yI8A9Vu {
|
||||
display: none
|
||||
}
|
||||
|
||||
/* menu items category label */
|
||||
|
||||
html .summary-3_6tmh1R {
|
||||
|
|
|
|||
Loading…
Reference in New Issue