From 48d2348faa222756d16e5e426de66d47893cfea5 Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Thu, 1 Feb 2024 20:43:34 -0300 Subject: [PATCH 1/7] chore: pnpm lock --- pnpm-lock.yaml | 60 -------------------------------------------------- 1 file changed, 60 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1e1663bad..133a545c2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -741,12 +741,6 @@ importers: specifier: 4.7.0 version: 4.7.0 - packages/indexer: - devDependencies: - nodemon: - specifier: ^3.0.2 - version: 3.0.3 - packages/notification-service: dependencies: '@fuel-bridge/solidity-contracts': @@ -14171,10 +14165,6 @@ packages: resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==} deprecated: Use your platform's native atob() and btoa() methods instead - /abbrev@1.1.1: - resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==} - dev: true - /abitype@0.8.7(typescript@4.9.5): resolution: {integrity: sha512-wQ7hV8Yg/yKmGyFpqrNZufCxbszDe5es4AZGYPBitocfSqXtjrTG9JMWFcc4N30ukl2ve48aBTwt7NJxVQdU3w==} peerDependencies: @@ -20363,10 +20353,6 @@ packages: /ieee754@1.2.1: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} - /ignore-by-default@1.0.1: - resolution: {integrity: sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==} - dev: true - /ignore@5.3.0: resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==} engines: {node: '>= 4'} @@ -23125,34 +23111,10 @@ packages: engines: {node: '>=6.0.0'} dev: false - /nodemon@3.0.3: - resolution: {integrity: sha512-7jH/NXbFPxVaMwmBCC2B9F/V6X1VkEdNgx3iu9jji8WxWcvhMWkmhNWhI5077zknOnZnBzba9hZP6bCPJLSReQ==} - engines: {node: '>=10'} - hasBin: true - dependencies: - chokidar: 3.5.3 - debug: 4.3.4(supports-color@5.5.0) - ignore-by-default: 1.0.1 - minimatch: 3.1.2 - pstree.remy: 1.1.8 - semver: 7.5.4 - simple-update-notifier: 2.0.0 - supports-color: 5.5.0 - touch: 3.1.0 - undefsafe: 2.0.5 - dev: true - /nofilter@3.1.0: resolution: {integrity: sha512-l2NNj07e9afPnhAhvgVrCD/oy2Ai1yfLpuo3EpiO1jFTsB4sFz6oIfAfSZyQzVpkZQ9xS8ZS5g1jCBgq4Hwo0g==} engines: {node: '>=12.19'} - /nopt@1.0.10: - resolution: {integrity: sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==} - hasBin: true - dependencies: - abbrev: 1.1.1 - dev: true - /normalize-package-data@2.5.0: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} dependencies: @@ -24384,10 +24346,6 @@ packages: /psl@1.9.0: resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==} - /pstree.remy@1.1.8: - resolution: {integrity: sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==} - dev: true - /public-encrypt@4.0.3: resolution: {integrity: sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==} dependencies: @@ -26004,13 +25962,6 @@ packages: dependencies: is-arrayish: 0.3.2 - /simple-update-notifier@2.0.0: - resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==} - engines: {node: '>=10'} - dependencies: - semver: 7.5.4 - dev: true - /sisteransi@1.0.5: resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} @@ -27214,13 +27165,6 @@ packages: /toposort@2.0.2: resolution: {integrity: sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==} - /touch@3.1.0: - resolution: {integrity: sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==} - hasBin: true - dependencies: - nopt: 1.0.10 - dev: true - /tough-cookie@2.4.3: resolution: {integrity: sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==} engines: {node: '>=0.8'} @@ -27815,10 +27759,6 @@ packages: resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==} dev: false - /undefsafe@2.0.5: - resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==} - dev: true - /underscore@1.13.6: resolution: {integrity: sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==} dev: true From 138cf6e4fc54d5dc8a8ae0aae7fe01d4f347f936 Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Thu, 1 Feb 2024 21:37:01 -0300 Subject: [PATCH 2/7] feat: add asset minted info --- .../component/TxScreen/TxScreenSimple.tsx | 385 +++++++++++------- .../graphql/src/queries/tx-fragments.graphql | 2 + 2 files changed, 229 insertions(+), 158 deletions(-) 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 623cb71fb..0a98174a6 100644 --- a/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx +++ b/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx @@ -16,11 +16,14 @@ import { LoadingBox, LoadingWrapper, Card, + Address, } from '@fuels/ui'; import { IconArrowDown } 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'; @@ -40,184 +43,250 @@ 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`} - /> - - - - - - Inputs - + /> + + ), + Gas used: {formatZeroUnits(tx.gasUsed || '')}} + loadingEl={ + <> + + + + } + /> + } + > + } + regularEl={`${bn(tx.fee).format()} ETH`} + /> + , + - - - - } - 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. - - + regularEl={ +
} - /> - - - - - - - - - - - Outputs - - - - - - } - regularEl={tx.groupedOutputs?.map((output, i) => ( - - ))} - noItemsEl={ - - No Outputs - - This transaction does not have any outputs. - - + <> + + } /> - + ) + } + > + + } + loadingEl={ + <> + + + } + /> + , + ]; + + const content = !isMint && ( + + + + 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={tx.groupedOutputs?.map((output, i) => ( + + ))} + noItemsEl={ + + No Outputs + + This transaction does not have any outputs. + + + } + /> + + ); + + return ( + + {cards} + {content} ); } + +const styles = tv({ + slots: { + 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: ['laptop:grid-cols-1'], + cards: ['laptop:grid-cols-3'], + }, + }, + }, +}); diff --git a/packages/graphql/src/queries/tx-fragments.graphql b/packages/graphql/src/queries/tx-fragments.graphql index bdafb6ada..40c587dfc 100644 --- a/packages/graphql/src/queries/tx-fragments.graphql +++ b/packages/graphql/src/queries/tx-fragments.graphql @@ -232,6 +232,8 @@ fragment TransactionItem on Transaction { salt storageSlots rawPayload + mintAmount + mintAssetId status { ...TransactionStatus From 88a8c4fcc14dc800c559873c09e20e2f2699c23b Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Mon, 5 Feb 2024 11:32:28 -0300 Subject: [PATCH 3/7] chore: output mint --- .../component/TxScreen/TxScreenSimple.tsx | 233 ++++++++++++------ .../component/TxScripts/TxScripts.tsx | 40 +-- .../graphql/src/queries/tx-fragments.graphql | 8 + 3 files changed, 180 insertions(+), 101 deletions(-) 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 0a98174a6..386c05a0f 100644 --- a/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx +++ b/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx @@ -17,6 +17,7 @@ import { LoadingWrapper, Card, Address, + Text, } from '@fuels/ui'; import { IconArrowDown } from '@tabler/icons-react'; import { bn } from 'fuels'; @@ -40,8 +41,6 @@ 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 }); @@ -151,53 +150,29 @@ export function TxScreenSimple({ transaction: tx, isLoading }: TxScreenProps) { regularEl={`${bn(tx.fee).format()} ETH`} /> , - - } - loadingEl={ - <> - - - } - /> - ) - } - > - - } - loadingEl={ - <> - - - } - /> - , ]; - const content = !isMint && ( + 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 - ( // here we use only index as key because this component will not change - + <> + + Inputs + + + ))} noItemsEl={ @@ -230,45 +210,134 @@ export function TxScreenSimple({ transaction: tx, isLoading }: TxScreenProps) { - - Outputs - - - - - - } - regularEl={tx.groupedOutputs?.map((output, i) => ( - - ))} - noItemsEl={ - - No Outputs - - This transaction does not have any outputs. - - - } - /> + {tx.isMint ? ( + + ) : ( + + + + + } + regularEl={tx.groupedOutputs?.map((output, i) => ( + <> + + Outputs + + + + + ))} + noItemsEl={ + + No Outputs + + This transaction does not have any outputs. + + + } + /> + )} ); +} + +function MintOutputs({ + tx, + isLoading, +}: { + tx: TransactionNode; + isLoading: boolean; +}) { + const inputContractId = tx.inputContract?.contract?.id; + const hasInputContract = Boolean(inputContractId); + + const content = ( + + + Outputs + + + + {tx.mintAssetId && ( + + + Mint Amount + + + + )} + {tx.mintAssetId && ( + + + Asset ID Minted + +
+ + )} + {hasInputContract && ( + + + Input Contract + +
+ + )} + {tx.txPointer && ( + + + Tx Pointer + +
+ + )} + + + + ); return ( - - {cards} - {content} - + + + + + + + + + + + + + + + } + /> ); } @@ -284,8 +353,8 @@ const styles = tv({ variants: { isMint: { true: { - wrapper: ['laptop:grid-cols-1'], - cards: ['laptop:grid-cols-3'], + 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 cd80f67aa..91c372472 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/graphql/src/queries/tx-fragments.graphql b/packages/graphql/src/queries/tx-fragments.graphql index 40c587dfc..7274d0d06 100644 --- a/packages/graphql/src/queries/tx-fragments.graphql +++ b/packages/graphql/src/queries/tx-fragments.graphql @@ -234,6 +234,14 @@ fragment TransactionItem on Transaction { rawPayload mintAmount mintAssetId + inputContract { + contract { + id + } + } + outputContract { + inputIndex + } status { ...TransactionStatus From 8e5d387b632329ba74b6c4852901c7a6ebe690eb Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Mon, 12 Feb 2024 13:44:53 -0300 Subject: [PATCH 4/7] chore: adjust mint output layout --- .../component/TxScreen/TxScreenSimple.tsx | 52 +++++++++++-------- 1 file changed, 30 insertions(+), 22 deletions(-) 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 69fef7dd8..67bdb940b 100644 --- a/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx +++ b/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx @@ -12,6 +12,7 @@ import { Grid, HStack, Heading, + HelperIcon, Icon, Link, LoadingBox, @@ -19,7 +20,7 @@ import { 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'; @@ -28,6 +29,7 @@ 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'; @@ -259,37 +261,42 @@ function MintOutputs({ tx: TransactionNode; isLoading: boolean; }) { + const classes = styles(); const inputContractId = tx.inputContract?.contract?.id; const hasInputContract = Boolean(inputContractId); + const amount = bn(tx.mintAmount); const content = ( - Outputs + Minted Assets - - + + {tx.mintAssetId && ( - - - Mint Amount - - +
- - )} - {tx.mintAssetId && ( - - - Asset ID Minted - -
- + )} + + + + + + + {hasInputContract && ( @@ -343,6 +350,7 @@ function MintOutputs({ 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', ], From ac92043a0641f1565ef81b9b68d83c635e48c359 Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Mon, 12 Feb 2024 16:56:37 -0300 Subject: [PATCH 5/7] fix: input layout --- .../Transaction/component/TxScreen/TxScreenSimple.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) 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 67bdb940b..881a13336 100644 --- a/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx +++ b/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx @@ -185,15 +185,17 @@ function ContentMain({ } - regularEl={tx.groupedInputs?.map((input, i) => ( - // here we use only index as key because this component will not change + regularEl={ <> Inputs - + {tx.groupedInputs?.map((input, i) => ( + // here we use only index as key because this component will not change + + ))} - ))} + } noItemsEl={ No Inputs From 2482643dd59389a45371f6253ef6ff0be6391b52 Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Mon, 12 Feb 2024 16:58:34 -0300 Subject: [PATCH 6/7] fix: break words --- .../src/systems/Transaction/component/TxInput/TxInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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} From 9d1a5480be246fe48f34044bbc2d654e2df0358c Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Mon, 12 Feb 2024 17:01:34 -0300 Subject: [PATCH 7/7] fix: output list --- .../component/TxScreen/TxScreenSimple.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) 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 881a13336..46cfd2ff2 100644 --- a/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx +++ b/packages/app-explorer/src/systems/Transaction/component/TxScreen/TxScreenSimple.tsx @@ -227,20 +227,21 @@ function ContentMain({ } - regularEl={tx.groupedOutputs?.map((output, i) => ( + regularEl={ <> Outputs - - + {tx.groupedOutputs?.map((output, i) => ( + + ))} - ))} + } noItemsEl={ No Outputs