wallet-ext: display non-transferable nfts

apps/wallet/font-icons/output/sui-icons.scss

@@ -35,16 +35,17 @@
 .sui-icons-hand-coins:before { content: "\ea12"; }
 .sui-icons-history:before { content: "\ea13"; }
 .sui-icons-logout:before { content: "\ea14"; }
-.sui-icons-nfts:before { content: "\ea15"; }
-.sui-icons-percentage-polygon:before { content: "\ea16"; }
-.sui-icons-person:before { content: "\ea17"; }
-.sui-icons-search:before { content: "\ea18"; }
-.sui-icons-sui-chevron-right:before { content: "\ea19"; }
-.sui-icons-sui-logo-icon:before { content: "\ea1a"; }
-.sui-icons-sui-logo-txt:before { content: "\ea1b"; }
-.sui-icons-swap:before { content: "\ea1c"; }
-.sui-icons-tokens:before { content: "\ea1d"; }
-.sui-icons-version-icon:before { content: "\ea1e"; }
+.sui-icons-nft-type-image:before { content: "\ea15"; }
+.sui-icons-nfts:before { content: "\ea16"; }
+.sui-icons-percentage-polygon:before { content: "\ea17"; }
+.sui-icons-person:before { content: "\ea18"; }
+.sui-icons-search:before { content: "\ea19"; }
+.sui-icons-sui-chevron-right:before { content: "\ea1a"; }
+.sui-icons-sui-logo-icon:before { content: "\ea1b"; }
+.sui-icons-sui-logo-txt:before { content: "\ea1c"; }
+.sui-icons-swap:before { content: "\ea1d"; }
+.sui-icons-tokens:before { content: "\ea1e"; }
+.sui-icons-version-icon:before { content: "\ea1f"; }
 
 $sui-icons-Buy: "\ea01";
 $sui-icons-Download: "\ea02";
@@ -66,14 +67,15 @@ $sui-icons-globe: "\ea11";
 $sui-icons-hand-coins: "\ea12";
 $sui-icons-history: "\ea13";
 $sui-icons-logout: "\ea14";
-$sui-icons-nfts: "\ea15";
-$sui-icons-percentage-polygon: "\ea16";
-$sui-icons-person: "\ea17";
-$sui-icons-search: "\ea18";
-$sui-icons-sui-chevron-right: "\ea19";
-$sui-icons-sui-logo-icon: "\ea1a";
-$sui-icons-sui-logo-txt: "\ea1b";
-$sui-icons-swap: "\ea1c";
-$sui-icons-tokens: "\ea1d";
-$sui-icons-version-icon: "\ea1e";
+$sui-icons-nft-type-image: "\ea15";
+$sui-icons-nfts: "\ea16";
+$sui-icons-percentage-polygon: "\ea17";
+$sui-icons-person: "\ea18";
+$sui-icons-search: "\ea19";
+$sui-icons-sui-chevron-right: "\ea1a";
+$sui-icons-sui-logo-icon: "\ea1b";
+$sui-icons-sui-logo-txt: "\ea1c";
+$sui-icons-swap: "\ea1d";
+$sui-icons-tokens: "\ea1e";
+$sui-icons-version-icon: "\ea1f";
 

apps/wallet/font-icons/output/sui-icons.ts

@@ -22,6 +22,7 @@ export enum SuiIcons {
   HandCoins = "sui-icons-hand-coins",
   History = "sui-icons-history",
   Logout = "sui-icons-logout",
+  NftTypeImage = "sui-icons-nft-type-image",
   Nfts = "sui-icons-nfts",
   PercentagePolygon = "sui-icons-percentage-polygon",
   Person = "sui-icons-person",
@@ -34,6 +35,6 @@ export enum SuiIcons {
   VersionIcon = "sui-icons-version-icon"
 }
 
-export type SuiIconsClassname = "sui-icons-Buy" | "sui-icons-Download" | "sui-icons-Info" | "sui-icons-Plus" | "sui-icons-Preview" | "sui-icons-ThumbsUp" | "sui-icons-Union" | "sui-icons-activity" | "sui-icons-apps" | "sui-icons-arrow-left" | "sui-icons-arrow-right" | "sui-icons-checkmark" | "sui-icons-chevron-down" | "sui-icons-clipboard" | "sui-icons-close" | "sui-icons-coins" | "sui-icons-globe" | "sui-icons-hand-coins" | "sui-icons-history" | "sui-icons-logout" | "sui-icons-nfts" | "sui-icons-percentage-polygon" | "sui-icons-person" | "sui-icons-search" | "sui-icons-sui-chevron-right" | "sui-icons-sui-logo-icon" | "sui-icons-sui-logo-txt" | "sui-icons-swap" | "sui-icons-tokens" | "sui-icons-version-icon"
-export type SuiIconsIcon = "Buy" | "Download" | "Info" | "Plus" | "Preview" | "ThumbsUp" | "Union" | "activity" | "apps" | "arrow-left" | "arrow-right" | "checkmark" | "chevron-down" | "clipboard" | "close" | "coins" | "globe" | "hand-coins" | "history" | "logout" | "nfts" | "percentage-polygon" | "person" | "search" | "sui-chevron-right" | "sui-logo-icon" | "sui-logo-txt" | "swap" | "tokens" | "version-icon"
+export type SuiIconsClassname = "sui-icons-Buy" | "sui-icons-Download" | "sui-icons-Info" | "sui-icons-Plus" | "sui-icons-Preview" | "sui-icons-ThumbsUp" | "sui-icons-Union" | "sui-icons-activity" | "sui-icons-apps" | "sui-icons-arrow-left" | "sui-icons-arrow-right" | "sui-icons-checkmark" | "sui-icons-chevron-down" | "sui-icons-clipboard" | "sui-icons-close" | "sui-icons-coins" | "sui-icons-globe" | "sui-icons-hand-coins" | "sui-icons-history" | "sui-icons-logout" | "sui-icons-nft-type-image" | "sui-icons-nfts" | "sui-icons-percentage-polygon" | "sui-icons-person" | "sui-icons-search" | "sui-icons-sui-chevron-right" | "sui-icons-sui-logo-icon" | "sui-icons-sui-logo-txt" | "sui-icons-swap" | "sui-icons-tokens" | "sui-icons-version-icon"
+export type SuiIconsIcon = "Buy" | "Download" | "Info" | "Plus" | "Preview" | "ThumbsUp" | "Union" | "activity" | "apps" | "arrow-left" | "arrow-right" | "checkmark" | "chevron-down" | "clipboard" | "close" | "coins" | "globe" | "hand-coins" | "history" | "logout" | "nft-type-image" | "nfts" | "percentage-polygon" | "person" | "search" | "sui-chevron-right" | "sui-logo-icon" | "sui-logo-txt" | "swap" | "tokens" | "version-icon"
 export const SuiIconsPrefix = "sui-icons-"

apps/wallet/src/ui/app/components/nft-display/NFTDisplay.module.scss

@@ -8,33 +8,68 @@
     width: 100%;
     margin: auto;
 
-    img {
-        width: 100%;
+    .img {
         object-fit: cover;
-        border-radius: 6px;
+    }
+
+    .no-media {
+        background: linear-gradient(165.96deg, #e6f5ff 9.97%, #ebecff 94.97%);
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        color: colors.$sui-blue-steel-dark;
+        text-transform: uppercase;
+        user-select: none;
+
+        @include utils.typography('Primary/CAPTIONSMALL-M');
+    }
+
+    .no-media-icon {
+        font-size: 20px;
+    }
+
+    .no-media-text {
+        margin-top: 13px;
+    }
+
+    .no-media-text-wide-view {
+        text-transform: uppercase;
+
+        @include utils.typography('ParagraphPrimary/P2-R');
+    }
+
+    .no-media,
+    .img {
+        width: 100%;
+        border-radius: 4px;
         height: 100%;
     }
 
     &.small {
         width: 98px;
 
-        img {
+        .img,
+        .no-media {
             height: 98px;
         }
     }
 
     &.medium {
         width: 150px;
 
-        img {
+        .img,
+        .no-media {
             height: 150px;
         }
     }
 
     &.large {
         width: 180px;
 
-        img {
+        .img,
+        .no-media {
             height: 180px;
         }
     }
@@ -83,9 +118,11 @@
         flex-flow: row-reverse;
         gap: 10px;
 
-        .img {
+        .img,
+        .no-media {
             width: 50px;
             height: 50px;
+            flex-shrink: 0;
         }
 
         .nftfields {

apps/wallet/src/ui/app/components/nft-display/index.tsx

@@ -5,12 +5,15 @@ import cl from 'classnames';
 import ExplorerLink from '_components/explorer-link';
 import { ExplorerLinkType } from '_components/explorer-link/ExplorerLinkType';
 import Icon, { SuiIcons } from '_components/icon';
-import { useNFTBasicData } from '_hooks';
+import { useMiddleEllipsis, useNFTBasicData } from '_hooks';
 
 import type { SuiObject as SuiObjectType } from '@mysten/sui.js';
 
 import st from './NFTDisplay.module.scss';
 
+const OBJ_TYPE_MAX_LENGTH = 20;
+const OBJ_TYPE_MAX_PREFIX_LENGTH = 3;
+
 export type NFTsProps = {
     nftobj: SuiObjectType;
     showlabel?: boolean;
@@ -26,16 +29,26 @@ function NFTDisplayCard({
     expandable,
     wideview,
 }: NFTsProps) {
-    const { filePath, nftObjectID, nftFields, fileExtentionType } =
+    const { filePath, nftObjectID, nftFields, fileExtentionType, objType } =
         useNFTBasicData(nftobj);
 
     const name = nftFields?.name || nftFields?.metadata?.fields?.name;
-
+    const objIDShort = useMiddleEllipsis(nftObjectID);
+    const nftTypeShort = useMiddleEllipsis(
+        objType,
+        OBJ_TYPE_MAX_LENGTH,
+        OBJ_TYPE_MAX_PREFIX_LENGTH
+    );
+    const displayTitle = name || objIDShort;
     const wideviewSection = (
         <div className={st.nftfields}>
-            <div className={st.nftName}>{name}</div>
+            <div className={st.nftName}>{displayTitle}</div>
             <div className={st.nftType}>
-                {fileExtentionType?.name} {fileExtentionType.type}
+                {filePath ? (
+                    `${fileExtentionType.name} ${fileExtentionType.type}`
+                ) : (
+                    <span className={st.noMediaTextWideView}>NO MEDIA</span>
+                )}
             </div>
         </div>
     );
@@ -54,20 +67,31 @@ function NFTDisplayCard({
                     </ExplorerLink>
                 </div>
             ) : null}
-            {showlabel && name ? (
-                <div className={st.nftfields}>{name}</div>
+            {showlabel && displayTitle ? (
+                <div className={st.nftfields}>{displayTitle}</div>
             ) : null}
         </>
     );
 
     return (
         <div className={cl(st.nftimage, wideview && st.wideview, st[size])}>
-            {filePath && (
+            {filePath ? (
                 <img
                     className={cl(st.img)}
                     src={filePath}
                     alt={fileExtentionType?.name || 'NFT'}
+                    title={nftTypeShort}
                 />
+            ) : (
+                <div className={st.noMedia} title={nftTypeShort}>
+                    <Icon
+                        className={st.noMediaIcon}
+                        icon={SuiIcons.NftTypeImage}
+                    />
+                    {wideview ? null : (
+                        <span className={st.noMediaText}>No media</span>
+                    )}
+                </div>
             )}
             {wideview ? wideviewSection : defaultSection}
         </div>

apps/wallet/src/ui/app/hooks/useMiddleEllipsis.ts

@@ -5,8 +5,8 @@ import { useMemo } from 'react';
 
 export default function useMiddleEllipsis(
     txt: string | null,
-    maxLength = 14,
-    maxLengthBeginning?: number
+    maxLength = 10,
+    maxLengthBeginning = 6
 ) {
     return useMemo(() => {
         if (!txt) {

apps/wallet/src/ui/app/hooks/useNFTBasicData.ts

@@ -11,14 +11,18 @@ import type { SuiObject } from '@mysten/sui.js';
 export default function useNFTBasicData(nftObj: SuiObject) {
     const nftObjectID = getObjectId(nftObj.reference);
     const filePath = useMediaUrl(nftObj.data);
-    const nftFields = isSuiMoveObject(nftObj.data)
-        ? getObjectFields(nftObj.data)
-        : null;
+    let objType = null;
+    let nftFields = null;
+    if (isSuiMoveObject(nftObj.data)) {
+        objType = nftObj.data.type;
+        nftFields = getObjectFields(nftObj.data);
+    }
     const fileExtentionType = useFileExtentionType(filePath || '');
     return {
         nftObjectID,
         filePath,
         nftFields,
         fileExtentionType,
+        objType,
     };
 }

apps/wallet/src/ui/app/pages/home/nft-details/NFTDetails.module.scss

@@ -19,12 +19,16 @@
         justify-content: center;
         color: colors.$white;
 
-        &:hover {
-            background-color: colors.$sui-blue;
+        &:visited {
             color: colors.$white;
         }
 
-        &:visited {
+        &:disabled {
+            opacity: 0.4;
+        }
+
+        &:hover:not(:disabled) {
+            background-color: colors.$sui-blue;
             color: colors.$white;
         }
     }

apps/wallet/src/ui/app/pages/home/nft-details/index.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { getObjectId } from '@mysten/sui.js';
+import { getObjectId, hasPublicTransfer } from '@mysten/sui.js';
 import cl from 'classnames';
 import { useMemo, useState, useCallback } from 'react';
 import { Navigate, useSearchParams } from 'react-router-dom';
@@ -25,8 +25,6 @@ import type { ButtonHTMLAttributes } from 'react';
 
 import st from './NFTDetails.module.scss';
 
-const TRUNCATE_MAX_LENGTH = 10;
-const TRUNCATE_PREFIX_LENGTH = 6;
 function NFTdetailsContent({
     nft,
     onClick,
@@ -35,13 +33,8 @@ function NFTdetailsContent({
     onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
 }) {
     const { nftObjectID, nftFields, fileExtentionType } = useNFTBasicData(nft);
-
-    const shortAddress = useMiddleEllipsis(
-        nftObjectID,
-        TRUNCATE_MAX_LENGTH,
-        TRUNCATE_PREFIX_LENGTH
-    );
-
+    const isTransferable = hasPublicTransfer(nft);
+    const shortAddress = useMiddleEllipsis(nftObjectID);
     const NFTDetails = (
         <div className={st.nftDetails}>
             <div className={st.nftDetailsInner}>
@@ -95,7 +88,7 @@ function NFTdetailsContent({
     return (
         <div className={st.container}>
             <PageTitle
-                title={nftFields?.name}
+                title={nftFields?.name || shortAddress}
                 backLink="/nfts"
                 className={st.pageTitle}
                 hideBackLabel={true}
@@ -120,6 +113,12 @@ function NFTdetailsContent({
                             st.sendNftBtn,
                             'primary'
                         )}
+                        disabled={!isTransferable}
+                        title={
+                            isTransferable
+                                ? undefined
+                                : "Unable to send. NFT doesn't have public transfer method"
+                        }
                     >
                         <Icon
                             icon={SuiIcons.ArrowLeft}

apps/wallet/src/ui/app/pages/home/nft-details/transfer-nft/index.tsx

@@ -113,6 +113,7 @@ function TransferNFTCard({ objectId }: TransferProps) {
                 title="Send NFT"
                 backLink="/nfts"
                 className={st.pageTitle}
+                hideBackLabel={true}
             />
             <div className={st.content}>
                 {selectedNFTObj && (

apps/wallet/src/ui/app/pages/home/nfts/index.tsx

@@ -1,7 +1,6 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
-import { hasPublicTransfer } from '@mysten/sui.js';
-import { useMemo } from 'react';
+
 import { Link } from 'react-router-dom';
 
 import { Content } from '_app/shared/bottom-menu-layout';
@@ -14,22 +13,18 @@ import st from './NFTPage.module.scss';
 
 function NftsPage() {
     const nfts = useAppSelector(accountNftsSelector);
-    const filteredNfts = useMemo(
-        () => nfts.filter((nft) => hasPublicTransfer(nft)),
-        [nfts]
-    );
 
     return (
         <div className={st.container}>
             <PageTitle
                 title="NFTs"
-                stats={`${filteredNfts.length}`}
+                stats={`${nfts.length}`}
                 className={st.pageTitle}
             />
             <Content>
                 <section className={st.nftGalleryContainer}>
                     <section className={st.nftGallery}>
-                        {filteredNfts.map((nft) => (
+                        {nfts.map((nft) => (
                             <Link
                                 to={`/nft-details?${new URLSearchParams({
                                     objectId: nft.reference.objectId,