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

Add details components per TxMsg

Browse Source
This commit is contained in:
abefernan 2023-05-02 14:43:08 +02:00
parent f342bf679e
commit 4475bdfa65
5 changed files with 281 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/dataViews/TransactionInfo/TxMsgClaimRewardsDetails.tsx Normal file
View File

@ -0,0 +1,47 @@
import { TxMsgClaimRewards } from "../../../types/txMsg";
import HashView from "../HashView";
interface TxMsgClaimRewardsDetailsProps {
readonly msg: TxMsgClaimRewards;
}
const TxMsgClaimRewardsDetails = ({ msg }: TxMsgClaimRewardsDetailsProps) => (
<>
<li>
<h2>MsgWithdrawDelegatorReward</h2>
</li>
<li>
<label>Validator Address:</label>
<div title={msg.value.validatorAddress}>
<HashView hash={msg.value.validatorAddress} />
</div>
</li>
<style jsx>{`
li:not(:has(h2)) {
background: rgba(255, 255, 255, 0.03);
padding: 6px 10px;
border-radius: 8px;
display: flex;
align-items: center;
}
li + li:nth-child(2) {
margin-top: 25px;
}
li + li {
margin-top: 10px;
}
li div {
padding: 3px 6px;
}
label {
font-size: 12px;
background: rgba(255, 255, 255, 0.1);
padding: 3px 6px;
border-radius: 5px;
display: block;
}
`}</style>
</>
);
export default TxMsgClaimRewardsDetails;

57
components/dataViews/TransactionInfo/TxMsgDelegateDetails.tsx Normal file
View File

@ -0,0 +1,57 @@
import { useAppContext } from "../../../context/AppContext";
import { printableCoins } from "../../../lib/displayHelpers";
import { TxMsgDelegate } from "../../../types/txMsg";
import HashView from "../HashView";
interface TxMsgDelegateDetailsProps {
readonly msg: TxMsgDelegate;
}
const TxMsgDelegateDetails = ({ msg }: TxMsgDelegateDetailsProps) => {
const { state } = useAppContext();
return (
<>
<li>
<h2>MsgDelegate</h2>
</li>
<li>
<label>Amount:</label>
<div>{printableCoins(msg.value.amount, state.chain)}</div>
</li>
<li>
<label>Validator Address:</label>
<div title={msg.value.validatorAddress}>
<HashView hash={msg.value.validatorAddress} />
</div>
</li>
<style jsx>{`
li:not(:has(h2)) {
background: rgba(255, 255, 255, 0.03);
padding: 6px 10px;
border-radius: 8px;
display: flex;
align-items: center;
}
li + li:nth-child(2) {
margin-top: 25px;
}
li + li {
margin-top: 10px;
}
li div {
padding: 3px 6px;
}
label {
font-size: 12px;
background: rgba(255, 255, 255, 0.1);
padding: 3px 6px;
border-radius: 5px;
display: block;
}
`}</style>
</>
);
};
export default TxMsgDelegateDetails;

63
components/dataViews/TransactionInfo/TxMsgRedelegateDetails.tsx Normal file
View File

@ -0,0 +1,63 @@
import { useAppContext } from "../../../context/AppContext";
import { printableCoins } from "../../../lib/displayHelpers";
import { TxMsgRedelegate } from "../../../types/txMsg";
import HashView from "../HashView";
interface TxMsgRedelegateDetailsProps {
readonly msg: TxMsgRedelegate;
}
const TxMsgRedelegateDetails = ({ msg }: TxMsgRedelegateDetailsProps) => {
const { state } = useAppContext();
return (
<>
<li>
<h2>MsgBeginRedelegate</h2>
</li>
<li>
<label>Amount:</label>
<div>{printableCoins(msg.value.amount, state.chain)}</div>
</li>
<li>
<label>Src Validator Address:</label>
<div title={msg.value.validatorSrcAddress}>
<HashView hash={msg.value.validatorSrcAddress} />
</div>
</li>
<li>
<label>Dst Validator Address:</label>
<div title={msg.value.validatorDstAddress}>
<HashView hash={msg.value.validatorDstAddress} />
</div>
</li>
<style jsx>{`
li:not(:has(h2)) {
background: rgba(255, 255, 255, 0.03);
padding: 6px 10px;
border-radius: 8px;
display: flex;
align-items: center;
}
li + li:nth-child(2) {
margin-top: 25px;
}
li + li {
margin-top: 10px;
}
li div {
padding: 3px 6px;
}
label {
font-size: 12px;
background: rgba(255, 255, 255, 0.1);
padding: 3px 6px;
border-radius: 5px;
display: block;
}
`}</style>
</>
);
};
export default TxMsgRedelegateDetails;

57
components/dataViews/TransactionInfo/TxMsgSendDetails.tsx Normal file
View File

@ -0,0 +1,57 @@
import { useAppContext } from "../../../context/AppContext";
import { printableCoins } from "../../../lib/displayHelpers";
import { TxMsgSend } from "../../../types/txMsg";
import HashView from "../HashView";
interface TxMsgSendDetailsProps {
readonly msg: TxMsgSend;
}
const TxMsgSendDetails = ({ msg }: TxMsgSendDetailsProps) => {
const { state } = useAppContext();
return (
<>
<li>
<h2>MsgSend</h2>
</li>
<li>
<label>Amount:</label>
<div>{printableCoins(msg.value.amount, state.chain)}</div>
</li>
<li>
<label>To:</label>
<div title={msg.value.toAddress}>
<HashView hash={msg.value.toAddress} />
</div>
</li>
<style jsx>{`
li:not(:has(h2)) {
background: rgba(255, 255, 255, 0.03);
padding: 6px 10px;
border-radius: 8px;
display: flex;
align-items: center;
}
li + li:nth-child(2) {
margin-top: 25px;
}
li + li {
margin-top: 10px;
}
li div {
padding: 3px 6px;
}
label {
font-size: 12px;
background: rgba(255, 255, 255, 0.1);
padding: 3px 6px;
border-radius: 5px;
display: block;
}
`}</style>
</>
);
};
export default TxMsgSendDetails;

57
components/dataViews/TransactionInfo/TxMsgUndelegateDetails.tsx Normal file
View File

@ -0,0 +1,57 @@
import { useAppContext } from "../../../context/AppContext";
import { printableCoins } from "../../../lib/displayHelpers";
import { TxMsgUndelegate } from "../../../types/txMsg";
import HashView from "../HashView";
interface TxMsgUndelegateDetailsProps {
readonly msg: TxMsgUndelegate;
}
const TxMsgUndelegateDetails = ({ msg }: TxMsgUndelegateDetailsProps) => {
const { state } = useAppContext();
return (
<>
<li>
<h2>MsgUndelegate</h2>
</li>
<li>
<label>Amount:</label>
<div>{printableCoins(msg.value.amount, state.chain)}</div>
</li>
<li>
<label>Validator Address:</label>
<div title={msg.value.validatorAddress}>
<HashView hash={msg.value.validatorAddress} />
</div>
</li>
<style jsx>{`
li:not(:has(h2)) {
background: rgba(255, 255, 255, 0.03);
padding: 6px 10px;
border-radius: 8px;
display: flex;
align-items: center;
}
li + li:nth-child(2) {
margin-top: 25px;
}
li + li {
margin-top: 10px;
}
li div {
padding: 3px 6px;
}
label {
font-size: 12px;
background: rgba(255, 255, 255, 0.1);
padding: 3px 6px;
border-radius: 5px;
display: block;
}
`}</style>
</>
);
};
export default TxMsgUndelegateDetails;