-
Notifications
You must be signed in to change notification settings - Fork 87
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: organize txoutput components into their own files
- Loading branch information
1 parent
4158a4f
commit 1bc4c1b
Showing
6 changed files
with
189 additions
and
155 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 79 additions & 0 deletions
79
packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutputCoin.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import type { | ||
| GQLChangeOutput, | ||
| GQLCoinOutput, | ||
| GQLVariableOutput, | ||
| } from '@fuel-explorer/graphql'; | ||
| import { | ||
| Address, | ||
| Badge, | ||
| Card, | ||
| Flex, | ||
| HStack, | ||
| Icon, | ||
| createComponent, | ||
| cx, | ||
| } from '@fuels/ui'; | ||
| import { IconArrowUp } from '@tabler/icons-react'; | ||
| import { bn } from 'fuels'; | ||
| import NextLink from 'next/link'; | ||
| import { Routes } from '~/routes'; | ||
| import { AssetItem } from '~/systems/Asset/components/AssetItem/AssetItem'; | ||
| import { Amount } from '~/systems/Core/components/Amount/Amount'; | ||
| import { txIconTypeMap, typeNameMap } from './constants'; | ||
| import { styles } from './styles'; | ||
| import type { TxOutputProps } from './types'; | ||
|
|
||
| export const TxOutputCoin = createComponent< | ||
| TxOutputProps<GQLChangeOutput | GQLCoinOutput | GQLVariableOutput>, | ||
| typeof Card | ||
| >({ | ||
| id: 'TxOutputCoin', | ||
| render: (_, { output, ...props }) => { | ||
| const classes = styles(); | ||
| if (!output.assetId) return null; | ||
| const assetId = output.assetId; | ||
| const amount = output.amount; | ||
| const badgeLabel = typeNameMap?.[output?.__typename] ?? 'UNKNOWN'; | ||
| const txIconTypeFallback = txIconTypeMap?.[output?.__typename] ?? 'Mint'; | ||
|
|
||
| return ( | ||
| <Card {...props} className={cx('py-3', props.className)}> | ||
| <Card.Header className={classes.header()}> | ||
| <Badge | ||
| color="gray" | ||
| className="font-mono justify-center ml-14 tablet:ml-0 tablet:flex min-w-[70px] w-[70px] max-w-[70px] items-center" | ||
| size="1" | ||
| > | ||
| {badgeLabel} | ||
| </Badge> | ||
| <Flex className={classes.content()}> | ||
| <AssetItem | ||
| assetId={assetId} | ||
| txIconTypeFallback={txIconTypeFallback} | ||
| > | ||
| <Address | ||
| prefix="To:" | ||
| value={output.to || ''} | ||
| linkProps={{ | ||
| as: NextLink, | ||
| href: Routes.accountAssets(output.to!), | ||
| }} | ||
| /> | ||
| </AssetItem> | ||
| </Flex> | ||
| <HStack className={classes.amount()}> | ||
| <Icon icon={IconArrowUp} className="text-success" /> | ||
| {!!amount && ( | ||
| <Amount | ||
| hideSymbol | ||
| hideIcon | ||
| assetId={assetId} | ||
| value={bn(amount)} | ||
| /> | ||
| )} | ||
| </HStack> | ||
| </Card.Header> | ||
| </Card> | ||
| ); | ||
| }, | ||
| }); |
62 changes: 62 additions & 0 deletions
62
packages/app-explorer/src/systems/Transaction/component/TxOutput/TxOutputContractCreated.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import type { GQLContractCreated } from '@fuel-explorer/graphql'; | ||
| import { | ||
| Address, | ||
| Badge, | ||
| Card, | ||
| Flex, | ||
| HStack, | ||
| Text, | ||
| VStack, | ||
| createComponent, | ||
| cx, | ||
| } from '@fuels/ui'; | ||
|
|
||
| import NextLink from 'next/link'; | ||
| import { Routes } from '~/routes'; | ||
|
|
||
| import { TxIcon } from '../TxIcon/TxIcon'; | ||
| import { typeNameMap } from './constants'; | ||
| import { styles } from './styles'; | ||
| import type { TxOutputProps } from './types'; | ||
|
|
||
| export const TxOutputContractCreated = createComponent< | ||
| TxOutputProps<GQLContractCreated>, | ||
| typeof Card | ||
| >({ | ||
| id: 'TxOutputContractCreated', | ||
| render: (_, { output, ...props }) => { | ||
| const classes = styles(); | ||
| const contractId = output.contract; | ||
| const badgeLabel = typeNameMap?.[output?.__typename] ?? 'UNKNOWN'; | ||
|
|
||
| return ( | ||
| <Card {...props} className={cx('py-3', props.className)}> | ||
| <Card.Header className={classes.header()}> | ||
| <Flex className={classes.content()}> | ||
| <Badge | ||
| color="gray" | ||
| className="font-mono justify-center ml-14 tablet:ml-0 tablet:flex min-w-[70px] w-[70px] max-w-[70px] items-center" | ||
| size="1" | ||
| > | ||
| {badgeLabel} | ||
| </Badge> | ||
| <HStack align="center"> | ||
| <TxIcon status="Success" type="Contract" /> | ||
| <VStack gap="1"> | ||
| <Text className="font-medium">Contract Created</Text> | ||
| <Address | ||
| prefix="Id:" | ||
| value={contractId} | ||
| linkProps={{ | ||
| as: NextLink, | ||
| href: Routes.contractAssets(contractId), | ||
| }} | ||
| /> | ||
| </VStack> | ||
| </HStack> | ||
| </Flex> | ||
| </Card.Header> | ||
| </Card> | ||
| ); | ||
| }, | ||
| }); |
24 changes: 24 additions & 0 deletions
24
packages/app-explorer/src/systems/Transaction/component/TxOutput/constants.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import type { GQLTransactionOutputFragment } from '@fuel-explorer/graphql'; | ||
| import type { TxIconType } from '~/systems/Transaction/types'; | ||
|
|
||
| export const typeNameMap: Record< | ||
| GQLTransactionOutputFragment['__typename'], | ||
| string | ||
| > = { | ||
| ContractOutput: 'OUTPUT', | ||
| ContractCreated: 'CREATED', | ||
| VariableOutput: 'VARIABLE', | ||
| ChangeOutput: 'CHANGE', | ||
| CoinOutput: 'COIN', | ||
| }; | ||
|
|
||
| export const txIconTypeMap: Record< | ||
| GQLTransactionOutputFragment['__typename'], | ||
| TxIconType | ||
| > = { | ||
| ContractOutput: 'Contract', | ||
| ContractCreated: 'Contract Created', | ||
| VariableOutput: 'Mint', | ||
| ChangeOutput: 'Wallet', | ||
| CoinOutput: 'Wallet', | ||
| }; |
12 changes: 12 additions & 0 deletions
12
packages/app-explorer/src/systems/Transaction/component/TxOutput/styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { tv } from 'tailwind-variants'; | ||
|
|
||
| export const styles = tv({ | ||
| slots: { | ||
| header: | ||
| 'group gap-2 flex flex-col tablet:flex-row items-start tablet:items-center', | ||
| amount: 'flex items-center gap-2 ml-14 tablet:ml-0', | ||
| content: 'gap-4 justify-between items-center flex-1', | ||
| icon: 'transition-transform group-data-[state=closed]:hover:rotate-180 group-data-[state=open]:rotate-180', | ||
| utxos: 'bg-gray-2 mx-4 py-3 px-4 rounded', | ||
| }, | ||
| }); |
6 changes: 6 additions & 0 deletions
6
packages/app-explorer/src/systems/Transaction/component/TxOutput/types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import type { GQLTransactionOutputFragment } from '@fuel-explorer/graphql'; | ||
| import type { CardProps } from '@fuels/ui'; | ||
|
|
||
| export type TxOutputProps<T = GQLTransactionOutputFragment> = CardProps & { | ||
| output: T; | ||
| }; |