Extracted all remaining strings to en.json

- Changed SATS to SAT, and hours to hr to be more international
- Edited conversion fee warning because it was incorrect (you only pay a fee if
  you're converting between BTC<->Liquid<->Lightning)

8 files changed, 133 insertions, 61 deletions

diff --git a/src/locales/en.json b/src/locales/en.json
index fc276ef2..dd1fac89 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -22,6 +22,10 @@
 		  "familialRelationships": "Husband, father, brother, son"
     }
   },
+  "error": {
+    "header": "Error",
+    "message": "Please try again or contact support."
+  },
   "faq": {
     "header": "FAQ",
 		"cost": {
@@ -114,5 +118,67 @@
     "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:",
+      "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."
+    }
+  }
 }
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index e555a032..2a8846c3 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,6 +1,7 @@
 <script>
   import { page } from '$app/stores';
 	import { Icon, PageNotFound } from '$comp';
+  import { _ } from 'svelte-i18n';
 </script>
 
 {#if $page.error.message.includes('not found') || $page.status === 404}
@@ -14,9 +15,9 @@
 
 			<Icon icon="error" style="mx-auto w-56" />
 
-			<h1 class="font-bold text-5xl">Error</h1>
+			<h1 class="font-bold text-5xl">{$_('error.header'), { default: "Error" }}</h1>
 			<p class="px-1 w-full md:w-96 break-all font-bold">{$page.error.message.toUpperCase()}</p>
-			<p>Please try again or contact support.</p>
+			<p>{$_('error.message'), { default: "Please try again or contact support." }}</p>
 		</div>
 	</div>
 {/if}
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index 973e8798..f22bd218 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -4,6 +4,7 @@
 	import { AppHeader, Icon, PageNotFound } from '$comp';
 	import { user } from '$lib/store';
 	import { copy } from '$lib/utils';
+  import { _ } from 'svelte-i18n';
 	export let data;
 	$: ({ username } = data);
 
@@ -43,7 +44,7 @@
 			<div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72">
 				<h1 class="text-3xl font-bold">{username}</h1>
 
-				<p class="text-secondary">Address goes here</p>
+				<p class="text-secondary">{$_('user.addressGoesHere')}</p>
 
 				<!--
         we need to hook this up
@@ -51,7 +52,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" />
-					{followed ? 'Remove' : 'Follow'}
+					{$_('user.' + (followed ? 'remove' : 'follow'))}
 				</button>
         -->
 			</div>
@@ -62,7 +63,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">Scan to pay with bitcoin</p>
+				<p class="text-secondary text-center font-semibold">{$_('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 d056399f..9b2b1c03 100644
--- a/src/routes/[username]/dashboard/+page.svelte
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -3,6 +3,7 @@
 	import { tick } from 'svelte';
 	import { AppHeader, Icon } from '$comp';
 	import { rate, user, preferredCurrency } from '$lib/store';
+  import { _ } from 'svelte-i18n';
 
 	let payreq = '',
 		payreqField,
@@ -62,28 +63,29 @@
 			</h1>
 			{#if !withdrawing}
 				<span class="text-secondary mx-auto text-lg font-bold"
-					>Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span>
+				  >{$_('user.dashboard.bitcoinPrice')}
+            <span class="text-black">{$rate ? btcPrice : $_('user.dashboard.fetchingRate')}</span>
 					{$preferredCurrency}
 				</span>
 
 				<span class="text-secondary block mt-1"
-					>Data from <span class="text-black">Binance</span>.
+					>{@html $_('user.dashboard.dataFromBinance')}
 				</span>
 
 				<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px]">
-					ACCOUNT BALANCE
+					{$_('user.dashboard.ACCOUNT_BALANCE')}
 				</h3>
 
 				<span class="text-3xl font-bold block mb-1"
-					>{$rate ? accountBalanceFiat : 'fetching rate...'}</span
+					>{$rate ? accountBalanceFiat : $_('user.dashboard.fetchingRate')}</span
 				>
 
-				<span class="text-secondary text-xl block">{accountBalanceSats} SATS</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}
-					>Withdraw</button
+					>$_('user.dashboard.withdraw')</button
 				>
-				<p class="text-secondary my-2">You will be charged a 1% withdrawal fee on the amount.</p>
+				<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)}>
@@ -103,7 +105,7 @@
 					</div>
 
 					<div>
-						<label for="note" class="font-bold mb-1 block">Note (Optional)</label>
+						<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>
 
@@ -112,7 +114,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}>Send</button
+						on:click={withdraw}>{$_('user.dashboard.send')}</button
 					>
 				</div>
 			{/if}
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
index f0fa0fbd..783ae0a3 100644
--- a/src/routes/[username]/receive/+page.svelte
+++ b/src/routes/[username]/receive/+page.svelte
@@ -5,6 +5,7 @@
 	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
 	import { post, warning } from '$lib/utils';
 	import { page } from '$app/stores';
+  import { _, number } from 'svelte-i18n';
 
 	let useFiat = true;
 	let amountFiat = 0;
@@ -50,7 +51,7 @@
 					}
 				}
 			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > $rate) {
-				warning('Please enter an amount less than 1 bitcoin.');
+				warning($_('user.receive.lessThan1BTCWarning'));
 			} else if (amountFiat !== 0 && amountFiat.match(/\.../)) {
 				return;
 			} else {
@@ -70,7 +71,7 @@
 					}
 				}
 			} else if (value !== '<' && parseInt(amountSats + value) > 100000000) {
-				warning('Please enter an amount less than 1 bitcoin.');
+				warning($_('user.receive.lessThan1BTCWarning'));
 			} else {
 				amountSats = amountSats + value;
 			}
@@ -93,11 +94,11 @@
 				<div class="text-center">
 					<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
 						{useFiat ? `$${amountFiat}` : amountSatsFormatted}<span
-							class="tracking-normal text-base font-normal">{useFiat ? 'USD' : 'SATS'}</span
+							class="tracking-normal text-base font-normal">{useFiat ? 'USD' : 'SAT'}</span
 						>
 					</div>
 					<span class="text-secondary mr-1"
-						>{useFiat ? `${amountSatsConverted} SATS` : `${amountFiatConverted} USD`}</span
+						>{useFiat ? `${amountSatsConverted} SAT` : `${amountFiatConverted} USD`}</span
 					>
 					<button
 						on:click={() => {
@@ -156,7 +157,7 @@
 							? 'opacity-50'
 							: 'opacity-100'}"
 						on:click={submit}
-						disabled={$invoiceAmount === 0}><Icon icon="qr" style="mr-2" /> Show QR</button
+						disabled={$invoiceAmount === 0}><Icon icon="qr" style="mr-2" /> {$_('user.receive.showQR')}</button
 					>
 					<!--
 					<button
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index e4d7b0bf..47da398d 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { AppHeader, Icon, Toggle, LocaleSelector } from '$comp';
 	import { user, colorTheme } from '$lib/store';
+  import { _ } from 'svelte-i18n';
 
 	let setting = 'account';
 	let password;
@@ -27,30 +28,30 @@
 	<AppHeader />
 
 	<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">Settings</h1>
+		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">{$_('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')}
-				>ACCOUNT</button
+				>{$_('user.settings.ACCOUNT')}</button
 			>
 
 			<button class:selected={setting === 'pos'} on:click={() => (setting = 'pos')}
-				>POINT OF SALE</button
+				>{$_('user.settings.POINT_OF_SALE')}</button
 			>
 
 			<button class:selected={setting === 'security'} on:click={() => (setting = 'security')}
-				>SECURITY</button
+				>{$_('user.settings.SECURITY')}</button
 			>
 		</div>
 
 		{#if setting === 'account'}
 			<div>
-				<label for="language" class="font-bold block mb-1">Language</label>
+				<label for="language" class="font-bold block mb-1">{$_('user.settings.locale')}</label>
 				<LocaleSelector style="block py-3 w-full" />
 			</div>
 
 			<div>
-				<label for="username" class="font-bold mb-1 block">Username</label>
+				<label for="username" class="font-bold mb-1 block">{$_('user.settings.username')}</label>
 				<input
 					type="text"
 					disabled
@@ -61,7 +62,7 @@
 			</div>
 
 			<div class="relative">
-				<label for="password" class="block font-bold block mb-1">New Password</label>
+				<label for="password" class="block font-bold block mb-1">{$_('user.settings.newPassword')}</label>
 				{#if revealPassword}
 					<input type="text" class="block border rounded-xl p-3 w-full" bind:value={password} />
 				{:else}
@@ -77,34 +78,33 @@
 			</div>
 
 			<div>
-				<label for="address" class="font-bold mb-1 block">Business Address</label>
+				<label for="address" class="font-bold mb-1 block">{$_('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">Email Notifications</span>
+					<span class="font-bold">{$_('user.settings.emailNotifications')}</span>
 					<Toggle id="email-notify" />
 				</div>
 				<p class="text-secondary mt-1 w-9/12">
-					Get notified via email when a change occurs on your account or when people send you
-					payments.
+          {$_('user.settings.emailNotificationsDescription')}
 				</p>
 			</div>
 
 			<div>
 				<div class="flex justify-between items-center">
-					<span class="font-bold">SMS Notifications</span>
+					<span class="font-bold">{$_('user.settings.smsNotifications')}</span>
 					<Toggle id="sms-notify" />
 				</div>
 				<p class="text-secondary mt-1 w-9/12">
-					CoinOS will send you text notifications when this is enabled.
+					{$_('user.settings.smsNotificationsDescription')}
 				</p>
 			</div>
 
 			<div>
-				<span class="font-bold mb-1 block">Color Theme</span>
-				<p class="text-secondary mb-1">Select from the default color themes.</p>
+				<span class="font-bold mb-1 block">{$_('user.settings.theme')}</span>
+				<p class="text-secondary mb-1">{$_('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 ===
@@ -117,52 +117,51 @@
 			</div>
 		{:else if setting === 'pos'}
 			<div>
-				<label for="currency" class="font-bold block mb-1">Local Currency</label>
+				<label for="currency" class="font-bold block mb-1">{$_('user.settings.localCurrency')}</label>
 				<select name="currency" class="block py-3 w-full">
 					<option value="USD">USD</option>
 				</select>
 			</div>
 
 			<div>
-				<label for="btc-unit" class="font-bold block mb-1">Display bitcoin in:</label>
+				<label for="btc-unit" class="font-bold block mb-1">{$_('user.settings.btcUnit')}</label>
 				<select disabled name="btc-unit" class="block py-3 w-full">
-					<option value="SATS">Satoshi (SATS)</option>
+					<option value="SATS">Satoshi (SAT)</option>
 					<option value="BTC">Bitcoin (BTC)</option>
 				</select>
 			</div>
 		{:else}
 			<div>
-				<span class="font-bold mb-1">Security Pin</span>
+				<span class="font-bold mb-1">{$_('user.settings.securityPIN')}</span>
 				<p class="text-secondary mb-1">
-					Set a security pin that will be used to unlock your settings and to send outgoing
-					payments.
+					{$_('user.settings.securityPINDescription')}
 				</p>
 				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
-					><Icon icon="lock" style="mr-1" /> Set Pin</button
+					><Icon icon="lock" style="mr-1" /> {$_('user.settings.setPIN')}</button
 				>
 			</div>
 
 			<div>
-				<label for="auto-lock" class="font-bold mb-1">Auto-Lock Timer</label>
+				<label for="auto-lock" class="font-bold mb-1">{$_('user.settings.autoLock')}</label>
 				<p class="text-secondary mb-1">
-					Your account will go into a secure mode automatically after a specified time:
+					{$_('user.settings.autoLockDescription')}
 				</p>
 				<select name="auto-lock" class="block py-3 w-full">
 					<option value="5">5 min</option>
 					<option value="10">10 min</option>
 					<option value="30">30 min</option>
-					<option value="60">1 hour</option>
-					<option value="480">8 hours</option>
+					<option value="60">1 h</option>
+					<option value="480">8 h</option>
 				</select>
 			</div>
 
 			<div>
-				<span class="font-bold mb-1">2-Factor Authentication</span>
+				<span class="font-bold mb-1">{$_('user.settings.twofa')}</span>
 				<p class="text-secondary mb-1">
-					Add an extra level of security to your device by enableing 2-factor authentication.
+					{$_('user.settings.twofaDescription')}
 				</p>
 				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
-					><Icon icon="mobile" style="mr-1" /> Set up 2FA</button
+					><Icon icon="mobile" style="mr-1" /> {$_('user.settings.twofaSetup')}</button
 				>
 			</div>
 		{/if}
diff --git a/src/routes/[username]/support/+page.svelte b/src/routes/[username]/support/+page.svelte
index 335c804f..bb1392b3 100644
--- a/src/routes/[username]/support/+page.svelte
+++ b/src/routes/[username]/support/+page.svelte
@@ -2,6 +2,7 @@
 	// this needs to be hooked up to the backend
 	import { AppHeader } from '$comp';
 	import { user } from '$lib/store';
+  import { _ } from 'svelte-i18n';
 	let email;
 	let message;
 </script>
@@ -10,11 +11,11 @@
 	<AppHeader />
 
 	<div class="my-20">
-		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Support</h1>
+		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">{$_('user.support.header')}</h1>
 
 		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
 			<div>
-				<label for="email" class="font-semibold">Email</label>
+				<label for="email" class="font-semibold">{$_('user.support.email')}</label>
 				<input
 					class="block border rounded-xl p-2 w-full"
 					type="email"
@@ -25,7 +26,7 @@
 			</div>
 
 			<div>
-				<label for="account" class="font-semibold">Account Name</label>
+				<label for="account" class="font-semibold">{$_('user.support.accountName')}</label>
 				<input
 					class="block border rounded-xl p-2 w-full"
 					type="text"
@@ -37,7 +38,7 @@
 			</div>
 
 			<div>
-				<label for="message" class="font-semibold">Message</label>
+				<label for="message" class="font-semibold">{$_('user.support.message')}</label>
 				<textarea
 					rows={5}
 					class="block border rounded-xl p-2 w-full"
@@ -53,7 +54,7 @@
 				class="{!email || !message
 					? 'opacity-50'
 					: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto"
-				>Send</button
+				>{$_('user.support.send')}</button
 			>
 		</form>
 	</div>
diff --git a/src/routes/[username]/transactions/+page.svelte b/src/routes/[username]/transactions/+page.svelte
index c91fd900..de93997d 100644
--- a/src/routes/[username]/transactions/+page.svelte
+++ b/src/routes/[username]/transactions/+page.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { AppHeader } from '$comp';
 	import { user, newPayment } from '$lib/store';
+  import { _ } from 'svelte-i18n';
 
 	$newPayment = false;
 
@@ -12,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">
-			Transaction History
+			{$_('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>AMOUNT</h2>
-				<h2 class="text-center">TYPE</h2>
-				<h2 class="text-right">TIME</h2>
+				<h2>{$_('user.transactions.AMOUNT')}</h2>
+				<h2 class="text-center">{$_('user.transactions.TYPE')}</h2>
+				<h2 class="text-right">{$_('user.transactions.TIME')}</h2>
 			</div>
 
 			<div class="space-y-10">
@@ -38,12 +39,12 @@
 									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
 										maximumFractionDigits: 0
 									}).format(tx.amount)}
-									SATS
+									SAT
 								</span>
 							</div>
 
 							<div class="text-center">
-								<span class="text-secondary">{tx.amount < 0 ? 'Sent' : 'Received'}</span>
+								<span class="text-secondary">{$_('user.transactions.' + (tx.amount < 0 ? 'sent' : 'received'))}</span>
 							</div>
 
 							<div class="text-secondary text-right">
@@ -52,7 +53,7 @@
 						</div>
 					{/each}
 				{:else}
-					<p class="text-secondary text-lg text-center">No transactions yet.</p>
+					<p class="text-secondary text-lg text-center">{$_('user.transactions.empty')}</p>
 				{/if}
 			</div>
 		</div>