@tuwaio/nova-transactions 0.2.5 → 0.2.7

package/README.md

@@ -16,10 +16,10 @@ This package provides the **View Layer** for TUWA's transaction tracking ecosyst
 
 ## ✨ Core Features
 
--   **🧩 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 (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.
+- **🧩 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 (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.
 
 ---
 
@@ -28,12 +28,15 @@ This package provides the **View Layer** for TUWA's transaction tracking ecosyst
 ### Basic Installation
 
 Install the main package:
+
 ```bash
 pnpm add @tuwaio/nova-transactions
 ```
+
 ### Peer Dependencies
 
 This package requires several peer dependencies for UI rendering:
+
 ```bash
 # Core dependencies
 pnpm add @tuwaio/nova-core @tuwaio/pulsar-core @tuwaio/orbit-core
@@ -52,6 +55,7 @@ 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 @web3icons/common @web3icons/react dayjs react immer zustand clsx tailwind-merge
@@ -62,6 +66,7 @@ npm install @tuwaio/nova-transactions @tuwaio/nova-core @tuwaio/pulsar-core @tuw
 # Using yarn
 yarn add @tuwaio/nova-transactions @tuwaio/nova-core @tuwaio/pulsar-core @tuwaio/orbit-core react-toastify framer-motion @radix-ui/react-dialog @heroicons/react @web3icons/common @web3icons/react dayjs react immer zustand clsx tailwind-merge
 ```
+
 ---
 
 ## 🚀 Getting Started
@@ -71,6 +76,7 @@ To use this library, you must render the `<NovaTransactionsProvider />` componen
 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
 import { createBoundedUseStore, createPulsarStore } from '@tuwaio/pulsar-core';
@@ -85,23 +91,24 @@ 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/NovaTransactionsProvider.tsx
 import { NovaTransactionsProvider as NP } from '@tuwaio/nova-transactions/providers';
@@ -112,32 +119,33 @@ import { useAccount } from 'wagmi';
 import { usePulsarStore } from '@/hooks/txTrackingHooks';
 
 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);
+  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
 import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
@@ -152,41 +160,43 @@ import { NovaTransactionsProvider } from './NovaTransactionsProvider';
 const queryClient = new QueryClient();
 
 export function Providers({ children }: { children: ReactNode }) {
-    return (
-        <WagmiProvider config={config}>
-            <QueryClientProvider client={queryClient}>
-                <RainbowKitProvider>
-                    <NovaTransactionsProvider />
-                    {children}
-                </RainbowKitProvider>
-            </QueryClientProvider>
-        </WagmiProvider>
-    );
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider>
+          <NovaTransactionsProvider />
+          {children}
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
 }
 ```
 
 ## 🎨 Customization
 
 You can easily override the default English text by passing a `labels` prop, or replace entire components using the `customization` prop.
+
 ```tsx
 <NovaTransactionsProvider
-    // 1. Override text labels
-    labels={{
-        statuses: {
-        pending: 'В обработке...',
-        success: 'Успешно!',
-        failed: 'Ошибка!',
-      },
+  // 1. Override text labels
+  labels={{
+    statuses: {
+      pending: 'В обработке...',
+      success: 'Успешно!',
+      failed: 'Ошибка!',
+    },
     // ... other keys
-    }}
-    customization={{
-        components: {
-        statusBadge: ({ tx }) => <MyCustomBadge status={tx.status} />,
-    }}
-}
+  }}
+  customization={{
+    components: {
+      statusBadge: ({ tx }) => <MyCustomBadge status={tx.status} />,
+    },
+  }}
   // ... other required props
 />
 ```
+
 ---
 
 ## 🤝 Contributing & Support