From 9d51cfe072786bcddfc3c5e1d43fa0a57241e7de Mon Sep 17 00:00:00 2001
From: Henry de Valence <hdevalence@hdevalence.ca>
Date: Mon, 9 Dec 2024 18:35:13 -0800
Subject: [PATCH] LP inspect fixes (#194)

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.
---
 src/pages/inspect/ui/actions.tsx              | 107 ++++++-----
 src/pages/inspect/ui/executions.tsx           | 178 +++++++++++-------
 src/pages/inspect/ui/result.tsx               |  10 +-
 src/pages/inspect/ui/volume.tsx               |   2 +-
 .../api/server/position/timeline/state.ts     |   4 +-
 5 files changed, 171 insertions(+), 130 deletions(-)

diff --git a/src/pages/inspect/ui/actions.tsx b/src/pages/inspect/ui/actions.tsx
index f58a5b49..7831081f 100644
--- a/src/pages/inspect/ui/actions.tsx
+++ b/src/pages/inspect/ui/actions.tsx
@@ -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,
@@ -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>
   );
 };
 
diff --git a/src/pages/inspect/ui/executions.tsx b/src/pages/inspect/ui/executions.tsx
index ec6b97da..d24ca5c2 100644
--- a/src/pages/inspect/ui/executions.tsx
+++ b/src/pages/inspect/ui/executions.tsx
@@ -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';
@@ -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 && (
@@ -100,6 +131,7 @@ const DataBody = ({ executions }: { executions: PositionExecutions }) => {
           </div>
         </div>
       )}
+      <PositionOpen state={state} />
     </div>
   );
 };
@@ -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>
   );
 };
diff --git a/src/pages/inspect/ui/result.tsx b/src/pages/inspect/ui/result.tsx
index e495a70b..3b8e2c04 100644
--- a/src/pages/inspect/ui/result.tsx
+++ b/src/pages/inspect/ui/result.tsx
@@ -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>;
@@ -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 */}
@@ -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>
diff --git a/src/pages/inspect/ui/volume.tsx b/src/pages/inspect/ui/volume.tsx
index 8b93b7b7..b1b6abac 100644
--- a/src/pages/inspect/ui/volume.tsx
+++ b/src/pages/inspect/ui/volume.tsx
@@ -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>
diff --git a/src/shared/api/server/position/timeline/state.ts b/src/shared/api/server/position/timeline/state.ts
index 2f79d6e4..208d66c4 100644
--- a/src/shared/api/server/position/timeline/state.ts
+++ b/src/shared/api/server/position/timeline/state.ts
@@ -48,14 +48,14 @@ export const getPositionState = async (id: PositionId): Promise<PositionStateRes
       registry,
       new Value({
         assetId: assetId1,
-        amount: pnum(result.state.reserves_1).toAmount(),
+        amount: pnum(result.latestReserves.reserves_1).toAmount(),
       }),
     ),
     reserves2: getValueView(
       registry,
       new Value({
         assetId: assetId2,
-        amount: pnum(result.state.reserves_2).toAmount(),
+        amount: pnum(result.latestReserves.reserves_2).toAmount(),
       }),
     ),
     unit1: getValueView(