Create custom field for data type

tact-lang · Nov 4, 2023 · ad0110e · ad0110e
1 parent 693c01d
commit ad0110e
Show file tree

Hide file tree

Showing 19 changed files with 774 additions and 119 deletions.
diff --git a/src/components/dashboard/DashboardSidebar/DashboardSidebar.tsx b/src/components/dashboard/DashboardSidebar/DashboardSidebar.tsx
@@ -19,13 +19,13 @@ const DashboardSidebar: FC<Props> = ({ className }) => {
       <div className={s.menuItems}>
         <div>
           <span className={`${s.name} ${s.item}`}>Welcome 👋</span>
-          <span
+          {/* <span
             className={`${s.name} ${s.item}`}
             onClick={() => startOnboarding(0)}
           >
             <AppIcon name="Play" />
             Start help wizard
-          </span>
+          </span> */}
           <Link
             className={`${s.name} ${s.item}`}
             href="https://docs.nujan.io/"

diff --git a/src/components/project/NewProject/NewProject.tsx b/src/components/project/NewProject/NewProject.tsx
@@ -30,9 +30,12 @@ const NewProject: FC = () => {
   ];
 
   const templatedList = [
-    { label: 'Blank Contract', value: 'tonBlank' },
+    // { label: 'Blank Contract', value: 'tonBlank' },
     { label: 'Counter Contract', value: 'tonCounter' },
+    { label: 'NFT Contract', value: 'nft', lang: 'tact' },
+
     { label: 'Import Contract', value: 'import' },
+
     // { label: 'Chat Bot Contract', value: 'chatBot' },
   ];
 

diff --git a/src/components/workspace/ABIUi/ABIUi.tsx b/src/components/workspace/ABIUi/ABIUi.tsx
@@ -32,7 +32,10 @@ const ABIUi: FC<Props> = ({
     if (['cell', 'slice'].includes(item.type)) {
       return [item.type, 'address'];
     }
-    return [item.type];
+    if (typeof item.type === 'string') {
+      return [item.type];
+    }
+    return [(item.type as any).type];
   });
 
   const [isLoading, setIsLoading] = useState(false);
@@ -56,7 +59,7 @@ const ABIUi: FC<Props> = ({
 
       const callableFunction = type === 'Getter' ? callGetter : callSetter;
 
-      const getterReponse = await callableFunction(
+      const response = await callableFunction(
         contractAddress,
         abi.name,
         contract as any,
@@ -66,8 +69,12 @@ const ABIUi: FC<Props> = ({
         network
       );
 
-      if (getterReponse) {
-        createLog(JSON.stringify(getterReponse));
+      if (response?.logs) {
+        for (const log of response?.logs) {
+          createLog(log);
+        }
+      } else {
+        createLog(JSON.stringify(response));
       }
     } catch (error: any) {
       console.log('error', error);
@@ -90,30 +97,50 @@ const ABIUi: FC<Props> = ({
   return (
     <div className={s.root}>
       <Form className={s.form} onFinish={onSubmit}>
-        {abi.parameters.map((item: ABIParameter, i: number) => (
-          <div key={i}>
-            <Form.Item
-              name={[i, item.name, 'type']}
-              className={`${s.formItemABI} ${s.formItemType}}`}
-              rules={[{ required: true, message: 'Please select type' }]}
-            >
-              <Select placeholder="select type">
-                {possiblesTypes[i].map((type, _j) => (
-                  <Option key={`${i}-${_j}`} value={type}>
-                    {type}
-                  </Option>
-                ))}
-              </Select>
-            </Form.Item>
-            <Form.Item
-              name={[i, item.name, 'value']}
-              className={s.formItemABI}
-              rules={[{ required: true, message: 'Please input value' }]}
-            >
-              <Input placeholder={`${item.name}: ${item.type}`} />
-            </Form.Item>
-          </div>
-        ))}
+        {abi.parameters.map((item: ABIParameter, i: number) => {
+          if (item.name === 'queryId') {
+            return (
+              <Form.Item
+                key={i}
+                name={[i, item.name, 'type']}
+                className={`${s.formItemABI} ${s.formItemType}}`}
+                rules={[{ required: true, message: 'Please select type' }]}
+              >
+                <Input type="hidden" value={0} />
+              </Form.Item>
+            );
+          }
+          return (
+            <div key={i}>
+              <Form.Item
+                name={[i, item.name, 'type']}
+                className={`${s.formItemABI} ${s.formItemType}}`}
+                rules={[{ required: true, message: 'Please select type' }]}
+              >
+                <Select placeholder="select type">
+                  {possiblesTypes[i].map((type, _j) => (
+                    <Option key={`${i}-${_j}`} value={type}>
+                      {type}
+                    </Option>
+                  ))}
+                </Select>
+              </Form.Item>
+              <Form.Item
+                name={[i, item.name, 'value']}
+                className={s.formItemABI}
+                rules={[{ required: true, message: 'Please input value' }]}
+              >
+                <Input
+                  placeholder={`${item.name}: ${
+                    typeof item.type === 'string'
+                      ? item.type
+                      : (item.type as any).type
+                  }`}
+                />
+              </Form.Item>
+            </div>
+          );
+        })}
 
         <Button
           className={s.btnAction}

diff --git a/src/components/workspace/BuildProject/BuildProject.module.scss b/src/components/workspace/BuildProject/BuildProject.module.scss
@@ -2,7 +2,7 @@
   padding: 1rem;
   width: 100%;
   height: 100vh;
-  // overflow-y: auto;
+  overflow-y: auto;
   .heading {
     opacity: 0.6;
     margin-bottom: 0.5rem;

diff --git a/src/components/workspace/BuildProject/BuildProject.tsx b/src/components/workspace/BuildProject/BuildProject.tsx
@@ -9,17 +9,57 @@ import { getContractLINK } from '@/utility/utils';
 import { Network } from '@orbs-network/ton-access';
 import { Blockchain } from '@ton-community/sandbox';
 import { CHAIN, useTonConnectUI } from '@tonconnect/ui-react';
-import { Button, Form, Input, Select } from 'antd';
+import { Button, Form, Select } from 'antd';
 import Link from 'next/link';
 import { FC, useEffect, useRef, useState } from 'react';
-import { Cell } from 'ton-core';
+import { Address, Cell } from 'ton-core';
 import ContractInteraction from '../ContractInteraction';
 import ExecuteFile from '../ExecuteFile/ExecuteFile';
 import OpenFile from '../OpenFile/OpenFile';
 import s from './BuildProject.module.scss';
 
+import {
+  AddressInput,
+  AmountInput,
+  BoolInput,
+  BufferInput,
+  CellInput,
+  NullInput,
+  StringInput,
+} from '../abiInputs';
 import { globalWorkspace } from '../globalWorkspace';
 
+const fields = (type: String) => {
+  if (
+    type.includes('int') ||
+    type == 'Int' ||
+    type == 'bigint | number' ||
+    type == 'number | bigint'
+  )
+    return AmountInput;
+  switch (type) {
+    case 'Address':
+      return AddressInput;
+    case 'Bool':
+      return BoolInput;
+    case 'Buffer':
+      return BufferInput;
+    case 'bigint':
+    case 'number':
+      return AmountInput;
+    case 'string':
+      return StringInput;
+    case 'Cell':
+    case 'Builder':
+    case 'Slice':
+      return CellInput;
+    case 'null':
+      return NullInput;
+    default:
+      return StringInput;
+  }
+};
+
 interface Props {
   projectId: string;
   onCodeCompile: (codeBOC: string) => void;
@@ -75,20 +115,21 @@ const BuildProject: FC<Props> = ({
         <Form className={s.form} onFinish={initDeploy}>
           {activeProject?.initParams && (
             <div>
-              {activeProject?.initParams?.map((item, index) => (
-                <Form.Item
-                  className={s.formItem}
-                  key={index}
-                  name={item.name}
-                  rules={[{ required: !item.optional }]}
-                >
-                  <Input
+              {activeProject?.initParams?.map((item, index) => {
+                if (item.name === 'queryId') return <></>;
+                const Field = fields(item.type);
+                return (
+                  <Field
+                    key={index}
+                    className={s.formItem}
+                    name={item.name}
                     placeholder={`${item.name}: ${item.type}${
                       item.optional ? '?' : ''
                     }`}
+                    rules={[{ required: !item.optional }]}
                   />
-                </Form.Item>
-              ))}
+                );
+              })}
             </div>
           )}
           <Button
@@ -111,11 +152,41 @@ const BuildProject: FC<Props> = ({
     if (_temp.queryId) {
       delete _temp.queryId;
     }
+    const initParamsData = activeProject?.initParams;
+    let parametrsType: any = {};
+    if (initParamsData) {
+      parametrsType = initParamsData.reduce(
+        (acc: any, curr) => ((acc[curr.name] = curr.type), acc),
+        {}
+      );
+    }
 
     for (const [key, value] of Object.entries(_temp)) {
-      if (value) {
+      const type = parametrsType[key];
+      console.log(key, value);
+      if (
+        type.includes('int') ||
+        type == 'Int' ||
+        type == 'bigint | number' ||
+        type == 'number | bigint'
+      ) {
         initParams += `BigInt(${value}),`;
+        continue;
       }
+      // if (value) {
+      switch (type) {
+        case 'Address':
+          initParams += eval(
+            `(Address) => { return Address.parse(${value}"; }`
+          )(Address);
+          continue;
+        case 'Bool':
+          initParams += `${!!value},`;
+          continue;
+      }
+      if (parametrsType[key] == 'Address') {
+      }
+      // }
     }
     initParams = initParams.slice(0, -1);
 
@@ -140,10 +211,7 @@ const BuildProject: FC<Props> = ({
   };
 
   const deploy = async () => {
-    createLog(
-      `Deploying contract with code BOC -  ${activeProject?.contractBOC}`,
-      'info'
-    );
+    createLog(`Deploying contract ...`, 'info');
     try {
       if (sandboxBlockchain && environment === 'SANDBOX') {
         const blockchain = await Blockchain.create();
@@ -157,7 +225,11 @@ const BuildProject: FC<Props> = ({
           false
         );
       }
-      const { address: _contractAddress, contract } = await deployContract(
+      const {
+        address: _contractAddress,
+        contract,
+        logs,
+      } = await deployContract(
         activeProject?.contractBOC as string,
         buildOutput?.dataCell as any,
         environment.toLowerCase() as Network,
@@ -176,6 +248,12 @@ const BuildProject: FC<Props> = ({
         )}`,
         'success'
       );
+
+      for (let i = 0; i < (logs || []).length; i++) {
+        if (!logs?.[i]) continue;
+        createLog(logs[i], 'info', false);
+      }
+
       if (!_contractAddress) {
         return;
       }

diff --git a/src/components/workspace/WorkSpace/WorkSpace.tsx b/src/components/workspace/WorkSpace/WorkSpace.tsx
@@ -65,7 +65,7 @@ const WorkSpace: FC = () => {
     console.log = (...args) => {
       originalConsoleLog(...args); // Call the original console.log
       const _log = args.join(' ');
-      if (!_log.includes('DEBUG')) {
+      if (!_log.includes('DEBUG') || activeProject?.language === 'tact') {
         return;
       }
       const splittedLog = _log.split('\n');

diff --git a/src/components/workspace/abiInputs/Address.tsx b/src/components/workspace/abiInputs/Address.tsx
@@ -0,0 +1,40 @@
+import { Form, Input } from 'antd';
+import { Rule, RuleObject } from 'antd/es/form';
+import { Address } from 'ton-core';
+
+interface Props {
+  name?: string;
+  placeholder?: string;
+  className?: string;
+  rules?: Rule[];
+}
+
+const AddressInput = ({
+  name = 'address',
+  placeholder = 'EQDPK...0nYxC',
+  className = '',
+  rules = [],
+}: Props) => {
+  const fieldRules = [
+    ...rules,
+    () => ({
+      validator(_rule: RuleObject, value: string) {
+        if (!value) return Promise.resolve();
+        try {
+          Address.parse(value);
+        } catch {
+          return Promise.reject('Invalid Address');
+        }
+
+        return Promise.resolve();
+      },
+    }),
+  ];
+  return (
+    <Form.Item name={name} rules={fieldRules} className={className}>
+      <Input placeholder={placeholder} />
+    </Form.Item>
+  );
+};
+
+export default AddressInput;