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.

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 block status and transaction status #977

Merged
merged 23 commits into from
Jan 25, 2024
Merged
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
239b05a
feat: add block status and update transaction status on transction me…
brancoder Jan 17, 2024
72d28bf
fix: scss and comments
brancoder Jan 19, 2024
de174af
fix: conflicts resolved
brancoder Jan 23, 2024
d6c46d6
fix: imports
brancoder Jan 23, 2024
2f7a751
fix: silenceunsafe argument for nova imports
brancoder Jan 23, 2024
302eec4
Merge branch 'feat/support-block-page' into feat/add-block-status
brancoder Jan 23, 2024
669ac85
fix: add readable timestamp to block tangle state component
brancoder Jan 23, 2024
af5579c
fix: conflicts resolved
brancoder Jan 23, 2024
61134de
fix: add block failure reason constant
brancoder Jan 24, 2024
89aa0f7
Merge branch 'nova' into feat/add-block-status
brancoder Jan 24, 2024
3b49af0
fix: conflicts 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
51 changes: 51 additions & 0 deletions client/src/app/components/nova/block/BlockTangleState.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
@import "../../../../scss/fonts";
@import "../../../../scss/mixins";
@import "../../../../scss/media-queries";
@import "../../../../scss/variables";
@import "../../../../scss/themes";

.blocks-tangle-state {
display: flex;
align-items: center;

@include tablet-down {
margin-top: 4px;
}

.block-tangle-state {
@include font-size(12px);

display: flex;
align-items: center;
height: 24px;
margin-right: 8px;
padding: 0 8px;
border: 0;
border-radius: 6px;
outline: none;
background-color: $gray-light;
color: $gray-midnight;
font-family: $inter;
font-weight: 500;
letter-spacing: 0.5px;
white-space: nowrap;

@include phone-down {
height: 32px;
}

&.block-tangle-state__confirmed {
background-color: var(--message-confirmed-bg);
color: $mint-green-7;
}

&.block-tangle-state__conflicting {
background-color: var(--message-conflicting-bg);
}

&.block-tangle-state__pending {
background-color: var(--light-bg);
color: #8493ad;
}
}
}
69 changes: 69 additions & 0 deletions client/src/app/components/nova/block/BlockTangleState.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import classNames from "classnames";
import React, { useEffect, useState } from "react";
import Tooltip from "../../Tooltip";
import { BlockState, u64 } from "@iota/sdk-wasm-nova/web";
import { BlockFailureReason, BLOCK_FAILURE_REASON_STRINGS } from "@iota/sdk-wasm-nova/web/lib/types/models/block-failure-reason";
import "./BlockTangleState.scss";
import { DateHelper } from "~/helpers/dateHelper";

export interface BlockTangleStateProps {
/**
* The Block status.
*/
status: BlockState;

/**
* The issuing time.
*/
issuingTime: u64;

/**
* The failure reason.
*/
failureReason?: BlockFailureReason;
}

const BlockTangleState: React.FC<BlockTangleStateProps> = ({ status, issuingTime, failureReason }) => {
const [readableTimestamp, setReadableTimestamp] = useState<string | undefined>();

useEffect(() => {
const timestamp = DateHelper.format(DateHelper.milliseconds(Number(issuingTime) / 1000000));
setReadableTimestamp(timestamp);
}, [issuingTime]);

return (
<div className="blocks-tangle-state">
{status && (
<React.Fragment>
<div
className={classNames(
"block-tangle-state",
{
"block-tangle-state__confirmed": status === "confirmed" || "finalized",
},
{
"block-tangle-state__conflicting": status === "rejected" && "failed",
},
{ "block-tangle-state__pending": status === "pending" },
)}
>
{failureReason ? (
<Tooltip tooltipContent={BLOCK_FAILURE_REASON_STRINGS[failureReason]}>
<span className="capitalize-text" style={{ color: "#ca493d" }}>
{status}
</span>
</Tooltip>
) : (
<span className="capitalize-text">{status}</span>
)}
</div>
<div className="block-tangle-reference">
<span> {readableTimestamp}</span>
</div>
</React.Fragment>
)}
</div>
);
};

export default BlockTangleState;
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
@import "../../../../../scss/fonts";
@import "../../../../../scss/mixins";
@import "../../../../../scss/media-queries";
@import "../../../../../scss/variables";
@import "../../../../../scss/themes";

.transaction-tangle-state {
@include font-size(12px);

display: flex;
align-items: center;
height: 24px;
margin-right: 8px;
padding: 0 8px;
border: 0;
border-radius: 6px;
outline: none;
background-color: $gray-light;
color: $gray-midnight;
font-family: $inter;
font-weight: 500;
letter-spacing: 0.5px;
white-space: nowrap;

@include phone-down {
height: 32px;
}

&.transaction-tangle-state__confirmed {
background-color: var(--message-confirmed-bg);
color: $mint-green-7;
}

&.transaction-tangle-state__conflicting {
background-color: var(--message-conflicting-bg);
}

&.transaction-tangle-state__pending {
background-color: var(--light-bg);
color: #8493ad;
}
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { TransactionMetadata } from "@iota/sdk-wasm-nova/web";
import classNames from "classnames";
import { TRANSACTION_FAILURE_REASON_STRINGS, 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";

Expand Down Expand Up @@ -29,12 +31,28 @@ const TransactionMetadataSection: React.FC<TransactionMetadataSectionProps> = ({
</div>
<div className="section--data">
<div className="label">Transaction Status</div>
<div className="value row middle">{metadata.transactionState}</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" },
)}
>
{metadata.transactionState}
</div>
</div>
</div>
{metadata.transactionFailureReason && (
<div className="section--data">
<div className="label">Failure Reason</div>
<div className="value">{metadata.transactionFailureReason}</div>
<div className="value">{TRANSACTION_FAILURE_REASON_STRINGS[metadata.transactionFailureReason]}</div>
</div>
)}
</React.Fragment>
Expand Down
13 changes: 9 additions & 4 deletions client/src/app/routes/nova/Block.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import taggedDataPayloadInfo from "~assets/modals/stardust/block/tagged-data-pay
import transactionPayloadInfo from "~assets/modals/stardust/block/transaction-payload.json";
import { useBlockMetadata } from "~/helpers/nova/hooks/useBlockMetadata";
import TransactionMetadataSection from "~/app/components/nova/block/section/TransactionMetadataSection";
import BlockTangleState from "~/app/components/nova/block/BlockTangleState";

export interface BlockProps {
/**
Expand Down Expand Up @@ -106,10 +107,7 @@ const Block: React.FC<RouteComponentProps<BlockProps>> = ({
</div>
<div className="section--data">
<div className="label">Issuing Time</div>
<div className="value code">
{/* Convert nanoseconds to milliseconds */}
{DateHelper.formatShort(Number(block.header.issuingTime) / 1000000)}
</div>
<div className="value code">{DateHelper.formatShort(Number(block.header.issuingTime) / 1000000)}</div>
</div>
<div className="section--data">
<div className="label">Slot commitment</div>
Expand Down Expand Up @@ -226,6 +224,13 @@ const Block: React.FC<RouteComponentProps<BlockProps>> = ({
<Modal icon="info" data={mainHeaderMessage} />
{isLoading && <Spinner />}
</div>
{blockMetadata.metadata && block?.header && (
<BlockTangleState
status={blockMetadata.metadata?.blockState}
issuingTime={block?.header.issuingTime}
failureReason={blockMetadata.metadata?.blockFailureReason}
/>
)}
</div>
</div>
<div className="section">{blockContent}</div>
Expand Down
4 changes: 4 additions & 0 deletions client/src/scss/forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -245,3 +245,7 @@ button {
}
}
}

.capitalize-text {
text-transform: capitalize;
}
2 changes: 1 addition & 1 deletion setup_nova.sh
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
#!/bin/bash
SDK_DIR="iota-sdk"
TARGET_COMMIT="8d31e6b6648c1dbd8dcc3777e35bf9865bf2f983"
TARGET_COMMIT="1866c6e9ba1c96ee1d9a800d8d3c769a18069d34"

if [ ! -d "$SDK_DIR" ]; then
git clone -b 2.0 [email protected]:iotaledger/iota-sdk.git
Expand Down
Loading