From 6413149f6196755d7486232b2d2cad73d2bd041a Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Wed, 14 Jun 2023 20:37:12 +0200
Subject: [PATCH] Adapt details forms

---
 .../TxMsgClaimRewardsDetails.tsx              | 10 ++---
 .../TxMsgCreateVestingAccountDetails.tsx      | 24 +++++------
 .../TransactionInfo/TxMsgDelegateDetails.tsx  | 17 +++++---
 .../TxMsgRedelegateDetails.tsx                | 21 +++++----
 .../TransactionInfo/TxMsgSendDetails.tsx      | 12 +++---
 .../TxMsgSetWithdrawAddressDetails.tsx        | 10 ++---
 .../TransactionInfo/TxMsgTransferDetails.tsx  | 25 ++++++-----
 .../TxMsgUndelegateDetails.tsx                | 17 +++++---
 .../dataViews/TransactionInfo/index.tsx       | 43 +++++++++++--------
 9 files changed, 99 insertions(+), 80 deletions(-)

diff --git a/components/dataViews/TransactionInfo/TxMsgClaimRewardsDetails.tsx b/components/dataViews/TransactionInfo/TxMsgClaimRewardsDetails.tsx
index 9ecdd65..5df2193 100644
--- a/components/dataViews/TransactionInfo/TxMsgClaimRewardsDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgClaimRewardsDetails.tsx
@@ -1,19 +1,19 @@
-import { TxMsgClaimRewards } from "../../../types/txMsg";
+import { MsgWithdrawDelegatorReward } from "cosmjs-types/cosmos/distribution/v1beta1/tx";
 import HashView from "../HashView";
 
 interface TxMsgClaimRewardsDetailsProps {
-  readonly msg: TxMsgClaimRewards;
+  readonly msgValue: MsgWithdrawDelegatorReward;
 }
 
-const TxMsgClaimRewardsDetails = ({ msg }: TxMsgClaimRewardsDetailsProps) => (
+const TxMsgClaimRewardsDetails = ({ msgValue }: TxMsgClaimRewardsDetailsProps) => (
   <>
     <li>
       <h3>MsgWithdrawDelegatorReward</h3>
     </li>
     <li>
       <label>Validator Address:</label>
-      <div title={msg.value.validatorAddress}>
-        <HashView hash={msg.value.validatorAddress} />
+      <div title={msgValue.validatorAddress}>
+        <HashView hash={msgValue.validatorAddress} />
       </div>
     </li>
     <style jsx>{`
diff --git a/components/dataViews/TransactionInfo/TxMsgCreateVestingAccountDetails.tsx b/components/dataViews/TransactionInfo/TxMsgCreateVestingAccountDetails.tsx
index 421e39b..3091831 100644
--- a/components/dataViews/TransactionInfo/TxMsgCreateVestingAccountDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgCreateVestingAccountDetails.tsx
@@ -1,15 +1,15 @@
+import { MsgCreateVestingAccount } from "cosmjs-types/cosmos/vesting/v1beta1/tx";
 import { useAppContext } from "../../../context/AppContext";
 import { printableCoins } from "../../../lib/displayHelpers";
-import { TxMsgCreateVestingAccount } from "../../../types/txMsg";
 import HashView from "../HashView";
 
 interface TxMsgCreateVestingAccountDetailsProps {
-  readonly msg: TxMsgCreateVestingAccount;
+  readonly msgValue: MsgCreateVestingAccount;
 }
 
-const TxMsgCreateVestingAccountDetails = ({ msg }: TxMsgCreateVestingAccountDetailsProps) => {
+const TxMsgCreateVestingAccountDetails = ({ msgValue }: TxMsgCreateVestingAccountDetailsProps) => {
   const { state } = useAppContext();
-  const endTimeDateObj = new Date(msg.value.endTime.multiply(1000).toNumber());
+  const endTimeDateObj = new Date(msgValue.endTime.multiply(1000).toNumber());
   const endTimeDate = endTimeDateObj.toLocaleDateString();
   const endTimeHours = endTimeDateObj.toLocaleTimeString().slice(0, -3);
 
@@ -20,23 +20,23 @@ const TxMsgCreateVestingAccountDetails = ({ msg }: TxMsgCreateVestingAccountDeta
       </li>
       <li>
         <label>Amount:</label>
-        <div>{printableCoins(msg.value.amount, state.chain)}</div>
+        <div>{printableCoins(msgValue.amount, state.chain)}</div>
       </li>
       <li>
         <label>From:</label>
-        <div title={msg.value.fromAddress}>
-          <HashView hash={msg.value.fromAddress} />
+        <div title={msgValue.fromAddress}>
+          <HashView hash={msgValue.fromAddress} />
         </div>
       </li>
       <li>
         <label>To:</label>
-        <div title={msg.value.toAddress}>
-          <HashView hash={msg.value.toAddress} />
+        <div title={msgValue.toAddress}>
+          <HashView hash={msgValue.toAddress} />
         </div>
       </li>
       <li>
         <label>End time:</label>
-        <div title={String(msg.value.endTime)}>
+        <div title={String(msgValue.endTime)}>
           <p>
             {endTimeDate} {endTimeHours}
           </p>
@@ -44,8 +44,8 @@ const TxMsgCreateVestingAccountDetails = ({ msg }: TxMsgCreateVestingAccountDeta
       </li>
       <li>
         <label>Delayed:</label>
-        <div title={String(msg.value.endTime)}>
-          <p>{msg.value.delayed ? "Yes" : "No"}</p>
+        <div title={String(msgValue.endTime)}>
+          <p>{msgValue.delayed ? "Yes" : "No"}</p>
         </div>
       </li>
       <style jsx>{`
diff --git a/components/dataViews/TransactionInfo/TxMsgDelegateDetails.tsx b/components/dataViews/TransactionInfo/TxMsgDelegateDetails.tsx
index 96199a4..0b758a1 100644
--- a/components/dataViews/TransactionInfo/TxMsgDelegateDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgDelegateDetails.tsx
@@ -1,16 +1,19 @@
 import { assert } from "@cosmjs/utils";
+import { MsgDelegate } from "cosmjs-types/cosmos/staking/v1beta1/tx";
 import { useAppContext } from "../../../context/AppContext";
 import { printableCoin } from "../../../lib/displayHelpers";
-import { TxMsgDelegate } from "../../../types/txMsg";
 import HashView from "../HashView";
 
 interface TxMsgDelegateDetailsProps {
-  readonly msg: TxMsgDelegate;
+  readonly msgValue: MsgDelegate;
 }
 
-const TxMsgDelegateDetails = ({ msg }: TxMsgDelegateDetailsProps) => {
+const TxMsgDelegateDetails = ({ msgValue }: TxMsgDelegateDetailsProps) => {
   const { state } = useAppContext();
-  assert(msg.value.amount, "Amount must be set, see https://github.com/osmosis-labs/telescope/issues/386");
+  assert(
+    msgValue.amount,
+    "Amount must be set, see https://github.com/osmosis-labs/telescope/issues/386",
+  );
 
   return (
     <>
@@ -19,12 +22,12 @@ const TxMsgDelegateDetails = ({ msg }: TxMsgDelegateDetailsProps) => {
       </li>
       <li>
         <label>Amount:</label>
-        <div>{printableCoin(msg.value.amount, state.chain)}</div>
+        <div>{printableCoin(msgValue.amount, state.chain)}</div>
       </li>
       <li>
         <label>Validator Address:</label>
-        <div title={msg.value.validatorAddress}>
-          <HashView hash={msg.value.validatorAddress} />
+        <div title={msgValue.validatorAddress}>
+          <HashView hash={msgValue.validatorAddress} />
         </div>
       </li>
       <style jsx>{`
diff --git a/components/dataViews/TransactionInfo/TxMsgRedelegateDetails.tsx b/components/dataViews/TransactionInfo/TxMsgRedelegateDetails.tsx
index 7b2bdf3..4e2a842 100644
--- a/components/dataViews/TransactionInfo/TxMsgRedelegateDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgRedelegateDetails.tsx
@@ -1,16 +1,19 @@
 import { assert } from "@cosmjs/utils";
+import { MsgBeginRedelegate } from "cosmjs-types/cosmos/staking/v1beta1/tx";
 import { useAppContext } from "../../../context/AppContext";
 import { printableCoin } from "../../../lib/displayHelpers";
-import { TxMsgRedelegate } from "../../../types/txMsg";
 import HashView from "../HashView";
 
 interface TxMsgRedelegateDetailsProps {
-  readonly msg: TxMsgRedelegate;
+  readonly msgValue: MsgBeginRedelegate;
 }
 
-const TxMsgRedelegateDetails = ({ msg }: TxMsgRedelegateDetailsProps) => {
+const TxMsgRedelegateDetails = ({ msgValue }: TxMsgRedelegateDetailsProps) => {
   const { state } = useAppContext();
-  assert(msg.value.amount, "Amount must be set, same as https://github.com/osmosis-labs/telescope/issues/386");
+  assert(
+    msgValue.amount,
+    "Amount must be set, same as https://github.com/osmosis-labs/telescope/issues/386",
+  );
 
   return (
     <>
@@ -19,18 +22,18 @@ const TxMsgRedelegateDetails = ({ msg }: TxMsgRedelegateDetailsProps) => {
       </li>
       <li>
         <label>Amount:</label>
-        <div>{printableCoin(msg.value.amount, state.chain)}</div>
+        <div>{printableCoin(msgValue.amount, state.chain)}</div>
       </li>
       <li>
         <label>Src Validator Address:</label>
-        <div title={msg.value.validatorSrcAddress}>
-          <HashView hash={msg.value.validatorSrcAddress} />
+        <div title={msgValue.validatorSrcAddress}>
+          <HashView hash={msgValue.validatorSrcAddress} />
         </div>
       </li>
       <li>
         <label>Dst Validator Address:</label>
-        <div title={msg.value.validatorDstAddress}>
-          <HashView hash={msg.value.validatorDstAddress} />
+        <div title={msgValue.validatorDstAddress}>
+          <HashView hash={msgValue.validatorDstAddress} />
         </div>
       </li>
       <style jsx>{`
diff --git a/components/dataViews/TransactionInfo/TxMsgSendDetails.tsx b/components/dataViews/TransactionInfo/TxMsgSendDetails.tsx
index 9e19ddd..3a34ac0 100644
--- a/components/dataViews/TransactionInfo/TxMsgSendDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgSendDetails.tsx
@@ -1,13 +1,13 @@
+import { MsgSend } from "cosmjs-types/cosmos/bank/v1beta1/tx";
 import { useAppContext } from "../../../context/AppContext";
 import { printableCoins } from "../../../lib/displayHelpers";
-import { TxMsgSend } from "../../../types/txMsg";
 import HashView from "../HashView";
 
 interface TxMsgSendDetailsProps {
-  readonly msg: TxMsgSend;
+  readonly msgValue: MsgSend;
 }
 
-const TxMsgSendDetails = ({ msg }: TxMsgSendDetailsProps) => {
+const TxMsgSendDetails = ({ msgValue }: TxMsgSendDetailsProps) => {
   const { state } = useAppContext();
 
   return (
@@ -17,12 +17,12 @@ const TxMsgSendDetails = ({ msg }: TxMsgSendDetailsProps) => {
       </li>
       <li>
         <label>Amount:</label>
-        <div>{printableCoins(msg.value.amount, state.chain)}</div>
+        <div>{printableCoins(msgValue.amount, state.chain)}</div>
       </li>
       <li>
         <label>To:</label>
-        <div title={msg.value.toAddress}>
-          <HashView hash={msg.value.toAddress} />
+        <div title={msgValue.toAddress}>
+          <HashView hash={msgValue.toAddress} />
         </div>
       </li>
       <style jsx>{`
diff --git a/components/dataViews/TransactionInfo/TxMsgSetWithdrawAddressDetails.tsx b/components/dataViews/TransactionInfo/TxMsgSetWithdrawAddressDetails.tsx
index 4919803..1d6e0d0 100644
--- a/components/dataViews/TransactionInfo/TxMsgSetWithdrawAddressDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgSetWithdrawAddressDetails.tsx
@@ -1,19 +1,19 @@
-import { TxMsgSetWithdrawAddress } from "../../../types/txMsg";
+import { MsgSetWithdrawAddress } from "cosmjs-types/cosmos/distribution/v1beta1/tx";
 import HashView from "../HashView";
 
 interface TxMsgSetWithdrawAddressDetailsProps {
-  readonly msg: TxMsgSetWithdrawAddress;
+  readonly msgValue: MsgSetWithdrawAddress;
 }
 
-const TxMsgSetWithdrawAddressDetails = ({ msg }: TxMsgSetWithdrawAddressDetailsProps) => (
+const TxMsgSetWithdrawAddressDetails = ({ msgValue }: TxMsgSetWithdrawAddressDetailsProps) => (
   <>
     <li>
       <h3>MsgSetWithdrawAddress</h3>
     </li>
     <li>
       <label>Withdraw Address:</label>
-      <div title={msg.value.withdrawAddress}>
-        <HashView hash={msg.value.withdrawAddress} />
+      <div title={msgValue.withdrawAddress}>
+        <HashView hash={msgValue.withdrawAddress} />
       </div>
     </li>
     <style jsx>{`
diff --git a/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx b/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx
index ef8c546..ae2e4fd 100644
--- a/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx
@@ -1,15 +1,18 @@
 import { assert } from "@cosmjs/utils";
+import { MsgTransfer } from "cosmjs-types/ibc/applications/transfer/v1/tx";
 import { thinSpace } from "../../../lib/displayHelpers";
-import { TxMsgTransfer } from "../../../types/txMsg";
 import HashView from "../HashView";
 
 interface TxMsgTransferDetailsProps {
-  readonly msg: TxMsgTransfer;
+  readonly msgValue: MsgTransfer;
 }
 
-const TxMsgTransferDetails = ({ msg }: TxMsgTransferDetailsProps) => {
-  assert(msg.value.token, "Token must be set, same as https://github.com/osmosis-labs/telescope/issues/386");
-  const timeoutDateObj = new Date(msg.value.timeoutTimestamp.divide(1_000_000).toNumber());
+const TxMsgTransferDetails = ({ msgValue }: TxMsgTransferDetailsProps) => {
+  assert(
+    msgValue.token,
+    "Token must be set, same as https://github.com/osmosis-labs/telescope/issues/386",
+  );
+  const timeoutDateObj = new Date(msgValue.timeoutTimestamp.divide(1_000_000).toNumber());
   const timeoutDate = timeoutDateObj.toLocaleDateString();
   const timeoutTime = timeoutDateObj.toLocaleTimeString();
 
@@ -20,20 +23,20 @@ const TxMsgTransferDetails = ({ msg }: TxMsgTransferDetailsProps) => {
       </li>
       <li>
         <label>Source Port:</label>
-        <div>{msg.value.sourcePort}</div>
+        <div>{msgValue.sourcePort}</div>
       </li>
       <li>
         <label>Source Channel:</label>
-        <div>{msg.value.sourceChannel}</div>
+        <div>{msgValue.sourceChannel}</div>
       </li>
       <li>
         <label>Token:</label>
-        <div>{msg.value.token.amount + thinSpace + msg.value.token.denom}</div>
+        <div>{msgValue.token.amount + thinSpace + msgValue.token.denom}</div>
       </li>
       <li>
         <label>To:</label>
-        <div title={msg.value.receiver}>
-          <HashView hash={msg.value.receiver} />
+        <div title={msgValue.receiver}>
+          <HashView hash={msgValue.receiver} />
         </div>
       </li>
       <li>
@@ -44,7 +47,7 @@ const TxMsgTransferDetails = ({ msg }: TxMsgTransferDetailsProps) => {
       </li>
       <li>
         <label>Memo:</label>
-        <div>{msg.value.memo}</div>
+        <div>{msgValue.memo}</div>
       </li>
       <style jsx>{`
         li:not(:has(h3)) {
diff --git a/components/dataViews/TransactionInfo/TxMsgUndelegateDetails.tsx b/components/dataViews/TransactionInfo/TxMsgUndelegateDetails.tsx
index 69ca7f0..df50bfb 100644
--- a/components/dataViews/TransactionInfo/TxMsgUndelegateDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgUndelegateDetails.tsx
@@ -1,16 +1,19 @@
 import { assert } from "@cosmjs/utils";
+import { MsgUndelegate } from "cosmjs-types/cosmos/staking/v1beta1/tx";
 import { useAppContext } from "../../../context/AppContext";
 import { printableCoin } from "../../../lib/displayHelpers";
-import { TxMsgUndelegate } from "../../../types/txMsg";
 import HashView from "../HashView";
 
 interface TxMsgUndelegateDetailsProps {
-  readonly msg: TxMsgUndelegate;
+  readonly msgValue: MsgUndelegate;
 }
 
-const TxMsgUndelegateDetails = ({ msg }: TxMsgUndelegateDetailsProps) => {
+const TxMsgUndelegateDetails = ({ msgValue: msg }: TxMsgUndelegateDetailsProps) => {
   const { state } = useAppContext();
-  assert(msg.value.amount, "Amount must be set, same as https://github.com/osmosis-labs/telescope/issues/386");
+  assert(
+    msg.amount,
+    "Amount must be set, same as https://github.com/osmosis-labs/telescope/issues/386",
+  );
 
   return (
     <>
@@ -19,12 +22,12 @@ const TxMsgUndelegateDetails = ({ msg }: TxMsgUndelegateDetailsProps) => {
       </li>
       <li>
         <label>Amount:</label>
-        <div>{printableCoin(msg.value.amount, state.chain)}</div>
+        <div>{printableCoin(msg.amount, state.chain)}</div>
       </li>
       <li>
         <label>Validator Address:</label>
-        <div title={msg.value.validatorAddress}>
-          <HashView hash={msg.value.validatorAddress} />
+        <div title={msg.validatorAddress}>
+          <HashView hash={msg.validatorAddress} />
         </div>
       </li>
       <style jsx>{`
diff --git a/components/dataViews/TransactionInfo/index.tsx b/components/dataViews/TransactionInfo/index.tsx
index 616884f..776a51f 100644
--- a/components/dataViews/TransactionInfo/index.tsx
+++ b/components/dataViews/TransactionInfo/index.tsx
@@ -1,16 +1,7 @@
 import { useAppContext } from "../../../context/AppContext";
 import { printableCoins } from "../../../lib/displayHelpers";
-import {
-  isTxMsgClaimRewards,
-  isTxMsgCreateVestingAccount,
-  isTxMsgDelegate,
-  isTxMsgRedelegate,
-  isTxMsgSend,
-  isTxMsgSetWithdrawAddress,
-  isTxMsgTransfer,
-  isTxMsgUndelegate,
-} from "../../../lib/txMsgHelpers";
 import { DbTransaction } from "../../../types";
+import { MsgTypeUrls } from "../../../types/txMsg";
 import StackableContainer from "../../layout/StackableContainer";
 import TxMsgClaimRewardsDetails from "./TxMsgClaimRewardsDetails";
 import TxMsgCreateVestingAccountDetails from "./TxMsgCreateVestingAccountDetails";
@@ -55,14 +46,30 @@ const TransactionInfo = ({ tx }: Props) => {
           <StackableContainer lessPadding lessMargin>
             {tx.msgs.map((msg, index) => (
               <StackableContainer key={index} lessPadding lessMargin>
-                {isTxMsgSend(msg) ? <TxMsgSendDetails msg={msg} /> : null}
-                {isTxMsgDelegate(msg) ? <TxMsgDelegateDetails msg={msg} /> : null}
-                {isTxMsgUndelegate(msg) ? <TxMsgUndelegateDetails msg={msg} /> : null}
-                {isTxMsgRedelegate(msg) ? <TxMsgRedelegateDetails msg={msg} /> : null}
-                {isTxMsgClaimRewards(msg) ? <TxMsgClaimRewardsDetails msg={msg} /> : null}
-                {isTxMsgSetWithdrawAddress(msg) ? (<TxMsgSetWithdrawAddressDetails msg={msg} />) : null}
-                {isTxMsgCreateVestingAccount(msg) ? (<TxMsgCreateVestingAccountDetails msg={msg} />) : null}
-                {isTxMsgTransfer(msg) ? <TxMsgTransferDetails msg={msg} /> : null}
+                {MsgTypeUrls.Send === msg.typeUrl ? (
+                  <TxMsgSendDetails msgValue={msg.value} />
+                ) : null}
+                {MsgTypeUrls.Delegate === msg.typeUrl ? (
+                  <TxMsgDelegateDetails msgValue={msg.value} />
+                ) : null}
+                {MsgTypeUrls.Undelegate === msg.typeUrl ? (
+                  <TxMsgUndelegateDetails msgValue={msg.value} />
+                ) : null}
+                {MsgTypeUrls.BeginRedelegate === msg.typeUrl ? (
+                  <TxMsgRedelegateDetails msgValue={msg.value} />
+                ) : null}
+                {MsgTypeUrls.WithdrawDelegatorReward === msg.typeUrl ? (
+                  <TxMsgClaimRewardsDetails msgValue={msg.value} />
+                ) : null}
+                {MsgTypeUrls.SetWithdrawAddress === msg.typeUrl ? (
+                  <TxMsgSetWithdrawAddressDetails msgValue={msg.value} />
+                ) : null}
+                {MsgTypeUrls.CreateVestingAccount === msg.typeUrl ? (
+                  <TxMsgCreateVestingAccountDetails msgValue={msg.value} />
+                ) : null}
+                {MsgTypeUrls.Transfer === msg.typeUrl ? (
+                  <TxMsgTransferDetails msgValue={msg.value} />
+                ) : null}
               </StackableContainer>
             ))}
           </StackableContainer>