feat: expand relevant address in inputs and outputs inside the tx payload

client/src/app/components/stardust/Input.tsx

@@ -2,14 +2,15 @@
 /* eslint-disable jsdoc/require-returns */
 import { Utils } from "@iota/sdk-wasm/web";
 import classNames from "classnames";
-import React, { useContext, useState } from "react";
-import { useHistory, Link } from "react-router-dom";
-import Bech32Address from "./address/Bech32Address";
-import Output from "./Output";
+import React, { useContext, useEffect, useState } from "react";
+import { Link, useHistory } from "react-router-dom";
 import DropdownIcon from "~assets/dropdown-arrow.svg?react";
 import { formatAmount } from "~helpers/stardust/valueFormatHelper";
 import { IInput } from "~models/api/stardust/IInput";
+import { IPreExpandedConfig } from "~models/components";
 import NetworkContext from "../../context/NetworkContext";
+import Output from "./Output";
+import Bech32Address from "./address/Bech32Address";
 
 interface InputProps {
     /**
@@ -20,17 +21,25 @@ interface InputProps {
      * The network in context.
      */
     readonly network: string;
+    /**
+     * Should the input be pre-expanded.
+     */
+    readonly preExpandedConfig?: IPreExpandedConfig;
 }
 
 /**
  * Component which will display an Input on stardust.
  */
-const Input: React.FC<InputProps> = ({ input, network }) => {
+const Input: React.FC<InputProps> = ({ input, network, preExpandedConfig }) => {
     const history = useHistory();
     const { tokenInfo } = useContext(NetworkContext);
-    const [isExpanded, setIsExpanded] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.isPreExpanded ?? false);
     const [isFormattedBalance, setIsFormattedBalance] = useState(true);
 
+    useEffect(() => {
+        setIsExpanded(preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.isPreExpanded ?? isExpanded ?? false);
+    }, [preExpandedConfig]);
+
     const fallbackInputView = (
         <React.Fragment>
             <div className="card--content__input" onClick={() => setIsExpanded(!isExpanded)}>
@@ -89,6 +98,7 @@ const Input: React.FC<InputProps> = ({ input, network }) => {
             amount={Number(input.output.output.amount)}
             network={network}
             showCopyAmount={true}
+            preExpandedConfig={preExpandedConfig}
         />
     ) : (
         fallbackInputView

client/src/app/components/stardust/Output.tsx

@@ -61,17 +61,25 @@ class Output extends Component<OutputProps, OutputState> {
         super(props);
 
         this.state = {
-            isExpanded: this.props.isPreExpanded ?? false,
+            isExpanded: this.props.preExpandedConfig?.isAllPreExpanded ?? this.props.preExpandedConfig?.isPreExpanded ?? false,
             isFormattedBalance: true,
         };
     }
 
+    componentDidUpdate(prevProps: Readonly<OutputProps>): void {
+        if (prevProps.preExpandedConfig !== this.props.preExpandedConfig) {
+            this.setState({
+                isExpanded: this.props.preExpandedConfig?.isAllPreExpanded ?? this.props.preExpandedConfig?.isPreExpanded ?? false,
+            });
+        }
+    }
+
     /**
      * Render the component.
      * @returns The node to render.
      */
     public render(): ReactNode {
-        const { outputId, output, amount, showCopyAmount, network, isPreExpanded, displayFullOutputId, isLinksDisabled } = this.props;
+        const { outputId, output, amount, showCopyAmount, network, preExpandedConfig, displayFullOutputId, isLinksDisabled } = this.props;
         const { isExpanded, isFormattedBalance } = this.state;
         const tokenInfo: INodeInfoBaseToken = this.context.tokenInfo;
 
@@ -223,33 +231,75 @@ class Output extends Component<OutputProps, OutputState> {
                         {/* all output types except Treasury have common output conditions */}
                         {output.type !== OutputType.Treasury && (
                             <React.Fragment>
-                                {(output as CommonOutput).unlockConditions.map((unlockCondition, idx) => (
-                                    <UnlockCondition key={idx} unlockCondition={unlockCondition} isPreExpanded={isPreExpanded} />
-                                ))}
-                                {(output as CommonOutput).features?.map((feature, idx) => (
-                                    <Feature
-                                        key={idx}
-                                        feature={feature}
-                                        isPreExpanded={isPreExpanded}
-                                        isImmutable={false}
-                                        isParticipationEventMetadata={isParticipationOutput}
-                                    />
-                                ))}
+                                {(output as CommonOutput).unlockConditions.map((unlockCondition, idx) => {
+                                    const isPreExpanded =
+                                        preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.unlockConditions?.[idx] ?? false;
+                                    return <UnlockCondition key={idx} unlockCondition={unlockCondition} isPreExpanded={isPreExpanded} />;
+                                })}
+                                {(output as CommonOutput).features?.map((feature, idx) => {
+                                    const isPreExpanded =
+                                        preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.features?.[idx] ?? false;
+                                    return (
+                                        <Feature
+                                            key={idx}
+                                            feature={feature}
+                                            isImmutable={false}
+                                            isParticipationEventMetadata={isParticipationOutput}
+                                            isPreExpanded={isPreExpanded}
+                                        />
+                                    );
+                                })}
                                 {output.type === OutputType.Alias &&
-                                    (output as AliasOutput).immutableFeatures?.map((immutableFeature, idx) => (
-                                        <Feature key={idx} feature={immutableFeature} isPreExpanded={isPreExpanded} isImmutable={true} />
-                                    ))}
+                                    (output as AliasOutput).immutableFeatures?.map((immutableFeature, idx) => {
+                                        const isPreExpanded =
+                                            preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.immutableFeatures?.[idx] ?? false;
+                                        return (
+                                            <Feature
+                                                key={idx}
+                                                feature={immutableFeature}
+                                                isImmutable={true}
+                                                isPreExpanded={isPreExpanded}
+                                            />
+                                        );
+                                    })}
                                 {output.type === OutputType.Nft &&
-                                    (output as NftOutput).immutableFeatures?.map((immutableFeature, idx) => (
-                                        <Feature key={idx} feature={immutableFeature} isPreExpanded={isPreExpanded} isImmutable={true} />
-                                    ))}
+                                    (output as NftOutput).immutableFeatures?.map((immutableFeature, idx) => {
+                                        const isPreExpanded =
+                                            preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.immutableFeatures?.[idx] ?? false;
+                                        return (
+                                            <Feature
+                                                key={idx}
+                                                feature={immutableFeature}
+                                                isImmutable={true}
+                                                isPreExpanded={isPreExpanded}
+                                            />
+                                        );
+                                    })}
                                 {output.type === OutputType.Foundry &&
-                                    (output as FoundryOutput).immutableFeatures?.map((immutableFeature, idx) => (
-                                        <Feature key={idx} feature={immutableFeature} isPreExpanded={isPreExpanded} isImmutable={true} />
-                                    ))}
-                                {(output as CommonOutput).nativeTokens?.map((token, idx) => (
-                                    <NativeToken key={idx} tokenId={token.id} amount={Number(token.amount)} isPreExpanded={isPreExpanded} />
-                                ))}
+                                    (output as FoundryOutput).immutableFeatures?.map((immutableFeature, idx) => {
+                                        const isPreExpanded =
+                                            preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.immutableFeatures?.[idx] ?? false;
+                                        return (
+                                            <Feature
+                                                key={idx}
+                                                feature={immutableFeature}
+                                                isImmutable={true}
+                                                isPreExpanded={isPreExpanded}
+                                            />
+                                        );
+                                    })}
+                                {(output as CommonOutput).nativeTokens?.map((token, idx) => {
+                                    const isPreExpanded =
+                                        preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.nativeTokens?.[idx] ?? false;
+                                    return (
+                                        <NativeToken
+                                            key={idx}
+                                            tokenId={token.id}
+                                            amount={Number(token.amount)}
+                                            isPreExpanded={isPreExpanded}
+                                        />
+                                    );
+                                })}
                             </React.Fragment>
                         )}
                     </div>

client/src/app/components/stardust/OutputProps.tsx

@@ -1,4 +1,5 @@
 import { Output } from "@iota/sdk-wasm/web";
+import { IPreExpandedConfig } from "~models/components";
 
 export interface OutputProps {
     /**
@@ -21,11 +22,6 @@ export interface OutputProps {
      */
     showCopyAmount: boolean;
 
-    /**
-     * Should the output be pre-expanded.
-     */
-    isPreExpanded?: boolean;
-
     /**
      * Should the outputId be displayed in full (default truncated).
      */
@@ -40,4 +36,9 @@ export interface OutputProps {
      * Disable links if block is conflicting.
      */
     isLinksDisabled?: boolean;
+
+    /**
+     * Should the output and its fields be pre-expanded.
+     */
+    preExpandedConfig?: IPreExpandedConfig;
 }

client/src/app/components/stardust/block/payload/TransactionPayload.tsx

@@ -1,104 +1,80 @@
-import React, { ReactNode } from "react";
-import { TransactionPayloadProps } from "./TransactionPayloadProps";
-import { TransactionPayloadState } from "./TransactionPayloadState";
+import React, { useContext, useEffect, useState } from "react";
+import NetworkContext from "~/app/context/NetworkContext";
 import transactionPayloadMessage from "~assets/modals/stardust/block/transaction-payload.json";
-import NetworkContext from "../../../../context/NetworkContext";
-import AsyncComponent from "../../../AsyncComponent";
+import { getInputsPreExpandedConfig, getOutputsPreExpandedConfig } from "~helpers/stardust/preExpandedConfig";
+import { IPreExpandedConfig } from "~models/components";
 import Modal from "../../../Modal";
 import Input from "../../Input";
 import Output from "../../Output";
 import Unlocks from "../../Unlocks";
 import "./TransactionPayload.scss";
+import { TransactionPayloadProps } from "./TransactionPayloadProps";
 
 /**
  * Component which will display a transaction payload.
  */
-class TransactionPayload extends AsyncComponent<TransactionPayloadProps, TransactionPayloadState> {
-    /**
-     * The component context type.
-     */
-    public static contextType = NetworkContext;
-
-    /**
-     * The component context.
-     */
-    public declare context: React.ContextType<typeof NetworkContext>;
-
-    /**
-     * Create a new instance of TransactionPayload.
-     * @param props The props.
-     */
-    constructor(props: TransactionPayloadProps) {
-        super(props);
-
-        this.state = {
-            isFormattedBalance: true,
-        };
-    }
+const TransactionPayload: React.FC<TransactionPayloadProps> = ({ network, inputs, unlocks, outputs, header, isLinksDisabled }) => {
+    const [inputsPreExpandedConfig, setInputsPreExpandedConfig] = useState<IPreExpandedConfig[]>([]);
+    const { bech32Hrp } = useContext(NetworkContext);
 
-    /**
-     * The component mounted.
-     */
-    public async componentDidMount(): Promise<void> {
-        super.componentDidMount();
-    }
+    const outputsPreExpandedConfig = getOutputsPreExpandedConfig(outputs);
 
-    /**
-     * Render the component.
-     * @returns The node to render.
-     */
-    public render(): ReactNode {
-        const { network, inputs, unlocks, outputs, header, isLinksDisabled } = this.props;
+    useEffect(() => {
+        if (bech32Hrp) {
+            const inputsPreExpandedConfig = getInputsPreExpandedConfig(inputs, unlocks, bech32Hrp);
+            setInputsPreExpandedConfig(inputsPreExpandedConfig);
+        }
+    }, [bech32Hrp]);
 
-        return (
-            <div className="transaction-payload">
-                {header && (
-                    <div className="section--header">
-                        <div className="row middle">
-                            <h2>{header}</h2>
-                            <Modal icon="info" data={transactionPayloadMessage} />
-                        </div>
+    return (
+        <div className="transaction-payload">
+            {header && (
+                <div className="section--header">
+                    <div className="row middle">
+                        <h2>{header}</h2>
+                        <Modal icon="info" data={transactionPayloadMessage} />
                     </div>
-                )}
-                <div className="row row--tablet-responsive fill">
-                    <div className="card col fill">
-                        <div className="card--header">
-                            <h2 className="card--header__title">From</h2>
-                            <span className="dot-separator">•</span>
-                            <span>{inputs.length}</span>
-                        </div>
-                        <div className="transaction-payload_outputs card--content">
-                            {inputs.map((input, idx) => (
-                                <Input key={idx} network={network} input={input} />
-                            ))}
-                            <Unlocks unlocks={unlocks} />
-                        </div>
+                </div>
+            )}
+            <div className="row row--tablet-responsive fill">
+                <div className="card col fill">
+                    <div className="card--header">
+                        <h2 className="card--header__title">From</h2>
+                        <span className="dot-separator">•</span>
+                        <span>{inputs.length}</span>
+                    </div>
+                    <div className="transaction-payload_outputs card--content">
+                        {inputs.map((input, idx) => (
+                            <Input key={idx} network={network} input={input} preExpandedConfig={inputsPreExpandedConfig[idx]} />
+                        ))}
+                        <Unlocks unlocks={unlocks} />
                     </div>
+                </div>
 
-                    <div className="card col fill">
-                        <div className="card--header">
-                            <h2 className="card--header__title">To</h2>
-                            <span className="dot-separator">•</span>
-                            <span>{outputs.length}</span>
-                        </div>
-                        <div className="transaction-payload_outputs card--content">
-                            {outputs.map((output, idx) => (
-                                <Output
-                                    key={idx}
-                                    outputId={output.id}
-                                    output={output.output}
-                                    amount={output.amount}
-                                    network={network}
-                                    showCopyAmount={true}
-                                    isLinksDisabled={isLinksDisabled}
-                                />
-                            ))}
-                        </div>
+                <div className="card col fill">
+                    <div className="card--header">
+                        <h2 className="card--header__title">To</h2>
+                        <span className="dot-separator">•</span>
+                        <span>{outputs.length}</span>
+                    </div>
+                    <div className="transaction-payload_outputs card--content">
+                        {outputs.map((output, idx) => (
+                            <Output
+                                key={idx}
+                                outputId={output.id}
+                                output={output.output}
+                                amount={output.amount}
+                                network={network}
+                                showCopyAmount={true}
+                                isLinksDisabled={isLinksDisabled}
+                                preExpandedConfig={outputsPreExpandedConfig[idx]}
+                            />
+                        ))}
                     </div>
                 </div>
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
 
 export default TransactionPayload;

client/src/app/routes/stardust/OutputList.tsx

@@ -72,7 +72,7 @@ const OutputList: React.FC<RouteComponentProps<OutputListProps>> = ({
                                                 output={item.outputDetails.output}
                                                 amount={Number(item.outputDetails.output.amount)}
                                                 showCopyAmount={true}
-                                                isPreExpanded={false}
+                                                preExpandedConfig={{ isPreExpanded: false }}
                                             />
                                         </div>
                                     ))}
@@ -108,7 +108,7 @@ const OutputList: React.FC<RouteComponentProps<OutputListProps>> = ({
                                                 output={item.outputDetails.output}
                                                 amount={Number(item.outputDetails.output.amount)}
                                                 showCopyAmount={true}
-                                                isPreExpanded={false}
+                                                preExpandedConfig={{ isPreExpanded: false }}
                                             />
                                         </div>
                                     ))}