support for multiple verifiers [continue]

Author: klpx

package-lock.json

@@ -21,7 +21,7 @@
     "@mui/material": "^5.10.10",
     "@orbs-network/ton-access": "^2.3.3",
     "@tact-lang/compiler": "^1.1.2",
-    "@tanstack/react-query": "^4.13.0",
+    "@tanstack/react-query": "^5.90.12",
     "@ton-community/contract-verifier-sdk": "1.4.0",
     "@ton-community/func-js": "^0.3.0",
     "@tonconnect/ui-react": "^1.0.0-beta.6",

package.json

@@ -17,11 +17,11 @@ const ContentBox = styled(Box)({
   padding: "15px 24px",
 });
 
-export function AddSourcesBlock() {
+export function AddSourcesBlock({ contractAddress }: { contractAddress: string }) {
   const walletAddress = useTonAddress();
   const { hasFiles } = useFileStore();
   const { step, proceedToPublish, toggleSection, currentSection } = usePublishStore();
-  const { mutate, data, error, isLoading, compileStatus } = useSubmitSources();
+  const { mutate, data, error, isLoading, compileStatus } = useSubmitSources(contractAddress);
 
   const canPublish = !!data?.result?.msgCell;
 
@@ -40,11 +40,11 @@ export function AddSourcesBlock() {
             <>
               {hasFiles() && (
                 <>
-                  <FileTable />
-                  <CompilerSettings />
+                  <FileTable canPublish={canPublish} />
+                  <CompilerSettings canPublish={canPublish} />
                 </>
               )}
-              {(data || error) && <CompileOutput />}
+              {(data || error) && <CompileOutput contractAddress={contractAddress} />}
               {hasFiles() && (
                 <CenteringBox sx={{ justifyContent: "center" }} mt={3} mb="9px">
                   {!walletAddress ? (

src/components/AddSourcesBlock.tsx

@@ -52,8 +52,8 @@ export const ErrorRowValue = styled(DataRowValue)({
   fontWeight: 400,
 });
 
-export function CompileOutput() {
-  const { data: submitSourcesData, error } = useSubmitSources();
+export function CompileOutput({ contractAddress }: { contractAddress: string }) {
+  const { data: submitSourcesData, error } = useSubmitSources(contractAddress);
   const { data: contractInfoData } = useLoadContractInfo();
 
   const compileResult = submitSourcesData?.result?.compileResult;

src/components/CompileOutput.tsx

@@ -1,77 +1,90 @@
 import compilerIcon from "../assets/compiler.svg";
 import { DataBlock, DataRowItem } from "./DataBlock";
-import { useLoadContractProof } from "../lib/useLoadContractProof";
-
+import {
+  findProofByVerifierName,
+  getFirstAvailableProof,
+  useLoadContractProof,
+} from "../lib/useLoadContractProof";
 import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en";
-import { funcVersionToLink, fiftVersionToLink, tactVersionToLink, tolkVersionToLink, dropPatchVersionZero } from "../utils/linkUtils";
+import {
+  funcVersionToLink,
+  fiftVersionToLink,
+  tactVersionToLink,
+  tolkVersionToLink,
+  dropPatchVersionZero,
+} from "../utils/linkUtils";
 import {
   FiftCliCompileSettings,
   FuncCompilerSettings,
   TactCliCompileSettings,
   TolkCliCompileSettings,
 } from "@ton-community/contract-verifier-sdk";
+import { useLoadVerifierRegistryInfo } from "../lib/useLoadVerifierRegistryInfo";
 
 TimeAgo.addDefaultLocale(en);
 
 export function CompilerBlock() {
-  const { data } = useLoadContractProof();
+  const { data: proofs } = useLoadContractProof();
+  const { data: verifierRegistry } = useLoadVerifierRegistryInfo();
+  const proof =
+    findProofByVerifierName(proofs, verifierRegistry, "verifier.ton.org") ??
+    getFirstAvailableProof(proofs);
 
-  const compilerSettings = data!.compilerSettings;
+  const compilerSettings = proof?.compilerSettings;
 
   const dataRows: DataRowItem[] = [];
 
-  if (data) {
+  if (proof) {
     dataRows.push({
       title: "Compiler",
-      value: `${data!.compiler!}`,
+      value: `${proof.compiler ?? ""}`,
     });
 
-    if (data.compiler === "func") {
+    if (proof.compiler === "func") {
       const funcVersion = (compilerSettings as FuncCompilerSettings)?.funcVersion;
       dataRows.push({
         title: "Version",
         value: funcVersion,
         color: "#0088CC",
         customLink: funcVersion && funcVersionToLink(funcVersion),
       });
-    } else if (data.compiler === "fift") {
+    } else if (proof.compiler === "fift") {
       const fiftVersion = (compilerSettings as FiftCliCompileSettings)?.fiftVersion;
       dataRows.push({
         title: "Version",
         value: fiftVersion,
         color: "#0088CC",
         customLink: fiftVersionToLink(fiftVersion),
       });
-    } else if (data.compiler === "tact") {
+    } else if (proof.compiler === "tact") {
       const tactVersion = (compilerSettings as TactCliCompileSettings)?.tactVersion;
       dataRows.push({
         title: "Version",
         value: tactVersion,
         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),
-          });
+    } else if (proof.compiler === "tolk") {
+      const tolkVersion = (compilerSettings as TolkCliCompileSettings)?.tolkVersion;
+      dataRows.push({
+        title: "Version",
+        value: dropPatchVersionZero(tolkVersion),
+        color: "#0088CC",
+        customLink: tolkVersionToLink(tolkVersion),
+      });
     }
-    if (data.compiler == "func") {
+    if (proof.compiler === "func") {
       dataRows.push({
         title: "Command",
-        // @ts-ignore
-        value: compilerSettings?.commandLine,
+        value: (compilerSettings as FuncCompilerSettings)?.commandLine,
         showIcon: true,
         tooltip: true,
       });
     }
     dataRows.push({
       title: "Verified on",
-      value: data.verificationDate?.toLocaleDateString() ?? "",
+      value: proof.verificationDate?.toLocaleDateString() ?? "",
     });
   }
 

src/components/CompilerBlock.tsx

@@ -20,7 +20,7 @@ import {
 import { useRemoteConfig } from "../lib/useRemoteConfig";
 import { tactVersionToLink } from "../utils/linkUtils";
 
-function CompilerSettings() {
+function CompilerSettings({ canPublish }: { canPublish: boolean }) {
   const {
     compilerSettings,
     setOverrideCommandLine,
@@ -30,15 +30,13 @@ function CompilerSettings() {
     compiler,
     setCompiler,
   } = useCompilerSettingsStore();
-  const { data } = useSubmitSources();
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
 
-  const canPublish = !!data?.result?.msgCell;
-
-  const {
-    data: { funcVersions, tactVersions, tolkVersions },
-  } = useRemoteConfig();
+  const { data: remoteConfig } = useRemoteConfig();
+  const funcVersions = remoteConfig?.funcVersions ?? [];
+  const tactVersions = remoteConfig?.tactVersions ?? [];
+  const tolkVersions = remoteConfig?.tolkVersions ?? [];
 
   return (
     <Box mt={4}>

src/components/CompilerSettings.tsx

@@ -3,7 +3,7 @@ import { useContractAddress } from "../lib/useContractAddress";
 import { useLoadContractInfo } from "../lib/useLoadContractInfo";
 import contractIcon from "../assets/contract.svg";
 import { DataBlock, DataRowItem } from "./DataBlock";
-import { useLoadContractProof } from "../lib/useLoadContractProof";
+import { hasAnyOnchainProof, useLoadContractProof } from "../lib/useLoadContractProof";
 import { workchainForAddress } from "../lib/workchainForAddress";
 import { formatBalance } from "../utils/numberUtils";
 import { useEffect } from "react";
@@ -102,7 +102,7 @@ export function ContractBlock() {
       icon={contractIcon}
       dataRows={dataRows}
       isLoading={isLoading}
-      isFlexibleWrapper={!!proofData?.hasOnchainProof}
+      isFlexibleWrapper={hasAnyOnchainProof(proofData)}
     />
   );
 }

src/components/ContractBlock.tsx

@@ -14,12 +14,9 @@ import useNotification from "../lib/useNotification";
 import { Getters } from "./Getters";
 import { useLoadVerifierRegistryInfo } from "../lib/useLoadVerifierRegistryInfo";
 import { useContractAddress } from "../lib/useContractAddress";
-import { useLoadContractInfo } from "../lib/useLoadContractInfo";
-import { useQueries } from "@tanstack/react-query";
-import { loadProofData } from "../lib/useLoadContractProof";
-import { useIsTestnet } from "./TestnetBar";
 import { useSyncGetters } from "../lib/getter/useGetters";
 import { SourcesData } from "@ton-community/contract-verifier-sdk";
+import { ContractProofData, useLoadContractProof } from "../lib/useLoadContractProof";
 
 const TitleWrapper = styled(CenteringBox)({
   justifyContent: "space-between",
@@ -49,8 +46,6 @@ const SourceCodeTabs = styled(Tabs)({
   },
 });
 
-type ProofData = Partial<SourcesData> & { hasOnchainProof: boolean };
-
 type DomIds = {
   containerId: string;
   filesId: string;
@@ -63,41 +58,32 @@ type TabConfig =
       id: string;
       label: string;
       type: "sources";
-      proof: ProofData;
+      proof: ContractProofData;
       domIds: DomIds;
       getterKey: string;
     }
   | {
       id: string;
       label: string;
       type: "getters";
-      proof: ProofData;
+      proof: ContractProofData;
       getterKey: string;
     };
 
 function ContractSourceCode() {
   const { contractAddress } = useContractAddress();
-  const { data: contractInfo } = useLoadContractInfo(contractAddress);
   const { data: verifierRegistry } = useLoadVerifierRegistryInfo();
+  const { data: proofMap } = useLoadContractProof();
   const [value, setValue] = useState(0);
   const isExtraSmallScreen = useMediaQuery("(max-width: 450px)");
   const modifiedCodeBlock = useMediaQuery("(max-width: 600px)");
   const { showNotification } = useNotification();
-  const isTestnet = useIsTestnet();
 
   const verifierEntries = useMemo(() => Object.entries(verifierRegistry ?? {}), [verifierRegistry]);
 
-  const proofQueries = useQueries({
-    queries: verifierEntries.map(([id, config]) => ({
-      queryKey: ["verifierProof", contractAddress, id, isTestnet],
-      enabled: !!contractAddress && !!contractInfo?.codeCellToCompileBase64,
-      queryFn: () => loadProofData(contractInfo!.codeCellToCompileBase64, config.name, isTestnet),
-    })),
-  });
-
   const verifierProofs = useMemo(
     () =>
-      verifierEntries.map(([id, config], index) => {
+      verifierEntries.map(([id, config]) => {
         const safeKey = `${contractAddress ?? "unknown"}-${id}`.replace(/[^a-zA-Z0-9]/g, "-");
         return {
           id,
@@ -108,10 +94,10 @@ function ContractSourceCode() {
             filesId: `${safeKey}-files`,
             contentId: `${safeKey}-content`,
           },
-          proof: proofQueries[index]?.data as ProofData | undefined,
+          proof: proofMap?.get(id),
         };
       }),
-    [verifierEntries, proofQueries, contractAddress],
+    [verifierEntries, proofMap, contractAddress],
   );
 
   const tabs = useMemo<TabConfig[]>(() => {
@@ -265,7 +251,7 @@ function VerifierGettersPanel({
   isVisible,
 }: {
   getterKey: string;
-  proof: ProofData;
+  proof: ContractProofData;
   isVisible: boolean;
 }) {
   useSyncGetters(getterKey, proof?.files);