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,
+};