import steps, validating ownership etc

taikoxyz · Sep 27, 2023 · 7fa506c · 7fa506c
1 parent 0bf4d78
commit 7fa506c
Show file tree

Hide file tree

Showing 8 changed files with 224 additions and 137 deletions.
diff --git a/...src/components/Bridge/AddressInput.svelte → ...s/Bridge/AddressInput/AddressInput.svelte b/...src/components/Bridge/AddressInput.svelte → ...s/Bridge/AddressInput/AddressInput.svelte
@@ -8,18 +8,16 @@
   import { Icon } from '$components/Icon';
   import { uid } from '$libs/util/uid';
 
-  export let ethereumAddress: Address | string = '';
-  export let labelText = $t('inputs.address_input.label');
+  import { AddressInputState as State } from './state';
 
-  enum State {
-    Valid = 'valid',
-    Invalid = 'invalid',
-    TooShort = 'too_short',
-  }
+  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;
 
   let input: HTMLInputElement;
   let inputId = `input-${uid()}`;
-  let state: State;
 
   const dispatch = createEventDispatcher();
 
@@ -65,26 +63,29 @@
   </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}>
       <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}
diff --git a/packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts b/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',
+}