feat(web): more ILP packet details in STREAM toy

justmoon · Sep 11, 2024 · 8164da5 · 8164da5
1 parent b37748c
commit 8164da5
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 4 deletions.
diff --git a/.../stream-packet-log/ilp-packet-details.tsx → ...stream-packet-log/ilp-prepare-details.tsx b/.../stream-packet-log/ilp-packet-details.tsx → ...stream-packet-log/ilp-prepare-details.tsx
@@ -1,4 +1,7 @@
-import type { IlpPreparePacket } from "@dassie/lib-protocol-ilp"
+import {
+  type IlpPreparePacket,
+  interledgerTimeToTimestamp,
+} from "@dassie/lib-protocol-ilp"
 
 interface IlpPacketDetailsProperties {
   packet: IlpPreparePacket
@@ -13,6 +16,12 @@ export default function IlpPacketDetails({
       <div>{String(packet.amount)}</div>
       <div className="text-muted-foreground">Destination</div>
       <div>{packet.destination}</div>
+      <div className="text-muted-foreground">Expiry</div>
+      <div>
+        {new Date(interledgerTimeToTimestamp(packet.expiresAt)).toISOString()}
+      </div>
+      <div className="text-muted-foreground">Data</div>
+      <div>{packet.data.length} bytes</div>
     </div>
   )
 }
diff --git a/...ite/src/components/stream-toy/stream-simulator/stream-packet-log/ilp-response-details.tsx b/...ite/src/components/stream-toy/stream-simulator/stream-packet-log/ilp-response-details.tsx
@@ -0,0 +1,24 @@
+import { type IlpResponsePacket, IlpType } from "@dassie/lib-protocol-ilp"
+
+interface IlpResponseDetailsProperties {
+  response: IlpResponsePacket
+}
+
+export default function IlpResponseDetails({
+  response,
+}: IlpResponseDetailsProperties) {
+  return (
+    <div className="grid grid-cols-subgrid col-span-2">
+      {response.type === IlpType.Reject && (
+        <>
+          <div className="text-muted-foreground">Message</div>
+          <div>{response.data.message}</div>
+          <div className="text-muted-foreground">Triggered By</div>
+          <div>{response.data.triggeredBy}</div>
+        </>
+      )}
+      <div className="text-muted-foreground">Data</div>
+      <div>{response.data.data.length} bytes</div>
+    </div>
+  )
+}
diff --git a/.../src/components/stream-toy/stream-simulator/stream-packet-log/stream-packet-log-entry.tsx b/.../src/components/stream-toy/stream-simulator/stream-packet-log/stream-packet-log-entry.tsx
@@ -12,7 +12,8 @@ import {
 import type { PskEnvironment } from "@dassie/lib-protocol-stream"
 
 import AmountTooLargeResponseDetails from "./amount-too-large-response-details"
-import IlpPacketDetails from "./ilp-packet-details"
+import IlpPrepareDetails from "./ilp-prepare-details"
+import IlpResponseDetails from "./ilp-response-details"
 import StreamPacketDetails from "./stream-packet-details"
 import { useParsedStreamPacket } from "./use-parsed-stream-packet"
 
@@ -98,8 +99,16 @@ export default function StreamPacketLogEntry({
         )}
       >
         <div className="grid grid-cols-[auto_auto_1fr] gap-3 px-3 py-2 border-t border-slate-700">
-          <div className="">ILP</div>
-          <IlpPacketDetails packet={packet} />
+          <div className="">ILP Prepare</div>
+          <IlpPrepareDetails packet={packet} />
+          {response && (
+            <>
+              <div className="">
+                ILP {response.type === IlpType.Fulfill ? "Fulfill" : "Reject"}
+              </div>
+              <IlpResponseDetails response={response} />
+            </>
+          )}
           <div className="">STREAM Request</div>
           <StreamPacketDetails packet={requestStreamPacket} />
           {response &&