update MoveCall

zktx-io · Dec 11, 2024 · 422c3b9 · 422c3b9
1 parent 44be91d
commit 422c3b9
Show file tree

Hide file tree

Showing 17 changed files with 374 additions and 171 deletions.
diff --git a/packages/ptb-builder/src/Components/ContextMenu.tsx b/packages/ptb-builder/src/Components/ContextMenu.tsx
@@ -182,6 +182,31 @@ export const ContextMenu = ({
               </li>
             ))}
             <div className="border-t border-gray-300 dark:border-stone-700 my-1" />
+            {Menu.utilities.map((item, key) => (
+              <li key={`0-${key}`} className="relative group">
+                <div
+                  className={`${MenuStyle} flex justify-between items-center`}
+                >
+                  {item.name}
+                  <svg
+                    className="w-4 h-4 ml-2"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M9 5l7 7-7 7"
+                    />
+                  </svg>
+                </div>
+                <ul className={MenuSubStyle}>
+                  {renderMenuItems(item.submenu)}
+                </ul>
+              </li>
+            ))}
             {renderMenuItems(Menu.transactions)}
           </>
         )}

diff --git a/packages/ptb-builder/src/Components/Menu.data.tsx b/packages/ptb-builder/src/Components/Menu.data.tsx
@@ -82,9 +82,45 @@ export const PTB = {
     Type: PTBNodeType.String,
     Name: 'string',
   },
-  MakeMoveVec: {
+  MakeMoveVecAddress: {
     Type: PTBNodeType.MakeMoveVec,
-    Name: 'make move vector',
+    Name: 'vector<address>',
+  },
+  MakeMoveVecBool: {
+    Type: PTBNodeType.MakeMoveVec,
+    Name: 'vector<bool>',
+  },
+  MakeMoveVecObject: {
+    Type: PTBNodeType.MakeMoveVec,
+    Name: 'vector<object>',
+  },
+  MakeMoveVecString: {
+    Type: PTBNodeType.MakeMoveVec,
+    Name: 'vector<string>',
+  },
+  MakeMoveVecU8: {
+    Type: PTBNodeType.MakeMoveVec,
+    Name: 'vector<u8>',
+  },
+  MakeMoveVecU16: {
+    Type: PTBNodeType.MakeMoveVec,
+    Name: 'vector<u16>',
+  },
+  MakeMoveVecU32: {
+    Type: PTBNodeType.MakeMoveVec,
+    Name: 'vector<u32>',
+  },
+  MakeMoveVecU64: {
+    Type: PTBNodeType.MakeMoveVec,
+    Name: 'vector<u64>',
+  },
+  MakeMoveVecU128: {
+    Type: PTBNodeType.MakeMoveVec,
+    Name: 'vector<u128>',
+  },
+  MakeMoveVecU256: {
+    Type: PTBNodeType.MakeMoveVec,
+    Name: 'vector<u256>',
   },
   MergeCoins: {
     Type: PTBNodeType.MergeCoins,
@@ -127,6 +163,10 @@ export const Menu: {
     name: string;
     submenu: MenuItem[];
   }[];
+  utilities: {
+    name: string;
+    submenu: MenuItem[];
+  }[];
   transactions: MenuItem[];
   node: MenuItem[];
   edge: MenuItem[];
@@ -152,6 +192,61 @@ export const Menu: {
         },
       ],
     },
+    {
+      name: 'Object',
+      submenu: [
+        {
+          name: PTB.ObjectGas.Name,
+          type: PTB.ObjectGas.Type,
+          icon: <IconCircle color="bg-blue-500" />,
+        },
+        {
+          name: PTB.Object.Name,
+          type: PTB.Object.Type,
+          icon: <IconCircle color="bg-blue-500" />,
+        },
+        {
+          name: PTB.ObjectArray.Name,
+          type: PTB.ObjectArray.Type,
+          icon: <IconSquare color="bg-blue-500" />,
+        },
+        {
+          name: PTB.ObjectVector.Name,
+          type: PTB.ObjectVector.Type,
+          icon: <IconTriangle color="text-blue-500" />,
+        },
+      ],
+    },
+    {
+      name: 'Boolean',
+      submenu: [
+        {
+          name: PTB.Bool.Name,
+          type: PTB.Bool.Type,
+          icon: <IconCircle color="bg-pink-500" />,
+        },
+        {
+          name: PTB.BoolArray.Name,
+          type: PTB.BoolArray.Type,
+          icon: <IconSquare color="bg-pink-500" />,
+        },
+        {
+          name: PTB.BoolVector.Name,
+          type: PTB.BoolVector.Type,
+          icon: <IconTriangle color="text-pink-500" />,
+        },
+      ],
+    },
+    {
+      name: 'String',
+      submenu: [
+        {
+          name: PTB.String.Name,
+          type: PTB.String.Type,
+          icon: <IconCircle color="bg-green-500" />,
+        },
+      ],
+    },
     {
       name: 'Number',
       submenu: [
@@ -197,58 +292,60 @@ export const Menu: {
         },
       ],
     },
+  ],
+  utilities: [
     {
-      name: 'String',
+      name: 'make move vec',
       submenu: [
         {
-          name: PTB.String.Name,
-          type: PTB.String.Type,
-          icon: <IconCircle color="bg-green-500" />,
+          name: PTB.MakeMoveVecAddress.Name,
+          type: PTB.MakeMoveVecAddress.Type,
+          icon: <IconTriangle color="text-yellow-500" />,
         },
-      ],
-    },
-    {
-      name: 'Object',
-      submenu: [
         {
-          name: PTB.ObjectGas.Name,
-          type: PTB.ObjectGas.Type,
-          icon: <IconCircle color="bg-blue-500" />,
+          name: PTB.MakeMoveVecBool.Name,
+          type: PTB.MakeMoveVecBool.Type,
+          icon: <IconTriangle color="text-pink-500" />,
         },
         {
-          name: PTB.Object.Name,
-          type: PTB.Object.Type,
-          icon: <IconCircle color="bg-blue-500" />,
+          name: PTB.MakeMoveVecObject.Name,
+          type: PTB.MakeMoveVecObject.Type,
+          icon: <IconTriangle color="text-blue-500" />,
         },
         {
-          name: PTB.ObjectArray.Name,
-          type: PTB.ObjectArray.Type,
-          icon: <IconSquare color="bg-blue-500" />,
+          name: PTB.MakeMoveVecString.Name,
+          type: PTB.MakeMoveVecString.Type,
+          icon: <IconTriangle color="text-green-500" />,
         },
         {
-          name: PTB.ObjectVector.Name,
-          type: PTB.ObjectVector.Type,
-          icon: <IconTriangle color="text-blue-500" />,
+          name: PTB.MakeMoveVecU8.Name,
+          type: PTB.MakeMoveVecU8.Type,
+          icon: <IconTriangle color="text-red-500" />,
         },
-      ],
-    },
-    {
-      name: 'Boolean',
-      submenu: [
         {
-          name: PTB.Bool.Name,
-          type: PTB.Bool.Type,
-          icon: <IconCircle color="bg-pink-500" />,
+          name: PTB.MakeMoveVecU16.Name,
+          type: PTB.MakeMoveVecU16.Type,
+          icon: <IconTriangle color="text-red-500" />,
         },
         {
-          name: PTB.BoolArray.Name,
-          type: PTB.BoolArray.Type,
-          icon: <IconSquare color="bg-pink-500" />,
+          name: PTB.MakeMoveVecU32.Name,
+          type: PTB.MakeMoveVecU32.Type,
+          icon: <IconTriangle color="text-red-500" />,
         },
         {
-          name: PTB.BoolVector.Name,
-          type: PTB.BoolVector.Type,
-          icon: <IconTriangle color="text-pink-500" />,
+          name: PTB.MakeMoveVecU64.Name,
+          type: PTB.MakeMoveVecU64.Type,
+          icon: <IconTriangle color="text-red-500" />,
+        },
+        {
+          name: PTB.MakeMoveVecU128.Name,
+          type: PTB.MakeMoveVecU128.Type,
+          icon: <IconTriangle color="text-red-500" />,
+        },
+        {
+          name: PTB.MakeMoveVecU256.Name,
+          type: PTB.MakeMoveVecU256.Type,
+          icon: <IconTriangle color="text-red-500" />,
         },
       ],
     },

diff --git a/packages/ptb-builder/src/Components/MoveCallArg.tsx b/packages/ptb-builder/src/Components/MoveCallArg.tsx
@@ -1,23 +1,17 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 
-import { PtbHandle, PtbHandleVector } from '../PTBFlow/nodes/handles';
+import {
+  PtbHandle,
+  PtbHandleArray,
+  PtbHandleVector,
+} from '../PTBFlow/nodes/handles';
+import { TYPE_ARRAY, TYPE_PARAMS, TYPE_VECTOR } from '../PTBFlow/nodes/isType';
 import { FormStyle, InputStyle, LabelStyle } from '../PTBFlow/nodes/styles';
 import { PREFIX } from '../utilities/getMoveCallFuncArg';
 
 export interface FuncArg {
   id: string;
-  type:
-    | 'address'
-    | 'bool'
-    | 'object'
-    | 'number'
-    | 'vector<u8>'
-    | 'vector<u16>'
-    | 'vector<u32>'
-    | 'vector<u64>'
-    | 'vector<u128>'
-    | 'vector<u256>'
-    | undefined;
+  type: TYPE_PARAMS | TYPE_ARRAY | TYPE_VECTOR | undefined;
   placeHolder: string;
   value: string;
 }
@@ -60,7 +54,19 @@ export const MoveCallArg = ({
           name={`${PREFIX}${index}`}
           style={{ top: `${yPosition + index * 42}px` }}
         />
-      ) : arg.type === 'vector<u8>' ||
+      ) : arg.type === 'address[]' ||
+        arg.type === 'bool[]' ||
+        arg.type === 'object[]' ||
+        arg.type === 'number[]' ? (
+        <PtbHandleArray
+          typeHandle={typeHandle}
+          typeParams={arg.type}
+          node={node}
+          name={`${PREFIX}${index}`}
+          style={{ top: `${yPosition + index * 42}px` }}
+        />
+      ) : arg.type === 'vector<object>' ||
+        arg.type === 'vector<u8>' ||
         arg.type === 'vector<u16>' ||
         arg.type === 'vector<u32>' ||
         arg.type === 'vector<u64>' ||

diff --git a/packages/ptb-builder/src/PTBFlow/edges/Data.tsx b/packages/ptb-builder/src/PTBFlow/edges/Data.tsx
@@ -5,21 +5,6 @@ import { BaseEdge, EdgeProps, getBezierPath } from '@xyflow/react';
 import { useStateContext } from '../../Provider';
 import { HandleStyles } from '../nodes/styles';
 
-const numericTypes = new Set([
-  'u8',
-  'u16',
-  'u32',
-  'u64',
-  'u128',
-  'u256',
-  'vector<u8>',
-  'vector<u16>',
-  'vector<u32>',
-  'vector<u64>',
-  'vector<u128>',
-  'vector<u256>',
-]);
-
 export const Data = ({
   id,
   sourceX,
@@ -41,10 +26,11 @@ export const Data = ({
   });
   const { colorMode } = useStateContext();
   const getColor = (type: string): string => {
-    if (numericTypes.has(type)) {
-      return HandleStyles.number.border;
+    const match = type.match(/^vector<([^>]+)>$|^([^[]+)\[\]$|^([^[]+)$/);
+    if (match) {
+      return (HandleStyles as any)[match[1] || match[2] || match[3]].border;
     }
-    return (HandleStyles as any)[type].border;
+    return '';
   };
 
   const glowColor =
@@ -62,9 +48,7 @@ export const Data = ({
       <BaseEdge
         id={id}
         path={edgePath}
-        className={getColor(
-          sourceHandleId!.split(':')[1].replace('[]', '').toLowerCase(),
-        )}
+        className={getColor(sourceHandleId!.split(':')[1].toLowerCase())}
         style={{
           strokeWidth: 3,
           strokeDasharray: selected ? '5,5' : 'none',

diff --git a/packages/ptb-builder/src/PTBFlow/nodes/transactions/MakeMoveVec.tsx b/packages/ptb-builder/src/PTBFlow/nodes/transactions/MakeMoveVec.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
 
 import { PTBNodeProp } from '..';
-import { PtbHandle, PtbHandleArray, PtbHandleProcess } from '../handles';
+import {
+  PtbHandle,
+  PtbHandleArray,
+  PtbHandleProcess,
+  PtbHandleVector,
+} from '../handles';
 import { NodeStyles } from '../styles';
 
 export const MakeMoveVec = ({ id, data }: PTBNodeProp) => {
@@ -18,10 +23,20 @@ export const MakeMoveVec = ({ id, data }: PTBNodeProp) => {
       />
       <PtbHandleArray
         typeHandle="target"
-        typeParams="object[]"
+        typeParams={
+          data.label
+            .replace(/^vector<u(8|16|32|64|128|256)>$/, 'number[]')
+            .replace(/^vector<(.+)>$/, '$1[]') as any
+        }
         name="source"
         style={{ left: '65%' }}
       />
+      <PtbHandleVector
+        typeHandle="source"
+        typeParams={data.label as any}
+        name="result"
+        node="transactions"
+      />
       <PtbHandleProcess typeHandle="target" />
       <PtbHandleProcess typeHandle="source" />
     </div>