[DDW-942] Display ascii name when name is missing

Author: Lucas Araujo

source/renderer/app/components/assets/Asset.scss

@@ -75,6 +75,10 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  &.ascii {
+    color: var(--theme-tokens-list-header-text-color);
+  }
 }
 
 .metadata {

source/renderer/app/components/assets/Asset.tsx

@@ -5,7 +5,7 @@ import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import { defineMessages, intlShape } from 'react-intl';
 import { observer } from 'mobx-react';
 import styles from './Asset.scss';
-import { ellipsis } from '../../utils/strings';
+import { ellipsis, hexToString } from '../../utils/strings';
 import AssetContent from './AssetContent';
 import settingsIcon from '../../assets/images/asset-token-settings-ic.inline.svg';
 import warningIcon from '../../assets/images/asset-token-warning-ic.inline.svg';
@@ -173,8 +173,18 @@ class Asset extends Component<Props, State> {
       hasWarning,
       hasError,
     } = this.props;
-    const { fingerprint, metadata, decimals, recommendedDecimals } = asset;
-    const { name } = metadata || {};
+    const {
+      fingerprint,
+      metadata,
+      decimals,
+      recommendedDecimals,
+      assetName,
+    } = asset;
+    const hasName = !!metadata?.name;
+    const name = metadata?.name || `ASCII: ${hexToString(assetName)}`;
+    const displayName = metadataNameChars
+      ? ellipsis(name, metadataNameChars)
+      : name;
     const contentStyles = classnames([
       styles.pill,
       hasError ? styles.error : null,
@@ -196,9 +206,14 @@ class Asset extends Component<Props, State> {
             ? fingerprint
             : ellipsis(fingerprint || '', startCharAmount, endCharAmount)}
         </div>
-        {name && (
-          <div className={styles.metadataName}>
-            {metadataNameChars ? ellipsis(name, metadataNameChars) : name}
+        {displayName && (
+          <div
+            className={classnames(
+              styles.metadataName,
+              !hasName && styles.ascii
+            )}
+          >
+            {displayName}
           </div>
         )}
         {hasWarning && (