Feat(components): add EVM contract verify alert info

CHANGELOG.md

@@ -39,7 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#1240](https://github.com/alleslabs/celatone-frontend/pull/1222) Update social media handle and naming convention from Celatone to Scan
+- [#1244](https://github.com/alleslabs/celatone-frontend/pull/1244) Add EVM contract verify alert info to both Solidity and Vyper upload file(s) and contract code
+- [#1240](https://github.com/alleslabs/celatone-frontend/pull/1240) Update social media handle and naming convention from Celatone to Scan
 - [#1232](https://github.com/alleslabs/celatone-frontend/pull/1232) Support EVM verification with multiparts and standard JSON input for both Solidity and Vyper
 - [#1233](https://github.com/alleslabs/celatone-frontend/pull/1233) Support "move/" prefix hex module address in search
 - [#1230](https://github.com/alleslabs/celatone-frontend/pull/1230) Update EVM contract verify max width layout

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

@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/react";
+import { Alert, Flex } from "@chakra-ui/react";
 
 import type { HexAddr20, Option } from "lib/types";
 
@@ -49,17 +49,16 @@ export const EvmVerifySection = (props: EvmVerifySectionProps) => {
   const isMobile = useMobile();
 
   return (
-    <Flex
-      pl={6}
-      justifyContent="space-between"
-      alignItems={isMobile ? "flex-start" : "center"}
-      flexDirection={isMobile ? "column" : "row"}
-      w="full"
-      borderColor="primary.main"
-      borderLeftWidth={4}
-      gap={2}
-    >
-      <EvmVerifySectionBody {...props} />
-    </Flex>
+    <Alert variant="info-left-primary">
+      <Flex
+        w="full"
+        justifyContent="space-between"
+        alignItems={isMobile ? "flex-start" : "center"}
+        flexDirection={isMobile ? "column" : "row"}
+        gap={2}
+      >
+        <EvmVerifySectionBody {...props} />
+      </Flex>
+    </Alert>
   );
 };

src/lib/components/icon/SvgIcon.tsx

@@ -693,6 +693,17 @@ export const ICONS = {
     ),
     viewBox: viewboxDefault,
   },
+  "info-circle-solid": {
+    svg: (
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9 4C9 4.55228 8.55229 5 8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55229 3 9 3.44772 9 4ZM8.0002 6C7.55837 6 7.2002 6.35817 7.2002 6.8V12.2C7.2002 12.6418 7.55837 13 8.0002 13C8.44202 13 8.8002 12.6418 8.8002 12.2V6.8C8.8002 6.35817 8.44202 6 8.0002 6Z"
+        fill="currentColor"
+      />
+    ),
+    viewBox: viewboxDefault,
+  },
   instantiate: {
     svg: (
       <path

src/lib/pages/evm-contract-verify/components/EvmContractVerifyAlert.tsx

@@ -0,0 +1,54 @@
+import { Alert, AlertDescription, Flex } from "@chakra-ui/react";
+import { CustomIcon } from "lib/components/icon";
+import { EvmVerifyOptions } from "lib/types";
+
+interface EvmContractVerifyAlertProps {
+  option: EvmVerifyOptions;
+}
+
+export const EvmContractVerifyAlert = ({
+  option,
+}: EvmContractVerifyAlertProps) => {
+  switch (option) {
+    case EvmVerifyOptions.SolidityUploadFiles:
+    case EvmVerifyOptions.SolidityContractCode:
+      return (
+        <Alert variant="primary">
+          <Flex gap={2}>
+            <CustomIcon name="info-circle-solid" boxSize={4} />
+            <AlertDescription>
+              When verifying with the <strong>Upload Files</strong> and{" "}
+              <strong>Contract Code</strong> method, we only expose configurable
+              settings such as the optimizer, EVM target version, and libraries.{" "}
+              <strong>
+                All other settings are kept at their default values.
+              </strong>{" "}
+              If you require more customization, consider using the Standard
+              JSON Input, Hardhat, or Foundry verification methods.
+            </AlertDescription>
+          </Flex>
+        </Alert>
+      );
+    case EvmVerifyOptions.VyperUploadFile:
+    case EvmVerifyOptions.VyperContractCode:
+      return (
+        <Alert variant="primary">
+          <Flex gap={2}>
+            <CustomIcon name="info-circle-solid" boxSize={4} />
+            <AlertDescription>
+              When verifying with the <strong>Upload File</strong> and{" "}
+              <strong>Contract Code</strong> method, we only expose configurable
+              settings such as the EVM target version.{" "}
+              <strong>
+                All other settings are kept at their default values.
+              </strong>{" "}
+              If you require more customization, consider using the Standard
+              JSON Input verification methods.
+            </AlertDescription>
+          </Flex>
+        </Alert>
+      );
+    default:
+      return null;
+  }
+};

src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityContractCode.tsx

@@ -6,7 +6,12 @@ import { ConstructorArgs } from "../ConstructorArgs";
 import { EvmVersionToTarget } from "../EvmVersionToTarget";
 import { OptimizerConfiguration } from "../OptimizerConfiguration";
 import { ContractLibraries } from "../ContractLibraries";
-import type { EvmContractVerifyForm, EvmVerifyConfig } from "lib/types";
+import {
+  type EvmContractVerifyForm,
+  type EvmVerifyConfig,
+  EvmVerifyOptions,
+} from "lib/types";
+import { EvmContractVerifyAlert } from "../EvmContractVerifyAlert";
 
 interface EvmContractVerifySolidityContractCodeProps {
   control: Control<EvmContractVerifyForm>;
@@ -26,6 +31,7 @@ export const EvmContractVerifySolidityContractCode = ({
 
   return (
     <Stack spacing={12}>
+      <EvmContractVerifyAlert option={EvmVerifyOptions.SolidityContractCode} />
       <Stack spacing={6}>
         <Heading as="h6" variant="h6">
           Provide Contract Code

src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityUploadFiles.tsx

@@ -8,7 +8,12 @@ import { ContractLibraries } from "../ContractLibraries";
 import { DropZone } from "lib/components/dropzone";
 import { UploadCard } from "lib/components/upload";
 import { Fragment } from "react";
-import type { EvmContractVerifyForm, EvmVerifyConfig } from "lib/types";
+import {
+  type EvmContractVerifyForm,
+  type EvmVerifyConfig,
+  EvmVerifyOptions,
+} from "lib/types";
+import { EvmContractVerifyAlert } from "../EvmContractVerifyAlert";
 
 interface EvmContractVerifySolidityUploadFilesProps {
   control: Control<EvmContractVerifyForm>;
@@ -26,6 +31,7 @@ export const EvmContractVerifySolidityUploadFiles = ({
 
   return (
     <Stack spacing={12}>
+      <EvmContractVerifyAlert option={EvmVerifyOptions.SolidityUploadFiles} />
       <Stack spacing={4}>
         <Heading as="h6" variant="h6">
           Upload File(s)

src/lib/pages/evm-contract-verify/components/vyper/EvmContractVerifyVyperContractCode.tsx

@@ -4,7 +4,12 @@ import { Heading, Stack } from "@chakra-ui/react";
 import { ConstructorArgs } from "../ConstructorArgs";
 import { EvmVersionToTarget } from "../EvmVersionToTarget";
 import { ControllerInput, ControllerTextarea } from "lib/components/forms";
-import type { EvmContractVerifyForm, EvmVerifyConfig } from "lib/types";
+import {
+  type EvmContractVerifyForm,
+  type EvmVerifyConfig,
+  EvmVerifyOptions,
+} from "lib/types";
+import { EvmContractVerifyAlert } from "../EvmContractVerifyAlert";
 
 interface EvmContractVerifyVyperContractCodeProps {
   control: Control<EvmContractVerifyForm>;
@@ -31,6 +36,7 @@ export const EvmContractVerifyVyperContractCode = ({
 
   return (
     <Stack spacing={12}>
+      <EvmContractVerifyAlert option={EvmVerifyOptions.VyperContractCode} />
       <Stack spacing={6}>
         <Heading as="h6" variant="h6">
           Provide Contract Code

src/lib/pages/evm-contract-verify/components/vyper/EvmContractVerifyVyperUploadFile.tsx

@@ -5,7 +5,12 @@ import { DropZone } from "lib/components/dropzone";
 import { UploadCard } from "lib/components/upload";
 import { ConstructorArgs } from "../ConstructorArgs";
 import { EvmVersionToTarget } from "../EvmVersionToTarget";
-import type { EvmContractVerifyForm, EvmVerifyConfig } from "lib/types";
+import {
+  type EvmContractVerifyForm,
+  type EvmVerifyConfig,
+  EvmVerifyOptions,
+} from "lib/types";
+import { EvmContractVerifyAlert } from "../EvmContractVerifyAlert";
 
 interface EvmContractVerifyVyperUploadFileProps {
   control: Control<EvmContractVerifyForm>;
@@ -25,6 +30,7 @@ export const EvmContractVerifyVyperUploadFile = ({
 
   return (
     <Stack spacing={12}>
+      <EvmContractVerifyAlert option={EvmVerifyOptions.VyperUploadFile} />
       <Stack spacing={4}>
         <Heading as="h6" variant="h6">
           Upload Source Code File

src/lib/styles/theme/components/alert.ts

@@ -14,6 +14,7 @@ const generateVariantStyle = (
     | "warning"
     | "error"
     | "info"
+    | "info-left-primary"
     | "info-left-secondary"
 ) => {
   let mainColor: ColorProps["color"];
@@ -34,6 +35,13 @@ const generateVariantStyle = (
       bgColor = "gray.800";
       borderColor = "gray.700";
       break;
+    case "info-left-primary":
+      bgColor = "";
+      border = "0";
+      borderLeft = "3px solid";
+      borderRadius = "0";
+      borderColor = "primary.main";
+      break;
     case "info-left-secondary":
       bgColor = "background.main";
       border = "0";
@@ -56,8 +64,8 @@ const generateVariantStyle = (
         borderRadius,
         ...(key === "container" && {
           bg: bgColor,
-          borderColor: borderColor || mainColor,
           borderLeft,
+          borderColor: borderColor || mainColor,
         }),
       },
     ])
@@ -89,6 +97,7 @@ export const Alert: ComponentStyleConfig = {
     warning: generateVariantStyle("warning"),
     error: generateVariantStyle("error"),
     info: generateVariantStyle("info"),
+    "info-left-primary": generateVariantStyle("info-left-primary"),
     "info-left-secondary": generateVariantStyle("info-left-secondary"),
   },
 };