diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx
index 08864f10edf8..208395b2228b 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.test.tsx
@@ -157,6 +157,46 @@ describe('AssetPicker', () => {
expect(getByText('?')).toBeInTheDocument();
});
+ it('nft: does not truncates if token ID is under length 13', () => {
+ const asset = {
+ type: AssetType.NFT,
+ details: {
+ address: 'token address',
+ decimals: 2,
+ tokenId: 1234567890,
+ },
+ balance: '100',
+ };
+ const mockAssetChange = jest.fn();
+
+ const { getByText } = render(
+
+ mockAssetChange()} />
+ ,
+ );
+ expect(getByText('#1234567890')).toBeInTheDocument();
+ });
+
+ it('nft: truncates if token ID is too long', () => {
+ const asset = {
+ type: AssetType.NFT,
+ details: {
+ address: 'token address',
+ decimals: 2,
+ tokenId: 1234567890123456,
+ },
+ balance: '100',
+ };
+ const mockAssetChange = jest.fn();
+
+ const { getByText } = render(
+
+ mockAssetChange()} />
+ ,
+ );
+ expect(getByText('#123456...3456')).toBeInTheDocument();
+ });
+
it('render if disabled', () => {
const asset = {
type: AssetType.token,
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
index 5867fc86b870..a3b1f965cb34 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
@@ -36,6 +36,9 @@ import {
MetaMetricsEventCategory,
MetaMetricsEventName,
} from '../../../../../shared/constants/metametrics';
+import { ellipsify } from '../../../../pages/confirmations/send/send.utils';
+
+const ELLIPSIFY_LENGTH = 13; // 6 (start) + 4 (end) + 3 (...)
export type AssetPickerProps = {
asset: Asset;
@@ -168,7 +171,10 @@ export function AssetPicker({
variant={TextVariant.bodySm}
color={TextColor.textAlternative}
>
- #{asset.details.tokenId}
+ #
+ {String(asset.details.tokenId).length < ELLIPSIFY_LENGTH
+ ? asset.details.tokenId
+ : ellipsify(String(asset.details.tokenId), 6, 4)}
)}