Fix(pages): EVM Verification

CHANGELOG.md

@@ -50,6 +50,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#1190](https://github.com/alleslabs/celatone-frontend/pull/1190) Fix EVM contract details verify boarding and verification page
+
 ## v1.9.3
 
 ### Features

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

@@ -1,6 +1,6 @@
 import { Button, Flex, Text } from "@chakra-ui/react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useMobile } from "lib/app-provider";
 import type { HexAddr20 } from "lib/types";
 
 interface NotVerifiedDetailsProps {
@@ -10,6 +10,7 @@ interface NotVerifiedDetailsProps {
 export const NotVerifiedDetails = ({
   contractAddress,
 }: NotVerifiedDetailsProps) => {
+  const isMobile = useMobile();
   const navigate = useInternalNavigate();
 
   const handleNavigate = () =>
@@ -22,32 +23,47 @@ export const NotVerifiedDetails = ({
     <Flex
       pl={6}
       justifyContent="space-between"
-      alignItems="center"
+      alignItems={isMobile ? "flex-start" : "center"}
+      flexDirection={isMobile ? "column" : "row"}
       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>
+      {isMobile ? (
+        <>
+          <Text variant="body2" color="text.dark">
+            This contract has not been verified. If you are the owner, you can
+            verify it to allow other users to view the source code
+          </Text>
+          <Text variant="body2" color="text.dark">
+            Verification is only currently supported on desktop.
+          </Text>
+        </>
+      ) : (
+        <>
+          <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/forms/SelectInput.tsx

@@ -35,7 +35,7 @@ export const SelectInput = <
   IsMulti extends boolean = false,
 >({
   options,
-  value,
+  value = null,
   onChange,
   size = "lg",
   placeholder,

src/lib/pages/evm-contract-details/components/EvmContractDetailsBytecode.tsx

@@ -1,58 +1,25 @@
-import {
-  chakra,
-  Heading,
-  Stack,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-} from "@chakra-ui/react";
-
-import { useMobile } from "lib/app-provider";
-import { CustomTab } from "lib/components/CustomTab";
+import { Heading, Stack } from "@chakra-ui/react";
+import { NotVerifiedDetails } from "lib/components/evm-verify-section";
 import { TextReadOnly } from "lib/components/json/TextReadOnly";
-
-const StyledCustomTab = chakra(CustomTab, {
-  baseStyle: {
-    border: "unset",
-    borderRadius: "4px",
-    _selected: { bgColor: "gray.800", color: "white" },
-    width: "256px",
-  },
-});
+import { HexAddr20 } from "lib/types";
 
 interface EvmContractDetailsBytecodeProps {
   code: string;
+  contractAddress: HexAddr20;
 }
 
 export const EvmContractDetailsBytecode = ({
   code,
-}: EvmContractDetailsBytecodeProps) => {
-  const isMobile = useMobile();
-
-  return isMobile ? (
+  contractAddress,
+}: EvmContractDetailsBytecodeProps) => (
+  <Stack gap={8}>
+    {/* // TODO: Support all status */}
+    <NotVerifiedDetails contractAddress={contractAddress} />
     <Stack gap={4}>
-      <Heading as="h6" variant="h6">
-        Bytecode
+      <Heading as="h6" variant="h7">
+        ByteCode
       </Heading>
       <TextReadOnly text={code} canCopy />
     </Stack>
-  ) : (
-    <Tabs
-      variant="unstyled"
-      orientation="vertical"
-      index={0}
-      isLazy
-      lazyBehavior="keepMounted"
-    >
-      <TabList id="1">
-        <StyledCustomTab>Bytecode</StyledCustomTab>
-      </TabList>
-      <TabPanels>
-        <TabPanel p={0} pl={6}>
-          <TextReadOnly text={code} canCopy />
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
-  );
-};
+  </Stack>
+);

src/lib/pages/evm-contract-details/index.tsx

@@ -140,7 +140,10 @@ const EvmContractDetailsBody = ({
               />
             </TabPanel>
             <TabPanel p={0} pt={8}>
-              <EvmContractDetailsBytecode code={evmCodesByAddressData.code} />
+              <EvmContractDetailsBytecode
+                code={evmCodesByAddressData.code}
+                contractAddress={contractAddress}
+              />
             </TabPanel>
             <TabPanel p={0}>
               <AssetsSection address={contractAddressBechAddr} />

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

@@ -32,17 +32,16 @@ export const EvmContractVerifyOptions = ({
         onChange={(nextVal) => verifyFormOptinField.onChange(nextVal)}
         value={verifyFormOption}
       >
-        <Grid gridTemplateColumns="repeat(3, 1fr)" gap={4} maxW={640}>
+        <Grid gridTemplateColumns="repeat(3, 1fr)" gap={4}>
           {language === EvmProgrammingLanguage.Solidity && (
             <Radio
               variant="gray-card"
               width="fit-content"
               value={VerificationOptions.UploadFiles}
               overflow="hidden"
               w="full"
-              size="sm"
             >
-              Upload Files
+              Upload File(s)
             </Radio>
           )}
           {language === EvmProgrammingLanguage.Vyper && (
@@ -52,7 +51,6 @@ export const EvmContractVerifyOptions = ({
               value={VerificationOptions.UploadFile}
               overflow="hidden"
               w="full"
-              size="sm"
             >
               Upload File
             </Radio>
@@ -63,7 +61,6 @@ export const EvmContractVerifyOptions = ({
             value={VerificationOptions.ContractCode}
             overflow="hidden"
             w="full"
-            size="sm"
           >
             Contract Code
           </Radio>
@@ -73,7 +70,6 @@ export const EvmContractVerifyOptions = ({
             value={VerificationOptions.JsonInput}
             overflow="hidden"
             w="full"
-            size="sm"
           >
             JSON Input
           </Radio>
@@ -85,7 +81,6 @@ export const EvmContractVerifyOptions = ({
                 value={VerificationOptions.Hardhat}
                 overflow="hidden"
                 w="full"
-                size="sm"
               >
                 Hardhat
               </Radio>
@@ -95,7 +90,6 @@ export const EvmContractVerifyOptions = ({
                 value={VerificationOptions.Foundry}
                 overflow="hidden"
                 w="full"
-                size="sm"
               >
                 Foundry
               </Radio>

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

@@ -2,7 +2,7 @@ import { Heading, Stack, Text } from "@chakra-ui/react";
 
 export const EvmContractVerifyTop = () => (
   <Stack gap={2}>
-    <Heading as="h4" variant="h4">
+    <Heading as="h5" variant="h5">
       Verify & Publish Contract
     </Heading>
     <Text variant="body2" color="text.dark">

src/lib/pages/evm-contract-verify/index.tsx

@@ -19,7 +19,7 @@ import {
   zEvmContractVerifyForm,
 } from "./types";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { truncate } from "lib/utils";
+import { isHexModuleAddress, isHexWalletAddress, truncate } from "lib/utils";
 import { EvmContractVerifySolidity } from "./components/solidity/EvmContractVerifySolidity";
 import { EvmContractVerifyVyper } from "./components/vyper/EvmContractVerifyVyper";
 import { NoMobile } from "lib/components/modal";
@@ -28,6 +28,7 @@ export const EvmContractVerify = () => {
   useEvmConfig({ shouldRedirect: true });
   const isMobile = useMobile();
   const router = useRouter();
+  const contractAddressQueryParam = router.query.contractAddress ?? "";
   // TODO: add evm contract address
   const { contract: exampleContractAddress } = useExampleAddresses();
 
@@ -42,11 +43,13 @@ export const EvmContractVerify = () => {
       mode: "all",
       reValidateMode: "onChange",
       defaultValues: {
-        contractAddress: "",
+        contractAddress: isHexWalletAddress(String(contractAddressQueryParam))
+          ? contractAddressQueryParam
+          : "",
         compilerVersion: "",
       },
     });
-  const { licenseType, language, compilerVersion } = watch();
+  const { licenseType, contractAddress, language, compilerVersion } = watch();
 
   const { handleNext, handlePrevious, hasNext, hasPrevious } = useStepper(
     1,
@@ -116,28 +119,20 @@ export const EvmContractVerify = () => {
         <NoMobile />
       ) : (
         <>
-          <PageContainer>
+          <PageContainer px={12} py={9} p={0}>
             <Grid
-              templateColumns={{
-                base: "6fr 4fr",
-                "2xl": "8fr 2fr",
-              }}
+              w="100%"
+              templateColumns="6fr 4fr"
               columnGap="32px"
               rowGap="48px"
-              p={{ base: "16px", "2xl": "48px" }}
+              maxW="1440px"
+              mx="auto"
             >
               <GridItem colSpan={1}>
                 <EvmContractVerifyTop />
               </GridItem>
               <GridItem colSpan={2}>
-                <Grid
-                  templateColumns={{
-                    base: "6fr 4fr",
-                    "2xl": "8fr 2fr",
-                  }}
-                  columnGap="32px"
-                  rowGap="24px"
-                >
+                <Grid templateColumns="6fr 4fr" columnGap="32px" rowGap="24px">
                   <GridItem colSpan={2}>
                     <Heading as="h6" variant="h6">
                       Contract Address & License
@@ -153,6 +148,11 @@ export const EvmContractVerify = () => {
                       name="contractAddress"
                       control={control}
                       variant="fixed-floating"
+                      status={{
+                        state: isHexModuleAddress(contractAddress)
+                          ? "success"
+                          : "init",
+                      }}
                     />
                   </GridItem>
                   <GridItem colSpan={1} colStart={1}>
@@ -203,6 +203,7 @@ export const EvmContractVerify = () => {
                             : VerificationOptions.UploadFile
                         );
                         setValue("language", selectedOption.value);
+                        setValue("compilerVersion", "");
                       }}
                       value={programmingLangaugeOptions.find(
                         (option) => option.value === language

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

@@ -20,7 +20,7 @@ const generateCardStyle = ({
     minW: "fit-content",
     w: "full",
     px: "24px",
-    py: "12px",
+    py: "16px",
     border: "2px solid",
     borderRadius: "12px",
     borderColor: "gray.700",
@@ -66,7 +66,7 @@ export const Radio = defineMultiStyleConfig({
   sizes: {
     lg: {
       label: {
-        fontSize: "16px",
+        fontSize: "14px",
       },
     },
   },