diff --git a/.lintstagedrc.mjs b/.lintstagedrc.mjs index 9c3a2f126..ebf10c5a7 100644 --- a/.lintstagedrc.mjs +++ b/.lintstagedrc.mjs @@ -1,3 +1,5 @@ export default { - '**/*.(js|jsx|ts|tsx|md|json|mdx|html|css)': ['biome check --apply-unsafe'], + '**/*.(js|jsx|ts|tsx|md|json|mdx|html|css)': [ + 'biome check --apply-unsafe --diagnostic-level=error --max-diagnostics=1000', + ], }; diff --git a/packages/app-explorer/src/systems/Transaction/component/TxInput/TxInput.tsx b/packages/app-explorer/src/systems/Transaction/component/TxInput/TxInput.tsx index ff277dc52..bc3ca649f 100644 --- a/packages/app-explorer/src/systems/Transaction/component/TxInput/TxInput.tsx +++ b/packages/app-explorer/src/systems/Transaction/component/TxInput/TxInput.tsx @@ -98,7 +98,7 @@ const TxInputMessage = createComponent({ Data - + {data} diff --git a/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx b/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx index ec9c92448..46cfd2ff2 100644 --- a/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx +++ b/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx @@ -3,6 +3,7 @@ import type { GroupedInput, GroupedOutput } from '@fuel-explorer/graphql'; import { + Address, Badge, Box, Card, @@ -11,19 +12,24 @@ import { Grid, HStack, Heading, + HelperIcon, Icon, Link, LoadingBox, LoadingWrapper, + Text, VStack, } from '@fuels/ui'; -import { IconArrowDown } from '@tabler/icons-react'; +import { IconArrowDown, IconArrowUp } from '@tabler/icons-react'; import { bn } from 'fuels'; import NextLink from 'next/link'; +import { tv } from 'tailwind-variants'; import { Routes } from '~/routes'; +import { Amount } from '~/systems/Core/components/Amount/Amount'; import { EmptyCard } from '~/systems/Core/components/EmptyCard/EmptyCard'; import { formatZeroUnits } from '~/systems/Core/utils/format'; +import { AssetItem } from '~/systems/Asset/components/AssetItem/AssetItem'; import { CardInfo } from '../../../Core/components/CardInfo/CardInfo'; import { TxInput } from '../../component/TxInput/TxInput'; import { TxOutput } from '../../component/TxOutput/TxOutput'; @@ -37,158 +43,180 @@ type TxScreenProps = { }; export function TxScreenSimple({ transaction: tx, isLoading }: TxScreenProps) { - const hasInputs = tx.groupedInputs?.length ?? 0 > 0; - const hasOutputs = tx.groupedOutputs?.length ?? 0 > 0; const title = tx.title as string; + const isMint = Boolean(tx.isMint); + const classes = styles({ isMint }); - return ( - - - - - + const cards = [ + + + + } + regularEl={ + + } + /> + + } - regularEl={ - - } + loadingEl={} + regularEl={title} /> - - } - regularEl={title} - /> - ) as any - } - > - - {tx.isPredicate && ( - - Predicate - - )} - } - regularEl={ - - {tx.statusType} - - } - /> - - - - - } - regularEl={tx.time?.full} - /> + ) as any } > - } - regularEl={tx.time?.fromNow} - /> - - {(tx.blockHeight || isLoading) && ( - + + {tx.isPredicate && ( + + Predicate + + )} } + loadingEl={} regularEl={ - - #{tx.blockHeight} - - } - /> - - )} - Gas used: {formatZeroUnits(tx.gasUsed || '')}} - loadingEl={ - <> - - - + {tx.statusType} + } /> + + + + , + } + regularEl={tx.time?.full} + /> + } + > + } + regularEl={tx.time?.fromNow} + /> + , + (tx.blockHeight || isLoading) && ( + + } + regularEl={ + + #{tx.blockHeight} + } - > - } - regularEl={`${bn(tx.fee).format()} ETH`} - /> - - + /> + + ), + Gas used: {formatZeroUnits(tx.gasUsed || '')}} + loadingEl={ + <> + + + + } + /> + } + > + } + regularEl={`${bn(tx.fee).format()} ETH`} + /> + , + ]; + + return ( + + {cards} + + + ); +} + +function ContentMain({ + tx, + isLoading, +}: { + tx: TransactionNode; + isLoading?: boolean; +}) { + const hasInputs = tx.groupedInputs?.length ?? 0 > 0; + const hasOutputs = tx.groupedOutputs?.length ?? 0 > 0; + + return ( + - - - Inputs - - - - - - } - regularEl={tx.groupedInputs?.map((input, i) => ( - // here we use only index as key because this component will not change - - ))} - noItemsEl={ - - No Inputs - - This transaction does not have any inputs. - - - } - /> - - - - - - - - - - - Outputs - + + + + + } + regularEl={ + <> + + Inputs + + {tx.groupedInputs?.map((input, i) => ( + // here we use only index as key because this component will not change + + ))} + + } + noItemsEl={ + + No Inputs + + This transaction does not have any inputs. + + + } + /> + + + + + + + + + + {tx.isMint ? ( + + ) : ( } - regularEl={tx.groupedOutputs?.map((output, i) => ( - - ))} + regularEl={ + <> + + Outputs + + {tx.groupedOutputs?.map((output, i) => ( + + ))} + + } noItemsEl={ No Outputs @@ -216,8 +251,122 @@ export function TxScreenSimple({ transaction: tx, isLoading }: TxScreenProps) { } /> - + )} - + ); } + +function MintOutputs({ + tx, + isLoading, +}: { + tx: TransactionNode; + isLoading: boolean; +}) { + const classes = styles(); + const inputContractId = tx.inputContract?.contract?.id; + const hasInputContract = Boolean(inputContractId); + const amount = bn(tx.mintAmount); + + const content = ( + + + Minted Assets + + + + {tx.mintAssetId && ( + +
+ + )} + + + + + + + + {hasInputContract && ( + + + Input Contract + +
+ + )} + {tx.txPointer && ( + + + Tx Pointer + +
+ + )} + + + + ); + + return ( + + + + + + + + + + + + + + + } + /> + ); +} + +const styles = tv({ + slots: { + header: 'group flex flex-row gap-4 justify-between items-center', + wrapper: [ + 'grid-cols-1 gap-10 laptop:grid-cols-[300px_1fr] laptop:items-start', + ], + cards: [ + 'grid grid-cols-1 gap-4 tablet:grid-cols-2 tablet:gap-6 laptop:grid-cols-1', + ], + }, + variants: { + isMint: { + true: { + wrapper: [''], + cards: [''], + }, + }, + }, +}); diff --git a/packages/app-explorer/src/systems/Transaction/component/TxScripts/TxScripts.tsx b/packages/app-explorer/src/systems/Transaction/component/TxScripts/TxScripts.tsx index 0c7da528a..a1ad25945 100644 --- a/packages/app-explorer/src/systems/Transaction/component/TxScripts/TxScripts.tsx +++ b/packages/app-explorer/src/systems/Transaction/component/TxScripts/TxScripts.tsx @@ -51,30 +51,32 @@ export function TxScripts({ tx, isLoading, ...props }: TxScriptsProps) { const hasOperations = tx.operations?.length ?? 0 > 0; return ( - - Operations - {opened && ( - - )} - + <> + + Operations + {opened && ( + + )} + + + } loadingEl={ diff --git a/packages/app-portal/src/types/index.tsx b/packages/app-portal/src/types/index.tsx index c2080d593..0573644a5 100644 --- a/packages/app-portal/src/types/index.tsx +++ b/packages/app-portal/src/types/index.tsx @@ -1,9 +1,9 @@ // TODO: the urls will have to be changed export enum Pages { - home = "/", - bridge = "/bridge", - deposit = "/bridge/deposit", - withdraw = "/bridge/withdraw", - ecosystem = "/ecosystem", - transactions = "/bridge/transactions", + home = '/', + bridge = '/bridge', + deposit = '/bridge/deposit', + withdraw = '/bridge/withdraw', + ecosystem = '/ecosystem', + transactions = '/bridge/transactions', } diff --git a/packages/graphql/src/queries/tx-fragments.graphql b/packages/graphql/src/queries/tx-fragments.graphql index bdafb6ada..7274d0d06 100644 --- a/packages/graphql/src/queries/tx-fragments.graphql +++ b/packages/graphql/src/queries/tx-fragments.graphql @@ -232,6 +232,16 @@ fragment TransactionItem on Transaction { salt storageSlots rawPayload + mintAmount + mintAssetId + inputContract { + contract { + id + } + } + outputContract { + inputIndex + } status { ...TransactionStatus