Fix(pages): EVM verify external docs link and EVM contract details mobile

CHANGELOG.md

@@ -88,6 +88,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#1238](https://github.com/alleslabs/celatone-frontend/pull/1238) Fix EVM verify external docs link and EVM contract details mobile
 - [#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

src/lib/components/UserDocsLink.tsx

@@ -5,6 +5,18 @@ import { trackWebsite } from "lib/amplitude";
 import { DEVELOPER_TOOL_DOCS_LINK, USER_GUIDE_DOCS_LINK } from "lib/data";
 
 import { CustomIcon } from "./icon";
+import { Option } from "lib/types";
+
+const handleLink = (
+  href: Option<string> = "",
+  isExternal: boolean,
+  isDevTool: boolean
+) => {
+  if (isExternal) return href;
+  return isDevTool
+    ? DEVELOPER_TOOL_DOCS_LINK
+    : `${USER_GUIDE_DOCS_LINK}/${href}`;
+};
 
 interface UserDocsLinkProps {
   href?: string;
@@ -13,6 +25,7 @@ interface UserDocsLinkProps {
   isButton?: boolean;
   isInline?: boolean;
   isDevTool?: boolean;
+  isExternal?: boolean;
   mt?: number;
 }
 
@@ -23,15 +36,16 @@ export const UserDocsLink = ({
   isButton = false,
   isInline = false,
   isDevTool = false,
+  isExternal = false,
   mt = 8,
-}: UserDocsLinkProps) =>
-  isButton ? (
+}: UserDocsLinkProps) => {
+  const link = handleLink(href, isExternal, isDevTool);
+
+  return isButton ? (
     <Link
-      href={`${isDevTool ? DEVELOPER_TOOL_DOCS_LINK : USER_GUIDE_DOCS_LINK}/${href}`}
+      href={link}
       onClick={(e) => {
-        trackWebsite(
-          `${isDevTool ? DEVELOPER_TOOL_DOCS_LINK : USER_GUIDE_DOCS_LINK}/${href}`
-        );
+        trackWebsite(link);
         e.stopPropagation();
       }}
       target="_blank"
@@ -58,11 +72,7 @@ export const UserDocsLink = ({
           {title}
         </Text>
       )}
-      <Link
-        href={`${isDevTool ? DEVELOPER_TOOL_DOCS_LINK : USER_GUIDE_DOCS_LINK}/${href}`}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <Link href={link} target="_blank" rel="noopener noreferrer">
         <Flex
           gap={1}
           alignItems="center"
@@ -87,3 +97,4 @@ export const UserDocsLink = ({
       </Link>
     </Flex>
   );
+};

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

@@ -61,7 +61,8 @@ export const EvmContractDetailsTop = ({
         {isVerified && (
           <Grid gap={2} templateColumns={{ md: "repeat(2, 1fr)", base: "1fr" }}>
             <Button
-              variant="outline-white"
+              variant="outline-primary"
+              leftIcon={<CustomIcon name="query" />}
               onClick={() =>
                 navigate({
                   pathname: "/evm-contracts/[contractAddress]/[tab]",
@@ -76,6 +77,8 @@ export const EvmContractDetailsTop = ({
               Read
             </Button>
             <Button
+              variant="outline-primary"
+              leftIcon={<CustomIcon name="execute" />}
               onClick={() =>
                 navigate({
                   pathname: "/evm-contracts/[contractAddress]/[tab]",
@@ -86,8 +89,7 @@ export const EvmContractDetailsTop = ({
                   },
                 })
               }
-              variant="outline-white"
-              display={{ base: "none", md: "block" }}
+              display={{ base: "none", md: "flex" }}
             >
               Write
             </Button>

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

@@ -38,19 +38,24 @@ export const OverviewVerifiedCmds = ({
             color="secondary.main"
           />
         </Flex>
-        <Flex gap={4} width="full">
+        <Flex
+          gap={4}
+          width="full"
+          flexDirection={{
+            base: "column",
+            md: "row",
+          }}
+        >
           <EvmContractCmdGroup
             contractAddress={contractAddress}
             abiSections={abiRead}
             interactTab={InteractTabsIndex.Read}
           />
-          {!isMobile && (
-            <EvmContractCmdGroup
-              contractAddress={contractAddress}
-              abiSections={abiWrite}
-              interactTab={InteractTabsIndex.Write}
-            />
-          )}
+          <EvmContractCmdGroup
+            contractAddress={contractAddress}
+            abiSections={abiWrite}
+            interactTab={InteractTabsIndex.Write}
+          />
         </Flex>
       </VStack>
       {proxyTargetEvmVerifyInfo && (

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

@@ -38,9 +38,10 @@ export const InteractEvmContract = ({
   const isMobile = useMobile();
   const navigate = useInternalNavigate();
 
-  const interactType = selectedType.startsWith("read")
-    ? InteractType.Read
-    : InteractType.Write;
+  const interactType =
+    isMobile || selectedType.startsWith("read")
+      ? InteractType.Read
+      : InteractType.Write;
   const isAsProxy =
     !isUndefined(proxyTargetEvmVerifyInfo?.abi) &&
     selectedType.endsWith("proxy");
@@ -97,11 +98,6 @@ export const InteractEvmContract = ({
     setInitialSelectedFn(selectedFn);
   }, [selectedFn]);
 
-  useEffect(() => {
-    if (!isMobile) return;
-    handleSetInteractType(InteractType.Read);
-  }, [isMobile, handleSetInteractType]);
-
   return (
     <Box>
       <Flex gap={2} align="center" mb={8}>

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

@@ -45,6 +45,7 @@ export const ContractLicenseInfoAccordion = () => (
         mt={3}
         cta="See contract license types"
         href="https://github.com/github/choosealicense.com/tree/gh-pages/_licenses"
+        isExternal
       />
     </AccordionItem>
   </Accordion>