implement backend error translations

locales/en/errors.json

@@ -1,4 +1,37 @@
 {
   "manifest-package-name-mismatch": "Tapplet manifest does not match package name. Expected: {{ packageName }} Received: {{ manifestId }} from: {{ endpoint }}/tapplet.manifest.json",
-  "fetching-taplet-manifest-failed": "Error fetching tapplet manifest: {{ error }}"
+  "fetching-taplet-manifest-failed": "Error fetching tapplet manifest: {{ error }}",
+  "no-pending-transaction-found": "No pending transaction found",
+  "no-data-in-event": "No data in event",
+  "no-source-in-event": "No source in event",
+  "tauri-error": "Tauri error",
+  "failed-to-parse-tapplet-version": "Failed to parse tapplet version",
+  "failed-to-find-tapplet-version": "Failed to find tapplet version",
+  "failed-to-obtain-permission-token-lock": "Failed to obtain permission token lock",
+  "failed-to-obtain-auth-token-lock": "Failed to obtain auth token lock",
+  "provider-call-failed-for-method": "Provider call failed for method {{ method }} with params {{ params }}",
+  "failed-to-obtain-local-address": "Failed to obtain local address",
+  "failed-to-start-tapplet-server": "Failed to start tapplet server",
+  "tapplet-server-already-running": "Tapplet server already running",
+  "token-for-tapplet-server-is-invalid": "Token for tapplet server is invalid",
+  "failed-to-bind-port": "Failed to bind port: {{ port }}",
+  "already-exists": "Entity {{ entity_name }} with field {{ field_name }} already exists",
+  "failed-to-retrieve-data": "Failed to retrieve entity {{ entity_name }} data",
+  "failed-to-delete": "Failed to delete entity {{ entity_name }}",
+  "failed-to-update": "Failed to update entity {{ entity_name }}",
+  "failed-to-create": "Failed to create entity {{ entity_name }}",
+  "failed-to-copy-file": "Failed to copy file from {{ from }} to {{ to }}",
+  "failed-to-read-dir": "Failed to read directory at path: {{ path }}",
+  "failed-to-read-file": "Failed to read file at path: {{ path }}",
+  "failed-to-create-dir": "Failed to create directory at path: {{ path }}",
+  "failed-to-create-file": "Failed to create file at path: {{ path }}",
+  "failed-to-write-file": "Failed to write file at path: {{ path }}",
+  "failed-to-parse-int": "Failed to parse integer",
+  "failed-to-unpack-file": "Failed to unpack file at path: {{ path }}",
+  "missing-package-json-or-tapplet-manifest-json": "Missing package.json or tapplet.manifest.json from unpacked tapplet at path: {{ path }}",
+  "failed-to-delete-tapplet": "Failed to delete tapplet from path: {{ path }}",
+  "failed-to-get-file-path": "Failed to get file path",
+  "fetch-manifest-error": "Failed to fetch manifest from {{ endpoint }}",
+  "manifest-response-error": "Failed to receive manifest {{ endpoint }}",
+  "failed-to-download": "Failed to download from {{ url }}"
 }

locales/en/navigation.json

@@ -0,0 +1,5 @@
+{
+  "wallet": "Wallet",
+  "installed-tapplets": "Installed Tapplets",
+  "tapplet-registry": "Tapplet Registry"
+}

locales/pl/errors.json

@@ -1,4 +1,37 @@
 {
   "manifest-package-name-mismatch": "Manifest tapplet'u nie pasuje do nazwy pakietu. Oczekiwano: {{ packageName }} Otrzymano: {{ manifestId }} z: {{ endpoint }}/tapplet.manifest.json",
-  "fetching-taplet-manifest-failed": "Błąd pobierania manifestu tapplet'u: {{ error }}"
+  "fetching-taplet-manifest-failed": "Błąd pobierania manifestu tapplet'u: {{ error }}",
+  "no-pending-transaction-found": "Nie znaleziono oczekującej transakcji",
+  "no-data-in-event": "Brak danych w zdarzeniu",
+  "no-source-in-event": "Brak źródła w zdarzeniu",
+  "tauri-error": "Błąd Tauri",
+  "failed-to-parse-tapplet-version": "Nie udało się sparsować wersji tapplet'u",
+  "failed-to-find-tapplet-version": "Nie udało się znaleźć wersji tapplet'u",
+  "failed-to-obtain-permission-token-lock": "Nie udało się uzyskać blokady tokena uprawnień",
+  "failed-to-obtain-auth-token-lock": "Nie udało się uzyskać blokady tokena autoryzacji",
+  "provider-call-failed-for-method": "Wywołanie provider'a nie powiodło się dla metody {{ method }} z parametrami {{ params }}",
+  "failed-to-obtain-local-address": "Nie udało się uzyskać lokalnego adresu",
+  "failed-to-start-tapplet-server": "Nie udało się uruchomić serwera tapplet'u",
+  "tapplet-server-already-running": "Serwer tapplet'u już działa",
+  "token-for-tapplet-server-is-invalid": "Token dla serwera tapplet'u jest nieprawidłowy",
+  "failed-to-bind-port": "Nie udało się przypisać portu: {{ port }}",
+  "already-exists": "Encja {{ entity_name }} z polem {{ field_name }} już istnieje",
+  "failed-to-retrieve-data": "Nie udało się pobrać danych encji {{ entity_name }}",
+  "failed-to-delete": "Nie udało się usunąć encji {{ entity_name }}",
+  "failed-to-update": "Nie udało się zaktualizować encji {{ entity_name }}",
+  "failed-to-create": "Nie udało się utworzyć encji {{ entity_name }}",
+  "failed-to-copy-file": "Nie udało się skopiować pliku z {{ from }} do {{ to }}",
+  "failed-to-read-dir": "Nie udało się odczytać katalogu pod ścieżką: {{ path }}",
+  "failed-to-read-file": "Nie udało się odczytać pliku pod ścieżką: {{ path }}",
+  "failed-to-create-dir": "Nie udało się utworzyć katalogu pod ścieżką: {{ path }}",
+  "failed-to-create-file": "Nie udało się utworzyć pliku pod ścieżką: {{ path }}",
+  "failed-to-write-file": "Nie udało się zapisać pliku pod ścieżką: {{ path }}",
+  "failed-to-parse-int": "Nie udało się sparsować liczby całkowitej",
+  "failed-to-unpack-file": "Nie udało się rozpakować pliku pod ścieżką: {{ path }}",
+  "missing-package-json-or-tapplet-manifest-json": "Brak package.json lub tapplet.manifest.json w rozpakowanym tapplet'cie pod ścieżką: {{ path }}",
+  "failed-to-delete-tapplet": "Nie udało się usunąć tapplet'u z ścieżki: {{ path }}",
+  "failed-to-get-file-path": "Nie udało się uzyskać ścieżki pliku",
+  "fetch-manifest-error": "Nie udało się pobrać manifestu z {{ endpoint }}",
+  "manifest-response-error": "Nie udało się odebrać manifestu {{ endpoint }}",
+  "failed-to-download": "Nie udało się pobrać z {{ url }}"
 }

locales/pl/navigation.json

@@ -0,0 +1,5 @@
+{
+  "wallet": "Portfel",
+  "installed-tapplets": "Zainstalowane Tapplet'y",
+  "tapplet-registry": "Rejestr Tapplet'ów"
+}

src-tauri/src/error.rs

@@ -1,4 +1,4 @@
-use std::num::ParseIntError;
+use std::{io, num::ParseIntError};
 use thiserror::Error;
 
 #[derive(Debug, Error)]
@@ -7,13 +7,13 @@ pub enum Error {
   #[error(transparent)] IOError(#[from] IOError),
   #[error(transparent)] RequestError(#[from] RequestError),
   #[error(transparent)] TappletServerError(#[from] TappletServerError),
-  #[error("Tauri error")] TauriError(#[from] tauri::Error),
+  #[error("tauri-error")] TauriError(#[from] tauri::Error),
   #[error(transparent)] JsonParsingError(#[from] serde_json::Error),
-  #[error("Failed to parse tapplet version")] VersionParseError,
-  #[error("Failed to find tapplet version")] VersionNotFound,
-  #[error("Failed to obtain permission token lock")] FailedToObtainPermissionTokenLock,
-  #[error("Failed to obtain auth token lock")] FailedToObtainAuthTokenLock,
-  #[error("Provider call failed for method: {method} with params: {params}")] ProviderError {
+  #[error("failed-to-parse-tapplet-version")] VersionParseError,
+  #[error("failed-to-find-tapplet-version")] VersionNotFound,
+  #[error("failed-to-obtain-permission-token-lock")] FailedToObtainPermissionTokenLock,
+  #[error("failed-to-obtain-auth-token-lock")] FailedToObtainAuthTokenLock,
+  #[error("provider-call-failed-for-method | method-{method} & params-{params}")] ProviderError {
     method: String,
     params: String,
   },
@@ -27,78 +27,79 @@ impl serde::Serialize for Error {
 
 #[derive(Debug, Error)]
 pub enum TappletServerError {
-  #[error("Failed to obtain of local address")] FailedToObtainLocalAddress,
-  #[error("Failed to start tapplet server")] FailedToStart,
-  #[error("Tapplet server already running")] AlreadyRunning,
-  #[error("Token for tapplet server is invalid")] TokenInvalid,
-  #[error("Failed to bind port: {port}")] BindPortError {
+  #[error("failed-to-obtain-local-address")] FailedToObtainLocalAddress,
+  #[error("failed-to-start-tapplet-server")] FailedToStart,
+  #[error("tapplet-server-already-running")] AlreadyRunning,
+  #[error("token-for-tapplet-server-is-invalid")] TokenInvalid,
+  #[error("failed-to-bind-port | port-{port}")] BindPortError {
     port: String,
   },
 }
 
 #[derive(Debug, Error)]
 pub enum DatabaseError {
-  #[error("{entity_name} with this {field_name} already exists")] AlreadyExists {
+  #[error("already-exists | entity_name-{entity_name} & field_name-{field_name}")] AlreadyExists{
     entity_name: String,
     field_name: String,
   },
-  #[error("Failed to retrieve {entity_name} data")] FailedToRetrieveData {
+  #[error("failed-to-retrieve-data | entity_name-{entity_name}")] FailedToRetrieveData {
     entity_name: String,
   },
-  #[error("Failed to delete {entity_name}")] FailedToDelete {
+  #[error("failed-to-delete | entity_name-{entity_name}")] FailedToDelete {
     entity_name: String,
   },
-  #[error("Failed to update {entity_name}")] FailedToUpdate {
+  #[error("failed-to-update | entity_name-{entity_name}")] FailedToUpdate {
     entity_name: String,
   },
-  #[error("Failed to create {entity_name}")] FailedToCreate {
+  #[error("failed-to-create | entity_name-{entity_name}")] FailedToCreate {
     entity_name: String,
   },
 }
 
+
 #[derive(Debug, Error)]
 pub enum IOError {
-  #[error("Failed to copy file from {from} to {to}")] FailedToCopyFile {
+  #[error("failed-to-copy-file | from-{from} & to-{to}")] FailedToCopyFile {
     from: String,
     to: String,
   },
-  #[error("Failed to read directory at path: {path}")] FailedToReadDir {
+  #[error("failed-to-read-dir | path-{path}")] FailedToReadDir {
     path: String,
   },
-  #[error("Failed to read file at path: {path}")] FailedToReadFile {
+  #[error("failed-to-read-file | path-{path}")] FailedToReadFile {
     path: String,
   },
-  #[error("Failed to create directory at path: {path}")] FailedToCreateDir {
+  #[error("failed-to-create-dir | path-{path}")] FailedToCreateDir {
     path: String,
   },
-  #[error("Failed to create file at path: {path}")] FailedToCreateFile {
+  #[error("failed-to-create-file | path-{path}")] FailedToCreateFile {
     path: String,
   },
-  #[error("Failed to write file at path: {path}")] FailedToWriteFile {
-    path: String,
+  #[error("failed-to-write-file | path-{path}")] FailedToWriteFile {
+    path: String
   },
-  #[error("Failed to parse int")] ParseIntError(#[from] ParseIntError),
-  #[error("Failed to unpack file at path: {path}")] FailedToUnpackFile {
+  #[error("failed-to-parse-int")] ParseIntError(#[from] ParseIntError),
+  #[error("failed-to-unpack-file | path-{path}")] FailedToUnpackFile {
     path: String,
   },
-  #[error("Missing package.json or tapplet.manifest.json from unpacked tapplet at path: {path}")] InvalidUnpackedFiles {
+  #[error("missing-package-json-or-tapplet-manifest-json | path-{path}")] InvalidUnpackedFiles {
     path: String,
   },
-  #[error("Failed to delete tapplet folder at path: {path}")] FailedToDeleteTapplet {
+  #[error("failed-to-delete-tapplet | path-{path}")] FailedToDeleteTapplet {
     path: String,
   },
-  #[error("Failed to get file path")] FailedToGetFilePath,
+  #[error("failed-to-get-file-path")] FailedToGetFilePath,
 }
 
 #[derive(Debug, Error)]
 pub enum RequestError {
-  #[error("Failed to fetch manifest from {endpoint}")] FetchManifestError {
+  #[error("fetch-manifest-error | endpoint-{endpoint}")] FetchManifestError{
     endpoint: String,
   },
-  #[error("Failed to receive manifest {endpoint}")] ManifestResponseError {
+  #[error("manifest-response-error | endpoint-{endpoint}")] ManifestResponseError{
     endpoint: String,
   },
-  #[error("Failed to download file from {url}")] FailedToDownload {
+  #[error("failed-to-download | url-{url}")] FailedToDownload{
     url: String,
-  },
+  }
 }

src/App.tsx

@@ -7,39 +7,61 @@ import { BrowserRouter, Routes, Route, Link } from "react-router-dom"
 import { TappletsRegistered } from "./components/TappletsRegistered"
 import { TappletsInstalled } from "./components/TappletsInstalled"
 import { ActiveDevTapplet } from "./components/DevTapplet"
-import { Box } from "@mui/material"
-import { useEffect } from "react"
+import { Button, Grid, Stack } from "@mui/material"
+import React, { useEffect } from "react"
 import { useDispatch } from "react-redux"
 import { providerActions } from "./store/provider/provider.slice"
 import { registeredTappletsActions } from "./store/registeredTapplets/registeredTapplets.slice"
 import { installedTappletsActions } from "./store/installedTapplets/installedTapplets.slice"
 import { devTappletsActions } from "./store/devTapplets/devTapplets.slice"
+import { changeLanguage } from "i18next"
+import { Language, LanguageList } from "./i18initializer"
+import { useTranslation } from "react-i18next"
+import { metadataActions } from "./store/metadata/metadata.slice"
 
 function App() {
+  const { t } = useTranslation("navigation")
   const dispatch = useDispatch()
   useEffect(() => {
     dispatch(providerActions.initializeRequest({}))
     dispatch(registeredTappletsActions.initializeRequest({}))
     dispatch(installedTappletsActions.initializeRequest({}))
     dispatch(devTappletsActions.initializeRequest({}))
   }, [])
+
+  const handleLanguageChange = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, language: Language) => {
+      event.preventDefault()
+      event.stopPropagation()
+      changeLanguage(language)
+      dispatch(metadataActions.changeCurrentLanguage({ language }))
+    },
+    []
+  )
+
   return (
-    <Box display="flex" flexDirection="column" height="100%">
+    <Stack height="100%">
       <BrowserRouter>
-        <Box p={4} display="flex" alignItems="center" justifyContent="center" gap={4}>
-          <Link to={TabKey.WALLET} className="nav-item">
-            {" "}
-            Wallet{" "}
-          </Link>
-          <Link to={TabKey.TAPPLET_REGISTRY} className="nav-item">
-            {" "}
-            Tapplet Registry{" "}
-          </Link>
-          <Link to={TabKey.INSTALLED_TAPPLETS} className="nav-item">
-            {" "}
-            Installed Tapplets{" "}
-          </Link>
-        </Box>
+        <Grid gridTemplateColumns="repeat(5, 1fr)" gridTemplateRows="1fr" columnGap={0} rowGap={0} display="grid">
+          <Stack direction="row" gap={4} gridArea="1 / 2 / 2 / 5" width="100%" justifyContent="center">
+            <Link to={TabKey.WALLET} className="nav-item">
+              {t("wallet")}
+            </Link>
+            <Link to={TabKey.TAPPLET_REGISTRY} className="nav-item">
+              {t("tapplet-registry")}
+            </Link>
+            <Link to={TabKey.INSTALLED_TAPPLETS} className="nav-item">
+              {t("installed-tapplets")}
+            </Link>
+          </Stack>
+          <Stack direction="row" justifyContent="flex-end" gap={2} gridArea="1 / 5 / 2 / 6">
+            {LanguageList.map((langauge) => (
+              <Button sx={{ alignSelf: "center" }} onClick={(event) => handleLanguageChange(event, langauge)}>
+                {langauge}
+              </Button>
+            ))}
+          </Stack>
+        </Grid>
 
         <Routes>
           <Route path={TabKey.WALLET} element={<Wallet key={TabKey.WALLET}></Wallet>} />
@@ -49,7 +71,7 @@ function App() {
           <Route path={`${TabKey.DEV_TAPPLETS}/:id`} element={<ActiveDevTapplet key={TabKey.DEV_TAPPLETS} />} />
         </Routes>
       </BrowserRouter>
-    </Box>
+    </Stack>
   )
 }
 

src/components/ActiveTapplet.tsx

@@ -6,6 +6,7 @@ import { Tapplet } from "./Tapplet"
 import { useDispatch } from "react-redux"
 import { errorActions } from "../store/error/error.slice"
 import { useTranslation } from "react-i18next"
+import { ErrorSource } from "../store/error/error.types"
 
 export function ActiveTapplet() {
   const { t } = useTranslation("components")
@@ -19,11 +20,11 @@ export function ActiveTapplet() {
       .then((res: unknown) => {
         setTappletAddress(res as string)
       })
-      .catch((error) => dispatch(errorActions.showError({ message: error as string })))
+      .catch((error: string) => dispatch(errorActions.showError({ message: error, errorSource: ErrorSource.BACKEND })))
 
     return () => {
-      invoke("close_tapplet", { installedTappletId }).catch((error) =>
-        dispatch(errorActions.showError({ message: error as string }))
+      invoke("close_tapplet", { installedTappletId }).catch((error: string) =>
+        dispatch(errorActions.showError({ message: error, errorSource: ErrorSource.BACKEND }))
       )
       setTappletAddress("")
     }

src/components/DevTapplet.tsx

@@ -5,10 +5,9 @@ import { useEffect, useState } from "react"
 import { Tapplet } from "./Tapplet"
 import { useDispatch } from "react-redux"
 import { errorActions } from "../store/error/error.slice"
-import { useTranslation } from "react-i18next"
+import { ErrorSource } from "../store/error/error.types"
 
 export function ActiveDevTapplet() {
-  const { t } = useTranslation("errors")
   let { state }: { state: DevTapplet } = useLocation()
   const [isVerified, setIsVerified] = useState<boolean>(false)
   const dispatch = useDispatch()
@@ -23,20 +22,16 @@ export function ActiveDevTapplet() {
         } else {
           dispatch(
             errorActions.showError({
-              message: t("manifest-package-name-mismatch", {
-                packageName: state?.package_name,
-                manifestId: manifest?.id,
-                endpoint: state?.endpoint,
-              }),
+              message: `manifest-package-name-mismatch | packageName: ${state?.package_name} & manifestId: ${manifest?.id} & endpoint: ${state?.endpoint}`,
+              errorSource: ErrorSource.FRONTEND,
             })
           )
         }
       } catch (error) {
         dispatch(
           errorActions.showError({
-            message: t("fetching-taplet-manifest-failed", {
-              error,
-            }),
+            message: `fetching-taplet-manifest-failed | error: ${error}`,
+            errorSource: ErrorSource.FRONTEND,
           })
         )
       }