Skip to content

Commit

Permalink
fix: no more tables, grid is king
Browse files Browse the repository at this point in the history
  • Loading branch information
@vacekj
vacekj committed Dec 8, 2024
1 parent 863c725 commit 5d6ddd9
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 74 deletions.
110 changes: 53 additions & 57 deletions src/pages/trade/ui/route-book.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,47 +9,45 @@ import { Skeleton } from '@/shared/ui/skeleton';

const SkeletonRow = (props: { isSpread: boolean }) =>
props.isSpread ? (
<tr>
<td colSpan={4} className='border-y border-l-other-solidStroke'>
<div className='flex items-center justify-center gap-2 px-3 py-3 text-xs'>
<div className='w-[78px] h-[16px]'>
<Skeleton />
</div>
<div className='w-[54px] h-[16px]'>
<Skeleton />
</div>
<div className='w-[69px] h-[16px]'>
<Skeleton />
</div>
<div className='w-[39px] h-[16px]'>
<Skeleton />
</div>
<div className='border-y border-l-other-solidStroke'>
<div className='flex items-center justify-center gap-2 px-3 py-3 text-xs'>
<div className='w-[78px] h-[16px]'>
<Skeleton />
</div>
<div className='w-[54px] h-[16px]'>
<Skeleton />
</div>
</td>
</tr>
<div className='w-[69px] h-[16px]'>
<Skeleton />
</div>
<div className='w-[39px] h-[16px]'>
<Skeleton />
</div>
</div>
</div>
) : (
<tr className={`group relative h-[33px] border-b border-b-other-tonalStroke`}>
<td className='pl-4'>
<div className='group relative h-[33px] border-b border-b-other-tonalStroke grid grid-cols-[1fr_1fr_1fr_1fr] items-center'>
<div className='pl-4'>
<div className='w-[56px] h-[16px]'>
<Skeleton />
</div>
</td>
<td className='relative text-xs text-right pl-4'>
</div>
<div className='relative text-xs text-right pl-4'>
<div className='w-[56px] h-[16px] ml-auto'>
<Skeleton />
</div>
</td>
<td className='relative text-xs text-right pl-4'>
</div>
<div className='relative text-xs text-right pl-4'>
<div className='w-[56px] h-[16px] ml-auto'>
<Skeleton />
</div>
</td>
<td className='relative text-xs text-right pl-4'>
</div>
<div className='relative text-xs text-right pl-4'>
<div className='w-[24px] h-[16px] ml-auto'>
<Skeleton />
</div>
</td>
</tr>
</div>
</div>
);

const RouteBookData = observer(({ bookData }: { bookData?: RouteBookResponse }) => {
Expand All @@ -60,21 +58,21 @@ const RouteBookData = observer(({ bookData }: { bookData?: RouteBookResponse })
const buyRelativeSizes = calculateRelativeSizes(multiHops?.buy ?? []);

return (
<table className='w-full'>
<thead>
<tr className='text-xs text-gray-400'>
<th className='pl-4 py-2 font-normal text-left w-[1%] whitespace-nowrap'>
Price({pair.quoteSymbol})
</th>
<th className='py-2 font-normal text-right w-[1%] whitespace-nowrap'>
Amount({pair.baseSymbol})
</th>
<th className='py-2 font-normal text-right w-[1%] whitespace-nowrap'>Total</th>
<th className='py-2 font-normal text-right w-[1%] whitespace-nowrap'>Route</th>
</tr>
</thead>

<tbody className='relative'>
<div className='w-full'>
{/* Header */}
<div className='grid grid-cols-[1fr_1fr_1fr_1fr] h-[33px] mt-1 text-xs text-gray-400 px-4'>
<div className='py-2 font-normal text-left'>
Price({pair.quoteSymbol})
</div>
<div className='py-2 font-normal text-right'>
Amount({pair.baseSymbol})
</div>
<div className='py-2 font-normal text-right'>Total</div>
<div className='py-2 font-normal text-right'>Route</div>
</div>

{/* Body */}
<div className='relative'>
{multiHops ? (
<>
{multiHops.sell.map((trace, idx) => (
Expand Down Expand Up @@ -102,8 +100,8 @@ const RouteBookData = observer(({ bookData }: { bookData?: RouteBookResponse })
.fill(1)
.map((_, i) => <SkeletonRow isSpread={i === 8} key={i} />)
)}
</tbody>
</table>
</div>
</div>
);
});

Expand Down Expand Up @@ -138,22 +136,20 @@ const SpreadRow = ({ sellOrders, buyOrders }: { sellOrders: Trace[]; buyOrders:
const pair = usePathSymbols();

if (!spreadInfo) {
return;
return null;
}

return (
<tr>
<td colSpan={4} className='border-y border-y-other-solidStroke'>
<div className='flex items-center justify-center gap-2 px-3 py-3 text-xs'>
<span className='text-green-400'>{formatPrice(spreadInfo.midPrice)}</span>
<span className='text-gray-400'>Spread:</span>
<span className='text-white'>
{formatNumber(spreadInfo.amount)} {pair.quoteSymbol}
</span>
<span className='text-gray-400'>({parseFloat(spreadInfo.percentage).toFixed(2)}%)</span>
</div>
</td>
</tr>
<div className='border-b border-y-other-solidStroke'>
<div className='flex items-center justify-center gap-2 px-3 py-3 text-xs'>
<span className='text-green-400'>{formatPrice(spreadInfo.midPrice)}</span>
<span className='text-gray-400'>Spread:</span>
<span className='text-white'>
{formatNumber(spreadInfo.amount)} {pair.quoteSymbol}
</span>
<span className='text-gray-400'>({parseFloat(spreadInfo.percentage).toFixed(2)}%)</span>
</div>
</div>
);
};

Expand Down
2 changes: 1 addition & 1 deletion src/pages/trade/ui/route-tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const RouteTabs = () => {
const [tab, setTab] = useState<RouteTabsType>(RouteTabsType.Book);

return (
<div ref={parent} className='flex flex-col gap-2 h-full'>
<div ref={parent} className='flex flex-col h-full'>
<div className='flex justify-between gap-2 px-4 lg:pt-2 border-b border-b-other-solidStroke'>
<Density medium>
<Tabs
Expand Down
31 changes: 15 additions & 16 deletions src/pages/trade/ui/trade-row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Trace } from '@/shared/api/server/book/types.ts';
import { getSymbolFromValueView } from '@penumbra-zone/getters/value-view';
import React from 'react';
import { ChevronRight } from 'lucide-react';
import { Text } from '@penumbra-zone/ui/Text';

Check failure on line 5 in src/pages/trade/ui/trade-row.tsx

View workflow job for this annotation

GitHub Actions / Lint 

'Text' is declared but its value is never read.

function formatPrice(price: string): string {
const num = parseFloat(price);
Expand Down Expand Up @@ -34,28 +35,27 @@ export const TradeRow = ({
const bgColor = isSell ? SELL_BG_COLOR : 'rgba(28, 121, 63, 0.24)';

return (
<tr
className='h-[33px] border-b border-border-faded group text-[12px]'
<div
className='px-4 group relative h-[33px] border-b border-border-faded text-xs grid grid-cols-[1fr_1fr_1fr_1fr] items-center'
style={{
backgroundImage: `linear-gradient(to right, ${bgColor} ${relativeSize}%, transparent ${relativeSize}%)`,
}}
>
<td className={`${isSell ? 'text-red-400' : 'text-green-400'} px-4`}>
<div className={`${isSell ? 'text-red-400' : 'text-green-400'}`}>
{formatPrice(trace.price)}
</td>
<td className='text-right text-white '>{formatNumber(trace.amount)}</td>
<td className='text-right text-white'>{formatNumber(trace.total)}</td>
<td className='text-right'>
</div>
<div className='text-right text-white'>{formatNumber(trace.amount)}</div>
<div className='text-right text-white'>{formatNumber(trace.total)}</div>
<div className='text-right'>
<HopCount count={trace.hops.length} />
</td>
</div>

{/* Overlay row that appears on hover */}
{/* eslint-disable-next-line react/no-unknown-property -- JSX style is valid in nextjs */}
{/* Overlay that appears on hover */}
<style jsx>{`
tr:hover td {
.group:hover > div:not(:last-child) {
visibility: hidden;
}
tr:hover::after {
.group:hover::after {
content: '';
position: absolute;
left: 0;
Expand All @@ -66,14 +66,13 @@ export const TradeRow = ({
`}</style>

{/* Route display that shows on hover */}
<td
<div
className='hidden group-hover:flex justify-center absolute left-0 right-0 px-4 select-none z-30'
colSpan={4}
style={{ visibility: 'visible' }}
>
<RouteDisplay tokens={trace.hops.map(valueView => getSymbolFromValueView(valueView))} />
</td>
</tr>
</div>
</div>
);
};

Expand Down

0 comments on commit 5d6ddd9

Please sign in to comment.