Merge branch 'master' of github.com:coinos/coinos-ui-v2

17 files changed, 400 insertions, 111 deletions

diff --git a/README.md b/README.md
index c181376a..35704685 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,8 @@ To get started, clone or download the repo, then:
 - run `pnpm run dev` every time you want to start up the UI
 - run `pnpm format` to format the code before committing any changes
 
+This is a frontend for [`coinos-server`](https://github.com/coinos/coinos-server), so you will need to have that running in order for this UI to be useful.
+
 ## Libraries
 
 This UI uses the following libraries:
@@ -27,4 +29,4 @@ This UI uses the following libraries:
 
 ### Internationalization
 
-CoinOS has a system for translation using [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). For more information and instructions on how to translate CoinOS, click [here](./doc/i18n.md). For technical details, click [here](./doc/i18n-technical.md).
+CoinOS has a system for translation using [`sveltekit-i18n`](https://www.npmjs.com/package/sveltekit-i18n). For more information and instructions on how to translate CoinOS, click [here](./doc/i18n.md). For technical details, click [here](./doc/i18n-technical.md).
diff --git a/doc/i18n-technical.md b/doc/i18n-technical.md
index a0d64938..46fbb094 100644
--- a/doc/i18n-technical.md
+++ b/doc/i18n-technical.md
@@ -2,21 +2,20 @@
 
 _NOTE: This documentation was written for people with a technical background. If you do not have a technical background, consider reading [this guide](./i18n.md) instead._
 
-Last Updated: 2022-08-08
+Last Updated: 2022-08-23
 
 ## Dependencies
 
-CoinOS's internationalization system depends on the `npm` package [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). Consider reading [its documentation](https://github.com/kaisermann/svelte-i18n/blob/HEAD/docs/Getting%20Started.md) in addition to this.
+CoinOS's internationalization system depends on the `npm` package [`sveltekit-i18n`](https://www.npmjs.com/package/sveltekit-i18n). Consider reading [its documentation](https://github.com/sveltekit-i18n/lib/tree/master/docs/README.md) in addition to this.
 
 ## Internationalization Code
 
-The main code for CoinOS's internationalization is at `src/lib/i18n.js`. When imported, it does the following:
+The main code for CoinOS's internationalization is at `src/lib/translations/index.js`. When imported, it does the following:
 
-1. Load all of the locales [asynchronously](https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md#32-asynchronous).
-2. Pick a locale intelligently, depending on the available locales and the navigator locale, using `pickLocale`. Specifically, if the user's locale (e.g. `en-US`) isn't available but its non-regional version (e.g. `en`) is, the system will use the non-regional locale.
-3. Initialize `svelte-i18n`.
+1. Load all of the locales asynchronously, based on .
+3. Initialize `sveltekit-i18n`.
 
-It also defines important constants, including the list of available locales and the default locale. This code is loaded by importing `$lib/i18n` in `src/routes/__layout.svelte`.
+It also defines important constants, including the list of available locales and the default locale. This code is loaded by importing `$lib/translations` in `src/routes/+layout.svelte`.  This code, which runs in the frontend, also persists the locale in `localStorage`.
 
 ## Locale Files
 
@@ -34,14 +33,12 @@ Each locale in `coinos-ui-v2` is defined by a JSON file in `src/locales`. Its na
 
 ## Internationalizing Strings
 
-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:
+Strings are internationalized by simply using `sveltekit-i18n`'s `$t` function. A localized string looks like this:
 
 ```
 {$t('stringID')}
 ```
 
-(`$_` is a convenient alias for `$format`.)
-
 ## The Locale Selector
 
 CoinOS also has a `LocaleSelector` component, which should be used to select locales. It is a dropdown that allows you to select & update the locale.
@@ -51,4 +48,5 @@ CoinOS also has a `LocaleSelector` component, which should be used to select loc
 CoinOS has a Python script that helps you with the technical parts of translation. It is located at `src/locales/guided_translation.py`. It also has some utility functions:
 
 - `nested_dict_keys` - gets a list of keys of a nested dictionary in dot-separated shallow format (e.g. a.b.c)
+- `create_locale` - adds a new locale to the lang.json file
 - `localize_string` - localizes a string interactively
diff --git a/doc/i18n.md b/doc/i18n.md
index 5bbd049b..f33ab2de 100644
--- a/doc/i18n.md
+++ b/doc/i18n.md
@@ -1,14 +1,18 @@
 # CoinOS Internationalization
 
-CoinOS can be translated into other languages by editing JSON files. You do not need programming knowledge to do this, or to use these instructions. Here are instructions on how to internationalize CoinOS:
+CoinOS can be translated into other languages by editing [JSON](https://www.json.org/json-en.html) files. You do not need programming knowledge to do this, or to use these instructions. Here are instructions on how to translate CoinOS:
 
 _NOTE: This guide was written for people without a technical background. If you want more technical details, click [here](./i18n-technical.md)._
 
+These instructions assume you have a GitHub account and have permission to modify this repository.  If you do not have permission, you will need to [make a fork](https://github.com/coinos/coinos-ui-v2/fork) using the link on the top-right, then follow these instructions to translate your fork, then make a pull request using the link below the "Code" button to apply your changes to the main repository.
+
+Last Updated: 2022-08-23
+
 ## Required Background Knowledge
 
 ### Language Codes
 
-Before you can translate CoinOS, you need to know the [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) of your language. This is a standard two-letter code that your browser uses to refer to a language (for example, English is `en`, and French is `fr`). You can also add a dash and more letters to refer to a specific region (for example, American English is `en-US`, and British English is `en-GB`). A list of all codes can be found [here](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes), and Firefox-based browsers show you the code when you are selecting your browser's language.
+Before you can translate CoinOS, you need to know the [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) of your language. This is a standard two-letter code that your browser uses to refer to a language (for example, English is `en`, and Spanish is `es`). You can also add a dash and more letters to refer to a specific region (for example, American English is `en-US`, and British English is `en-GB`). A list of all codes can be found [here](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes), and Firefox-based browsers show you the code when you are selecting your browser's language.
 
 ### Locale Files
 
@@ -28,15 +32,67 @@ Each line (other than the opening and closing braces) contains a **text name**,
 
 ### The Language List
 
-At the top of the file `src/lib/i18n.js`, there is a list of translations that looks something like this:
+There is also a JSON file that controls which languages are understood.  It is at `src/lib/translations/lang.json` and looks something like this:
 
-```js
-// The list of locales to look for
-// ADD ALL NEW LANGUAGE CODES TO THIS LIST
-const localeCodes = ['en', 'fr'];
+```JSON
+{
+  "en": "English",
+  "fr": "Français",
+  "es": "Español"
+}
 ```
 
-In order for a translation to be recognized by the CoinOS system, you need to add it to this list. At the end of the list, before the second square bracket, add a comma, then a space, then the language code in quotation marks.
+This file simply maps each language to its name.  It is used both to get a list of languages and to get the name of each language for the language selector.  If a translation is not in this file, CoinOS will not be able to see it.
+
+### JSON Sections
+
+You might notice that some of the left-text in the language files don't have a string after them, instead having some `{}` curly brackets, like in this example:
+
+```JSON
+"nav": {
+  "startInSeconds": "Start in Seconds",
+  "account": "Account",
+  "signIn": "Sign In",
+  "signOut": "Sign Out",
+  "dashboard": "Dashboard",
+  "settings": "Settings",
+  "support": "Support"
+},
+```
+
+These denote sections of the JSON file, which helps keep it organized.  If you're translating some text that is in a section, make sure the translated text is in the same section of the new file.  If that section doesn't exist, just create it.
+
+In the translation files, sections roughly correspond to where the the text is in CoinOS.  This can be useful if you need context for some text.  Here are some of these associations (`A.B` means section `B` is located inside `A`):
+
+| Section           | Location                                          |
+|-------------------|---------------------------------------------------|
+| 404               | the 404 page                                      |
+| about             | the 'About' section at the bottom of the homepage |
+| error             | the error page                                    |
+| faq               | the FAQ on the homepage                           |
+| footer            | the bottom of the homepage                        |
+| howItWorks        | the 'How it Works' section                        |
+| invoice           | the Invoice page                                  |
+| jobs              | the Jobs page                                     |
+| landing           | the top of the homepage                           |
+| login             | the Register and Login pages                      |
+| user              | the user page                                     |
+| user.dashboard    | the user's dashboard                              |
+| user.settings     | the settings page                                 |
+| user.support      | the user's support page                           |
+| user.transactions | the user's transaction history page               |
+
+### HTML Tags
+
+Sometimes, you will see strange text surrounded with `<>` angle brackets.  Every one of these "HTML tags" will be followed by another one starting with a slash.  Here's an example:
+
+```JSON
+"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.",
+```
+
+These apply a certain style to the text between them.  For example, the tags above will make "CoinOS" and "open source" bold, leaving the rest non-bold.
+
+When translating strings containing tags, don't change the tags.  Do translate the text between them, and don't be afraid to move them around - just make sure they contain the same part of the sentence, and that the one without the slash is always before the one with the slash.  Not all of the localizable strings support HTML tags, so you shouldn't use them if they aren't in the original string you're translating.
 
 ## Creating a New Translation
 
@@ -50,9 +106,8 @@ Follow these steps to create a new translation. You will need a GitHub account t
    _NOTE: "CoinOS" is a feminine noun in languages with grammatical gender._
    ![Translating in GitHub](./img/translate_github.png)
 5. Scroll down and use the green button to commit the file.
-6. Go to the `src` folder again, then `lib`, then `i18n.js`.
-7. Use the pencil icon on the top-right to edit the file, then add your language code (**in quotation marks**) to the list.
-   ![Adding a new translation in GitHub](./img/add_locale_github.png)
+6. Go to the `src` folder again, then `lib`, then `translations`, then `lang.json`.
+7. Use the pencil icon on the top-right to edit the file, then add a new line containing your language code in quotes, followed by a colon, followed by the full name of your language in quotes.  Make sure every line except the last has a comma at the end.
 8. Commit your changes like you did in step 5.
 
 ## Adding to an Existing Translation
@@ -69,3 +124,13 @@ Follow these steps to add to an existing translation. You will also need a GitHu
    _NOTE: "CoinOS" is a feminine noun in languages with grammatical gender._
 8. Repeat steps 3-7 for every piece of text you want to translate (you should probably open `en.json` in another tab, so that your changes from step 6 aren't erased).
 9. Scroll down and use the green button to commit the file.
+
+## The Guided Translation Script
+
+There is also a program that helps you translate automatically - all you have to do is input the translated text and it will do the rest for you!  You need a bit of technical knowledge to use it however, specifically, you need to know:
+- How to use basic [git](https://git-scm.com/) (cloning, pulling, committing, pushing)
+- How to run a [Python](https://www.python.org/) script
+
+The script also shows you the ID of each bit of text you are translating, so that you can know where it is.  `A.B` means string `B` in section `A`, `A.B.C` means string `C` in subsection `B` in section `A`, etc.
+
+Clone the repository, then use the guided translation script (at `src/locales/guided_translation.py`) to update the translation files.  You will need to pull before running, and commit/push your changes in order for them to be applied to CoinOS.
diff --git a/src/components/About.svelte b/src/components/About.svelte
index 794a5107..3cd25f8c 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -54,9 +54,14 @@
 		</div>
 	</div>
 
-	<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"
-	/>
+	<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">
+      <li>{$t('about.founder.qualifications.bitcoin')}</li>
+      <li>{$t('about.founder.qualifications.webDev')}</li>
+      <li>{$t('about.founder.qualifications.bitcoinVancouver')}</li>
+      <li>{$t('about.founder.qualifications.bitcoinCoop')}</li>
+      <li>{$t('about.founder.qualifications.beliefs')}</li>
+      <li>{$t('about.founder.qualifications.familialRelationships')}</li>
+  </ul>
 </div>
 
 <div class="mt-20">
diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte
index ec5bc781..e1888e9f 100644
--- a/src/components/LocaleSelector.svelte
+++ b/src/components/LocaleSelector.svelte
@@ -1,10 +1,10 @@
 <script>
-	import { locale, locales } from '$lib/translations';
+	import { t, locale, locales } from '$lib/translations';
 	export let style;
 </script>
 
 <select name="language" bind:value={$locale} class={style}>
 	{#each $locales as locale}
-		<option value={locale}>{locale}</option>
+		<option value={locale}>{$t(`lang.${locale}`)}</option>
 	{/each}
 </select>
diff --git a/src/lib/translations/index.js b/src/lib/translations/index.js
index 023da884..dc03c0b6 100644
--- a/src/lib/translations/index.js
+++ b/src/lib/translations/index.js
@@ -1,9 +1,44 @@
 import i18n from 'sveltekit-i18n';
-import translations from './translations';
+import lang from './lang.json';
+
+// setup loaders & translations from lang.json data
+function createLocaleLoader(localeCode) {
+  return {
+    locale: localeCode,
+    key: '',
+    loader: async () => (
+      await import(`../../locales/${localeCode}.json`)
+    ).default
+  };
+}
+
+const availableLocales = Object.keys(lang);
+const translations = {};
+for (let i = 0; i < availableLocales.length; i++) {
+  translations[availableLocales[i]] = { lang };
+}
+const loaders = availableLocales.map(createLocaleLoader);
 
 const config = {
 	initLocale: 'en',
-	translations
+  fallbackLocale: 'en',
+  translations: translations,
+  loaders: [
+    {
+      locale: 'en',
+      key: '',
+      loader: async () => (
+        await import("../../locales/en.json")
+      ).default
+    },
+    {
+      locale: 'fr',
+      key: '',
+      loader: async () => (
+        await import("../../locales/fr.json")
+      ).default
+    }
+  ]
 };
 
 export const { t, l, locales, locale } = new i18n(config);
diff --git a/src/lib/translations/lang.json b/src/lib/translations/lang.json
index 6cf55908..b01c522b 100644
--- a/src/lib/translations/lang.json
+++ b/src/lib/translations/lang.json
@@ -1,4 +1,4 @@
 {
 	"en": "English",
-	"fr": "French"
+	"fr": "Français"
 }
diff --git a/src/lib/utils.js b/src/lib/utils.js
index a1bdf8d7..65025c3a 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -47,6 +47,8 @@ export const put = (url, body, headers) => {
 		method: 'PUT',
 		body: JSON.stringify(body),
 		headers
+	}).then(async (r) => {
+		if (!r.ok) throw new Error('put failed');
 	});
 };
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 1d3446c9..df7c8b0f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,5 +1,4 @@
 {
-	"langname": "English",
 	"404": {
 		"404": "404",
 		"pageNotFound": "Page not found."
diff --git a/src/locales/fr.json b/src/locales/fr.json
index acc0eda7..1d279513 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1,16 +1,128 @@
 {
-	"langname": "Français",
+	"404": {
+		"404": "404",
+		"pageNotFound": "Page non trouvée."
+	},
 	"about": {
-		"header": "À Propos"
+		"header": "À Propos",
+		"p1": "<strong>CoinOS</strong> est un portefeuille, point de vente, marché d'e-commerce et plateforme d'échange de bitcoin <strong>open source</strong>. Development a commencé en Vancouver le septembre de 2012 pour donner aux marchands du coin un façon pratique d'accepter des paiements en bitcoin.",
+		"p2": "Il a eu plus de fonctions au fil des ans pour satisfaire une grande variété de cas d'utilisation avec le but de rendre commencer utiliser bitcoin rapidement, à bas prix, et en sécurité aussi façile que possible pour n'importe qui.",
+		"p3": "Tout le monde peux télécharger le code source et héberger leur propre instance de la plateforme soutenu par leur propres nœuds de bitcoin, liquid ou lightning, ou contactez-nous et nous l'installalons pour vous avec plaisir.",
+		"p4": "Transferts entre comptes de garde d'utilisateurs différents en notre serveur sont complètement gratuits, instants et sans limites.",
+		"founder": {
+			"header": "Le Fondateur",
+			"name": "Adam Soltys",
+			"position": "Officier Technique Principal",
+			"qualifications": {
+				"bitcoin": "Utilisant bitcoin depuis 2011",
+				"webDev": "20+ ans d'experience de programmation web en gouvernement et industrie",
+				"bitcoinVancouver": "Organisateur précoce de la rencontre bitcoin Vancouver",
+				"bitcoinCoop": "Fondateur de The Bitcoin Co-op et défenseur précoce de Decentral Vancouver",
+				"beliefs": "Yogi, permaculturiste, anarchiste, décentraliste",
+				"familialRelationships": "Mari, père, frère, fils"
+			}
+		},
+		"locations": {
+			"header": "Établissements",
+			"description": "Il y a des entreprises qui acceptent bitcoin utilisant le point de vente CoinOS. Si vous utilisez notre appli, s'il vous plait <a href=\"mailto:[email protected]\" class=\"underline underline-offset-4\">fais-le-nous savoir!</a>"
+		}
+	},
+	"error": {
+		"header": "Erreur",
+		"message": "S'il vous plait réessayez ou contactez l'assistance.",
+		"signIn": "Vous devez connecter pour continuer."
 	},
 	"faq": {
-		"header": "FAQ"
+		"header": "FAQ",
+		"cost": {
+			"question": "Qu'est-ce que c'est le coût?",
+			"answer": "CoinOS est gratuit à utiliser. Vous seulment payez un prix 1% quand vous convertez vos fonds entre Bitcoin, Liquid et Lightning. Comparez-ça à les frais de dossir typiques 3% des cartes credit."
+		},
+		"compatibility": {
+			"question": "Est-ce que j'ai besoin du logiciel ou appareil special?",
+			"answer": "Non. CoinOS est un site Web, alors vous pouvez l'utiliser sur n'importe quelle appareil tant que vous aves un connexion d'Internet. La plupart des marchands l'utilise sur un téléphone ou une tablette."
+		},
+		"safety": {
+			"question": "Sont mes fonds saufs?",
+			"answer": "Vos fonds sont entreposés en notre serveur sécurisé, mais nous recommendons que vous les retirez à votre propre entreposage pour les sauvegarder à long terme."
+		}
+	},
+	"footer": {
+		"followUs": "Suivez-Nous",
+		"twitter": "Twitter",
+		"github": "GitHub",
+		"company": "Entreprise",
+		"telegram": "Telegram",
+		"support": "Assistance",
+		"jobs": "Jobs"
 	},
 	"howItWorks": {
-		"header": "Comment Elle Fonctionne"
+		"header": "Comment Elle Fonctionne",
+		"step1": {
+			"header": "1. Crée votre compte",
+			"description": "Un nom d'utilateur et mot de passe est tout qui est besoin pour commencer."
+		},
+		"step2": {
+			"header": "2. Demande pour des paiements",
+			"description": "Comme vous faisiez normalement, mais avec bitcoin."
+		},
+		"step3": {
+			"header": "3. C'est tout!",
+			"description": "Vous pouvez convertir au monnaie local n'importe quand."
+		}
+	},
+	"landing": {
+		"header_before_icon": "Le",
+		"header_with_icon": "façon",
+		"header_after_icon": "le plus façile d'accepter bitcoin en votre magasin.",
+		"subheader": "Aggrandir votre clientèle et chiffre d'affaires par accepter bitcoin avec un point de vente façile à utiliser et dirigé. Logiciel et matériel informatique non obligatoire.",
+		"info1": {
+			"title": "Paiements instants avec Lightning",
+			"description": "Le moment que votre client envoie un paiment, c'est la. Vous ne devez pas attendre pour les décisions de banques ou vous inquieter pour des rejets de débit. Décisions instant, en secondes. Dis au revoir aux frais de dossir 3% des cartes de crédit."
+		},
+		"info2": {
+			"title": "Simple à utiliser, en garde par défaut",
+			"description1": "Juste entrer une quantité, partager le code QR et c'est tout!",
+			"description2": "Tes contes sont en garde par défaut, qui élimine le nécessité de comprendre comment bitcoin/lightning fonctionnent. Nous réalisons le plus gros du travail pour que vous pouvez vous concentrer sur votre entreprise.",
+			"description3": "Vous toujours avez l'option de <span class=\"underline undeline-offset-4\">prendre garde</span> de vos clés."
+		},
+		"info3": {
+			"title": "Personalise-le comment vous voulez",
+			"description": "Personalisez votre point de vente, ou rettenez-le au défaut - c'est votre chois."
+		}
+	},
+	"login": {
+		"username": "Nom d'utilisateur",
+		"password": "Mot de passe",
+		"passwordRecommendation": "Nous recommendons un mot de passe long et au hazard, généré par un gestionnaire de mots de passe.",
+		"forgotPassword": "Oublié ton mot de passe?",
+		"haveAccount": "Avez-vous déjà une conte?",
+		"noAccount": "N'avez-vous pas un conte?",
+		"register": "Enregistrer",
+		"signIn": "Connexion",
+		"failed": "Connexion failli"
 	},
 	"nav": {
 		"startInSeconds": "Commence en Secondes",
-		"signIn": "Connexion"
+		"account": "Conte",
+		"signIn": "Connexion",
+		"signOut": "Déconnexion",
+		"dashboard": "Tableau de bord",
+		"settings": "Préférences",
+		"support": "Assistance"
+	},
+	"invoice": {
+		"addTip": "Ajoutez un pourboire",
+		"addTipq": "Ajouter un pourboire?",
+		"done": "Fini",
+		"paymentSuccessful": "Paiement réussi!"
+	},
+	"jobs": {
+		"header": "Emplois",
+		"subheader": "Postes disponibles actuels",
+		"pitch1": "CoinOS recherche pour des développeurs pour joindre notre équipe croissant (temps plein ou partiel, télétravail OK)",
+		"pitch2": "Avez-vous hâte de travailler sur bitcoin open source? Regardez sur nos dépôts sur",
+		"github": "GitHub",
+		"pitch3": "Si vous pensez que vous pouvez exercer une influence positive, nous voulons que vous contribuez. Envoyer votre CV à"
 	}
 }
diff --git a/src/locales/guided_translation.py b/src/locales/guided_translation.py
index e5f94cfe..65f58db2 100644
--- a/src/locales/guided_translation.py
+++ b/src/locales/guided_translation.py
@@ -1,8 +1,10 @@
 #!/usr/bin/python
 
-import argparse, json, logging
+import argparse, json, logging, sys
+from pathlib import Path
 
 DEFAULT_FROM_LOCALE = 'en'
+LOCALE_DATA_FILEPATH = '../lib/translations/lang.json'
 
 def nested_dict_keys(d, _keyname_prefix=''):
     entry_list = []
@@ -14,6 +16,18 @@ def nested_dict_keys(d, _keyname_prefix=''):
             entry_list += [_keyname_prefix + key]
     return entry_list
 
+def create_locale(locale_code):
+    logging.debug("Creating locale %s...", locale_code)
+    with open(LOCALE_DATA_FILEPATH, 'r', encoding='utf-8') as lang_file:
+        lang_data = json.load(lang_file)
+
+    lang_data[locale_code] = input("What is the name of the language " + locale_code + "? ")
+
+    with open(LOCALE_DATA_FILEPATH, 'w') as lang_file:
+        json.dump(lang_data, lang_file, ensure_ascii=False, indent='\t')
+        lang_file.write('\n')
+    logging.debug("Created locale %s.", locale_code)
+
 def localize_string(string_id, from_data, to_data):
     logging.debug("Translating string with id %s", string_id)
     id_parts = string_id.split('.')
@@ -28,6 +42,7 @@ def localize_string(string_id, from_data, to_data):
     print(to_translate)
 
     translated = input("Type the translated text then press ENTER: ")
+    print(translated)
 
     # find/create place to put translated string
     translation_location = to_data  # the dictionary or list that should contain the translated string
@@ -42,22 +57,35 @@ if __name__ == "__main__":
     # setup and parse commandline arguments
     args_parser = argparse.ArgumentParser(description="guided translation of CoinOS")
     args_parser.add_argument('from_locale', nargs='?', type=str,
-                        help='which locale to translate from')
+                             help="which locale to translate from")
     args_parser.add_argument('to_locale', nargs='?', type=str,
-                        help='which locale to translate to')
+                             help="which locale to translate to")
+    args_parser.add_argument('-v', '--verbose', action='count', default=0,
+                             help="show more information")
+    args_parser.add_argument('-V', '--version', action='store_true',
+                             help="show version info and exit")
     args = args_parser.parse_args()
 
+    if args.version:
+        print("Guided Translation Script version 0.2.0")
+        sys.exit(0)
+
     from_locale = args.from_locale or input("Which locale do you want to translate from (default: %s)? "
                                             % DEFAULT_FROM_LOCALE) or DEFAULT_FROM_LOCALE
     to_locale = args.to_locale or input("Which locale do you want to translate to? ")
     if not to_locale:
         raise ValueError("You need to specify a language to translate to.")
 
-    logging.basicConfig(format='%(levelname)s: %(message)s')
+    if args.verbose >= 2:
+        logging.basicConfig(format='%(levelname)s: %(message)s', level=logging.DEBUG)
+    elif args.verbose >= 1:
+        logging.basicConfig(format='%(levelname)s: %(message)s', level=logging.INFO)
+    else:
+        logging.basicConfig(format='%(levelname)s: %(message)s')
 
     # load locale files
     logging.debug("Reading file to convert from (%s.json)", from_locale)
-    with open(from_locale + ".json", 'r') as from_file:
+    with open(from_locale + ".json", 'r', encoding='utf-8') as from_file:
         from_json_text = from_file.read()
     logging.debug("Converting from data from JSON to object")
     from_data = json.loads(from_json_text)
@@ -67,10 +95,16 @@ if __name__ == "__main__":
     logging.debug("List of strings: %s", from_id_list)
 
     logging.debug("Reading file to convert to (%s.json)", to_locale)
-    with open(to_locale + ".json", 'r') as to_file:
-        to_json_text = to_file.read()
-    logging.debug("Converting to data from JSON to object")
-    to_data = json.loads(to_json_text)
+    to_filepath = "./" + to_locale + ".json"
+    if Path(to_filepath).exists():
+        with open(to_locale + ".json", 'r', encoding='utf-8') as to_file:
+            to_json_text = to_file.read()
+        logging.debug("Converting to data from JSON to object")
+        to_data = json.loads(to_json_text)
+    else:
+        logging.info("No file found.  Creating new locale.")
+        create_locale(to_locale)
+        to_data = {}
     to_id_list = nested_dict_keys(to_data)
     logging.info("Successfully obtained %d strings from locale %s",
                  len(to_id_list), to_locale)
@@ -83,9 +117,10 @@ if __name__ == "__main__":
                 localize_string(string_id, from_data, to_data)
                 to_id_list.append(string_id)
     except KeyboardInterrupt:
-        print("Program interrupted.  Saving strings and closing program...")
+        print("\nProgram interrupted.  Saving strings...")
 
     # save localized data
-    with open(to_locale + ".json", 'w') as to_file:
-        json.dump(to_data, to_file, ensure_ascii=False, indent=2)
+    with open(to_locale + ".json", 'w', encoding='utf-8') as to_file:
+        json.dump(to_data, to_file, ensure_ascii=False, indent='\t')
+        to_file.write('\n')
     logging.info("Saved %d localized strings to %s.json", len(to_id_list), to_locale)
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index d3b9306d..58a3144d 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -15,9 +15,9 @@
 
 			<Icon icon="error" style="mx-auto w-56" />
 
-			<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>{($t('error.message'), { default: 'Please try again or contact support.' })}</p>
+			<h1 class="font-bold text-5xl">{$t('error.header')}</h1>
+			<p class="px-1 w-full md:w-96 break-all font-bold">{$page.error.message}</p>
+			<p>{$t('error.message')}</p>
 		</div>
 	</div>
 {/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 185eb140..5eab20bd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,7 +9,9 @@
 	import { goto } from '$app/navigation';
 	import { LoadingSplash } from '$comp';
 	import { warning, protectedRoutes } from '$lib/utils';
-	import { t } from '$lib/translations';
+	import { t, locale } from '$lib/translations';
+
+  const localeLocalStorageKey = 'sveltekit-i18n-locale';
 
 	$: $token = data.token;
 
@@ -19,13 +21,18 @@
 	$: $selectedRate = data.user && $rate * (data.rates[data.user.currency] / data.rates.USD);
 
 	onMount(() => {
+    let localStorageLocale = localStorage.getItem(localeLocalStorageKey);
+		if (localStorageLocale) locale.set(localStorageLocale);
+
+		locale.subscribe((lng) => {
+			if (lng) localStorage.setItem(localeLocalStorageKey, lng);
+		});
+
 		if (protectedRoutes.find((p) => $page.url.pathname.match(p))) {
 			if (!$token) {
 				goto('/login');
 				warning($t('error.signIn'));
 			}
-		} else {
-			ready = true;
 		}
 
 		connect();
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
index 181f8ea6..c588bbe0 100644
--- a/src/routes/[username]/receive/+page.svelte
+++ b/src/routes/[username]/receive/+page.svelte
@@ -81,7 +81,7 @@
 	};
 
 	let submit = async () => {
-		let { id } = await post('/invoice', {
+		let id = await post('/invoice', {
 			amount,
 			rate: $selectedRate,
 			username: $page.params.username
diff --git a/src/routes/invoice/+server.js b/src/routes/invoice/+server.js
index c77784d7..4b961be9 100644
--- a/src/routes/invoice/+server.js
+++ b/src/routes/invoice/+server.js
@@ -1,16 +1,16 @@
-import { json as json$1 } from '@sveltejs/kit';
-import { post } from '$lib/utils';
-import { user } from '$lib/store';
-
-let network = 'lightning';
+import cookie from 'cookie';
+import { get, post } from '$lib/utils';
 
 export async function POST({ request }) {
-	let { amount, rate, username, text } = await request.json();
-	if (!text) ({ text } = await post('/lightning/invoice', { amount }));
-	let { uuid: id } = await post('/invoice', {
-		invoice: { amount, currency: user.currency, network, rate, text },
-		user: { username }
-	});
+	let { token } = cookie.parse(request.headers.get('cookie') || '');
+
+	let network = 'lightning';
+	let { amount, currency, rate, tip, text, username } = await request.json();
+	let headers = { authorization: `Bearer ${token}` };
+
+	({ text } = await post('/lightning/invoice', { amount }, headers));
+	let invoice = { amount, currency, network, rate, tip, text };
+	let { uuid }  = await post('/invoice', { invoice, user: { username } }, headers);
 
-	return json$1({ id });
+	return new Response(JSON.stringify(uuid), { headers: { 'content-type': 'application/json' } });
 }
diff --git a/src/routes/invoice/[id]/+page.server.js b/src/routes/invoice/[id]/+page.server.js
index 78607545..d46d039b 100644
--- a/src/routes/invoice/[id]/+page.server.js
+++ b/src/routes/invoice/[id]/+page.server.js
@@ -1,14 +1,8 @@
-import { get } from '$lib/utils';
+import cookie from 'cookie';
+import { get, post } from '$lib/utils';
 
 export async function load({ params }) {
 	let { id } = params;
-	let {
-		amount,
-		rate,
-		status,
-		text,
-		user: { username }
-	} = await get(`/invoice?uuid=${id}`);
-
-	return { amount, id, rate, username, status, text };
+	return { id, invoice: await get(`/invoice?uuid=${id}`) };
 }
+
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index 19809f9f..e8bd9edf 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -3,54 +3,85 @@
 	import { browser } from '$app/env';
 	import { invoices, user } from '$lib/store';
 	import { Icon, Image } from '$comp';
-	import { goto } from '$app/navigation';
-	import { onMount } from 'svelte';
+	import { goto, invalidate } from '$app/navigation';
+	import { onMount, tick } from 'svelte';
 	import { copy } from '$lib/utils';
 	import { t } from '$lib/translations';
 
 	export let data;
-	$: ({ amount, id, rate, status, text, username } = data);
 
-	$invoices[id] = { amount, id, rate, status, text, username };
+	$: refresh(data);
+	let { invoice, id } = data;
+	let {
+		amount,
+		rate,
+		status,
+		text,
+		tip,
+		user: { username, currency }
+	} = invoice;
+
+	amount -= tip;
+
+	let refresh = (data) => {
+		({ invoice, id } = data);
+		({
+			amount,
+			rate,
+			status,
+			text,
+			tip,
+			user: { username, currency }
+		} = invoice);
+
+		amount -= tip;
+
+		tipPercent = Math.round((tip / amount) * 100);
+	};
+
+	$invoices[id] = { amount, id, rate, status, text, tip, username };
 
 	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
 
 	let tipPercent = 0;
 	let qr;
 
-	$: tipAmount = customTipAmount
-		? customTipAmount < 0
-			? (customTipAmount = 0)
-			: customTipAmount
-		: (amountFiat / 100) * tipPercent;
+	$: tipAmount = (amountFiat / 100) * tipPercent;
 
 	$: tipAmountFormatted = new Intl.NumberFormat('en-US', {
 		style: 'currency',
-		currency: $user.currency
+		currency
 	}).format(tipAmount);
 
-	$: tipAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		tipAmount / (rate / 100000000)
-	);
+	$: tipAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(tip);
 
 	$: totalAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
 		amount + parseFloat(tipAmountSats.replace(/,/g, ''))
 	);
 
-	$: update(tipAmountSats);
-	let update = async (n) => {
-		let { id } = await post('/invoice', {
-			amount: amount + reverseFormat(n),
+	let apply = async () => {
+		tipAmount = customTipAmount;
+		tipPercent = Math.round((tipAmount / amountFiat) * 100);
+		update();
+	};
+
+	let update = async () => {
+		await tick();
+		tip = (tipAmount * 100000000) / rate;
+		let r = await post(`/invoice`, {
+			amount: amount + tip,
 			rate,
+			tip,
 			text,
 			username
 		});
-		({ text } = await get(`/invoice/${id}`));
+
+		goto(`/invoice/${r}`);
 	};
 
 	$: totalAmountFormatted = new Intl.NumberFormat('en-US', {
 		style: 'currency',
-		currency: $user.currency
+		currency
 	}).format(amountFiat + parseFloat(tipAmount));
 
 	const amountFormatted = new Intl.NumberFormat('en-US', {
@@ -59,13 +90,22 @@
 
 	$: invoiceAmountFiatFormatted = new Intl.NumberFormat('en-US', {
 		style: 'currency',
-		currency: $user.currency
+		currency
 	}).format(amountFiat);
 
 	let customTipAmount;
 
 	const tipAmounts = ['None', '10%', '15%', '20%'];
 
+	let timeout;
+	const handleSlide = (e) => {
+		customTipAmount = '';
+		customInput.value = '';
+		tipPercent = e.target.value;
+		clearTimeout(timeout);
+		timeout = setTimeout(update, 100);
+	};
+
 	const handleTipButtonClick = (amount) => {
 		customTipAmount = '';
 		customInput.value = '';
@@ -75,6 +115,8 @@
 		} else {
 			tipPercent = amount.slice(0, 2);
 		}
+
+		update();
 	};
 
 	const handleCustomTipAmount = (e) => {
@@ -83,8 +125,8 @@
 	};
 
 	$: generate(text);
-	let generate = async (ready) => {
-		if (!ready) return;
+	let generate = async (text) => {
+		if (!(browser && text)) return;
 		let { default: QRCodeStyling } = await import('qr-code-styling');
 
 		const qrCode = new QRCodeStyling({
@@ -103,6 +145,7 @@
 			}
 		});
 
+		while (qr.firstChild) qr.removeChild(qr.lastChild);
 		qrCode.append(qr);
 	};
 
@@ -116,18 +159,14 @@
 			tipAmount = 0;
 			showMobileTip = false;
 		} else {
-			goto(`/${$user.username}/receive`);
+			goto(`/${username}/receive`);
 		}
 	};
 
 	let customInput;
 
 	const handleDoneClick = () => {
-		if ($user) {
-			goto(`/${$user.username}/receive`);
-		} else {
-			goto('/');
-		}
+		goto(`/${username}/receive`);
 	};
 </script>
 
@@ -167,11 +206,7 @@
 						max="100"
 						value={tipPercent}
 						class="px-2"
-						on:input={(e) => {
-							customTipAmount = '';
-							customInput.value = '';
-							tipPercent = e.target.value;
-						}}
+						on:input={handleSlide}
 					/>
 
 					<div>
@@ -210,7 +245,7 @@
 									? 'opacity-50'
 									: 'opacity-100'}"
 								disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
-								on:click={() => (showMobileTip = false)}>Done</button
+								on:click={apply}>Apply</button
 							>
 						</div>
 					</div>