feat/add NftPlaceholder component with rough outline

packages/shared/components/atoms/tiles/tileContents/NftActivityTileContent.svelte

@@ -2,9 +2,8 @@
     import { localize } from '@core/i18n'
     import { ActivityDirection, InclusionState, INftActivityData, Subject } from '@core/wallet'
     import { truncateString } from '@core/utils'
-    import { Text, FontWeight, Icon } from 'shared/components'
+    import { Text, FontWeight, NftMediaContainer, NftMediaSize } from 'shared/components'
     import { networkHrp } from '@core/network'
-    import { Icon as IconEnum } from '@lib/auxiliary/icon'
 
     export let inclusionState: InclusionState
     export let data: INftActivityData
@@ -41,14 +40,7 @@
 </script>
 
 <div class="relative flex w-8 h-8">
-    <div class="rounded-full flex justify-center items-center transition-none p-1 w-8 h-8 bg-gray-500">
-        <Icon
-            icon={IconEnum.Collectibles}
-            width="83.33333%"
-            height="83.33333%"
-            classes="text-white dark:text-gray-800 text-center"
-        />
-    </div>
+    <NftMediaContainer nftId={data.nftId} size={NftMediaSize.Small} />
 </div>
 
 <div class="flex flex-col w-full space-y-0.5">

packages/shared/components/enums/index.ts

@@ -2,4 +2,5 @@ export * from './button-type.enum'
 export * from './button-variant.enum'
 export * from './button-size.enum'
 export * from './font-weight.enum'
+export * from './nft-media-size.enum'
 export * from './text-type.enum'

packages/shared/components/enums/nft-media-size.enum.ts

@@ -0,0 +1,7 @@
+export enum NftMediaSize {
+    ExtraSmall = 'extraSmall',
+    Small = 'small',
+    Medium = 'medium',
+    Large = 'large',
+    ExtraLarge = 'extraLarge',
+}

packages/shared/components/molecules/NftMediaContainer.svelte

@@ -0,0 +1,73 @@
+<script lang="typescript">
+    import { selectedAccountIndex } from '@core/account'
+    import { getNftByIdFromAllAccountNfts } from '@core/nfts'
+    import { NftMediaSize, NftPlaceholderIcon } from 'shared/components'
+
+    export let size: NftMediaSize = NftMediaSize.Medium
+    export let nftId: string
+    export let shape: 'square' | 'circle' | 'squircle' = 'squircle'
+    $: nft = getNftByIdFromAllAccountNfts($selectedAccountIndex, nftId)
+
+    let width
+    let height
+    let radius
+    let padding
+    $: size, setShapeAndSize()
+    function setShapeAndSize(): void {
+        switch (size) {
+            case NftMediaSize.ExtraSmall:
+                width = 6
+                height = 6
+                // squircle or circle
+                radius = shape === 'squircle' ? 'md' : 'full'
+                padding = 2
+                break
+            case NftMediaSize.Small:
+                width = 8
+                height = 8
+                // squircle or circle
+                radius = shape === 'squircle' ? 'lg' : 'full'
+                padding = 2
+                break
+            case NftMediaSize.Medium:
+                width = 20
+                height = 20
+                // squircle or circle
+                radius = shape === 'squircle' ? 'xl' : 'full'
+                padding = 2
+                break
+            case NftMediaSize.Large:
+                width = 60
+                height = 60
+                // squircle or circle
+                radius = shape === 'squircle' ? '2xl' : 'full'
+                padding = 2
+                break
+            case NftMediaSize.ExtraLarge:
+                width = 96
+                height = 9
+                // squircle or circle
+                radius = shape === 'squircle' ? '2xl' : 'full'
+                break
+        }
+
+        // if square remove radius
+        radius = shape === 'square' ? 'none' : radius
+    }
+
+    const isLoaded = false
+</script>
+
+<div class="flex w-full items-center justify-center">
+    <div
+        class="flex justify-center items-center transition-none p-{padding} bg-gray-500 w-{width} h-{height} rounded-{radius} "
+    >
+        {#if !isLoaded}
+            <NftPlaceholderIcon {nft} />
+        {:else}
+            <div>
+                <!-- Loaded and Secure NFT Media  -->
+            </div>
+        {/if}
+    </div>
+</div>

packages/shared/components/molecules/NftPlaceholderIcon.svelte

@@ -0,0 +1,37 @@
+<script lang="typescript">
+    import { INft, ParentMimeType } from '@core/nfts'
+    import { Icon } from 'shared/components'
+    import { Icon as IconEnum } from '@auxiliary/icon'
+
+    export let nft: INft = undefined
+
+    const width = '100%'
+    const height = '100%'
+
+    $: icon = mapNftToIcon(nft)
+
+    function mapNftToIcon(nft: INft): IconEnum {
+        const nftType = nft?.parsedMetadata?.type?.split('/', 1)
+
+        switch (nftType?.[0]) {
+            case ParentMimeType.Image:
+                return IconEnum.Picture
+            case ParentMimeType.Video:
+                return IconEnum.Play
+            case ParentMimeType.Audio:
+                return IconEnum.Bell
+            case ParentMimeType.Text:
+                return IconEnum.Doc
+            case ParentMimeType.Application:
+                return IconEnum.Parchment
+            case ParentMimeType.Model:
+                return IconEnum.Help
+            case ParentMimeType.Font:
+                return IconEnum.Language
+            default:
+                return IconEnum.Collectibles
+        }
+    }
+</script>
+
+<Icon {icon} {width} {height} classes="text-white dark:text-gray-800 text-center" />

packages/shared/components/molecules/index.js

@@ -5,6 +5,8 @@ export { default as DateInputButton } from './DateInputButton.svelte'
 export { default as ExpirationTimePicker } from './ExpirationTimePicker.svelte'
 export { default as FoundryDetails } from './FoundryDetails.svelte'
 export { default as NftDetails } from './NftDetails.svelte'
+export { default as NftMediaContainer } from './NftMediaContainer.svelte'
+export { default as NftPlaceholderIcon } from './NftPlaceholderIcon.svelte'
 export { default as SelectorInput } from './SelectorInput.svelte'
 export { default as ShimmerClaimingAccountList } from './ShimmerClaimingAccountList.svelte'
 export { default as TransactionDetails } from './TransactionDetails.svelte'

packages/shared/components/popups/send/SendNftFormPopup.svelte

@@ -7,7 +7,15 @@
         selectedAccountActivities,
         updateNewNftTransactionDetails,
     } from '@core/wallet'
-    import { Button, Text, RecipientInput, NftInput, FontWeight } from 'shared/components'
+    import {
+        Button,
+        Text,
+        RecipientInput,
+        NftInput,
+        NftMediaSize,
+        NftMediaContainer,
+        FontWeight,
+    } from 'shared/components'
     import { closePopup, openPopup } from '@auxiliary/popup'
     import type { FeatureTypes } from '@iota/types'
 
@@ -51,6 +59,7 @@
     <Text type="h3" fontWeight={FontWeight.semibold} classes="text-left">
         {localize('popups.sendNft.formTitle')}
     </Text>
+    <NftMediaContainer {nftId} size={NftMediaSize.Medium} />
     <send-form-inputs class="flex flex-col space-y-4">
         <NftInput bind:nftId />
         <RecipientInput bind:this={recipientInput} bind:recipient />

packages/shared/lib/auxiliary/icon/constants/icon-svg.ts

@@ -57,6 +57,7 @@ import {
     MINUS_SVG,
     NETWORK_SVG,
     PARCHMENT_SVG,
+    PICTURE_SVG,
     PLAY_SVG,
     PLUS_SVG,
     PROFILE_SVG,
@@ -165,6 +166,7 @@ export const ICON_SVG = {
     [Icon.Network]: NETWORK_SVG,
     [Icon.NotVerified]: NOT_VERIFIED_SVG,
     [Icon.Parchment]: PARCHMENT_SVG,
+    [Icon.Picture]: PICTURE_SVG,
     [Icon.Play]: PLAY_SVG,
     [Icon.Plus]: PLUS_SVG,
     [Icon.Profile]: PROFILE_SVG,

packages/shared/lib/auxiliary/icon/enums/icon.enum.ts

@@ -60,6 +60,7 @@ export enum Icon {
     Network = 'network',
     NotVerified = 'not-verified',
     Parchment = 'parchment',
+    Picture = 'picture',
     Play = 'play',
     Plus = 'plus',
     Profile = 'profile',

packages/shared/lib/auxiliary/icon/svgs/index.ts

@@ -56,6 +56,7 @@ export * from './minus.svg'
 export * from './network.svg'
 export * from './not-verified.svg'
 export * from './parchment.svg'
+export * from './picture.svg'
 export * from './play.svg'
 export * from './plus.svg'
 export * from './profile.svg'

packages/shared/lib/auxiliary/icon/svgs/picture.svg.ts

@@ -0,0 +1,16 @@
+import { ISvg } from '../interfaces'
+
+export const PICTURE_SVG: ISvg = {
+    width: 24,
+    height: 24,
+    path: [
+        {
+            d: 'M15.5 10C16.3284 10 17 9.32843 17 8.5C17 7.67157 16.3284 7 15.5 7C14.6716 7 14 7.67157 14 8.5C14 9.32843 14.6716 10 15.5 10Z',
+        },
+        {
+            d: 'M7 2C4.23858 2 2 4.23858 2 7V17C2 19.7614 4.23858 22 7 22H17C19.7614 22 22 19.7614 22 17V7C22 4.23858 19.7614 2 17 2H7ZM17 4H7C5.34315 4 4 5.34315 4 7V13.9555L6.47255 12.0324C8.21133 10.68 10.6303 10.6249 12.4289 11.8966L15.356 13.9663C16.1641 14.5376 17.2019 14.6737 18.13 14.33L20 13.6374V7C20 5.34315 18.6569 4 17 4ZM4 17V16.4892L7.70043 13.6111C8.7437 12.7997 10.1951 12.7666 11.2742 13.5296L14.2014 15.5993C15.5481 16.5516 17.2779 16.7784 18.8246 16.2055L20 15.7702V17C20 18.6569 18.6569 20 17 20H7C5.34315 20 4 18.6569 4 17Z',
+            fillRule: 'evenodd',
+            clipRule: 'evenodd',
+        },
+    ],
+}

packages/shared/lib/core/nfts/enums/index.ts

@@ -0,0 +1 @@
+export * from './parent-mime-type.enum'

packages/shared/lib/core/nfts/enums/parent-mime-type.enum.ts

@@ -0,0 +1,9 @@
+export enum ParentMimeType {
+    Image = 'image',
+    Video = 'video',
+    Audio = 'audio',
+    Text = 'text',
+    Application = 'application',
+    Model = 'model',
+    Font = 'font',
+}

packages/shared/lib/core/nfts/index.ts

@@ -1,5 +1,6 @@
 export * from './actions'
 export * from './constants'
+export * from './enums'
 export * from './interfaces'
 export * from './stores'
 export * from './types'

packages/shared/tailwind.config.js

@@ -34,6 +34,7 @@ module.exports = {
                 /^hover:font-/,
                 /^dark:font-/,
                 /^grid-cols-/,
+                /^rounded-/,
                 // `p-${size}`
                 /^p-/,
                 'scheme-dark',