diff --git a/src/modules/blockchains/Buy/hooks/useCheckNodes.ts b/src/modules/blockchains/Buy/hooks/useCheckNodes.ts index f93ac2337..f20a209f0 100644 --- a/src/modules/blockchains/Buy/hooks/useCheckNodes.ts +++ b/src/modules/blockchains/Buy/hooks/useCheckNodes.ts @@ -16,7 +16,7 @@ import { } from '../mockup_3'; import { draggedDappIndexesSignal, - draggedIds2DSignal + draggedIds2DSignal, } from '../signals/useDragSignal'; import useDappsStore from '../stores/useDappStore'; import { needReactFlowRenderSignal } from '../studio/ReactFlowRender'; @@ -24,12 +24,14 @@ import { cloneDeep } from '../utils'; import { IModelOption } from '@/types/customize-model'; import { mouseDroppedPositionSignal } from '@/modules/blockchains/Buy/signals/useMouseDroppedPosition'; import useFormChain from './useFormChain'; +import { useAAModule } from '@/modules/blockchains/detail_v4/hook/useAAModule'; export default function useCheckNodes() { const { field } = useOrderFormStoreV3(); const { nodes, setNodes, edges, setEdges } = useFlowStore(); const { getCurrentFieldFromChain } = useFormChain(); const { lineBridgeStatus } = useBridgesModule(); + const { lineAAStatus } = useAAModule(); const { dapps } = useDappsStore(); const store = useStoreApi(); const { @@ -123,11 +125,11 @@ export default function useCheckNodes() { target: `account_abstraction`, targetHandle: `account_abstraction-t-${rootNode}`, type: 'customEdge', - label: handleStatusEdges('', lineBridgeStatus, 'account_abstraction') + label: handleStatusEdges('', lineAAStatus, 'account_abstraction') .icon, animated: handleStatusEdges( '', - lineBridgeStatus, + lineAAStatus, 'account_abstraction', ).animate, markerEnd: { diff --git a/src/modules/blockchains/Buy/hooks/useFetchingTemplate.ts b/src/modules/blockchains/Buy/hooks/useFetchingTemplate.ts index c253872f5..7c3356ba7 100644 --- a/src/modules/blockchains/Buy/hooks/useFetchingTemplate.ts +++ b/src/modules/blockchains/Buy/hooks/useFetchingTemplate.ts @@ -493,17 +493,22 @@ export default function useFetchingTemplate() { const newDraggedDappIndexes = []; if (isAAInstalled) { - newDraggedDappIndexes.push(0); + const dappIndex = dapps.findIndex( + (dapp) => dapp.key === 'account_abstraction', + ); + newDraggedDappIndexes.push(dappIndex); newDraggedIds2D.push([]); } if (isBridgeInstalled) { - newDraggedDappIndexes.push(1); + const dappIndex = dapps.findIndex((dapp) => dapp.key === 'bridge_apps'); + newDraggedDappIndexes.push(dappIndex); newDraggedIds2D.push([]); } if (isGamingAppsInstalled) { - newDraggedDappIndexes.push(2); + const dappIndex = dapps.findIndex((dapp) => dapp.key === 'gaming_apps'); + newDraggedDappIndexes.push(dappIndex); newDraggedIds2D.push([]); } diff --git a/src/modules/blockchains/Buy/hooks/useHandleDragging.ts b/src/modules/blockchains/Buy/hooks/useHandleDragging.ts index ae27f6610..a2889ab06 100644 --- a/src/modules/blockchains/Buy/hooks/useHandleDragging.ts +++ b/src/modules/blockchains/Buy/hooks/useHandleDragging.ts @@ -128,10 +128,16 @@ export default function useHandleDragging() { const ignoreKeys = ['bridge_apps', 'gaming_apps']; console.log('runnnnnnnn 1'); if (!rightDragging && !overIsFinalDroppable && overSuffix1 !== 'right') { - if(isMultiChoice) { + if (isMultiChoice) { const currentValues = (field[activeKey].value || []) as string[]; const isCurrentEmpty = currentValues.length === 0; const newValue = [...currentValues, active.data.current.value]; + const bridgeAppsIndex = dapps.findIndex( + (dapp) => dapp.key === 'bridge_apps', + ); + const gamingAppsIndex = dapps.findIndex( + (dapp) => dapp.key === 'gaming_apps', + ); if (currentValues.includes(active.data.current.value)) return; @@ -140,19 +146,25 @@ export default function useHandleDragging() { if ( activeKey === 'bridge_apps' && - !draggedDappIndexesSignal.value.includes(1) && + !draggedDappIndexesSignal.value.includes(bridgeAppsIndex) && !activeIsParent ) { - draggedDappIndexesSignal.value = [...draggedDappIndexesSignal.value, 1]; + draggedDappIndexesSignal.value = [ + ...draggedDappIndexesSignal.value, + bridgeAppsIndex, + ]; draggedIds2DSignal.value = [...draggedIds2DSignal.value, []]; } if ( activeKey === 'gaming_apps' && - !draggedDappIndexesSignal.value.includes(2) && + !draggedDappIndexesSignal.value.includes(gamingAppsIndex) && !activeIsParent ) { - draggedDappIndexesSignal.value = [...draggedDappIndexesSignal.value, 2]; + draggedDappIndexesSignal.value = [ + ...draggedDappIndexesSignal.value, + gamingAppsIndex, + ]; draggedIds2DSignal.value = [...draggedIds2DSignal.value, []]; } @@ -262,12 +274,18 @@ export default function useHandleDragging() { // setValueOptionInputStore(optionKey, ''); deleteValueOptionInputStore(optionKey); }); + const bridgeAppsIndex = dapps.findIndex( + (dapp) => dapp.key === 'bridge_apps', + ); + const gamingAppsIndex = dapps.findIndex( + (dapp) => dapp.key === 'gaming_apps', + ); setField(activeKey, [], false); setDraggedFields(draggedFields.filter((field) => field !== activeKey)); if (activeKey === 'bridge_apps') { - const index = draggedDappIndexesSignal.value.indexOf(1); + const index = draggedDappIndexesSignal.value.indexOf(bridgeAppsIndex); if (index !== -1) { draggedDappIndexesSignal.value = removeItemAtIndex( @@ -283,7 +301,7 @@ export default function useHandleDragging() { } if (activeKey === 'gaming_apps') { - const index = draggedDappIndexesSignal.value.indexOf(2); + const index = draggedDappIndexesSignal.value.indexOf(gamingAppsIndex); if (index !== -1) { draggedDappIndexesSignal.value = removeItemAtIndex( @@ -303,13 +321,20 @@ export default function useHandleDragging() { console.log('runnnnnnnn 7'); // Multi choice case if ( - ((over && (overIsFinalDroppable || overIsParentOfActiveDroppable)) || - (!overIsFinalDroppable && overSuffix1 === 'right')) || !over + (over && (overIsFinalDroppable || overIsParentOfActiveDroppable)) || + (!overIsFinalDroppable && overSuffix1 === 'right') || + !over ) { console.log('runnnnnnnn 8'); const currentValues = (field[activeKey].value || []) as string[]; const isCurrentEmpty = currentValues.length === 0; const newValue = [...currentValues, active.data.current.value]; + const bridgeAppsIndex = dapps.findIndex( + (dapp) => dapp.key === 'bridge_apps', + ); + const gamingAppsIndex = dapps.findIndex( + (dapp) => dapp.key === 'gaming_apps', + ); if (currentValues.includes(active.data.current.value)) return; @@ -318,19 +343,25 @@ export default function useHandleDragging() { if ( activeKey === 'bridge_apps' && - !draggedDappIndexesSignal.value.includes(1) && + !draggedDappIndexesSignal.value.includes(bridgeAppsIndex) && !activeIsParent ) { - draggedDappIndexesSignal.value = [...draggedDappIndexesSignal.value, 1]; + draggedDappIndexesSignal.value = [ + ...draggedDappIndexesSignal.value, + bridgeAppsIndex, + ]; draggedIds2DSignal.value = [...draggedIds2DSignal.value, []]; } if ( activeKey === 'gaming_apps' && - !draggedDappIndexesSignal.value.includes(2) && + !draggedDappIndexesSignal.value.includes(gamingAppsIndex) && !activeIsParent ) { - draggedDappIndexesSignal.value = [...draggedDappIndexesSignal.value, 2]; + draggedDappIndexesSignal.value = [ + ...draggedDappIndexesSignal.value, + gamingAppsIndex, + ]; draggedIds2DSignal.value = [...draggedIds2DSignal.value, []]; } } else { @@ -353,10 +384,16 @@ export default function useHandleDragging() { setField(activeKey, newValue, !isEmpty); if (isEmpty) { + const bridgeAppsIndex = dapps.findIndex( + (dapp) => dapp.key === 'bridge_apps', + ); + const gamingAppsIndex = dapps.findIndex( + (dapp) => dapp.key === 'gaming_apps', + ); setDraggedFields(draggedFields.filter((field) => field !== activeKey)); if (activeKey === 'bridge_apps') { - const index = draggedDappIndexesSignal.value.indexOf(1); + const index = draggedDappIndexesSignal.value.indexOf(bridgeAppsIndex); if (index !== -1) { draggedDappIndexesSignal.value = removeItemAtIndex( @@ -372,7 +409,7 @@ export default function useHandleDragging() { } if (activeKey === 'gaming_apps') { - const index = draggedDappIndexesSignal.value.indexOf(2); + const index = draggedDappIndexesSignal.value.indexOf(gamingAppsIndex); if (index !== -1) { draggedDappIndexesSignal.value = removeItemAtIndex( @@ -837,7 +874,7 @@ export default function useHandleDragging() { if (activeIsABaseModule) { const totalPlaced = draggedDappIndexesSignal.value.filter( (index) => index === dappIndex, - ).length + ).length; // prettier-ignore const canPlaceMoreBaseModule = baseModuleFieldMapping[dappIndex][activeOriginalKey].placableAmount === -1 || totalPlaced < baseModuleFieldMapping[dappIndex][activeOriginalKey].placableAmount; @@ -1077,42 +1114,44 @@ export default function useHandleDragging() { // Case 2.1: Dragged lego is a base block if (activeIsABase) { const totalTemplateDapps = (templateDapps || []).length; - const removeIndex = activeBaseIndex + 1 + totalTemplateDapps; + const removeIndex = activeBaseIndex + 1 + totalTemplateDapps - 1; + console.log('HEHEHEHEHEHHEHEHEHHEHE', { + nodes: nodes, + edges: edges.length, + removeIndex, + activeBaseIndex, + totalTemplateDapps, + }); const rootNode = 'blockchain'; - const newEdges = edges.filter( - (item) => item.target !== nodes[removeIndex].id, - ); let newNodes = removeItemAtIndex(nodes, removeIndex); - let getHandleNodeBlockChain = nodes.find( (item) => item.id === rootNode, ); - let countSourceHandle = 0; - for (let i = 0; i < edges.length; i++) { - if (edges[i].sourceHandle === `${rootNode}-s-${thisDapp.title}`) { - countSourceHandle += 1; - } - } - - if (countSourceHandle == 1) { - const newSourceHandles = - getHandleNodeBlockChain?.data.sourceHandles?.filter( - (item) => item !== `${rootNode}-s-${thisDapp.title}`, - ); - const data = { - ...getHandleNodeBlockChain, - data: { - ...getHandleNodeBlockChain?.data, - sourceHandles: newSourceHandles, - }, - }; - newNodes = newNodes.map((item) => - item.id === rootNode ? data : item, - ) as AppState['nodes']; - } + // for (let i = 0; i < edges.length; i++) { + // if (edges[i].sourceHandle === `${rootNode}-s-${thisDapp.title}`) { + // countSourceHandle += 1; + // } + // } + + // if (countSourceHandle == 1) { + // const newSourceHandles = + // getHandleNodeBlockChain?.data.sourceHandles?.filter( + // (item) => item !== `${rootNode}-s-${thisDapp.title}`, + // ); + // const data = { + // ...getHandleNodeBlockChain, + // data: { + // ...getHandleNodeBlockChain?.data, + // sourceHandles: newSourceHandles, + // }, + // }; + // newNodes = newNodes.map((item) => + // item.id === rootNode ? data : item, + // ) as AppState['nodes']; + // } const formDapp = formDappSignal.value; @@ -1155,7 +1194,7 @@ export default function useHandleDragging() { //Drag remove node setNodes(newNodes); - setEdges(newEdges); + // setEdges(newEdges); needReactFlowRenderSignal.value = true; return; diff --git a/src/modules/blockchains/Buy/hooks/useNodeFlowControl.ts b/src/modules/blockchains/Buy/hooks/useNodeFlowControl.ts index c4485bbf5..ce75e5829 100644 --- a/src/modules/blockchains/Buy/hooks/useNodeFlowControl.ts +++ b/src/modules/blockchains/Buy/hooks/useNodeFlowControl.ts @@ -97,6 +97,15 @@ export default function useNodeFlowControl() { }; useSignalEffect(() => { + const bridgeAppsIndex = dapps.findIndex( + (dapp) => dapp.key === 'bridge_apps', + ); + const gamingAppsIndex = dapps.findIndex( + (dapp) => dapp.key === 'gaming_apps', + ); + const accountAbstractionIndex = dapps.findIndex( + (dapp) => dapp.key === 'account_abstraction', + ); console.log('[useNodeFlowControl]', { nodes }); needReactFlowRenderSignal.value = true; @@ -105,7 +114,10 @@ export default function useNodeFlowControl() { needReactFlowRenderSignal.value = true; - if (draggedDappIndexesSignal.value.includes(0) && isAAInstalled) { + if ( + draggedDappIndexesSignal.value.includes(accountAbstractionIndex) && + isAAInstalled + ) { if (!nodes.some((node) => node.id === 'account_abstraction')) { const rootNode = 'blockchain'; const thisDapp = accountAbstractionAsADapp; @@ -172,7 +184,10 @@ export default function useNodeFlowControl() { } } - if (draggedDappIndexesSignal.value.includes(1) && isBridgeInstalled) { + if ( + draggedDappIndexesSignal.value.includes(bridgeAppsIndex) && + isBridgeInstalled + ) { console.log('[useNodeFlowControl] case 1'); if (!nodes.some((node) => node.id === 'bridge_apps')) { @@ -233,10 +248,13 @@ export default function useNodeFlowControl() { } } - if (draggedDappIndexesSignal.value.includes(2) && isGamingAppsInstalled) { + if ( + draggedDappIndexesSignal.value.includes(gamingAppsIndex) && + isGamingAppsInstalled + ) { if (!nodes.some((node) => node.id === 'gaming_apps')) { const rootNode = 'blockchain'; - const thisDapp = bridgesAsADapp; + const thisDapp = gamingAppsAsADapp; let nodesData = nodes; const newNodeId = 'gaming_apps'; const newNode: DappNode = { diff --git a/src/modules/blockchains/Buy/hooks/useOnlyFetchDapp.ts b/src/modules/blockchains/Buy/hooks/useOnlyFetchDapp.ts index 2f7545331..025de2e4d 100644 --- a/src/modules/blockchains/Buy/hooks/useOnlyFetchDapp.ts +++ b/src/modules/blockchains/Buy/hooks/useOnlyFetchDapp.ts @@ -78,6 +78,8 @@ const useOnlyFetchDapp = () => { _dapps.push(...otherDapps); + console.log('[useOnlyFetchDapp] dapps', _dapps); + const sortedDapps = _dapps.sort((a, b) => a.order - b.order); setDapps(preDataAirdropTask(sortedDapps, tokens, airdropTasks)); diff --git a/src/modules/blockchains/Buy/mockup_3.ts b/src/modules/blockchains/Buy/mockup_3.ts index 7343cca7f..9a1995ff9 100644 --- a/src/modules/blockchains/Buy/mockup_3.ts +++ b/src/modules/blockchains/Buy/mockup_3.ts @@ -81,7 +81,7 @@ export const bridgesAsADapp: DappModel = { key: 'bridge_apps', title: 'Bridges', icon: 'https://storage.googleapis.com/bvm-network/icons-tool/icon-issue-a-token.svg', - order: 2, + order: 1, color: '#855AFF', color_border: '#855AFF', created_at: '2021-09-14T09:00:00.000Z', @@ -120,7 +120,7 @@ export const gamingAppsAsADapp: DappModel = { key: 'gaming_apps', title: 'Gaming Apps', icon: 'https://storage.googleapis.com/bvm-network/icons-tool/icon-issue-a-token.svg', - order: 3, + order: 1, color: '#FFB800', color_border: '#FFB800', created_at: '2021-09-14T09:00:00.000Z', diff --git a/src/modules/blockchains/Buy/studio/Main/ChainInforView.tsx b/src/modules/blockchains/Buy/studio/Main/ChainInforView.tsx index 873620f81..2a74ffd27 100644 --- a/src/modules/blockchains/Buy/studio/Main/ChainInforView.tsx +++ b/src/modules/blockchains/Buy/studio/Main/ChainInforView.tsx @@ -24,9 +24,9 @@ const ChainInforView = (): ReactElement => { const menuEditItemOnClick = (menuItem: MenuEditItemType) => { switch (menuItem.value) { - case MenuEditItemEnum.ABC: + case MenuEditItemEnum.UpdateYourChainInfor: { - //TO DO ABC + //TO DO } break; case MenuEditItemEnum.ConfigYourDAppsDomain: diff --git a/src/modules/blockchains/Buy/studio/ReactFlowRender/index.tsx b/src/modules/blockchains/Buy/studio/ReactFlowRender/index.tsx index 2a8232035..c0b608c7f 100644 --- a/src/modules/blockchains/Buy/studio/ReactFlowRender/index.tsx +++ b/src/modules/blockchains/Buy/studio/ReactFlowRender/index.tsx @@ -57,12 +57,12 @@ const ReactFlowRenderer = React.memo(() => { } }); - console.log('[ReactFlowRenderer]', { - nodes, - draggedDappIndexesSignal: draggedDappIndexesSignal.value, - draggedIds2DSignal: draggedIds2DSignal.value, - formDappSignal: formDappSignal.value, - }); + // console.log('[ReactFlowRenderer]', { + // nodes, + // draggedDappIndexesSignal: draggedDappIndexesSignal.value, + // draggedIds2DSignal: draggedIds2DSignal.value, + // formDappSignal: formDappSignal.value, + // }); React.useEffect(() => { if (!isFirstLoadTemplateBox) return; diff --git a/src/modules/blockchains/detail_v2/components/Header/HeaderLeftView.tsx b/src/modules/blockchains/detail_v2/components/Header/HeaderLeftView.tsx index 15c6205a4..ffbdc9ca7 100644 --- a/src/modules/blockchains/detail_v2/components/Header/HeaderLeftView.tsx +++ b/src/modules/blockchains/detail_v2/components/Header/HeaderLeftView.tsx @@ -37,7 +37,7 @@ const HeaderLeftView = (props: Props) => { const menuEditItemOnClick = (menuItem: MenuEditItemType) => { switch (menuItem.value) { - case MenuEditItemEnum.ABC: + case MenuEditItemEnum.UpdateYourChainInfor: { // TO DO // Show Modal update your chain infor diff --git a/src/modules/blockchains/detail_v2/components/MenuEdit/index.tsx b/src/modules/blockchains/detail_v2/components/MenuEdit/index.tsx index 9de998114..f57d59f62 100644 --- a/src/modules/blockchains/detail_v2/components/MenuEdit/index.tsx +++ b/src/modules/blockchains/detail_v2/components/MenuEdit/index.tsx @@ -12,8 +12,7 @@ import { import MenuEditItem from './MenuEditItem'; export enum MenuEditItemEnum { - // UpdateYourChainInfor = 0, - ABC = 0, + UpdateYourChainInfor = 0, ConfigYourDAppsDomain, } @@ -24,11 +23,11 @@ export type MenuEditItemType = { }; const MenuEditItemList: MenuEditItemType[] = [ - // { - // key: 'A', - // value: MenuEditItemEnum.ABC, - // title: 'ABC Title', - // }, + { + key: 'A', + value: MenuEditItemEnum.UpdateYourChainInfor, + title: 'Update your chain', + }, { key: 'B', value: MenuEditItemEnum.ConfigYourDAppsDomain, diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index ab6fbc13a..8cfaa5321 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -262,39 +262,40 @@ export function isLocalhost() { function handleStatusEdgeByBox(status: any) { switch (status) { - case "draft": - case "setting_up": + case 'draft': + case 'setting_up': case EAirdropStatus.new: case '': //draft return { animate: true, icon: '', - } - // down - case "down": - case "run_out": + }; + // down + case 'down': + case 'run_out': case EAirdropStatus.ended: - case "stopped": + case 'stopped': return { animate: true, icon: 'true', - } - //run + }; + //run default: return { animate: false, icon: '', - } + }; } } export default function handleStatusEdges(statusDapp: any, status: aa, idNode: string) { - if(idNode === 'account-abstraction' || idNode === 'bridge_apps') { - return handleStatusEdgeByBox(status) + if (idNode === 'account_abstraction' || idNode === 'bridge_apps') { + console.log('status here', status); + return handleStatusEdgeByBox(status); } - return handleStatusEdgeByBox(statusDapp) + return handleStatusEdgeByBox(statusDapp); } -type aa = "draft" | "running" | "down" | 'setting_up' | EAirdropStatus +type aa = 'draft' | 'running' | 'down' | 'setting_up' | EAirdropStatus