@tuwaio/nova-transactions 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +84 -69
  2. package/dist/index.css +3 -7
  3. package/package.json +8 -8
package/README.md CHANGED
@@ -18,29 +18,51 @@ This package provides the **View Layer** for TUWA's transaction tracking ecosyst
18
18
 
19
19
  - **🧩 Pre-built UI Suite:** A set of accessible components including `TrackingTxModal`, `TransactionsInfoModal`, and `ToastTransaction`, all managed internally by the `NovaTransactionsProvider`.
20
20
  - **🔌 Plug-and-Play Integration:** Once connected to your Pulsar store, the UI automatically reacts to all transaction state changes.
21
- - **🌐 Internationalization (i18n):** Built-in support for multiple languages with easy overrides for all text content via the `labels` prop.
21
+ - **🌐 Internationalization (custom version of i18n):** Built-in support for multiple languages with easy overrides for all text content via the `labels` prop.
22
22
  - **🎨 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.
23
23
 
24
24
  ---
25
25
 
26
26
  ## 💾 Installation
27
27
 
28
- First, install all required packages for the Pulsar & Nova stack.
28
+ ### Basic Installation
29
29
 
30
- Next, you need to install a peer dependencies that `nova-transactions` relies on for UI rendering.
30
+ Install the main package:
31
+ ```bash
32
+ pnpm add @tuwaio/nova-transactions
33
+ ```
34
+ ### Peer Dependencies
31
35
 
36
+ This package requires several peer dependencies for UI rendering:
32
37
  ```bash
33
- # Using pnpm
34
- pnpm add react-toastify framer-motion @radix-ui/react-dialog @heroicons/react @bgd-labs/react-web3-icons @tuwaio/pulsar-core @tuwaio/nova-core dayjs react immer zustand clsx tailwind-merge @tuwaio/orbit-core
38
+ # Core dependencies
39
+ pnpm add @tuwaio/nova-core @tuwaio/pulsar-core @tuwaio/orbit-core
40
+
41
+ # React ecosystem
42
+ pnpm add react react-dom zustand immer
43
+
44
+ # UI libraries
45
+ pnpm add framer-motion @radix-ui/react-dialog @heroicons/react
46
+ pnpm add react-toastify @bgd-labs/react-web3-icons
47
+
48
+ # Utilities
49
+ pnpm add dayjs clsx tailwind-merge
50
+ ```
51
+
52
+ ### Complete Installation (All Packages)
53
+
54
+ For a complete setup with all TUWA packages:
55
+ ```bash
56
+ # Using pnpm (recommended)
57
+ 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
35
58
 
36
59
  # Using npm
37
- npm install react-toastify framer-motion @radix-ui/react-dialog @heroicons/react @bgd-labs/react-web3-icons @tuwaio/pulsar-core @tuwaio/nova-core dayjs react immer zustand clsx tailwind-merge @tuwaio/orbit-core
60
+ 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
38
61
 
39
62
  # Using yarn
40
- yarn add react-toastify framer-motion @radix-ui/react-dialog @heroicons/react @bgd-labs/react-web3-icons @tuwaio/pulsar-core @tuwaio/nova-core dayjs react immer zustand clsx tailwind-merge @tuwaio/orbit-core
41
- ````
42
-
43
- -----
63
+ 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
64
+ ```
65
+ ---
44
66
 
45
67
  ## 🚀 Getting Started
46
68
 
@@ -48,10 +70,9 @@ To use this library, you must render the `<NovaTransactionsProvider />` componen
48
70
 
49
71
  Here is a complete example of a `src/providers/index.tsx` file that configures the entire system.
50
72
 
73
+ ### 1. Create Transaction Store
51
74
  ```tsx
52
75
  // src/hooks/txTrackingHooks.tsx
53
- 'use client';
54
-
55
76
  import { createBoundedUseStore, createPulsarStore } from '@tuwaio/pulsar-core';
56
77
  import { evmAdapter } from '@tuwaio/pulsar-evm';
57
78
 
@@ -64,22 +85,23 @@ export enum TxType {
64
85
  }
65
86
 
66
87
  type ExampleTx = Transaction & {
67
- type: TxType.example;
68
- payload: {
69
- value: number;
70
- };
88
+ type: TxType.example;
89
+ payload: {
90
+ value: number;
91
+ };
71
92
  };
72
93
 
73
94
  export type TransactionUnion = ExampleTx;
74
95
 
75
96
  export const usePulsarStore = createBoundedUseStore(
76
- createPulsarStore<TransactionUnion>({
77
- name: storageName,
78
- adapter: evmAdapter(config, appChains),
79
- }),
97
+ createPulsarStore<TransactionUnion>({
98
+ name: storageName,
99
+ adapter: evmAdapter(config, appChains),
100
+ }),
80
101
  );
81
102
  ```
82
103
 
104
+ ### 2. Setup Provider Component
83
105
  ```tsx
84
106
  // src/providers/NovaTransactionsProvider.tsx
85
107
  import { NovaTransactionsProvider as NP } from '@tuwaio/nova-transactions/providers';
@@ -90,36 +112,34 @@ import { useAccount } from 'wagmi';
90
112
  import { usePulsarStore } from '@/hooks/txTrackingHooks';
91
113
 
92
114
  export function NovaTransactionsProvider() {
93
- const transactionsPool = usePulsarStore((state) => state.transactionsPool);
94
- const initialTx = usePulsarStore((state) => state.initialTx);
95
- const closeTxTrackedModal = usePulsarStore((state) => state.closeTxTrackedModal);
96
- const handleTransaction = usePulsarStore((state) => state.handleTransaction);
97
- const initializeTransactionsPool = usePulsarStore((state) => state.initializeTransactionsPool);
98
- const getAdapter = usePulsarStore((state) => state.getAdapter);
115
+ const transactionsPool = usePulsarStore((state) => state.transactionsPool);
116
+ const initialTx = usePulsarStore((state) => state.initialTx);
117
+ const closeTxTrackedModal = usePulsarStore((state) => state.closeTxTrackedModal);
118
+ const handleTransaction = usePulsarStore((state) => state.handleTransaction);
119
+ const initializeTransactionsPool = usePulsarStore((state) => state.initializeTransactionsPool);
120
+ const getAdapter = usePulsarStore((state) => state.getAdapter);
99
121
 
100
- useInitializeTransactionsPool({ initializeTransactionsPool });
122
+ useInitializeTransactionsPool({ initializeTransactionsPool });
101
123
 
102
- const { address } = useAccount();
124
+ const { address } = useAccount();
103
125
 
104
- return (
126
+ return (
105
127
  <NP
106
- transactionsPool={transactionsPool}
107
- initialTx={initialTx}
108
- closeTxTrackedModal={closeTxTrackedModal}
109
- handleTransaction={handleTransaction}
110
- connectedWalletAddress={address}
111
- connectedAdapterType={TransactionAdapter.EVM}
112
- adapter={getAdapter()}
128
+ transactionsPool={transactionsPool}
129
+ initialTx={initialTx}
130
+ closeTxTrackedModal={closeTxTrackedModal}
131
+ handleTransaction={handleTransaction}
132
+ connectedWalletAddress={address}
133
+ connectedAdapterType={TransactionAdapter.EVM}
134
+ adapter={getAdapter()}
113
135
  />
114
136
  );
115
137
  }
116
138
 
117
139
  ```
118
-
140
+ ### 3. Integrate into App
119
141
  ```tsx
120
142
  // src/providers/index.tsx
121
- 'use client';
122
-
123
143
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
124
144
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
125
145
  import { ReactNode } from 'react';
@@ -132,47 +152,42 @@ import { NovaTransactionsProvider } from './NovaTransactionsProvider';
132
152
  const queryClient = new QueryClient();
133
153
 
134
154
  export function Providers({ children }: { children: ReactNode }) {
135
- return (
136
- <WagmiProvider config={config}>
137
- <QueryClientProvider client={queryClient}>
138
- <RainbowKitProvider>
139
- <NovaTransactionsProvider />
140
- {children}
141
- </RainbowKitProvider>
142
- </QueryClientProvider>
143
- </WagmiProvider>
144
- );
155
+ return (
156
+ <WagmiProvider config={config}>
157
+ <QueryClientProvider client={queryClient}>
158
+ <RainbowKitProvider>
159
+ <NovaTransactionsProvider />
160
+ {children}
161
+ </RainbowKitProvider>
162
+ </QueryClientProvider>
163
+ </WagmiProvider>
164
+ );
145
165
  }
146
166
  ```
147
167
 
148
- ## Customization
168
+ ## 🎨 Customization
149
169
 
150
170
  You can easily override the default English text by passing a `labels` prop, or replace entire components using the `customization` prop.
151
-
152
171
  ```tsx
153
172
  <NovaTransactionsProvider
154
- // 1. Override text labels
155
- labels={{
156
- statuses: {
157
- pending: 'In Bearbeitung...',
158
- success: 'Erfolgreich!',
159
- failed: 'Fehlgeschlagen!',
160
- },
173
+ // 1. Override text labels
174
+ labels={{
175
+ statuses: {
176
+ pending: 'В обработке...',
177
+ success: 'Успешно!',
178
+ failed: 'Ошибка!',
179
+ },
161
180
  // ... other keys
162
- }}
163
-
164
- // 2. Override a component (e.g., the status badge)
165
- customization={{
166
- components: {
167
- statusBadge: ({ tx }) => <MyCustomBadge status={tx.status} />,
168
- }
169
- }}
170
-
181
+ }}
182
+ customization={{
183
+ components: {
184
+ statusBadge: ({ tx }) => <MyCustomBadge status={tx.status} />,
185
+ }}
186
+ }
171
187
  // ... other required props
172
188
  />
173
189
  ```
174
-
175
- -----
190
+ ---
176
191
 
177
192
  ## 🤝 Contributing & Support
178
193
 
package/dist/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.1.15 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme {
@@ -245,9 +245,7 @@
245
245
  .novatx\:border-\[var\(--tuwa-error-icon\)\]\/30 {
246
246
  border-color: var(--tuwa-error-icon);
247
247
  @supports (color: color-mix(in lab, red, red)) {
248
- & {
249
- border-color: color-mix(in oklab, var(--tuwa-error-icon) 30%, transparent);
250
- }
248
+ border-color: color-mix(in oklab, var(--tuwa-error-icon) 30%, transparent);
251
249
  }
252
250
  }
253
251
  .novatx\:border-\[var\(--tuwa-info-icon\)\] {
@@ -406,9 +404,7 @@
406
404
  .novatx\:text-\[var\(--tuwa-error-icon\)\]\/50 {
407
405
  color: var(--tuwa-error-icon);
408
406
  @supports (color: color-mix(in lab, red, red)) {
409
- & {
410
- color: color-mix(in oklab, var(--tuwa-error-icon) 50%, transparent);
411
- }
407
+ color: color-mix(in oklab, var(--tuwa-error-icon) 50%, transparent);
412
408
  }
413
409
  }
414
410
  .novatx\:text-\[var\(--tuwa-error-text\)\] {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tuwaio/nova-transactions",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "private": false,
5
5
  "author": "Oleksandr Tkach",
6
6
  "license": "Apache-2.0",
@@ -74,27 +74,27 @@
74
74
  "dayjs": "1.x.x"
75
75
  },
76
76
  "devDependencies": {
77
- "@tuwaio/orbit-core": "^0.1.0",
78
- "@tuwaio/pulsar-core": "^0.2.0",
77
+ "@tuwaio/orbit-core": "^0.1.2",
78
+ "@tuwaio/pulsar-core": "^0.2.2",
79
79
  "dayjs": "^1.11.18",
80
- "@bgd-labs/react-web3-icons": "^1.51.0",
80
+ "@bgd-labs/react-web3-icons": "^1.52.0",
81
81
  "@heroicons/react": "^2.2.0",
82
82
  "@radix-ui/react-dialog": "^1.1.15",
83
- "@tailwindcss/postcss": "^4.1.15",
83
+ "@tailwindcss/postcss": "^4.1.16",
84
84
  "@types/react": "^19.2.2",
85
85
  "autoprefixer": "^10.4.21",
86
86
  "clsx": "^2.1.1",
87
87
  "framer-motion": "^12.23.24",
88
- "immer": "^10.1.3",
88
+ "immer": "^10.2.0",
89
89
  "postcss": "^8.5.6",
90
90
  "postcss-cli": "^11.0.1",
91
91
  "react": "^19.2.0",
92
92
  "react-toastify": "^11.0.5",
93
93
  "tsup": "^8.5.0",
94
94
  "typescript": "~5.9.3",
95
- "tailwindcss": "^4.1.15",
95
+ "tailwindcss": "^4.1.16",
96
96
  "zustand": "^5.0.8",
97
- "@tuwaio/nova-core": "^0.1.0"
97
+ "@tuwaio/nova-core": "^0.1.3"
98
98
  },
99
99
  "scripts": {
100
100
  "build": "tsup && pnpm exec postcss ./src/styles/app.css -o ./dist/index.css"