@tuwaio/nova-transactions 0.0.27 → 0.1.1

package/README.md

@@ -10,48 +10,69 @@ The official React UI component library for the Pulsar transaction engine. It pr
 
 ## 🏛️ Architecture
 
-This package provides the **View Layer** for TUWA's transaction tracking ecosystem. It works by consuming the state from your headless Pulsar store and rendering the appropriate UI. You must connect your Pulsar store's state and actions to the `<NovaProvider />` component, which acts as a self-contained UI manager that renders modals and toasts.
+This package provides the **View Layer** for TUWA's transaction tracking ecosystem. It works by consuming the state from your headless Pulsar store and rendering the appropriate UI. You must connect your Pulsar store's state and actions to the `<NovaTransactionsProvider />` component, which acts as a self-contained UI manager that renders modals and toasts.
 
 ---
 
 ## ✨ Core Features
 
--   **🧩 Pre-built UI Suite:** A set of accessible components including `TrackingTxModal`, `WalletInfoModal`, and `ToastTransaction`, all managed internally by the `NovaProvider`.
+-   **🧩 Pre-built UI Suite:** A set of accessible components including `TrackingTxModal`, `TransactionsInfoModal`, and `ToastTransaction`, all managed internally by the `NovaTransactionsProvider`.
 -   **🔌 Plug-and-Play Integration:** Once connected to your Pulsar store, the UI automatically reacts to all transaction state changes.
--   **🌐 Internationalization (i18n):** Built-in support for multiple languages with easy overrides for all text content via the `labels` prop.
+-   **🌐 Internationalization (custom version of i18n):** Built-in support for multiple languages with easy overrides for all text content via the `labels` prop.
 -   **🎨 Highly Customizable:** Styled with `@tuwaio/nova-core` to be easily themed using CSS variables. Almost every sub-component can be replaced with your own implementation via the `customization` prop.
 
 ---
 
 ## 💾 Installation
 
-First, install all required packages for the Pulsar & Nova stack.
+### Basic Installation
 
-Next, you need to install a peer dependencies that `nova-transactions` relies on for UI rendering.
+Install the main package:
+```bash
+pnpm add @tuwaio/nova-transactions
+```
+### Peer Dependencies
 
+This package requires several peer dependencies for UI rendering:
 ```bash
-# Using pnpm
-pnpm add react-toastify framer-motion @radix-ui/react-dialog @heroicons/react @bgd-labs/react-web3-icons @tuwaio/pulsar-core @tuwaio/nova-core dayjs ethereum-blockies-base64 react immer zustand clsx tailwind-merge
+# Core dependencies
+pnpm add @tuwaio/nova-core @tuwaio/pulsar-core @tuwaio/orbit-core
+
+# React ecosystem
+pnpm add react react-dom zustand immer
+
+# UI libraries
+pnpm add framer-motion @radix-ui/react-dialog @heroicons/react
+pnpm add react-toastify @bgd-labs/react-web3-icons
+
+# Utilities
+pnpm add dayjs clsx tailwind-merge
+```
+
+### Complete Installation (All Packages)
+
+For a complete setup with all TUWA packages:
+```bash
+# Using pnpm (recommended)
+pnpm add @tuwaio/nova-transactions @tuwaio/nova-core @tuwaio/pulsar-core @tuwaio/orbit-core react-toastify framer-motion @radix-ui/react-dialog @heroicons/react @bgd-labs/react-web3-icons dayjs react immer zustand clsx tailwind-merge
 
 # Using npm
-npm install react-toastify framer-motion @radix-ui/react-dialog @heroicons/react @bgd-labs/react-web3-icons @tuwaio/pulsar-core @tuwaio/nova-core dayjs ethereum-blockies-base64 react immer zustand clsx tailwind-merge
+npm install @tuwaio/nova-transactions @tuwaio/nova-core @tuwaio/pulsar-core @tuwaio/orbit-core react-toastify framer-motion @radix-ui/react-dialog @heroicons/react @bgd-labs/react-web3-icons dayjs react immer zustand clsx tailwind-merge
 
 # Using yarn
-yarn add react-toastify framer-motion @radix-ui/react-dialog @heroicons/react @bgd-labs/react-web3-icons @tuwaio/pulsar-core @tuwaio/nova-core dayjs ethereum-blockies-base64 react immer zustand clsx tailwind-merge
-````
-
------
+yarn add @tuwaio/nova-transactions @tuwaio/nova-core @tuwaio/pulsar-core @tuwaio/orbit-core react-toastify framer-motion @radix-ui/react-dialog @heroicons/react @bgd-labs/react-web3-icons dayjs react immer zustand clsx tailwind-merge
+```
+---
 
 ## 🚀 Getting Started
 
-To use this library, you must render the `<NovaProvider />` component at a high level in your application and pass the state and actions from your Pulsar store to it as props.
+To use this library, you must render the `<NovaTransactionsProvider />` component at a high level in your application and pass the state and actions from your Pulsar store to it as props.
 
 Here is a complete example of a `src/providers/index.tsx` file that configures the entire system.
 
+### 1. Create Transaction Store
 ```tsx
 // src/hooks/txTrackingHooks.tsx
-'use client';
-
 import { createBoundedUseStore, createPulsarStore } from '@tuwaio/pulsar-core';
 import { evmAdapter } from '@tuwaio/pulsar-evm';
 
@@ -64,62 +85,61 @@ export enum TxType {
 }
 
 type ExampleTx = Transaction & {
-  type: TxType.example;
-  payload: {
-    value: number;
-  };
+        type: TxType.example;
+        payload: {
+        value: number;
+    };
 };
 
 export type TransactionUnion = ExampleTx;
 
 export const usePulsarStore = createBoundedUseStore(
-  createPulsarStore<TransactionUnion>({
-    name: storageName,
-    adapter: evmAdapter(config, appChains),
-  }),
+    createPulsarStore<TransactionUnion>({
+        name: storageName,
+        adapter: evmAdapter(config, appChains),
+    }),
 );
 ```
 
+### 2. Setup Provider Component
 ```tsx
-// src/providers/NovaProvider.tsx
-import { NovaProvider as NP } from '@tuwaio/nova-transactions/providers';
+// src/providers/NovaTransactionsProvider.tsx
+import { NovaTransactionsProvider as NP } from '@tuwaio/nova-transactions/providers';
 import { TransactionAdapter } from '@tuwaio/pulsar-core';
 import { useInitializeTransactionsPool } from '@tuwaio/pulsar-react';
 import { useAccount } from 'wagmi';
 
 import { usePulsarStore } from '@/hooks/txTrackingHooks';
 
-export function NovaProvider() {
-  const transactionsPool = usePulsarStore((state) => state.transactionsPool);
-  const initialTx = usePulsarStore((state) => state.initialTx);
-  const closeTxTrackedModal = usePulsarStore((state) => state.closeTxTrackedModal);
-  const handleTransaction = usePulsarStore((state) => state.handleTransaction);
-  const initializeTransactionsPool = usePulsarStore((state) => state.initializeTransactionsPool);
-  const getAdapter = usePulsarStore((state) => state.getAdapter);
+export function NovaTransactionsProvider() {
+const transactionsPool = usePulsarStore((state) => state.transactionsPool);
+const initialTx = usePulsarStore((state) => state.initialTx);
+const closeTxTrackedModal = usePulsarStore((state) => state.closeTxTrackedModal);
+const handleTransaction = usePulsarStore((state) => state.handleTransaction);
+const initializeTransactionsPool = usePulsarStore((state) => state.initializeTransactionsPool);
+const getAdapter = usePulsarStore((state) => state.getAdapter);
 
-  useInitializeTransactionsPool({ initializeTransactionsPool });
+useInitializeTransactionsPool({ initializeTransactionsPool });
 
-  const { address } = useAccount();
+const { address } = useAccount();
 
-  return (
+return (
     <NP
-      transactionsPool={transactionsPool}
-      initialTx={initialTx}
-      closeTxTrackedModal={closeTxTrackedModal}
-      handleTransaction={handleTransaction}
-      connectedWalletAddress={address}
-      connectedAdapterType={TransactionAdapter.EVM}
-      adapter={getAdapter()}
+        transactionsPool={transactionsPool}
+        initialTx={initialTx}
+        closeTxTrackedModal={closeTxTrackedModal}
+        handleTransaction={handleTransaction}
+        connectedWalletAddress={address}
+        connectedAdapterType={TransactionAdapter.EVM}
+        adapter={getAdapter()}
     />
   );
 }
 
 ```
-
+### 3. Integrate into App
 ```tsx
 // src/providers/index.tsx
-'use client';
-
 import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactNode } from 'react';
@@ -127,52 +147,47 @@ import { WagmiProvider } from 'wagmi';
 
 import { config } from '@/configs/wagmiConfig';
 
-import { NovaProvider } from './NovaProvider';
+import { NovaTransactionsProvider } from './NovaTransactionsProvider';
 
 const queryClient = new QueryClient();
 
 export function Providers({ children }: { children: ReactNode }) {
-  return (
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
-        <RainbowKitProvider>
-          <NovaProvider />
-          {children}
-        </RainbowKitProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
-  );
+    return (
+        <WagmiProvider config={config}>
+            <QueryClientProvider client={queryClient}>
+                <RainbowKitProvider>
+                    <NovaTransactionsProvider />
+                    {children}
+                </RainbowKitProvider>
+            </QueryClientProvider>
+        </WagmiProvider>
+    );
 }
 ```
 
-## Customization
+## 🎨 Customization
 
 You can easily override the default English text by passing a `labels` prop, or replace entire components using the `customization` prop.
-
 ```tsx
-<NovaProvider
-  // 1. Override text labels
-  labels={{
-    statuses: {
-      pending: 'In Bearbeitung...',
-      success: 'Erfolgreich!',
-      failed: 'Fehlgeschlagen!',
-    },
+<NovaTransactionsProvider
+    // 1. Override text labels
+    labels={{
+        statuses: {
+        pending: 'В обработке...',
+        success: 'Успешно!',
+        failed: 'Ошибка!',
+      },
     // ... other keys
-  }}
-
-  // 2. Override a component (e.g., the status badge)
-  customization={{
-    components: {
-      statusBadge: ({ tx }) => <MyCustomBadge status={tx.status} />,
-    }
-  }}
-
+    }}
+    customization={{
+        components: {
+        statusBadge: ({ tx }) => <MyCustomBadge status={tx.status} />,
+    }}
+}
   // ... other required props
 />
 ```
-
------
+---
 
 ## 🤝 Contributing & Support