@@ -17,6 +17,7 @@ import {
17
17
LoadingWrapper ,
18
18
Card ,
19
19
Address ,
20
+ Text ,
20
21
} from '@fuels/ui' ;
21
22
import { IconArrowDown } from '@tabler/icons-react' ;
22
23
import { bn } from 'fuels' ;
@@ -40,8 +41,6 @@ type TxScreenProps = {
40
41
} ;
41
42
42
43
export function TxScreenSimple ( { transaction : tx , isLoading } : TxScreenProps ) {
43
- const hasInputs = tx . groupedInputs ?. length ?? 0 > 0 ;
44
- const hasOutputs = tx . groupedOutputs ?. length ?? 0 > 0 ;
45
44
const title = tx . title as string ;
46
45
const isMint = Boolean ( tx . isMint ) ;
47
46
const classes = styles ( { isMint } ) ;
@@ -151,53 +150,29 @@ export function TxScreenSimple({ transaction: tx, isLoading }: TxScreenProps) {
151
150
regularEl = { `${ bn ( tx . fee ) . format ( ) } ETH` }
152
151
/>
153
152
</ CardInfo > ,
154
- < CardInfo
155
- key = "assetMinted"
156
- name = "Asset Minted"
157
- description = {
158
- tx . mintAssetId && (
159
- < LoadingWrapper
160
- isLoading = { isLoading }
161
- regularEl = {
162
- < Address
163
- prefix = "Id:"
164
- value = { tx . mintAssetId }
165
- className = "mt-2 text-xs"
166
- />
167
- }
168
- loadingEl = {
169
- < >
170
- < LoadingBox className = "w-28 h-5 mt-2" />
171
- </ >
172
- }
173
- />
174
- )
175
- }
176
- >
177
- < LoadingWrapper
178
- isLoading = { isLoading }
179
- regularEl = {
180
- < Amount
181
- assetId = { tx . mintAssetId }
182
- value = { bn ( tx . mintAmount ) }
183
- className = "text-text text-md"
184
- />
185
- }
186
- loadingEl = {
187
- < >
188
- < LoadingBox className = "w-28 h-5" />
189
- </ >
190
- }
191
- />
192
- </ CardInfo > ,
193
153
] ;
194
154
195
- const content = ! isMint && (
155
+ return (
156
+ < Grid className = { classes . wrapper ( ) } >
157
+ < Box className = { classes . cards ( ) } > { cards } </ Box >
158
+ < ContentMain tx = { tx } isLoading = { isLoading } />
159
+ </ Grid >
160
+ ) ;
161
+ }
162
+
163
+ function ContentMain ( {
164
+ tx,
165
+ isLoading,
166
+ } : {
167
+ tx : TransactionNode ;
168
+ isLoading ?: boolean ;
169
+ } ) {
170
+ const hasInputs = tx . groupedInputs ?. length ?? 0 > 0 ;
171
+ const hasOutputs = tx . groupedOutputs ?. length ?? 0 > 0 ;
172
+
173
+ return (
196
174
< VStack >
197
175
< VStack >
198
- < Heading as = "h2" size = "5" className = "leading-none" >
199
- Inputs
200
- </ Heading >
201
176
< LoadingWrapper
202
177
isLoading = { isLoading }
203
178
repeatLoader = { 2 }
@@ -210,7 +185,12 @@ export function TxScreenSimple({ transaction: tx, isLoading }: TxScreenProps) {
210
185
}
211
186
regularEl = { tx . groupedInputs ?. map ( ( input , i ) => (
212
187
// here we use only index as key because this component will not change
213
- < TxInput key = { i } input = { input as GroupedInput } />
188
+ < >
189
+ < Heading as = "h2" size = "5" className = "leading-none" >
190
+ Inputs
191
+ </ Heading >
192
+ < TxInput key = { i } input = { input as GroupedInput } />
193
+ </ >
214
194
) ) }
215
195
noItemsEl = {
216
196
< EmptyCard hideImage >
@@ -230,45 +210,134 @@ export function TxScreenSimple({ transaction: tx, isLoading }: TxScreenProps) {
230
210
< Icon icon = { IconArrowDown } size = { 30 } color = "text-muted" />
231
211
</ Flex >
232
212
< VStack >
233
- < Heading as = "h2" size = "5" className = "leading-none" >
234
- Outputs
235
- </ Heading >
236
- < LoadingWrapper
237
- isLoading = { isLoading }
238
- repeatLoader = { 2 }
239
- noItems = { ! hasOutputs }
240
- loadingEl = {
241
- < Card className = "py-4 px-4 flex flex-row items-center justify-between" >
242
- < LoadingBox className = "rounded-full w-[38px] h-[38px]" />
243
- < LoadingBox className = "w-24 h-6" />
244
- </ Card >
245
- }
246
- regularEl = { tx . groupedOutputs ?. map ( ( output , i ) => (
247
- < TxOutput
248
- // here we use only index as key because this component will not change
249
- key = { i }
250
- tx = { tx }
251
- output = { output as GroupedOutput }
252
- />
253
- ) ) }
254
- noItemsEl = {
255
- < EmptyCard hideImage >
256
- < EmptyCard . Title > No Outputs</ EmptyCard . Title >
257
- < EmptyCard . Description >
258
- This transaction does not have any outputs.
259
- </ EmptyCard . Description >
260
- </ EmptyCard >
261
- }
262
- />
213
+ { tx . isMint ? (
214
+ < MintOutputs tx = { tx } isLoading = { Boolean ( isLoading ) } />
215
+ ) : (
216
+ < LoadingWrapper
217
+ isLoading = { isLoading }
218
+ repeatLoader = { 2 }
219
+ noItems = { ! hasOutputs }
220
+ loadingEl = {
221
+ < Card className = "py-4 px-4 flex flex-row items-center justify-between" >
222
+ < LoadingBox className = "rounded-full w-[38px] h-[38px]" />
223
+ < LoadingBox className = "w-24 h-6" />
224
+ </ Card >
225
+ }
226
+ regularEl = { tx . groupedOutputs ?. map ( ( output , i ) => (
227
+ < >
228
+ < Heading as = "h2" size = "5" className = "leading-none" >
229
+ Outputs
230
+ </ Heading >
231
+
232
+ < TxOutput
233
+ // here we use only index as key because this component will not change
234
+ key = { i }
235
+ tx = { tx }
236
+ output = { output as GroupedOutput }
237
+ />
238
+ </ >
239
+ ) ) }
240
+ noItemsEl = {
241
+ < EmptyCard hideImage >
242
+ < EmptyCard . Title > No Outputs</ EmptyCard . Title >
243
+ < EmptyCard . Description >
244
+ This transaction does not have any outputs.
245
+ </ EmptyCard . Description >
246
+ </ EmptyCard >
247
+ }
248
+ />
249
+ ) }
263
250
</ VStack >
264
251
</ VStack >
265
252
) ;
253
+ }
254
+
255
+ function MintOutputs ( {
256
+ tx,
257
+ isLoading,
258
+ } : {
259
+ tx : TransactionNode ;
260
+ isLoading : boolean ;
261
+ } ) {
262
+ const inputContractId = tx . inputContract ?. contract ?. id ;
263
+ const hasInputContract = Boolean ( inputContractId ) ;
264
+
265
+ const content = (
266
+ < VStack >
267
+ < Heading as = "h2" size = "5" className = "leading-none" >
268
+ Outputs
269
+ </ Heading >
270
+ < Card >
271
+ < Card . Body className = "flex flex-col gap-2" >
272
+ { tx . mintAssetId && (
273
+ < HStack >
274
+ < Text as = "span" className = "text-sm" >
275
+ Mint Amount
276
+ </ Text >
277
+ < Amount
278
+ iconSize = { 16 }
279
+ assetId = { tx . mintAssetId }
280
+ value = { bn ( tx . mintAmount ) }
281
+ className = "text-xs tablet:text-sm"
282
+ />
283
+ </ HStack >
284
+ ) }
285
+ { tx . mintAssetId && (
286
+ < HStack >
287
+ < Text as = "span" className = "text-sm" >
288
+ Asset ID Minted
289
+ </ Text >
290
+ < Address value = { tx . mintAssetId } />
291
+ </ HStack >
292
+ ) }
293
+ { hasInputContract && (
294
+ < HStack >
295
+ < Text as = "span" className = "text-sm" >
296
+ Input Contract
297
+ </ Text >
298
+ < Address
299
+ value = { inputContractId }
300
+ linkProps = { {
301
+ as : NextLink ,
302
+ href : Routes . accountAssets ( inputContractId ! ) ,
303
+ } }
304
+ />
305
+ </ HStack >
306
+ ) }
307
+ { tx . txPointer && (
308
+ < HStack >
309
+ < Text as = "span" className = "text-sm" >
310
+ Tx Pointer
311
+ </ Text >
312
+ < Address full value = { tx . txPointer } />
313
+ </ HStack >
314
+ ) }
315
+ </ Card . Body >
316
+ </ Card >
317
+ </ VStack >
318
+ ) ;
266
319
267
320
return (
268
- < Grid className = { classes . wrapper ( ) } >
269
- < Box className = { classes . cards ( ) } > { cards } </ Box >
270
- { content }
271
- </ Grid >
321
+ < LoadingWrapper
322
+ isLoading = { isLoading }
323
+ regularEl = { content }
324
+ loadingEl = {
325
+ < Card className = "py-4 px-4 flex flex-col gap-2" >
326
+ < HStack >
327
+ < LoadingBox className = "w-20 h-6" />
328
+ < LoadingBox className = "w-40 h-6" />
329
+ </ HStack >
330
+ < HStack >
331
+ < LoadingBox className = "w-20 h-6" />
332
+ < LoadingBox className = "w-40 h-6" />
333
+ </ HStack >
334
+ < HStack >
335
+ < LoadingBox className = "w-20 h-6" />
336
+ < LoadingBox className = "w-40 h-6" />
337
+ </ HStack >
338
+ </ Card >
339
+ }
340
+ />
272
341
) ;
273
342
}
274
343
@@ -284,8 +353,8 @@ const styles = tv({
284
353
variants : {
285
354
isMint : {
286
355
true : {
287
- wrapper : [ 'laptop:grid-cols-1 ' ] ,
288
- cards : [ 'laptop:grid-cols-3 ' ] ,
356
+ wrapper : [ '' ] ,
357
+ cards : [ '' ] ,
289
358
} ,
290
359
} ,
291
360
} ,
0 commit comments