feat(): add translations to plugin and popup redesign

package.json

@@ -17,9 +17,11 @@
     "url": ""
   },
   "dependencies": {
+    "i18next": "^23.5.1",
     "jssha": "^3.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-i18next": "^13.2.2",
     "react-qr-reader": "3.0.0-beta-1",
     "webextension-polyfill": "^0.10.0"
   },
@@ -31,16 +33,18 @@
     "@types/react-dom": "^17.0.0",
     "@types/webextension-polyfill": "^0.9.1",
     "copy-webpack-plugin": "^6.1.0",
+    "css-loader": "^6.8.1",
     "glob": "^7.1.6",
     "jest": "29.7.0",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2 ",
+    "style-loader": "^3.3.3",
     "ts-jest": "29.1.1",
     "ts-loader": "^6.2.1",
     "typescript": "5.2.2",
+    "web-ext": "^7.4.0",
     "webpack": "5.74.0",
     "webpack-cli": "4.9.1",
-    "webpack-merge": "5.9.0",
-    "web-ext": "^7.4.0"
+    "webpack-merge": "5.9.0"
   }
 }

src/api/i18n.ts

@@ -0,0 +1,20 @@
+function getUILanguage() {
+	let userLanguage = '';
+
+	if (typeof browser !== 'undefined' && browser.i18n) {
+		// For Firefox or compatible browsers
+		userLanguage = browser.i18n.getUILanguage();
+	} else if (typeof chrome !== 'undefined' && chrome.i18n) {
+		// For Chrome or compatible browsers
+		userLanguage = chrome.i18n.getUILanguage();
+	} else if (typeof navigator !== 'undefined' && navigator.language) {
+		// Fallback to using navigator.language
+		userLanguage = navigator.language;
+	}
+
+	return userLanguage;
+}
+
+export const i18n = {
+	getUILanguage,
+};