@embarkai/ui-kit 0.1.4 → 0.1.5

package/README.md

@@ -39,9 +39,11 @@ export const queryClient = new QueryClient({
 
 ### 2. I18n config (Required) & typing (Optional)
 
-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.
+i18next lib must be initiated for both UIKIT & your app (namespace concept used to manage translations), so your app's language can be switched by UIKIT'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.
+There is no need to provide any translations for UIKIT ( 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.
+
+> **NOTE** If you don't need multi-language support inside your Dapp go to step 3 from here providing combineI18NResources() call with no params
 
 First, create the following folder structure for your dapp's translations (or update existant, if needed):
 
@@ -95,7 +97,7 @@ export const YOUR_APP_TRANSLATION_RESOURSES = {
 } as const
 ```
 
-> **Note:** If you don't need to translate your app then leave YOUR_APP_TRANSLATION_RESOURSES empty with no locales folder.
+> **Note:** If you don't need multi-language support inside your Dapp leave YOUR_APP_TRANSLATION_RESOURSES empty for now
 
 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
 
@@ -120,66 +122,64 @@ declare module 'i18next' {
 import { useTranslation } from 'react-i18next'
 
 export function useT() {
-  return useTranslation('app') // this will make t-method typed accordingly
+  return useTranslation('app') // this will make t-method accordingly typed by locale
 }
 ```
 
 ```tsx
-import {
-  combineI18NResources,
-  LOCAL_STORAGE_I18N_KEY,
-  //
-  Provider,
-  RainbowKitProvider,
-  SessionProvider
-} from '@embarkai/ui-kit'
+import { combineI18NResources, LOCAL_STORAGE_I18N_KEY, Provider } from '@embarkai/ui-kit'
 //
 import i18n from 'i18next'
-import { initReactI18next, useTranslation } from 'react-i18next'
+import { initReactI18next } from 'react-i18next'
 
 import { YOUR_APP_TRANSLATION_RESOURSES } from './i18n'
 import { queryClient } from './queryClient'
+import { useT } from './useTranslation'
 
 i18n.use(initReactI18next).init({
-  resources: combineI18NResources(YOUR_APP_TRANSLATION_RESOURSES),
-  lng: localStorage.getItem(LOCAL_STORAGE_I18N_KEY) || 'en', // passport saves language setup on change
+  resources: combineI18NResources(YOUR_APP_TRANSLATION_RESOURSES), // combineI18NResources() call with no params to skip milti-lang inside dapp
+  lng: localStorage.getItem(LOCAL_STORAGE_I18N_KEY) || 'en', // persisted locale
   fallbackLng: 'en', // default
   defaultNS: 'app', // your app i18n-namespace, example: app
   namespace: 'app', // your app i18n-namespace, example: app
   debug: false
 })
 
-function Root() {
+function YourDapp() {
   const { t } = useT()
 
+  return (
+    <>
+      <header>
+        <h1>{t('common.appname')}</h1>
+      </header>
+
+      <main>
+        <span>{t('page1.title')}</span>
+      </main>
+    </>
+  )
+}
+
+function Root() {
   return (
     <QueryClientProvider client={queryClient}>
       <Provider
         projectId="your-project-id" // Get from EmbarkAI Dashboard
       >
-        <RainbowKitProvider>
-          <SessionProvider>
-            <header>
-              <h1>{t('common.appname')}</h1>
-            </header>
-
-            <main>
-              <span>{t('page1.title')}</span>
-            </main>
-          </SessionProvider>
-        </RainbowKitProvider>
+        <YourDapp />
       </Provider>
     </QueryClientProvider>
   )
 }
 ```
 
-### 4. Add the Connect Button
+### 4. Add the ConnectWalletButton
 
 ```tsx
 import { ConnectWalletButton } from '@embarkai/ui-kit'
 
-function YourApp() {
+function YourDappComponent() {
   const { t } = useT()
 
   return (
@@ -228,11 +228,11 @@ That's it! The `ConnectWalletButton` provides a complete authentication UI with
   projectId="your-project-id" // Required
   initialConfig={{
     network: {
-      name: 'Lumia Beam',
-      symbol: 'LUMIA',
-      chainId: 2030232745, // Default chain for your dApp
-      rpcUrl: 'https://beam-rpc.lumia.org',
-      explorerUrl: 'https://beam-explorer.lumia.org',
+      name: 'BSC Testnet',
+      symbol: 'BNB',
+      chainId: 97, // Default chain for your dApp
+      rpcUrl: "https://bnb-testnet.g.alchemy.com/v2/8WLaZS09KaoheJmGa4sXA",
+      explorerUrl: "https://testnet.bscscan.com",
       testnet: true,
       forceChain: false
     },
@@ -244,11 +244,10 @@ That's it! The `ConnectWalletButton` provides a complete authentication UI with
 
 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** - BSC
-
-This ensures returning users keep their preferred chain while new users start on your configured network.
+1. **dApp config `network.forceChain` = true && `network.chainId` provided** - Your configured default chain will be forced inside your Dapp with no chain selector available
+2. **User's explicit selection** - If user manually switched chains in the UI, their choice is preserved (stored in localStorage)
+3. **dApp config `network.chainId`** - Preferred chainId. If no forceChain flag provided SwitchChainChange ux pops whenever user is not on preferred chainID
+4. **SDK default** - BSC
 
 ### Advanced Configuration
 
@@ -263,14 +262,11 @@ This ensures returning users keep their preferred chain while new users start on
       title: 'Welcome to MyApp',
       subtitle: 'Sign in to continue',
 
-      dialogClassName: 'string', // beta
+      dialogClassName: 'string',
 
-      authOrder: ['email', 'passkey', 'social'],
+      useExternalIcons: false, // each social configured auth provider can be supllied by custom icons, flag forces to use provided icons via config, otherwise default icons is used
 
-      branding: {
-        tagline: 'Powered by MPC',
-        link: { text: 'Learn More', url: \'https\:\/\/example.com/docs\' },
-      },
+      authOrder: ['email', 'passkey', 'social'],
     },
 
     // Authentication providers
@@ -288,8 +284,8 @@ This ensures returning users keep their preferred chain while new users start on
     social: {
       enabled: true,
       providers: [
-        { id: 'Discord', name: 'Discord', enabled: true, comingSoon: false },
-        { id: 'telegram', name: 'Telegram', enabled: true, comingSoon: false },
+        { id: 'Discord', name: 'Discord', enabled: true, comingSoon: false, icon: 'ReactIconComponent' },
+        { id: 'telegram', name: 'Telegram', enabled: true, comingSoon: false, icon: 'ReactIconComponent' },
       ],
     },
     wallet: {
@@ -324,39 +320,39 @@ This ensures returning users keep their preferred chain while new users start on
     // Network configuration
     // chainId sets default chain for new users (see "Network Chain Priority" above)
     network: {
-      name: 'Lumia Beam',
-      symbol: 'LUMIA',
-      chainId: 2030232745, // Your dApp's default chain
-      rpcUrl: 'https\:\/\/beam-rpc.lumia.org',
-      explorerUrl: 'https\:\/\/beam-explorer.lumia.org',
-      testnet: true,
-      forceChain: false, // if true, passport is immediatly forced to switch itto provided chainId, chain selector via SeetingsMenu becomes anavailable
-    },
+      "name": "BSC Testnet",
+      "symbol": "BNB",
+      "chainId": 97, // Your dApp's default chain
+      "rpcUrl": "https\:\/\/bnb-testnet.g.alchemy.com/v2/8WLaZS09KaoheJmGa4sXA",
+      "explorerUrl": "https\:\/\/testnet.bscscan.com",
+      "testnet": true,
+      "forceChain": false // if true, UIKIT is immediatly forced to switch into provided chainId, chain selector via SeetingsMenu becomes anavailable
+    }
   }}
   callbacks={{
     onConnecting: ({ method, provider }) => {
-      console.log('Connecting with:', method, provider);
+      console.info('Connecting with:', method, provider);
     },
     onConnect: ({ address, session }) => {
-      console.log('Connected:', address);
+      console.info('Connected:', address, session);
     },
     onAccount: ({ userId, address, session, hasKeyshare }) => {
-      console.log('Account ready:', userId);
+      console.info('Account ready:', userId);
     },
     onAccountUpdate: ({ providers }) => {
-      console.log('Profile updated:', providers);
+      console.info('Profile updated:', providers);
     },
     onDisconnect: ({ address, userId }) => {
-      console.log('Disconnected:', address);
+      console.info('Disconnected:', address);
     },
     onError: ({ error, message }) => {
       console.error('Error:', message);
     },
     onWalletReady: (status) => {
-      console.log('Wallet ready:', status.ready);
+      console.info('Wallet ready:', status.ready);
     },
     onChainChange: ({ chainId, previousChainId }) => {
-      console.log('Chain Changed:', { previousChainId, chainId })
+      console.info('Chain Changed:', { previousChainId, chainId })
     },
   }}
 >
@@ -556,7 +552,7 @@ function SignatureExample() {
         domain: {
           name: 'MyDApp', // Your dApp name (must match contract)
           version: '1', // Contract version
-          chainId: 994, // Lumia Prism Testnet
+          chainId: 994,
           verifyingContract: '0x...' // Your contract address (REQUIRED in production!)
         },
         types: {
@@ -684,7 +680,7 @@ import { getUserOperationReceipt, sendUserOperationRaw } from '@embarkai/core'
 import { getChainConfig } from '@embarkai/core/read'
 import { recoverAddress } from 'viem'
 
-const CHAIN_ID = 2030232745 // Lumia Testnet
+const CHAIN_ID = 2030232745
 
 // Get chain config for bundler URL
 const chainConfig = getChainConfig(CHAIN_ID)
@@ -731,13 +727,6 @@ return {
 }
 ```
 
-**Network Configuration:**
-
-| Network               | Chain ID   | Bundler URL                                 |
-| --------------------- | ---------- | ------------------------------------------- |
-| Lumia Testnet (Beam)  | 2030232745 | https://api.lumiapassport.com/rundler       |
-| Lumia Mainnet (Prism) | 994873017  | https://api.lumiapassport.com/rundler-prism |
-
 ### useOpenPage - Programmatic EmbarkAI Dialog Control
 
 Control the EmbarkAI dialog programmatically.
@@ -751,7 +740,7 @@ function CustomAuthButton() {
   return (
     <div>
       <button onClick={() => openEmbarkAI(PageKey.AUTH)}>Sign In</button>
-      <button onClick={() => openEmbarkAI(PageKey.RECEIVE)}>Receive LUMIA</button>
+      <button onClick={() => openEmbarkAI(PageKey.RECEIVE)}>Receive CRYPTO</button>
 
       <button onClick={close}>Close Dialog</button>
     </div>
@@ -780,11 +769,7 @@ function AppHeader() {
 
 ### Email OTP
 
-Users receive a one-time code via email.
-
-```tsx
-// Configured by default, no additional setup needed
-```
+Configured by default, no additional setup needed
 
 ### Passkey (WebAuthn)
 
@@ -813,29 +798,24 @@ initialConfig={{
 
 ### External Wallet
 
-Connect existing wallets (MetaMask, WalletConnect, etc.).
-
-```tsx
-// Configured by default
-// Uses RainbowKit for wallet connections
-```
+...to be updated
 
 ## Styling
 
-### Passport Dialog Window
+### UIKIT Dialog Window
 
-Global Passport window view can be redefined via config prop by providing specific dialogClassName.
+Global UIKIT window view can be redefined via config prop - dialogClassName.
 
 > **Note** Providing "dialogClassName" will disable default dialog window styles
 
 ```css
-.passport-dialog-classname {
+.uikit-dialog-classname {
   background-color: rgba(14, 14, 14, 0.7);
   backdrop-filter: blur(10px);
 
   box-shadow:
     0 0 8px rgba(14, 14, 14, 0.1),
-    inset 0 0 0 1px var(--account-abstraction-bd);
+    inset 0 0 0 1px var(--embark-ui-bd);
 }
 ```
 
@@ -848,16 +828,16 @@ import 'index.css'
     ...
     ui: {
       ...
-      dialogClassName: 'passport-dialog-classname',
+      dialogClassName: 'uikit-dialog-classname',
       ...
     },
     ...
   }}/>
 ```
 
-### Passport styles
+### CSSV styles & Dark/Light modes
 
-Passport provides global hook for Light/Dark modes - useColorMode - use it within yor application instead of any local mode declaration.
+UIKIT provides global hook for Light/Dark modes - useColorMode - use it within yor application instead of any local mode declaration.
 
 ```tsx
 import { useColorMode } from '@embarkai/ui-kit'
@@ -875,62 +855,62 @@ function YourAnyComponent() {
 }
 ```
 
-Passport styles are possible to match with your project via css-variables set (use separate for dark & light).
+UIKIT styles are possible to match with your project via css-variables set (use separate for dark & light).
 Values will be automatically applied according to selected colorMode.
 The simpliest way to customize cssv is via app index.css file:
 
 ```css
-.account-abstraction-ui-scope[data-current-theme-mode='light'],
-.account-abstraction-ui-scope[data-current-theme-mode='dark'] {
+.embarkai-ui-scope[data-current-theme-mode='light'],
+.embarkai-ui-scope[data-current-theme-mode='dark'] {
   /* fixed cssv */
-  --account-abstraction-maw: 384px;
-  --account-abstraction-pd: 12px;
-  --account-abstraction-gap: 10px;
-  --account-abstraction-bdrs: 20px;
-  --account-abstraction-element-bdrs: 10px;
+  --embark-ui-maw: 384px;
+  --embark-ui-pd: 12px;
+  --embark-ui-gap: 10px;
+  --embark-ui-bdrs: 20px;
+  --embark-ui-element-bdrs: 10px;
 
   /** overlay */
-  --account-abstraction-overlay: rgba(255, 255, 255, 0.8);
-  --account-abstraction-backdrop-blur: 10px;
+  --embark-ui-overlay: rgba(255, 255, 255, 0.8);
+  --embark-ui-backdrop-blur: 10px;
 
   /** surface backgrounds */
-  --account-abstraction-bg: #ffffff;
+  --embark-ui-bg: #ffffff;
 
   /** text */
-  --account-abstraction-fg: #000000;
-  --account-abstraction-fg-h: rgba(0, 0, 0, 0.6);
-  --account-abstraction-fg-a: rgba(0, 0, 0, 0.4);
-  --account-abstraction-fg-inverted: #ffffff;
-  --account-abstraction-fg-muted: rgba(0, 0, 0, 0.6);
+  --embark-ui-fg: #000000;
+  --embark-ui-fg-h: rgba(0, 0, 0, 0.6);
+  --embark-ui-fg-a: rgba(0, 0, 0, 0.4);
+  --embark-ui-fg-inverted: #ffffff;
+  --embark-ui-fg-muted: rgba(0, 0, 0, 0.6);
 
   /** backgrounds i.e. buttons bg etc */
-  --account-abstraction-primary: #000000;
-  --account-abstraction-primary-h: rgba(0, 0, 0, 0.8);
-  --account-abstraction-primary-a: rgba(0, 0, 0, 0.6);
+  --embark-ui-primary: #000000;
+  --embark-ui-primary-h: rgba(0, 0, 0, 0.8);
+  --embark-ui-primary-a: rgba(0, 0, 0, 0.6);
 
-  --account-abstraction-secondary: #e4e4e4;
-  --account-abstraction-secondary-h: rgba(228, 228, 228, 0.8);
-  --account-abstraction-secondary-a: rgba(228, 228, 228, 0.6);
+  --embark-ui-secondary: #e4e4e4;
+  --embark-ui-secondary-h: rgba(228, 228, 228, 0.8);
+  --embark-ui-secondary-a: rgba(228, 228, 228, 0.6);
 
   /** borders */
-  --account-abstraction-bd: #ebebeb;
-  --account-abstraction-bd-intense: rgb(169, 169, 169);
+  --embark-ui-bd: #ebebeb;
+  --embark-ui-bd-intense: rgb(169, 169, 169);
 
   /** shadows */
-  --account-abstraction-shadow-c: rgba(0, 0, 0, 0.1);
+  --embark-ui-shadow-c: rgba(0, 0, 0, 0.1);
 
   /** highlight colors */
-  --account-abstraction-info: #000000;
-  --account-abstraction-bg-info: #e4e4e4;
+  --embark-ui-info: #000000;
+  --embark-ui-bg-info: #e4e4e4;
 
-  --account-abstraction-success: #000000;
-  --account-abstraction-bg-success: #21ff51;
+  --embark-ui-success: #000000;
+  --embark-ui-bg-success: #21ff51;
 
-  --account-abstraction-warning: #000000;
-  --account-abstraction-bg-warning: #e9fa00;
+  --embark-ui-warning: #000000;
+  --embark-ui-bg-warning: #e9fa00;
 
-  --account-abstraction-error: #ffffff;
-  --account-abstraction-bg-error: #d6204e;
+  --embark-ui-error: #ffffff;
+  --embark-ui-bg-error: #d6204e;
 }
 ```
 
@@ -947,8 +927,6 @@ import type { AuthProvider, ProviderConfig, User, WalletInfo } from '@embarkai/u
 Check out the `/examples` directory for complete working examples:
 
 - **React + Vite** - Modern React setup with Vite
-- **Next.js** - Next.js App Router integration
-- **React + TypeScript** - Full TypeScript example
 
 ## Security
 
@@ -957,19 +935,10 @@ Check out the `/examples` directory for complete working examples:
 - 🔐 **No Private Key Exposure** - Private keys never exist in complete form on client
 - ✅ **Non-custodial** - Users maintain full control of their accounts
 
-## Need Help?
-
-- 📖 [Documentation](https://docs.lumiapassport.com)
-- 💬 [Discord Community](https://discord.gg/lumia)
-- 🐛 [Report Issues](https://github.com/lumiachain/lumia-passport-sdk/issues)
-- 📧 [Email Support](mailto:support@lumia.org)
-
 ## License
 
 MIT License - see LICENSE file for details.
 
 ## Links
 
-- [Website](https://lumiapassport.com)
-- [GitHub](https://github.com/lumiachain/lumia-passport-sdk)
 - [NPM Package](https://www.npmjs.com/package/@embarkai/ui-kit)

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>EmbarkAI Secure Wallet - iframe version 0.1.4</title>
+    <title>EmbarkAI Secure Wallet - iframe version 0.1.5</title>
 
     <!-- Styles will be injected by build process -->
     <style>