FRO-752: Verify Contract - Contract Address & Verification Method

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1187](https://github.com/alleslabs/celatone-frontend/pull/1187) Add onboarding section to EVM contract details page and add EVM contract verify page
 - [#1184](https://github.com/alleslabs/celatone-frontend/pull/1184) Add custom layer to Initia Widget
 - [#1182](https://github.com/alleslabs/celatone-frontend/pull/1182) Add Initia Widget
 

src/lib/amplitude/types.ts

@@ -55,6 +55,7 @@ export enum AmpEvent {
   TO_CONTRACT_DETAILS = "To Contract Detail",
   TO_CODE_DETAILS = "To Code Detail",
   TO_EVM_CONTRACT_DETAILS = "To EVM Contract Detail",
+  TO_EVM_CONTRACT_VERIFY = "To EVM Contract Verify",
   TO_PROJECT_DETAILS = "To Public Project Detail",
   TO_EVM_TRANSACTION_DETAILS = "To EVM Transaction Detail",
   TO_TRANSACTION_DETAILS = "To Transaction Detail",

src/lib/components/evm-verify-section/NotVerifiedDetails.tsx

@@ -0,0 +1,53 @@
+import { Button, Flex, Text } from "@chakra-ui/react";
+
+import { useInternalNavigate } from "lib/app-provider";
+import type { HexAddr20 } from "lib/types";
+
+interface NotVerifiedDetailsProps {
+  contractAddress: HexAddr20;
+}
+
+export const NotVerifiedDetails = ({
+  contractAddress,
+}: NotVerifiedDetailsProps) => {
+  const navigate = useInternalNavigate();
+
+  const handleNavigate = () =>
+    navigate({
+      pathname: "/evm-contracts/verify",
+      query: { contractAddress },
+    });
+
+  return (
+    <Flex
+      pl={6}
+      justifyContent="space-between"
+      alignItems="center"
+      w="full"
+      borderColor="primary.main"
+      borderLeftWidth={4}
+      gap={2}
+    >
+      <Text variant="body2" color="text.dark">
+        This contract has not been verified. If you are the owner, you can{" "}
+        <Text
+          as="span"
+          cursor="pointer"
+          color="primary.main"
+          transition="all 0.25s ease-in-out"
+          _hover={{
+            textDecoration: "underline",
+            textDecorationColor: "primary.light",
+          }}
+          onClick={handleNavigate}
+        >
+          verify it
+        </Text>{" "}
+        to allow other users to view the source code
+      </Text>
+      <Button variant="ghost-primary" size="sm" onClick={handleNavigate}>
+        Verify contract
+      </Button>
+    </Flex>
+  );
+};

src/lib/components/evm-verify-section/index.ts

@@ -0,0 +1 @@
+export * from "./NotVerifiedDetails";

src/lib/components/forms/SelectInput.tsx

@@ -1,3 +1,4 @@
+import { Flex, Stack, Text } from "@chakra-ui/react";
 import type { SystemStyleObject } from "@chakra-ui/styled-system";
 import type { Props } from "chakra-react-select";
 import { Select } from "chakra-react-select";
@@ -13,7 +14,10 @@ export interface SelectInputOption<OptionValue extends SelectInputOptionValue> {
 interface SelectInputProps<
   OptionValue extends SelectInputOptionValue,
   IsMulti extends boolean = false,
-> extends Props<SelectInputOption<OptionValue>, IsMulti> {}
+> extends Props<SelectInputOption<OptionValue>, IsMulti> {
+  label?: string;
+  isRequired?: boolean;
+}
 
 const handleFilterOption = (
   candidate: { label: string; value: string },
@@ -48,60 +52,90 @@ export const SelectInput = <
   onFocus,
   autoFocus,
   classNamePrefix,
+  label,
+  isRequired,
+  isDisabled,
 }: SelectInputProps<OptionValue, IsMulti>) => (
-  <Select<SelectInputOption<OptionValue>, IsMulti>
-    menuPosition="fixed"
-    menuPortalTarget={menuPortalTarget}
-    placeholder={placeholder}
-    options={options}
-    value={value}
-    onChange={onChange}
-    size={size}
-    filterOption={handleFilterOption}
-    formatOptionLabel={formatOptionLabel}
-    components={components}
-    isSearchable={isSearchable}
-    chakraStyles={{
-      container: (provided: SystemStyleObject) => ({
-        ...provided,
-        width: "100%",
-      }),
-      valueContainer: (provided: SystemStyleObject) => ({
-        ...provided,
-        pl: 3,
-        pr: 0,
-      }),
-      dropdownIndicator: (provided: SystemStyleObject) => ({
-        ...provided,
-        px: 2,
-        color: "gray.600",
-      }),
-      placeholder: (provided: SystemStyleObject) => ({
-        ...provided,
-        color: "gray.500",
-        fontSize: "14px",
-        whiteSpace: "nowrap",
-      }),
-      option: (provided) => ({
-        ...provided,
-        color: "text.main",
-        fontSize: "16px",
-        _hover: {
-          bg: "gray.700",
-        },
-        _selected: {
-          bg: "gray.800",
-        },
-      }),
-      ...chakraStyles,
-    }}
-    inputId={inputId}
-    name={name}
-    isMulti={isMulti}
-    closeMenuOnSelect={closeMenuOnSelect}
-    onBlur={onBlur}
-    onFocus={onFocus}
-    autoFocus={autoFocus}
-    classNamePrefix={classNamePrefix}
-  />
+  <Stack position="relative">
+    {label && (
+      <Text
+        className="form-label"
+        sx={{
+          fontSize: "12px",
+          color: "text.dark",
+          letterSpacing: "0.15px",
+          position: "absolute",
+          ml: 3,
+          px: 1,
+          bg: "background.main",
+          top: -2,
+          zIndex: 1,
+          "::after": {
+            content: isRequired ? '"* (Required)"' : '""',
+            color: "error.main",
+            ml: 1,
+          },
+          opacity: isDisabled ? 0.3 : 1,
+        }}
+      >
+        {label}
+      </Text>
+    )}
+    <Select<SelectInputOption<OptionValue>, IsMulti>
+      menuPosition="fixed"
+      menuPortalTarget={menuPortalTarget}
+      placeholder={placeholder}
+      options={options}
+      value={value}
+      isDisabled={isDisabled}
+      onChange={onChange}
+      size={size}
+      filterOption={handleFilterOption}
+      formatOptionLabel={formatOptionLabel}
+      components={components}
+      isSearchable={isSearchable}
+      chakraStyles={{
+        container: (provided: SystemStyleObject) => ({
+          ...provided,
+          width: "100%",
+        }),
+        valueContainer: (provided: SystemStyleObject) => ({
+          ...provided,
+          pl: 3,
+          pr: 0,
+        }),
+        dropdownIndicator: (provided: SystemStyleObject) => ({
+          ...provided,
+          px: 2,
+          color: "gray.600",
+        }),
+        placeholder: (provided: SystemStyleObject) => ({
+          ...provided,
+          color: "gray.500",
+          fontSize: "14px",
+          whiteSpace: "nowrap",
+        }),
+        option: (provided) => ({
+          ...provided,
+          color: "text.main",
+          fontSize: "16px",
+          _hover: {
+            bg: "gray.700",
+          },
+          _selected: {
+            bg: "gray.800",
+          },
+        }),
+        ...chakraStyles,
+      }}
+      inputId={inputId}
+      name={name}
+      isMulti={isMulti}
+      closeMenuOnSelect={closeMenuOnSelect}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      autoFocus={autoFocus}
+      classNamePrefix={classNamePrefix}
+    />
+  </Stack>
 );

src/lib/hooks/index.ts

@@ -13,3 +13,4 @@ export * from "./useGetMaxLengthError";
 export * from "./useLocalStorage";
 export * from "./useUploadCode";
 export * from "./useTxBroadcast";
+export * from "./useStepper";

src/lib/hooks/useStepper.ts

@@ -0,0 +1,48 @@
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useEffect } from "react";
+
+export const useStepper = (
+  total: number,
+  handleSubmit: () => void,
+  handleBack?: () => void
+) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const currentStep = searchParams.get("step") ?? "1";
+
+  useEffect(() => {
+    if (Number(currentStep) === 1) return;
+    const params = new URLSearchParams(searchParams);
+    params.set("step", "1");
+    router.replace(`${pathname}?${params.toString()}`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleNext = useCallback(() => {
+    const params = new URLSearchParams(searchParams);
+    params.set("step", String(Number(currentStep) + 1));
+
+    return currentStep && Number(currentStep) < total
+      ? router.replace(`${pathname}?${params.toString()}`)
+      : handleSubmit();
+  }, [currentStep, handleSubmit, total, pathname, router, searchParams]);
+
+  const handlePrevious = useCallback(() => {
+    const params = new URLSearchParams(searchParams);
+    params.set("step", String(Number(currentStep) - 1));
+
+    return currentStep && Number(currentStep) > 1
+      ? router.replace(`${pathname}?${params.toString()}`)
+      : (handleBack?.() ?? router.back());
+  }, [currentStep, pathname, router, searchParams, handleBack]);
+
+  return {
+    currentStepIndex: Number(currentStep) - 1,
+    handleNext,
+    handlePrevious,
+    hasNext: Number(currentStep) < total,
+    hasPrevious: Number(currentStep) > 1,
+  };
+};

src/lib/pages/custom-network/manual/components/AddNetworkStepper.tsx

@@ -1,6 +1,6 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import { getStepStyles } from "../hooks/utils";
+import { getStepStyles } from "../helpers";
 
 const steps = [
   { label: "Network Details" },

src/lib/pages/custom-network/manual/index.tsx

@@ -13,18 +13,23 @@ import {
   zWalletRegistryForm,
 } from "../types";
 import type { AddNetworkManualForm } from "../types";
-import { useAllowCustomNetworks, useChainConfigs } from "lib/app-provider";
+import {
+  useAllowCustomNetworks,
+  useChainConfigs,
+  useInternalNavigate,
+} from "lib/app-provider";
 import ActionPageContainer from "lib/components/ActionPageContainer";
 import { CustomIcon } from "lib/components/icon";
 import { FooterCta } from "lib/components/layouts";
 import { CelatoneSeo } from "lib/components/Seo";
 import { useLocalChainConfigStore } from "lib/providers/store";
 
 import { AddNetworkForm, AddNetworkStepper } from "./components";
-import { useNetworkStepper } from "./hooks/useNetworkStepper";
+import { useStepper } from "lib/hooks";
 
 export const AddNetworkManual = () => {
   useAllowCustomNetworks({ shouldRedirect: true });
+  const navigate = useInternalNavigate();
   const { isOpen, onClose, onOpen } = useDisclosure();
   const { addLocalChainConfig } = useLocalChainConfigStore();
   const { isChainIdExist } = useChainConfigs();
@@ -95,7 +100,9 @@ export const AddNetworkManual = () => {
   };
 
   const { currentStepIndex, handleNext, handlePrevious, hasNext, hasPrevious } =
-    useNetworkStepper(3, handleSubmit(handleSubmitForm));
+    useStepper(3, handleSubmit(handleSubmitForm), () =>
+      navigate({ pathname: "/custom-network/add" })
+    );
 
   const isFormDisabled = () => {
     if (currentStepIndex === 0)