cerc-io/cosmos-multisig-ui
12
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Use msg details components in TransactionInfo

Browse Source
This commit is contained in:
abefernan
2023-05-02 14:44:10 +02:00
parent 19fe17284a
commit 407ebb0a04
2 changed files with 87 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dataViews/TransactionInfo.tsx
-126
View File
@@ -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;
components/dataViews/TransactionInfo/index.tsx
+87
View File
@@ -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;