diff --git a/CHANGELOG.md b/CHANGELOG.md index b95f516a72..c7ca092e29 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/source/renderer/app/components/assets/Asset.scss b/source/renderer/app/components/assets/Asset.scss index 7338123177..bc387f2631 100644 --- a/source/renderer/app/components/assets/Asset.scss +++ b/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 { diff --git a/source/renderer/app/components/assets/Asset.spec.tsx b/source/renderer/app/components/assets/Asset.spec.tsx new file mode 100644 index 0000000000..ad78d00306 --- /dev/null +++ b/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( + + + + ); + expect(screen.queryByTestId('assetName')).toHaveTextContent('Testcoin'); + }); + + test('Should display asset ASCII name when metadata name is not available', () => { + render( + + + + ); + expect(screen.queryByTestId('assetName')).toHaveTextContent( + 'ASCII: Cointest' + ); + }); + + test('Should not display asset name when metadata and ASCII name are not available', () => { + render( + + + + ); + expect(screen.queryByTestId('assetName')).toBeNull(); + }); +}); diff --git a/source/renderer/app/components/assets/Asset.tsx b/source/renderer/app/components/assets/Asset.tsx index 9a25ae5f7c..4822fc4097 100644 --- a/source/renderer/app/components/assets/Asset.tsx +++ b/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 { 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 { ? fingerprint : ellipsis(fingerprint || '', startCharAmount, endCharAmount)} - {name && ( -
- {metadataNameChars ? ellipsis(name, metadataNameChars) : name} + {displayName && ( +
+ {displayName}
)} {hasWarning && ( diff --git a/source/renderer/app/components/wallet/tokens/wallet-token/WalletTokenHeader.scss b/source/renderer/app/components/wallet/tokens/wallet-token/WalletTokenHeader.scss index d45c90c227..72de9658f0 100644 --- a/source/renderer/app/components/wallet/tokens/wallet-token/WalletTokenHeader.scss +++ b/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; } diff --git a/storybook/stories/wallets/tokens/WalletTokens.stories.tsx b/storybook/stories/wallets/tokens/WalletTokens.stories.tsx index 2029288ff9..315e78062f 100644 --- a/storybook/stories/wallets/tokens/WalletTokens.stories.tsx +++ b/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 ),