aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/HowItWorksCard.svelte
blob: 784c738d11bcc749ce65e71e79bbabf2f13e0686 (plain) (blame) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
	import Icon from './Icon.svelte';
	import { t } from '$lib/translations';
	export let image;
	export let stepID;
</script>

<div class="space-y-5">
	<Icon icon={image} style="mx-auto w-32 h-32" />
	<p class="text-2xl font-medium">{$t('howItWorks.' + stepID + '.header')}</p>
	<p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto">
		{$t('howItWorks.' + stepID + '.description')}
	</p>
</div>
generated by cgit v1.2.3 (git 2.51.0) at 2026-11-10 02:00:35 +0000
light .mi { color: #00D; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #00D; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #D20; background-color: #FFF0F0 } /* Literal.String.Affix */ .highlight .sb { color: #D20; background-color: #FFF0F0 } /* Literal.String.Backtick */ .highlight .sc { color: #D20; background-color: #FFF0F0 } /* Literal.String.Char */ .highlight .dl { color: #D20; background-color: #FFF0F0 } /* Literal.String.Delimiter */ .highlight .sd { color: #D20; background-color: #FFF0F0 } /* Literal.String.Doc */ .highlight .s2 { color: #D20; background-color: #FFF0F0 } /* Literal.String.Double */ .highlight .se { color: #04D; background-color: #FFF0F0 } /* Literal.String.Escape */ .highlight .sh { color: #D20; background-color: #FFF0F0 } /* Literal.String.Heredoc */ .highlight .si { color: #33B; background-color: #FFF0F0 } /* Literal.String.Interpol */ .highlight .sx { color: #2B2; background-color: #F0FFF0 } /* Literal.String.Other */ .highlight .sr { color: #080; background-color: #FFF0FF } /* Literal.String.Regex */ .highlight .s1 { color: #D20; background-color: #FFF0F0 } /* Literal.String.Single */ .highlight .ss { color: #A60; background-color: #FFF0F0 } /* Literal.String.Symbol */ .highlight .bp { color: #038 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #06B; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #369 } /* Name.Variable.Class */ .highlight .vg { color: #D70 } /* Name.Variable.Global */ .highlight .vi { color: #33B } /* Name.Variable.Instance */ .highlight .vm { color: #369 } /* Name.Variable.Magic */ .highlight .il { color: #00D; font-weight: bold } /* Literal.Number.Integer.Long */
<script>
	import { SvelteToast } from '@zerodevx/svelte-toast';
	import { onDestroy, onMount } from 'svelte';
	import { close, connect, send } from '$lib/socket';
	import { last, selectedRate, invoice, rate, user, request } from '$lib/store';
	import { page } from '$app/stores';
	import { browser } from '$app/environment';
	import { goto } from '$app/navigation';
	import { LoadingSplash, Invoice, Request } from '$comp';
	import { warning, protectedRoutes } from '$lib/utils';
	import { t, locale } from '$lib/translations';

	const localeLocalStorageKey = 'sveltekit-i18n-locale';

	export let data;

	let { subject } = $page.data;
	let r, u, token, rates;

	$: update(data);
	let update = () => {
		({ user: u, rate: r, token, rates } = data);
		$rate = r;
		$user = u;
	};

	$: $selectedRate = r * (rates[u?.currency || 'USD'] / rates.USD);

	onMount(() => {
		let localStorageLocale = localStorage.getItem(localeLocalStorageKey);
		if (localStorageLocale) locale.set(localStorageLocale);

		locale.subscribe((lng) => {
			if (lng) localStorage.setItem(localeLocalStorageKey, lng);
		});

		browser && checkSocket();
	});

	$: browser && connect(token);

	let lost,
		timer,
		counter = 0;

	let checkSocket = () => {
		counter++;
		lost = Date.now() - $last > 15000;
    if (lost) connect(token);
		if (counter > 5) {
			send('heartbeat');
			counter = 0;
		}
		timer = setTimeout(checkSocket, 1000);
	};

	onDestroy(() => browser && clearTimeout(timer));
</script>

<svelte:head>
	{#if subject}
		<title>coinos - {subject.username}</title>
		<meta name="lightning" content={`lnurlp:${subject.username}@coinos.io`} />
	{:else}
		<title>coinos</title>
	{/if}

	{#if subject?.profile}
		<meta name="og:image" content={`/api/public/${subject.username}-profile.webp`} />
	{:else}
		<meta property="og:image" content="/icons/logo.svg" />
	{/if}
</svelte:head>

<SvelteToast options={{ reversed: true, intro: { y: 192 } }} />

{#if lost}
	<div class="fixed bottom-12 right-12 text-red-600 bg-white z-50 px-4 py-2 rounded-full border">
		Lost connection to server, try refreshing
	</div>
{/if}

<main data-sveltekit-prefetch>
	<slot />
</main>

{#if $invoice}
	<Invoice user={u} />
{/if}

{#if $request}
	<Request user={u} />
{/if}
generated by cgit v1.2.3 (git 2.51.0) at 2026-11-10 02:00:34 +0000