Feat/cfe 481 view module mobile

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#934](https://github.com/alleslabs/celatone-frontend/pull/934) Add view module in mobile
 - [#950](https://github.com/alleslabs/celatone-frontend/pull/950) Add initia username
 - [#971](https://github.com/alleslabs/celatone-frontend/pull/971) Support search functionality with LCD endpoint
 - [#970](https://github.com/alleslabs/celatone-frontend/pull/970) Support account details lite version

src/config/chain/osmosis.ts

@@ -58,7 +58,7 @@ export const OSMOSIS_CHAIN_CONFIGS: ChainConfigs = {
     prettyName: "Osmosis Testnet",
     lcd: "https://lcd.osmotest5.osmosis.zone",
     rpc: "https://osmosis-testnet-rpc.polkachu.com:443",
-    indexer: "",
+    indexer: "https://osmo-test-5-graphql.alleslabs.dev/v1/graphql",
     wallets: [...keplrWallets],
     features: {
       faucet: {

src/lib/components/MobileGuard.tsx

@@ -29,6 +29,7 @@ export const MobileGuard = ({ children }: MobileGuardProps) => {
     pathName.includes(`/codes`) ||
     // move
     pathName.includes(`/modules`) ||
+    pathName.includes(`/interact`) ||
     // validators
     pathName.includes(`/validators`);
 

src/lib/components/forms/TextInput.tsx

@@ -86,7 +86,7 @@ export const TextInput = ({
           {status?.message ? (
             getResponseMsg(status, helperText)
           ) : (
-            <Text color="text.dark" variant="body3">
+            <Text color="text.dark" variant="body3" wordBreak="break-word">
               {helperText}
             </Text>
           )}

src/lib/components/module/FunctionCard.tsx

@@ -3,19 +3,24 @@ import { Flex, Text } from "@chakra-ui/react";
 
 import { DotSeparator } from "../DotSeparator";
 import { CustomIcon } from "../icon";
+import { useMobile } from "lib/app-provider";
 import { Tooltip } from "lib/components/Tooltip";
 import type { ExposedFunction } from "lib/types";
 import { checkAvailability, getVisibilityIcon } from "lib/utils";
 
-type CardVariant = "common" | "disabled" | "selected";
+type CardVariant = "common" | "disabled" | "selected" | "readonly";
 
 interface FunctionCardProps {
   variant?: CardVariant;
-  isSelected?: boolean;
+  isReadOnly?: boolean;
   exposedFn: ExposedFunction;
   onFunctionSelect: (fn: ExposedFunction) => void;
 }
 
+interface FunctionCardBodyProps extends FunctionCardProps {
+  disabled: boolean;
+}
+
 const cardStyles: { [key in CardVariant]: FlexProps } = {
   common: {
     bgColor: "gray.800",
@@ -35,93 +40,114 @@ const cardStyles: { [key in CardVariant]: FlexProps } = {
     cursor: "pointer",
     borderColor: "gray.600",
   },
+  readonly: {
+    bgColor: "gray.800",
+    borderColor: "transparent",
+  },
 };
 
-export const FunctionCard = ({
+const FunctionCardBody = ({
   variant = "common",
-  exposedFn,
   onFunctionSelect,
-}: FunctionCardProps) => {
+  isReadOnly,
+  disabled,
+  exposedFn,
+}: FunctionCardBodyProps) => {
   const { is_view: isView, visibility, name } = exposedFn;
-  const disabled = !checkAvailability(exposedFn);
 
   return (
-    <Tooltip
-      bg="primary.dark"
-      label="Only functions with “is_entry: true” are able to interacted through Celatone’s module interactions."
-      hidden={!disabled}
+    <Flex
+      w="full"
+      borderRadius={8}
+      py={2}
+      px={3}
+      transition="all .25s ease-in-out"
+      flexDirection="column"
+      gap={1}
+      border="1px solid"
+      onClick={() =>
+        disabled || isReadOnly ? null : onFunctionSelect(exposedFn)
+      }
+      {...cardStyles[disabled ? "disabled" : variant]}
     >
-      <Flex
-        w="full"
-        borderRadius={8}
-        py={2}
-        px={3}
-        transition="all .25s ease-in-out"
-        flexDirection="column"
-        gap={1}
-        border="1px solid"
-        onClick={disabled ? undefined : () => onFunctionSelect(exposedFn)}
-        {...cardStyles[disabled ? "disabled" : variant]}
-      >
-        <Flex gap={1} justifyContent="space-between" w="full">
-          <Flex gap={1} alignItems="center">
+      <Flex gap={1} justifyContent="space-between" w="full">
+        <Flex gap={1} alignItems="center">
+          <CustomIcon
+            name="query"
+            color={isView ? "primary.main" : "accent.dark"}
+            boxSize={3}
+          />
+          <Text variant="body3" color={isView ? "primary.main" : "accent.dark"}>
+            {isView ? "View" : "Execute"}
+          </Text>
+        </Flex>
+        <Flex alignItems="center" gap={2}>
+          {!isView && (
+            <>
+              <Tooltip
+                bg="primary.dark"
+                label={`is_entry: ${exposedFn.is_entry}`}
+              >
+                <Flex pointerEvents="auto" onClick={(e) => e.stopPropagation()}>
+                  {disabled ? (
+                    <CustomIcon name="close" color="gray.600" boxSize={3} />
+                  ) : (
+                    <CustomIcon name="check" color="success.main" boxSize={3} />
+                  )}
+                </Flex>
+              </Tooltip>
+              <DotSeparator bg="gray.600" />
+            </>
+          )}
+          <Flex alignItems="center" gap={1}>
             <CustomIcon
-              name="query"
-              color={isView ? "primary.main" : "accent.dark"}
+              name={getVisibilityIcon(visibility)}
+              color="gray.600"
               boxSize={3}
             />
-            <Text
-              variant="body3"
-              color={isView ? "primary.main" : "accent.dark"}
-            >
-              {isView ? "View" : "Execute"}
+            <Text variant="body3" color="text.dark" textTransform="capitalize">
+              {visibility}
             </Text>
           </Flex>
-          <Flex alignItems="center" gap={2}>
-            {!isView && (
-              <>
-                <Tooltip
-                  bg="primary.dark"
-                  label={`is_entry: ${exposedFn.is_entry}`}
-                >
-                  <Flex
-                    pointerEvents="auto"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {disabled ? (
-                      <CustomIcon name="close" color="gray.600" boxSize={3} />
-                    ) : (
-                      <CustomIcon
-                        name="check"
-                        color="success.main"
-                        boxSize={3}
-                      />
-                    )}
-                  </Flex>
-                </Tooltip>
-                <DotSeparator bg="gray.600" />
-              </>
-            )}
-            <Flex alignItems="center" gap={1}>
-              <CustomIcon
-                name={getVisibilityIcon(visibility)}
-                color="gray.600"
-                boxSize={3}
-              />
-              <Text
-                variant="body3"
-                color="text.dark"
-                textTransform="capitalize"
-              >
-                {visibility}
-              </Text>
-            </Flex>
-          </Flex>
         </Flex>
-        <Text variant="body2" color={disabled ? "text.disabled" : "text.main"}>
-          {name}
-        </Text>
       </Flex>
+      <Text variant="body2" color={disabled ? "text.disabled" : "text.main"}>
+        {name}
+      </Text>
+    </Flex>
+  );
+};
+
+export const FunctionCard = ({
+  variant = "common",
+  exposedFn,
+  onFunctionSelect,
+  isReadOnly = false,
+}: FunctionCardProps) => {
+  const isMobile = useMobile();
+  const disabled = !checkAvailability(exposedFn);
+
+  return isMobile ? (
+    <FunctionCardBody
+      variant={variant}
+      exposedFn={exposedFn}
+      onFunctionSelect={onFunctionSelect}
+      isReadOnly={isReadOnly}
+      disabled={disabled}
+    />
+  ) : (
+    <Tooltip
+      bg="primary.dark"
+      label="Only functions with “is_entry: true” are able to interacted through Celatone’s module interactions."
+      hidden={!disabled}
+    >
+      <FunctionCardBody
+        variant={variant}
+        exposedFn={exposedFn}
+        onFunctionSelect={onFunctionSelect}
+        isReadOnly={isReadOnly}
+        disabled={disabled}
+      />
     </Tooltip>
   );
 };