Merge pull request #804 from TrustlessComputer/feat/update-flow-v2

Feat/update flow v2
TrustlessComputer · Sep 11, 2024 · c51375a · c51375a
2 parents cde6bfe + 40aeeb5
commit c51375a
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 12 deletions.
diff --git 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 = ({
       }}
     >
       <div className={styles.nodeHeading__title}>
-        {title} {icon && <SvgInset svgUrl={icon} size={20} />}
+        {title}{' '}
+        {icon && (
+          <SvgInset
+            className={styles.nodeHeading__icon}
+            svgUrl={icon}
+            size={20}
+            onClick={iconOnClick}
+          />
+        )}
       </div>
 
       {status && (

diff --git 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
@@ -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<ChainNodeProps>) => {
+  const router = useRouter();
   const { accountInforL2Service } = useAppSelector(getL2ServicesStateSelector);
   const { showContactUsModal } = useContactUs();
   const {
@@ -19,6 +21,8 @@ const ChainNodeV2 = ({ data, id }: NodeProps<ChainNodeProps>) => {
     getChainTypeIconUrl,
     isInsufficientBalance,
     textCTA,
+    order,
+    isUpdateFlow,
   } = useChainProvider();
   const {
     statusStr: statusMessage,
@@ -73,8 +77,12 @@ const ChainNodeV2 = ({ data, id }: NodeProps<ChainNodeProps>) => {
         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/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
@@ -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,

diff --git 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;