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

LP inspect fixes #194

Merged
merged 7 commits into from
Dec 10, 2024
Merged

LP inspect fixes #194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ed31f3b
wip
hdevalence Dec 10, 2024
026b726
wip
hdevalence Dec 10, 2024
224ce82
wip layout
hdevalence Dec 10, 2024
da03cf4
fix wrong data
hdevalence Dec 10, 2024
c6f5831
lint fix
hdevalence Dec 10, 2024
bba5ba6
lint fix
hdevalence Dec 10, 2024
4e2b8e1
fmt fix
hdevalence 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
107 changes: 59 additions & 48 deletions src/pages/inspect/ui/actions.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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