Skip to content

Commit 88a8c4f

Browse files
pedronauckpedronauck
committed
chore: output mint
1 parent a4e2633 commit 88a8c4f

File tree

3 files changed

+180
-101
lines changed

3 files changed

+180
-101
lines changed

‎packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx

+151-82
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
LoadingWrapper,
1818
Card,
1919
Address,
20+
Text,
2021
} from '@fuels/ui';
2122
import { IconArrowDown } from '@tabler/icons-react';
2223
import { bn } from 'fuels';
@@ -40,8 +41,6 @@ type TxScreenProps = {
4041
};
4142

4243
export function TxScreenSimple({ transaction: tx, isLoading }: TxScreenProps) {
43-
const hasInputs = tx.groupedInputs?.length ?? 0 > 0;
44-
const hasOutputs = tx.groupedOutputs?.length ?? 0 > 0;
4544
const title = tx.title as string;
4645
const isMint = Boolean(tx.isMint);
4746
const classes = styles({ isMint });
@@ -151,53 +150,29 @@ export function TxScreenSimple({ transaction: tx, isLoading }: TxScreenProps) {
151150
regularEl={`${bn(tx.fee).format()} ETH`}
152151
/>
153152
</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>,
193153
];
194154

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 (
196174
<VStack>
197175
<VStack>
198-
<Heading as="h2" size="5" className="leading-none">
199-
Inputs
200-
</Heading>
201176
<LoadingWrapper
202177
isLoading={isLoading}
203178
repeatLoader={2}
@@ -210,7 +185,12 @@ export function TxScreenSimple({ transaction: tx, isLoading }: TxScreenProps) {
210185
}
211186
regularEl={tx.groupedInputs?.map((input, i) => (
212187
// 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+
</>
214194
))}
215195
noItemsEl={
216196
<EmptyCard hideImage>
@@ -230,45 +210,134 @@ export function TxScreenSimple({ transaction: tx, isLoading }: TxScreenProps) {
230210
<Icon icon={IconArrowDown} size={30} color="text-muted" />
231211
</Flex>
232212
<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+
)}
263250
</VStack>
264251
</VStack>
265252
);
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+
);
266319

267320
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+
/>
272341
);
273342
}
274343

@@ -284,8 +353,8 @@ const styles = tv({
284353
variants: {
285354
isMint: {
286355
true: {
287-
wrapper: ['laptop:grid-cols-1'],
288-
cards: ['laptop:grid-cols-3'],
356+
wrapper: [''],
357+
cards: [''],
289358
},
290359
},
291360
},

‎packages/app-explorer/src/systems/Transaction/component/TxScripts/TxScripts.tsx

+21-19
Original file line numberDiff line numberDiff line change
@@ -51,30 +51,32 @@ export function TxScripts({ tx, isLoading, ...props }: TxScriptsProps) {
5151
const hasOperations = tx.operations?.length ?? 0 > 0;
5252
return (
5353
<VStack {...props}>
54-
<Heading
55-
as="h2"
56-
size="5"
57-
className="leading-none flex items-center gap-8"
58-
>
59-
Operations
60-
{opened && (
61-
<Button
62-
className="text-muted"
63-
variant="link"
64-
color="gray"
65-
leftIcon={IconFold}
66-
onClick={() => setOpened(false)}
67-
>
68-
Collapse
69-
</Button>
70-
)}
71-
</Heading>
7254
<LoadingWrapper
7355
repeatLoader={2}
7456
isLoading={isLoading}
7557
noItems={!hasOperations}
7658
regularEl={
77-
<ScriptsContent tx={tx} opened={opened} setOpened={setOpened} />
59+
<>
60+
<Heading
61+
as="h2"
62+
size="5"
63+
className="leading-none flex items-center gap-8"
64+
>
65+
Operations
66+
{opened && (
67+
<Button
68+
className="text-muted"
69+
variant="link"
70+
color="gray"
71+
leftIcon={IconFold}
72+
onClick={() => setOpened(false)}
73+
>
74+
Collapse
75+
</Button>
76+
)}
77+
</Heading>
78+
<ScriptsContent tx={tx} opened={opened} setOpened={setOpened} />
79+
</>
7880
}
7981
loadingEl={
8082
<Card className="py-5 px-4 flex flex-row items-center justify-between">

‎packages/graphql/src/queries/tx-fragments.graphql

+8
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,14 @@ fragment TransactionItem on Transaction {
234234
rawPayload
235235
mintAmount
236236
mintAssetId
237+
inputContract {
238+
contract {
239+
id
240+
}
241+
}
242+
outputContract {
243+
inputIndex
244+
}
237245

238246
status {
239247
...TransactionStatus

0 commit comments

Comments
 (0)