From 79974dbb9cb02ceb02625e05076c161bd25b5380 Mon Sep 17 00:00:00 2001 From: Jackie <1121@generative.xyz> Date: Wed, 11 Sep 2024 10:40:21 +0700 Subject: [PATCH 1/2] update default position --- src/modules/blockchains/Buy/hooks/useCheckNodes.ts | 9 +++++---- .../blockchains/Buy/hooks/useNodeFlowControl.ts | 14 +++++++++----- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/modules/blockchains/Buy/hooks/useCheckNodes.ts b/src/modules/blockchains/Buy/hooks/useCheckNodes.ts index 5468d9aaf..9fd026072 100644 --- a/src/modules/blockchains/Buy/hooks/useCheckNodes.ts +++ b/src/modules/blockchains/Buy/hooks/useCheckNodes.ts @@ -4,6 +4,7 @@ import useFlowStore, { } from '@/modules/blockchains/Buy/stores/useFlowStore'; import { useAAModule } from '@/modules/blockchains/detail_v4/hook/useAAModule'; import { useBridgesModule } from '@/modules/blockchains/detail_v4/hook/useBridgesModule'; +import { useGameModule } from '@/modules/blockchains/detail_v4/hook/useGameModule'; import { IModelOption } from '@/types/customize-model'; import { DappNode } from '@/types/node'; import handleStatusEdges from '@utils/helpers'; @@ -24,7 +25,6 @@ import useDappsStore from '../stores/useDappStore'; import { needReactFlowRenderSignal } from '../studio/ReactFlowRender'; import { cloneDeep } from '../utils'; import useFormChain from './useFormChain'; -import { useGameModule } from '@/modules/blockchains/detail_v4/hook/useGameModule'; export default function useCheckNodes() { const { field } = useOrderFormStoreV3(); @@ -291,7 +291,7 @@ export default function useCheckNodes() { id: newNodeId, type: dappKeyToNodeKey(thisDapp.key), dragHandle: '.drag-handle-area', - position: { x: 1300, y: 30 }, + position: { x: 1400, y: 30 }, data: { node: 'dapp', title: thisDapp.title, @@ -324,8 +324,9 @@ export default function useCheckNodes() { target: `gaming_apps`, targetHandle: `gaming_apps-t-${rootNode}`, type: 'customEdge', - label: handleStatusEdges('', statusMapper.statusStr, 'gaming_apps').icon, - animated: handleStatusEdges('', statusMapper.statusStr, 'gaming_apps') + label: handleStatusEdges('', statusMapper.statusStr, 'gaming_apps') + .icon, + animated: handleStatusEdges('', statusMapper.statusStr, 'gaming_apps') .animate, selectable: false, selected: false, diff --git a/src/modules/blockchains/Buy/hooks/useNodeFlowControl.ts b/src/modules/blockchains/Buy/hooks/useNodeFlowControl.ts index 83be95346..5ee76dc98 100644 --- a/src/modules/blockchains/Buy/hooks/useNodeFlowControl.ts +++ b/src/modules/blockchains/Buy/hooks/useNodeFlowControl.ts @@ -19,6 +19,7 @@ import useDraggingStore from '@/modules/blockchains/Buy/stores/useDraggingStore' import { needReactFlowRenderSignal } from '@/modules/blockchains/Buy/studio/ReactFlowRender'; import { useAAModule } from '@/modules/blockchains/detail_v4/hook/useAAModule'; import { useBridgesModule } from '@/modules/blockchains/detail_v4/hook/useBridgesModule'; +import { useGameModule } from '@/modules/blockchains/detail_v4/hook/useGameModule'; import { IModelOption } from '@/types/customize-model'; import { DappNode } from '@/types/node'; import handleStatusEdges from '@utils/helpers'; @@ -32,7 +33,6 @@ import { import { useTemplateFormStore } from '../stores/useDappStore'; import useDraggedId2DStore from '../stores/useDraggedId2DStore'; import useModelCategoriesStore from '../stores/useModelCategoriesStore'; -import { useGameModule } from '@/modules/blockchains/detail_v4/hook/useGameModule'; export default function useNodeFlowControl() { const { dapps } = useDapps(); @@ -262,7 +262,7 @@ export default function useNodeFlowControl() { id: newNodeId, type: dappKeyToNodeKey(thisDapp.key), dragHandle: '.drag-handle-area', - position: { x: 1300, y: 30 }, + position: { x: 1400, y: 30 }, data: { node: 'dapp', title: thisDapp.title, @@ -287,9 +287,13 @@ export default function useNodeFlowControl() { sourceHandle: `${rootNode}-s-gaming_apps`, // target: `${newNodeId}`, target: `gaming_apps`, - label: handleStatusEdges('', statusMapper.statusStr, 'gaming_apps').icon, - animated: handleStatusEdges('', statusMapper.statusStr, 'gaming_apps') - .animate, + label: handleStatusEdges('', statusMapper.statusStr, 'gaming_apps') + .icon, + animated: handleStatusEdges( + '', + statusMapper.statusStr, + 'gaming_apps', + ).animate, targetHandle: `gaming_apps-t-${rootNode}`, selectable: false, selected: false, From 40aeeb5a6b9f6ca311128c30ec454dd1fd16cfb3 Mon Sep 17 00:00:00 2001 From: tony Date: Wed, 11 Sep 2024 11:26:47 +0700 Subject: [PATCH 2/2] Add icon infor into Chain Module --- .../blockchains/Buy/component4/Node/NodeHeading.tsx | 11 ++++++++++- .../Buy/component4/Node/styles.module.scss | 7 +++++++ .../Buy/component4/YourNodes/ChainNodeV2.tsx | 12 ++++++++++-- src/types/node.d.ts | 1 + 4 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/modules/blockchains/Buy/component4/Node/NodeHeading.tsx b/src/modules/blockchains/Buy/component4/Node/NodeHeading.tsx index b52f48ac5..2b5c23ef9 100644 --- a/src/modules/blockchains/Buy/component4/Node/NodeHeading.tsx +++ b/src/modules/blockchains/Buy/component4/Node/NodeHeading.tsx @@ -14,6 +14,7 @@ const NodeHeading = ({ borderColor, textColor = '#555555', headingStyles, + iconOnClick, }: NodeHeadingProps) => { const haveAction = React.useMemo(() => !!status?.onClick, [status]); @@ -30,7 +31,15 @@ const NodeHeading = ({ }} >
- {title} {icon && } + {title}{' '} + {icon && ( + + )}
{status && ( diff --git a/src/modules/blockchains/Buy/component4/Node/styles.module.scss b/src/modules/blockchains/Buy/component4/Node/styles.module.scss index a96058c25..0f5204972 100644 --- a/src/modules/blockchains/Buy/component4/Node/styles.module.scss +++ b/src/modules/blockchains/Buy/component4/Node/styles.module.scss @@ -36,6 +36,13 @@ } } + &__icon { + :hover { + cursor: pointer; + opacity: 0.85; + } + } + &__status { font-size: 14px; font-style: italic; diff --git a/src/modules/blockchains/Buy/component4/YourNodes/ChainNodeV2.tsx b/src/modules/blockchains/Buy/component4/YourNodes/ChainNodeV2.tsx index dbf8057b1..f5c8ab92a 100644 --- a/src/modules/blockchains/Buy/component4/YourNodes/ChainNodeV2.tsx +++ b/src/modules/blockchains/Buy/component4/YourNodes/ChainNodeV2.tsx @@ -8,8 +8,10 @@ import { useDisclosure } from '@chakra-ui/react'; import { NodeProps } from '@xyflow/react'; import ChainRenderer from '../DappRenderer/ChainRenderer'; import Node from '../Node/Node'; +import { useRouter } from 'next/navigation'; const ChainNodeV2 = ({ data, id }: NodeProps) => { + const router = useRouter(); const { accountInforL2Service } = useAppSelector(getL2ServicesStateSelector); const { showContactUsModal } = useContactUs(); const { @@ -19,6 +21,8 @@ const ChainNodeV2 = ({ data, id }: NodeProps) => { getChainTypeIconUrl, isInsufficientBalance, textCTA, + order, + isUpdateFlow, } = useChainProvider(); const { statusStr: statusMessage, @@ -73,8 +77,12 @@ const ChainNodeV2 = ({ data, id }: NodeProps) => { id={id} heading={{ title: data.title, - // TODO: @Tony - get icon - // icon: getChainTypeIconUrl(), + icon: isUpdateFlow + ? '/blockchains/customize/ic-infor.svg' + : undefined, + iconOnClick: () => { + router.push(`/chains/${order?.orderId}/detail`); + }, status: { message: statusMessage, color: borderColor, diff --git a/src/types/node.d.ts b/src/types/node.d.ts index 585444e98..2b0eb61e2 100644 --- a/src/types/node.d.ts +++ b/src/types/node.d.ts @@ -6,6 +6,7 @@ import { DappModel, IModelOption } from './customize-model'; type NodeHeadingProps = { title: string; icon?: string; + iconOnClick?: () => void; status?: { message: string; color?: string;