From c40814d2233852ab11d2d2abffab0b77dc294770 Mon Sep 17 00:00:00 2001
From: Gabe Rodriguez <grod220@gmail.com>
Date: Thu, 26 Sep 2024 13:51:46 +0200
Subject: [PATCH] review updates

---
 .../ui/tx/actions-views/ibc-relay.tsx         | 135 +++++++++---------
 1 file changed, 68 insertions(+), 67 deletions(-)

diff --git a/packages/ui/components/ui/tx/actions-views/ibc-relay.tsx b/packages/ui/components/ui/tx/actions-views/ibc-relay.tsx
index 6ba7a781d..d7e371f48 100644
--- a/packages/ui/components/ui/tx/actions-views/ibc-relay.tsx
+++ b/packages/ui/components/ui/tx/actions-views/ibc-relay.tsx
@@ -16,6 +16,7 @@ import { uint8ArrayToBase64 } from '@penumbra-zone/types/base64';
 import { ReactElement } from 'react';
 import { Packet } from '@penumbra-zone/protobuf/ibc/core/channel/v1/channel_pb';
 import { getUtcTime } from './isc20-withdrawal.tsx';
+import { CircleX } from 'lucide-react';
 
 // Attempt to parse data w/ fallbacks if unknown or failures
 const ParsedPacketData = ({
@@ -50,23 +51,11 @@ const PacketRows = ({
   return (
     <>
       <ParsedPacketData data={packet.data} dataParser={dataParser} />
-      {!!packet.sequence && (
-        <ActionDetails.Row label='Sequence'>{Number(packet.sequence)}</ActionDetails.Row>
-      )}
-      {!!packet.sourcePort && (
-        <ActionDetails.Row label='Source Port'>{packet.sourcePort}</ActionDetails.Row>
-      )}
-      {!!packet.sourceChannel && (
-        <ActionDetails.Row label='Source Channel'>{packet.sourceChannel}</ActionDetails.Row>
-      )}
-      {!!packet.destinationPort && (
-        <ActionDetails.Row label='Destination Port'>{packet.destinationPort}</ActionDetails.Row>
-      )}
-      {!!packet.destinationChannel && (
-        <ActionDetails.Row label='Destination Channel'>
-          {packet.destinationChannel}
-        </ActionDetails.Row>
-      )}
+      <ActionDetails.Row label='Sequence'>{Number(packet.sequence)}</ActionDetails.Row>
+      <ActionDetails.Row label='Source Port'>{packet.sourcePort}</ActionDetails.Row>
+      <ActionDetails.Row label='Source Channel'>{packet.sourceChannel}</ActionDetails.Row>
+      <ActionDetails.Row label='Destination Port'>{packet.destinationPort}</ActionDetails.Row>
+      <ActionDetails.Row label='Destination Channel'>{packet.destinationChannel}</ActionDetails.Row>
       {!!packet.timeoutHeight?.revisionHeight && (
         <ActionDetails.Row label='Timeout revision height'>
           {Number(packet.timeoutHeight.revisionHeight)}
@@ -77,34 +66,28 @@ const PacketRows = ({
           {Number(packet.timeoutHeight.revisionNumber)}
         </ActionDetails.Row>
       )}
-      {!!packet.timeoutTimestamp && (
-        <ActionDetails.Row label='Timeout timestamp'>
-          {getUtcTime(packet.timeoutTimestamp)}
-        </ActionDetails.Row>
-      )}
+      <ActionDetails.Row label='Timeout timestamp'>
+        {getUtcTime(packet.timeoutTimestamp)}
+      </ActionDetails.Row>
     </>
   );
 };
 
 // Packet data stored as json string encoded into bytes
-const parseRecvPacket = (packetData: Uint8Array) => {
+const parseFungibleTokenData = (packetData: Uint8Array) => {
   const dataString = new TextDecoder().decode(packetData);
   const parsed = FungibleTokenPacketData.fromJsonString(dataString);
   return (
     <>
-      {!!parsed.sender && (
-        <ActionDetails.Row label='Sender'>
-          <ActionDetails.TruncatedText>{parsed.sender}</ActionDetails.TruncatedText>
-        </ActionDetails.Row>
-      )}
-      {!!parsed.receiver && (
-        <ActionDetails.Row label='Receiver'>
-          <ActionDetails.TruncatedText>{parsed.receiver}</ActionDetails.TruncatedText>
-        </ActionDetails.Row>
-      )}
-      {!!parsed.denom && <ActionDetails.Row label='Denom'>{parsed.denom}</ActionDetails.Row>}
-      {!!parsed.amount && <ActionDetails.Row label='Amount'>{parsed.amount}</ActionDetails.Row>}
-      {'memo' in parsed && <ActionDetails.Row label='Memo'>{parsed.memo}</ActionDetails.Row>}
+      <ActionDetails.Row label='Sender'>
+        <ActionDetails.TruncatedText>{parsed.sender}</ActionDetails.TruncatedText>
+      </ActionDetails.Row>
+      <ActionDetails.Row label='Receiver'>
+        <ActionDetails.TruncatedText>{parsed.receiver}</ActionDetails.TruncatedText>
+      </ActionDetails.Row>
+      <ActionDetails.Row label='Denom'>{parsed.denom}</ActionDetails.Row>
+      <ActionDetails.Row label='Amount'>{parsed.amount}</ActionDetails.Row>
+      <ActionDetails.Row label='Memo'>{parsed.memo}</ActionDetails.Row>
     </>
   );
 };
@@ -115,7 +98,9 @@ const MsgResvComponent = ({ packet }: { packet: MsgRecvPacket }) => {
       label='IBC Relay: Msg Received'
       visibleContent={
         <ActionDetails>
-          {!!packet.packet && <PacketRows packet={packet.packet} dataParser={parseRecvPacket} />}
+          {!!packet.packet && (
+            <PacketRows packet={packet.packet} dataParser={parseFungibleTokenData} />
+          )}
 
           <ActionDetails.Row label='Signer'>{packet.signer}</ActionDetails.Row>
           {!!packet.proofHeight?.revisionHeight && (
@@ -159,7 +144,9 @@ const MsgTimeoutComponent = ({ timeout }: { timeout: MsgTimeout }) => {
       label='IBC Relay: Msg Timeout'
       visibleContent={
         <ActionDetails>
-          {!!timeout.packet && <PacketRows packet={timeout.packet} />}
+          {!!timeout.packet && (
+            <PacketRows packet={timeout.packet} dataParser={parseFungibleTokenData} />
+          )}
           {!!timeout.proofHeight?.revisionHeight && (
             <ActionDetails.Row label='Proof revision height'>
               {Number(timeout.proofHeight.revisionHeight)}
@@ -191,7 +178,7 @@ const MsgAckComponent = ({ ack }: { ack: MsgAcknowledgement }) => {
       label='IBC Relay: Msg Acknowledgement'
       visibleContent={
         <ActionDetails>
-          {!!ack.packet && <PacketRows packet={ack.packet} />}
+          {!!ack.packet && <PacketRows packet={ack.packet} dataParser={parseFungibleTokenData} />}
           {!!ack.proofHeight?.revisionHeight && (
             <ActionDetails.Row label='Proof revision height'>
               {Number(ack.proofHeight.revisionHeight)}
@@ -220,34 +207,48 @@ const MsgAckComponent = ({ ack }: { ack: MsgAcknowledgement }) => {
 };
 
 export const IbcRelayComponent = ({ value }: { value: IbcRelay }) => {
-  if (value.rawAction?.is(MsgRecvPacket.typeName)) {
-    const packet = new MsgRecvPacket();
-    value.rawAction.unpackTo(packet);
-    return <MsgResvComponent packet={packet} />;
-  }
-
-  if (value.rawAction?.is(MsgUpdateClient.typeName)) {
-    const update = new MsgUpdateClient();
-    value.rawAction.unpackTo(update);
-    return <UpdateClientComponent update={update} />;
-  }
-
-  if (value.rawAction?.is(MsgTimeout.typeName)) {
-    const timeout = new MsgTimeout();
-    value.rawAction.unpackTo(timeout);
-    return <MsgTimeoutComponent timeout={timeout} />;
-  }
-
-  if (value.rawAction?.is(MsgTimeoutOnClose.typeName)) {
-    const timeout = new MsgTimeoutOnClose();
-    value.rawAction.unpackTo(timeout);
-    return <MsgTimeoutComponent timeout={timeout} />;
-  }
-
-  if (value.rawAction?.is(MsgAcknowledgement.typeName)) {
-    const ack = new MsgAcknowledgement();
-    value.rawAction.unpackTo(ack);
-    return <MsgAckComponent ack={ack} />;
+  try {
+    if (value.rawAction?.is(MsgRecvPacket.typeName)) {
+      const packet = new MsgRecvPacket();
+      value.rawAction.unpackTo(packet);
+      return <MsgResvComponent packet={packet} />;
+    }
+
+    if (value.rawAction?.is(MsgUpdateClient.typeName)) {
+      const update = new MsgUpdateClient();
+      value.rawAction.unpackTo(update);
+      return <UpdateClientComponent update={update} />;
+    }
+
+    if (value.rawAction?.is(MsgTimeout.typeName)) {
+      const timeout = new MsgTimeout();
+      value.rawAction.unpackTo(timeout);
+      return <MsgTimeoutComponent timeout={timeout} />;
+    }
+
+    if (value.rawAction?.is(MsgTimeoutOnClose.typeName)) {
+      const timeout = new MsgTimeoutOnClose();
+      value.rawAction.unpackTo(timeout);
+      return <MsgTimeoutComponent timeout={timeout} />;
+    }
+
+    if (value.rawAction?.is(MsgAcknowledgement.typeName)) {
+      const ack = new MsgAcknowledgement();
+      value.rawAction.unpackTo(ack);
+      return <MsgAckComponent ack={ack} />;
+    }
+  } catch (e) {
+    return (
+      <ViewBox
+        label='IBC Relay'
+        visibleContent={
+          <div className='flex gap-2 text-sm text-red-400'>
+            <CircleX className='w-4' />
+            <span className='mt-1'>Error while parsing details</span>
+          </div>
+        }
+      />
+    );
   }
 
   return <UnimplementedView label='IBC Relay' />;