Fix tokenIds larger than MAX_SAFE_INTEGER converted to scientific notation and failing to import (#15016)

* fix tokenIds larger than MAX_SAFE_INTEGER breaking

* add tests

ui/pages/add-collectible/add-collectible.js

@@ -4,7 +4,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { util } from '@metamask/controllers';
 import { useI18nContext } from '../../hooks/useI18nContext';
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
-
 import {
   DISPLAY,
   FONT_WEIGHT,
@@ -55,9 +54,7 @@ export default function AddCollectible() {
 
   const handleAddCollectible = async () => {
     try {
-      await dispatch(
+      await dispatch(addCollectibleVerifyOwnership(address, tokenId));
-        addCollectibleVerifyOwnership(address, tokenId.toString()),
-      );
     } catch (error) {
       const { message } = error;
       dispatch(setNewCollectibleAddedMessage(message));
@@ -99,7 +96,7 @@ export default function AddCollectible() {
   };
 
   const validateAndSetTokenId = (val) => {
-    setDisabled(!util.isValidHexAddress(address) || !val);
+    setDisabled(!util.isValidHexAddress(address) || !val || isNaN(Number(val)));
     setTokenId(val);
   };
 
@@ -149,7 +146,7 @@ export default function AddCollectible() {
           )}
           <Box margin={4}>
             <FormField
-              id="address"
+              dataTestId="address"
               titleText={t('address')}
               placeholder="0x..."
               value={address}
@@ -161,7 +158,7 @@ export default function AddCollectible() {
               autoFocus
             />
             <FormField
-              id="token-id"
+              dataTestId="token-id"
               titleText={t('tokenId')}
               placeholder={t('nftTokenIdPlaceholder')}
               value={tokenId}
@@ -170,7 +167,6 @@ export default function AddCollectible() {
                 setCollectibleAddFailed(false);
               }}
               tooltipText={t('importNFTTokenIdToolTip')}
-              numeric
             />
           </Box>
         </Box>

ui/pages/add-collectible/add-collectible.test.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../test/jest/rendering';
+import * as Actions from '../../store/actions';
+import AddCollectible from '.';
+
+const VALID_ADDRESS = '0x312BE6a98441F9F6e3F6246B13CA19701e0AC3B9';
+const INVALID_ADDRESS = 'aoinsafasdfa';
+const VALID_TOKENID = '1201';
+const INVALID_TOKENID = 'abcde';
+
+describe('AddCollectible', () => {
+  const store = configureMockStore([])({
+    metamask: { provider: { chainId: '0x1' } },
+  });
+
+  it('should enable the "Add" button when valid entries are input into both Address and TokenId fields', () => {
+    const { getByTestId, getByText } = renderWithProvider(
+      <AddCollectible />,
+      store,
+    );
+    expect(getByText('Add')).not.toBeEnabled();
+    fireEvent.change(getByTestId('address'), {
+      target: { value: VALID_ADDRESS },
+    });
+    fireEvent.change(getByTestId('token-id'), {
+      target: { value: VALID_TOKENID },
+    });
+    expect(getByText('Add')).toBeEnabled();
+  });
+
+  it('should not enable the "Add" button when an invalid entry is input into one or both Address and TokenId fields', () => {
+    const { getByTestId, getByText } = renderWithProvider(
+      <AddCollectible />,
+      store,
+    );
+    expect(getByText('Add')).not.toBeEnabled();
+    fireEvent.change(getByTestId('address'), {
+      target: { value: INVALID_ADDRESS },
+    });
+    fireEvent.change(getByTestId('token-id'), {
+      target: { value: VALID_TOKENID },
+    });
+    expect(getByText('Add')).not.toBeEnabled();
+    fireEvent.change(getByTestId('address'), {
+      target: { value: VALID_ADDRESS },
+    });
+    expect(getByText('Add')).toBeEnabled();
+    fireEvent.change(getByTestId('token-id'), {
+      target: { value: INVALID_TOKENID },
+    });
+    expect(getByText('Add')).not.toBeEnabled();
+  });
+
+  it('should call addCollectibleVerifyOwnership action with correct values (tokenId should not be in scientific notation)', () => {
+    const { getByTestId, getByText } = renderWithProvider(
+      <AddCollectible />,
+      store,
+    );
+    fireEvent.change(getByTestId('address'), {
+      target: { value: VALID_ADDRESS },
+    });
+    const LARGE_TOKEN_ID = Number.MAX_SAFE_INTEGER + 1;
+    fireEvent.change(getByTestId('token-id'), {
+      target: { value: LARGE_TOKEN_ID },
+    });
+    const addCollectibleVerifyOwnershipSpy = jest.spyOn(
+      Actions,
+      'addCollectibleVerifyOwnership',
+    );
+
+    fireEvent.click(getByText('Add'));
+    expect(addCollectibleVerifyOwnershipSpy).toHaveBeenCalledWith(
+      '0x312BE6a98441F9F6e3F6246B13CA19701e0AC3B9',
+      '9007199254740992',
+    );
+  });
+});