enhancement: nft metadata display

packages/shared/components/molecules/ActivityInformation.svelte

@@ -5,27 +5,39 @@
         AliasActivityInformation,
         NftActivityInformation,
     } from 'shared/components'
-    import { ActivityType, Activity } from '@core/wallet'
+    import { ActivityType, Activity, NftActivity } from '@core/wallet'
+    import NftMetadataInformation from './activity-info/NftMetadataInformation.svelte'
+    import { getNftByIdFromAllAccountNfts } from '@core/nfts'
+    import { selectedAccountIndex } from '@core/account'
 
-    export let activity: Activity
+    export let activity: Partial<Activity> = {}
 
     enum Tab {
         Transaction = 'general.transaction',
         Alias = 'general.alias',
         Nft = 'general.nft',
+        Metadata = 'general.metadata',
+    }
+
+    let hasMetadata = false
+    $: {
+        const storedNft = getNftByIdFromAllAccountNfts($selectedAccountIndex, (activity as NftActivity)?.nftId)
+        hasMetadata = !!storedNft?.parsedMetadata
     }
 
     let tabs: Tab[] = []
-    switch (activity.type) {
-        case ActivityType.Transaction:
-            tabs = [Tab.Transaction]
-            break
-        case ActivityType.Alias:
-            tabs = [Tab.Transaction, Tab.Alias]
-            break
-        case ActivityType.Nft:
-            tabs = [Tab.Transaction, Tab.Nft]
-            break
+    $: {
+        switch (activity.type) {
+            case ActivityType.Transaction:
+                tabs = [Tab.Transaction]
+                break
+            case ActivityType.Alias:
+                tabs = [Tab.Transaction, Tab.Alias]
+                break
+            case ActivityType.Nft:
+                tabs = [Tab.Transaction, Tab.Nft, ...(hasMetadata ? [Tab.Metadata] : [])]
+                break
+        }
     }
 
     let activeTab = Tab.Transaction
@@ -41,5 +53,7 @@
         <AliasActivityInformation {activity} />
     {:else if activeTab === Tab.Nft}
         <NftActivityInformation {activity} />
+    {:else if activeTab === Tab.Metadata}
+        <NftMetadataInformation {activity} />
     {/if}
 </activity-details>

packages/shared/components/molecules/NftActivityDetails.svelte

@@ -7,7 +7,7 @@
 
     import { Icon as IconEnum } from '@lib/auxiliary/icon'
 
-    export let activity: Activity
+    export let activity: Partial<Activity> = {}
 
     $: isTimelocked = activity?.asyncData?.timelockDate > $time
 </script>

packages/shared/components/molecules/activity-info/GenericActivityInformation.svelte

@@ -2,14 +2,14 @@
     import { KeyValueBox } from 'shared/components'
     import { formatDate, localize } from '@core/i18n'
     import { activeProfile } from '@core/profile'
-    import { formatTokenAmountPrecise, BaseActivity } from '@core/wallet'
+    import { Activity, formatTokenAmountPrecise } from '@core/wallet'
     import { BASE_TOKEN } from '@core/network'
     import { getOfficialExplorerUrl } from '@core/network/utils'
     import { Platform } from '@core/app'
     import { truncateString } from '@core/utils'
     import { setClipboard } from '@core/utils'
 
-    export let activity: BaseActivity
+    export let activity: Activity
 
     const explorerUrl = getOfficialExplorerUrl($activeProfile?.networkProtocol, $activeProfile?.networkType)
 

packages/shared/components/molecules/activity-info/NftActivityInformation.svelte

@@ -18,5 +18,7 @@
 </script>
 
 {#each Object.entries(detailsList) as [key, value]}
-    <KeyValueBox keyText={localize(`general.${key}`)} valueText={value} isCopyable />
+    {#if value}
+        <KeyValueBox keyText={localize(`general.${key}`)} valueText={value} isCopyable />
+    {/if}
 {/each}

packages/shared/components/molecules/activity-info/NftMetadataInformation.svelte

@@ -0,0 +1,80 @@
+<script lang="typescript">
+    import { KeyValueBox } from 'shared/components'
+
+    import { localize } from '@core/i18n'
+    import { getNftByIdFromAllAccountNfts, IIrc27Metadata } from '@core/nfts'
+    import { Activity, NftActivity } from '@core/wallet'
+    import { selectedAccountIndex } from '@core/account'
+
+    export let activity: Partial<Activity> = {}
+    export let nftMetadata: Partial<IIrc27Metadata> = {}
+
+    type NftMetadataDetailsList = {
+        [key in keyof IIrc27Metadata]: {
+            data: unknown
+            isTooltipVisible?: boolean
+        }
+    }
+
+    $: storedNft = getNftByIdFromAllAccountNfts($selectedAccountIndex, (activity as NftActivity)?.nftId)
+    $: nftMetadataDetailsList = createNftMetadataDetailsList(
+        storedNft?.parsedMetadata ?? (nftMetadata as IIrc27Metadata)
+    )
+
+    function createNftMetadataDetailsList(
+        metadata: IIrc27Metadata | string
+    ): NftMetadataDetailsList | { metadata: { data: string } } {
+        if (typeof metadata === 'string') {
+            return { metadata: { data: metadata } }
+        }
+        return createIrc27NftMetadataDetailsList(metadata)
+    }
+
+    function createIrc27NftMetadataDetailsList(metadata: IIrc27Metadata): NftMetadataDetailsList {
+        return {
+            ...(metadata?.standard && {
+                standard: { data: metadata.standard, isTooltipVisible: true },
+            }),
+            ...(metadata?.version && {
+                version: { data: metadata.version },
+            }),
+            ...(metadata?.name && {
+                name: { data: metadata.name },
+            }),
+            ...(metadata?.type && {
+                type: { data: metadata.type as string, isTooltipVisible: true },
+            }),
+            ...(metadata?.uri && {
+                uri: { data: metadata.uri },
+            }),
+            ...(metadata?.collectionId && {
+                collectionId: { data: metadata.collectionId, isTooltipVisible: true },
+            }),
+            ...(metadata?.collectionName && {
+                collectionName: { data: metadata.collectionName },
+            }),
+            ...(metadata?.royalties && {
+                royalties: { data: metadata.royalties, isTooltipVisible: true },
+            }),
+            ...(metadata?.issuerName && {
+                issuerName: { data: metadata.issuerName, isTooltipVisible: true },
+            }),
+            ...(metadata?.description && {
+                description: { data: metadata.description },
+            }),
+            ...(metadata?.attributes && {
+                attributes: { data: metadata.attributes, isTooltipVisible: true },
+            }),
+        }
+    }
+</script>
+
+{#each Object.entries(nftMetadataDetailsList) as [key, value]}
+    <KeyValueBox
+        keyText={localize(`views.collectibles.metadata.${key}`)}
+        valueText={value.data}
+        tooltipText={value.isTooltipVisible ? localize(`tooltips.transactionDetails.nftMetadata.${key}`) : undefined}
+        classes={key === 'metadata' ? 'whitespace-pre-wrap' : ''}
+        isCopyable
+    />
+{/each}

packages/shared/components/molecules/activity-info/index.js

@@ -1,3 +1,4 @@
 export { default as AliasActivityInformation } from './AliasActivityInformation'
 export { default as GenericActivityInformation } from './GenericActivityInformation'
 export { default as NftActivityInformation } from './NftActivityInformation'
+export { default as NftMetadataInformation } from './NftMetadataInformation'

packages/shared/components/popups/MintNftConfirmationPopup.svelte

@@ -1,9 +1,9 @@
 <script lang="typescript">
     import { onMount } from 'svelte'
-    import { Button, Text, FontWeight, NftActivityDetails, ActivityInformation } from 'shared/components'
+    import { Button, Text, FontWeight, NftActivityDetails, NftMetadataInformation } from 'shared/components'
     import { localize } from '@core/i18n'
     import { selectedAccount } from '@core/account'
-    import { ActivityDirection, mintNft, mintNftDetails } from '@core/wallet'
+    import { mintNft, mintNftDetails } from '@core/wallet'
     import { checkActiveProfileAuth } from '@core/profile'
     import { handleError } from '@core/error/handlers/handleError'
     import { closePopup, openPopup } from '@auxiliary/popup'
@@ -70,9 +70,9 @@
     <div class="space-y-2 max-h-100 scrollable-y flex-1">
         <nft-details>
             <NftActivityDetails />
-            <ActivityInformation
-                activity={{ metadata: JSON.stringify(actualMintDetails), direction: ActivityDirection.Outgoing }}
-            />
+            <div class="w-full h-full space-y-2 flex flex-auto flex-col flex-shrink-0">
+                <NftMetadataInformation nftMetadata={actualMintDetails} />
+            </div>
         </nft-details>
     </div>
     <div class="flex flex-row flex-nowrap w-full space-x-4">

packages/shared/lib/core/nfts/interfaces/nft.interface.ts

@@ -6,6 +6,6 @@ export interface INft {
     name: string
     issuer: AddressTypes
     metadata: string
-    parsedMetadata?: IIrc27Metadata
+    parsedMetadata?: IIrc27Metadata | string
     isOwned: boolean
 }

packages/shared/lib/core/nfts/utils/buildNftFromNftOutput.ts

@@ -11,7 +11,7 @@ export function buildNftFromNftOutput(nftOutput: INftOutput, outputId: string, i
     const parsedMetadata = parseNftMetadata(metadata)
     return {
         id,
-        name: parsedMetadata?.name ?? DEFAULT_NFT_NAME,
+        name: typeof parsedMetadata === 'string' ? DEFAULT_NFT_NAME : parsedMetadata?.name ?? DEFAULT_NFT_NAME,
         issuer,
         isOwned,
         metadata,

packages/shared/lib/core/nfts/utils/parseNftMetadata.ts

@@ -1,22 +1,110 @@
-import { IIrc27Metadata, MimeType } from '@core/nfts'
+import { networkHrp } from '@core/network'
+import { IIrc27Metadata, MimeType, SupportedMimeType } from '@core/nfts'
+import { isValidUri, validateBech32Address } from '@core/utils'
 import { Converter } from '@core/utils/convert'
+import { TokenStandard } from '@core/wallet'
+import { get } from 'svelte/store'
 
-export function parseNftMetadata(metadata: string): IIrc27Metadata {
-    const parsedData = metadata ? JSON.parse(Converter.hexToUtf8(metadata)) : {}
+export function parseNftMetadata(metadata: string): IIrc27Metadata | string {
+    try {
+        const convertedData = Converter.hexToUtf8(metadata)
+        if (!convertedData.includes(`"standard":"${TokenStandard.IRC27}"`)) {
+            return JSON.stringify(JSON.parse(convertedData), null, 2)
+        }
 
-    // TODO: Add some validation that everything is correct
-    const parsedMetadata: IIrc27Metadata = {
-        standard: parsedData.standard,
-        version: parsedData.version,
-        type: parsedData.type as MimeType,
-        uri: parsedData.uri,
-        name: parsedData.name,
-        collectionName: parsedData.collectionName,
-        royalties: parsedData.royalties,
-        issuerName: parsedData.issuerName,
-        description: parsedData.description,
-        attributes: parsedData.attributes,
+        const parsedData = metadata ? JSON.parse(Converter.hexToUtf8(metadata)) : {}
+        validate(parsedData)
+        const parsedMetadata: IIrc27Metadata = {
+            standard: parsedData.standard,
+            version: parsedData.version,
+            type: parsedData.type as MimeType,
+            uri: parsedData.uri,
+            name: parsedData.name,
+            collectionName: parsedData.collectionName,
+            royalties: parsedData.royalties,
+            issuerName: parsedData.issuerName,
+            description: parsedData.description,
+            attributes: parsedData.attributes,
+        }
+        return parsedMetadata
+    } catch (error) {
+        return undefined
+    }
+}
+
+function validate(data: IIrc27Metadata): void {
+    if (!data.standard || data.standard !== TokenStandard.IRC27) {
+        throw 'Invalid standard, must be "IRC27"'
+    }
+
+    if (!Object.keys(SupportedMimeType).includes(data.type)) {
+        throw 'Invalid MimeType, check if the file type is supported'
+    }
+
+    if (data.name.length === 0) {
+        throw 'Empty name, it is a required field'
     }
 
-    return parsedMetadata
+    if (data.uri.length === 0) {
+        throw 'Empty URI'
+    } else if (!isValidUri(data.uri)) {
+        throw 'Invalid URI'
+    }
+
+    if (data.royalties) {
+        validateRoyalties(data)
+    }
+
+    if (data.attributes) {
+        validateAttributes(data)
+    }
+}
+
+function validateRoyalties(data: IIrc27Metadata): void {
+    const isKeysValid = Object.keys(data.royalties).every((key) => !validateBech32Address(get(networkHrp), key))
+    if (!isKeysValid) {
+        throw `Invalid royalty address, must be a valid ${get(networkHrp)} address where royalties will be sent to.`
+    }
+
+    const isValuesValid = Object.values(data.royalties).every((value) => value >= 0 && value <= 1)
+    if (!isValuesValid) {
+        throw 'Invalid royalty value, it must be a numeric decimal representative of the percentage required ie. 0.05'
+    }
+
+    const isSumValid = Object.values(data.royalties).reduce((acc, val) => acc + val, 0) <= 1
+    if (!isSumValid) {
+        throw 'Invalid royalty value, the sum of all royalties must be less than or equal to 1'
+    }
+}
+
+function validateAttributes(data: IIrc27Metadata): void {
+    if (!Array.isArray(data.attributes)) {
+        throw 'Attributes must be an array'
+    }
+    const isArrayOfObjects = data.attributes.every(
+        (attribute) => typeof attribute === 'object' && !Array.isArray(attribute) && attribute !== null
+    )
+    if (!isArrayOfObjects) {
+        throw 'Attributes must be an array of objects'
+    }
+    const isKeysValid = data.attributes.every(
+        (attribute) =>
+            Object.keys(attribute).every((key) => key === 'trait_type' || key === 'value') &&
+            Object.keys(attribute).filter((key) => key === 'trait_type').length === 1 &&
+            Object.keys(attribute).filter((key) => key === 'value').length === 1
+    )
+    if (!isKeysValid) {
+        throw 'Invalid key, attributes must have the keys "trait_type" and "value"'
+    }
+    const isValuesValid = data.attributes.every(
+        (attribute) =>
+            (typeof attribute.trait_type === 'string' &&
+                attribute.trait_type.length > 0 &&
+                typeof attribute.value === 'string' &&
+                attribute.value.length > 0) ||
+            typeof attribute.value === 'number'
+    )
+    if (!isValuesValid) {
+        throw 'Invalid value, "trait_type" must be a non empty string and "value" must be a non empty string or a number'
+    }
 }

packages/shared/locales/en.json

@@ -572,7 +572,8 @@
                 "royalties": "Royalties",
                 "issuerName": "Issuer Name",
                 "description": "Description",
-                "attributes": "Attributes"
+                "attributes": "Attributes",
+                "metadata": "Metadata"
             }
         }
     },