feat: integrate mana into output page

client/src/app/components/nova/KeyValueEntries.tsx

@@ -0,0 +1,40 @@
+import classNames from "classnames";
+import React, { useState } from "react";
+import { IKeyValue, IKeyValueEntries } from "~/app/lib/interfaces";
+import DropdownIcon from "~assets/dropdown-arrow.svg?react";
+
+function KeyValuePair({ label, value }: IKeyValue): React.JSX.Element {
+    return (
+        <>
+            {value !== undefined && value !== null && (
+                <div className="key-value">
+                    <div className="entry--key">{label}</div>
+                    <div className="entry--value">{value}</div>
+                </div>
+            )}
+        </>
+    );
+}
+
+export default function KeyValueEntries({ label, value, entries }: IKeyValueEntries): React.JSX.Element {
+    const [isExpanded, setIsExpanded] = useState<boolean>(false);
+
+    return (
+        <div className="key-value-wrapper">
+            <div className="key-value--row" onClick={() => setIsExpanded(!isExpanded)}>
+                <div className={classNames("margin-r-t", "card--content--dropdown", { opened: isExpanded })}>
+                    <DropdownIcon />
+                </div>
+                <KeyValuePair label={label} value={value} />
+            </div>
+
+            {entries && entries.length > 0 && isExpanded && (
+                <div className="key-value-entries padding-l-t left-border">
+                    {entries.map((entry, idx) => (
+                        <KeyValuePair key={idx} {...entry} />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

client/src/app/components/nova/OutputView.scss

@@ -1,5 +1,7 @@
 @import "../../../scss/media-queries";
 @import "../../../scss/variables";
+@import "../../../scss/mixins";
+@import "../../../scss/fonts";
 
 .card--content__output {
     padding: 0 30px;
@@ -65,6 +67,43 @@
     }
 }
 
+.key-value-wrapper {
+    display: flex;
+    flex-direction: column;
+
+    .key-value--row {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12px;
+    }
+
+    .key-value {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+
+        .entry--key,
+        .entry--value {
+            @include font-size(12px);
+            font-family: $inter;
+            font-weight: 500;
+            letter-spacing: 0.5px;
+            white-space: nowrap;
+            color: var(--card-color);
+            margin-top: 8px;
+        }
+
+        .entry--value {
+            color: var(--body-color);
+            margin-left: 8px;
+        }
+    }
+
+    .key-value-entries {
+        margin-bottom: 12px;
+    }
+}
+
 .card--content--dropdown {
     margin-right: 8px;
     cursor: pointer;

client/src/app/components/nova/OutputView.tsx

@@ -4,7 +4,6 @@ import classNames from "classnames";
 import {
     Output,
     OutputType,
-    BasicOutput,
     CommonOutput,
     AccountOutput,
     AnchorOutput,
@@ -23,6 +22,8 @@ import FeatureView from "./FeaturesView";
 import TruncatedId from "../stardust/TruncatedId";
 import { HexHelper } from "~/helpers/stardust/hexHelper";
 import bigInt from "big-integer";
+import { OutputManaDetails, getManaKeyValueEntries } from "~/helpers/nova/manaUtils";
+import KeyValueEntries from "./KeyValueEntries";
 import "./OutputView.scss";
 
 interface OutputViewProps {
@@ -31,16 +32,18 @@ interface OutputViewProps {
     showCopyAmount: boolean;
     isPreExpanded?: boolean;
     isLinksDisabled?: boolean;
+    manaDetails: OutputManaDetails | null;
 }
 
-const OutputView: React.FC<OutputViewProps> = ({ outputId, output, showCopyAmount, isPreExpanded, isLinksDisabled }) => {
+const OutputView: React.FC<OutputViewProps> = ({ outputId, output, showCopyAmount, isPreExpanded, isLinksDisabled, manaDetails }) => {
     const [isExpanded, setIsExpanded] = useState(isPreExpanded ?? false);
     const [isFormattedBalance, setIsFormattedBalance] = useState(true);
     const { bech32Hrp, name: network } = useNetworkInfoNova((s) => s.networkInfo);
 
     const aliasOrNftBech32 = buildAddressForAliasOrNft(outputId, output, bech32Hrp);
     const outputIdTransactionPart = `${outputId.slice(0, 8)}....${outputId.slice(-8, -4)}`;
     const outputIdIndexPart = outputId.slice(-4);
+    const manaEntries = getManaKeyValueEntries(manaDetails);
 
     const header = (
         <div onClick={() => setIsExpanded(!isExpanded)} className="card--value card-header--wrapper">
@@ -158,12 +161,8 @@ const OutputView: React.FC<OutputViewProps> = ({ outputId, output, showCopyAmoun
             {(output.type === OutputType.Basic ||
                 output.type === OutputType.Account ||
                 output.type === OutputType.Anchor ||
-                output.type === OutputType.Nft) && (
-                <React.Fragment>
-                    <div className="card--label">Stored mana:</div>
-                    <div className="card--value row">{(output as BasicOutput).mana?.toString()}</div>
-                </React.Fragment>
-            )}
+                output.type === OutputType.Nft) &&
+                manaDetails?.totalMana && <KeyValueEntries {...manaEntries} />}
             {output.type === OutputType.Delegation && (
                 <React.Fragment>
                     <div className="card--label">Delegated amount:</div>

client/src/app/lib/interfaces/index.ts

@@ -1 +1,2 @@
 export * from "./routes.interfaces";
+export * from "./key-value.interfaces";

client/src/app/lib/interfaces/key-value.interfaces.ts

@@ -0,0 +1,8 @@
+export interface IKeyValue {
+    label: string;
+    value: string | number | null | undefined;
+}
+
+export interface IKeyValueEntries extends IKeyValue {
+    entries?: IKeyValue[];
+}

client/src/app/routes/nova/OutputPage.tsx

@@ -81,7 +81,13 @@ const OutputPage: React.FC<RouteComponentProps<OutputPageProps>> = ({
                         </div>
                         <div className="section">
                             <div className="card">
-                                <OutputView outputId={outputId} output={output} showCopyAmount={true} isPreExpanded={true} />
+                                <OutputView
+                                    outputId={outputId}
+                                    output={output}
+                                    showCopyAmount={true}
+                                    isPreExpanded={true}
+                                    manaDetails={outputManaDetails}
+                                />
                             </div>
 
                             <div className="section--header row row--tablet-responsive middle space-between">
@@ -140,43 +146,6 @@ const OutputPage: React.FC<RouteComponentProps<OutputPageProps>> = ({
                                     </div>
                                 </div>
                             )}
-
-                            {outputManaDetails && (
-                                <>
-                                    <div className="section--data">
-                                        <div className="label">Stored mana</div>
-                                        <div className="value code row middle">
-                                            <span className="margin-r-t">{outputManaDetails.storedMana}</span>
-                                        </div>
-                                    </div>
-                                    <div className="section--data">
-                                        <div className="label">Stored mana (decayed)</div>
-                                        <div className="value code row middle">
-                                            <span className="margin-r-t">{outputManaDetails.storedManaDecayed}</span>
-                                        </div>
-                                    </div>
-                                    <div className="section--data">
-                                        <div className="label">Potential mana</div>
-                                        <div className="value code row middle">
-                                            <span className="margin-r-t">{outputManaDetails.potentialMana}</span>
-                                        </div>
-                                    </div>
-                                    {outputManaDetails.delegationRewards && (
-                                        <div className="section--data">
-                                            <div className="label">Mana rewards</div>
-                                            <div className="value code row middle">
-                                                <span className="margin-r-t">{outputManaDetails.delegationRewards}</span>
-                                            </div>
-                                        </div>
-                                    )}
-                                    <div className="section--data">
-                                        <div className="label">Total mana</div>
-                                        <div className="value code row middle">
-                                            <span className="margin-r-t">{outputManaDetails.totalMana}</span>
-                                        </div>
-                                    </div>
-                                </>
-                            )}
                         </div>
                     </div>
                 </div>

client/src/helpers/nova/manaUtils.ts

@@ -1,4 +1,5 @@
 import { BasicOutput, ManaRewardsResponse, Output, ProtocolParameters, Utils } from "@iota/sdk-wasm-nova/web";
+import { IKeyValueEntries } from "~/app/lib/interfaces";
 
 export interface OutputManaDetails {
     storedMana: string;
@@ -33,3 +34,31 @@ export function buildManaDetailsForOutput(
         totalMana: totalMana.toString(),
     };
 }
+
+export function getManaKeyValueEntries(manaDetails: OutputManaDetails | null): IKeyValueEntries {
+    const showDecayMana = manaDetails?.storedMana && manaDetails?.storedManaDecayed;
+    const decay = showDecayMana ? Number(manaDetails?.storedMana ?? 0) - Number(manaDetails?.storedManaDecayed ?? 0) : undefined;
+
+    return {
+        label: "Mana:",
+        value: manaDetails?.totalMana,
+        entries: [
+            {
+                label: "Stored:",
+                value: manaDetails?.storedMana,
+            },
+            {
+                label: "Decay:",
+                value: decay,
+            },
+            {
+                label: "Potential:",
+                value: manaDetails?.potentialMana,
+            },
+            {
+                label: "Delegation Rewards:",
+                value: manaDetails?.delegationRewards,
+            },
+        ],
+    };
+}