Fix: EVM contract details according to acceptance test

CHANGELOG.md

@@ -86,6 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#1237](https://github.com/alleslabs/celatone-frontend/pull/1237) Fix EVM contract details UI layout and mobile
 - [#1235](https://github.com/alleslabs/celatone-frontend/pull/1235) Support EVM custom chain id and minor bug fixes
 - [#1191](https://github.com/alleslabs/celatone-frontend/pull/1191) Fix contract address form validation
 - [#1190](https://github.com/alleslabs/celatone-frontend/pull/1190) Fix EVM contract details verify boarding and verification page

src/config/theme/initia.ts

@@ -28,12 +28,12 @@ const INITIA_BASE_THEME: ThemeConfig = {
       background: "#0E3139",
     },
     secondary: {
-      lighter: "#F0D5FF",
-      light: "#E1ADFE",
-      main: "#CE89F4",
-      dark: "#B851F0",
-      darker: "#A400FF",
-      background: "#432E4F",
+      lighter: "#EBDDFF",
+      light: "#D8BEFC",
+      main: "#D2A3F9",
+      dark: "#A28FBD",
+      darker: "#6C5F7E",
+      background: "#36303F",
     },
     gray: {
       100: "#F5F5F5",

src/lib/components/TypeSwitch.tsx

@@ -21,6 +21,10 @@ export const TypeSwitch = <T extends string>({
   const onTabChange = useCallback(
     (tab: T) => {
       onTabChangeProps(tab);
+      const content = document.getElementById("content");
+      if (content) {
+        content.scrollTo({ top: 0 });
+      }
     },
     [onTabChangeProps]
   );

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

@@ -42,15 +42,6 @@ export const EvmVerifyProcess = ({ evmVerifyInfo }: EvmVerifyProcessProps) => {
                     {formatUTC(step.timestamp)}
                   </Text>
                 )}
-                {step.errorMsg && (
-                  <Text
-                    variant="body3"
-                    color="error.main"
-                    wordBreak="break-word"
-                  >
-                    {step.errorMsg}
-                  </Text>
-                )}
                 <Box height={4} />
               </Flex>
             </Flex>

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

@@ -1,18 +1,23 @@
-import { Flex, Heading, Stack, Text } from "@chakra-ui/react";
+import { Button, Flex, Grid, Heading, Stack, Text } from "@chakra-ui/react";
 
-import { useConvertHexAddress } from "lib/app-provider";
+import { useConvertHexAddress, useInternalNavigate } from "lib/app-provider";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
 import { TotalValue } from "lib/components/TotalValue";
 import type { HexAddr20 } from "lib/types";
+import { TabIndex } from "../types";
+import { getInteractTabsIndex } from "../utils";
 
 interface EvmContractDetailsTopProps {
   contractAddress: HexAddr20;
+  isVerified: boolean;
 }
 
 export const EvmContractDetailsTop = ({
   contractAddress,
+  isVerified,
 }: EvmContractDetailsTopProps) => {
+  const navigate = useInternalNavigate();
   const { convertHexWalletAddress } = useConvertHexAddress();
 
   return (
@@ -36,18 +41,64 @@ export const EvmContractDetailsTop = ({
           <Text variant="body2" fontWeight={500} color="text.dark">
             Contract Address:
           </Text>
-          <CopyLink
-            value={contractAddress}
-            amptrackSection="contract_top"
-            type="contract_address"
-          />
+          <Flex alignItems="center">
+            <CopyLink
+              value={contractAddress}
+              amptrackSection="contract_top"
+              type="contract_address"
+            />
+            {isVerified && (
+              <CustomIcon
+                name="verification-solid"
+                boxSize={4}
+                color="secondary.main"
+              />
+            )}
+          </Flex>
         </Flex>
       </Stack>
-      <TotalValue
-        address={convertHexWalletAddress(contractAddress)}
-        label="Total Value"
-        isCompact
-      />
+      <Stack gap={4}>
+        {isVerified && (
+          <Grid gap={2} templateColumns={{ md: "repeat(2, 1fr)", base: "1fr" }}>
+            <Button
+              variant="outline-white"
+              onClick={() =>
+                navigate({
+                  pathname: "/evm-contracts/[contractAddress]/[tab]",
+                  query: {
+                    contractAddress,
+                    tab: TabIndex.ReadWrite,
+                    selectedType: getInteractTabsIndex(true, false),
+                  },
+                })
+              }
+            >
+              Read
+            </Button>
+            <Button
+              onClick={() =>
+                navigate({
+                  pathname: "/evm-contracts/[contractAddress]/[tab]",
+                  query: {
+                    contractAddress,
+                    tab: TabIndex.ReadWrite,
+                    selectedType: getInteractTabsIndex(false, false),
+                  },
+                })
+              }
+              variant="outline-white"
+              display={{ base: "none", md: "block" }}
+            >
+              Write
+            </Button>
+          </Grid>
+        )}
+        <TotalValue
+          address={convertHexWalletAddress(contractAddress)}
+          label="Total Value"
+          isCompact
+        />
+      </Stack>
     </Flex>
   );
 };

src/lib/pages/evm-contract-details/components/evm-contract-details-contract-info/ContractCode.tsx

@@ -1,9 +1,11 @@
 import {
   Badge,
+  Box,
   Button,
   Flex,
   Heading,
   Stack,
+  Text,
   useDisclosure,
 } from "@chakra-ui/react";
 import { JsonFragment } from "ethers";
@@ -30,6 +32,11 @@ export const ContractCode = ({
 }: ContractCodeProps) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
 
+  const foundConstructorArgs = findAndDecodeEvmConstructorArgs(
+    abi,
+    constructorArguments
+  );
+
   return (
     <Stack gap={8}>
       <Stack gap={4}>
@@ -78,13 +85,15 @@ export const ContractCode = ({
         <Heading as="h6" variant="h7">
           Constructor Arguments
         </Heading>
-        <TextReadOnly
-          text={
-            findAndDecodeEvmConstructorArgs(abi, constructorArguments) ||
-            "No constructor arguments"
-          }
-          canCopy
-        />
+        {foundConstructorArgs ? (
+          <TextReadOnly text={foundConstructorArgs} canCopy />
+        ) : (
+          <Box>
+            <Text py={4} px={3} rounded={8} bg="gray.900" color="text.disabled">
+              No constructor arguments
+            </Text>
+          </Box>
+        )}
       </Stack>
     </Stack>
   );

src/lib/pages/evm-contract-details/components/evm-contract-details-overview/OverviewVerifiedCmds.tsx

@@ -1,4 +1,4 @@
-import { Flex, Heading, HStack, Text, VStack } from "@chakra-ui/react";
+import { Flex, Heading, HStack, Stack, Text, VStack } from "@chakra-ui/react";
 import { useMobile } from "lib/app-provider";
 import { EvmVerifyInfo } from "lib/types";
 import { HexAddr20, Option } from "lib/types";
@@ -28,7 +28,7 @@ export const OverviewVerifiedCmds = ({
   return (
     <>
       <VStack spacing={4} alignItems="flex-start">
-        <Flex gap={2} alignItems="center">
+        <Flex gap={1} alignItems="center">
           <Heading as="h6" variant="h6">
             Verified command shortcuts
           </Heading>
@@ -55,20 +55,22 @@ export const OverviewVerifiedCmds = ({
       </VStack>
       {proxyTargetEvmVerifyInfo && (
         <VStack spacing={4} alignItems="flex-start">
-          <Heading as="h6" variant="h6">
-            Proxy target contract
-          </Heading>
-          <HStack spacing={2} alignItems="center">
-            <Text variant="body2" color="text.dark">
-              Implementation Address:
-            </Text>
-            <ExplorerLink
-              type="evm_contract_address"
-              value={proxyTargetEvmVerifyInfo.address}
-              textFormat={isMobile ? "truncate" : "normal"}
-              showCopyOnHover
-            />
-          </HStack>
+          <Stack spacing={1}>
+            <Heading as="h6" variant="h6">
+              Proxy target contract
+            </Heading>
+            <HStack spacing={2} alignItems="center">
+              <Text variant="body2" color="text.dark">
+                Implementation Address:
+              </Text>
+              <ExplorerLink
+                type="evm_contract_address"
+                value={proxyTargetEvmVerifyInfo.address}
+                textFormat={isMobile ? "truncate" : "normal"}
+                showCopyOnHover
+              />
+            </HStack>
+          </Stack>
           <Flex gap={4} width="full">
             <EvmContractCmdGroup
               contractAddress={contractAddress}