fix: do not print size and name when meta is unknown (#297)

* fix: do not print zero when size is unknown

* fix: do not print name if it is the same as the hash

* feat: shorten asset name

src/pages/files/AssetPreview.tsx

@@ -3,9 +3,10 @@ import { Web } from '@material-ui/icons'
 import { ReactElement } from 'react'
 import { File, Folder } from 'react-feather'
 import { FitImage } from '../../components/FitImage'
+import { shortenText } from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'
-import { AssetIcon } from './AssetIcon'
 import { shortenHash } from '../../utils/hash'
+import { AssetIcon } from './AssetIcon'
 
 interface Props {
   previewUri?: string
@@ -37,11 +38,13 @@ export function AssetPreview({ metadata, previewUri }: Props): ReactElement | nu
           )}
           <Box p={2}>
             {metadata?.hash && <Typography>Swarm Hash: {shortenHash(metadata.hash)}</Typography>}
-            <Typography>
-              {metadata?.type === 'folder' ? 'Folder Name' : 'Filename'}: {metadata?.name}
-            </Typography>
+            {metadata?.name && metadata?.name !== metadata?.hash && (
+              <Typography>
+                {metadata?.type === 'folder' ? 'Folder Name' : 'Filename'}: {shortenText(metadata?.name)}
+              </Typography>
+            )}
             <Typography>Kind: {type}</Typography>
-            {metadata?.size && <Typography>Size: {getHumanReadableFileSize(metadata.size)}</Typography>}
+            {metadata?.size ? <Typography>Size: {getHumanReadableFileSize(metadata.size)}</Typography> : null}
           </Box>
         </Grid>
       </Box>

src/utils/index.ts

@@ -192,3 +192,11 @@ export function calculateStampPrice(depth: number, amount: number, currentPrice:
 
   return (amount * 2 ** (depth - 16) * price) / 1e16
 }
+
+export function shortenText(text: string, length = 20, separator = '[…]'): string {
+  if (text.length <= length * 2 + separator.length) {
+    return text
+  }
+
+  return `${text.slice(0, length)}${separator}${text.slice(-length)}`
+}