@volr/react-ui 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,236 @@
+import React$1 from 'react';
+import { KeyStorageType, VolrConfig } from '@volr/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BrandingConfig {
+    component: React.ReactNode;
+    backgroundColor?: string;
+}
+
+/**
+ * UI 전용 설정을 포함한 Volr UI 구성 객체
+ * - VolrConfig(코어 설정)를 확장하고
+ * - UI/온보딩 관련 옵션을 모두 하나의 config 아래로 모읍니다.
+ */
+interface VolrUIConfig extends VolrConfig {
+    appName: string;
+    accentColor?: string;
+    enabledLoginMethods?: ("email" | "social" | "siwe")[];
+    socialProviders?: ("google" | "twitter" | "apple")[];
+    branding?: BrandingConfig;
+    keyStorageType: KeyStorageType;
+}
+interface VolrUIProviderProps {
+    config: VolrUIConfig;
+    children: React$1.ReactNode;
+}
+declare const useVolrUI: () => {
+    accentColor: string;
+    appName: string;
+    enabledLoginMethods?: ("email" | "social" | "siwe")[];
+    socialProviders?: ("google" | "twitter" | "apple")[];
+    branding?: BrandingConfig;
+    keyStorageType?: KeyStorageType;
+};
+declare const VolrUIProvider: React$1.FC<VolrUIProviderProps>;
+
+/**
+ * Passkey Enrollment View Component
+ * Modern passkey setup with device-specific biometric icons
+ */
+interface PasskeyEnrollViewProps {
+    onComplete: () => void;
+    onError?: (error: Error) => void;
+    onLogout?: () => void;
+    onClose?: () => void;
+    /** Whether the modal is open */
+    isOpen?: boolean;
+    /** Whether to wrap content in Modal component */
+    wrapInModal?: boolean;
+}
+declare function PasskeyEnrollView({ onComplete, onError, onLogout, onClose, isOpen, wrapInModal, }: PasskeyEnrollViewProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MPC Connect View Component
+ * MPC 연결 플로우: useMpcConnection hook 사용
+ */
+interface MpcConnectViewProps {
+    onComplete: () => void;
+    onError?: (error: Error) => void;
+    /** Whether the modal is open */
+    isOpen?: boolean;
+    /** Whether to wrap content in Modal component */
+    wrapInModal?: boolean;
+}
+declare function MpcConnectView({ onComplete, onError, isOpen, wrapInModal, }: MpcConnectViewProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * English translations
+ */
+declare const en: {
+    readonly common: {
+        readonly back: "Back";
+        readonly loading: "Loading...";
+    };
+    readonly login: {
+        readonly title: "Sign in";
+        readonly description: "Choose your preferred sign-in method";
+        readonly or: "or";
+        readonly poweredBy: "Powered by Volr";
+        readonly terms: "By continuing, you agree to our Terms of Service and Privacy Policy";
+        readonly email: {
+            readonly title: "Sign in with email";
+            readonly description: "Enter your email to receive a verification code";
+            readonly label: "Email Login";
+            readonly emailLabel: "Email address";
+            readonly placeholder: "Enter Email";
+            readonly sendCode: "Send verification code";
+            readonly codeLabel: "6-digit verification code";
+            readonly codePlaceholder: "000000";
+            readonly verifyTitle: "Enter verification code";
+            readonly verifyDescription: "We sent a code to";
+            readonly resend: "Resend code";
+            readonly submit: "Verify";
+        };
+        readonly social: {
+            readonly google: "Sign in with Google";
+            readonly twitter: "Sign in with Twitter";
+            readonly apple: "Sign in with Apple";
+        };
+        readonly wallet: {
+            readonly title: "Sign in with wallet";
+            readonly signDescription: "Sign the message to verify your wallet";
+            readonly connected: "Connected";
+            readonly connect: "Connect wallet";
+            readonly sign: "Sign message";
+            readonly label: "Wallet Login";
+        };
+    };
+    readonly passkey: {
+        readonly touchId: "Use Touch ID to create your passkey";
+        readonly faceId: "Use Face ID to create your passkey";
+        readonly fingerprint: "Use your fingerprint to create your passkey";
+        readonly biometric: "Use biometric authentication to create your passkey";
+        readonly creating: "Creating your secure passkey...";
+        readonly encrypting: "Encrypting your wallet...";
+        readonly uploading: "Uploading encrypted data...";
+        readonly registering: "Registering wallet provider...";
+        readonly start: "Create passkey";
+        readonly logout: "Logout";
+        readonly errors: {
+            readonly cancelled: "Passkey creation was cancelled. Please try again.";
+            readonly alreadyExists: "A passkey already exists for this account.";
+            readonly notSupported: "Your device doesn't support passkeys.";
+            readonly generic: "Failed to create passkey. Please try again.";
+        };
+    };
+    readonly success: {
+        readonly title: "Success!";
+        readonly message: "You're all set. Redirecting...";
+    };
+    readonly deposit: {
+        readonly selectTitle: "Select asset to deposit";
+        readonly qrTitle: "Deposit";
+        readonly scanInstruction: "Scan QR code to deposit";
+        readonly yourAddress: "Your deposit address";
+        readonly copy: "Copy address";
+        readonly copied: "Copied!";
+        readonly listening: "Waiting for deposit...";
+        readonly detected: "Deposit confirmed!";
+        readonly completed: "Deposit completed";
+        readonly completedDescription: "Your deposit has been credited to your account.";
+        readonly amount: "Amount";
+        readonly previousBalance: "Previous balance";
+        readonly newBalance: "New balance";
+        readonly seeMore: "See more";
+        readonly seeLess: "See less";
+        readonly noAssets: "No deposit assets configured.";
+        readonly otherToken: "Deposit with another token";
+        readonly noToken: "Don't have this token?";
+        readonly getOtherToken: "Deposit with another token";
+    };
+    readonly errors: {
+        readonly webauthnNotSupported: "WebAuthn API is not supported";
+        readonly passkeyCreationFailed: "Failed to create passkey";
+        readonly passkeyCreationError: "An error occurred while creating passkey";
+        readonly emailLoginFailed: "Email login failed";
+        readonly socialLoginFailed: "Social login failed";
+        readonly walletConnectionFailed: "Wallet connection failed";
+        readonly passkeySetupFailed: "Passkey setup failed";
+    };
+};
+
+/**
+ * i18n types and utilities
+ */
+
+type Locale = 'en' | 'ko';
+type DeepStringify<T> = T extends string ? string : T extends object ? {
+    readonly [K in keyof T]: DeepStringify<T[K]>;
+} : T;
+type Translations = DeepStringify<typeof en>;
+
+interface I18nContextValue {
+    locale: Locale;
+    translations: Translations;
+    t: (key: string) => string;
+    setLocale: (locale: Locale) => void;
+}
+declare const I18nContext: React$1.Context<I18nContextValue | null>;
+/**
+ * Hook to access i18n context
+ */
+declare function useI18n(): I18nContextValue;
+/**
+ * I18n Provider component
+ */
+interface I18nProviderProps {
+    children: React$1.ReactNode;
+}
+declare function I18nProvider({ children }: I18nProviderProps): react_jsx_runtime.JSX.Element;
+declare const useTranslation: typeof useI18n;
+
+type ModalMode = "auth" | "deposit";
+interface VolrModalContextValue {
+    isOpen: boolean;
+    mode: ModalMode;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+declare const useVolrModal: () => VolrModalContextValue;
+
+/**
+ * @deprecated Use NetworkWalletConfig instead
+ * Legacy interface for wallet_addEthereumChain (converted from API response)
+ */
+interface NetworkConfig {
+    chainId: number;
+    chainName: string;
+    nativeCurrency: {
+        name: string;
+        symbol: string;
+        decimals: number;
+    };
+    rpcUrls: string[];
+    blockExplorerUrls?: string[];
+}
+/**
+ * Hook to switch to a different network
+ * Handles both switching and adding network if not present
+ * Fetches network configuration from backend DB
+ */
+declare function useSwitchNetwork(): (chainId: number) => Promise<void>;
+/**
+ * @deprecated Use useSwitchNetwork hook instead
+ * Switch to a different network (legacy function, requires client parameter)
+ */
+declare function switchNetwork(chainId: number, client: {
+    get: <T>(url: string) => Promise<T>;
+}): Promise<void>;
+/**
+ * Get current chain ID from wallet
+ */
+declare function getCurrentChainId(): Promise<number>;
+
+export { I18nContext, type I18nContextValue, I18nProvider, type I18nProviderProps, type Locale, MpcConnectView, type MpcConnectViewProps, type NetworkConfig, PasskeyEnrollView, type PasskeyEnrollViewProps, type Translations, type VolrUIConfig, VolrUIProvider, type VolrUIProviderProps, getCurrentChainId, switchNetwork, useI18n, useSwitchNetwork, useTranslation, useVolrModal, useVolrUI };

package/dist/index.d.ts

@@ -0,0 +1,236 @@
+import React$1 from 'react';
+import { KeyStorageType, VolrConfig } from '@volr/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BrandingConfig {
+    component: React.ReactNode;
+    backgroundColor?: string;
+}
+
+/**
+ * UI 전용 설정을 포함한 Volr UI 구성 객체
+ * - VolrConfig(코어 설정)를 확장하고
+ * - UI/온보딩 관련 옵션을 모두 하나의 config 아래로 모읍니다.
+ */
+interface VolrUIConfig extends VolrConfig {
+    appName: string;
+    accentColor?: string;
+    enabledLoginMethods?: ("email" | "social" | "siwe")[];
+    socialProviders?: ("google" | "twitter" | "apple")[];
+    branding?: BrandingConfig;
+    keyStorageType: KeyStorageType;
+}
+interface VolrUIProviderProps {
+    config: VolrUIConfig;
+    children: React$1.ReactNode;
+}
+declare const useVolrUI: () => {
+    accentColor: string;
+    appName: string;
+    enabledLoginMethods?: ("email" | "social" | "siwe")[];
+    socialProviders?: ("google" | "twitter" | "apple")[];
+    branding?: BrandingConfig;
+    keyStorageType?: KeyStorageType;
+};
+declare const VolrUIProvider: React$1.FC<VolrUIProviderProps>;
+
+/**
+ * Passkey Enrollment View Component
+ * Modern passkey setup with device-specific biometric icons
+ */
+interface PasskeyEnrollViewProps {
+    onComplete: () => void;
+    onError?: (error: Error) => void;
+    onLogout?: () => void;
+    onClose?: () => void;
+    /** Whether the modal is open */
+    isOpen?: boolean;
+    /** Whether to wrap content in Modal component */
+    wrapInModal?: boolean;
+}
+declare function PasskeyEnrollView({ onComplete, onError, onLogout, onClose, isOpen, wrapInModal, }: PasskeyEnrollViewProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MPC Connect View Component
+ * MPC 연결 플로우: useMpcConnection hook 사용
+ */
+interface MpcConnectViewProps {
+    onComplete: () => void;
+    onError?: (error: Error) => void;
+    /** Whether the modal is open */
+    isOpen?: boolean;
+    /** Whether to wrap content in Modal component */
+    wrapInModal?: boolean;
+}
+declare function MpcConnectView({ onComplete, onError, isOpen, wrapInModal, }: MpcConnectViewProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * English translations
+ */
+declare const en: {
+    readonly common: {
+        readonly back: "Back";
+        readonly loading: "Loading...";
+    };
+    readonly login: {
+        readonly title: "Sign in";
+        readonly description: "Choose your preferred sign-in method";
+        readonly or: "or";
+        readonly poweredBy: "Powered by Volr";
+        readonly terms: "By continuing, you agree to our Terms of Service and Privacy Policy";
+        readonly email: {
+            readonly title: "Sign in with email";
+            readonly description: "Enter your email to receive a verification code";
+            readonly label: "Email Login";
+            readonly emailLabel: "Email address";
+            readonly placeholder: "Enter Email";
+            readonly sendCode: "Send verification code";
+            readonly codeLabel: "6-digit verification code";
+            readonly codePlaceholder: "000000";
+            readonly verifyTitle: "Enter verification code";
+            readonly verifyDescription: "We sent a code to";
+            readonly resend: "Resend code";
+            readonly submit: "Verify";
+        };
+        readonly social: {
+            readonly google: "Sign in with Google";
+            readonly twitter: "Sign in with Twitter";
+            readonly apple: "Sign in with Apple";
+        };
+        readonly wallet: {
+            readonly title: "Sign in with wallet";
+            readonly signDescription: "Sign the message to verify your wallet";
+            readonly connected: "Connected";
+            readonly connect: "Connect wallet";
+            readonly sign: "Sign message";
+            readonly label: "Wallet Login";
+        };
+    };
+    readonly passkey: {
+        readonly touchId: "Use Touch ID to create your passkey";
+        readonly faceId: "Use Face ID to create your passkey";
+        readonly fingerprint: "Use your fingerprint to create your passkey";
+        readonly biometric: "Use biometric authentication to create your passkey";
+        readonly creating: "Creating your secure passkey...";
+        readonly encrypting: "Encrypting your wallet...";
+        readonly uploading: "Uploading encrypted data...";
+        readonly registering: "Registering wallet provider...";
+        readonly start: "Create passkey";
+        readonly logout: "Logout";
+        readonly errors: {
+            readonly cancelled: "Passkey creation was cancelled. Please try again.";
+            readonly alreadyExists: "A passkey already exists for this account.";
+            readonly notSupported: "Your device doesn't support passkeys.";
+            readonly generic: "Failed to create passkey. Please try again.";
+        };
+    };
+    readonly success: {
+        readonly title: "Success!";
+        readonly message: "You're all set. Redirecting...";
+    };
+    readonly deposit: {
+        readonly selectTitle: "Select asset to deposit";
+        readonly qrTitle: "Deposit";
+        readonly scanInstruction: "Scan QR code to deposit";
+        readonly yourAddress: "Your deposit address";
+        readonly copy: "Copy address";
+        readonly copied: "Copied!";
+        readonly listening: "Waiting for deposit...";
+        readonly detected: "Deposit confirmed!";
+        readonly completed: "Deposit completed";
+        readonly completedDescription: "Your deposit has been credited to your account.";
+        readonly amount: "Amount";
+        readonly previousBalance: "Previous balance";
+        readonly newBalance: "New balance";
+        readonly seeMore: "See more";
+        readonly seeLess: "See less";
+        readonly noAssets: "No deposit assets configured.";
+        readonly otherToken: "Deposit with another token";
+        readonly noToken: "Don't have this token?";
+        readonly getOtherToken: "Deposit with another token";
+    };
+    readonly errors: {
+        readonly webauthnNotSupported: "WebAuthn API is not supported";
+        readonly passkeyCreationFailed: "Failed to create passkey";
+        readonly passkeyCreationError: "An error occurred while creating passkey";
+        readonly emailLoginFailed: "Email login failed";
+        readonly socialLoginFailed: "Social login failed";
+        readonly walletConnectionFailed: "Wallet connection failed";
+        readonly passkeySetupFailed: "Passkey setup failed";
+    };
+};
+
+/**
+ * i18n types and utilities
+ */
+
+type Locale = 'en' | 'ko';
+type DeepStringify<T> = T extends string ? string : T extends object ? {
+    readonly [K in keyof T]: DeepStringify<T[K]>;
+} : T;
+type Translations = DeepStringify<typeof en>;
+
+interface I18nContextValue {
+    locale: Locale;
+    translations: Translations;
+    t: (key: string) => string;
+    setLocale: (locale: Locale) => void;
+}
+declare const I18nContext: React$1.Context<I18nContextValue | null>;
+/**
+ * Hook to access i18n context
+ */
+declare function useI18n(): I18nContextValue;
+/**
+ * I18n Provider component
+ */
+interface I18nProviderProps {
+    children: React$1.ReactNode;
+}
+declare function I18nProvider({ children }: I18nProviderProps): react_jsx_runtime.JSX.Element;
+declare const useTranslation: typeof useI18n;
+
+type ModalMode = "auth" | "deposit";
+interface VolrModalContextValue {
+    isOpen: boolean;
+    mode: ModalMode;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+declare const useVolrModal: () => VolrModalContextValue;
+
+/**
+ * @deprecated Use NetworkWalletConfig instead
+ * Legacy interface for wallet_addEthereumChain (converted from API response)
+ */
+interface NetworkConfig {
+    chainId: number;
+    chainName: string;
+    nativeCurrency: {
+        name: string;
+        symbol: string;
+        decimals: number;
+    };
+    rpcUrls: string[];
+    blockExplorerUrls?: string[];
+}
+/**
+ * Hook to switch to a different network
+ * Handles both switching and adding network if not present
+ * Fetches network configuration from backend DB
+ */
+declare function useSwitchNetwork(): (chainId: number) => Promise<void>;
+/**
+ * @deprecated Use useSwitchNetwork hook instead
+ * Switch to a different network (legacy function, requires client parameter)
+ */
+declare function switchNetwork(chainId: number, client: {
+    get: <T>(url: string) => Promise<T>;
+}): Promise<void>;
+/**
+ * Get current chain ID from wallet
+ */
+declare function getCurrentChainId(): Promise<number>;
+
+export { I18nContext, type I18nContextValue, I18nProvider, type I18nProviderProps, type Locale, MpcConnectView, type MpcConnectViewProps, type NetworkConfig, PasskeyEnrollView, type PasskeyEnrollViewProps, type Translations, type VolrUIConfig, VolrUIProvider, type VolrUIProviderProps, getCurrentChainId, switchNetwork, useI18n, useSwitchNetwork, useTranslation, useVolrModal, useVolrUI };