From 407ebb0a04a3f8b2a5150de93023b72d9cd6e49e Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Tue, 2 May 2023 14:44:10 +0200
Subject: [PATCH] Use msg details components in TransactionInfo

---
 components/dataViews/TransactionInfo.tsx      | 126 ------------------
 .../dataViews/TransactionInfo/index.tsx       |  87 ++++++++++++
 2 files changed, 87 insertions(+), 126 deletions(-)
 delete mode 100644 components/dataViews/TransactionInfo.tsx
 create mode 100644 components/dataViews/TransactionInfo/index.tsx

diff --git a/components/dataViews/TransactionInfo.tsx b/components/dataViews/TransactionInfo.tsx
deleted file mode 100644
index a43e8fb..0000000
--- a/components/dataViews/TransactionInfo.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { Coin } from "cosmjs-types/cosmos/base/v1beta1/coin";
-import { useAppContext } from "../../context/AppContext";
-import { printableCoin, printableCoins } from "../../lib/displayHelpers";
-import { DbTransaction } from "../../types";
-import StackableContainer from "../layout/StackableContainer";
-import HashView from "./HashView";
-
-interface Props {
-  tx: DbTransaction;
-}
-
-const TransactionInfo = (props: Props) => {
-  const { state } = useAppContext();
-  return (
-    <StackableContainer lessPadding lessMargin>
-      <ul className="meta-data">
-        <>
-          {(props.tx.msgs || []).map((msg) =>
-            msg.typeUrl === "/cosmos.bank.v1beta1.MsgSend" ? (
-              <>
-                <li>
-                  <label>Amount:</label>
-                  <div>{printableCoins(msg.value.amount[0], state.chain)}</div>
-                </li>
-                <li>
-                  <label>To:</label>
-                  <div title={msg.value.toAddress}>
-                    <HashView hash={msg.value.toAddress} />
-                  </div>
-                </li>
-              </>
-            ) : msg.typeUrl === "/cosmos.staking.v1beta1.MsgDelegate" ||
-              msg.typeUrl === "/cosmos.staking.v1beta1.MsgUndelegate" ? (
-              <>
-                <li>
-                  <label>Amount:</label>
-                  <div>{printableCoin(msg.value.amount[0], state.chain)}</div>
-                </li>
-                <li>
-                  <label>Validator Address:</label>
-                  <div title={msg.value.validatorAddress}>
-                    <HashView hash={msg.value.validatorAddress} />
-                  </div>
-                </li>
-              </>
-            ) : msg.typeUrl === "/cosmos.staking.v1beta1.MsgBeginRedelegate" ? (
-              <>
-                <li>
-                  <label>Amount:</label>
-                  <div>{printableCoin(msg.value.amount[0], state.chain)}</div>
-                </li>
-                <li>
-                  <label>Source Validator Address:</label>
-                  <div title={msg.value.validatorSrcAddress}>
-                    <HashView hash={msg.value.validatorSrcAddress} />
-                  </div>
-                </li>
-                <li>
-                  <label>Destination Validator Address:</label>
-                  <div title={msg.value.validatorDstAddress}>
-                    <HashView hash={msg.value.validatorDstAddress} />
-                  </div>
-                </li>
-              </>
-            ) : msg.typeUrl === "/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward" ? (
-              <li>
-                <label>Validator Address:</label>
-                <div title={msg.value.validatorAddress}>
-                  <HashView hash={msg.value.validatorAddress} />
-                </div>
-              </li>
-            ) : null,
-          )}
-          {props.tx.fee && (
-            <>
-              <li>
-                <label>Gas:</label>
-                <div>{props.tx.fee.gas}</div>
-              </li>
-              <li>
-                <label>Fee:</label>
-                <div>{printableCoins(props.tx.fee.amount as Coin[], state.chain)}</div>
-              </li>
-            </>
-          )}
-          {props.tx.memo && (
-            <li>
-              <label>Memo:</label>
-              <div>{props.tx.memo}</div>
-            </li>
-          )}
-        </>
-      </ul>
-      <style jsx>{`
-        ul {
-          list-style: none;
-          padding: 0;
-          margin: 0;
-        }
-        .meta-data li {
-          margin-top: 10px;
-          background: rgba(255, 255, 255, 0.03);
-          padding: 6px 10px;
-          border-radius: 8px;
-          display: flex;
-          align-items: center;
-        }
-        .meta-data li:first-child {
-          margin-top: 0;
-        }
-        .meta-data label {
-          font-size: 12px;
-          background: rgba(255, 255, 255, 0.1);
-          padding: 3px 6px;
-          border-radius: 5px;
-          display: block;
-        }
-        .meta-data li div {
-          padding: 3px 6px;
-        }
-      `}</style>
-    </StackableContainer>
-  );
-};
-
-export default TransactionInfo;
diff --git a/components/dataViews/TransactionInfo/index.tsx b/components/dataViews/TransactionInfo/index.tsx
new file mode 100644
index 0000000..1537739
--- /dev/null
+++ b/components/dataViews/TransactionInfo/index.tsx
@@ -0,0 +1,87 @@
+import { useAppContext } from "../../../context/AppContext";
+import { printableCoins } from "../../../lib/displayHelpers";
+import {
+  isTxMsgClaimRewards,
+  isTxMsgDelegate,
+  isTxMsgRedelegate,
+  isTxMsgSend,
+  isTxMsgUndelegate,
+} from "../../../lib/txMsgHelpers";
+import { DbTransaction } from "../../../types";
+import StackableContainer from "../../layout/StackableContainer";
+import TxMsgClaimRewardsDetails from "./TxMsgClaimRewardsDetails";
+import TxMsgDelegateDetails from "./TxMsgDelegateDetails";
+import TxMsgRedelegateDetails from "./TxMsgRedelegateDetails";
+import TxMsgSendDetails from "./TxMsgSendDetails";
+import TxMsgUndelegateDetails from "./TxMsgUndelegateDetails";
+
+interface Props {
+  readonly tx: DbTransaction;
+}
+
+const TransactionInfo = ({ tx }: Props) => {
+  const { state } = useAppContext();
+
+  return (
+    <StackableContainer lessPadding lessMargin>
+      <ul className="meta-data">
+        <>
+          {tx.msgs.map((msg, index) => (
+            <>
+              {isTxMsgSend(msg) ? <TxMsgSendDetails key={index} msg={msg} /> : null}
+              {isTxMsgDelegate(msg) ? <TxMsgDelegateDetails key={index} msg={msg} /> : null}
+              {isTxMsgUndelegate(msg) ? <TxMsgUndelegateDetails key={index} msg={msg} /> : null}
+              {isTxMsgRedelegate(msg) ? <TxMsgRedelegateDetails key={index} msg={msg} /> : null}
+              {isTxMsgClaimRewards(msg) ? <TxMsgClaimRewardsDetails key={index} msg={msg} /> : null}
+            </>
+          ))}
+          {tx.fee ? (
+            <>
+              <li>
+                <label>Gas:</label>
+                <div>{tx.fee.gas}</div>
+              </li>
+              <li>
+                <label>Fee:</label>
+                <div>{printableCoins(tx.fee.amount, state.chain)}</div>
+              </li>
+            </>
+          ) : null}
+          {tx.memo ? (
+            <li>
+              <label>Memo:</label>
+              <div>{tx.memo}</div>
+            </li>
+          ) : null}
+        </>
+      </ul>
+      <style jsx>{`
+        ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+        .meta-data li {
+          margin-top: 10px;
+          background: rgba(255, 255, 255, 0.03);
+          padding: 6px 10px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+        }
+        .meta-data li div {
+          padding: 3px 6px;
+        }
+        .meta-data label {
+          font-size: 12px;
+          background: rgba(255, 255, 255, 0.1);
+          padding: 3px 6px;
+          border-radius: 5px;
+          display: block;
+        }
+      `}</style>
+    </StackableContainer>
+  );
+};
+
+export default TransactionInfo;