@lumiapassport/ui-kit 1.16.9 → 1.17.0

package/README.md

@@ -22,9 +22,11 @@ yarn add @lumiapassport/ui-kit
 
 ## Quick Start
 
-### 1. Setup QueryClient (Required)
+The UI Kit requires `@tanstack/react-query` for query management & `i18next` + `react-i18next` for multilanguages support.
 
-The UI Kit requires `@tanstack/react-query` for query management. First, create a query client:
+### 1. QueryClient Setup (Required)
+
+First, create a query client:
 
 ```tsx
 // queryClient.ts
@@ -35,19 +37,84 @@ export const queryClient = new QueryClient({
 })
 ```
 
-### 2. Wrap your app with providers
+### 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:
+
+```
+src/
+└── i18n/
+    ├── locales/
+    │   └── en.json
+    └── index.ts
+```
+
+Where:
+
+- `locales/*.json` files contain i18next translation maps
+- `index.ts` exports translation resources as const
+
+`IMPORTANT` YOUR_APP_TRANSLATION_RESOURSES should be structured with namespaces as shown, where "app" is example namespace
+
+```tsx
+import en from './locales/en.json'
+
+export const YOUR_APP_TRANSLATION_RESOURSES = {
+  en: { app: en } // language: { namespace: jsonLocale }
+  // ...
+} 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
+
+Decalre types at `src/i18next.d.ts` so t-method provides intellisence typings for yor translations, your default locale can be used for typing
+
+```tsx
+import en from './i18n/locales/en.json'
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    defaultNS: 'app' //
+    resources: {
+      app: typeof en
+    }
+  }
+}
+```
+
+### 3. Wrap your app with providers & init i18n
 
 ```tsx
 import {
+  combineI18NResources,
+  LOCAL_STORAGE_I18N_KEY,
   //
   LumiaPassportProvider,
   LumiaPassportSessionProvider,
   LumiaRainbowKitProvider
 } from '@lumiapassport/ui-kit'
+//
+import i18n from 'i18next'
+import { initReactI18next, useTranslation } from 'react-i18next'
 
+// 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',
+  fallbackLng: 'en', // default
+  defaultNS: 'app', // your app i18n-namespace, example: app
+  debug: false
+})
+
 function Root() {
+  const { t } = useTranslation(/** optionaly our app i18next namespace, example namespace: app */)
+
   return (
     <QueryClientProvider client={queryClient}>
       <LumiaPassportProvider
@@ -55,6 +122,8 @@ function Root() {
       >
         <LumiaRainbowKitProvider>
           <LumiaPassportSessionProvider>
+            {/* Note! provided translation resourses will be available under provided namespace, example namespace: app */}
+            {/* <span>{t('app:title')}</span>  */}
             <YourApp />
           </LumiaPassportSessionProvider>
         </LumiaRainbowKitProvider>
@@ -64,7 +133,7 @@ function Root() {
 }
 ```
 
-### 3. Add the Connect Button
+### 4. Add the Connect Button
 
 ```tsx
 import { ConnectWalletButton } from '@lumiapassport/ui-kit'
@@ -79,7 +148,7 @@ function YourApp() {
 }
 ```
 
-### 3.1 (Optional)
+### 5. (Optional)
 
 Custom unconnected button can be provided via ConnectButton prop.
 Prop consumes standart HTMLButton component and will provide required onClick to it
@@ -116,7 +185,7 @@ That's it! The `ConnectWalletButton` provides a complete authentication UI with
     network: {
       name: 'Lumia Beam',
       symbol: 'LUMIA',
-      chainId: 2030232745,
+      chainId: 2030232745, // Default chain for your dApp
       rpcUrl: 'https://beam-rpc.lumia.org',
       explorerUrl: 'https://beam-explorer.lumia.org',
       testnet: true,
@@ -125,6 +194,16 @@ That's it! The `ConnectWalletButton` provides a complete authentication UI with
 >
 ```
 
+**Network Chain Priority:**
+
+The SDK uses the following priority for determining the active chain:
+
+1. **User's explicit selection** - If user manually switched chains in the UI, their choice is preserved (stored in localStorage)
+2. **dApp config `network.chainId`** - Your configured default chain for first-time users
+3. **SDK default** - Lumia Testnet (fallback if no config provided)
+
+This ensures returning users keep their preferred chain while new users start on your configured network.
+
 ### Advanced Configuration
 
 ```tsx
@@ -196,10 +275,11 @@ That's it! The `ConnectWalletButton` provides a complete authentication UI with
     },
 
     // Network configuration
+    // chainId sets default chain for new users (see "Network Chain Priority" above)
     network: {
       name: 'Lumia Beam',
       symbol: 'LUMIA',
-      chainId: 2030232745,
+      chainId: 2030232745, // Your dApp's default chain
       rpcUrl: 'https\:\/\/beam-rpc.lumia.org',
       explorerUrl: 'https\:\/\/beam-explorer.lumia.org',
       testnet: true,

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.16.9</title>
+    <title>Lumia Passport Secure Wallet - iframe version 1.17.0</title>
 
     <!-- Styles will be injected by build process -->
     <style>

package/dist/iframe/main.js

@@ -1327,7 +1327,7 @@ function buildAuthorizationTemplateData(project, origin, metadata, userProfile)
   const displayLogo = metadata?.logo || project.logoUrl || "";
   const displayDescription = metadata?.description || "";
   const userAvatar = userProfile?.avatar || "";
-  const userName = userProfile?.displayName || "Lumia Passport";
+  const userName = userProfile?.displayName || "Mbark Wallet";
   return {
     // Display
     displayName,
@@ -1363,7 +1363,7 @@ function buildSignTxTemplateData(project, origin, typedData, metadata, userProfi
   const metadataName = metadata?.name || project.name;
   const metadataLogo = metadata?.logo || project.logoUrl || "";
   const userAvatar = userProfile?.avatar || "";
-  const userName = userProfile?.displayName || "Lumia Passport";
+  const userName = userProfile?.displayName || "Mbark Wallet";
   const formatFieldValue = (value) => {
     if (Array.isArray(value)) {
       return `[${value.map((v) => formatFieldValue(v)).join(", ")}]`;
@@ -1478,7 +1478,7 @@ function buildConfirmTxTemplateData(project, origin, transaction, risk, metadata
   const displayName = metadata?.name || project.name;
   const displayLogo = metadata?.logo || project.logoUrl || "";
   const userAvatar = userProfile?.avatar || "";
-  const userName = userProfile?.displayName || "Lumia Passport";
+  const userName = userProfile?.displayName || "Mbark Wallet";
   const domainStatusClass = isVerifiedOrigin ? "verified" : "unverified";
   const domainStatusText = isVerifiedOrigin ? "\u2705" : "\u26A0\uFE0F";
   const fromAddressFull = transaction.userOpDetails?.sender || "";
@@ -2043,7 +2043,7 @@ var GoogleDriveProvider = class {
     return this.performUpload(metadata, content);
   }
   async uploadToAppFolder(fileName, content) {
-    const folderName = "Lumia Passport Backups";
+    const folderName = "Mbark Wallet Backups";
     const folderId = await this.findOrCreateFolder(folderName);
     const metadata = {
       name: fileName,
@@ -3236,16 +3236,7 @@ var RampnowOnrampAPI = class {
 };
 
 // src/lib/errors.ts
-var LumiaPassportError = class extends Error {
-  constructor(message, code) {
-    super(message);
-    this.code = code;
-    this.name = "LumiaPassportError";
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, this.constructor);
-    }
-  }
-};
+import { LumiaPassportError } from "@lumiapassport/core";
 var _UserRejectedError = class _UserRejectedError extends LumiaPassportError {
   constructor(message = "User rejected transaction") {
     super(message, _UserRejectedError.CODE);
@@ -4411,7 +4402,7 @@ var SigningManager = class extends TokenRefreshApiClient {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.16.9";
+var IFRAME_VERSION = "1.17.0";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));