Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: routebook visual updates #187

Merged
merged 6 commits into from
Dec 10, 2024
Merged

fix: routebook visual updates #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
03e9068
fix: padding in route book
vacekj Dec 5, 2024
794cec1
refactor: update skeleton loading rows and format price/number functi…
vacekj Dec 5, 2024
863c725
feat: almost there
vacekj Dec 8, 2024
5d6ddd9
fix: no more tables, grid is king
vacekj Dec 8, 2024
e9869d9
fix: lints
vacekj Dec 9, 2024
1468d4f
fix: lints
vacekj Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 78 additions & 52 deletions src/pages/trade/ui/route-book.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,49 @@ import { RouteBookResponse, Trace } from '@/shared/api/server/book/types';
import { usePathSymbols } from '@/pages/trade/model/use-path.ts';
import { calculateSpread } from '@/pages/trade/model/trace.ts';
import { TradeRow } from '@/pages/trade/ui/trade-row.tsx';
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-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>

<div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>

<div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>

<div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></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>
<div className='w-[69px] h-[16px]'>
<Skeleton />
</div>
<div className='w-[39px] h-[16px]'>
<Skeleton />
</div>
</td>
</tr>
</div>
</div>
) : (
<tr className={`group relative h-[33px] border-b border-b-other-tonalStroke`}>
<td>
<div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>
</td>
<td className='relative text-xs text-right text-white'>
<div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>
</td>
<td className='relative text-xs text-right text-white'>
<div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>
</td>
<td className='relative text-xs text-right'>
<div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>
</td>
</tr>
<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>
</div>
<div className='relative text-xs text-right pl-4'>
<div className='w-[56px] h-[16px] ml-auto'>
<Skeleton />
</div>
</div>
<div className='relative text-xs text-right pl-4'>
<div className='w-[56px] h-[16px] ml-auto'>
<Skeleton />
</div>
</div>
<div className='relative text-xs text-right pl-4'>
<div className='w-[24px] h-[16px] ml-auto'>
<Skeleton />
</div>
</div>
</div>
);

const RouteBookData = observer(({ bookData }: { bookData?: RouteBookResponse }) => {
Expand All @@ -46,17 +58,17 @@ 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='py-2 font-normal text-left'>Price({pair.quoteSymbol})</th>
<th className='py-2 font-normal text-right'>Amount({pair.baseSymbol})</th>
<th className='py-2 font-normal text-right'>Total</th>
<th className='py-2 font-normal text-right'>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 @@ -84,8 +96,8 @@ const RouteBookData = observer(({ bookData }: { bookData?: RouteBookResponse })
.fill(1)
.map((_, i) => <SkeletonRow isSpread={i === 8} key={i} />)
)}
</tbody>
</table>
</div>
</div>
);
});

Expand All @@ -99,27 +111,41 @@ export const RouteBook = observer(() => {
return <RouteBookData bookData={data} />;
});

function formatPrice(price: string): string {
const num = parseFloat(price);
const [whole] = num.toString().split('.');
const totalDigits = 7;
const availableDecimals = Math.max(0, totalDigits - (whole?.length ?? 0));
return num.toFixed(availableDecimals);
}

function formatNumber(value: string): string {
const num = parseFloat(value);
const [whole] = num.toString().split('.');
const totalDigits = 6;
const availableDecimals = Math.max(0, totalDigits - (whole?.length ?? 0));
return num.toFixed(availableDecimals);
}

const SpreadRow = ({ sellOrders, buyOrders }: { sellOrders: Trace[]; buyOrders: Trace[] }) => {
const spreadInfo = calculateSpread(sellOrders, 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'>{parseFloat(spreadInfo.midPrice)}</span>
<span className='text-gray-400'>Spread:</span>
<span className='text-white'>
{parseFloat(spreadInfo.amount)} {pair.quoteSymbol}
</span>
<span className='text-gray-400'>({spreadInfo.percentage}%)</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
Open in desktop
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 overflow-hidden'>
<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
51 changes: 30 additions & 21 deletions src/pages/trade/ui/trade-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,22 @@ import { getSymbolFromValueView } from '@penumbra-zone/getters/value-view';
import React from 'react';
import { ChevronRight } from 'lucide-react';

function padPrice(price: string): string {
const [whole, decimal = ''] = price.split('.');
const maxDigits = 8; // Maximum decimals commonly used for crypto prices
const paddedDecimal = decimal.padEnd(maxDigits, '0');
return `${whole}.${paddedDecimal}`;
function formatPrice(price: string): string {
const num = parseFloat(price);
const parts = num.toString().split('.');
const whole = parts[0] ?? '0';
const totalDigits = 7;
const availableDecimals = Math.max(0, totalDigits - whole.length);
return num.toFixed(availableDecimals);
}

function formatNumber(value: string): string {
const num = parseFloat(value);
const parts = num.toString().split('.');
const whole = parts[0] ?? '0';
const totalDigits = 6;
const availableDecimals = Math.max(0, totalDigits - whole.length);
return num.toFixed(availableDecimals);
}

const SELL_BG_COLOR = 'rgba(175, 38, 38, 0.24)';
Expand All @@ -21,29 +32,28 @@ export const TradeRow = ({
relativeSize: number;
}) => {
const bgColor = isSell ? SELL_BG_COLOR : 'rgba(28, 121, 63, 0.24)';
const paddedPrice = padPrice(trace.price);

return (
<tr
className='h-[33px] border-b border-border-faded group'
<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'} text-xs`}>{paddedPrice}</td>
<td className='text-xs text-right text-white'>{trace.amount}</td>
<td className='text-xs text-right text-white'>{trace.total}</td>
<td className='text-xs text-right'>
<div className={isSell ? 'text-red-400' : 'text-green-400'}>{formatPrice(trace.price)}</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 */}
{/* eslint-disable-next-line react/no-unknown-property -- jsx is, in fact, a property */}
<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 @@ -54,14 +64,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