Add support for additional data types in Tact contract interaction wi…

…th enhanced UI/UX (#66) * Added support for additional data types: `Int`, `Bool`, `Address`, `Map`, `Struct`, `Message`, `Slice`, and `Cell`. * Enhanced field validation. * Implemented persistent storage of contract interaction form values for reusability.
tact-lang · Aug 9, 2024 · ea26f50 · ea26f50
1 parent 4331631
commit ea26f50
Show file tree

Hide file tree

Showing 22 changed files with 2,691 additions and 9,134 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "@minoru/react-dnd-treeview": "^3.4.1",
     "@monaco-editor/react": "^4.5.1",
     "@orbs-network/ton-access": "^2.3.0",
-    "@tact-lang/compiler": "^1.4.1",
+    "@tact-lang/compiler": "^1.4.0",
     "@ton-community/func-js": "^0.5.0",
     "@ton/core": "^0.56.3",
     "@ton/sandbox": "^0.16.0",
@@ -31,6 +31,7 @@
     "antd": "^5.2.3",
     "axios": "^1.6.7",
     "bn.js": "^5.2.1",
+    "change-case": "^5.4.4",
     "clsx": "^1.2.1",
     "dexie": "^3.2.3",
     "dexie-react-hooks": "^1.1.3",
@@ -57,6 +58,7 @@
     "recoil": "^0.7.7",
     "recoil-persist": "^4.2.0",
     "reconnecting-websocket": "^4.4.0",
+    "rollup": "^4.20.0",
     "sass": "^1.58.3",
     "ts-browser-eval": "^0.0.1",
     "typescript": "4.9.5",

diff --git a/src/components/workspace/ABIUi/ABIUi.module.scss b/src/components/workspace/ABIUi/ABIUi.module.scss
@@ -1,19 +1,44 @@
 .root {
   padding: 1rem 0px;
   position: relative;
-  &:before {
+  &:before,
+  &.tact .form:not(:last-child)::before {
     content: '';
     position: absolute;
-    bottom: 0;
+    bottom: -0.8rem;
     left: 0;
     right: 0;
     width: 5rem;
     height: 1px;
     margin: 0 auto;
     background-color: #373636;
   }
-  .formItemABI {
-    margin-bottom: 3px;
+  &.tact {
+    display: flex;
+    flex-direction: column;
+    gap: 1.6rem;
+    .form {
+      position: relative;
+      margin: 0;
+    }
+    &::before {
+      display: none;
+    }
+  }
+  .nestedForm {
+    margin: 0.5rem 0;
+    background: rgba(14, 14, 16, 0.9);
+    border-radius: 5px;
+    padding: 5px;
+
+    > div {
+      border-left: 0 !important;
+    }
+  }
+  .abiHeading {
+    font-weight: 600;
+    margin-bottom: 1rem;
+    color: rgba(186, 74, 255, 1);
   }
   .abiResponse {
     word-break: break-word;
@@ -55,6 +80,10 @@
           background: #101010;
         }
       }
+      &:disabled {
+        opacity: 0.5;
+        color: #fff;
+      }
 
       &:before {
         content: '';
@@ -70,3 +99,48 @@
     }
   }
 }
+
+.structName {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--primary);
+  padding: 5px;
+}
+
+.formItemABI {
+  margin-bottom: 3px;
+}
+
+.notes {
+  margin: 0.5rem 0;
+}
+
+.fieldList {
+  margin: 0.8rem 0;
+  .dictItem {
+    border: 1px solid var(--grey--50);
+    margin: 0.5rem 0.1rem;
+    border-radius: 6px;
+    background: var(--grey--10);
+    padding: 0.4rem;
+    border-style: dashed;
+  }
+  .addMoreField {
+    border-color: var(--grey--50);
+    width: 100%;
+    box-shadow: none;
+    background: var(--grey--10);
+    color: var(--light-grey);
+  }
+  .actions {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    button {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+    }
+  }
+}
diff --git a/src/components/workspace/ABIUi/ABIUi.tsx b/src/components/workspace/ABIUi/ABIUi.tsx
@@ -4,7 +4,6 @@ import { LogType } from '@/interfaces/log.interface';
 import {
   ABIField,
   ABIParameter,
-  ContractLanguage,
   NetworkEnvironment,
 } from '@/interfaces/workspace.interface';
 import { TupleItem } from '@ton/core';
@@ -15,12 +14,11 @@ import s from './ABIUi.module.scss';
 
 const { Option } = Select;
 
-interface Props {
+export interface ABIUiProps {
   abi: ABIField;
   contractAddress: string;
   network: NetworkEnvironment;
   contract: SandboxContract<UserContract> | null;
-  language?: ContractLanguage;
   type: 'Getter' | 'Setter';
 }
 
@@ -35,12 +33,11 @@ type FormValues = Record<
   >
 >;
 
-const ABIUi: FC<Props> = ({
+const ABIUi: FC<ABIUiProps> = ({
   abi,
   contractAddress,
   network,
   contract = null,
-  language = 'func',
   type,
 }) => {
   const possiblesTypes = (abi.parameters ?? []).map((item) => {
@@ -59,14 +56,8 @@ const ABIUi: FC<Props> = ({
 
   const onSubmit = async (formValues: FormValues) => {
     const stack = Object.values(formValues).map((param) => {
-      const formField = Object.entries(param);
-      const { type, value } = formField[0][1];
-      if (language === 'tact') {
-        return { type, value, name: formField[0][0] };
-      } else {
-        const { type, value } = Object.values(param)[0];
-        return { type: type, value: value };
-      }
+      const { type, value } = Object.values(param)[0];
+      return { type: type, value: value };
     });
 
     try {
@@ -78,7 +69,7 @@ const ABIUi: FC<Props> = ({
         contractAddress,
         abi.name,
         contract as SandboxContract<UserContract>,
-        language,
+        'func',
         abi.kind,
         stack as TupleItem[],
         network,