Skip to content

Commit

Permalink
feat(bridge-ui-v2): close dialogs with ESC key (#14700)
Browse files Browse the repository at this point in the history
  • Loading branch information
KorbinianK authored Sep 18, 2023
1 parent 6688784 commit dbf7a24
Show file tree
Hide file tree
Showing 7 changed files with 87 additions and 11 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { tick } from 'svelte';
import { onDestroy, tick } from 'svelte';
import { t } from 'svelte-i18n';
import { formatEther } from 'viem';
Expand Down Expand Up @@ -44,15 +44,15 @@
// If so, let's switch to RECOMMENDED method
selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED;
}
removeEscKeyListener();
modalOpen = false;
}
function openModal() {
// Keep track of the selected method before opening the modal
// so if we cancel we can go back to the previous method
prevOptionSelected = selectedFeeMethod;
addEscKeyListener();
modalOpen = true;
}
Expand All @@ -73,6 +73,25 @@
$processingFee = parseToWei(value);
}
let escKeyListener: (event: KeyboardEvent) => void;
const addEscKeyListener = () => {
escKeyListener = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
cancelModal();
}
};
window.addEventListener('keydown', escKeyListener);
};
const removeEscKeyListener = () => {
window.removeEventListener('keydown', escKeyListener);
};
onDestroy(() => {
removeEscKeyListener();
});
async function updateProcessingFee(method: ProcessingFeeMethod, recommendedAmount: bigint) {
switch (method) {
case ProcessingFeeMethod.RECOMMENDED:
Expand Down
23 changes: 22 additions & 1 deletion packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import { t } from 'svelte-i18n';
import type { Address } from 'viem';
Expand Down Expand Up @@ -32,12 +33,13 @@
function openModal() {
modalOpen = true;
addressInput.focus();
addEscKeyListener();
}
function cancelModal() {
// Revert change of recipient address
$recipientAddress = prevRecipientAddress;
removeEscKeyListener();
closeModal();
}
Expand All @@ -58,6 +60,25 @@
}
}
let escKeyListener: (event: KeyboardEvent) => void;
const addEscKeyListener = () => {
escKeyListener = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
closeModal();
}
};
window.addEventListener('keydown', escKeyListener);
};
const removeEscKeyListener = () => {
window.removeEventListener('keydown', escKeyListener);
};
onDestroy(() => {
removeEscKeyListener();
});
$: modalOpenChange(modalOpen);
$: ethereumAddressBinding = $recipientAddress || undefined;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
import { SwitchChainError, UserRejectedRequestError } from 'viem';
import { chainConfig } from '$chainConfig';
import { Alert } from '$components/Alert';
import { Icon } from '$components/Icon';
import { LoadingMask } from '$components/LoadingMask';
import { warningToast } from '$components/NotificationToast';
Expand All @@ -23,6 +22,21 @@
export let small = false;
export let validOptions: Maybe<Chain[]> = chains;
let escKeyListener: (event: KeyboardEvent) => void;
const addEscKeyListener = () => {
escKeyListener = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
closeModal();
}
};
window.addEventListener('keydown', escKeyListener);
};
const removeEscKeyListener = () => {
window.removeEventListener('keydown', escKeyListener);
};
const dispatch = createEventDispatcher();
let classes = classNames('ChainSelector', $$props.class);
Expand All @@ -41,6 +55,7 @@
let modalOpen = false;
function closeModal() {
removeEscKeyListener();
modalOpen = false;
}
Expand All @@ -52,7 +67,7 @@
warningToast($t('messages.account.required'));
return;
}
addEscKeyListener();
modalOpen = true;
}
Expand Down Expand Up @@ -174,14 +189,15 @@
</div>
</li>
{/each}
{#if !small}
<!-- Todo: disabled for now -->
<!-- {#if !small}
<li role="menuitem" tabindex="0" class="p-4 rounded-[10px]">
<Alert type="warning" forceColumnFlow>
<p class="font-bold">{$t('chain_selector.disabled_options.title')}</p>
<p>{$t('chain_selector.disabled_options.description')}</p>
</Alert>
</li>
{/if}
{/if} -->
</ul>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@
if (event.key === 'Enter') {
selectToken(token);
}
if (event.key === 'Escape') {
closeMenu();
}
};
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,32 @@
const closeMenu = () => {
menuOpen = false;
document.removeEventListener('click', closeMenu);
removeListener();
};
const openMenu = (event: Event) => {
event.stopPropagation();
menuOpen = true;
// Click away to close menu
addListener();
};
let escKeyListener: (event: KeyboardEvent) => void;
const addListener = () => {
document.addEventListener('click', closeMenu, { once: true });
escKeyListener = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
closeMenu();
}
};
window.addEventListener('keydown', escKeyListener);
};
const removeListener = () => {
window.removeEventListener('click', closeMenu);
window.removeEventListener('keydown', escKeyListener);
};
const selectToken = async (token: Token) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
closeModal();
}
};
</script>

<button
Expand Down
2 changes: 1 addition & 1 deletion pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 comment on commit dbf7a24

@vercel
Copy link

@vercel vercel bot commented on dbf7a24 Sep 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

bridge-ui-v2-internal – ./packages/bridge-ui-v2

bridge-ui-v2-internal-taikoxyz.vercel.app
bridge-ui-v2-internal.vercel.app
bridge-ui-v2-internal-git-main-taikoxyz.vercel.app

Please sign in to comment.