@lukso/transaction-view-headless 0.4.3-dev.661418d → 0.4.3-dev.a07a66f
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.
- package/.turbo/turbo-build.log +31 -29
- package/ARG_ACCESS_PATTERN.md +265 -0
- package/CONTEXT_VARIANT_GUIDE.md +4 -4
- package/EVENT_SYSTEM_SUMMARY.md +601 -0
- package/HEADER_EVENTS_GUIDE.md +291 -0
- package/RECOMPOSITION_REFERENCE.md +303 -0
- package/TRANSACTION_MODIFICATION_GUIDE.md +927 -0
- package/dist/composables/index.cjs +1 -1
- package/dist/composables/index.cjs.map +1 -1
- package/dist/composables/index.d.cts +3 -3
- package/dist/composables/index.d.ts +3 -3
- package/dist/composables/index.js +1 -1
- package/dist/composables/index.js.map +1 -1
- package/dist/{index-CSDjhiKV.d.cts → index-BqL7xdDl.d.cts} +2 -2
- package/dist/{index-CMLU1hKL.d.ts → index-CNUHqRdk.d.ts} +2 -2
- package/dist/index.cjs +60 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -4
- package/dist/index.d.ts +5 -4
- package/dist/index.js +55 -1
- package/dist/index.js.map +1 -1
- package/dist/registry/index.d.cts +2 -2
- package/dist/registry/index.d.ts +2 -2
- package/dist/types/index.cjs +68 -0
- package/dist/types/index.cjs.map +1 -1
- package/dist/types/index.d.cts +229 -169
- package/dist/types/index.d.ts +229 -169
- package/dist/types/index.js +55 -0
- package/dist/types/index.js.map +1 -1
- package/dist/utils/index.d.cts +1 -1
- package/dist/utils/index.d.ts +1 -1
- package/dist/{view-loader-dD86QAlQ.d.cts → view-loader--mEEI8YY.d.ts} +1 -1
- package/dist/{view-loader-ii8AxiQR.d.ts → view-loader-D7ApWfdN.d.cts} +1 -1
- package/dist/view-matching-C9G3z8lQ.d.cts +203 -0
- package/dist/view-matching-C9G3z8lQ.d.ts +203 -0
- package/package.json +3 -3
- package/src/composables/use-transaction-playback.ts +8 -5
- package/src/types/index.ts +14 -0
- package/src/types/view-events.ts +322 -0
package/dist/types/index.d.ts
CHANGED
|
@@ -1,203 +1,263 @@
|
|
|
1
|
-
|
|
1
|
+
export { D as DecoderRecordForSelection, F as FrameworkSupport, f as FrameworkViewConfig, V as ViewContext, d as ViewContextRequirements, a as ViewDefinition, g as ViewLoader, b as ViewMatch, c as ViewMatchCriteria, h as ViewMatchOptions, i as ViewRegistry, e as ViewVariant } from '../view-matching-C9G3z8lQ.js';
|
|
2
|
+
import '@lukso/transaction-decoder';
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
|
-
*
|
|
5
|
+
* View Events and Header Information Types
|
|
5
6
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* - User intent
|
|
9
|
-
* - Security requirements
|
|
10
|
-
* - Interaction patterns
|
|
7
|
+
* Defines the event system for transaction views to communicate
|
|
8
|
+
* with their parent containers about header display and other UI concerns.
|
|
11
9
|
*/
|
|
12
|
-
type ViewContext = 'approval' | 'feed' | 'list' | 'detail' | 'review' | 'notification' | 'embed' | 'batch-summary';
|
|
13
10
|
/**
|
|
14
|
-
*
|
|
11
|
+
* Header information that a view can provide to its parent container
|
|
15
12
|
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
13
|
+
* Views can emit this information to override the default header
|
|
14
|
+
* that would be derived from the transaction's top-level from/to addresses.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```typescript
|
|
18
|
+
* // Inside a transfer view component
|
|
19
|
+
* this.dispatchEvent(new CustomEvent('header-info', {
|
|
20
|
+
* bubbles: true,
|
|
21
|
+
* composed: true,
|
|
22
|
+
* detail: {
|
|
23
|
+
* from: transferFromAddress,
|
|
24
|
+
* to: transferToAddress,
|
|
25
|
+
* title: 'LSP7 Token Transfer'
|
|
26
|
+
* }
|
|
27
|
+
* }))
|
|
28
|
+
* ```
|
|
19
29
|
*/
|
|
20
|
-
|
|
30
|
+
interface TransactionHeaderInfo {
|
|
31
|
+
/**
|
|
32
|
+
* The "from" address to display in the header
|
|
33
|
+
* Overrides the transaction's top-level from address
|
|
34
|
+
*/
|
|
35
|
+
from?: string;
|
|
36
|
+
/**
|
|
37
|
+
* The "to" address to display in the header
|
|
38
|
+
* Overrides the transaction's top-level to address
|
|
39
|
+
*/
|
|
40
|
+
to?: string;
|
|
41
|
+
/**
|
|
42
|
+
* Optional title for the transaction
|
|
43
|
+
* @example "LSP7 Token Transfer", "Set Data", "Execute"
|
|
44
|
+
*/
|
|
45
|
+
title?: string;
|
|
46
|
+
/**
|
|
47
|
+
* Optional subtitle or description
|
|
48
|
+
* @example "Send 100 tokens", "Update profile data"
|
|
49
|
+
*/
|
|
50
|
+
subtitle?: string;
|
|
51
|
+
/**
|
|
52
|
+
* Optional icon identifier
|
|
53
|
+
* @example "transfer", "setdata", "execute"
|
|
54
|
+
*/
|
|
55
|
+
icon?: string;
|
|
56
|
+
/**
|
|
57
|
+
* Optional additional metadata
|
|
58
|
+
* Can be used for custom header rendering
|
|
59
|
+
*/
|
|
60
|
+
metadata?: Record<string, any>;
|
|
61
|
+
}
|
|
21
62
|
/**
|
|
22
|
-
*
|
|
63
|
+
* Type-safe custom event for header information
|
|
23
64
|
*/
|
|
24
|
-
interface
|
|
25
|
-
|
|
26
|
-
maxHeight?: number;
|
|
27
|
-
/** Whether to show action buttons */
|
|
28
|
-
showActions?: boolean;
|
|
29
|
-
/** Level of detail to display */
|
|
30
|
-
detailLevel: 'minimal' | 'summary' | 'full' | 'debug';
|
|
31
|
-
/** Whether user can expand for more details */
|
|
32
|
-
expandable?: boolean;
|
|
33
|
-
/** Color scheme preference */
|
|
34
|
-
colorScheme?: 'light' | 'dark' | 'auto';
|
|
35
|
-
/** Whether to emphasize security warnings */
|
|
36
|
-
emphasizeSecurity?: boolean;
|
|
65
|
+
interface HeaderInfoEvent extends CustomEvent {
|
|
66
|
+
detail: TransactionHeaderInfo;
|
|
37
67
|
}
|
|
38
|
-
|
|
39
|
-
type DecoderRecordForSelection = DecoderResult & {
|
|
40
|
-
recordType?: string;
|
|
41
|
-
functionName?: string;
|
|
42
|
-
contractAddress?: string;
|
|
43
|
-
standard?: string;
|
|
44
|
-
};
|
|
45
|
-
|
|
46
68
|
/**
|
|
47
|
-
*
|
|
69
|
+
* Transaction modification information
|
|
70
|
+
*
|
|
71
|
+
* Views emit this to modify their transaction's data (e.g., changing a parameter).
|
|
72
|
+
* The view encodes its LOCAL transaction data, and the parent handles re-wrapping
|
|
73
|
+
* if the transaction is inside Execute or ExecuteBatch wrappers.
|
|
74
|
+
*
|
|
75
|
+
* @example
|
|
76
|
+
* ```typescript
|
|
77
|
+
* // In a transfer view, user clicks "Force Transfer" checkbox
|
|
78
|
+
* const newData = encodeFunctionData({
|
|
79
|
+
* abi: LSP7_ABI,
|
|
80
|
+
* functionName: 'transfer',
|
|
81
|
+
* args: [from, to, amount, true, data] // force = true
|
|
82
|
+
* })
|
|
83
|
+
*
|
|
84
|
+
* dispatchTransactionModification(this, {
|
|
85
|
+
* data: newData,
|
|
86
|
+
* transactionIndex: this.index,
|
|
87
|
+
* reason: 'User enabled force transfer to EOA',
|
|
88
|
+
* userInitiated: true
|
|
89
|
+
* })
|
|
90
|
+
* ```
|
|
48
91
|
*/
|
|
49
|
-
interface
|
|
50
|
-
/**
|
|
51
|
-
|
|
52
|
-
/** Function name from ABI (e.g., 'transfer', 'setData', 'execute') */
|
|
53
|
-
functionName?: string | string[];
|
|
54
|
-
/** Record type from decoder (e.g., 'lsp7-transfer', 'set-data') */
|
|
55
|
-
recordType?: string | string[];
|
|
56
|
-
/** Contract address (for specific contract implementations) */
|
|
57
|
-
contractAddress?: string | string[];
|
|
58
|
-
/** Chain ID (for network-specific views) */
|
|
59
|
-
chainId?: number | number[];
|
|
60
|
-
/** Display context (opt-in) - WHERE to display (feed, approval, list, etc.) */
|
|
61
|
-
context?: ViewContext | ViewContext[];
|
|
62
|
-
/** Display variant (opt-in) - HOW to display (collapsed, minimal, full, etc.) */
|
|
63
|
-
variant?: ViewVariant | ViewVariant[];
|
|
64
|
-
/** Context requirements (opt-in) - additional constraints for context matching */
|
|
65
|
-
contextRequirements?: Partial<ViewContextRequirements>;
|
|
66
|
-
/**
|
|
67
|
-
* Custom matcher function for complex synchronous logic.
|
|
68
|
-
* Returns the number of conditions that matched (higher = better match).
|
|
92
|
+
interface TransactionModification {
|
|
93
|
+
/**
|
|
94
|
+
* The modified data for THIS transaction level (not wrapped)
|
|
69
95
|
*
|
|
70
|
-
*
|
|
71
|
-
*
|
|
96
|
+
* This is the encoded function call for the current transaction only,
|
|
97
|
+
* not wrapped in Execute or Batch calls. The parent container handles re-wrapping.
|
|
98
|
+
*/
|
|
99
|
+
data: `0x${string}`;
|
|
100
|
+
/**
|
|
101
|
+
* The playback index this modification applies to
|
|
72
102
|
*
|
|
73
|
-
*
|
|
103
|
+
* - 0 = batch summary (modifies batch itself)
|
|
104
|
+
* - 1 = first transaction (or single tx)
|
|
105
|
+
* - 2 = second child transaction
|
|
106
|
+
* - etc.
|
|
74
107
|
*
|
|
75
|
-
*
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
*
|
|
80
|
-
*
|
|
81
|
-
*
|
|
82
|
-
*
|
|
83
|
-
|
|
84
|
-
|
|
108
|
+
* This must match the `index` prop of <transaction-playback>
|
|
109
|
+
*/
|
|
110
|
+
transactionIndex: number;
|
|
111
|
+
/**
|
|
112
|
+
* Human-readable explanation of why this modification occurred
|
|
113
|
+
*
|
|
114
|
+
* @example "User enabled force transfer to EOA"
|
|
115
|
+
* @example "Slippage tolerance increased to 2%"
|
|
116
|
+
* @example "Gas limit adjusted for complex operation"
|
|
117
|
+
*/
|
|
118
|
+
reason: string;
|
|
119
|
+
/**
|
|
120
|
+
* Whether this modification was triggered by user interaction
|
|
121
|
+
*
|
|
122
|
+
* - true: User clicked checkbox, changed input, adjusted slider, etc.
|
|
123
|
+
* - false: Automatic adjustment by view logic
|
|
124
|
+
*/
|
|
125
|
+
userInitiated: boolean;
|
|
126
|
+
/**
|
|
127
|
+
* Optional structured summary for quick display/logging
|
|
128
|
+
*/
|
|
129
|
+
summary?: {
|
|
130
|
+
/** Name of the field that changed */
|
|
131
|
+
field: string;
|
|
132
|
+
/** Human-readable old value */
|
|
133
|
+
oldValue: string;
|
|
134
|
+
/** Human-readable new value */
|
|
135
|
+
newValue: string;
|
|
136
|
+
};
|
|
137
|
+
/**
|
|
138
|
+
* Optional validation information
|
|
139
|
+
*/
|
|
140
|
+
validation?: {
|
|
141
|
+
/** Whether the modification is valid */
|
|
142
|
+
isValid: boolean;
|
|
143
|
+
/** Error message if invalid */
|
|
144
|
+
error?: string;
|
|
145
|
+
/** Warning messages (modification is valid but user should be aware) */
|
|
146
|
+
warnings?: string[];
|
|
147
|
+
};
|
|
85
148
|
}
|
|
86
149
|
/**
|
|
87
|
-
*
|
|
150
|
+
* Extended modification info added by transaction-playback
|
|
151
|
+
*
|
|
152
|
+
* This is what the top-level container receives after transaction-playback
|
|
153
|
+
* adds context about where in the transaction tree this modification applies.
|
|
88
154
|
*/
|
|
89
|
-
interface
|
|
90
|
-
/**
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
/**
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
155
|
+
interface TransactionModificationWithContext extends TransactionModification {
|
|
156
|
+
/**
|
|
157
|
+
* Path from root transaction to this transaction
|
|
158
|
+
*
|
|
159
|
+
* @example [1] - Simple transaction at index 1
|
|
160
|
+
* @example [0, 2] - Batch at index 0, child at index 2
|
|
161
|
+
* @example [0, 1, 0] - Nested batch: batch[0].children[1].children[0]
|
|
162
|
+
*/
|
|
163
|
+
transactionPath: number[];
|
|
164
|
+
/**
|
|
165
|
+
* The full local transaction object with modified data
|
|
166
|
+
* (Before re-wrapping)
|
|
167
|
+
*/
|
|
168
|
+
localTransaction: any;
|
|
169
|
+
/**
|
|
170
|
+
* Re-decoded result for verification
|
|
171
|
+
* Parent should verify this decodes successfully before applying
|
|
172
|
+
*/
|
|
173
|
+
decodedResult: any;
|
|
102
174
|
}
|
|
103
175
|
/**
|
|
104
|
-
*
|
|
105
|
-
*
|
|
106
|
-
* Strategic Framework Selection (Suffering Economics Optimized):
|
|
107
|
-
* - lit: Universal web components (works in Vue, React, Angular, Svelte, etc.)
|
|
108
|
-
* - vue: Native Vue components (optional, for Vue-specific optimizations)
|
|
109
|
-
* - rn: React Native components (mobile-native, optional - falls back to WebView)
|
|
110
|
-
*
|
|
111
|
-
* Lit is the universal fallback. Vue and React Native are optional native implementations
|
|
112
|
-
* that get priority when available in their respective environments.
|
|
176
|
+
* Type-safe custom event for transaction modifications
|
|
113
177
|
*/
|
|
114
|
-
interface
|
|
115
|
-
|
|
116
|
-
vue?: FrameworkViewConfig;
|
|
117
|
-
rn?: FrameworkViewConfig;
|
|
178
|
+
interface TransactionModificationEvent extends CustomEvent {
|
|
179
|
+
detail: TransactionModification;
|
|
118
180
|
}
|
|
119
181
|
/**
|
|
120
|
-
*
|
|
182
|
+
* Event type names for transaction views
|
|
121
183
|
*/
|
|
122
|
-
|
|
123
|
-
/**
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
184
|
+
declare const TransactionViewEvents: {
|
|
185
|
+
/**
|
|
186
|
+
* Emitted when a view wants to provide custom header information
|
|
187
|
+
* Parent containers should listen for this event and update their header accordingly
|
|
188
|
+
*/
|
|
189
|
+
readonly HEADER_INFO: "header-info";
|
|
190
|
+
/**
|
|
191
|
+
* Emitted when a view modifies its transaction data
|
|
192
|
+
* Parent containers should listen, re-wrap if needed, and update the transaction
|
|
193
|
+
*/
|
|
194
|
+
readonly TRANSACTION_MODIFICATION: "transaction-modification";
|
|
195
|
+
/**
|
|
196
|
+
* Emitted when a view's state changes (future use)
|
|
197
|
+
* @example Loading state, error state, interactive state changes
|
|
198
|
+
*/
|
|
199
|
+
readonly STATE_CHANGE: "view-state-change";
|
|
200
|
+
/**
|
|
201
|
+
* Emitted when a view has an action for the user (future use)
|
|
202
|
+
* @example "Approve", "Reject", "Sign"
|
|
203
|
+
*/
|
|
204
|
+
readonly ACTION: "view-action";
|
|
205
|
+
};
|
|
130
206
|
/**
|
|
131
|
-
*
|
|
207
|
+
* Helper function to dispatch header info event
|
|
208
|
+
* Use this in view components to emit header information
|
|
209
|
+
*
|
|
210
|
+
* @example
|
|
211
|
+
* ```typescript
|
|
212
|
+
* import { dispatchHeaderInfo } from '@lukso/transaction-view-headless'
|
|
132
213
|
*
|
|
133
|
-
*
|
|
134
|
-
*
|
|
135
|
-
*
|
|
214
|
+
* class MyTransferView extends LitElement {
|
|
215
|
+
* connectedCallback() {
|
|
216
|
+
* super.connectedCallback()
|
|
217
|
+
* dispatchHeaderInfo(this, {
|
|
218
|
+
* from: this.transferFrom,
|
|
219
|
+
* to: this.transferTo,
|
|
220
|
+
* title: 'Token Transfer'
|
|
221
|
+
* })
|
|
222
|
+
* }
|
|
223
|
+
* }
|
|
224
|
+
* ```
|
|
136
225
|
*/
|
|
137
|
-
|
|
138
|
-
type: 'dynamic-import';
|
|
139
|
-
path: string | (() => Promise<any>);
|
|
140
|
-
} | {
|
|
141
|
-
type: 'static-import';
|
|
142
|
-
path: string | (() => Promise<any>);
|
|
143
|
-
} | {
|
|
144
|
-
type: 'custom-element';
|
|
145
|
-
tagName: string;
|
|
146
|
-
} | {
|
|
147
|
-
type: 'registry-lookup';
|
|
148
|
-
registryKey: string;
|
|
149
|
-
} | {
|
|
150
|
-
type: 'custom';
|
|
151
|
-
loader: (config: FrameworkViewConfig) => Promise<any>;
|
|
152
|
-
};
|
|
226
|
+
declare function dispatchHeaderInfo(element: HTMLElement, headerInfo: TransactionHeaderInfo): void;
|
|
153
227
|
/**
|
|
154
|
-
*
|
|
228
|
+
* Type guard to check if an event is a HeaderInfoEvent
|
|
155
229
|
*/
|
|
156
|
-
|
|
157
|
-
/** The view definition that matched */
|
|
158
|
-
view: ViewDefinition;
|
|
159
|
-
/** Score indicating how well this view matches (0-1) */
|
|
160
|
-
score: number;
|
|
161
|
-
/** Which criteria matched */
|
|
162
|
-
matchedCriteria: (keyof ViewMatchCriteria)[];
|
|
163
|
-
/** Framework-specific loading config */
|
|
164
|
-
frameworkConfig?: FrameworkViewConfig;
|
|
165
|
-
}
|
|
230
|
+
declare function isHeaderInfoEvent(event: Event): event is HeaderInfoEvent;
|
|
166
231
|
/**
|
|
167
|
-
*
|
|
232
|
+
* Helper function to dispatch transaction modification event
|
|
233
|
+
* Use this in view components to emit transaction modifications
|
|
234
|
+
*
|
|
235
|
+
* @example
|
|
236
|
+
* ```typescript
|
|
237
|
+
* import { dispatchTransactionModification } from '@lukso/transaction-view-headless'
|
|
238
|
+
*
|
|
239
|
+
* class MyTransferView extends LitElement {
|
|
240
|
+
* private handleForceCheckbox(checked: boolean) {
|
|
241
|
+
* const newData = encodeFunctionData({
|
|
242
|
+
* abi: LSP7_ABI,
|
|
243
|
+
* functionName: 'transfer',
|
|
244
|
+
* args: [...args, checked]
|
|
245
|
+
* })
|
|
246
|
+
*
|
|
247
|
+
* dispatchTransactionModification(this, {
|
|
248
|
+
* data: newData,
|
|
249
|
+
* transactionIndex: this.index,
|
|
250
|
+
* reason: 'User enabled force transfer',
|
|
251
|
+
* userInitiated: true
|
|
252
|
+
* })
|
|
253
|
+
* }
|
|
254
|
+
* }
|
|
255
|
+
* ```
|
|
168
256
|
*/
|
|
169
|
-
|
|
170
|
-
/** Target framework */
|
|
171
|
-
framework: 'lit' | 'vue' | 'rn';
|
|
172
|
-
/** Display context (optional) - WHERE to display (feed, approval, list, etc.) */
|
|
173
|
-
context?: ViewContext;
|
|
174
|
-
/** Display variant (optional) - HOW to display (collapsed, minimal, full, etc.) */
|
|
175
|
-
variant?: ViewVariant;
|
|
176
|
-
/** Context requirements (optional) - additional constraints for context-aware matching */
|
|
177
|
-
contextRequirements?: Partial<ViewContextRequirements>;
|
|
178
|
-
/** Minimum score threshold (0-1) */
|
|
179
|
-
minScore?: number;
|
|
180
|
-
/** Maximum number of matches to return */
|
|
181
|
-
maxMatches?: number;
|
|
182
|
-
/** Whether to include framework config in results */
|
|
183
|
-
includeFrameworkConfig?: boolean;
|
|
184
|
-
}
|
|
257
|
+
declare function dispatchTransactionModification(element: HTMLElement, modification: TransactionModification): void;
|
|
185
258
|
/**
|
|
186
|
-
*
|
|
259
|
+
* Type guard to check if an event is a TransactionModificationEvent
|
|
187
260
|
*/
|
|
188
|
-
|
|
189
|
-
/** Register a new view */
|
|
190
|
-
register(view: ViewDefinition): void;
|
|
191
|
-
/** Unregister a view by ID */
|
|
192
|
-
unregister(viewId: string): void;
|
|
193
|
-
/** Get all registered views */
|
|
194
|
-
getAllViews(): ViewDefinition[];
|
|
195
|
-
/** Find best matching views for a transaction */
|
|
196
|
-
findMatches(transaction: DecoderResult, options: ViewMatchOptions): ViewMatch[];
|
|
197
|
-
/** Get a specific view by ID */
|
|
198
|
-
getView(viewId: string): ViewDefinition | undefined;
|
|
199
|
-
/** Clear all registered views */
|
|
200
|
-
clear(): void;
|
|
201
|
-
}
|
|
261
|
+
declare function isTransactionModificationEvent(event: Event): event is TransactionModificationEvent;
|
|
202
262
|
|
|
203
|
-
export
|
|
263
|
+
export { type HeaderInfoEvent, type TransactionHeaderInfo, type TransactionModification, type TransactionModificationEvent, type TransactionModificationWithContext, TransactionViewEvents, dispatchHeaderInfo, dispatchTransactionModification, isHeaderInfoEvent, isTransactionModificationEvent };
|
package/dist/types/index.js
CHANGED
|
@@ -1 +1,56 @@
|
|
|
1
|
+
// src/types/view-events.ts
|
|
2
|
+
var TransactionViewEvents = {
|
|
3
|
+
/**
|
|
4
|
+
* Emitted when a view wants to provide custom header information
|
|
5
|
+
* Parent containers should listen for this event and update their header accordingly
|
|
6
|
+
*/
|
|
7
|
+
HEADER_INFO: "header-info",
|
|
8
|
+
/**
|
|
9
|
+
* Emitted when a view modifies its transaction data
|
|
10
|
+
* Parent containers should listen, re-wrap if needed, and update the transaction
|
|
11
|
+
*/
|
|
12
|
+
TRANSACTION_MODIFICATION: "transaction-modification",
|
|
13
|
+
/**
|
|
14
|
+
* Emitted when a view's state changes (future use)
|
|
15
|
+
* @example Loading state, error state, interactive state changes
|
|
16
|
+
*/
|
|
17
|
+
STATE_CHANGE: "view-state-change",
|
|
18
|
+
/**
|
|
19
|
+
* Emitted when a view has an action for the user (future use)
|
|
20
|
+
* @example "Approve", "Reject", "Sign"
|
|
21
|
+
*/
|
|
22
|
+
ACTION: "view-action"
|
|
23
|
+
};
|
|
24
|
+
function dispatchHeaderInfo(element, headerInfo) {
|
|
25
|
+
element.dispatchEvent(
|
|
26
|
+
new CustomEvent(TransactionViewEvents.HEADER_INFO, {
|
|
27
|
+
bubbles: true,
|
|
28
|
+
composed: true,
|
|
29
|
+
// Allows event to cross shadow DOM boundaries
|
|
30
|
+
detail: headerInfo
|
|
31
|
+
})
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
function isHeaderInfoEvent(event) {
|
|
35
|
+
return event instanceof CustomEvent && event.type === TransactionViewEvents.HEADER_INFO;
|
|
36
|
+
}
|
|
37
|
+
function dispatchTransactionModification(element, modification) {
|
|
38
|
+
element.dispatchEvent(
|
|
39
|
+
new CustomEvent(TransactionViewEvents.TRANSACTION_MODIFICATION, {
|
|
40
|
+
bubbles: true,
|
|
41
|
+
composed: true,
|
|
42
|
+
detail: modification
|
|
43
|
+
})
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
function isTransactionModificationEvent(event) {
|
|
47
|
+
return event instanceof CustomEvent && event.type === TransactionViewEvents.TRANSACTION_MODIFICATION;
|
|
48
|
+
}
|
|
49
|
+
export {
|
|
50
|
+
TransactionViewEvents,
|
|
51
|
+
dispatchHeaderInfo,
|
|
52
|
+
dispatchTransactionModification,
|
|
53
|
+
isHeaderInfoEvent,
|
|
54
|
+
isTransactionModificationEvent
|
|
55
|
+
};
|
|
1
56
|
//# sourceMappingURL=index.js.map
|
package/dist/types/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/types/view-events.ts"],"sourcesContent":["/**\n * View Events and Header Information Types\n *\n * Defines the event system for transaction views to communicate\n * with their parent containers about header display and other UI concerns.\n */\n\n/**\n * Header information that a view can provide to its parent container\n *\n * Views can emit this information to override the default header\n * that would be derived from the transaction's top-level from/to addresses.\n *\n * @example\n * ```typescript\n * // Inside a transfer view component\n * this.dispatchEvent(new CustomEvent('header-info', {\n * bubbles: true,\n * composed: true,\n * detail: {\n * from: transferFromAddress,\n * to: transferToAddress,\n * title: 'LSP7 Token Transfer'\n * }\n * }))\n * ```\n */\nexport interface TransactionHeaderInfo {\n /**\n * The \"from\" address to display in the header\n * Overrides the transaction's top-level from address\n */\n from?: string\n\n /**\n * The \"to\" address to display in the header\n * Overrides the transaction's top-level to address\n */\n to?: string\n\n /**\n * Optional title for the transaction\n * @example \"LSP7 Token Transfer\", \"Set Data\", \"Execute\"\n */\n title?: string\n\n /**\n * Optional subtitle or description\n * @example \"Send 100 tokens\", \"Update profile data\"\n */\n subtitle?: string\n\n /**\n * Optional icon identifier\n * @example \"transfer\", \"setdata\", \"execute\"\n */\n icon?: string\n\n /**\n * Optional additional metadata\n * Can be used for custom header rendering\n */\n metadata?: Record<string, any>\n}\n\n/**\n * Type-safe custom event for header information\n */\nexport interface HeaderInfoEvent extends CustomEvent {\n detail: TransactionHeaderInfo\n}\n\n/**\n * Transaction modification information\n *\n * Views emit this to modify their transaction's data (e.g., changing a parameter).\n * The view encodes its LOCAL transaction data, and the parent handles re-wrapping\n * if the transaction is inside Execute or ExecuteBatch wrappers.\n *\n * @example\n * ```typescript\n * // In a transfer view, user clicks \"Force Transfer\" checkbox\n * const newData = encodeFunctionData({\n * abi: LSP7_ABI,\n * functionName: 'transfer',\n * args: [from, to, amount, true, data] // force = true\n * })\n *\n * dispatchTransactionModification(this, {\n * data: newData,\n * transactionIndex: this.index,\n * reason: 'User enabled force transfer to EOA',\n * userInitiated: true\n * })\n * ```\n */\nexport interface TransactionModification {\n /**\n * The modified data for THIS transaction level (not wrapped)\n *\n * This is the encoded function call for the current transaction only,\n * not wrapped in Execute or Batch calls. The parent container handles re-wrapping.\n */\n data: `0x${string}`\n\n /**\n * The playback index this modification applies to\n *\n * - 0 = batch summary (modifies batch itself)\n * - 1 = first transaction (or single tx)\n * - 2 = second child transaction\n * - etc.\n *\n * This must match the `index` prop of <transaction-playback>\n */\n transactionIndex: number\n\n /**\n * Human-readable explanation of why this modification occurred\n *\n * @example \"User enabled force transfer to EOA\"\n * @example \"Slippage tolerance increased to 2%\"\n * @example \"Gas limit adjusted for complex operation\"\n */\n reason: string\n\n /**\n * Whether this modification was triggered by user interaction\n *\n * - true: User clicked checkbox, changed input, adjusted slider, etc.\n * - false: Automatic adjustment by view logic\n */\n userInitiated: boolean\n\n /**\n * Optional structured summary for quick display/logging\n */\n summary?: {\n /** Name of the field that changed */\n field: string\n\n /** Human-readable old value */\n oldValue: string\n\n /** Human-readable new value */\n newValue: string\n }\n\n /**\n * Optional validation information\n */\n validation?: {\n /** Whether the modification is valid */\n isValid: boolean\n\n /** Error message if invalid */\n error?: string\n\n /** Warning messages (modification is valid but user should be aware) */\n warnings?: string[]\n }\n}\n\n/**\n * Extended modification info added by transaction-playback\n *\n * This is what the top-level container receives after transaction-playback\n * adds context about where in the transaction tree this modification applies.\n */\nexport interface TransactionModificationWithContext\n extends TransactionModification {\n /**\n * Path from root transaction to this transaction\n *\n * @example [1] - Simple transaction at index 1\n * @example [0, 2] - Batch at index 0, child at index 2\n * @example [0, 1, 0] - Nested batch: batch[0].children[1].children[0]\n */\n transactionPath: number[]\n\n /**\n * The full local transaction object with modified data\n * (Before re-wrapping)\n */\n localTransaction: any // DecoderResult, but avoiding circular dep\n\n /**\n * Re-decoded result for verification\n * Parent should verify this decodes successfully before applying\n */\n decodedResult: any // DecoderResult\n}\n\n/**\n * Type-safe custom event for transaction modifications\n */\nexport interface TransactionModificationEvent extends CustomEvent {\n detail: TransactionModification\n}\n\n/**\n * Event type names for transaction views\n */\nexport const TransactionViewEvents = {\n /**\n * Emitted when a view wants to provide custom header information\n * Parent containers should listen for this event and update their header accordingly\n */\n HEADER_INFO: 'header-info',\n\n /**\n * Emitted when a view modifies its transaction data\n * Parent containers should listen, re-wrap if needed, and update the transaction\n */\n TRANSACTION_MODIFICATION: 'transaction-modification',\n\n /**\n * Emitted when a view's state changes (future use)\n * @example Loading state, error state, interactive state changes\n */\n STATE_CHANGE: 'view-state-change',\n\n /**\n * Emitted when a view has an action for the user (future use)\n * @example \"Approve\", \"Reject\", \"Sign\"\n */\n ACTION: 'view-action',\n} as const\n\n/**\n * Helper function to dispatch header info event\n * Use this in view components to emit header information\n *\n * @example\n * ```typescript\n * import { dispatchHeaderInfo } from '@lukso/transaction-view-headless'\n *\n * class MyTransferView extends LitElement {\n * connectedCallback() {\n * super.connectedCallback()\n * dispatchHeaderInfo(this, {\n * from: this.transferFrom,\n * to: this.transferTo,\n * title: 'Token Transfer'\n * })\n * }\n * }\n * ```\n */\nexport function dispatchHeaderInfo(\n element: HTMLElement,\n headerInfo: TransactionHeaderInfo\n): void {\n element.dispatchEvent(\n new CustomEvent(TransactionViewEvents.HEADER_INFO, {\n bubbles: true,\n composed: true, // Allows event to cross shadow DOM boundaries\n detail: headerInfo,\n })\n )\n}\n\n/**\n * Type guard to check if an event is a HeaderInfoEvent\n */\nexport function isHeaderInfoEvent(event: Event): event is HeaderInfoEvent {\n return (\n event instanceof CustomEvent &&\n event.type === TransactionViewEvents.HEADER_INFO\n )\n}\n\n/**\n * Helper function to dispatch transaction modification event\n * Use this in view components to emit transaction modifications\n *\n * @example\n * ```typescript\n * import { dispatchTransactionModification } from '@lukso/transaction-view-headless'\n *\n * class MyTransferView extends LitElement {\n * private handleForceCheckbox(checked: boolean) {\n * const newData = encodeFunctionData({\n * abi: LSP7_ABI,\n * functionName: 'transfer',\n * args: [...args, checked]\n * })\n *\n * dispatchTransactionModification(this, {\n * data: newData,\n * transactionIndex: this.index,\n * reason: 'User enabled force transfer',\n * userInitiated: true\n * })\n * }\n * }\n * ```\n */\nexport function dispatchTransactionModification(\n element: HTMLElement,\n modification: TransactionModification\n): void {\n element.dispatchEvent(\n new CustomEvent(TransactionViewEvents.TRANSACTION_MODIFICATION, {\n bubbles: true,\n composed: true,\n detail: modification,\n })\n )\n}\n\n/**\n * Type guard to check if an event is a TransactionModificationEvent\n */\nexport function isTransactionModificationEvent(\n event: Event\n): event is TransactionModificationEvent {\n return (\n event instanceof CustomEvent &&\n event.type === TransactionViewEvents.TRANSACTION_MODIFICATION\n )\n}\n"],"mappings":";AA2MO,IAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnC,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,EAMb,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA,EAM1B,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,EAMd,QAAQ;AACV;AAsBO,SAAS,mBACd,SACA,YACM;AACN,UAAQ;AAAA,IACN,IAAI,YAAY,sBAAsB,aAAa;AAAA,MACjD,SAAS;AAAA,MACT,UAAU;AAAA;AAAA,MACV,QAAQ;AAAA,IACV,CAAC;AAAA,EACH;AACF;AAKO,SAAS,kBAAkB,OAAwC;AACxE,SACE,iBAAiB,eACjB,MAAM,SAAS,sBAAsB;AAEzC;AA4BO,SAAS,gCACd,SACA,cACM;AACN,UAAQ;AAAA,IACN,IAAI,YAAY,sBAAsB,0BAA0B;AAAA,MAC9D,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IACV,CAAC;AAAA,EACH;AACF;AAKO,SAAS,+BACd,OACuC;AACvC,SACE,iBAAiB,eACjB,MAAM,SAAS,sBAAsB;AAEzC;","names":[]}
|
package/dist/utils/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DecoderResult } from '@lukso/transaction-decoder';
|
|
2
|
-
import { ViewDefinition, ViewMatchOptions, ViewMatchCriteria, ViewMatch } from '../
|
|
2
|
+
import { a as ViewDefinition, h as ViewMatchOptions, c as ViewMatchCriteria, b as ViewMatch } from '../view-matching-C9G3z8lQ.cjs';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Weights for different matching criteria (higher = more important)
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DecoderResult } from '@lukso/transaction-decoder';
|
|
2
|
-
import { ViewDefinition, ViewMatchOptions, ViewMatchCriteria, ViewMatch } from '../
|
|
2
|
+
import { a as ViewDefinition, h as ViewMatchOptions, c as ViewMatchCriteria, b as ViewMatch } from '../view-matching-C9G3z8lQ.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Weights for different matching criteria (higher = more important)
|