@lumiapassport/ui-kit 1.17.2 → 1.17.5

package/README.md

@@ -39,45 +39,74 @@ export const queryClient = new QueryClient({
 
 ### 2. I18n config (Required) & typing (Optional)
 
-i18next lib should be inited above both passport & your app, so your app language can be switched by Passport's lang selector.
-Create the following folder structure for your app's translations:
+i18next lib must be initiated for both passport & your app (namespace concept used to manage translations), so your app's language can be switched by Passport's lang selector.
+
+There is no need to provide any translations for Passport ( has built-in default lang-set ), unless it's not required to expand supported languages by custom langs, but it is required to init i18next inside DApp.
+
+First, create the following folder structure for your dapp's translations (or update existant, if needed):
+
+example: common.json
+
+```json
+{
+  "appname": "My App",
+  "signin": "Sign IN"
+}
+```
 
 ```
 src/
 └── i18n/
     ├── locales/
-    │   └── en.json
+    │   ├── en/
+    │   ├──  ├── common.json
+    │   ├──  ├── header.json
+    │   ├──  ├── page1.json
+    │   ├──  ├── page2.json
+    │   ├──  └── ...restTranslationsJsons
+    │   ├── /...restLocales/...
     └── index.ts
 ```
 
 Where:
 
-- `locales/*.json` files contain i18next translation maps
-- `index.ts` exports translation resources as const
+- `locales/**/*.json` files contain i18next translation maps. OPTIONAL Use dedicated files for easier translations maintainance.
+- `index.ts` exports translation resources
 
-`IMPORTANT` YOUR_APP_TRANSLATION_RESOURSES should be structured with namespaces as shown, where "app" is example namespace
+> **IMPORTANT:** YOUR_APP_TRANSLATION_RESOURSES must be structured with namespaces (as shown), where "app" is example namespace
 
 ```tsx
-import en from './locales/en.json'
+import commonEn from './i18n/locales/en/common.json'
+import headerEn from './i18n/locales/en/header.json'
+import page1en from './locales/en/page1.json'
+import page2en from './locales/en/page2.json'
 
 export const YOUR_APP_TRANSLATION_RESOURSES = {
-  en: { app: en } // language: { namespace: jsonLocale }
+  // language: { namespace: jsonLocale }
+  en: {
+    app: {
+      common: commonEn,
+      header: headerEn,
+      page1: page1en,
+      page2: page2en
+    }
+  }
   // ...
 } as const
 ```
 
-`NOTE` If you don't need to translate your app then leave YOUR_APP_TRANSLATION_RESOURSES empty. Also there is no need in locales folder
+> **Note:** If you don't need to translate your app then leave YOUR_APP_TRANSLATION_RESOURSES empty with no locales folder.
 
-Decalre types at `src/i18next.d.ts` so t-method provides intellisence typings for yor translations, your default locale can be used for typing
+Decalre types (usualy at `src/i18next.d.ts`) so t-method provides intellisence typings for your translations. Default locale is recomended to be used for typing as shown
 
 ```tsx
-import en from './i18n/locales/en.json'
+import { YOUR_APP_TRANSLATION_RESOURSES } from './i18n'
 
 declare module 'i18next' {
   interface CustomTypeOptions {
     defaultNS: 'app' //
     resources: {
-      app: typeof en
+      app: typeof YOUR_APP_TRANSLATION_RESOURSES.en.app
     }
   }
 }
@@ -85,6 +114,16 @@ declare module 'i18next' {
 
 ### 3. Wrap your app with providers & init i18n
 
+> **Note:** Declare your specific dapp's high order useTranslation hook re-expoting namespaced react-i18next useTranslation, since now t-method is typed by your default locale.
+
+```tsx
+import { useTranslation } from 'react-i18next'
+
+export function useT() {
+  return useTranslation('app') // this will make t-method typed accordingly
+}
+```
+
 ```tsx
 import {
   combineI18NResources,
@@ -98,22 +137,20 @@ import {
 import i18n from 'i18next'
 import { initReactI18next, useTranslation } from 'react-i18next'
 
-// import { YOUR_APP_TRANSLATION_RESOURSES } from './i18n'
+import { YOUR_APP_TRANSLATION_RESOURSES } from './i18n'
 import { queryClient } from './queryClient'
 
-const i18nResourcesWithPassport = combineI18NResources(/** YOUR_APP_TRANSLATION_RESOURSES */)
-const savedLanguage = localStorage.getItem(LOCAL_STORAGE_I18N_KEY) // passport saves language setup on change
-
 i18n.use(initReactI18next).init({
-  resources: i18nResourcesWithPassport,
-  lng: savedLanguage || 'en',
+  resources: combineI18NResources(YOUR_APP_TRANSLATION_RESOURSES),
+  lng: localStorage.getItem(LOCAL_STORAGE_I18N_KEY) || 'en', // passport saves language setup on change
   fallbackLng: 'en', // default
   defaultNS: 'app', // your app i18n-namespace, example: app
+  namespace: 'app', // your app i18n-namespace, example: app
   debug: false
 })
 
 function Root() {
-  const { t } = useTranslation(/** optionaly our app i18next namespace, example namespace: app */)
+  const { t } = useT()
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -122,9 +159,13 @@ function Root() {
       >
         <LumiaRainbowKitProvider>
           <LumiaPassportSessionProvider>
-            {/* Note! provided translation resourses will be available under provided namespace, example namespace: app */}
-            {/* <span>{t('app:title')}</span>  */}
-            <YourApp />
+            <header>
+              <h1>{t('common.appname')}</h1>
+            </header>
+
+            <main>
+              <span>{t('page1.title')}</span>
+            </main>
           </LumiaPassportSessionProvider>
         </LumiaRainbowKitProvider>
       </LumiaPassportProvider>
@@ -139,10 +180,12 @@ function Root() {
 import { ConnectWalletButton } from '@lumiapassport/ui-kit'
 
 function YourApp() {
+  const { t } = useT()
+
   return (
     <div>
-      <h1>My App</h1>
-      <ConnectWalletButton label="Sign in" />
+      <h1>{t('common.appname')}</h1>
+      <ConnectWalletButton label={t('common.signin')} />
     </div>
   )
 }
@@ -161,10 +204,12 @@ function CustomButtonComponent(props: HTMLAttributes<HTMLButtonElement>) => {
 }
 
 function YourApp() {
+  const { t } = useT()
+
   return (
     <div>
       <h1>My App</h1>
-      <ConnectWalletButton label="Sign in" ConnectButton={CustomButtonComponent} />
+      <ConnectWalletButton label={t('common.signin')} ConnectButton={CustomButtonComponent} />
     </div>
   )
 }

package/dist/iframe/index.html

@@ -15,7 +15,7 @@
     <meta http-equiv="X-Content-Type-Options" content="nosniff" />
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
 
-    <title>Lumia Passport Secure Wallet - iframe version 1.17.2</title>
+    <title>Lumia Passport Secure Wallet - iframe version 1.17.5</title>
 
     <!-- Styles will be injected by build process -->
     <style>

package/dist/iframe/main.js

@@ -4411,7 +4411,7 @@ var SigningManager = class extends TokenRefreshApiClient {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.17.2";
+var IFRAME_VERSION = "1.17.5";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));