From 239b05a8db57508e3635dc1d66151015c8624bd7 Mon Sep 17 00:00:00 2001 From: Branko Bosnic Date: Wed, 17 Jan 2024 13:41:26 +0100 Subject: [PATCH] feat: add block status and update transaction status on transction metadata tab --- .../nova/block/BlockTangleState.tsx | 69 +++++++++++++++++++ .../section/TransactionMetadataSection.scss | 42 +++++++++++ .../section/TransactionMetadataSection.tsx | 24 ++++++- client/src/app/routes/nova/Block.tsx | 14 ++-- client/src/scss/forms.scss | 4 ++ 5 files changed, 146 insertions(+), 7 deletions(-) create mode 100644 client/src/app/components/nova/block/BlockTangleState.tsx create mode 100644 client/src/app/components/nova/block/section/TransactionMetadataSection.scss diff --git a/client/src/app/components/nova/block/BlockTangleState.tsx b/client/src/app/components/nova/block/BlockTangleState.tsx new file mode 100644 index 000000000..691bd1ccb --- /dev/null +++ b/client/src/app/components/nova/block/BlockTangleState.tsx @@ -0,0 +1,69 @@ +import classNames from "classnames"; +import moment from "moment"; +import React, { useEffect, useState } from "react"; +import Tooltip from "../../Tooltip"; +import "../../stardust/block/BlockTangleState.scss"; +import { BlockState, u64 } from "@iota/sdk-wasm-nova/web"; +import { BlockFailureReason } from "@iota/sdk-wasm-nova/web/lib/types/models/block-failure-reason"; + +export interface BlockTangleStateProps { + /** + * The Block status. + */ + status: BlockState; + + /** + * The tangle status. + */ + issuingTime: u64; + + /** + * The failure reason. + */ + failureReason?: BlockFailureReason; +} + +const BlockTangleState: React.FC = ({ status, issuingTime, failureReason }) => { + const [ago, setAgo] = useState(); + + useEffect(() => { + setAgo(moment(Number(issuingTime) / 1000000).fromNow()); + }, [issuingTime]); + + return ( +
+ {status && ( + +
+ {failureReason ? ( + // todo: add BLOCK_FAILURE_REASON_STRINGS[failureReason] as tooltip content instead of failureReason?.toString()(track: https://github.com/iotaledger/iota-sdk/issues/1846) + + + {status} + + + ) : ( + {status} + )} +
+
+ {ago} +
+ + )} +
+ ); +}; + +export default BlockTangleState; diff --git a/client/src/app/components/nova/block/section/TransactionMetadataSection.scss b/client/src/app/components/nova/block/section/TransactionMetadataSection.scss new file mode 100644 index 000000000..c87daebc3 --- /dev/null +++ b/client/src/app/components/nova/block/section/TransactionMetadataSection.scss @@ -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; + } +} diff --git a/client/src/app/components/nova/block/section/TransactionMetadataSection.tsx b/client/src/app/components/nova/block/section/TransactionMetadataSection.tsx index 7d3098f24..621e4fd03 100644 --- a/client/src/app/components/nova/block/section/TransactionMetadataSection.tsx +++ b/client/src/app/components/nova/block/section/TransactionMetadataSection.tsx @@ -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"; @@ -29,12 +31,28 @@ const TransactionMetadataSection: React.FC = ({
Transaction Status
-
{metadata.transactionState}
+
+
+ {metadata.transactionState} +
+
{metadata.transactionFailureReason && (
Failure Reason
-
{metadata.transactionFailureReason}
+
{TRANSACTION_FAILURE_REASON_STRINGS[metadata.transactionFailureReason]}
)} diff --git a/client/src/app/routes/nova/Block.tsx b/client/src/app/routes/nova/Block.tsx index f22b92ad5..3b00c43d6 100644 --- a/client/src/app/routes/nova/Block.tsx +++ b/client/src/app/routes/nova/Block.tsx @@ -20,6 +20,8 @@ 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 { /** * The network to lookup. @@ -106,10 +108,7 @@ const Block: React.FC> = ({
Issuing Time
-
- {/* Convert nanoseconds to milliseconds */} - {DateHelper.formatShort(Number(block.header.issuingTime) / 1000000)} -
+
{DateHelper.formatShort(Number(block.header.issuingTime) / 1000000)}
Slot commitment
@@ -226,6 +225,13 @@ const Block: React.FC> = ({ {isLoading && }
+ {blockMetadata.metadata && block?.header && ( + + )}
{blockContent}
diff --git a/client/src/scss/forms.scss b/client/src/scss/forms.scss index 48312fffb..f25ba8720 100644 --- a/client/src/scss/forms.scss +++ b/client/src/scss/forms.scss @@ -245,3 +245,7 @@ button { } } } + +.capitalize-text { + text-transform: capitalize; +}