Add verification feature

src/api/hooks/useVerificationCheck.ts

@@ -0,0 +1,32 @@
+import {useCallback} from "react";
+import {useGlobalState} from "../../global-config/GlobalConfig";
+import {VerificationStatus} from "../../constants";
+
+export interface AptosVerificationCheckDto {
+  network: string;
+  account: string;
+  moduleName: string;
+  status?: VerificationStatus;
+  errMsg?: string;
+}
+const useVerificationChecker = () => {
+  const [, , endpoint] = useGlobalState();
+
+  return useCallback(
+    async (params: {
+      network: string;
+      account: string;
+      moduleName: string;
+    }): Promise<AptosVerificationCheckDto> => {
+      const queryString = new URLSearchParams(params).toString();
+      const res = await fetch(`${endpoint}?${queryString}`);
+      if (!res.ok) {
+        throw new Error("Verification service is not working.");
+      }
+      return res.json();
+    },
+    [endpoint],
+  );
+};
+
+export default useVerificationChecker;

src/api/hooks/useVerificationRequester.ts

@@ -0,0 +1,39 @@
+import {useCallback} from "react";
+import {useGlobalState} from "../../global-config/GlobalConfig";
+
+export interface AptosVerificationResultDto {
+  network: string;
+  account: string;
+  moduleName: string;
+  errMsg?: string;
+  status?: "VERIFIED_SAME" | "VERIFIED_DIFFERENT" | "NOT_VERIFIED";
+  onChainByteCode?: string;
+  compiledByteCode?: string;
+}
+
+const useVerificationRequester = () => {
+  const [, , endpoint] = useGlobalState();
+
+  return useCallback(
+    async (body: {
+      network: string;
+      account: string;
+      moduleName: string;
+    }): Promise<AptosVerificationResultDto> => {
+      const res = await fetch(endpoint, {
+        method: "post",
+        body: JSON.stringify(body),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      if (!res.ok) {
+        throw new Error("Verification service is not working.");
+      }
+      return res.json();
+    },
+    [endpoint],
+  );
+};
+
+export default useVerificationRequester;

src/constants.tsx

@@ -19,6 +19,14 @@ export function isValidNetworkName(value: string): value is NetworkName {
   return value in networks;
 }
 
+export const defaultVerificationServiceUrl =
+  "https://verify.welldonestudio.io/aptos";
+
+export type VerificationStatus =
+  | "VERIFIED_SAME"
+  | "VERIFIED_DIFFERENT"
+  | "NOT_VERIFIED";
+
 export enum Network {
   MAINNET = "mainnet",
   TESTNET = "testnet",

src/global-config/GlobalConfig.tsx

@@ -1,10 +1,11 @@
 import {AptosClient, IndexerClient} from "aptos";
-import React, {useMemo} from "react";
+import React, {Dispatch, SetStateAction, useMemo, useState} from "react";
 import {
   FeatureName,
   NetworkName,
   defaultNetworkName,
   networks,
+  defaultVerificationServiceUrl,
 } from "../constants";
 import {
   getSelectedFeatureFromLocalStorage,
@@ -59,6 +60,12 @@ const initialGlobalState = deriveGlobalState({
 
 export const GlobalStateContext = React.createContext(initialGlobalState);
 export const GlobalActionsContext = React.createContext({} as GlobalActions);
+export const GlobalVerificationApiContext = React.createContext<string>(
+  defaultVerificationServiceUrl,
+);
+export const GlobalVerificationApiDispatchContext = React.createContext<
+  Dispatch<SetStateAction<string>>
+>(() => {});
 
 export const GlobalStateProvider = ({
   children,
@@ -67,6 +74,8 @@ export const GlobalStateProvider = ({
 }) => {
   const [selectedFeature, selectFeature] = useFeatureSelector();
   const [selectedNetwork, selectNetwork] = useNetworkSelector();
+  const [endpoint, setEndpoint] = useState(defaultVerificationServiceUrl);
+
   const globalState: GlobalState = useMemo(
     () =>
       deriveGlobalState({
@@ -87,7 +96,11 @@ export const GlobalStateProvider = ({
   return (
     <GlobalStateContext.Provider value={globalState}>
       <GlobalActionsContext.Provider value={globalActions}>
-        {children}
+        <GlobalVerificationApiContext.Provider value={endpoint}>
+          <GlobalVerificationApiDispatchContext.Provider value={setEndpoint}>
+            {children}
+          </GlobalVerificationApiDispatchContext.Provider>
+        </GlobalVerificationApiContext.Provider>
       </GlobalActionsContext.Provider>
     </GlobalStateContext.Provider>
   );
@@ -97,4 +110,6 @@ export const useGlobalState = () =>
   [
     React.useContext(GlobalStateContext),
     React.useContext(GlobalActionsContext),
+    React.useContext(GlobalVerificationApiContext),
+    React.useContext(GlobalVerificationApiDispatchContext),
   ] as const;

src/pages/Account/Components/CodeSnippet.tsx

@@ -18,6 +18,17 @@
 } from "../../../themes/colors/aptosColorPalette";
 import {useParams} from "react-router-dom";
 import {useLogEventWithBasic} from "../hooks/useLogEventWithBasic";
+import {useGlobalState} from "../../../global-config/GlobalConfig";
+import {VerificationStatus} from "../../../constants";
+import useVerificationChecker, {
+  AptosVerificationCheckDto,
+} from "../../../api/hooks/useVerificationCheck";
+import VerificationButton from "./VerificationButton";
+import VerificationServiceUrlInput from "./VerificationServiceUrlInput";
+import {
+  CODE_DESCRIPTION_NOT_VERIFIED,
+  genCodeDescription,
+} from "./codeDescription";
 
 function useStartingLineNumber(sourceCode?: string) {
   const functionToHighlight = useParams().selectedFnName;
@@ -106,7 +117,7 @@
 }
 
 export function Code({bytecode}: {bytecode: string}) {
-  const {selectedModuleName} = useParams();
+  const {address, selectedModuleName} = useParams();
   const logEvent = useLogEventWithBasic();
 
   const TOOLTIP_TIME = 2000; // 2s
@@ -116,6 +127,16 @@
   const theme = useTheme();
   const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
 
+  const checkVerification = useVerificationChecker();
+  const [state, , verificationServiceEndpoint] = useGlobalState();
+  const [codeDescription, setCodeDescription] = useState<string>(
+    CODE_DESCRIPTION_NOT_VERIFIED,
+  );
+  const [verificationStatus, setVerificationStatus] =
+    useState<VerificationStatus>("NOT_VERIFIED");
+  const [verificationServerErr, setVerificationServerErr] =
+    useState<string>("");
+
   async function copyCode() {
     if (!sourceCode) return;
 
@@ -134,7 +155,36 @@
       codeBoxScrollRef.current.scrollTop =
         LINE_HEIGHT_IN_PX * startingLineNumber;
     }
-  });
+
+    if (state.network_name && address && selectedModuleName) {
+      checkVerification({
+        network: state.network_name,
+        account: address,
+        moduleName: selectedModuleName,
+      })
+        .then((dto: AptosVerificationCheckDto) => {
+          if (dto.errMsg) {
+            setVerificationStatus("NOT_VERIFIED");
+            setVerificationServerErr(`${dto.errMsg}`);
+          }
+
+          if (!dto.status) {
+            setVerificationStatus("NOT_VERIFIED");
+            return;
+          }
+
+          setVerificationStatus(dto.status);
+          setCodeDescription(genCodeDescription(dto.status));
+          setVerificationServerErr("");
+        })
+        .catch((reason: Error) => {
+          console.error(reason);
+          setVerificationStatus("NOT_VERIFIED");
+          setCodeDescription(genCodeDescription("NOT_VERIFIED"));
+          setVerificationServerErr("Verification service is not working.");
+        });
+    }
+  }, [address, selectedModuleName, verificationServiceEndpoint]);
 
   return (
     <Box>
@@ -155,6 +205,27 @@
             Code
           </Typography>
           <StyledLearnMoreTooltip text="Please be aware that this code was provided by the owner and it could be different to the real code on blockchain. We can not not verify it." />
+          <Stack>
+            <Stack
+              direction="row"
+              spacing={1}
+              alignItems={"center"}
+              justifyContent="center"
+            >
+              <VerificationButton
+                network={state.network_name}
+                account={address}
+                moduleName={selectedModuleName}
+                verificationStatus={verificationStatus}
+                setVerificationServerErr={setVerificationServerErr}
+                setVerificationStatus={setVerificationStatus}
+                setCodeDescription={setCodeDescription}
+              />
+              <VerificationServiceUrlInput
+                verificationServerErr={verificationServerErr}
+              />
+            </Stack>
+          </Stack>
         </Stack>
         {sourceCode && (
           <Stack direction="row" spacing={2}>
@@ -204,8 +275,7 @@
           marginBottom={"16px"}
           color={theme.palette.mode === "dark" ? grey[400] : grey[600]}
         >
-          The source code is plain text uploaded by the deployer, which can be
-          different from the actual bytecode.
+          {codeDescription}
         </Typography>
       )}
       {!sourceCode ? (

src/pages/Account/Components/VerificationButton.tsx

@@ -0,0 +1,109 @@
+import React, {useState} from "react";
+import {Button, CircularProgress} from "@mui/material";
+import useVerificationRequester from "../../../api/hooks/useVerificationRequester";
+import {VerificationStatus} from "../../../constants";
+import {genCodeDescription} from "./codeDescription";
+
+interface VerificationButtonProps {
+  network: string;
+  account?: string;
+  moduleName?: string;
+  verificationStatus?: VerificationStatus;
+  setVerificationStatus: React.Dispatch<
+    React.SetStateAction<VerificationStatus>
+  >;
+  setVerificationServerErr: React.Dispatch<React.SetStateAction<string>>;
+  setCodeDescription: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export default function VerificationButton({
+  network,
+  account,
+  moduleName,
+  verificationStatus,
+  setVerificationStatus,
+  setVerificationServerErr,
+  setCodeDescription,
+}: VerificationButtonProps) {
+  const [isInProgress, setIsInProgress] = useState(false);
+  const verificationRequester = useVerificationRequester();
+
+  const verifyClick = () => {
+    if (!(account && moduleName)) {
+      return;
+    }
+    setIsInProgress(true);
+    verificationRequester({
+      network: network,
+      account: account,
+      moduleName: moduleName,
+    })
+      .then((dto) => {
+        setIsInProgress(false);
+        if (dto.errMsg) {
+          setVerificationStatus("NOT_VERIFIED");
+          setVerificationServerErr(`${dto.errMsg}`);
+        }
+
+        if (!dto.status) {
+          setVerificationStatus("NOT_VERIFIED");
+          return;
+        }
+
+        setVerificationStatus(dto.status);
+        setCodeDescription(genCodeDescription(dto.status));
+        setVerificationServerErr("");
+      })
+      .catch((reason: Error) => {
+        console.error(reason);
+        setVerificationStatus("NOT_VERIFIED");
+        setCodeDescription(genCodeDescription("NOT_VERIFIED"));
+        setVerificationServerErr("Verification service is not working.");
+      })
+      .finally(() => {
+        setIsInProgress(false);
+      });
+  };
+
+  if (verificationStatus === "VERIFIED_DIFFERENT") {
+    return (
+      <Button
+        type="submit"
+        disabled={true}
+        variant="contained"
+        sx={{width: "10rem", height: "3rem"}}
+      >
+        <span style={{color: "red"}}>No Match</span>
+      </Button>
+    );
+  }
+
+  if (verificationStatus === "VERIFIED_SAME") {
+    return (
+      <Button
+        type="submit"
+        disabled={true}
+        variant="contained"
+        sx={{width: "10rem", height: "3rem"}}
+      >
+        <span style={{color: "green"}}>Match</span>
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      type="submit"
+      disabled={isInProgress}
+      variant="contained"
+      sx={{width: "10rem", height: "3rem"}}
+      onClick={verifyClick}
+    >
+      {verificationStatus === undefined || isInProgress ? (
+        <CircularProgress size={30}></CircularProgress>
+      ) : (
+        "Verify"
+      )}
+    </Button>
+  );
+}