fix(bridge-ui-v2): NFT Id input should only allow numbers (#15504)

packages/bridge-ui-v2/src/components/Bridge/IDInput/IDInput.svelte

@@ -9,12 +9,12 @@
 
   export let validIdNumbers: number[] = [];
   export let isDisabled = false;
-  export let enteredIds: string = '';
+  export let enteredIds: number[] = [];
   export let limit = 1;
   export let state: State = State.DEFAULT;
 
   export const clearIds = () => {
-    enteredIds = '';
+    enteredIds = [];
     validIdNumbers = [];
     dispatch('inputValidation');
   };
@@ -23,25 +23,26 @@
 
   let inputId = `input-${uid()}`;
 
-  function validateInput(idInput: EventTarget | string | null = null) {
+  function validateInput(idInput: EventTarget | number[] | null = null) {
     state = State.VALIDATING;
 
-    if (!idInput) return;
-    let ids;
+    let ids: number[] = [];
     if (idInput && idInput instanceof EventTarget) {
-      ids = (idInput as HTMLInputElement).value.replace(/\s+/g, '');
-    } else {
-      ids = idInput as string;
+      ids = (idInput as HTMLInputElement).value
+        .split(',')
+        .map((item) => parseInt(item))
+        .filter((num) => !isNaN(num));
+    } else if (Array.isArray(idInput)) {
+      ids = idInput;
     }
 
-    const inputArray = ids.split(',');
-    if (inputArray.length > limit) {
-      ids = inputArray.slice(0, limit).join(',');
+    if (ids.length > limit) {
+      ids = ids.slice(0, limit);
     }
     enteredIds = ids;
-    const isValid = inputArray.every((item) => /^[0-9]+$/.test(item));
-    validIdNumbers = isValid ? inputArray.map((num) => parseInt(num)).filter(Boolean) : [];
-    state = State.VALID;
+    const isValid = ids.every((num) => Number.isInteger(num));
+    validIdNumbers = isValid ? ids : [];
+    state = isValid ? State.VALID : State.INVALID;
     dispatch('inputValidation');
   }
 
@@ -60,13 +61,11 @@
     <input
       id={inputId}
       disabled={isDisabled}
-      type="text"
+      type="number"
       placeholder={$t('inputs.token_id_input.placeholder')}
       bind:value={enteredIds}
       on:input={(e) => validateInput(e.target)}
-      class="w-full input-box withValdiation py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content {typeClass} {$$props.class}
-      " />
-    <!-- /*state === State.Valid ? 'success' : state === State.Invalid ? 'error' : ''  -->
+      class="w-full input-box withValdiation py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content {typeClass} {$$props.class}" />
     <button class="absolute right-6 uppercase body-bold text-secondary-content" on:click={clearIds}>
       <Icon type="x-close-circle" fillClass="fill-primary-icon" size={24} />
     </button>

packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte

@@ -49,7 +49,7 @@
 
   export const prefetchImage = () => noop();
 
-  let enteredIds: string = '';
+  let enteredIds: number[] = [];
   let scanning: boolean;
 
   let addressInputComponent: AddressInput;
@@ -71,7 +71,7 @@
 
   const reset = () => {
     nftView = NFTView.LIST;
-    enteredIds = '';
+    enteredIds = [];
     isOwnerOfAllToken = false;
     detectedTokenType = null;
   };
@@ -144,8 +144,12 @@
     validating = true;
 
     try {
-      if (canValidateIdInput) {
-        const tokenId = nftIdArray[0]; // Handle multiple tokens if needed
+      if (canValidateIdInput && enteredIds && enteredIds.length > 0) {
+        const tokenId: number = nftIdArray[0]; // Handle multiple tokens if needed
+
+        if (typeof tokenId !== 'number') {
+          throw new Error('Token ID is not a number');
+        }
 
         const ownershipResults = await checkOwnership(
           contractAddress as Address,
@@ -248,7 +252,7 @@
   }
 
   $: canImport = $account?.isConnected && $network?.id && $destinationChain && !scanning;
-  $: canValidateIdInput = isAddress(contractAddress) && $network?.id && $account?.address && enteredIds.length > 0;
+  $: canValidateIdInput = isAddress(contractAddress) && $network?.id && $account?.address;
 
   $: isDisabled = idInputState !== IDInputState.VALID || addressInputState !== AddressInputState.VALID;
 
@@ -258,6 +262,7 @@
     $selectedNFTs &&
     $selectedNFTs.length > 0 &&
     $selectedNFTs[0].type === TokenType.ERC1155 &&
+    enteredIds &&
     enteredIds.length > 0 &&
     !validating;
 

packages/bridge-ui-v2/src/components/Transactions/Status.svelte

@@ -145,7 +145,7 @@
           warningToast({ title: $t('messages.account.required') });
           break;
         case err instanceof UserRejectedRequestError:
-          warningToast({ title: $t('transactions.actions.claim.rejected') });
+          warningToast({ title: $t('transactions.actions.claim.rejected.title') });
           break;
         case err instanceof InsufficientBalanceError:
           dispatch('insufficientFunds', { tx: bridgeTx });

packages/bridge-ui-v2/src/i18n/en.json

@@ -191,7 +191,7 @@
     "id": "ID",
     "loading": "Loading",
     "name": "Name",
-    "ok": "Ok",
+    "ok": "Okay",
     "status": "Status",
     "success": "Success",
     "to": "To",
@@ -266,7 +266,7 @@
         "invalid": "Not a valid numeric value"
       },
       "label": "Token ID",
-      "placeholder": "1 or 5,14,733"
+      "placeholder": "e.g. 1 (only numbers)"
     }
   },
   "messages": {