@tuwaio/nova-transactions 0.0.3 → 0.0.5

package/README.md

@@ -8,17 +8,14 @@ The official React UI component library for the Pulsar transaction engine. Provi
 
 ## Architecture
 
-This package provides the **View Layer** for TUWA's transaction tracking ecosystem. It works in tandem with our headless state management libraries:
+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.
 
--   **`@tuwaio/pulsar-core`**: The core state management engine.
--   **`@tuwaio/nova-transactions` (this package)**: The React components that consume state from `pulsar-core` and render the UI.
-
-You must set up both the Pulsar engine and this UI package to achieve the full functionality.
+You must connect your Pulsar store's state and actions to the `<NovaProvider />` component via props.
 
 ## Core Features
 
--   **🧩 UI Components:** A suite of pre-built, accessible components including `TransactionModal`, `TransactionToasts`, and `TransactionHistory`.
--   **🔌 Simple Integration:** The UI automatically reacts to transactions tracked by `pulsar-core`.
+-   **🧩 UI Components:** A suite of pre-built, accessible components including `TransactionModal`, `ToastContainer`, and `WalletInfoModal`, all managed internally.
+-   **🔌 Simple Integration:** Once connected to your Pulsar store, the UI automatically reacts to transaction state changes.
 -   **🌐 Internationalization (i18n):** Built-in support for multiple languages and easy overrides for all text content.
 -   **🎨 Highly Customizable:** Styled with `@tuwaio/nova-core` to be easily themed using Tailwind CSS.
 
@@ -38,7 +35,7 @@ You must set up both the Pulsar engine and this UI package to achieve the full f
 
 ## Getting Started
 
-To use this library, you need to set up the `NovaProvider` from this package alongside the Pulsar initialization logic.
+To use this library, you must render the `<NovaProvider />` component at the top level of your application and pass the state and actions from your Pulsar store to it as props.
 
 Here is a complete example of a `providers.tsx` file that configures both systems:
 
@@ -46,37 +43,57 @@ Here is a complete example of a `providers.tsx` file that configures both system
 // app/providers.tsx or similar
 'use client';
 
-import { WagmiProvider } from 'wagmi';
+import { WagmiProvider, useAccount } from 'wagmi';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { NovaProvider, TransactionToasts } from '@tuwaio/nova-transactions';
-import { ToastContainer } from 'react-toastify';
+import { NovaProvider } from '@tuwaio/nova-transactions';
 
-// Import the TransactionInitializer component you created (see pulsar-react docs)
+// Import your custom Pulsar hook and the TransactionInitializer component
+import { usePulsarStore } from '../hooks/usePulsarStore';
 import { TransactionInitializer } from '../components/TransactionInitializer';
+
 // Import required CSS
 import '@tuwaio/nova-core/dist/index.css';
 import '@tuwaio/nova-transactions/dist/index.css';
+import 'react-toastify/dist/ReactToastify.css';
 
 // Your Wagmi Config
-import { wagmiConfig } from './wagmi';
+import { wagmiConfig, appChains } from './wagmi';
 
 const queryClient = new QueryClient();
 
 export function Providers({ children }: { children: React.ReactNode }) {
+  // 1. Get state and actions from your Pulsar store hook
+  const { transactionsPool, initialTx, handleTransaction, closeTxTrackedModal } = usePulsarStore();
+  
+  // 2. Get live wallet data from wagmi
+  const { address, chain } = useAccount();
+
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        {/* NovaProvider is the parent for all UI-related context and components */}
-        <NovaProvider>
-          {/* TransactionInitializer handles the logic of rehydrating the Pulsar store */}
-          <TransactionInitializer />
+        {/* TransactionInitializer handles rehydrating the Pulsar store */}
+        <TransactionInitializer />
           
-          {children}
-
-          {/* Global UI components from this package */}
-          <TransactionToasts />
-          <ToastContainer />
-        </NovaProvider>
+        {/* Your application's pages */}
+        {children}
+
+        {/* 3. Render NovaProvider as a self-contained UI manager */}
+        <NovaProvider
+          // Pass all required state and actions from Pulsar as props
+          transactionsPool={transactionsPool}
+          initialTx={initialTx}
+          handleTransaction={handleTransaction}
+          closeTxTrackedModal={closeTxTrackedModal}
+          
+          // Pass live wallet and chain data
+          walletAddress={address}
+          chain={chain}
+          
+          // Pass static configuration
+          appChains={appChains}
+          config={wagmiConfig}
+          // actions={...} // Pass retry actions if you have them
+        />
       </QueryClientProvider>
     </WagmiProvider>
   );
@@ -85,49 +102,27 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
 ## Usage Example
 
-Once the providers are set up, you use your custom `usePulsarStore` hook to track transactions. The components from this library will automatically appear and update.
+Once the `NovaProvider` is set up correctly, you can use your custom `usePulsarStore` hook anywhere to track transactions. The UI components rendered by `NovaProvider` will automatically appear and update.
 
 ```tsx
 // components/IncrementButton.tsx
 'use client';
 
-import { getAccount } from '@wagmi/core';
-
 // Import your custom hook, created as shown in the pulsar-react docs
 import { usePulsarStore } from '../hooks/usePulsarStore';
-import { config } from '../configs/wagmiConfig';
-import { abi } from './my-nft-abi';
-
-const CONTRACT_ADDRESS = '0x...';
+// ... other imports
 
 export function IncrementButton() {
-  const activeWallet = getAccount(config);
   const { handleTransaction } = usePulsarStore();
 
   const handleIncrement = async () => {
+    // Calling handleTransaction updates the Pulsar store's state.
+    // NovaProvider receives this new state via props and renders the appropriate UI.
     await handleTransaction({
-      actionFunction: txActions.increment,
-      params: {
-        type: TxType.increment,
-        adapter: TransactionAdapter.EVM,
-        from: activeWallet.address ?? zeroAddress,
-        walletType: activeWallet.connector?.type ?? '',
-        desiredChainID: sepolia.id,
-        actionKey: TxAction.increment,
-        title: ['Incrementing', 'Incremented', 'Error when increment', 'Increment tx replaced'],
-        description: [
-          `Value after incrementing ${currentCount + 1}`,
-          `Success. Current value is ${currentCount + 1}`,
-          'Something went wrong when increment.',
-          'Transaction replaced. Please take a look details in your wallet.',
-        ],
-        payload: {
-          value: currentCount,
-        },
-        withTrackedModal: true,
-      },
+      actionFunction: () => { /* ... your contract write call ... */ },
+      params: { /* ... your transaction metadata ... */ }
     });
-  }
+  };
 
   return <button onClick={handleIncrement}>Increment</button>;
 }
@@ -135,11 +130,11 @@ export function IncrementButton() {
 
 ## Internationalization (i18n)
 
-You can easily override the default English text by passing a `locale` object to the `NovaProvider`. Here is an example with German translations:
+You can easily override the default English text by passing a `labels` prop to the `NovaProvider`. Here is an example with German translations:
 
 ```tsx
 <NovaProvider
-  locale={{
+  labels={{
     transaction: {
       title: 'Transaktion',
       pending: 'Ausstehend...',
@@ -148,9 +143,8 @@ You can easily override the default English text by passing a `locale` object to
     },
     // ... other keys
   }}
->
-  {/* ... */}
-</NovaProvider>
+  // ... other required props
+/>
 ```
 
 ## Contributing

package/dist/index.css

@@ -209,6 +209,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuwaio/nova-transactions",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
   "author": "Oleksandr Tkach",
   "license": "Apache-2.0",
@@ -8,13 +8,26 @@
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./providers": {
+      "import": "./dist/providers/index.mjs",
+      "require": "./dist/providers/index.js",
+      "types": "./dist/providers/index.d.ts"
+    },
+    "./dist/index.css": "./dist/index.css"
+  },
   "publishConfig": {
     "access": "public"
   },
   "files": [
     "dist"
   ],
-  "type": "module",
   "keywords": [
     "react",
     "web3",
@@ -53,7 +66,7 @@
     "@tuwaio/pulsar-evm": "latest",
     "dayjs": "^1.11.13",
     "ethereum-blockies-base64": "^1.0.2",
-    "@tuwaio/nova-core": "^0.0.1"
+    "@tuwaio/nova-core": "^0.0.2"
   },
   "peerDependencies": {
     "@bgd-labs/react-web3-icons": ">=1",