feat(bridge-ui-v2): manual NFT import step (#14842)

packages/bridge-ui-v2/__mocks__/@wagmi/core.ts

@@ -10,6 +10,10 @@ export const getContract = vi.fn();
 
 export const fetchBalance = vi.fn();
 
+export const fetchToken = vi.fn();
+
+export const readContract = vi.fn();
+
 export const configureChains = vi.fn(() => {
   return { publicClient: 'mockPublicClient' };
 });

packages/bridge-ui-v2/src/app.config.ts

@@ -2,6 +2,10 @@ export const recommentProcessingFee = {
   ethGasLimit: BigInt(900_000),
   erc20NotDeployedGasLimit: BigInt(3_100_000),
   erc20DeployedGasLimit: BigInt(1_100_000),
+  erc721NotDeployedGasLimit: BigInt(3_400_000),
+  erc721DeployedGasLimit: BigInt(1_100_000),
+  erc1155NotDeployedGasLimit: BigInt(4_000_000),
+  erc1155DeployedGasLimit: BigInt(1_100_000),
 };
 
 export const processingFeeComponent = {

packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte → packages/bridge-ui-v2/src/components/Bridge/AddressInput/AddressInput.svelte

@@ -8,22 +8,33 @@
   import { Icon } from '$components/Icon';
   import { uid } from '$libs/util/uid';
 
-  enum State {
-    Valid = 'valid',
-    Invalid = 'invalid',
-    TooShort = 'too_short',
-  }
+  import { AddressInputState as State } from './state';
+
+  export let ethereumAddress: Address | string = '';
+  export let labelText = $t('inputs.address_input.label.default');
+  export let isDisabled = false;
+  export let quiet = false;
+  export let state: State = State.Default;
+
+  export const validateAddress = () => {
+    validateEthereumAddress(ethereumAddress);
+  };
+
+  export const clearAddress = () => {
+    if (input) input.value = '';
+    validateEthereumAddress('');
+  };
+
+  export const focus = () => input.focus();
 
   let input: HTMLInputElement;
   let inputId = `input-${uid()}`;
-  let state: State;
-
-  export let ethereumAddress: Address | string = '';
 
   const dispatch = createEventDispatcher();
 
   const validateEthereumAddress = (address: string | EventTarget | null) => {
     let addr: string;
+    if (!address) return;
 
     if (address && address instanceof EventTarget) {
       addr = (address as HTMLInputElement).value;
@@ -49,41 +60,37 @@
   };
 
   $: validateEthereumAddress(ethereumAddress);
-
-  export const clear = () => {
-    input.value = '';
-    validateEthereumAddress('');
-  };
-
-  export const focus = () => input.focus();
 </script>
 
 <div class="f-col space-y-2">
   <div class="f-between-center text-secondary-content">
-    <label class="body-regular" for={inputId}>{$t('inputs.address_input.label')}</label>
+    <label class="body-regular" for={inputId}>{labelText}</label>
   </div>
   <div class="relative f-items-center">
     <input
-      bind:this={input}
       id={inputId}
+      disabled={isDisabled}
       type="string"
       placeholder="0x1B77..."
       bind:value={ethereumAddress}
       on:input={(e) => validateEthereumAddress(e.target)}
-      class="w-full input-box withValdiation py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content
-      {state === State.Valid ? 'success' : ethereumAddress ? 'error' : ''}
+      class="w-full input-box withValdiation py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content {$$props.class}
+      {state === State.Valid ? 'success' : ethereumAddress && state !== State.Validating ? 'error' : ''}
       " />
-    <button class="absolute right-6 uppercase body-bold text-secondary-content" on:click={clear}>
+    <button class="absolute right-6 uppercase body-bold text-secondary-content" on:click={clearAddress}>
       <Icon type="x-close-circle" fillClass="fill-primary-icon" size={24} />
     </button>
   </div>
 </div>
-<div class="mt-5 min-h-[20px]">
-  {#if state === State.Invalid && ethereumAddress}
-    <FlatAlert type="error" forceColumnFlow message={$t('inputs.address_input.errors.invalid')} />
-  {:else if state === State.TooShort && ethereumAddress}
-    <FlatAlert type="warning" forceColumnFlow message={$t('inputs.address_input.errors.too_short')} />
-  {:else if state === State.Valid}
-    <FlatAlert type="success" forceColumnFlow message={$t('inputs.address_input.success')} />
-  {/if}
-</div>
+
+{#if !quiet}
+  <div class="min-h-[20px] !mt-3">
+    {#if state === State.Invalid && ethereumAddress}
+      <FlatAlert type="error" forceColumnFlow message={$t('inputs.address_input.errors.invalid')} />
+    {:else if state === State.TooShort && ethereumAddress}
+      <FlatAlert type="warning" forceColumnFlow message={$t('inputs.address_input.errors.too_short')} />
+    {:else if state === State.Valid}
+      <FlatAlert type="success" forceColumnFlow message={$t('inputs.address_input.success')} />
+    {/if}
+  </div>
+{/if}

packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts

@@ -0,0 +1,7 @@
+export enum AddressInputState {
+  Default = 'default',
+  Valid = 'valid',
+  Invalid = 'invalid',
+  TooShort = 'too_short',
+  Validating = 'validating',
+}

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

@@ -43,7 +43,7 @@
 
   // Public API
   export function clearAmount() {
-    inputBox.clear();
+    inputBox?.clear();
     $enteredAmount = BigInt(0);
   }