migrate to sveltekit-i18n

28 files changed, 413 insertions, 273 deletions

diff --git a/doc/i18n-technical.md b/doc/i18n-technical.md
index c1746162..b59934ae 100644
--- a/doc/i18n-technical.md
+++ b/doc/i18n-technical.md
@@ -37,7 +37,7 @@ Each locale in `coinos-ui-v2` is defined by a JSON file in `src/locales`. Its na
 Strings are internationalized by simply using `svelte-i18n`'s [`$format`](https://github.com/kaisermann/svelte-i18n/blob/96a5adab7560249c8881e0612454e01c09273400/docs/Formatting.md) function. A localized string looks like this:
 
 ```
-{$_('stringID')}
+{$t('stringID')}
 ```
 
 (`$_` is a convenient alias for `$format`.)
diff --git a/package.json b/package.json
index 04dbf4ae..90ec68de 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,9 @@
 		"prettier-plugin-svelte": "^2.7.0",
 		"qr-code-styling": "1.6.0-rc.1",
 		"svelte": "^3.49.0",
-		"svelte-i18n": "^3.4.0",
 		"svelte-outclick": "^3.1.0",
 		"svelte-preprocess": "^4.10.7",
+		"sveltekit-i18n": "^2.2.2",
 		"tailwindcss": "^3.1.6",
 		"vite": "^3.0.3"
 	},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b68a7e3f..1f75fed0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,9 +12,9 @@ specifiers:
   prettier-plugin-svelte: ^2.7.0
   qr-code-styling: 1.6.0-rc.1
   svelte: ^3.49.0
-  svelte-i18n: ^3.4.0
   svelte-outclick: ^3.1.0
   svelte-preprocess: ^4.10.7
+  sveltekit-i18n: ^2.2.2
   tailwindcss: ^3.1.6
   vite: ^3.0.3
 
@@ -30,9 +30,9 @@ devDependencies:
   prettier-plugin-svelte: 2.7.0_o3ioganyptcsrh6x4hnxvjkpqi
   qr-code-styling: 1.6.0-rc.1
   svelte: 3.49.0
-  svelte-i18n: [email protected]
   svelte-outclick: 3.1.0
   svelte-preprocess: 4.10.7_nxvsp6sjiltnatqa6jdm4mr6zu
+  sveltekit-i18n: [email protected]
   tailwindcss: 3.1.6
   vite: 3.0.3
 
@@ -42,40 +42,6 @@ packages:
     resolution: {integrity: sha512-B1/plF62pt+H2IJHvApK8fdOJAVsvojvacuac8x8s+JIyqbropMyqNqHTKLm3YD8ZFLGwYeFTudU+PQ7vGvBdA==}
     dev: true
 
-  /@formatjs/ecma402-abstract/1.11.4:
-    resolution: {integrity: sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==}
-    dependencies:
-      '@formatjs/intl-localematcher': 0.2.25
-      tslib: 2.4.0
-    dev: true
-
-  /@formatjs/fast-memoize/1.2.1:
-    resolution: {integrity: sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==}
-    dependencies:
-      tslib: 2.4.0
-    dev: true
-
-  /@formatjs/icu-messageformat-parser/2.1.0:
-    resolution: {integrity: sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==}
-    dependencies:
-      '@formatjs/ecma402-abstract': 1.11.4
-      '@formatjs/icu-skeleton-parser': 1.3.6
-      tslib: 2.4.0
-    dev: true
-
-  /@formatjs/icu-skeleton-parser/1.3.6:
-    resolution: {integrity: sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==}
-    dependencies:
-      '@formatjs/ecma402-abstract': 1.11.4
-      tslib: 2.4.0
-    dev: true
-
-  /@formatjs/intl-localematcher/0.2.25:
-    resolution: {integrity: sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==}
-    dependencies:
-      tslib: 2.4.0
-    dev: true
-
   /@iarna/toml/2.2.5:
     resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
     dev: true
@@ -220,6 +186,20 @@ packages:
       - supports-color
     dev: true
 
+  /@sveltekit-i18n/base/[email protected]:
+    resolution: {integrity: sha512-F8gqG2+KAOeT0o2wYlUrW3TRCX7zaD7rBy/1CEVNw0irfw9TgFf/ODmhubkHHT3+6Zk+SMz8RNgeuffBfAMbJw==}
+    peerDependencies:
+      svelte: ^3.x
+    dependencies:
+      svelte: 3.49.0
+    optionalDependencies:
+      '@sveltekit-i18n/parser-default': 1.0.3
+    dev: true
+
+  /@sveltekit-i18n/parser-default/1.0.3:
+    resolution: {integrity: sha512-HheveklTjp3hxpYQhoHfyA6B4bQaUeSV5MQf2usIv/58UF2jY/YqhCAWj9bDBjufbuZc5pSz4BXvdX3WVT+viA==}
+    dev: true
+
   /@types/node/18.6.1:
     resolution: {integrity: sha512-z+2vB6yDt1fNwKOeGbckpmirO+VBDuQqecXkgeIqDlaOtmKn6hPR/viQ8cxCfqLU4fTlvM3+YjM367TukWdxpg==}
     dev: true
@@ -895,15 +875,6 @@ packages:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: true
 
-  /intl-messageformat/9.13.0:
-    resolution: {integrity: sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==}
-    dependencies:
-      '@formatjs/ecma402-abstract': 1.11.4
-      '@formatjs/fast-memoize': 1.2.1
-      '@formatjs/icu-messageformat-parser': 2.1.0
-      tslib: 2.4.0
-    dev: true
-
   /is-binary-path/2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -1464,21 +1435,6 @@ packages:
       svelte: 3.49.0
     dev: true
 
-  /svelte-i18n/[email protected]:
-    resolution: {integrity: sha512-590N+YIRlebDT3fXmuAxd4guQZLR3vm4kCs5UhWYmw3SxOlJNZ7HwYYiw6d4jDr7P+Cx7DSopk1Z1K9wn8B6EA==}
-    engines: {node: '>= 11.15.0'}
-    hasBin: true
-    peerDependencies:
-      svelte: ^3.25.1
-    dependencies:
-      deepmerge: 4.2.2
-      estree-walker: 2.0.2
-      intl-messageformat: 9.13.0
-      sade: 1.8.1
-      svelte: 3.49.0
-      tiny-glob: 0.2.9
-    dev: true
-
   /svelte-outclick/3.1.0:
     resolution: {integrity: sha512-1p/4UAuBfgfltMByTXjE3wbNAYaPihsB9HkhYrKgkiUgZSUtQ+Tpr/gxLu0LIsgft1EKt1izWg/VfzO+f5lQUA==}
     dev: true
@@ -1539,6 +1495,16 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
+  /sveltekit-i18n/[email protected]:
+    resolution: {integrity: sha512-6eygICleGCSL7elY7A3trF8XUhV+mlW56ZSoD0UUKXlw+Y6u0MTTHDq48u1LyY73SfnlbPHXgTarhTjZ0BvUKA==}
+    peerDependencies:
+      svelte: ^3.x
+    dependencies:
+      '@sveltekit-i18n/base': [email protected]
+      '@sveltekit-i18n/parser-default': 1.0.3
+      svelte: 3.49.0
+    dev: true
+
   /tailwindcss/3.1.6:
     resolution: {integrity: sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==}
     engines: {node: '>=12.13.0'}
@@ -1605,10 +1571,6 @@ packages:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
     dev: true
 
-  /tslib/2.4.0:
-    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
-    dev: true
-
   /undici/5.8.2:
     resolution: {integrity: sha512-3KLq3pXMS0Y4IELV045fTxqz04Nk9Ms7yfBBHum3yxsTR4XNn+ZCaUbf/mWitgYDAhsplQ0B1G4S5D345lMO3A==}
     engines: {node: '>=12.18'}
diff --git a/src/components/404.svelte b/src/components/404.svelte
index 4d5be76e..08323d40 100644
--- a/src/components/404.svelte
+++ b/src/components/404.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Icon } from '$comp';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 </script>
 
 <div class="flex justify-center items-center mt-20">
@@ -11,7 +11,7 @@
 
 		<Icon icon="question" style="mx-auto w-56" />
 
-		<h1 class="font-bold text-5xl">{$_('404.404')}</h1>
-		<p>{$_('404.pageNotFound')}</p>
+		<h1 class="font-bold text-5xl">{$t('404.404')}</h1>
+		<p>{$t('404.pageNotFound')}</p>
 	</div>
 </div>
diff --git a/src/components/About.svelte b/src/components/About.svelte
index db74fd96..257fc49c 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -1,22 +1,22 @@
 <script>
 	import { Image, Icon, LocationsMap } from '$comp';
-	import { _, json } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 </script>
 
-<h3 class="text-5xl font-medium mb-10 text-center">{$_('about.header')}</h3>
+<h3 class="text-5xl font-medium mb-10 text-center">{$t('about.header')}</h3>
 <div
 	class="md:px-10 lg:px-0 block lg:flex justify-center text-secondary text-xl lg:space-x-20 mx-auto max-w-7xl relative"
 >
 	<p class="w-full lg:w-5/12">
-		{@html $_('about.p1')}
+		{@html $t('about.p1')}
 		<br /><br />
-		{@html $_('about.p2')}
+		{@html $t('about.p2')}
 		<br /><br />
 	</p>
 	<p class="w-full lg:w-5/12">
-		{@html $_('about.p3')}
+		{@html $t('about.p3')}
 		<br /><br />
-		{@html $_('about.p4')}
+		{@html $t('about.p4')}
 	</p>
 	<Image image="swoosh" style="w-32 absolute -bottom-20 lg:bottom-0 right-0 md:right-10" />
 </div>
@@ -24,17 +24,17 @@
 <div class="px-5 block lg:flex justify-center lg:space-x-32 items-center mt-40 lg:mt-20">
 	<div class="space-y-5 mb-5 lg:mb-0">
 		<h3 class="text-5xl font-medium mb-10 text-center lg:text-right">
-			{$_('about.founder.header')}
+			{$t('about.founder.header')}
 		</h3>
 
 		<Image image="adam" style="rounded-full mx-auto lg:mx-0 lg:ml-auto w-40" />
 
 		<div class="space-y-2">
 			<span class="text-2xl text-center font-semibold block lg:text-right"
-				>{$_('about.founder.name')}</span
+				>{$t('about.founder.name')}</span
 			>
 			<span class="text-xl text-center text-secondary block lg:text-right"
-				>{$_('about.founder.position')}</span
+				>{$t('about.founder.position')}</span
 			>
 		</div>
 
@@ -57,16 +57,13 @@
 	<ul
 		class="w-full mx-auto md:w-[700px] lg:w-[500px] xl:w-auto text-secondary px-1 md:px-10 text-xl list-disc space-y-5"
 	>
-		{#each Object.values($json('about.founder.qualifications')) as qualification}
-			<li>{qualification}</li>
-		{/each}
 	</ul>
 </div>
 
 <div class="mt-20">
-	<h3 class="text-5xl font-medium mb-5 text-center">{$_('about.locations.header')}</h3>
+	<h3 class="text-5xl font-medium mb-5 text-center">{$t('about.locations.header')}</h3>
 	<p class="text-secondary text-xl w-full md:w-10/12 lg:w-2/3 2xl:w-[800px] mx-auto mb-10">
-		{@html $_('about.locations.description')}
+		{@html $t('about.locations.description')}
 	</p>
 	<LocationsMap />
 </div>
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 1d24cb1d..7b3987d5 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -5,7 +5,7 @@
 	import { user, newPayment, colorTheme } from '$lib/store';
 	import { goto } from '$app/navigation';
 	import { Icon } from '$comp';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	export let avatarPosition = 'left-[calc(50vw-48px)]';
 
@@ -75,7 +75,7 @@
 									<button
 										class="flex justify-center items-center font-semibold text-sm"
 										on:click={() => handleMenuItemClick(button.goto)}
-										><Icon icon={button.icon} style="mr-1" /> {$_(button.stringID)}
+										><Icon icon={button.icon} style="mr-1" /> {$t(button.stringID)}
 									</button>
 								</li>
 							{/each}
@@ -86,7 +86,7 @@
 		{:else}
 			<a href="/login">
 				<button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm"
-					>{$_('nav.signIn')}</button
+					>{$t('nav.signIn')}</button
 				>
 			</a>
 		{/if}
diff --git a/src/components/FaqCard.svelte b/src/components/FaqCard.svelte
index 0d3a9fa7..918e03d6 100644
--- a/src/components/FaqCard.svelte
+++ b/src/components/FaqCard.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	// this ID will be used to get the strings from the locale
 	// question is at faq.[questionID].question
@@ -8,8 +8,8 @@
 </script>
 
 <div class="mx-auto w-full md:w-2/3 lg:w-[700px] space-y-5">
-	<p class="text-2xl font-medium">{$_('faq.' + questionID + '.question')}</p>
+	<p class="text-2xl font-medium">{$t('faq.' + questionID + '.question')}</p>
 	<p class="text-secondary text-xl font-medium">
-		{$_('faq.' + questionID + '.answer')}
+		{$t('faq.' + questionID + '.answer')}
 	</p>
 </div>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index e2acd993..a1173f74 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Icon } from '$comp';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	const followLinks = [
 		{ url: 'https://twitter.com/coinoswallet', titleID: 'twitter' },
@@ -18,21 +18,21 @@
 	<Icon icon="logo" style="w-48 mx-auto md:mx-0" />
 
 	<div class="text-center md:text-left">
-		<p class="font-semibold">{$_('footer.followUs')}</p>
+		<p class="font-semibold">{$t('footer.followUs')}</p>
 		<ul class="mt-5 text-secondary space-y-3 font-medium">
 			{#each followLinks as link}
 				<li>
-					<a href={link.url} target="_blank" rel="noreferrer">{$_('footer.' + link.titleID)}</a>
+					<a href={link.url} target="_blank" rel="noreferrer">{$t('footer.' + link.titleID)}</a>
 				</li>
 			{/each}
 		</ul>
 	</div>
 
 	<div class="text-center md:text-left">
-		<p class="font-semibold">{$_('footer.company')}</p>
+		<p class="font-semibold">{$t('footer.company')}</p>
 		<ul class="mt-5 text-secondary space-y-3">
 			{#each companyLinks as link}
-				<li><a href={link.url}>{$_('footer.' + link.titleID)}</a></li>
+				<li><a href={link.url}>{$t('footer.' + link.titleID)}</a></li>
 			{/each}
 		</ul>
 	</div>
diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte
index 6f82c360..784c738d 100644
--- a/src/components/HowItWorksCard.svelte
+++ b/src/components/HowItWorksCard.svelte
@@ -1,14 +1,14 @@
 <script>
 	import Icon from './Icon.svelte';
-	import { _ } from 'svelte-i18n';
+	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">{$_('howItWorks.' + stepID + '.header')}</p>
+	<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">
-		{$_('howItWorks.' + stepID + '.description')}
+		{$t('howItWorks.' + stepID + '.description')}
 	</p>
 </div>
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index acc83001..372c0b98 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -3,7 +3,7 @@
 	import { scroll } from '$lib/utils';
 	import { Icon, LocaleSelector } from '$comp';
 	import { user } from '$lib/store';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	export let howItWorks;
 	export let faq;
@@ -28,30 +28,30 @@
 
 		<!-- desktop nav -->
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
-			<button on:click={() => scroll(howItWorks)}>{$_('howItWorks.header')}</button>
-			<button on:click={() => scroll(faq)}>{$_('faq.header')}</button>
-			<button on:click={() => scroll(about)}>{$_('about.header')}</button>
+			<button on:click={() => scroll(howItWorks)}>{$t('howItWorks.header')}</button>
+			<button on:click={() => scroll(faq)}>{$t('faq.header')}</button>
+			<button on:click={() => scroll(about)}>{$t('about.header')}</button>
 			{#if !$user}
 				<button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')}
-					>{$_('nav.startInSeconds')}
+					>{$t('nav.startInSeconds')}
 				</button>
 				<button
 					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
 					on:click={() => goto('/login')}
 				>
-					{$_('nav.signIn')}
+					{$t('nav.signIn')}
 				</button>
 			{:else}
 				<button
 					class="border rounded-full px-6 py-2 font-bold"
 					on:click={() => goto(`/${$user.username}/dashboard`)}
-					>{$_('nav.account')}
+					>{$t('nav.account')}
 				</button>
 				<button
 					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
 					on:click={() => goto('/logout')}
 				>
-					{$_('nav.signOut')}
+					{$t('nav.signOut')}
 				</button>
 			{/if}
 		</div>
@@ -70,35 +70,35 @@
 		>
 			<div class="space-y-8 mt-24 ml-10 font-bold text-xl">
 				<button on:click={() => mobileMenuButtonClick(howItWorks)} class="block"
-					>{$_('nav.howItWorks')}</button
+					>{$t('nav.howItWorks')}</button
 				>
-				<button on:click={() => mobileMenuButtonClick(faq)} class="block">{$_('nav.faq')}</button>
+				<button on:click={() => mobileMenuButtonClick(faq)} class="block">{$t('nav.faq')}</button>
 				<button on:click={() => mobileMenuButtonClick(about)} class="block"
-					>{$_('nav.about')}</button
+					>{$t('nav.about')}</button
 				>
 				{#if !$user}
 					<button
 						class="border rounded-full px-6 py-2 font-bold block"
 						on:click={() => goto('/register')}
-						>{$_('nav.startInSeconds')}
+						>{$t('nav.startInSeconds')}
 					</button>
 					<button
 						class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
 						on:click={() => goto('/login')}
 					>
-						{$_('nav.signIn')}
+						{$t('nav.signIn')}
 					</button>
 				{:else}
 					<button
 						class="border rounded-full px-6 py-2 font-bold block"
 						on:click={() => goto(`/${$user.username}/dashboard`)}
-						>{$_('nav.account')}
+						>{$t('nav.account')}
 					</button>
 					<button
 						class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
 						on:click={() => goto('/logout')}
 					>
-						{$_('nav.signOut')}
+						{$t('nav.signOut')}
 					</button>
 				{/if}
 				<LocaleSelector style="py-1" />
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 6553d271..1415692e 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { Icon, Image } from '$comp';
 	import { user } from '$lib/store';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 </script>
 
 <div class="mt-[96.88px] md:mt-0">
@@ -10,17 +10,17 @@
 		<h1
 			class="text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto leading-tight"
 		>
-			{$_('landing.header_before_icon')}
+			{$t('landing.header_before_icon')}
 			<span class="relative">
-				{$_('landing.header_with_icon')}
+				{$t('landing.header_with_icon')}
 				<Icon icon="rays" style="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24" />
 			</span>
-			{$_('landing.header_after_icon')}
+			{$t('landing.header_after_icon')}
 		</h1>
 		<h2
 			class="text-center text-secondary w-full md:w-3/5 lg:w-2/5 max-w-3xl mx-auto text-xl leading-normal font-medium"
 		>
-			{$_('landing.subheader')}
+			{$t('landing.subheader')}
 		</h2>
 		{#if !$user}
 			<div class="flex justify-center">
@@ -28,7 +28,7 @@
 					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
 					on:click={() => goto('/register')}
 				>
-					{$_('nav.startInSeconds')}
+					{$t('nav.startInSeconds')}
 				</button>
 			</div>
 		{/if}
diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte
index 2ae65986..4672a564 100644
--- a/src/components/LocaleSelector.svelte
+++ b/src/components/LocaleSelector.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { _, locale, locales } from 'svelte-i18n';
+  import { locale, locales } from '$lib/translations';
 	export let style;
 </script>
 
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index acf98523..2d1ee6a5 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -4,7 +4,7 @@
 	import { user, token } from '$lib/store';
 	import { auth } from '$lib/socket';
 	import { goto } from '$app/navigation';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	export let pageID;
 
@@ -30,11 +30,11 @@
 
 	<div class="flex justify-center items-center">
 		<div class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]">
-			<h1 class="text-2xl font-bold text-center">{$_('login.' + pageID)}</h1>
+			<h1 class="text-2xl font-bold text-center">{$t('login.' + pageID)}</h1>
 
 			<form class="space-y-5" {action} method="POST">
 				<div>
-					<label for="username" class="font-semibold">{$_('login.username')}</label>
+					<label for="username" class="font-semibold">{$t('login.username')}</label>
 					<!-- svelte-ignore a11y-autofocus -->
 					<input
 						name="username"
@@ -47,7 +47,7 @@
 				</div>
 
 				<div class="relative">
-					<label for="password" class="block font-semibold">{$_('login.password')}</label>
+					<label for="password" class="block font-semibold">{$t('login.password')}</label>
 					{#if revealPassword}
 						<input
 							name="password"
@@ -76,28 +76,28 @@
 
 				{#if pageID === 'register'}
 					<p class="text-secondary text-sm">
-						{$_('login.passwordRecommendation')}
+						{$t('login.passwordRecommendation')}
 					</p>
 				{:else}
 					<div class="flex justify-end items-center">
 						<a href="/forgot" class="underline underline-offset-4 text-black text-sm"
-							>{$_('login.forgotPassword')}</a
+							>{$t('login.forgotPassword')}</a
 						>
 					</div>
 				{/if}
 
 				<button type="submit" class="bg-black text-white w-full rounded-2xl p-4 font-semibold"
-					>{$_('login.' + pageID)}
+					>{$t('login.' + pageID)}
 				</button>
 			</form>
 
 			<p class="text-secondary text-center font-medium">
-				{pageID === 'register' ? $_('login.haveAccount') : $_('login.noAccount')}
+				{pageID === 'register' ? $t('login.haveAccount') : $t('login.noAccount')}
 				<a
 					href={pageID === 'register' ? '/login' : '/register'}
 					class="block md:inline text-black underline underline-offset-4"
 				>
-					{pageID === 'register' ? $_('login.signIn') : $_('login.register')}
+					{pageID === 'register' ? $t('login.signIn') : $t('login.register')}
 				</a>
 			</p>
 		</div>
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
deleted file mode 100644
index 3105c709..00000000
--- a/src/lib/i18n.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
-
-// The list of locales to look for
-// ADD ALL NEW LANGUAGE CODES TO THIS LIST
-const localeCodes = ['en', 'fr'];
-
-// the default locale to use if none was found
-const defaultLocale = 'en';
-
-// Adds a new locale based on its code
-function addLocale(localeCode) {
-	register(localeCode, () => import(`../locales/${localeCode}.json`));
-}
-
-// Picks the default locale based on navigator locale and the list of available locales
-function pickLocale(navigatorLocale, availableLocales) {
-	// locale can be null the first time you load this
-	// return the default locale in that case - reloading should fix this
-	if (!navigatorLocale) return defaultLocale;
-
-	// determine langugage part of locale
-	// (e.g. if navigatorLocale is 'en-US', languageCode is 'en')
-	let dashIndex = navigatorLocale ? navigatorLocale.indexOf('-') : -1;
-	let languageCode; // navigator locale without the regional part
-	if (dashIndex === -1) {
-		languageCode = navigatorLocale;
-	} else {
-		languageCode = navigatorLocale.slice(0, dashIndex);
-	}
-
-	// get locale
-	if (availableLocales.includes(navigatorLocale)) {
-		return navigatorLocale;
-	} else if (availableLocales.includes(languageCode)) {
-		return languageCode;
-	} else {
-		return navigatorLocale;
-	}
-}
-
-// add locales
-localeCodes.forEach(addLocale);
-
-let initialLocale = pickLocale(getLocaleFromNavigator(), localeCodes);
-init({
-	fallbackLocale: defaultLocale,
-	initialLocale: initialLocale
-});
diff --git a/src/lib/translations/index.js b/src/lib/translations/index.js
new file mode 100644
index 00000000..2bc5477e
--- /dev/null
+++ b/src/lib/translations/index.js
@@ -0,0 +1,9 @@
+import i18n from 'sveltekit-i18n';
+import translations from './translations';
+
+const config = {
+  initLocale: 'en',
+  translations,
+};
+
+export const { t, l, locales, locale } = new i18n(config);
diff --git a/src/lib/translations/lang.json b/src/lib/translations/lang.json
new file mode 100644
index 00000000..28d8fb36
--- /dev/null
+++ b/src/lib/translations/lang.json
@@ -0,0 +1,4 @@
+{
+  "en": "English",
+  "fr": "French"
+}
diff --git a/src/lib/translations/translations.js b/src/lib/translations/translations.js
new file mode 100644
index 00000000..5066b818
--- /dev/null
+++ b/src/lib/translations/translations.js
@@ -0,0 +1,225 @@
+import lang from './lang.json';
+
+export default {
+	en: {
+		404: {
+			404: '404',
+			pageNotFound: 'Page not found.'
+		},
+		about: {
+			header: 'About',
+			p1: '<strong>CoinOS</strong> is an <strong>open source</strong> bitcoin web wallet, point of sale, ecommerce marketplace and exchange platform. Development started in Vancouver in September 2012 as a way to provide local merchants with a convenient way to accept bitcoin payments.',
+			p2: 'The feature set has grown over the years to accomodate a wide variety of use cases with the goal of making it as easy as possible for anyone to get started using bitcoin quickly, cheaply, and securely.',
+			p3: "Anyone can download the source code and host their own instance of the platform backed by their own bitcoin, liquid or lightning nodes, or reach out and we'll gladly set this up for you.",
+			p4: 'Intra-account transfers between custodial wallets of different users on our server are completely free, instant, and unlimited.',
+			founder: {
+				header: 'The Founder',
+				name: 'Adam Soltys',
+				position: 'Chief Technical Officer',
+				qualifications: [
+					'Running bitcoin since 2011',
+					'20+ years web development experience in government and industry',
+					'Early bitcoin Vancouver meetup organizer',
+					'Founder of The bitcoin Co-op and early supporter of Decentral Vancouver',
+					'Yogi, permaculturist, anarchist, decentralist',
+					'Husband, father, brother, son'
+				]
+			}
+		},
+		error: {
+			header: 'Error',
+			message: 'Please try again or contact support.',
+			signIn: 'Please sign in to continue.'
+		},
+		faq: {
+			header: 'FAQ',
+			cost: {
+				question: 'What does it cost?',
+				answer:
+					'CoinOS is free to use. You only pay a 1% fee if/when you withdraw your funds. Compare this to 3% typically charged by a credit card processor.'
+			},
+			compatibility: {
+				question: 'Do I need any special device or software?',
+				answer:
+					'No. CoinOS is web-based, so as long as you have an internet connection, you can use it on any device or hardware. Most merchants might use it on a phone or a tablet.'
+			},
+			safety: {
+				question: 'Are my funds safe?',
+				answer:
+					'Your funds are stored on our secure server, however we recommend that you withdraw them to your own cold storage for long-term savings.'
+			}
+		},
+		footer: {
+			followUs: 'Follow Us',
+			twitter: 'Twitter',
+			github: 'GitHub',
+			company: 'Company',
+			telegram: 'Telegram',
+			support: 'Support',
+			jobs: 'Jobs'
+		},
+		howItWorks: {
+			header: 'How It Works',
+			step1: {
+				header: '1. Create your account',
+				description: 'A username & password is all you need to get started.'
+			},
+			step2: {
+				header: '2. Ask for payments',
+				description: 'The same as you normally would, but with bitcoin.'
+			},
+			step3: {
+				header: "3. That's all!",
+				description: 'You can convert to local currency at any point.'
+			}
+		},
+		invoice: {
+			addTip: 'Add a tip',
+			addTipq: 'Add a tip?',
+			done: 'Done',
+			paymentSuccessful: 'Payment Successful!'
+		},
+		jobs: {
+			header: 'Jobs',
+			subheader: 'Current Openings',
+			pitch1:
+				'CoinOS is actively looking for developers to join our growing team (full-time or part-time, remote working OK).',
+			pitch2:
+				'Excited about working on open source bitcoin? Then take a look at our repositories on',
+			github: 'GitHub',
+			pitch3:
+				"If you think you can make an impact, we'd love to hear from you. Send us your resume to"
+		},
+		landing: {
+			header_before_icon: 'The',
+			header_with_icon: 'easiest',
+			header_after_icon: 'way to accept bitcoin in your store.',
+			subheader:
+				'Grow your customer base and revenue by accepting bitcoin with an easy-to-use and managed Point of Sale. No software or hardware required.',
+			info1: {
+				title: 'Instant payments via Lightning',
+				description:
+					'The moment your customer sends a payment, it’s there. No waiting for bank settlements or worrying about chargebacks. Instant settlement, in seconds. Say goodbye to 3% credit card processing fees.'
+			},
+			info2: {
+				title: 'Simple to use, custodial by default',
+				description1: 'Just enter an amount, share QR code and you’re done.',
+				description2:
+					'CoinOS is custodial by default, which eliminates the need to understand how bitcoin/lightning works. We do all the heavy lifting so you can focus on your business.',
+				description3:
+					'You always have the option of <span class="underline underline-offset-4">taking custody</span> of your own keys.'
+			},
+			info3: {
+				title: 'Brand it your way!',
+				description:
+					'Customize your point of sale look and feel, or keep it on default - totally up to you.'
+			}
+		},
+		login: {
+			username: 'Username',
+			password: 'Password',
+			passwordRecommendation:
+				'We recommend a long, random password generated with a password manager.',
+			forgotPassword: 'Forgot Password?',
+			haveAccount: 'Already have an account?',
+			noAccount: "Don't have an account?",
+			register: 'Register',
+			signIn: 'Sign In',
+			failed: 'Login failed'
+		},
+		nav: {
+			startInSeconds: 'Start in Seconds',
+			account: 'Account',
+			signIn: 'Sign In',
+			signOut: 'Sign Out',
+			dashboard: 'Dashboard',
+			settings: 'Settings',
+			support: 'Support'
+		},
+		user: {
+			addressGoesHere: 'Address goes here',
+			follow: 'Follow',
+			remove: 'Remove',
+			scanToPayBTC: 'Scan to pay with bitcoin',
+			dashboard: {
+				ACCOUNT_BALANCE: 'ACCOUNT BALANCE',
+				bitcoinPrice: 'Bitcoin Price:',
+				conversionFeeWarning:
+					'You will be charged a 1% conversion fee if you withdraw more of a certain type of Bitcoin than you deposit.',
+				dataFromBinance: 'Data from <span class="text-black">Binance</span>.',
+				fetchingRate: 'fetching rate...',
+				optionalNote: 'Note (Optional)',
+				send: 'Send',
+				withdraw: 'Withdraw'
+			},
+			receive: {
+				lessThan1BTCWarning: 'Please enter an amount less than 1 bitcoin.',
+				showQR: 'Show QR'
+			},
+			settings: {
+				header: 'Settings',
+				ACCOUNT: 'ACCOUNT',
+				POINT_OF_SALE: 'POINT OF SALE',
+				SECURITY: 'SECURITY',
+				locale: 'Language',
+				username: 'Username',
+				newPassword: 'New Password',
+				businessAddress: 'Business Address',
+				emailNotifications: 'Email Notifications',
+				emailNotificationsDescription:
+					'Get notified via email when a change occurs on your account or when people send you payments.',
+				smsNotifications: 'SMS Notifications',
+				smsNotificationsDescription:
+					'CoinOS will send you text notifications when this is enabled.',
+				theme: 'Color Theme',
+				themeDescription: 'Select from the default color themes.',
+				localCurrency: 'Local Currency',
+				btcUnit: 'Display bitcoin in:',
+				bitcoin: 'Bitcoin',
+				satoshis: 'Satoshis',
+				securityPIN: 'Security PIN',
+				securityPINDescription:
+					'Set a security pin that will be used to unlock your settings and to send outgoing payments.',
+				setPIN: 'Set PIN',
+				autoLock: 'Auto-Lock Timer',
+				autoLockDescription:
+					'Your account will go into a secure mode automatically after a specified time:',
+				twofa: '2-Factor Authentication',
+				twofaDescription:
+					'Add an extra level of security to your device by enableing 2-factor authentication.',
+				twofaSetup: 'Set up 2FA'
+			},
+			support: {
+				header: 'Support',
+				email: 'Email',
+				accountName: 'Account Name',
+				message: 'Message',
+				send: 'Send'
+			},
+			transactions: {
+				header: 'Transaction History',
+				AMOUNT: 'AMOUNT',
+				TYPE: 'TYPE',
+				TIME: 'TIME',
+				sent: 'Sent',
+				received: 'Received',
+				empty: 'No transactions yet.'
+			}
+		}
+	},
+	fr: {
+		about: {
+			header: 'À Propos'
+		},
+		faq: {
+			header: 'FAQ'
+		},
+		howItWorks: {
+			header: 'Comment Elle Fonctionne'
+		},
+		nav: {
+			startInSeconds: 'Commence en Secondes',
+			signIn: 'Connexion'
+		}
+	}
+};
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>