diff --git a/packages/bridge-ui-v2/src/components/Bridge/IDInput/IDInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/IDInput/IDInput.svelte index 561f3e1fd3..afcd380ab3 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/IDInput/IDInput.svelte +++ b/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 @@ 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} - " /> - + class="w-full input-box withValdiation py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content {typeClass} {$$props.class}" /> diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte index 749b8601e9..2925333807 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte +++ b/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; diff --git a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte index 797fc4c48e..e1fae42b52 100644 --- a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte +++ b/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 }); diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json index 7137c0b6fe..82ba2be6ce 100644 --- a/packages/bridge-ui-v2/src/i18n/en.json +++ b/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": {