Merge pull request #2904 from input-output-hk/feature/ddw-942-display-ascii-when-token-has-no-name

[DDW-942] Design ASCII display for when a token doesn't have a name

Author: DominikGuzei

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Features
 
+- Added ASCII name to token header when metadata name is missing ([PR 2904](https://github.com/input-output-hk/daedalus/pull/2904))
 - Improved IPC by reducing the amount of messages from periodic events ([PR 2892](https://github.com/input-output-hk/daedalus/pull/2892))
 - Improved RTS flags splash screen message ([PR 2901](https://github.com/input-output-hk/daedalus/pull/2901))
 - Implemented error message when trying to leave wallet without enough ada to support tokens ([PR 2783](https://github.com/input-output-hk/daedalus/pull/2783))

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.spec.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import BigNumber from 'bignumber.js';
+import { render, screen, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Asset from './Asset';
+import { TestDecorator } from '../../../../../tests/_utils/TestDecorator';
+
+const assetWithMetadataName = {
+  policyId: 'policyId',
+  assetName: '54657374636f696e',
+  quantity: new BigNumber(1),
+  fingerprint: 'fingerprint',
+  metadata: {
+    name: 'Testcoin',
+    description: 'Test coin',
+  },
+  uniqueId: 'uniqueId',
+  decimals: 1,
+  recommendedDecimals: null,
+};
+const assetWitoutMetadataName = {
+  policyId: 'policyId',
+  assetName: '436f696e74657374',
+  quantity: new BigNumber(1),
+  fingerprint: 'fingerprint',
+  uniqueId: 'uniqueId',
+  decimals: 1,
+  recommendedDecimals: null,
+};
+const assetWithoutName = {
+  policyId: 'policyId',
+  assetName: '',
+  quantity: new BigNumber(1),
+  fingerprint: 'fingerprint',
+  uniqueId: 'uniqueId',
+  decimals: 1,
+  recommendedDecimals: null,
+};
+
+describe('Asset', () => {
+  afterEach(cleanup);
+
+  test('Should display asset metadata name', () => {
+    render(
+      <TestDecorator>
+        <Asset asset={assetWithMetadataName} />
+      </TestDecorator>
+    );
+    expect(screen.queryByTestId('assetName')).toHaveTextContent('Testcoin');
+  });
+
+  test('Should display asset ASCII name when metadata name is not available', () => {
+    render(
+      <TestDecorator>
+        <Asset asset={assetWitoutMetadataName} />
+      </TestDecorator>
+    );
+    expect(screen.queryByTestId('assetName')).toHaveTextContent(
+      'ASCII: Cointest'
+    );
+  });
+
+  test('Should not display asset name when metadata and ASCII name are not available', () => {
+    render(
+      <TestDecorator>
+        <Asset asset={assetWithoutName} />
+      </TestDecorator>
+    );
+    expect(screen.queryByTestId('assetName')).toBeNull();
+  });
+});

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,20 @@ 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 hasMetadataName = !!metadata?.name;
+    const name =
+      metadata?.name || (assetName && `ASCII: ${hexToString(assetName)}`) || '';
+
+    const displayName = metadataNameChars
+      ? ellipsis(name, metadataNameChars)
+      : name;
     const contentStyles = classnames([
       styles.pill,
       hasError ? styles.error : null,
@@ -196,9 +208,15 @@ class Asset extends Component<Props, State> {
             ? fingerprint
             : ellipsis(fingerprint || '', startCharAmount, endCharAmount)}
         </div>
-        {name && (
-          <div className={styles.metadataName}>
-            {metadataNameChars ? ellipsis(name, metadataNameChars) : name}
+        {displayName && (
+          <div
+            data-testid="assetName"
+            className={classnames(
+              styles.metadataName,
+              !hasMetadataName && styles.ascii
+            )}
+          >
+            {displayName}
           </div>
         )}
         {hasWarning && (

source/renderer/app/components/wallet/tokens/wallet-token/WalletTokenHeader.scss

@@ -17,6 +17,7 @@
   .favoriteIcon {
     border-radius: 3px;
     cursor: pointer;
+    flex-shrink: 0;
     height: 22px;
     margin-left: 10px;
     opacity: 0.3;
@@ -50,6 +51,7 @@
   .asset {
     margin-left: 10px;
     margin-right: auto;
+    overflow: hidden;
     width: auto;
   }
 

storybook/stories/wallets/tokens/WalletTokens.stories.tsx

@@ -36,7 +36,7 @@ const assets = [
   // @ts-ignore ts-migrate(2554) FIXME: Expected 7 arguments, but got 4.
   generateAssetToken(
     '65bc72542b0ca20391caaf66a4d4d7897d281f9c136cd3513136945b',
-    '',
+    '546f6b656e2077697468206c61726765206e616d65',
     'tokenb0ca20391caaf66a4d4d7897d281f9c136cd3513136945b2342',
     400
   ),