Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Improve displaying payloads on Block page #983

Merged
merged 23 commits into from
Jan 25, 2024
Merged

Feat: Improve displaying payloads on Block page #983

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
d2c6fb0
feat: Add infra to support OutputPage (nova)
msarcev Dec 19, 2023
fe93f1a
Merge branch 'nova' into feat/support-output-page
begonaalvarezd Dec 19, 2023
8d1d4e2
feat: add block page for nova
brancoder Dec 20, 2023
5495565
fix: resolve conflicts
brancoder Jan 8, 2024
c19c98d
fix: Add initial Block page structure
brancoder Jan 8, 2024
11ed337
fix: Add initial Block page structure
brancoder Jan 8, 2024
ade3e45
feat: Add View for tagged data payload and signed transaction payload
brancoder Jan 11, 2024
72f049e
fix: add block payload section and transaction helper
brancoder Jan 12, 2024
66d6929
Merge branch 'nova' into feat/support-block-page
brancoder Jan 15, 2024
a25d688
feat: add block transaction metadata tab
brancoder Jan 15, 2024
a619197
fix: conflict resolved
brancoder Jan 16, 2024
85e0497
fix: format
brancoder Jan 16, 2024
5d1bd85
fix: add max burned mana
brancoder Jan 18, 2024
378001a
fix: improve block with transaction payload
brancoder Jan 18, 2024
f2ec035
fix: improve validation block
brancoder Jan 18, 2024
b8b388b
fix: improve candidacy announcement and block page title
brancoder Jan 18, 2024
ea00542
fix: lint
brancoder Jan 18, 2024
ecf6044
fix: conflicts resolved
brancoder Jan 24, 2024
41620da
fix: remove nested transaction from block payload section
brancoder Jan 24, 2024
0c009d4
fix: insantiate block using Plain Instance to a class in useBlock
brancoder Jan 24, 2024
baa77f6
Merge branch 'nova' into feat/improve-tx-payload
brancoder Jan 24, 2024
11f5037
Merge branch 'nova' into feat/improve-tx-payload
brancoder Jan 25, 2024
3783d06
fix: conflict resolved
brancoder Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions client/src/app/components/nova/ContextInputView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import {
BlockIssuanceCreditContextInput,
CommitmentContextInput,
ContextInput,
ContextInputType,
RewardContextInput,
} from "@iota/sdk-wasm-nova/web";
import React from "react";
import TruncatedId from "../stardust/TruncatedId";
import { useNetworkInfoNova } from "~/helpers/nova/networkInfo";

interface IContextInputViewProps {
readonly contextInput: ContextInput;
}

const ContextInputView: React.FC<IContextInputViewProps> = ({ contextInput }) => {
const { name: network } = useNetworkInfoNova((s) => s.networkInfo);
if (contextInput.type === ContextInputType.COMMITMENT) {
const input = contextInput as CommitmentContextInput;

return (
<div className="section--data">
<div className="label">Commitment id</div>
<div className="value code">{input.commitmentId}</div>
</div>
);
} else if (contextInput.type === ContextInputType.BLOCK_ISSUANCE_CREDIT) {
const input = contextInput as BlockIssuanceCreditContextInput;

return (
<div className="section--data">
<div className="label">Account</div>
<div className="value code">
<TruncatedId id={input.accountId} link={`/${network}/account/${input.accountId}`} showCopyButton />
</div>
</div>
);
} else if (contextInput.type === ContextInputType.REWARD) {
const input = contextInput as RewardContextInput;

return (
<div className="section--data">
<div className="label">Reward Input Index</div>
<div className="value code">{input.index}</div>
</div>
);
}

return null;
};

export default ContextInputView;
8 changes: 1 addition & 7 deletions client/src/app/components/nova/block/section/BlockPayloadSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ interface BlockPayloadSectionProps {

const BlockPayloadSection: React.FC<BlockPayloadSectionProps> = ({ block, inputs, outputs, transferTotal }) => {
const payload = (block.body as BasicBlockBody).payload;

if (payload?.type === PayloadType.SignedTransaction && inputs && outputs && transferTotal !== undefined) {
const transactionPayload = payload as ISignedTransactionPayload;
const transaction = transactionPayload.transaction;
Expand All @@ -36,13 +37,6 @@ const BlockPayloadSection: React.FC<BlockPayloadSectionProps> = ({ block, inputs
)}
</React.Fragment>
);
} else if (payload?.type === PayloadType.CandidacyAnnouncement) {
return (
<div>
{/* todo */}
CandidacyAnnouncement
</div>
);
} else if (payload?.type === PayloadType.TaggedData) {
return (
<div className="section">
Expand Down
131 changes: 80 additions & 51 deletions client/src/app/components/nova/block/section/TransactionMetadataSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,97 @@
import classNames from "classnames";
import { TRANSACTION_FAILURE_REASON_STRINGS, TransactionMetadata } from "@iota/sdk-wasm-nova/web";
import { TRANSACTION_FAILURE_REASON_STRINGS, Transaction, TransactionMetadata } from "@iota/sdk-wasm-nova/web";
import React from "react";
import "./TransactionMetadataSection.scss";
import Spinner from "../../../Spinner";
import TruncatedId from "~/app/components/stardust/TruncatedId";
import ContextInputView from "../../ContextInputView";
import { useNetworkInfoNova } from "~/helpers/nova/networkInfo";

interface TransactionMetadataSectionProps {
readonly network: string;
readonly metadata?: TransactionMetadata;
readonly transaction?: Transaction;
readonly transactionMetadata?: TransactionMetadata;
readonly metadataError?: string;
readonly isLinksDisabled: boolean;
}

const TransactionMetadataSection: React.FC<TransactionMetadataSectionProps> = ({ network, metadata, metadataError, isLinksDisabled }) => (
<div className="section metadata-section">
<div className="section--data">
{!metadata && !metadataError && <Spinner />}
{metadataError && <p className="danger">Failed to retrieve metadata. {metadataError}</p>}
{metadata && !metadataError && (
<React.Fragment>
<div className="section--data">
<div className="label">Transaction Id</div>
<div className="value code">
<TruncatedId
id={metadata.transactionId}
showCopyButton
link={isLinksDisabled ? undefined : `/${network}/transaction/${metadata.transactionId}`}
/>
</div>
</div>
<div className="section--data">
<div className="label">Transaction Status</div>
<div className="value row middle capitalize-text">
<div
className={classNames(
"transaction-tangle-state",
{
"transaction-tangle-state__confirmed":
metadata.transactionState === "accepted" || "confirmed" || "finalized",
},
{
"transaction-tangle-state__conflicting": metadata.transactionState === "failed",
},
{ "transaction-tangle-state__pending": metadata.transactionState === "pending" },
const TransactionMetadataSection: React.FC<TransactionMetadataSectionProps> = ({ transaction, transactionMetadata, metadataError }) => {
const { name: network } = useNetworkInfoNova((s) => s.networkInfo);

return (
<div className="section metadata-section">
<div className="section--data">
{!transactionMetadata && !metadataError && <Spinner />}
{metadataError ? (
<p className="danger">Failed to retrieve metadata. {metadataError}</p>
) : (
<React.Fragment>
{transactionMetadata && (
<>
<div className="section--data">
<div className="label">Transaction Status</div>
<div className="value row middle capitalize-text">
<div
className={classNames(
"transaction-tangle-state",
{
"transaction-tangle-state__confirmed":
transactionMetadata.transactionState === "accepted" || "confirmed" || "finalized",
},
{
"transaction-tangle-state__conflicting":
transactionMetadata.transactionState === "failed",
},
{ "transaction-tangle-state__pending": transactionMetadata.transactionState === "pending" },
)}
>
{transactionMetadata.transactionState}
</div>
</div>
</div>
{transactionMetadata.transactionFailureReason && (
<div className="section--data">
<div className="label">Failure Reason</div>
<div className="value">
{TRANSACTION_FAILURE_REASON_STRINGS[transactionMetadata.transactionFailureReason]}
</div>
</div>
)}
</>
)}
{transaction && (
<>
<div className="section--data">
<div className="label">Creation slot</div>
<div className="value code">{transaction.creationSlot}</div>
</div>
{transaction?.contextInputs?.map((contextInput, idx) => (
<ContextInputView contextInput={contextInput} key={idx} />
))}
{transaction?.allotments && (
<div className="section--data">
<div className="label">Mana Allotment Accounts</div>
{transaction?.allotments?.map((allotment, idx) => (
<div className="value code highlight margin-b-t" key={idx}>
<TruncatedId
id={allotment.accountId}
link={`/${network}/account/${allotment.accountId}`}
showCopyButton
/>
</div>
))}
</div>
)}
>
{metadata.transactionState}
</div>
</div>
</div>
{metadata.transactionFailureReason && (
<div className="section--data">
<div className="label">Failure Reason</div>
<div className="value">{TRANSACTION_FAILURE_REASON_STRINGS[metadata.transactionFailureReason]}</div>
</div>
)}
</React.Fragment>
)}
</>
)}
</React.Fragment>
)}
</div>
</div>
</div>
);
);
};

TransactionMetadataSection.defaultProps = {
metadata: undefined,
transactionMetadata: undefined,
transaction: undefined,
metadataError: undefined,
};

Expand Down
Loading
Loading