Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(bridge-ui-v2): add dialog for claim with insufficient funds #14742

Merged
merged 4 commits into from
Sep 20, 2023
Merged

feat(bridge-ui-v2): add dialog for claim with insufficient funds #14742

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fac2869
add dialog
KorbinianK Sep 19, 2023
984ee89
add link
KorbinianK Sep 19, 2023
3934371
linting
KorbinianK Sep 19, 2023
b7b6ba0
Merge branch 'main' into feat/bridge-ui-v2--claim-funds-modal
dionysuzx Sep 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import { t } from 'svelte-i18n';

import { Button } from '$components/Button';
import { Icon } from '$components/Icon';
import { PUBLIC_GUIDE_URL } from '$env/static/public';
import { uid } from '$libs/util/uid';

export let modalOpen = false;

let dialogId = `dialog-${uid()}`;

function closeModal() {
removeEscKeyListener();
modalOpen = false;
}

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();
});

$: if (modalOpen) {
addEscKeyListener();
} else {
removeEscKeyListener();
}
</script>

<dialog id={dialogId} class="modal" class:modal-open={modalOpen}>
<div class="modal-box relative px-6 py-[35px] md:rounded-[20px] bg-neutral-background">
<button class="absolute right-6 top-[35px]" on:click={closeModal}>
<Icon type="x-close" fillClass="fill-primary-icon" size={24} />
</button>
<div class="w-full space-y-6">
<h3 class="title-body-bold mb-7">{$t('transactions.actions.claim.dialog.title')}</h3>
<div class="body-regular text-secondary-content mb-3 flex flex-col items-end">
<div>
{$t('transactions.actions.claim.dialog.description')}
</div>
<a href={PUBLIC_GUIDE_URL} target="_blank" class="flex link py-[10px]">
{$t('transactions.actions.claim.dialog.link')}<Icon type="arrow-top-right" />
</a>
</div>

<Button
type="primary"
class="px-[28px] py-[10px] rounded-full w-full border-primary-brand"
hasBorder={true}
on:click={closeModal}>
<span class="body-bold">{$t('common.ok')}</span>
</Button>
</div>
</div>
</dialog>
8 changes: 7 additions & 1 deletion packages/bridge-ui-v2/src/components/Transactions/Status.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@
import { network } from '$stores/network';
import { pendingTransactions } from '$stores/pendingTransactions';

import InsufficientFunds from './InsufficientFunds.svelte';

const log = getLogger('components:Status');

export let bridgeTx: BridgeTransaction;
Expand All @@ -41,6 +43,8 @@
let processable = false; // bridge tx state to be processed: claimed/retried/released
let bridgeTxStatus: Maybe<MessageStatus>;

let modalOpen = false;

// TODO: enum?
let loading: 'claiming' | 'releasing' | false = false;

Expand Down Expand Up @@ -136,7 +140,7 @@
warningToast($t('transactions.actions.claim.rejected'));
break;
case err instanceof InsufficientBalanceError:
errorToast($t('transactions.errors.insufficient_balance'));
modalOpen = true;
break;
case err instanceof InvalidProofError:
errorToast($t('TODO: InvalidProofError'));
Expand Down Expand Up @@ -289,3 +293,5 @@
<span>{$t('transactions.status.error.name')}</span>
{/if}
</div>

<InsufficientFunds bind:modalOpen />
7 changes: 6 additions & 1 deletion packages/bridge-ui-v2/src/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,12 @@
"claim": {
"tx": "Transaction sent to claim {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a> to see it in the explorer.",
"success": "Transaction completed! Your funds have been successfully claimed on {network}.",
"rejected": "Request to claim rejected."
"rejected": "Request to claim rejected.",
"dialog": {
"title": "Please wait",
"description": "Insufficient balance to claim yourself. Please wait for the relayer to claim for you automatically. Refer to our guide for more information.",
"link": "Go to guide"
}
},
"release": {
"tx": "Transaction sent to release {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a> to see it in the explorer.",
Expand Down