From ed31f3b747845025f34d95aac9009e91c70640cc Mon Sep 17 00:00:00 2001
From: Henry de Valence <hdevalence@penumbralabs.xyz>
Date: Mon, 9 Dec 2024 16:38:34 -0800
Subject: [PATCH 1/7] wip

---
 src/pages/inspect/ui/actions.tsx    |   6 +-
 src/pages/inspect/ui/executions.tsx | 166 +++++++++++++++++-----------
 2 files changed, 106 insertions(+), 66 deletions(-)

diff --git a/src/pages/inspect/ui/actions.tsx b/src/pages/inspect/ui/actions.tsx
index f58a5b49..20362ef6 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,
@@ -38,7 +38,7 @@ const PositionClosed = ({
   );
 };
 
-const PositionWithdraw = ({ withdrawal }: { withdrawal: PositionWithdrawal }) => {
+export const PositionWithdraw = ({ withdrawal }: { withdrawal: PositionWithdrawal }) => {
   return (
     <Card title='Position Withdraw'>
       <div className='flex justify-between items-center'>
@@ -61,7 +61,7 @@ const PositionWithdraw = ({ withdrawal }: { withdrawal: PositionWithdrawal }) =>
   );
 };
 
-const PositionOpen = ({ state }: { state: PositionStateResponse }) => {
+export const PositionOpen = ({ state }: { state: PositionStateResponse }) => {
   return (
     <Card title='Position Open'>
       <div className='flex justify-between items-center'>
diff --git a/src/pages/inspect/ui/executions.tsx b/src/pages/inspect/ui/executions.tsx
index ec6b97da..496fe263 100644
--- a/src/pages/inspect/ui/executions.tsx
+++ b/src/pages/inspect/ui/executions.tsx
@@ -10,13 +10,105 @@ 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 {
+  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 (
+    <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>
+  );
+};
+
+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) => (
@@ -25,66 +117,7 @@ const DataBody = ({ executions }: { executions: PositionExecutions }) => {
             <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>
+            <Execution execution={e} />
           </div>
         </div>
       ))}
@@ -100,6 +133,7 @@ const DataBody = ({ executions }: { executions: PositionExecutions }) => {
           </div>
         </div>
       )}
+      <PositionOpen state={state} />
     </div>
   );
 };
@@ -198,7 +232,13 @@ export const Executions = () => {
         Executions
       </Text>
       {isLoading && <LoadingState />}
-      {data && <DataBody executions={data.executions} />}
+      {data && (
+        <DataBody
+          state={data.state}
+          withdrawals={data.withdrawals}
+          executions={data.executions}
+        />
+      )}
     </div>
   );
 };

From 026b7260b91fb0d1a5dce15072ca3cec82b81a2a Mon Sep 17 00:00:00 2001
From: Henry de Valence <hdevalence@penumbralabs.xyz>
Date: Mon, 9 Dec 2024 16:50:49 -0800
Subject: [PATCH 2/7] wip

---
 src/pages/inspect/ui/actions.tsx    | 102 ++++++++++++---------
 src/pages/inspect/ui/executions.tsx | 136 ++++++++++++++--------------
 src/pages/inspect/ui/result.tsx     |   4 +-
 3 files changed, 129 insertions(+), 113 deletions(-)

diff --git a/src/pages/inspect/ui/actions.tsx b/src/pages/inspect/ui/actions.tsx
index 20362ef6..4d85c744 100644
--- a/src/pages/inspect/ui/actions.tsx
+++ b/src/pages/inspect/ui/actions.tsx
@@ -20,67 +20,81 @@ export 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'>
 
-        <div className='ml-4 flex-shrink-0'>
-          <TimeDisplay dateStr={closingTime} height={closingHeight} />
-        </div>
+        <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'>
+            </div>
+          </div>
+        </Card>
       </div>
-    </Card>
+      <div className='col-span-2'>
+        <TimeDisplay dateStr={closingTime} height={closingHeight} />
+      </div>
+    </div>
   );
 };
 
 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>
+    <div className='grid grid-cols-6 items-center mb-4'>
+      <div className='col-span-4'>
 
-          <Text color='text.secondary' truncate>
-            Tx: {withdrawal.txHash}
-          </Text>
-        </div>
+        <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>
-    </Card>
+      <div className='col-span-2'>
+        <TimeDisplay dateStr={withdrawal.time} height={withdrawal.height} />
+      </div>
+    </div>
   );
 };
 
 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 496fe263..306ea5da 100644
--- a/src/pages/inspect/ui/executions.tsx
+++ b/src/pages/inspect/ui/executions.tsx
@@ -22,66 +22,73 @@ interface ExecutionProps {
 
 const Execution = ({ execution: e }: ExecutionProps) => {
   return (
-    <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 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>
-          </div>
-        </div>
-      </Density>
-    </Card>
+          </Density>
+        </Card>
+      </div>
+    </div>
   );
 };
 
@@ -112,13 +119,8 @@ const DataBody = ({
         </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'>
-            <Execution execution={e} />
-          </div>
+        <div key={i}>
+          <Execution execution={e} />
         </div>
       ))}
       {executions.skipped > 0 && (
@@ -222,14 +224,14 @@ 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 && (
diff --git a/src/pages/inspect/ui/result.tsx b/src/pages/inspect/ui/result.tsx
index e495a70b..468a8536 100644
--- a/src/pages/inspect/ui/result.tsx
+++ b/src/pages/inspect/ui/result.tsx
@@ -7,7 +7,7 @@ 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>;
@@ -55,7 +55,7 @@ export const LpInspectResult = () => {
         {/* Second Column */}
         <div className='flex flex-col divide-y divide-other-solidStroke'>
           <div className='p-4 w-full'>
-            <Executions />
+            <Timeline />
           </div>
         </div>
       </div>

From 224ce82c8a9deb7209820c8e318da0006b4703c5 Mon Sep 17 00:00:00 2001
From: Henry de Valence <hdevalence@penumbralabs.xyz>
Date: Mon, 9 Dec 2024 16:59:42 -0800
Subject: [PATCH 3/7] wip layout

---
 src/pages/inspect/ui/result.tsx | 7 ++-----
 src/pages/inspect/ui/volume.tsx | 2 +-
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/pages/inspect/ui/result.tsx b/src/pages/inspect/ui/result.tsx
index 468a8536..774acd6b 100644
--- a/src/pages/inspect/ui/result.tsx
+++ b/src/pages/inspect/ui/result.tsx
@@ -40,10 +40,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 +52,7 @@ export const LpInspectResult = () => {
         {/* Second Column */}
         <div className='flex flex-col divide-y divide-other-solidStroke'>
           <div className='p-4 w-full'>
-            <Timeline />
+            <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>

From da03cf4043ff6dff104d6600e288e3498cb2a14c Mon Sep 17 00:00:00 2001
From: Henry de Valence <hdevalence@penumbralabs.xyz>
Date: Mon, 9 Dec 2024 16:59:51 -0800
Subject: [PATCH 4/7] fix wrong data

---
 src/shared/api/server/position/timeline/state.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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(

From c6f58315181827d62853b75a27285cf0fadae830 Mon Sep 17 00:00:00 2001
From: Henry de Valence <hdevalence@penumbralabs.xyz>
Date: Mon, 9 Dec 2024 18:19:18 -0800
Subject: [PATCH 5/7] lint fix

---
 src/pages/inspect/ui/result.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/inspect/ui/result.tsx b/src/pages/inspect/ui/result.tsx
index 774acd6b..3b8e2c04 100644
--- a/src/pages/inspect/ui/result.tsx
+++ b/src/pages/inspect/ui/result.tsx
@@ -5,7 +5,6 @@ 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 { Timeline } from '@/pages/inspect/ui/executions.tsx';
 

From bba5ba67799a99aafa5152d00421614213d5aab9 Mon Sep 17 00:00:00 2001
From: Henry de Valence <hdevalence@penumbralabs.xyz>
Date: Mon, 9 Dec 2024 18:22:32 -0800
Subject: [PATCH 6/7] lint fix

---
 src/pages/inspect/ui/executions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/inspect/ui/executions.tsx b/src/pages/inspect/ui/executions.tsx
index 306ea5da..08a4196b 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';
@@ -11,6 +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';
 import {
+  PositionExecutions,
   PositionStateResponse,
   PositionWithdrawal,
 } from '@/shared/api/server/position/timeline/types.ts';

From 4e2b8e1e03f5c4cffb9a384e539225d8eabc40f8 Mon Sep 17 00:00:00 2001
From: Henry de Valence <hdevalence@penumbralabs.xyz>
Date: Mon, 9 Dec 2024 18:27:56 -0800
Subject: [PATCH 7/7] fmt fix

---
 src/pages/inspect/ui/actions.tsx    |  5 +----
 src/pages/inspect/ui/executions.tsx | 14 +++-----------
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/src/pages/inspect/ui/actions.tsx b/src/pages/inspect/ui/actions.tsx
index 4d85c744..7831081f 100644
--- a/src/pages/inspect/ui/actions.tsx
+++ b/src/pages/inspect/ui/actions.tsx
@@ -22,7 +22,6 @@ export const PositionClosed = ({
   return (
     <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'>
@@ -33,8 +32,7 @@ export const PositionClosed = ({
               )}
             </div>
 
-            <div className='ml-4 flex-shrink-0'>
-            </div>
+            <div className='ml-4 flex-shrink-0'></div>
           </div>
         </Card>
       </div>
@@ -49,7 +47,6 @@ export const PositionWithdraw = ({ withdrawal }: { withdrawal: PositionWithdrawa
   return (
     <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'>
diff --git a/src/pages/inspect/ui/executions.tsx b/src/pages/inspect/ui/executions.tsx
index 08a4196b..d24ca5c2 100644
--- a/src/pages/inspect/ui/executions.tsx
+++ b/src/pages/inspect/ui/executions.tsx
@@ -47,11 +47,7 @@ const Execution = ({ execution: e }: ExecutionProps) => {
                   </Text>
                 </div>
                 <div className='flex flex-col items-start gap-1'>
-                  <ValueViewComponent
-                    valueView={e.fee}
-                    priority='secondary'
-                    abbreviate={false}
-                  />
+                  <ValueViewComponent valueView={e.fee} priority='secondary' abbreviate={false} />
                   <Text color='text.secondary' xxs>
                     LP Fee
                   </Text>
@@ -95,7 +91,7 @@ const Execution = ({ execution: e }: ExecutionProps) => {
 const DataBody = ({
   state,
   withdrawals,
-  executions
+  executions,
 }: {
   state: PositionStateResponse;
   withdrawals: PositionWithdrawal[];
@@ -235,11 +231,7 @@ export const Timeline = () => {
       </Text>
       {isLoading && <LoadingState />}
       {data && (
-        <DataBody
-          state={data.state}
-          withdrawals={data.withdrawals}
-          executions={data.executions}
-        />
+        <DataBody state={data.state} withdrawals={data.withdrawals} executions={data.executions} />
       )}
     </div>
   );