feat: add block status and update transaction status on transction me…

…tadata tab

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<BlockTangleStateProps> = ({ status, issuingTime, failureReason }) => {
+    const [ago, setAgo] = useState<string | undefined>();
+
+    useEffect(() => {
+        setAgo(moment(Number(issuingTime) / 1000000).fromNow());
+    }, [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 ? (
+                            // todo: add BLOCK_FAILURE_REASON_STRINGS[failureReason] as tooltip content instead of failureReason?.toString()(track: https://github.com/iotaledger/iota-sdk/issues/1846)
+                            <Tooltip tooltipContent={failureReason?.toString()}>
+                                <span className="capitalize-text" style={{ color: "#ca493d" }}>
+                                    {status}
+                                </span>
+                            </Tooltip>
+                        ) : (
+                            <span className="capitalize-text">{status}</span>
+                        )}
+                    </div>
+                    <div className="block-tangle-reference">
+                        <span> {ago}</span>
+                    </div>
+                </React.Fragment>
+            )}
+        </div>
+    );
+};
+
+export default BlockTangleState;

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;
+    }
+}

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<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>

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<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>
@@ -226,6 +225,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>

client/src/scss/forms.scss

@@ -245,3 +245,7 @@ button {
         }
     }
 }
+
+.capitalize-text {
+    text-transform: capitalize;
+}