feat: evm verification status modal, bar

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1213](https://github.com/alleslabs/celatone-frontend/pull/1213) EVM verification status modal, and highlight bar
 - [#1211](https://github.com/alleslabs/celatone-frontend/pull/1211) Implement evm gas refund logic
 - [#1210](https://github.com/alleslabs/celatone-frontend/pull/1210) Add EVM contract details code preview
 - [#1209](https://github.com/alleslabs/celatone-frontend/pull/1209) Implement evm contract details interaction

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

@@ -0,0 +1,72 @@
+import { Button, HStack, Text } from "@chakra-ui/react";
+
+import { useInternalNavigate, useMobile } from "lib/app-provider";
+import { EvmVerifyInfo } from "lib/services/types";
+import type { HexAddr20 } from "lib/types";
+import { formatUTC } from "lib/utils";
+import { EvmVerifyStatusModalWithTrigger } from "../modal/evm-verify-status";
+
+interface FailedDetailsProps {
+  contractAddress: HexAddr20;
+  evmVerifyInfo: EvmVerifyInfo;
+}
+
+export const FailedDetails = ({
+  contractAddress,
+  evmVerifyInfo,
+}: FailedDetailsProps) => {
+  const isMobile = useMobile();
+  const navigate = useInternalNavigate();
+
+  const handleNavigate = () =>
+    navigate({
+      pathname: "/evm-contracts/verify",
+      query: { contractAddress },
+    });
+
+  if (isMobile)
+    return (
+      <>
+        <Text variant="body2" color="text.dark">
+          Verification failed: Verification was submitted on{" "}
+          {formatUTC(evmVerifyInfo.submittedTimestamp)} but an error occurred.
+        </Text>
+        <Text variant="body2" color="text.dark">
+          If you are the owner, you can reverify this contract on the desktop
+          interface.
+        </Text>
+        <EvmVerifyStatusModalWithTrigger
+          contractAddress={contractAddress}
+          evmVerifyInfo={evmVerifyInfo}
+          triggerElement={
+            <Button variant="ghost-primary" size="sm">
+              Verify Details
+            </Button>
+          }
+        />
+      </>
+    );
+
+  return (
+    <>
+      <Text variant="body2" color="text.dark">
+        Verification failed: Verification was submitted on{" "}
+        {formatUTC(evmVerifyInfo.submittedTimestamp)} but an error occurred.
+      </Text>
+      <HStack>
+        <EvmVerifyStatusModalWithTrigger
+          contractAddress={contractAddress}
+          evmVerifyInfo={evmVerifyInfo}
+          triggerElement={
+            <Button variant="ghost-primary" size="sm">
+              Verify Details
+            </Button>
+          }
+        />
+        <Button variant="ghost-primary" size="sm" onClick={handleNavigate}>
+          Verify Again
+        </Button>
+      </HStack>
+    </>
+  );
+};

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

@@ -0,0 +1,31 @@
+import { Button, Text } from "@chakra-ui/react";
+
+import type { HexAddr20 } from "lib/types";
+import { EvmVerifyInfo } from "lib/services/types";
+import { EvmVerifyStatusModalWithTrigger } from "../modal/evm-verify-status";
+
+interface InProgressDetailsProps {
+  contractAddress: HexAddr20;
+  evmVerifyInfo: EvmVerifyInfo;
+}
+
+export const InProgressDetails = ({
+  contractAddress,
+  evmVerifyInfo,
+}: InProgressDetailsProps) => (
+  <>
+    <Text variant="body2" color="text.dark">
+      Contract verification is in progress and may take several hours depending
+      on contract complexity.
+    </Text>
+    <EvmVerifyStatusModalWithTrigger
+      contractAddress={contractAddress}
+      evmVerifyInfo={evmVerifyInfo}
+      triggerElement={
+        <Button variant="ghost-primary" size="sm">
+          View Verification Details
+        </Button>
+      }
+    />
+  </>
+);

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

@@ -1,4 +1,4 @@
-import { Button, Flex, Text } from "@chakra-ui/react";
+import { Button, Text } from "@chakra-ui/react";
 
 import { useInternalNavigate, useMobile } from "lib/app-provider";
 import type { HexAddr20 } from "lib/types";
@@ -19,51 +19,41 @@ export const NotVerifiedDetails = ({
       query: { contractAddress },
     });
 
+  if (isMobile)
+    return (
+      <>
+        <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>
+      </>
+    );
+
   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}
-    >
-      {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>
+    <>
+      <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>
+    </>
   );
 };

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

@@ -0,0 +1,29 @@
+import { Text } from "@chakra-ui/react";
+
+import { TabIndex } from "lib/pages/evm-contract-details/types";
+import type { HexAddr20 } from "lib/types";
+import { AppLink } from "../AppLink";
+
+interface VerifiedDetailsProps {
+  contractAddress: HexAddr20;
+}
+
+export const VerifiedDetails = ({ contractAddress }: VerifiedDetailsProps) => (
+  <Text variant="body2" color="text.dark">
+    This contract source code is verified with the exact match. You can view its{" "}
+    <AppLink href={`/evm-contracts/${contractAddress}/${TabIndex.Contract}`}>
+      <Text
+        as="span"
+        cursor="pointer"
+        color="primary.main"
+        transition="all 0.25s ease-in-out"
+        _hover={{
+          textDecoration: "underline",
+          textDecorationColor: "primary.light",
+        }}
+      >
+        Source Code.
+      </Text>
+    </AppLink>
+  </Text>
+);

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

@@ -0,0 +1,65 @@
+import { Flex } from "@chakra-ui/react";
+
+import type { HexAddr20, Option } from "lib/types";
+
+import { NotVerifiedDetails } from "./NotVerifiedDetails";
+import { EvmVerifyInfo } from "lib/services/types";
+import { useMobile } from "lib/app-provider";
+import { VerifiedDetails } from "./VerifiedDetails";
+import { FailedDetails } from "./FailedDetails";
+import { InProgressDetails } from "./InProgressDetails";
+
+interface EvmVerifySectionProps {
+  contractAddress: HexAddr20;
+  evmVerifyInfo: Option<EvmVerifyInfo>;
+}
+
+const EvmVerifySectionBody = ({
+  contractAddress,
+  evmVerifyInfo,
+}: EvmVerifySectionProps) => {
+  if (!evmVerifyInfo) {
+    return <NotVerifiedDetails contractAddress={contractAddress} />;
+  }
+
+  const { errorMessage, isVerified } = evmVerifyInfo;
+
+  if (errorMessage) {
+    return (
+      <FailedDetails
+        contractAddress={contractAddress}
+        evmVerifyInfo={evmVerifyInfo}
+      />
+    );
+  }
+
+  if (isVerified) {
+    return <VerifiedDetails contractAddress={contractAddress} />;
+  }
+
+  return (
+    <InProgressDetails
+      contractAddress={contractAddress}
+      evmVerifyInfo={evmVerifyInfo}
+    />
+  );
+};
+
+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>
+  );
+};

src/lib/components/modal/evm-verify-status/EvmVerifyAlert.tsx

@@ -0,0 +1,38 @@
+import { Alert, AlertDescription, Flex, Text } from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+interface EvmVerifyAlertProps {
+  errorMsg: string;
+}
+export const EvmVerifyAlert = ({ errorMsg }: EvmVerifyAlertProps) => (
+  <Alert
+    p={2}
+    variant="error"
+    gap={{ base: 2, md: 4 }}
+    mb={{ base: 4, md: 6 }}
+    alignItems="flex-start"
+  >
+    <CustomIcon name="alert-triangle-solid" boxSize={4} color="error.main" />
+    <AlertDescription>
+      <Flex direction="column" gap={1}>
+        <Text
+          variant="body2"
+          color="error.main"
+          fontWeight={600}
+          lineHeight="normal"
+        >
+          Verification failed
+        </Text>
+        <Text
+          variant="body3"
+          color="error.main"
+          wordBreak="break-all"
+          lineHeight="normal"
+        >
+          {errorMsg}
+        </Text>
+      </Flex>
+    </AlertDescription>
+  </Alert>
+);