migrate to sveltekit-i18n

11 files changed, 88 insertions, 97 deletions

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 2bacc8a6..d3b9306d 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { page } from '$app/stores';
 	import { Icon, PageNotFound } from '$comp';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 </script>
 
 {#if $page.error.message.includes('not found') || $page.status === 404}
@@ -15,9 +15,9 @@
 
 			<Icon icon="error" style="mx-auto w-56" />
 
-			<h1 class="font-bold text-5xl">{($_('error.header'), { default: 'Error' })}</h1>
+			<h1 class="font-bold text-5xl">{($t('error.header'), { default: 'Error' })}</h1>
 			<p class="px-1 w-full md:w-96 break-all font-bold">{$page.error.message.toUpperCase()}</p>
-			<p>{($_('error.message'), { default: 'Please try again or contact support.' })}</p>
+			<p>{($t('error.message'), { default: 'Please try again or contact support.' })}</p>
 		</div>
 	</div>
 {/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1de48b9e..dfe52894 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,5 @@
 <script>
 	import { SvelteToast } from '@zerodevx/svelte-toast';
-	import '$lib/i18n';
-	import { isLoading, locale } from 'svelte-i18n';
 	import '../app.css';
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
@@ -11,7 +9,7 @@
 	import { goto } from '$app/navigation';
 	import { LoadingSplash } from '$comp';
 	import { warning, protectedRoutes } from '$lib/utils';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	$: $token = data.token;
 
@@ -23,17 +21,10 @@
 	let ready = false;
 
 	onMount(() => {
-		let localStorageLocale = localStorage.getItem('svelte-i18n-locale');
-		if (localStorageLocale) locale.set(localStorageLocale);
-
-		locale.subscribe((lng) => {
-			if (lng) localStorage.setItem('svelte-i18n-locale', lng);
-		});
-
 		if (protectedRoutes.find((p) => $page.url.pathname.match(p))) {
 			if (!$token) {
 				goto('/login');
-				warning($_('error.signIn'));
+				warning($t('error.signIn'));
 			}
 			user.subscribe((u) => u?.username && (ready = true));
 		} else {
@@ -44,7 +35,7 @@
 	});
 </script>
 
-{#if ready && !$isLoading}
+{#if ready}
 	<SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 	<slot />
 {:else}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index bb5df050..cb49dbe4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,7 +10,7 @@
 		Footer
 	} from '$comp';
 
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	let howItWorks;
 	let faq;
@@ -34,32 +34,32 @@
 	<!-- landing info 1 -->
 	<LandingInfoCard
 		image="lightning-qr"
-		title={$_('landing.info1.title')}
-		description={$_('landing.info1.description')}
+		title={$t('landing.info1.title')}
+		description={$t('landing.info1.description')}
 	/>
 
 	<!-- landing info 2 -->
-	<LandingInfoCard image="phone-checkout" title={$_('landing.info2.title')} order="reverse">
-		{$_('landing.info2.description1')}
+	<LandingInfoCard image="phone-checkout" title={$t('landing.info2.title')} order="reverse">
+		{$t('landing.info2.description1')}
 		<br /><br />
-		{$_('landing.info2.description2')}
+		{$t('landing.info2.description2')}
 		<br /><br />
-		{@html $_('landing.info2.description3')}
+		{@html $t('landing.info2.description3')}
 	</LandingInfoCard>
 
 	<!-- landing info 3 -->
 	<div>
 		<LandingInfoCard
 			image="customize"
-			title={$_('landing.info3.title')}
-			description={$_('landing.info3.description')}
+			title={$t('landing.info3.title')}
+			description={$t('landing.info3.description')}
 		/>
 		<div bind:this={howItWorks} />
 	</div>
 
 	<!-- how it works -->
 	<div>
-		<h3 class="text-5xl font-medium mb-10 text-center">{$_('howItWorks.header')}</h3>
+		<h3 class="text-5xl font-medium mb-10 text-center">{$t('howItWorks.header')}</h3>
 		<div
 			class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 lg:space-x-10 text-center"
 		>
@@ -73,7 +73,7 @@
 	<!-- faq -->
 	<div>
 		<div class="space-y-10">
-			<h3 class="text-5xl font-medium text-center">{$_('faq.header')}</h3>
+			<h3 class="text-5xl font-medium text-center">{$t('faq.header')}</h3>
 			{#each faqIDs as faqID}
 				<FaqCard questionID={faqID} />
 			{/each}
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index ed428d46..f2117be2 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -4,7 +4,7 @@
 	import { AppHeader, Icon, PageNotFound } from '$comp';
 	import { user } from '$lib/store';
 	import { copy } from '$lib/utils';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 	export let data;
 
 	let lightningAddress = `${data?.username}@coinos.io`;
@@ -43,7 +43,7 @@
 			<div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72">
 				<h1 class="text-3xl font-bold">{data.username}</h1>
 
-				<p class="text-secondary">{$_('user.addressGoesHere')}</p>
+				<p class="text-secondary">{$t('user.addressGoesHere')}</p>
 
 				<!--
         we need to hook this up
@@ -51,7 +51,7 @@
 					class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
 					on:click={() => (followed = !followed)}
 					><Icon icon={followed ? 'minus' : 'plus'} style="mr-1" />
-					{$_('user.' + (followed ? 'remove' : 'follow'))}
+					{$t('user.' + (followed ? 'remove' : 'follow'))}
 				</button>
         -->
 			</div>
@@ -62,7 +62,7 @@
 					class="w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
 				/>
 
-				<p class="text-secondary text-center font-semibold">{$_('user.scanToPayBTC')}</p>
+				<p class="text-secondary text-center font-semibold">{$t('user.scanToPayBTC')}</p>
 
 				<div
 					class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
index 56aa0d6f..ef8bef88 100644
--- a/src/routes/[username]/dashboard/+page.svelte
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -3,7 +3,7 @@
 	import { tick } from 'svelte';
 	import { AppHeader, Icon } from '$comp';
 	import { selectedRate, user } from '$lib/store';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	let payreq = '',
 		payreqField,
@@ -48,7 +48,7 @@
 		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>
+		<span class="text-secondary">{$t('user.addressGoesHere')}</span>
 	</div>
 
 	<div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
@@ -58,28 +58,28 @@
 			</h1>
 			{#if !withdrawing}
 				<span class="text-secondary mx-auto text-lg font-bold"
-					>{$_('user.dashboard.bitcoinPrice')}
+					>{$t('user.dashboard.bitcoinPrice')}
 					<span class="text-black"
-						>{$selectedRate ? btcPrice : $_('user.dashboard.fetchingRate')}</span
+						>{$selectedRate ? btcPrice : $t('user.dashboard.fetchingRate')}</span
 					>
 				</span>
 
-				<span class="text-secondary block mt-1">{@html $_('user.dashboard.dataFromBinance')} </span>
+				<span class="text-secondary block mt-1">{@html $t('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')}
+					{$t('user.dashboard.ACCOUNT_BALANCE')}
 				</h3>
 
 				<span class="text-3xl font-bold block mb-1"
-					>{$selectedRate ? accountBalanceFiat : $_('user.dashboard.fetchingRate')}</span
+					>{$selectedRate ? accountBalanceFiat : $t('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
+					>{$t('user.dashboard.withdraw')}</button
 				>
-				<p class="text-secondary my-2">{$_('user.dashboard.conversionFeeWarning')}</p>
+				<p class="text-secondary my-2">{$t('user.dashboard.conversionFeeWarning')}</p>
 			{:else}
 				<div class="space-y-3 w-[250px] md:w-[500px] md:pr-20">
 					<button on:click={() => (withdrawing = false)}>
@@ -100,7 +100,7 @@
 
 					<div>
 						<label for="note" class="font-bold mb-1 block"
-							>{$_('user.dashboard.optionalNote')}</label
+							>{$t('user.dashboard.optionalNote')}</label
 						>
 						<textarea name="note" rows={2} class="block rounded-2xl p-3 w-full bg-primary" />
 					</div>
@@ -110,7 +110,7 @@
 						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
+						on:click={withdraw}>{$t('user.dashboard.send')}</button
 					>
 				</div>
 			{/if}
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
index 2706ec86..3ac2aa27 100644
--- a/src/routes/[username]/receive/+page.svelte
+++ b/src/routes/[username]/receive/+page.svelte
@@ -5,7 +5,7 @@
 	import { invoiceAmount, invoiceAmountFiat, selectedRate, user } from '$lib/store';
 	import { post, warning } from '$lib/utils';
 	import { page } from '$app/stores';
-	import { _, number } from 'svelte-i18n';
+  import { t } from '$lib/translations';
 
 	let useFiat = true;
 	let amountFiat = 0;
@@ -53,7 +53,7 @@
 					}
 				}
 			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > $selectedRate) {
-				warning($_('user.receive.lessThan1BTCWarning'));
+				warning($t('user.receive.lessThan1BTCWarning'));
 			} else if (amountFiat !== 0 && amountFiat.match(/\.../)) {
 				return;
 			} else {
@@ -73,7 +73,7 @@
 					}
 				}
 			} else if (value !== '<' && parseInt(amountSats + value) > 100000000) {
-				warning($_('user.receive.lessThan1BTCWarning'));
+				warning($t('user.receive.lessThan1BTCWarning'));
 			} else {
 				amountSats = amountSats + value;
 			}
@@ -185,7 +185,7 @@
 							: 'opacity-100'}"
 						on:click={submit}
 						disabled={$invoiceAmount === 0}
-						><Icon icon="qr" style="mr-2" /> {$_('user.receive.showQR')}</button
+						><Icon icon="qr" style="mr-2" /> {$t('user.receive.showQR')}</button
 					>
 					<!--
 					<button
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index 71cf1232..c0e0a9a5 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { AppHeader, Icon, Toggle, LocaleSelector } from '$comp';
 	import { user, colorTheme, rates, token } from '$lib/store';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 	import { success, failure, put } from '$lib/utils';
 
 	let setting = 'account';
@@ -41,31 +41,31 @@
 
 	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
-			{$_('user.settings.header')}
+			{$t('user.settings.header')}
 		</h1>
 
 		<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
 			<button class:selected={setting === 'account'} on:click={() => (setting = 'account')}
-				>{$_('user.settings.ACCOUNT')}</button
+				>{$t('user.settings.ACCOUNT')}</button
 			>
 
 			<button class:selected={setting === 'pos'} on:click={() => (setting = 'pos')}
-				>{$_('user.settings.POINT_OF_SALE')}</button
+				>{$t('user.settings.POINT_OF_SALE')}</button
 			>
 
 			<button class:selected={setting === 'security'} on:click={() => (setting = 'security')}
-				>{$_('user.settings.SECURITY')}</button
+				>{$t('user.settings.SECURITY')}</button
 			>
 		</div>
 
 		{#if setting === 'account'}
 			<div>
-				<label for="language" class="font-bold block mb-1">{$_('user.settings.locale')}</label>
+				<label for="language" class="font-bold block mb-1">{$t('user.settings.locale')}</label>
 				<LocaleSelector style="block py-3 w-full" />
 			</div>
 
 			<div>
-				<label for="username" class="font-bold mb-1 block">{$_('user.settings.username')}</label>
+				<label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label>
 				<input
 					type="text"
 					disabled
@@ -77,7 +77,7 @@
 
 			<div class="relative">
 				<label for="password" class="block font-bold block mb-1"
-					>{$_('user.settings.newPassword')}</label
+					>{$t('user.settings.newPassword')}</label
 				>
 				{#if revealPassword}
 					<input type="text" class="block border rounded-xl p-3 w-full" bind:value={password} />
@@ -95,34 +95,34 @@
 
 			<div>
 				<label for="address" class="font-bold mb-1 block"
-					>{$_('user.settings.businessAddress')}</label
+					>{$t('user.settings.businessAddress')}</label
 				>
 				<input type="text" name="address" class="block border rounded-xl p-3 w-full" />
 			</div>
 
 			<div>
 				<div class="flex justify-between items-center">
-					<span class="font-bold">{$_('user.settings.emailNotifications')}</span>
+					<span class="font-bold">{$t('user.settings.emailNotifications')}</span>
 					<Toggle id="email-notify" />
 				</div>
 				<p class="text-secondary mt-1 w-9/12">
-					{$_('user.settings.emailNotificationsDescription')}
+					{$t('user.settings.emailNotificationsDescription')}
 				</p>
 			</div>
 
 			<div>
 				<div class="flex justify-between items-center">
-					<span class="font-bold">{$_('user.settings.smsNotifications')}</span>
+					<span class="font-bold">{$t('user.settings.smsNotifications')}</span>
 					<Toggle id="sms-notify" />
 				</div>
 				<p class="text-secondary mt-1 w-9/12">
-					{$_('user.settings.smsNotificationsDescription')}
+					{$t('user.settings.smsNotificationsDescription')}
 				</p>
 			</div>
 
 			<div>
-				<span class="font-bold mb-1 block">{$_('user.settings.theme')}</span>
-				<p class="text-secondary mb-1">{$_('user.settings.themeDescription')}</p>
+				<span class="font-bold mb-1 block">{$t('user.settings.theme')}</span>
+				<p class="text-secondary mb-1">{$t('user.settings.themeDescription')}</p>
 				{#each colorThemes as colors}
 					<button
 						class="mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme ===
@@ -136,7 +136,7 @@
 		{:else if setting === 'pos'}
 			<div>
 				<label for="currency" class="font-bold block mb-1"
-					>{$_('user.settings.localCurrency')}</label
+					>{$t('user.settings.localCurrency')}</label
 				>
 				<select name="currency" on:change={updateFiat} class="block py-3 w-full">
 					{#each fiats as fiat}
@@ -146,27 +146,27 @@
 			</div>
 
 			<div>
-				<label for="btc-unit" class="font-bold block mb-1">{$_('user.settings.btcUnit')}</label>
+				<label for="btc-unit" class="font-bold block mb-1">{$t('user.settings.btcUnit')}</label>
 				<select disabled name="btc-unit" class="block py-3 w-full">
-					<option value="SATS">{$_('user.settings.satoshis')} (SAT)</option>
-					<option value="BTC">{$_('user.settings.bitcoin')} (BTC)</option>
+					<option value="SATS">{$t('user.settings.satoshis')} (SAT)</option>
+					<option value="BTC">{$t('user.settings.bitcoin')} (BTC)</option>
 				</select>
 			</div>
 		{:else}
 			<div>
-				<span class="font-bold mb-1">{$_('user.settings.securityPIN')}</span>
+				<span class="font-bold mb-1">{$t('user.settings.securityPIN')}</span>
 				<p class="text-secondary mb-1">
-					{$_('user.settings.securityPINDescription')}
+					{$t('user.settings.securityPINDescription')}
 				</p>
 				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
-					><Icon icon="lock" style="mr-1" /> {$_('user.settings.setPIN')}</button
+					><Icon icon="lock" style="mr-1" /> {$t('user.settings.setPIN')}</button
 				>
 			</div>
 
 			<div>
-				<label for="auto-lock" class="font-bold mb-1">{$_('user.settings.autoLock')}</label>
+				<label for="auto-lock" class="font-bold mb-1">{$t('user.settings.autoLock')}</label>
 				<p class="text-secondary mb-1">
-					{$_('user.settings.autoLockDescription')}
+					{$t('user.settings.autoLockDescription')}
 				</p>
 				<select name="auto-lock" class="block py-3 w-full">
 					<option value="5">5 min</option>
@@ -178,12 +178,12 @@
 			</div>
 
 			<div>
-				<span class="font-bold mb-1">{$_('user.settings.twofa')}</span>
+				<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
 				<p class="text-secondary mb-1">
-					{$_('user.settings.twofaDescription')}
+					{$t('user.settings.twofaDescription')}
 				</p>
 				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
-					><Icon icon="mobile" style="mr-1" /> {$_('user.settings.twofaSetup')}</button
+					><Icon icon="mobile" style="mr-1" /> {$t('user.settings.twofaSetup')}</button
 				>
 			</div>
 		{/if}
diff --git a/src/routes/[username]/support/+page.svelte b/src/routes/[username]/support/+page.svelte
index 6bbb5fb2..e7341806 100644
--- a/src/routes/[username]/support/+page.svelte
+++ b/src/routes/[username]/support/+page.svelte
@@ -2,7 +2,7 @@
 	// this needs to be hooked up to the backend
 	import { AppHeader } from '$comp';
 	import { user } from '$lib/store';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 	let email;
 	let message;
 </script>
@@ -12,12 +12,12 @@
 
 	<div class="my-20">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
-			{$_('user.support.header')}
+			{$t('user.support.header')}
 		</h1>
 
 		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
 			<div>
-				<label for="email" class="font-semibold">{$_('user.support.email')}</label>
+				<label for="email" class="font-semibold">{$t('user.support.email')}</label>
 				<input
 					class="block border rounded-xl p-2 w-full"
 					type="email"
@@ -28,7 +28,7 @@
 			</div>
 
 			<div>
-				<label for="account" class="font-semibold">{$_('user.support.accountName')}</label>
+				<label for="account" class="font-semibold">{$t('user.support.accountName')}</label>
 				<input
 					class="block border rounded-xl p-2 w-full"
 					type="text"
@@ -40,7 +40,7 @@
 			</div>
 
 			<div>
-				<label for="message" class="font-semibold">{$_('user.support.message')}</label>
+				<label for="message" class="font-semibold">{$t('user.support.message')}</label>
 				<textarea
 					rows={5}
 					class="block border rounded-xl p-2 w-full"
@@ -56,7 +56,7 @@
 				class="{!email || !message
 					? 'opacity-50'
 					: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto"
-				>{$_('user.support.send')}</button
+				>{$t('user.support.send')}</button
 			>
 		</form>
 	</div>
diff --git a/src/routes/[username]/transactions/+page.svelte b/src/routes/[username]/transactions/+page.svelte
index 996b9b9a..743bfc1c 100644
--- a/src/routes/[username]/transactions/+page.svelte
+++ b/src/routes/[username]/transactions/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { AppHeader } from '$comp';
 	import { user, newPayment } from '$lib/store';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	$newPayment = false;
 
@@ -13,14 +13,14 @@
 
 	<div class="my-20">
 		<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
-			{$_('user.transactions.header')}
+			{$t('user.transactions.header')}
 		</h1>
 
 		<div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg">
 			<div class="text-secondary grid grid-cols-3 mb-5">
-				<h2>{$_('user.transactions.AMOUNT')}</h2>
-				<h2 class="text-center">{$_('user.transactions.TYPE')}</h2>
-				<h2 class="text-right">{$_('user.transactions.TIME')}</h2>
+				<h2>{$t('user.transactions.AMOUNT')}</h2>
+				<h2 class="text-center">{$t('user.transactions.TYPE')}</h2>
+				<h2 class="text-right">{$t('user.transactions.TIME')}</h2>
 			</div>
 
 			<div class="space-y-10">
@@ -45,7 +45,7 @@
 
 							<div class="text-center">
 								<span class="text-secondary"
-									>{$_('user.transactions.' + (tx.amount < 0 ? 'sent' : 'received'))}</span
+									>{$t('user.transactions.' + (tx.amount < 0 ? 'sent' : 'received'))}</span
 								>
 							</div>
 
@@ -55,7 +55,7 @@
 						</div>
 					{/each}
 				{:else}
-					<p class="text-secondary text-lg text-center">{$_('user.transactions.empty')}</p>
+					<p class="text-secondary text-lg text-center">{$t('user.transactions.empty')}</p>
 				{/if}
 			</div>
 		</div>
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index f42aba04..67105831 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -6,7 +6,7 @@
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import { copy } from '$lib/utils';
-	import { _, number } from 'svelte-i18n';
+  import { t } from '$lib/translations';
 
 	export let data;
 	$: ({ amount, id, rate, status, text, username } = data);
@@ -151,7 +151,7 @@
 						? 'bottom-0'
 						: '-top-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none left-0 md:static text-center space-y-5"
 				>
-					<h1 class="hidden md:block text-4xl font-semibold">{$_('invoice.addTipq')}</h1>
+					<h1 class="hidden md:block text-4xl font-semibold">{$t('invoice.addTipq')}</h1>
 
 					<div>
 						<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
@@ -246,7 +246,7 @@
 								stroke-linejoin="round"
 							/>
 						</svg>
-						{$_('invoice.addTip')}
+						{$t('invoice.addTip')}
 					</button>
 
 					<span class="text-secondary block"
@@ -293,13 +293,13 @@
 {:else}
 	<div class="text-center mt-20 md:mt-0">
 		<Image image="success" style="w-full md:w-3/4 xl:w-1/2 mx-auto max-w-3xl" />
-		<h1 class="text-3xl md:text-4xl font-bold mb-6">{$_('invoice.paymentSuccessful')}</h1>
+		<h1 class="text-3xl md:text-4xl font-bold mb-6">{$t('invoice.paymentSuccessful')}</h1>
 		<h2 class="text-2xl md:text-3xl font-semibold">
 			{totalAmountFormatted}
 		</h2>
 		<h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SAT)</h3>
 		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold" on:click={handleDoneClick}>
-			{$_('invoice.done')}
+			{$t('invoice.done')}
 		</button>
 	</div>
 {/if}
diff --git a/src/routes/jobs/+page.svelte b/src/routes/jobs/+page.svelte
index db637b39..d3d17f7d 100644
--- a/src/routes/jobs/+page.svelte
+++ b/src/routes/jobs/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { Icon } from '$comp';
 	import { goto } from '$app/navigation';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 </script>
 
 <a href="/">
@@ -11,22 +11,22 @@
 	<button on:click={() => goto('/')}>
 		<Icon icon="arrow-left" style="w-8" />
 	</button>
-	<h1 class="text-5xl font-medium">{$_('jobs.header')}</h1>
+	<h1 class="text-5xl font-medium">{$t('jobs.header')}</h1>
 
-	<h2 class="text-2xl font-medium">{$_('jobs.subheader')}</h2>
+	<h2 class="text-2xl font-medium">{$t('jobs.subheader')}</h2>
 
 	<p class="text-justify text-xl text-secondary">
-		{$_('jobs.pitch1')}
+		{$t('jobs.pitch1')}
 		<br /><br />
-		{$_('jobs.pitch2')}
+		{$t('jobs.pitch2')}
 		<a
 			href="https://github.com/coinos"
 			target="_blank"
 			rel="noreferrer"
-			class="underline underline-offset-4">{$_('jobs.github')}</a
+			class="underline underline-offset-4">{$t('jobs.github')}</a
 		>.
 		<br /><br />
-		{$_('jobs.pitch3')}
+		{$t('jobs.pitch3')}
 		<a href="mailto:[email protected]" class="underline underline-offset-4">[email protected]</a>.
 	</p>
 </div>