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
 - [#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/pages/evm-contract-details/components/EvmContractDetailsOverview.tsx

@@ -1,18 +1,26 @@
-import { Flex, Grid, Heading, Spinner, Stack, Text } from "@chakra-ui/react";
+import { Flex, Grid, Spinner, Stack, Text } from "@chakra-ui/react";
 
 import type { TxsTabIndex } from "../types";
 import { useCelatoneApp, useMobile } from "lib/app-provider";
 import { AssetsSection } from "lib/components/asset";
+import { NotVerifiedDetails } from "lib/components/evm-verify-section";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
 import { useFormatAddresses } from "lib/hooks/useFormatAddresses";
-import type { BechAddr, BechAddr20, Nullish, Option } from "lib/types";
+import type {
+  BechAddr,
+  BechAddr20,
+  HexAddr20,
+  Nullish,
+  Option,
+} from "lib/types";
 import { dateFromNow, formatEvmTxHash, formatUTC } from "lib/utils";
 
 import { EvmContractDetailsTxs } from "./EvmContractDetailsTxs";
 
 interface EvmContractDetailsOverviewProps {
-  contractAddress: BechAddr20;
+  contractAddressBech: BechAddr20;
+  contractAddress: HexAddr20;
   hash: Option<string>;
   evmHash: Nullish<string>;
   sender: Option<BechAddr>;
@@ -25,6 +33,7 @@ interface EvmContractDetailsOverviewProps {
 }
 
 export const EvmContractDetailsOverview = ({
+  contractAddressBech,
   contractAddress,
   hash,
   evmHash,
@@ -42,18 +51,16 @@ export const EvmContractDetailsOverview = ({
 
   return (
     <Stack gap={8}>
+      {/* // TODO: Support all status */}
+      <NotVerifiedDetails contractAddress={contractAddress} />
       <Stack gap={4}>
-        <Heading as="h6" variant="h6">
-          Contract Info
-        </Heading>
         <Grid
           gridTemplateColumns={{
             base: "1fr",
             md: "minmax(0, 160px) repeat(3, minmax(0, 240px))",
           }}
           padding={4}
-          border="1px solid"
-          borderColor="gray.700"
+          bg="gray.900"
           borderRadius={8}
           columnGap={6}
           rowGap={4}
@@ -141,9 +148,12 @@ export const EvmContractDetailsOverview = ({
           </LabelText>
         </Grid>
       </Stack>
-      <AssetsSection address={contractAddress} onViewMore={onViewMoreAssets} />
+      <AssetsSection
+        address={contractAddressBech}
+        onViewMore={onViewMoreAssets}
+      />
       <EvmContractDetailsTxs
-        address={contractAddress}
+        address={contractAddressBech}
         onViewMore={onViewMoreTxs}
         tab={tab}
         setTab={setTab}

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

@@ -126,7 +126,8 @@ const EvmContractDetailsBody = ({
           <TabPanels>
             <TabPanel p={0} pt={8}>
               <EvmContractDetailsOverview
-                contractAddress={contractAddressBechAddr}
+                contractAddressBech={contractAddressBechAddr}
+                contractAddress={contractAddress}
                 hash={evmContractInfoData?.hash}
                 evmHash={evmHash}
                 sender={evmContractInfoData?.sender}

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

@@ -0,0 +1,14 @@
+import { Heading, Stack, Text } from "@chakra-ui/react";
+
+export const EvmContractVerifyTop = () => (
+  <Stack gap={2}>
+    <Heading as="h4" variant="h4">
+      Verify & Publish Contract
+    </Heading>
+    <Text variant="body2" color="text.dark">
+      Verifying your contract offers enhanced credibility with a verified badge.
+      Once verified, users will able to access its source code in contract
+      details page.
+    </Text>
+  </Stack>
+);

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

@@ -0,0 +1,28 @@
+import { useEvmConfig } from "lib/app-provider";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { track } from "@amplitude/analytics-browser";
+import { AmpEvent } from "lib/amplitude";
+import PageContainer from "lib/components/PageContainer";
+import { CelatoneSeo } from "lib/components/Seo";
+import { Stack } from "@chakra-ui/react";
+import { EvmContractVerifyTop } from "./components/EvmContractVerifyTop";
+
+export const EvmContractVerify = () => {
+  useEvmConfig({ shouldRedirect: true });
+  const router = useRouter();
+
+  useEffect(() => {
+    if (router.isReady) track(AmpEvent.TO_EVM_CONTRACT_VERIFY);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady]);
+
+  return (
+    <PageContainer>
+      <CelatoneSeo pageName={`EVM Contract Verify`} />
+      <Stack gap={6}>
+        <EvmContractVerifyTop />
+      </Stack>
+    </PageContainer>
+  );
+};

src/lib/pages/evm-contract-verify/types.ts

@@ -0,0 +1,6 @@
+import { zHexAddr20 } from "lib/types";
+import { z } from "zod";
+
+export const zEvmContractVerifyQueryParams = z.object({
+  contractAddress: zHexAddr20,
+});

src/pages/[network]/evm-contracts/verify.tsx

@@ -0,0 +1,3 @@
+import { EvmContractVerify } from "lib/pages/evm-contract-verify";
+
+export default EvmContractVerify;

src/pages/evm-contracts/verify.tsx

@@ -0,0 +1,3 @@
+import { EvmContractVerify } from "lib/pages/evm-contract-verify";
+
+export default EvmContractVerify;