aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/LandingHeader.svelte
diff options
context:
space:
mode:
authorAdam Soltys <[email protected]>2022-09-15 16:37:31 -0700
committerAdam Soltys <[email protected]>2022-09-15 16:37:31 -0700
commit58a40fdc8d8bf2ddd0f88ff4b974e0fe9fcef245 (patch)
treea8cd94b1e6f4f214f66b9c05814cee3f791b5319 /src/components/LandingHeader.svelte
parentf098b90a10283b31694b037670cb6cbbc6613c85 (diff)
downloadcoinos-ui-58a40fdc8d8bf2ddd0f88ff4b974e0fe9fcef245.tar.gz
coinos-ui-58a40fdc8d8bf2ddd0f88ff4b974e0fe9fcef245.zip
transaction pagination
Diffstat (limited to 'src/components/LandingHeader.svelte')
0 files changed, 0 insertions, 0 deletions
generated by cgit v1.2.3 (git 2.51.0) at 2026-11-06 00:34:05 +0000
#n107'>107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 
<script>
	import { post, failure } from '$lib/utils';
	import { tick } from 'svelte';
	import { AppHeader, Icon } from '$comp';
	import { rate, user, preferredCurrency } from '$lib/store';
  import { _ } from 'svelte-i18n';

	let payreq = '',
		payreqField,
		withdrawing;

	let toggle = async () => {
		withdrawing = !withdrawing;
		await tick();
		if (withdrawing) payreqField.focus();
	};

	let withdraw = async () => {
		try {
			await post('/withdraw', { payreq });
			withdrawing = false;
		} catch (e) {
			failure(e.message);
		}
	};

	$: btcPrice = new Intl.NumberFormat('en-US', {
		style: 'currency',
		currency: 'USD'
	}).format($rate);

	$: accountBalanceFiat = new Intl.NumberFormat('en-US', {
		style: 'currency',
		currency: 'USD'
	}).format($user.account.balance * ($rate / 100000000));

	$: accountBalanceBtc = $user.account.balance / 100000000;

	$: accountBalanceSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
		$user.account.balance
	);

	$: feepayreq = new Intl.NumberFormat('en-US', {
		style: 'currency',
		currency: 'USD'
	}).format(($user.account.balance * ($rate / 100000000)) / 100);
</script>

{#if $user}
	<AppHeader avatarPosition="left-[calc(50vw-48px)] lg:left-[calc(15vw-48px)]" />

	<div
		class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-12 w-full md:w-72"
	>
		<h2 class="text-2xl font-semibold">{$user.username}</h2>
		<span class="text-secondary">{$_('user.addressGoesHere')}</span>
	</div>

	<div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
		<div>
			<h1 class="text-3xl md:text-4xl font-semibold mb-8">
				{withdrawing ? 'Withdraw' : 'Dashboard'}
			</h1>
			{#if !withdrawing}
				<span class="text-secondary mx-auto text-lg font-bold"
				  >{$_('user.dashboard.bitcoinPrice')}
            <span class="text-black">{$rate ? btcPrice : $_('user.dashboard.fetchingRate')}</span>
					{$preferredCurrency}
				</span>

				<span class="text-secondary block mt-1"
					>{@html $_('user.dashboard.dataFromBinance')}
				</span>

				<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px]">
					{$_('user.dashboard.ACCOUNT_BALANCE')}
				</h3>

				<span class="text-3xl font-bold block mb-1"
					>{$rate ? accountBalanceFiat : $_('user.dashboard.fetchingRate')}</span
				>

				<span class="text-secondary text-xl block">{accountBalanceSats} SAT</span>

				<button class="rounded-full border py-2 font-bold w-28 mt-4" on:click={toggle}
            >{$_('user.dashboard.withdraw')}</button
				>
				<p class="text-secondary my-2">{$_('user.dashboard.conversionFeeWarning')}</p>
			{:else}
				<div class="space-y-3 w-[250px] md:w-[500px] md:pr-20">
					<button on:click={() => (withdrawing = false)}>
						<Icon icon="arrow-left" style="w-8" />
					</button>

					<div>
						<label for="invoice" class="font-bold mb-1 block">Invoice</label>
						<input
							bind:this={payreqField}
							type="text"
							name="payreq"
							required
							bind:value={payreq}
							class="block rounded-2xl p-3 w-full bg-primary"
						/>
					</div>

					<div>
						<label for="note" class="font-bold mb-1 block">{$_('user.dashboard.optionalNote')}</label>
						<textarea name="note" rows={2} class="block rounded-2xl p-3 w-full bg-primary" />
					</div>

					<button
						disabled={!payreq}
						class="{!payreq
							? 'opacity-50'
							: 'opacity-100'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
						on:click={withdraw}>{$_('user.dashboard.send')}</button
					>
				</div>
			{/if}
		</div>
	</div>
{/if}