From 99f76eea793e8e579634b1f6b12446b915e8b385 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Tue, 14 Jan 2025 10:32:12 +0700 Subject: [PATCH 1/3] fix(pages): evm verification --- .../evm-verify-section/NotVerifiedDetails.tsx | 60 ++++++++++++------- src/lib/components/forms/SelectInput.tsx | 2 +- .../components/EvmContractDetailsBytecode.tsx | 59 ++++-------------- src/lib/pages/evm-contract-details/index.tsx | 5 +- .../components/EvmContractVerifyOptions.tsx | 10 +--- .../components/EvmContractVerifyTop.tsx | 2 +- src/lib/pages/evm-contract-verify/index.tsx | 32 +++++----- src/lib/styles/theme/components/radio.ts | 4 +- 8 files changed, 76 insertions(+), 98 deletions(-) diff --git a/src/lib/components/evm-verify-section/NotVerifiedDetails.tsx b/src/lib/components/evm-verify-section/NotVerifiedDetails.tsx index 8c3c20d5b..9337d959d 100644 --- a/src/lib/components/evm-verify-section/NotVerifiedDetails.tsx +++ b/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 = ({ - - This contract has not been verified. If you are the owner, you can{" "} - - verify it - {" "} - to allow other users to view the source code - - + {isMobile ? ( + <> + + This contract has not been verified. If you are the owner, you can + verify it to allow other users to view the source code + + + Verification is only currently supported on desktop. + + + ) : ( + <> + + This contract has not been verified. If you are the owner, you can{" "} + + verify it + {" "} + to allow other users to view the source code + + + + )} ); }; diff --git a/src/lib/components/forms/SelectInput.tsx b/src/lib/components/forms/SelectInput.tsx index 0273ab6cd..290e51830 100644 --- a/src/lib/components/forms/SelectInput.tsx +++ b/src/lib/components/forms/SelectInput.tsx @@ -86,7 +86,7 @@ export const SelectInput = < menuPortalTarget={menuPortalTarget} placeholder={placeholder} options={options} - value={value} + value={value ?? null} isDisabled={isDisabled} onChange={onChange} size={size} diff --git a/src/lib/pages/evm-contract-details/components/EvmContractDetailsBytecode.tsx b/src/lib/pages/evm-contract-details/components/EvmContractDetailsBytecode.tsx index 4130b0297..ab79c603b 100644 --- a/src/lib/pages/evm-contract-details/components/EvmContractDetailsBytecode.tsx +++ b/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) => ( + + {/* // TODO: Support all status */} + - - Bytecode + + ByteCode - ) : ( - - - Bytecode - - - - - - - - ); -}; + +); diff --git a/src/lib/pages/evm-contract-details/index.tsx b/src/lib/pages/evm-contract-details/index.tsx index b047aef3e..8dfd17bf0 100644 --- a/src/lib/pages/evm-contract-details/index.tsx +++ b/src/lib/pages/evm-contract-details/index.tsx @@ -140,7 +140,10 @@ const EvmContractDetailsBody = ({ /> - + diff --git a/src/lib/pages/evm-contract-verify/components/EvmContractVerifyOptions.tsx b/src/lib/pages/evm-contract-verify/components/EvmContractVerifyOptions.tsx index 890675c4a..6e514176e 100644 --- a/src/lib/pages/evm-contract-verify/components/EvmContractVerifyOptions.tsx +++ b/src/lib/pages/evm-contract-verify/components/EvmContractVerifyOptions.tsx @@ -32,7 +32,7 @@ export const EvmContractVerifyOptions = ({ onChange={(nextVal) => verifyFormOptinField.onChange(nextVal)} value={verifyFormOption} > - + {language === EvmProgrammingLanguage.Solidity && ( - Upload Files + Upload File(s) )} {language === EvmProgrammingLanguage.Vyper && ( @@ -52,7 +51,6 @@ export const EvmContractVerifyOptions = ({ value={VerificationOptions.UploadFile} overflow="hidden" w="full" - size="sm" > Upload File @@ -63,7 +61,6 @@ export const EvmContractVerifyOptions = ({ value={VerificationOptions.ContractCode} overflow="hidden" w="full" - size="sm" > Contract Code @@ -73,7 +70,6 @@ export const EvmContractVerifyOptions = ({ value={VerificationOptions.JsonInput} overflow="hidden" w="full" - size="sm" > JSON Input @@ -85,7 +81,6 @@ export const EvmContractVerifyOptions = ({ value={VerificationOptions.Hardhat} overflow="hidden" w="full" - size="sm" > Hardhat @@ -95,7 +90,6 @@ export const EvmContractVerifyOptions = ({ value={VerificationOptions.Foundry} overflow="hidden" w="full" - size="sm" > Foundry diff --git a/src/lib/pages/evm-contract-verify/components/EvmContractVerifyTop.tsx b/src/lib/pages/evm-contract-verify/components/EvmContractVerifyTop.tsx index 385e48912..ac436652d 100644 --- a/src/lib/pages/evm-contract-verify/components/EvmContractVerifyTop.tsx +++ b/src/lib/pages/evm-contract-verify/components/EvmContractVerifyTop.tsx @@ -2,7 +2,7 @@ import { Heading, Stack, Text } from "@chakra-ui/react"; export const EvmContractVerifyTop = () => ( - + Verify & Publish Contract diff --git a/src/lib/pages/evm-contract-verify/index.tsx b/src/lib/pages/evm-contract-verify/index.tsx index a1a4bd4b5..15a4e4414 100644 --- a/src/lib/pages/evm-contract-verify/index.tsx +++ b/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, truncate } from "lib/utils"; import { EvmContractVerifySolidity } from "./components/solidity/EvmContractVerifySolidity"; import { EvmContractVerifyVyper } from "./components/vyper/EvmContractVerifyVyper"; import { NoMobile } from "lib/components/modal"; @@ -42,11 +42,11 @@ export const EvmContractVerify = () => { mode: "all", reValidateMode: "onChange", defaultValues: { - contractAddress: "", + contractAddress: router.query.contractAddress ?? "", compilerVersion: "", }, }); - const { licenseType, language, compilerVersion } = watch(); + const { licenseType, contractAddress, language, compilerVersion } = watch(); const { handleNext, handlePrevious, hasNext, hasPrevious } = useStepper( 1, @@ -116,28 +116,20 @@ export const EvmContractVerify = () => { ) : ( <> - + - + Contract Address & License @@ -153,6 +145,11 @@ export const EvmContractVerify = () => { name="contractAddress" control={control} variant="fixed-floating" + status={{ + state: isHexModuleAddress(contractAddress) + ? "success" + : "init", + }} /> @@ -203,6 +200,7 @@ export const EvmContractVerify = () => { : VerificationOptions.UploadFile ); setValue("language", selectedOption.value); + setValue("compilerVersion", ""); }} value={programmingLangaugeOptions.find( (option) => option.value === language diff --git a/src/lib/styles/theme/components/radio.ts b/src/lib/styles/theme/components/radio.ts index b46af1e72..58362abfa 100644 --- a/src/lib/styles/theme/components/radio.ts +++ b/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", }, }, }, From c6c9aba55b2e2ce74a287cc6c49df0b5f6adad99 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Tue, 14 Jan 2025 10:35:34 +0700 Subject: [PATCH 2/3] docs: update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3cf81252d..aa34e10bb 100644 --- a/CHANGELOG.md +++ b/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 From f2a7a00b1289b39d367079b19f43c6b2f0d60c60 Mon Sep 17 00:00:00 2001 From: Poafs1 Date: Tue, 14 Jan 2025 13:30:19 +0700 Subject: [PATCH 3/3] fix(pages): pr comments --- src/lib/components/forms/SelectInput.tsx | 4 ++-- src/lib/pages/evm-contract-verify/index.tsx | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/lib/components/forms/SelectInput.tsx b/src/lib/components/forms/SelectInput.tsx index 290e51830..75f524a07 100644 --- a/src/lib/components/forms/SelectInput.tsx +++ b/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, @@ -86,7 +86,7 @@ export const SelectInput = < menuPortalTarget={menuPortalTarget} placeholder={placeholder} options={options} - value={value ?? null} + value={value} isDisabled={isDisabled} onChange={onChange} size={size} diff --git a/src/lib/pages/evm-contract-verify/index.tsx b/src/lib/pages/evm-contract-verify/index.tsx index 15a4e4414..affb068cc 100644 --- a/src/lib/pages/evm-contract-verify/index.tsx +++ b/src/lib/pages/evm-contract-verify/index.tsx @@ -19,7 +19,7 @@ import { zEvmContractVerifyForm, } from "./types"; import { zodResolver } from "@hookform/resolvers/zod"; -import { isHexModuleAddress, 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,7 +43,9 @@ export const EvmContractVerify = () => { mode: "all", reValidateMode: "onChange", defaultValues: { - contractAddress: router.query.contractAddress ?? "", + contractAddress: isHexWalletAddress(String(contractAddressQueryParam)) + ? contractAddressQueryParam + : "", compilerVersion: "", }, });