translate

web-client/package.json

@@ -32,6 +32,7 @@
     "@capacitor/keyboard": "1.0.2",
     "@capacitor/status-bar": "1.0.2",
     "@ionic/angular": "^5.5.2",
+    "@ngneat/transloco": "^2.22.0",
     "angularx-qrcode": "^11.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",

web-client/src/app/app.module.ts

@@ -1,14 +1,22 @@
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { TranslocoRootModule } from './transloco/transloco-root.module';
 
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(),
+    AppRoutingModule,
+    HttpClientModule,
+    TranslocoRootModule,
+  ],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent],
 })

web-client/src/app/transloco/transloco-root.module.ts

@@ -0,0 +1,38 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable, NgModule } from '@angular/core';
+import {
+  Translation,
+  translocoConfig,
+  TranslocoLoader,
+  TranslocoModule,
+  TRANSLOCO_CONFIG,
+  TRANSLOCO_LOADER,
+} from '@ngneat/transloco';
+import { environment } from '../../environments/environment';
+
+@Injectable({ providedIn: 'root' })
+export class TranslocoHttpLoader implements TranslocoLoader {
+  constructor(private http: HttpClient) {}
+
+  getTranslation(lang: string) {
+    return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
+  }
+}
+
+@NgModule({
+  exports: [TranslocoModule],
+  providers: [
+    {
+      provide: TRANSLOCO_CONFIG,
+      useValue: translocoConfig({
+        availableLangs: ['en', 'fr'],
+        defaultLang: 'en',
+        // Remove this option if your application doesn't support changing language in runtime.
+        reRenderOnLangChange: true,
+        prodMode: environment.production,
+      }),
+    },
+    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader },
+  ],
+})
+export class TranslocoRootModule {}

web-client/src/app/views/landing/landing.module.ts

@@ -2,11 +2,18 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { IonicModule } from '@ionic/angular';
+import { TranslocoModule } from '@ngneat/transloco';
 import { LandingPageRoutingModule } from './landing-routing.module';
 import { LandingPage } from './landing.page';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, IonicModule, LandingPageRoutingModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    LandingPageRoutingModule,
+    TranslocoModule,
+  ],
   declarations: [LandingPage],
 })
 export class LandingPageModule {}

web-client/src/app/views/landing/landing.page.html

@@ -15,18 +15,19 @@ <h1 class="ion-text-center font-black">NAUTILUS</h1>
           shape="round"
           color="warning"
           routerLink="/register"
-          >CREATE WALLET
-        </ion-button>
+          transloco="LANDING.create"
+        ></ion-button>
         <ion-button
           expand="block"
           shape="round"
+          color="white"
           fill="outline"
           routerLink="/wallet"
-          >OPEN WALLET
-        </ion-button>
+          transloco="LANDING.open"
+        ></ion-button>
       </ion-col>
       <ion-col size="12">
-        <p class="ion-text-center">Terms & conditions apply</p>
+        <p class="ion-text-center">Terms & Conditions apply</p>
       </ion-col>
     </ion-row>
   </ion-grid>

web-client/src/assets/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "LANDING": { "create": "CREATE AN ACCOUNT", "open": "OPEN WALLET" }
+}

web-client/src/assets/i18n/fr.json

@@ -0,0 +1 @@
+{ "LANDING": { "create": "CREER UN COMPTE", "open": "OUVRIR PORTFEUILLE" } }

web-client/transloco.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rootTranslationsPath: "src/assets/i18n/",
+  langs: ["en", "fr"],
+  keysManager: {},
+};