From 8932624a924eaf79f1375104371cbc68004af919 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Wed, 4 Dec 2024 17:00:54 +0100
Subject: [PATCH] feat(wallet-dashboard): add missing media type field in
 visual asset details (#4360)

---
 .../components/Dialogs/Assets/views/DetailsView.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
index 6ca3452ffa6..22572cec44f 100644
--- a/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { ExplorerLinkType, useNftDetails, Collapsible } from '@iota/core';
+import { ExplorerLinkType, useNftDetails, Collapsible, useNFTBasicData } from '@iota/core';
 import {
     Button,
     ButtonType,
@@ -41,7 +41,9 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
         formatMetaValue,
         isContainedInKiosk,
         kioskItem,
+        objectData,
     } = useNftDetails(objectId, senderAddress);
+    const { fileExtensionType, filePath } = useNFTBasicData(objectData);
 
     function handleMoreAboutKiosk() {
         window.open('https://docs.iota.org/references/ts-sdk/kiosk/', '_blank');
@@ -127,6 +129,15 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
                                         fullwidth
                                     />
                                 )}
+                                <KeyValueInfo
+                                    keyText="Media Type"
+                                    value={
+                                        filePath && fileExtensionType.name && fileExtensionType.type
+                                            ? `${fileExtensionType.name} ${fileExtensionType.type}`
+                                            : '-'
+                                    }
+                                    fullwidth
+                                />
                             </div>
                         </Collapsible>
                         {metaKeys.length ? (