Feature: i18n | React-Core

.changeset/cool-kids-press.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react-core": minor
+---
+
+Adding i18n support

packages/react-core/package.json

@@ -87,13 +87,15 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^4.33.0",
+    "@thirdweb-dev/auth": "workspace:*",
     "@thirdweb-dev/chains": "workspace:*",
     "@thirdweb-dev/generated-abis": "workspace:^",
     "@thirdweb-dev/sdk": "workspace:*",
     "@thirdweb-dev/storage": "workspace:*",
     "@thirdweb-dev/wallets": "workspace:*",
-    "@thirdweb-dev/auth": "workspace:*",
+    "i18next": "^23.5.1",
     "mime": "3.0.0",
+    "react-i18next": "^13.3.0",
     "tiny-invariant": "^1.2.0"
   },
   "peerDependencies": {

packages/react-core/src/core/i18n/index.ts

@@ -0,0 +1,26 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+// Import translations
+import en from './locales/en.json';
+import fr from './locales/fr.json';
+
+// the translations
+// (tip move them in a JSON file and import them,
+// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
+
+
+// Set up i18n instance
+i18n.use(initReactI18next).init({
+    resources: {
+        en: { translation: en },
+        fr: { translation: fr },
+    },
+    lng: 'en',
+    fallbackLng: 'en',
+    interpolation: {
+        escapeValue: false,
+    },
+});
+
+  export default i18n;

packages/react-core/src/core/i18n/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "Welcome to React": "Welcome to React, react-i18next, and thirdweb"
+}

packages/react-core/src/core/i18n/locales/fr.json

@@ -0,0 +1,3 @@
+{
+  "Welcome to React": "Bienvenue sur React, React, i18next et thirdweb"
+}

packages/react-core/src/core/providers/i18n.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import i18n from '../i18n';
+
+
+export const I18nContext = React.createContext({});
+
+// Create i18n provider
+export const I18nProvider: React.FC = ({ children }) => {
+    return <I18nContext.Provider value={{ i18n }}>{children}</I18nContext.Provider>;
+};

packages/react-core/tsconfig.json

@@ -1,5 +1,14 @@
 {
   "extends": "@thirdweb-dev/tsconfig/react-library.json",
-  "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
-}
+  "include": [
+    "."
+  ],
+  "exclude": [
+    "dist",
+    "build",
+    "node_modules"
+  ],
+  "compilerOptions": {
+    "resolveJsonModule": true
+  }
+}