From b25d89047aacfcf72e32b116e21295a898259410 Mon Sep 17 00:00:00 2001
From: NidhiKJha <menidhikjha@gmail.com>
Date: Tue, 25 Jun 2024 14:54:47 +0100
Subject: [PATCH] update network list item to include start accessory and end

---
 .../network-list-item/network-list-item.js    | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/ui/components/multichain/network-list-item/network-list-item.js b/ui/components/multichain/network-list-item/network-list-item.js
index 4e76258584bc..5aecb3fec602 100644
--- a/ui/components/multichain/network-list-item/network-list-item.js
+++ b/ui/components/multichain/network-list-item/network-list-item.js
@@ -38,6 +38,8 @@ export const NetworkListItem = ({
   onClick,
   onDeleteClick,
   onEditClick,
+  startAccessory,
+  showEndAccessory = true,
 }) => {
   const t = useI18nContext();
   const networkRef = useRef();
@@ -110,6 +112,11 @@ export const NetworkListItem = ({
       width={BlockSize.Full}
       onClick={onClick}
     >
+      {startAccessory ? (
+        <Box marginInlineEnd={2} marginTop={1}>
+          {startAccessory}
+        </Box>
+      ) : null}
       {selected && (
         <Box
           className="multichain-network-list-item__selected-indicator"
@@ -150,13 +157,15 @@ export const NetworkListItem = ({
         </Text>
       </Box>
       {renderButton()}
-      <NetworkListItemMenu
-        anchorElement={networkListItemMenuElement}
-        isOpen={networkOptionsMenuOpen}
-        onDeleteClick={onDeleteClick}
-        onEditClick={onEditClick}
-        onClose={() => setNetworkOptionsMenuOpen(false)}
-      />
+      {showEndAccessory ? (
+        <NetworkListItemMenu
+          anchorElement={networkListItemMenuElement}
+          isOpen={networkOptionsMenuOpen}
+          onDeleteClick={onDeleteClick}
+          onEditClick={onEditClick}
+          onClose={() => setNetworkOptionsMenuOpen(false)}
+        />
+      ) : null}
     </Box>
   );
 };
@@ -190,4 +199,12 @@ NetworkListItem.propTypes = {
    * Represents if the network item should be keyboard selected
    */
   focus: PropTypes.bool,
+  /**
+   * Represents start accessory
+   */
+  startAccessory: PropTypes.node,
+    /**
+   * Represents start accessory
+   */
+  showEndAccessory: PropTypes.bool,
 };