From 5f12d7a117cfe578c487b1caaf1d80563c85167f Mon Sep 17 00:00:00 2001
From: prateekpur <prateekpur@yahoo.com>
Date: Mon, 9 Dec 2024 18:05:09 +0530
Subject: [PATCH] Fix in label displayed for state change in signature decoding
 section

---
 .../decoded-simulation.test.tsx               | 25 +++++++++++-
 .../decoded-simulation/decoded-simulation.tsx | 40 ++++++++++++++-----
 2 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.test.tsx
index 26b4c46f26cd..c06cf906e870 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import {
-  DecodingData,
   DecodingDataChangeType,
   DecodingDataStateChanges,
 } from '@metamask/signature-controller';
@@ -11,7 +10,7 @@ import { renderWithConfirmContextProvider } from '../../../../../../../../../tes
 import { permitSignatureMsg } from '../../../../../../../../../test/data/confirmations/typed_sign';
 import PermitSimulation, { getStateChangeToolip } from './decoded-simulation';
 
-const decodingData: DecodingData = {
+const decodingData = {
   stateChanges: [
     {
       assetType: 'ERC20',
@@ -165,4 +164,26 @@ describe('DecodedSimulation', () => {
     );
     expect(tooltip).toBe('signature_decoding_bid_nft_tooltip');
   });
+
+  it('renders label only once if there are multiple state changes of same changeType', async () => {
+    const state = getMockTypedSignConfirmStateForRequest({
+      ...permitSignatureMsg,
+      decodingLoading: false,
+      decodingData: {
+        stateChanges: [
+          decodingData.stateChanges[0],
+          decodingData.stateChanges[0],
+          decodingData.stateChanges[0],
+        ],
+      },
+    });
+    const mockStore = configureMockStore([])(state);
+
+    const { findAllByText } = renderWithConfirmContextProvider(
+      <PermitSimulation />,
+      mockStore,
+    );
+
+    expect(await findAllByText('Spending cap')).toHaveLength(1);
+  });
 });
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.tsx
index ec07ae253405..52be8b7d368d 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.tsx
@@ -60,10 +60,12 @@ const StateChangeRow = ({
   stateChangeList,
   stateChange,
   chainId,
+  displayLabel,
 }: {
   stateChangeList: DecodingDataStateChanges | null;
   stateChange: DecodingDataStateChange;
   chainId: Hex;
+  displayLabel: boolean;
 }) => {
   const t = useI18nContext();
   const { assetType, changeType, amount, contractAddress, tokenID } =
@@ -71,7 +73,7 @@ const StateChangeRow = ({
   const tooltip = getStateChangeToolip(stateChangeList, stateChange, t);
   return (
     <ConfirmInfoRow
-      label={getStateChangeLabelMap(t, changeType)}
+      label={displayLabel ? getStateChangeLabelMap(t, changeType) : ''}
       tooltip={tooltip}
     >
       {(assetType === TokenStandard.ERC20 ||
@@ -104,19 +106,39 @@ const DecodedSimulation: React.FC<object> = () => {
   const chainId = currentConfirmation.chainId as Hex;
   const { decodingLoading, decodingData } = currentConfirmation;
 
-  const stateChangeFragment = useMemo(
-    () =>
-      (decodingData?.stateChanges ?? []).map(
-        (change: DecodingDataStateChange) => (
+  const stateChangeFragment = useMemo(() => {
+    const stateChangesGrouped: Record<string, DecodingDataStateChange[]> = (
+      decodingData?.stateChanges ?? []
+    ).reduce(
+      (
+        result: Record<string, DecodingDataStateChange[]>,
+        stateChange: DecodingDataStateChange,
+      ) => {
+        result[stateChange.changeType] = [
+          ...(result[stateChange.changeType] ?? []),
+          stateChange,
+        ];
+        return result;
+      },
+      {},
+    );
+
+    return Object.entries(stateChangesGrouped)
+      .map(([_, changeList]) =>
+        changeList.map((change: DecodingDataStateChange, index: number) => (
           <StateChangeRow
             stateChangeList={decodingData?.stateChanges ?? []}
             stateChange={change}
             chainId={chainId}
+            displayLabel={index === 0}
           />
-        ),
-      ),
-    [decodingData?.stateChanges],
-  );
+        )),
+      )
+      .reduce(
+        (result, stateChangeGroup) => [...result, ...stateChangeGroup],
+        [],
+      );
+  }, [decodingData?.stateChanges]);
 
   return (
     <StaticSimulation