Basic TOLK support in UI.

package.json

@@ -22,7 +22,7 @@
     "@orbs-network/ton-access": "^2.3.3",
     "@tact-lang/compiler": "^1.1.2",
     "@tanstack/react-query": "^4.13.0",
-    "@ton-community/contract-verifier-sdk": "1.3.1",
+    "@ton-community/contract-verifier-sdk": "1.4.0",
     "@ton-community/func-js": "^0.3.0",
     "@tonconnect/ui-react": "^1.0.0-beta.6",
     "bigint-buffer": "^1.1.5",

src/App.tsx

@@ -74,13 +74,13 @@ function App() {
   // Initialize func version
   const { initialize } = useCompilerSettingsStore(); // TODO IN PROG
   const {
-    data: { funcVersions },
+    data: { funcVersions, tolkVersions },
   } = useRemoteConfig();
   useEffect(() => {
     if ((funcVersions?.length ?? 0) > 0) {
-      initialize(funcVersions![0]);
+      initialize(funcVersions?.[0], tolkVersions?.[0]);
     }
-  }, [funcVersions]);
+  }, [funcVersions, tolkVersions]);
 
   return (
     <Box

src/components/CompilerBlock.tsx

@@ -4,11 +4,12 @@ import { useLoadContractProof } from "../lib/useLoadContractProof";
 
 import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en";
-import { funcVersionToLink, fiftVersionToLink, tactVersionToLink } from "../utils/linkUtils";
+import { funcVersionToLink, fiftVersionToLink, tactVersionToLink, tolkVersionToLink, dropPatchVersionZero } from "../utils/linkUtils";
 import {
   FiftCliCompileSettings,
   FuncCompilerSettings,
   TactCliCompileSettings,
+  TolkCliCompileSettings,
 } from "@ton-community/contract-verifier-sdk";
 
 TimeAgo.addDefaultLocale(en);
@@ -50,8 +51,16 @@ export function CompilerBlock() {
         color: "#0088CC",
         customLink: tactVersionToLink(tactVersion),
       });
+    } else if (data.compiler === "tolk") {
+        const tolkVersion = (compilerSettings as TolkCliCompileSettings)?.tolkVersion;
+          dataRows.push({
+            title: "Version",
+            value: dropPatchVersionZero(tolkVersion),
+            color: "#0088CC",
+            customLink: tolkVersionToLink(tolkVersion),
+          });
     }
-    if (data.compiler !== "tact") {
+    if (data.compiler == "func") {
       dataRows.push({
         title: "Command",
         // @ts-ignore

src/components/CompilerSettings.tsx

@@ -14,6 +14,8 @@ import {
   FuncCompilerVersion,
   TactCliCompileSettings,
   TactVersion,
+  TolkCliCompileSettings,
+  TolkVersion,
 } from "@ton-community/contract-verifier-sdk";
 import { useRemoteConfig } from "../lib/useRemoteConfig";
 import { tactVersionToLink } from "../utils/linkUtils";
@@ -24,6 +26,7 @@ function CompilerSettings() {
     setOverrideCommandLine,
     setFuncCliVersion,
     setTactCliVersion,
+    setTolkVersion,
     compiler,
     setCompiler,
   } = useCompilerSettingsStore();
@@ -34,7 +37,7 @@ function CompilerSettings() {
   const canPublish = !!data?.result?.msgCell;
 
   const {
-    data: { funcVersions, tactVersions },
+    data: { funcVersions, tactVersions, tolkVersions },
   } = useRemoteConfig();
 
   return (
@@ -58,6 +61,7 @@ function CompilerSettings() {
               }}>
               <MenuItem value={"func"}>func</MenuItem>
               <MenuItem value={"tact"}>tact</MenuItem>
+              <MenuItem value={"tolk"}>tolk</MenuItem>
               {import.meta.env.VITE_ALLOW_FIFT && <MenuItem value={"fift"}>fift</MenuItem>}
             </CompilerSelect>
           </CompilerFormControl>
@@ -136,6 +140,28 @@ function CompilerSettings() {
             </CenteringBox>
           </>
         )}
+        {compiler === "tolk" && (
+          <>
+            <CenteringBox
+              mb={isSmallScreen ? 1 : 0}
+              sx={{ width: isSmallScreen ? "100%" : "inherit" }}>
+              <CompilerFormControl disabled={canPublish}>
+                <CompilerLabel>Version</CompilerLabel>
+                <CompilerSelect
+                  value={(compilerSettings as TolkCliCompileSettings).tolkVersion}
+                  onChange={(e) => {
+                    setTolkVersion(e.target.value as TolkVersion);
+                  }}>
+                  {tolkVersions?.map((version) => (
+                    <MenuItem key={version} value={version}>
+                      {version}
+                    </MenuItem>
+                  ))}
+                </CompilerSelect>
+              </CompilerFormControl>
+            </CenteringBox>
+          </>
+        )}
       </CenteringBox>
     </Box>
   );

src/components/FileUploaderArea.tsx

@@ -104,7 +104,7 @@ export function FileUploaderArea() {
           id="fileUpload"
           type="file"
           multiple
-          accept=".fc,.func,.fif"
+          accept={acceptedFileExtensions.join(",")}
           // ref={inputRef}
           // @ts-ignore
         />

src/lib/useCompilerSettingsStore.ts

@@ -2,11 +2,15 @@ import { useEffect } from "react";
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 import { useFileStore } from "./useFileStore";
-import { FuncCompilerVersion, TactVersion } from "@ton-community/contract-verifier-sdk";
+import {
+  FuncCompilerVersion,
+  TactVersion,
+  TolkVersion,
+} from "@ton-community/contract-verifier-sdk";
 import { PackageFileFormat } from "@tact-lang/compiler";
 import { useRemoteConfig } from "./useRemoteConfig";
 
-export type Compiler = "func" | "fift" | "tact";
+export type Compiler = "func" | "fift" | "tact" | "tolk";
 
 export type UserProvidedFuncCompileSettings = {
   funcVersion: FuncCompilerVersion;
@@ -18,23 +22,35 @@ export type UserProvidedTactCompileSettings = {
   tactVersion: TactVersion;
 };
 
+export type UserProvidedTolkCompilerSettings = {
+  tolkVersion: TolkVersion;
+};
+
 type State = {
   compiler: Compiler;
-  compilerSettings: UserProvidedFuncCompileSettings | UserProvidedTactCompileSettings;
+  compilerSettings:
+    | UserProvidedFuncCompileSettings
+    | UserProvidedTactCompileSettings
+    | UserProvidedTolkCompilerSettings;
   _defaultFuncVersion: FuncCompilerVersion;
+  _defaultTolkVersion: TolkVersion;
 };
 
 type DerivedState = {};
 
 type Actions = {
   setCompilerSettings: (
-    settings: UserProvidedFuncCompileSettings | UserProvidedTactCompileSettings,
+    settings:
+      | UserProvidedFuncCompileSettings
+      | UserProvidedTactCompileSettings
+      | UserProvidedTolkCompilerSettings,
   ) => void;
   setOverrideCommandLine: (overrideCommandLine: string | null) => void;
   setFuncCliVersion: (funcVersion: FuncCompilerVersion) => void;
   setTactCliVersion: (tactVersion: TactVersion) => void;
+  setTolkVersion: (tolkVersion: TolkVersion) => void;
   setCompiler: (compiler: Compiler) => void;
-  initialize: (defaultFuncVersion: FuncCompilerVersion) => void;
+  initialize: (defaultFuncVersion: FuncCompilerVersion, defaultTolkVersion: TolkVersion) => void;
 };
 
 const _useCompilerSettingsStore = create(
@@ -43,13 +59,15 @@ const _useCompilerSettingsStore = create(
     compiler: "func" as Compiler,
     compilerSettings: { funcVersion: "", commandLine: "" } as UserProvidedFuncCompileSettings,
     _defaultFuncVersion: "",
+    _defaultTolkVersion: "",
 
     // Derived
 
     // Actions
-    initialize: (defaultFuncVersion: FuncCompilerVersion) => {
+    initialize: (defaultFuncVersion: FuncCompilerVersion, defaultTolkVersion: TolkVersion) => {
       set((state) => {
         state._defaultFuncVersion = defaultFuncVersion;
+        state._defaultTolkVersion = defaultTolkVersion;
 
         // TODO resolve this duplicity of logic with setCompiler
         state.compilerSettings = {
@@ -61,7 +79,10 @@ const _useCompilerSettingsStore = create(
     },
 
     setCompilerSettings: (
-      settings: UserProvidedFuncCompileSettings | UserProvidedTactCompileSettings,
+      settings:
+        | UserProvidedFuncCompileSettings
+        | UserProvidedTactCompileSettings
+        | UserProvidedTolkCompilerSettings,
     ) => {
       set((state) => {
         state.compilerSettings = settings;
@@ -96,6 +117,15 @@ const _useCompilerSettingsStore = create(
       });
     },
 
+    setTolkVersion: (tolkVersion: TolkVersion) => {
+      set((state) => {
+        if (state.compiler !== "tolk") {
+          throw new Error("not tolk compiler");
+        }
+        state.compilerSettings = { tolkVersion };
+      });
+    },
+
     setCompiler: (compiler: Compiler) => {
       set((state) => {
         state.compiler = compiler;
@@ -107,6 +137,10 @@ const _useCompilerSettingsStore = create(
           };
         } else if (compiler === "tact") {
           state.compilerSettings = { tactVersion: "" };
+        } else if (compiler === "tolk") {
+          state.compilerSettings = {
+            tolkVersion: state._defaultTolkVersion,
+          };
         }
       });
     },
@@ -130,19 +164,23 @@ export function useCompilerSettingsStore() {
     return `-SPA ${cmd}`;
   }
 
-  // Tact version setter
+  // Tact/Tolk version setter
   useEffect(() => {
-    const file = files.find((f) => f.fileObj.name.endsWith(".pkg"));
+    const tactPkgFile = files.find((f) => f.fileObj.name.endsWith(".pkg"));
+    const tolkFile = files.find((f) => f.fileObj.name.endsWith(".tolk"));
     (async () => {
-      if (!file) return;
-      const raw = await file.fileObj.text();
-      const pkgParsed: PackageFileFormat = JSON.parse(raw);
-      compilerStore.setCompiler("tact");
-      // TODO show in UI
-      if (!tactVersions.includes(pkgParsed.compiler.version)) {
-        throw new Error("Unsupported tact version " + pkgParsed.compiler.version);
+      if (tactPkgFile) {
+        const raw = await tactPkgFile.fileObj.text();
+        const pkgParsed: PackageFileFormat = JSON.parse(raw);
+        compilerStore.setCompiler("tact");
+        // TODO show in UI
+        if (!tactVersions.includes(pkgParsed.compiler.version)) {
+          throw new Error("Unsupported tact version " + pkgParsed.compiler.version);
+        }
+        compilerStore.setCompilerSettings({ tactVersion: pkgParsed.compiler.version });
+      } else if (tolkFile) {
+        compilerStore.setCompiler("tolk");
       }
-      compilerStore.setCompilerSettings({ tactVersion: pkgParsed.compiler.version });
     })();
   }, [files]);
 

src/lib/useFileStore.tsx

@@ -3,7 +3,7 @@ import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 import { AnalyticsAction, sendAnalyticsEvent } from "./googleAnalytics";
 
-export let acceptedFileExtensions = ["fc", "func", "pkg"];
+export let acceptedFileExtensions = ["fc", "func", "pkg", "tolk"];
 if (import.meta.env.VITE_ALLOW_FIFT) acceptedFileExtensions.push("fift");
 
 export type FileToUpload = {
@@ -52,7 +52,9 @@ export const useFileStore = create(
             includeInCommand: true,
             folder: folders.slice(0, folders.length - 1).join("/"),
             hasIncludeDirectives: content.includes("#include"),
-            isEntrypoint: /\(\)\s*(recv_internal|main)\s*\(/.test(content),
+            isEntrypoint:
+              /\(\)\s*(recv_internal|recv_external|main)\s*\(/.test(content) ||
+              /fun (onInternalMessage|onExternalMessage)\s*\(/.test(content),
             isStdlib: /stdlib.(fc|func)/i.test(f.name),
           };
         }),

src/lib/useLoadVerifierRegistryInfo.tsx

@@ -6,14 +6,18 @@ import { useLoadSourcesRegistryInfo } from "./useLoadSourcesRegistryInfo";
 
 export function useLoadVerifierRegistryInfo() {
   const { data: sourceRegistryData } = useLoadSourcesRegistryInfo();
-  return useQuery(["verifierRegistry", sourceRegistryData?.verifierRegistry], async () => {
-    const tc = await getClient();
-    const contract = tc.open(
-      VerifierRegistryContract.createFromAddress(
-        Address.parse(sourceRegistryData!.verifierRegistry),
-      ),
-    );
-    const verifiers = await contract.getVerifiers();
-    return verifiers;
-  });
+  return useQuery(
+    ["verifierRegistry", sourceRegistryData?.verifierRegistry],
+    async () => {
+      const tc = await getClient();
+      const contract = tc.open(
+        VerifierRegistryContract.createFromAddress(
+          Address.parse(sourceRegistryData!.verifierRegistry),
+        ),
+      );
+      const verifiers = await contract.getVerifiers();
+      return verifiers;
+    },
+    { enabled: !!sourceRegistryData },
+  );
 }

src/lib/useRemoteConfig.ts

@@ -10,15 +10,16 @@ export function useRemoteConfig() {
   return useQuery(
     ["remoteConfig"],
     async () => {
-      const { funcVersions, tactVersions } = await (await fetch(configURL)).json();
+      const { funcVersions, tactVersions, tolkVersions } = await (await fetch(configURL)).json();
 
       setEnabled(false);
 
       return {
         funcVersions: funcVersions as string[],
         tactVersions: tactVersions as string[],
+        tolkVersions: tolkVersions as string[],
       };
     },
-    { enabled, initialData: { funcVersions: [], tactVersions: [] } },
+    { enabled, initialData: { funcVersions: [], tactVersions: [], tolkVersions: [] } },
   );
 }