/
FaucetRequestPopup.svelte
52 lines (48 loc) · 1.84 KB
/
FaucetRequestPopup.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<script lang="typescript">
import { requestTokensFromFaucet } from '@contexts/developer'
import { BaseError } from '@core/error'
import { localize } from '@core/i18n'
import { nodeInfo } from '@core/network'
import { closePopup } from '@auxiliary/popup'
import { Button, Error, Text, FontWeight, TextType } from 'shared/components'
let isBusy = false
let error: BaseError
async function onConfirm(): Promise<void> {
error = null
try {
isBusy = true
await requestTokensFromFaucet()
closePopup()
} catch (reason) {
error = reason
? new BaseError({ message: reason?.error ?? reason?.message ?? reason, logToConsole: true })
: reason
} finally {
isBusy = false
}
}
function onBack(): void {
closePopup()
}
</script>
<faucet-request-popup class="w-full h-full space-y-6 flex flex-auto flex-col flex-shrink-0">
<Text type={TextType.h3} fontWeight={FontWeight.semibold} classes="text-left">
{localize('popups.faucetRequest.title')}
</Text>
<div class="w-full flex-col space-y-2">
<Text type={TextType.p} classes="text-left">
{localize('popups.faucetRequest.body', {
values: { token: $nodeInfo?.baseToken?.name, network: $nodeInfo?.protocol?.networkName },
})}
</Text>
{#if error}
<Error error={error?.message} />
{/if}
</div>
<popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
<Button classes="w-full" outline onClick={onBack} disabled={isBusy}>{localize('actions.back')}</Button>
<Button classes="w-full" onClick={onConfirm} disabled={isBusy} {isBusy}>
{localize('actions.confirm')}
</Button>
</popup-buttons>
</faucet-request-popup>