Adapt details forms
This commit is contained in:
abefernan
parent
76df022af8
commit
6413149f61
@ -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>{`
|
||||
|
||||
@ -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>{`
|
||||
|
||||
@ -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>{`
|
||||
|
||||
@ -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>{`
|
||||
|
||||
@ -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>{`
|
||||
|
||||
@ -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>{`
|
||||
|
||||
@ -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)) {
|
||||
|
||||
@ -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>{`
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user