diff --git a/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte index 730de82d478..be417f388d9 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte @@ -8,31 +8,44 @@ import { Icon } from '$components/Icon'; import { uid } from '$libs/util/uid'; + enum State { + Valid = 'valid', + Invalid = 'invalid', + TooShort = 'too_short', + } + let input: HTMLInputElement; let inputId = `input-${uid()}`; - let showAlert = true; + let state: State; export let ethereumAddress: Address | string = ''; - let isValidEthereumAddress = false; - let tooShort = true; const dispatch = createEventDispatcher(); const validateEthereumAddress = (address: string | EventTarget | null) => { + let addr: string; + if (address && address instanceof EventTarget) { - address = (address as HTMLInputElement).value; + addr = (address as HTMLInputElement).value; + } else { + addr = address as string; + } + if (addr.length >= 2 && !addr.startsWith('0x')) { + state = State.Invalid; + return; } - - const addr = address as string; if (addr.length < 42) { - tooShort = true; - isValidEthereumAddress = false; + state = State.TooShort; } else { - tooShort = false; - isValidEthereumAddress = isAddress(addr); + if (isAddress(addr)) { + state = State.Valid; + } else { + state = State.Invalid; + } dispatch('input', addr); } - dispatch('addressvalidation', { isValidEthereumAddress, addr }); + + dispatch('addressvalidation', { isValidEthereumAddress: state === State.Valid, addr }); }; $: validateEthereumAddress(ethereumAddress); @@ -49,7 +62,7 @@
-
+
validateEthereumAddress(e.target)} - class="w-full input-box py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content" /> + 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' : ''} + " />
-
- {#if !isValidEthereumAddress && !tooShort} +
+ {#if state === State.Invalid && ethereumAddress} - {:else if isValidEthereumAddress && !tooShort && showAlert} + {:else if state === State.TooShort && ethereumAddress} + + {:else if state === State.Valid} {/if}
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte index 0f128a0cdd0..ca2c0071e01 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte @@ -185,7 +185,7 @@ // There is no reason to show any error/warning message if we are computing the balance // or there is an issue computing it - $: showInsifficientBalanceAlert = $insufficientBalance && !$errorComputingBalance && !$computingBalance; + $: showInsufficientBalanceAlert = $insufficientBalance && !$errorComputingBalance && !$computingBalance; $: showInsiffucientAllowanceAlert = $insufficientAllowance && !$errorComputingBalance && !$computingBalance; @@ -229,7 +229,7 @@ {$t('inputs.amount.button.max')}
- {#if showInsifficientBalanceAlert} + {#if showInsufficientBalanceAlert} {:else if showInsiffucientAllowanceAlert} diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte index 7112ae559fd..d8d9c16dca4 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte @@ -74,7 +74,7 @@ {#if displayedRecipient} {shortenAddress(displayedRecipient, 15, 13)} - {$recipientAddress === $account?.address ? '' : '| Customized'} + {$recipientAddress !== $account?.address ? '' : '| Customized'} {:else} {$t('recipient.placeholder')} {/if} diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte index 43abc515faf..114c18e6cc9 100644 --- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte +++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte @@ -22,11 +22,11 @@ let classes = classNames('ChainSelector', $$props.class); let buttonClasses = classNames( 'body-regular bg-neutral-background', - small ? 'px-2 py-[6px]' : 'px-6 py-[10px]', + small ? 'px-2 py-[6px]' : 'px-[24px] py-[10px]', small ? 'rounded-md' : 'rounded-[10px]', small ? 'w-auto' : 'w-full', readOnly ? '' : 'dark:hover:bg-tertiary-interactive-hover', - 'flex justify-start content-center body-bold py-2 px-[20px]', + 'flex justify-start content-center', ); let switchingNetwork = false; @@ -109,7 +109,7 @@ {/if} {#if value} - + {value.name} {/if} diff --git a/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte b/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte index 3bdf830ac18..46e565ddef5 100644 --- a/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte +++ b/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte @@ -43,7 +43,7 @@ https://docs.walletconnect.com/2.0/web/web3modal/html/wagmi/components --> {#if connected} -