From 7949ec9cd45d05aef06048f8db005225e52f597b Mon Sep 17 00:00:00 2001 From: David Walsh Date: Wed, 21 Jun 2023 16:28:53 -0500 Subject: [PATCH] Fix #18423 - Ensure token details stay within dropdown (#19626) * Fix #18423 - Ensure token details stay within dropdown * Ellipsize the token id * Add tooltip, fix tests --- ui/css/itcss/components/send.scss | 12 ++- ui/pages/send/gas-display/gas-display.js | 2 +- .../send-asset-row.component.js | 18 ++-- .../send-asset-row/send-asset-row.test.js | 2 +- .../send/send-content/send-content.stories.js | 96 ++++++++++++++++++- 5 files changed, 118 insertions(+), 12 deletions(-) diff --git a/ui/css/itcss/components/send.scss b/ui/css/itcss/components/send.scss index 086b7884d..49f70f9cf 100644 --- a/ui/css/itcss/components/send.scss +++ b/ui/css/itcss/components/send.scss @@ -607,6 +607,10 @@ align-items: center; padding: 0 8px; cursor: pointer; + + /* Prevents the contents of the asset from going outside the dropdown area */ + max-width: 100%; + overflow: hidden; } &__asset-icon { @@ -620,6 +624,9 @@ flex-flow: column nowrap; margin-left: 8px; flex-grow: 1; + + /* Keeps the down arrow on screen */ + overflow: hidden; } @include screen-sm-max { @@ -640,8 +647,11 @@ &__name { @include H7; + /* Prevents the token balance or NFT title from wrapping or silently truncating */ display: flex; - flex-flow: row nowrap; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; &__label { margin-right: 0.25rem; diff --git a/ui/pages/send/gas-display/gas-display.js b/ui/pages/send/gas-display/gas-display.js index 49107cec9..f0fcbbfc4 100644 --- a/ui/pages/send/gas-display/gas-display.js +++ b/ui/pages/send/gas-display/gas-display.js @@ -67,7 +67,7 @@ export default function GasDisplay({ gasError }) { const { chainId } = providerConfig; const networkName = NETWORK_TO_NAME_MAP[chainId]; const isInsufficientTokenError = - draftTransaction?.amount.error === INSUFFICIENT_TOKENS_ERROR; + draftTransaction?.amount?.error === INSUFFICIENT_TOKENS_ERROR; const editingTransaction = unapprovedTxs[draftTransaction.id]; const currentNetworkName = networkName || providerConfig.nickname; diff --git a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js index 29b6672cf..765943919 100644 --- a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js +++ b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js @@ -12,6 +12,8 @@ import { AssetType, TokenStandard, } from '../../../../../shared/constants/transaction'; +import { Text } from '../../../../components/component-library'; +import { TextVariant } from '../../../../helpers/constants/design-system'; export default class SendAssetRow extends Component { static propTypes = { @@ -275,6 +277,9 @@ export default class SendAssetRow extends Component { const nftCollection = this.props.collections.find( (collection) => collection.address === address, ); + + const label = nftCollection?.name || name; + return (
-
- {nftCollection?.name || name} -
-
- - {`${t('tokenId')}:`} - - {tokenId} +
+ {label}
+ + {`${t('tokenId')}: ${tokenId}`} +
{!insideDropdown && ( diff --git a/ui/pages/send/send-content/send-asset-row/send-asset-row.test.js b/ui/pages/send/send-content/send-asset-row/send-asset-row.test.js index 08b026706..ebcfd9ad4 100644 --- a/ui/pages/send/send-content/send-asset-row/send-asset-row.test.js +++ b/ui/pages/send/send-content/send-asset-row/send-asset-row.test.js @@ -59,7 +59,7 @@ describe('SendAssetRow', () => { mockStore, ); - expect(getByText('Token ID:')).toBeInTheDocument(); + expect(getByText('Token ID: 2')).toBeInTheDocument(); }); }); }); diff --git a/ui/pages/send/send-content/send-content.stories.js b/ui/pages/send/send-content/send-content.stories.js index c731d5561..1115822ac 100644 --- a/ui/pages/send/send-content/send-content.stories.js +++ b/ui/pages/send/send-content/send-content.stories.js @@ -1,7 +1,45 @@ import React from 'react'; +import { Provider } from 'react-redux'; + +import mockState from '../../../../test/data/mock-state.json'; +import { AssetType } from '../../../../shared/constants/transaction'; +import configureStore from '../../../store/store'; import SendContent from './send-content.component'; +const store = configureStore({ + ...mockState, + send: { + currentTransactionUUID: '1-tx', + draftTransactions: { + '1-tx': { + asset: { + balance: '0x1158e460913d00000', // 20000000000000000000 + details: { + name: 'Catnip Spicywright From The Artist Known As', + tokenId: '1124157112415711241571124157112415711241571124157', + address: '0x06012c8cf97bead5deae237070f9587f8e7a266d', + image: './catnip-spicywright.png', + imageThumbnail: 'https://www.cryptokitties.co/.../1124157', + description: + "Good day. My name is Catnip Spicywight, which got me teased a lot in high school. If I want to put low fat mayo all over my hamburgers, I shouldn't have to answer to anyone about it, am I right? One time I beat Arlene in an arm wrestle.", + lastSale: { + event_timestamp: '2023-01-18T21:51:23', + total_price: '4900000000000000', + payment_token: { + symbol: 'ETH', + }, + }, + }, + error: null, + type: AssetType.NFT, + }, + fromAccount: { address: '0x000000' }, + }, + }, + }, +}); + export default { title: 'Pages/Send/SendContent', @@ -53,7 +91,11 @@ export default { }; export const DefaultStory = (args) => { - return ; + return ( +
+ +
+ ); }; DefaultStory.storyName = 'Default'; @@ -82,3 +124,55 @@ DefaultStory.args = { to: 'string to', assetError: null, }; + +export const NftStory = (args) => { + return ( +
+ +
+ ); +}; + +NftStory.storyName = 'NFT'; +NftStory.decorators = [(story) => {story()}]; +NftStory.args = { + showHexData: false, + isOwnedAccount: true, + noGasPrice: false, + isEthGasPrice: false, + gasIsExcessive: false, + error: 'connecting', + warning: 'connecting', + asset: { + type: 'NFT', + }, + recipient: { + mode: 'CONTACT_LIST', + userInput: '0x31A2764925BD47CCBd57b2F277702dB46e9C5F66', + address: '0x31A2764925BD47CCBd57b2F277702dB46e9C5F66', + nickname: 'John Doe', + error: null, + warning: null, + }, + sendAsset: { + balance: '0x1', + details: { + address: '0xDc7382Eb0Bc9C352A4CbA23c909bDA01e0206414', + tokenId: '2', + standard: 'ERC721', + tokenURI: + 'data:application/json;base64,eyJuYW1lIjogIlRlc3QgRGFwcCBDb2xsZWN0aWJsZXMgIzIiLCAiZGVzY3JpcHRpb24iOiAiVGVzdCBEYXBwIENvbGxlY3RpYmxlcyBmb3IgdGVzdGluZy4iLCAiaW1hZ2UiOiAiZGF0YTppbWFnZS9zdmcreG1sO2Jhc2U2NCxQSE4yWnlCb1pXbG5hSFE5SWpNMU1DSWdkMmxrZEdnOUlqTTFNQ0lnZG1sbGQwSnZlRDBpTUNBd0lERXdNQ0F4TURBaUlIaHRiRzV6UFNKb2RIUndPaTh2ZDNkM0xuY3pMbTl5Wnk4eU1EQXdMM04yWnlJK1BHUmxabk0rUEhCaGRHZ2dhV1E5SWsxNVVHRjBhQ0lnWm1sc2JEMGlibTl1WlNJZ2MzUnliMnRsUFNKeVpXUWlJR1E5SWsweE1DdzVNQ0JST1RBc09UQWdPVEFzTkRVZ1VUa3dMREV3SURVd0xERXdJRkV4TUN3eE1DQXhNQ3cwTUNCUk1UQXNOekFnTkRVc056QWdVVGN3TERjd0lEYzFMRFV3SWlBdlBqd3ZaR1ZtY3o0OGRHVjRkRDQ4ZEdWNGRGQmhkR2dnYUhKbFpqMGlJMDE1VUdGMGFDSStVWFZwWTJzZ1luSnZkMjRnWm05NElHcDFiWEJ6SUc5MlpYSWdkR2hsSUd4aGVua2daRzluTGp3dmRHVjRkRkJoZEdnK1BDOTBaWGgwUGp3dmMzWm5QZz09IiwgImF0dHJpYnV0ZXMiOiBbeyJ0cmFpdF90eXBlIjogIlRva2VuIElkIiwgInZhbHVlIjogIjIifV19', + symbol: 'TDC', + name: 'TestDappCollectibles', + image: + 'data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM1MCIgd2lkdGg9IjM1MCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdGggaWQ9Ik15UGF0aCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZWQiIGQ9Ik0xMCw5MCBROTAsOTAgOTAsNDUgUTkwLDEwIDUwLDEwIFExMCwxMCAxMCw0MCBRMTAsNzAgNDUsNzAgUTcwLDcwIDc1LDUwIiAvPjwvZGVmcz48dGV4dD48dGV4dFBhdGggaHJlZj0iI015UGF0aCI+UXVpY2sgYnJvd24gZm94IGp1bXBzIG92ZXIgdGhlIGxhenkgZG9nLjwvdGV4dFBhdGg+PC90ZXh0Pjwvc3ZnPg==', + }, + error: null, + type: 'NFT', + }, + contact: { name: 'testName' }, + networkOrAccountNotSupports1559: false, + getIsBalanceInsufficient: false, + to: 'string to', + assetError: null, +};