Skip to content

Commit

Permalink
LP inspect fixes (#194)
Browse files Browse the repository at this point in the history 
Fix data issues with LP inspect page and restore timeline layout.

The rendering still needs to restore the asset icons but this can be done later.
  • Loading branch information
@hdevalence
hdevalence authored Dec 10, 2024
1 parent f6c2e3c commit 9d51cfe
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 130 deletions.
107 changes: 59 additions & 48 deletions src/pages/inspect/ui/actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useLpIdInUrl } from '@/pages/inspect/ui/result.tsx';
import { useLpPosition } from '@/pages/inspect/lp/api/position.ts';
import { Skeleton } from '@/shared/ui/skeleton.tsx';

const PositionClosed = ({
export const PositionClosed = ({
closingTx,
closingTime,
closingHeight,
Expand All @@ -20,67 +20,78 @@ const PositionClosed = ({
closingTx?: string;
}) => {
return (
<Card title='Position Closed'>
<div className='flex justify-between items-center'>
<div className='flex flex-col gap-2 flex-shrink min-w-0'>
{closingTx && (
<Text color='text.secondary' truncate>
Tx: {closingTx}
</Text>
)}
</div>
<div className='grid grid-cols-6 items-center mb-4'>
<div className='col-span-4'>
<Card title='Position Closed'>
<div className='flex justify-between items-center'>
<div className='flex flex-col gap-2 flex-shrink min-w-0'>
{closingTx && (
<Text color='text.secondary' truncate>
Tx: {closingTx}
</Text>
)}
</div>

<div className='ml-4 flex-shrink-0'>
<TimeDisplay dateStr={closingTime} height={closingHeight} />
</div>
<div className='ml-4 flex-shrink-0'></div>
</div>
</Card>
</div>
<div className='col-span-2'>
<TimeDisplay dateStr={closingTime} height={closingHeight} />
</div>
</Card>
</div>
);
};

const PositionWithdraw = ({ withdrawal }: { withdrawal: PositionWithdrawal }) => {
export const PositionWithdraw = ({ withdrawal }: { withdrawal: PositionWithdrawal }) => {
return (
<Card title='Position Withdraw'>
<div className='flex justify-between items-center'>
<div className='flex flex-col gap-2 flex-shrink min-w-0'>
<div className='flex items-center gap-2'>
<ValueViewComponent valueView={withdrawal.reserves1} abbreviate={false} />
<ValueViewComponent valueView={withdrawal.reserves2} abbreviate={false} />
</div>

<Text color='text.secondary' truncate>
Tx: {withdrawal.txHash}
</Text>
</div>
<div className='grid grid-cols-6 items-center mb-4'>
<div className='col-span-4'>
<Card title='Position Withdraw'>
<div className='flex justify-between items-center'>
<div className='flex flex-col gap-2 flex-shrink min-w-0'>
<div className='flex items-center gap-2'>
<ValueViewComponent valueView={withdrawal.reserves1} abbreviate={false} />
<ValueViewComponent valueView={withdrawal.reserves2} abbreviate={false} />
</div>

<div className='ml-4 flex-shrink-0'>
<TimeDisplay dateStr={withdrawal.time} height={withdrawal.height} />
</div>
<Text color='text.secondary' truncate>
Tx: {withdrawal.txHash}
</Text>
</div>
</div>
</Card>
</div>
<div className='col-span-2'>
<TimeDisplay dateStr={withdrawal.time} height={withdrawal.height} />
</div>
</Card>
</div>
);
};

const PositionOpen = ({ state }: { state: PositionStateResponse }) => {
export const PositionOpen = ({ state }: { state: PositionStateResponse }) => {
return (
<Card title='Position Open'>
<div className='flex justify-between items-center'>
<div className='flex flex-col gap-2 flex-shrink min-w-0'>
<div className='flex items-center gap-2'>
<ValueViewComponent valueView={state.reserves1} abbreviate={false} />
<ValueViewComponent valueView={state.reserves2} abbreviate={false} />
</div>

<Text color='text.secondary' truncate>
Tx: {state.openingTx}
</Text>
</div>
<div className='grid grid-cols-6 items-center mb-4'>
<div className='col-span-4'>
<Card title='Position Open'>
<div className='flex justify-between items-center'>
<div className='flex flex-col gap-2 flex-shrink min-w-0'>
<div className='flex items-center gap-2'>
<ValueViewComponent valueView={state.reserves1} abbreviate={false} />
<ValueViewComponent valueView={state.reserves2} abbreviate={false} />
</div>

<div className='ml-4 flex-shrink-0'>
<TimeDisplay dateStr={state.openingTime} height={state.openingHeight} />
</div>
<Text color='text.secondary' truncate>
Tx: {state.openingTx}
</Text>
</div>
</div>
</Card>
</div>
<div className='col-span-2'>
<TimeDisplay dateStr={state.openingTime} height={state.openingHeight} />
</div>
</Card>
</div>
);
};

Expand Down
178 changes: 106 additions & 72 deletions src/pages/inspect/ui/executions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { PositionExecutions } from '@/shared/api/server/position/timeline/types.ts';
import { Text } from '@penumbra-zone/ui/Text';
import { Card } from '@penumbra-zone/ui/Card';
import { Density } from '@penumbra-zone/ui/Density';
Expand All @@ -10,82 +9,114 @@ import { TimeDisplay } from '@/pages/inspect/ui/time.tsx';
import { useLpIdInUrl } from '@/pages/inspect/ui/result.tsx';
import { useLpPosition } from '@/pages/inspect/lp/api/position.ts';
import { Skeleton } from '@/shared/ui/skeleton.tsx';
import {
PositionExecutions,
PositionStateResponse,
PositionWithdrawal,
} from '@/shared/api/server/position/timeline/types.ts';
import { PositionWithdraw, PositionClosed, PositionOpen } from '@/pages/inspect/ui/actions.tsx';

const DataBody = ({ executions }: { executions: PositionExecutions }) => {
interface ExecutionProps {
execution: PositionExecutions['items'][0];
}

const Execution = ({ execution: e }: ExecutionProps) => {
return (
<div className='grid grid-cols-6 items-center mb-4'>
<div className='col-span-2'>
<TimeDisplay dateStr={e.time} height={e.height} />
</div>
<div className='col-span-4'>
<Card>
<Density compact>
<div className='flex flex-col gap-2'>
<div className='flex items-end gap-2'>
<div className='flex flex-col items-start gap-1'>
<ValueViewComponent valueView={e.input} abbreviate={false} />
<Text color='text.secondary' xxs>
Trade Input
</Text>
</div>
<div className='flex items-center pb-5'>
<Icon IconComponent={ArrowRight} color='text.primary' size='sm' />
</div>
<div className='flex flex-col items-start gap-1'>
<ValueViewComponent valueView={e.output} abbreviate={false} />
<Text color='text.secondary' xxs>
Trade Output
</Text>
</div>
<div className='flex flex-col items-start gap-1'>
<ValueViewComponent valueView={e.fee} priority='secondary' abbreviate={false} />
<Text color='text.secondary' xxs>
LP Fee
</Text>
</div>
</div>
<div className='flex justify-between items-end gap-2'>
<div className='flex items-center gap-2'>
<Text color='text.secondary' small>
Routing
</Text>
<AssetIcon metadata={e.contextStart} />
<Icon IconComponent={ArrowRight} color='text.primary' size='sm' />
<AssetIcon metadata={e.contextEnd} />
</div>
<div className='flex flex-col items-end gap-1'>
<Text color='text.secondary' xxs>
New Reserves
</Text>
<div className='flex items-center gap-2'>
<ValueViewComponent
valueView={e.reserves1}
context='table'
abbreviate={false}
/>
<ValueViewComponent
valueView={e.reserves2}
context='table'
abbreviate={false}
/>
</div>
</div>
</div>
</div>
</Density>
</Card>
</div>
</div>
);
};

const DataBody = ({
state,
withdrawals,
executions,
}: {
state: PositionStateResponse;
withdrawals: PositionWithdrawal[];
executions: PositionExecutions;
}) => {
return (
<div>
{withdrawals.map((w, i) => (
<PositionWithdraw key={i} withdrawal={w} />
))}
{state.closingTime && state.closingHeight && (
<PositionClosed
closingHeight={state.closingHeight}
closingTime={state.closingTime}
closingTx={state.closingTx}
/>
)}
{executions.items.length === 0 && (
<Text detail color='text.secondary'>
None
No executions
</Text>
)}
{executions.items.map((e, i) => (
<div key={i} className='grid grid-cols-6 items-center mb-4'>
<div className='col-span-2'>
<TimeDisplay dateStr={e.time} height={e.height} />
</div>
<div className='col-span-4'>
<Card>
<Density compact>
<div className='flex flex-col gap-2'>
<div className='flex items-end gap-2'>
<div className='flex flex-col items-start gap-1'>
<ValueViewComponent valueView={e.input} abbreviate={false} />
<Text color='text.secondary' xxs>
Trade Input
</Text>
</div>
<div className='flex items-center pb-5'>
<Icon IconComponent={ArrowRight} color='text.primary' size='sm' />
</div>
<div className='flex flex-col items-start gap-1'>
<ValueViewComponent valueView={e.output} abbreviate={false} />
<Text color='text.secondary' xxs>
Trade Output
</Text>
</div>
<div className='flex flex-col items-start gap-1'>
<ValueViewComponent
valueView={e.fee}
priority='secondary'
abbreviate={false}
/>
<Text color='text.secondary' xxs>
LP Fee
</Text>
</div>
</div>
<div className='flex justify-between items-end gap-2'>
<div className='flex items-center gap-2'>
<Text color='text.secondary' small>
Routing
</Text>
<AssetIcon metadata={e.contextStart} />
<Icon IconComponent={ArrowRight} color='text.primary' size='sm' />
<AssetIcon metadata={e.contextEnd} />
</div>
<div className='flex flex-col items-end gap-1'>
<Text color='text.secondary' xxs>
New Reserves
</Text>
<div className='flex items-center gap-2'>
<ValueViewComponent
valueView={e.reserves1}
context='table'
abbreviate={false}
/>
<ValueViewComponent
valueView={e.reserves2}
context='table'
abbreviate={false}
/>
</div>
</div>
</div>
</div>
</Density>
</Card>
</div>
<div key={i}>
<Execution execution={e} />
</div>
))}
{executions.skipped > 0 && (
Expand All @@ -100,6 +131,7 @@ const DataBody = ({ executions }: { executions: PositionExecutions }) => {
</div>
</div>
)}
<PositionOpen state={state} />
</div>
);
};
Expand Down Expand Up @@ -188,17 +220,19 @@ const LoadingState = () => {
);
};

export const Executions = () => {
export const Timeline = () => {
const id = useLpIdInUrl();
const { data, isLoading } = useLpPosition(id);

return (
<div className='flex flex-col gap-2'>
<Text xxl color='base.white'>
Executions
Position Timeline
</Text>
{isLoading && <LoadingState />}
{data && <DataBody executions={data.executions} />}
{data && (
<DataBody state={data.state} withdrawals={data.withdrawals} executions={data.executions} />
)}
</div>
);
};
10 changes: 3 additions & 7 deletions src/pages/inspect/ui/result.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@ import { Text } from '@penumbra-zone/ui/Text';
import { useLpPosition } from '@/pages/inspect/lp/api/position.ts';
import { StateDetails } from '@/pages/inspect/ui/state-details.tsx';
import { VolumeAndFeesTable } from '@/pages/inspect/ui/volume.tsx';
import { Actions } from '@/pages/inspect/ui/actions.tsx';
import { DebugView } from '@/pages/inspect/ui/debug.tsx';
import { Executions } from '@/pages/inspect/ui/executions.tsx';
import { Timeline } from '@/pages/inspect/ui/executions.tsx';

const ErrorState = ({ error }: { error: unknown }) => {
return <Text color='destructive.main'>{String(error)}</Text>;
Expand Down Expand Up @@ -40,10 +39,7 @@ export const LpInspectResult = () => {
<StateDetails />
</div>
<div className='p-4 w-full'>
<VolumeAndFeesTable />
</div>
<div className='p-4 w-full'>
<Actions />
<Timeline />
</div>

{/* DebugView only on larger screens */}
Expand All @@ -55,7 +51,7 @@ export const LpInspectResult = () => {
{/* Second Column */}
<div className='flex flex-col divide-y divide-other-solidStroke'>
<div className='p-4 w-full'>
<Executions />
<VolumeAndFeesTable />
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/inspect/ui/volume.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ const DataBody = ({ v }: { v: VolumeAndFeesResponse }) => {
<Table.Tbody>
<Table.Tr>
<Table.Td hAlign='center'>
<Text color='text.secondary'>Total</Text>
<Text color='text.secondary'>Total (All Routes)</Text>
</Table.Td>
<Table.Td hAlign='center'>
<Text color='text.secondary'>{v.totals.executionCount}</Text>
Expand Down
Loading

0 comments on commit 9d51cfe

Please sign in to comment.