fix: Address design review for NFT token send

ui/ducks/metamask/metamask.js

@@ -338,6 +338,15 @@ export const getNfts = (state) => {
   return allNfts?.[selectedAddress]?.[chainId] ?? [];
 };
 
+export const getNFTsByChainId = (state, chainId) => {
+  const {
+    metamask: { allNfts },
+  } = state;
+  const { address: selectedAddress } = getSelectedInternalAccount(state);
+
+  return allNfts?.[selectedAddress]?.[chainId] ?? [];
+};
+
 export const getNftContracts = (state) => {
   const {
     metamask: { allNftContracts },

ui/pages/confirmations/components/confirm/info/approve/approve-static-simulation/approve-static-simulation.tsx

@@ -14,7 +14,6 @@ import {
   TextAlign,
 } from '../../../../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
-import { SPENDING_CAP_UNLIMITED_MSG } from '../../../../../constants';
 import { useConfirmContext } from '../../../../../context/confirm';
 import { useAssetDetails } from '../../../../../hooks/useAssetDetails';
 import StaticSimulation from '../../shared/static-simulation/static-simulation';
@@ -37,8 +36,13 @@ export const ApproveStaticSimulation = () => {
 
   const decimals = initialDecimals || '0';
 
-  const { spendingCap, formattedSpendingCap, value, pending } =
-    useApproveTokenSimulation(transactionMeta, decimals);
+  const {
+    spendingCap,
+    isUnlimitedSpendingCap,
+    formattedSpendingCap,
+    value,
+    pending,
+  } = useApproveTokenSimulation(transactionMeta, decimals);
 
   const { isNFT } = useIsNFT(transactionMeta);
 
@@ -61,9 +65,7 @@ export const ApproveStaticSimulation = () => {
       textAlign={TextAlign.Center}
       alignItems={AlignItems.center}
     >
-      {spendingCap === SPENDING_CAP_UNLIMITED_MSG
-        ? t('unlimited')
-        : spendingCap}
+      {isUnlimitedSpendingCap ? t('unlimited') : formattedSpendingCap}
     </Text>
   );
 
@@ -78,10 +80,9 @@ export const ApproveStaticSimulation = () => {
             marginInlineEnd={1}
             minWidth={BlockSize.Zero}
           >
-            {spendingCap === SPENDING_CAP_UNLIMITED_MSG ? (
-              <Tooltip title={formattedSpendingCap}>
-                {formattedTokenText}
-              </Tooltip>
+            {Boolean(isUnlimitedSpendingCap) ||
+            spendingCap !== formattedSpendingCap ? (
+              <Tooltip title={spendingCap}>{formattedTokenText}</Tooltip>
             ) : (
               formattedTokenText
             )}

ui/pages/confirmations/components/confirm/info/approve/edit-spending-cap-modal/edit-spending-cap-modal.tsx

@@ -62,41 +62,38 @@ export const EditSpendingCapModal = ({
     Number(decimals ?? '0'),
   ).toFixed();
 
-  const { formattedSpendingCap } = useApproveTokenSimulation(
+  const { formattedSpendingCap, spendingCap } = useApproveTokenSimulation(
     transactionMeta,
     decimals || '0',
   );
 
   const [customSpendingCapInputValue, setCustomSpendingCapInputValue] =
-    useState(formattedSpendingCap.toString());
+    useState(spendingCap);
 
   useEffect(() => {
-    if (formattedSpendingCap) {
-      setCustomSpendingCapInputValue(formattedSpendingCap.toString());
+    if (spendingCap) {
+      setCustomSpendingCapInputValue(spendingCap);
     }
-  }, [formattedSpendingCap]);
+  }, [spendingCap]);
 
   const handleCancel = useCallback(() => {
     setIsOpenEditSpendingCapModal(false);
-    setCustomSpendingCapInputValue(formattedSpendingCap.toString());
+    setCustomSpendingCapInputValue(spendingCap);
   }, [
     setIsOpenEditSpendingCapModal,
     setCustomSpendingCapInputValue,
-    formattedSpendingCap,
+    spendingCap,
   ]);
 
   const [isModalSaving, setIsModalSaving] = useState(false);
 
   const handleSubmit = useCallback(async () => {
     setIsModalSaving(true);
-    const parsedValue = parseInt(String(customSpendingCapInputValue), 10);
 
     const customTxParamsData = getCustomTxParamsData(
       transactionMeta?.txParams?.data,
       {
-        customPermissionAmount:
-          // coerce negative numbers to zero
-          parsedValue < 0 ? '0' : customSpendingCapInputValue || '0',
+        customPermissionAmount: customSpendingCapInputValue || '0',
         decimals: decimals || '0',
       },
     );
@@ -117,8 +114,8 @@ export const EditSpendingCapModal = ({
 
     setIsModalSaving(false);
     setIsOpenEditSpendingCapModal(false);
-    setCustomSpendingCapInputValue(formattedSpendingCap.toString());
-  }, [customSpendingCapInputValue, formattedSpendingCap]);
+    setCustomSpendingCapInputValue(spendingCap);
+  }, [customSpendingCapInputValue, spendingCap]);
 
   const showDecimalError =
     decimals &&

ui/pages/confirmations/components/confirm/info/approve/hooks/use-approve-token-simulation.test.ts

@@ -65,7 +65,8 @@ describe('useApproveTokenSimulation', () => {
 
     expect(result.current).toMatchInlineSnapshot(`
       {
-        "formattedSpendingCap": "7",
+        "formattedSpendingCap": "#7",
+        "isUnlimitedSpendingCap": false,
         "pending": undefined,
         "spendingCap": "#7",
         "value": {
@@ -132,8 +133,9 @@ describe('useApproveTokenSimulation', () => {
     expect(result.current).toMatchInlineSnapshot(`
       {
         "formattedSpendingCap": "1,000,000,000,000,000",
+        "isUnlimitedSpendingCap": true,
         "pending": undefined,
-        "spendingCap": "UNLIMITED MESSAGE",
+        "spendingCap": "1000000000000000",
         "value": {
           "data": [
             {
@@ -197,7 +199,8 @@ describe('useApproveTokenSimulation', () => {
 
     expect(result.current).toMatchInlineSnapshot(`
       {
-        "formattedSpendingCap": "0.0000000000001",
+        "formattedSpendingCap": "<0.000001",
+        "isUnlimitedSpendingCap": false,
         "pending": undefined,
         "spendingCap": "0.0000000000001",
         "value": {

ui/pages/confirmations/components/confirm/info/approve/hooks/use-approve-token-simulation.ts

@@ -1,11 +1,12 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
 import { isHexString } from '@metamask/utils';
+import BigNumber from 'bignumber.js';
 import { isBoolean } from 'lodash';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { calcTokenAmount } from '../../../../../../../../shared/lib/transactions-controller-utils';
 import { getIntlLocale } from '../../../../../../../ducks/locale/locale';
-import { SPENDING_CAP_UNLIMITED_MSG } from '../../../../../constants';
+import { formatAmount } from '../../../../simulation-details/formatAmount';
 import { useDecodedTransactionData } from '../../hooks/useDecodedTransactionData';
 import { useIsNFT } from './use-is-nft';
 
@@ -46,22 +47,26 @@ export const useApproveTokenSimulation = (
     ).toFixed();
   }, [value, decimals]);
 
+  const tokenPrefix = isNFT ? '#' : '';
+
   const formattedSpendingCap = useMemo(() => {
-    // formatting coerces small numbers to 0
-    return isNFT || parseInt(decodedSpendingCap, 10) < 1
-      ? decodedSpendingCap
-      : new Intl.NumberFormat(locale).format(parseInt(decodedSpendingCap, 10));
+    return isNFT
+      ? `${tokenPrefix}${decodedSpendingCap}`
+      : formatAmount(locale, new BigNumber(decodedSpendingCap));
   }, [decodedSpendingCap, isNFT, locale]);
 
-  const spendingCap = useMemo(() => {
+  const { spendingCap, isUnlimitedSpendingCap } = useMemo(() => {
     if (!isNFT && isSpendingCapUnlimited(parseInt(decodedSpendingCap, 10))) {
-      return SPENDING_CAP_UNLIMITED_MSG;
+      return { spendingCap: decodedSpendingCap, isUnlimitedSpendingCap: true };
     }
-    const tokenPrefix = isNFT ? '#' : '';
-    return `${tokenPrefix}${formattedSpendingCap}`;
+    return {
+      spendingCap: `${tokenPrefix}${decodedSpendingCap}`,
+      isUnlimitedSpendingCap: false,
+    };
   }, [decodedSpendingCap, formattedSpendingCap, isNFT]);
 
   return {
+    isUnlimitedSpendingCap,
     spendingCap,
     formattedSpendingCap,
     value,

ui/pages/confirmations/components/confirm/info/approve/spending-cap/spending-cap.tsx

@@ -9,7 +9,6 @@ import {
 import { ConfirmInfoSection } from '../../../../../../../components/app/confirm/info/row/section';
 import Tooltip from '../../../../../../../components/ui/tooltip';
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
-import { SPENDING_CAP_UNLIMITED_MSG } from '../../../../../constants';
 import { useConfirmContext } from '../../../../../context/confirm';
 import { useAssetDetails } from '../../../../../hooks/useAssetDetails';
 import { Container } from '../../shared/transaction-data/transaction-data';
@@ -19,30 +18,25 @@ const SpendingCapGroup = ({
   tokenSymbol,
   decimals,
   setIsOpenEditSpendingCapModal,
-  customSpendingCap,
 }: {
   tokenSymbol: string;
   decimals: string;
   setIsOpenEditSpendingCapModal: (newValue: boolean) => void;
-  customSpendingCap: string;
 }) => {
   const t = useI18nContext();
 
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
 
-  const { spendingCap, formattedSpendingCap, value } =
+  const { spendingCap, isUnlimitedSpendingCap, formattedSpendingCap, value } =
     useApproveTokenSimulation(transactionMeta, decimals);
 
-  const spendingCapValue =
-    customSpendingCap === '' ? formattedSpendingCap : customSpendingCap;
-
   const SpendingCapElement = (
     <ConfirmInfoRowText
       text={
-        spendingCap === SPENDING_CAP_UNLIMITED_MSG
+        isUnlimitedSpendingCap
           ? `${t('unlimited')} ${tokenSymbol}`
-          : `${spendingCapValue} ${tokenSymbol}`
+          : `${formattedSpendingCap} ${tokenSymbol}`
       }
       onEditClick={() => setIsOpenEditSpendingCapModal(true)}
       editIconClassName="edit-spending-cap-btn"
@@ -63,8 +57,9 @@ const SpendingCapGroup = ({
         tooltip={t('spendingCapTooltipDesc')}
         data-testid="confirmation__approve-spending-cap-group"
       >
-        {spendingCap === SPENDING_CAP_UNLIMITED_MSG ? (
-          <Tooltip title={formattedSpendingCap}>{SpendingCapElement}</Tooltip>
+        {Boolean(isUnlimitedSpendingCap) ||
+        spendingCap !== formattedSpendingCap ? (
+          <Tooltip title={spendingCap}>{SpendingCapElement}</Tooltip>
         ) : (
           SpendingCapElement
         )}
@@ -95,7 +90,7 @@ export const SpendingCap = ({
     Number(decimals ?? '0'),
   ).toFixed();
 
-  const { pending, spendingCap } = useApproveTokenSimulation(
+  const { pending } = useApproveTokenSimulation(
     transactionMeta,
     decimals || '0',
   );
@@ -114,7 +109,6 @@ export const SpendingCap = ({
         tokenSymbol={tokenSymbol || ''}
         decimals={decimals || '0'}
         setIsOpenEditSpendingCapModal={setIsOpenEditSpendingCapModal}
-        customSpendingCap={spendingCap}
       />
     </ConfirmInfoSection>
   );

ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`NativeTransferInfo renders correctly 1`] = `
     class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
   >
     <div
-      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-token mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full"
+      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-token mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-full"
     >
       G
     </div>

ui/pages/confirmations/components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap

@@ -6,16 +6,43 @@ exports[`NFTTokenTransferInfo renders correctly 1`] = `
     class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
   >
     <div
-      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-token mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full"
+      class="mm-box"
+      style="width: 48px;"
     >
-      ?
+      <button
+        class="mm-box nft-item__container"
+        data-testid="nft-item"
+      >
+        <div
+          class="mm-box mm-badge-wrapper nft-item__badge-wrapper mm-box--display-block"
+        >
+          <div
+            class="mm-box nft-item__default-image nft-default mm-box--display-flex mm-box--rounded-lg"
+            data-testid="nft-default-image"
+            tabindex="0"
+          />
+          <div
+            class="mm-box mm-badge-wrapper__badge-container"
+            style="top: -4px; right: -4px;"
+          >
+            <div
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network nft-item__network-badge mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
+              data-testid="nft-network-badge"
+            >
+              G
+            </div>
+          </div>
+        </div>
+      </button>
     </div>
     <h2
-      class="mm-box mm-text mm-text--heading-lg mm-box--margin-top-3 mm-box--color-inherit"
+      class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--margin-top-3 mm-box--color-inherit"
     />
     <p
       class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
-    />
+    >
+      #undefined
+    </p>
   </div>
   <div
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"

ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.tsx

@@ -13,7 +13,8 @@ const NFTTokenTransferInfo = () => {
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
 
-  const isWalletInitiated = transactionMeta.origin === 'metamask';
+  // const isWalletInitiated = transactionMeta.origin === 'metamask';
+  const isWalletInitiated = false;
 
   return (
     <>

ui/pages/confirmations/components/confirm/info/shared/native-send-heading/native-send-heading.tsx

@@ -17,6 +17,7 @@ import Tooltip from '../../../../../../../components/ui/tooltip';
 import { getIntlLocale } from '../../../../../../../ducks/locale/locale';
 import {
   AlignItems,
+  BackgroundColor,
   Display,
   FlexDirection,
   JustifyContent,
@@ -81,6 +82,7 @@ const NativeSendHeading = () => {
       }
       name={multichainNetwork?.nickname}
       size={AvatarTokenSize.Xl}
+      backgroundColor={BackgroundColor.backgroundDefault}
     />
   );