Merge pull request #31 from alleslabs/page/contract-detail-skeleton

feat(pages): contract details page skeleton

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#31](https://github.com/alleslabs/celatone-frontend/pull/31) Add contract details page ui skeleton
 - [#41](https://github.com/alleslabs/celatone-frontend/pull/41) Add Github action for tracking CHANGELOG.md for changes
 
 ### Improvements

src/lib/pages/codes/components/CustomTab.tsx → src/lib/components/CustomTab.tsx

@@ -2,18 +2,18 @@ import type { TabProps } from "@chakra-ui/react";
 import { Button, useTab, Badge, useMultiStyleConfig } from "@chakra-ui/react";
 
 interface CustomTabProps extends TabProps {
-  codeCount: number;
+  count: number;
 }
 
-const CustomTab = ({ codeCount, ...restProps }: CustomTabProps) => {
+export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
   const tabProps = useTab({ ...restProps });
   const isSelected = tabProps["aria-selected"];
   const styles = useMultiStyleConfig("Tabs", tabProps);
 
   return (
     <Button
       __css={styles.tab}
-      {...tabProps}
+      fontSize="14px"
       fontWeight="700"
       lineHeight="24px"
       letterSpacing="0.4px"
@@ -26,14 +26,13 @@ const CustomTab = ({ codeCount, ...restProps }: CustomTabProps) => {
       _active={{
         bg: "unset",
       }}
+      {...tabProps}
     >
       {tabProps.children}
 
       <Badge variant={isSelected ? "primary" : "gray"} ml="6px">
-        {codeCount}
+        {count}
       </Badge>
     </Button>
   );
 };
-
-export default CustomTab;

src/lib/components/InstantiateOffchainDetail.tsx

@@ -73,7 +73,7 @@ export const InstantiateOffChainDetail = observer(
           data.tags,
           data.contractLists
         );
-        router.push("/contracts/instantiated-by-me");
+        router.push("/contract-list/instantiated-by-me");
       })();
     };
 
@@ -146,7 +146,7 @@ export const InstantiateOffChainDetail = observer(
             <Button
               w="128px"
               variant="outline-gray"
-              onClick={() => router.push("/contracts/instantiated-by-me")}
+              onClick={() => router.push("/contract-list/instantiated-by-me")}
             >
               Skip
             </Button>

src/lib/components/Json/JsonInput.tsx → src/lib/components/json/JsonInput.tsx

@@ -6,7 +6,7 @@ import { useState, useEffect } from "react";
 
 import { jsonPrettify, jsonValidate } from "lib/utils";
 
-const JsonEditor = dynamic(() => import("lib/components/Json/JsonEditor"), {
+const JsonEditor = dynamic(() => import("./JsonEditor"), {
   ssr: false,
 });
 

src/lib/components/modal/contract/EditContract.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { ActionModal } from "lib/components/modal/ActionModal";
-import { OffChainForm } from "lib/components/OffChain/OffChainForm";
+import { OffChainForm } from "lib/components/offchain/OffChainForm";
 import {
   MAX_CONTRACT_DESCRIPTION_LENGTH,
   MAX_CONTRACT_NAME_LENGTH,

src/lib/components/modal/contract/SaveNewContract.tsx

@@ -9,7 +9,7 @@ import { useCelatoneApp } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
 import { TextInput } from "lib/components/forms";
 import { ActionModal } from "lib/components/modal/ActionModal";
-import { OffChainDetail } from "lib/components/OffChain/OffChainDetail";
+import { OffChainDetail } from "lib/components/offchain/OffChainDetail";
 import {
   DEFAULT_RPC_ERROR,
   INSTANTIATED_LIST_NAME,

src/lib/components/modal/list/RemoveList.tsx

@@ -21,8 +21,8 @@ export function RemoveList({ list, menuItemProps }: ModalProps) {
   const router = useRouter();
   const handleRemove = () => {
     removeList(userKey, list.value);
-    router.push("/contracts");
-    // TODO: show toast after removed and redirect to /contracts
+    router.push("/contract-list");
+    // TODO: show toast after removed and redirect to /contract-list
     setTimeout(() => {
       toast({
         title: `Removed ${shortenName(list.label)}`,

src/lib/layout/Navbar.tsx

@@ -52,12 +52,12 @@ const Navbar = observer(() => {
       submenu: [
         {
           name: INSTANTIATED_LIST_NAME,
-          slug: `/contracts/${formatSlugName(INSTANTIATED_LIST_NAME)}`,
+          slug: `/contract-list/${formatSlugName(INSTANTIATED_LIST_NAME)}`,
           icon: getListIcon(INSTANTIATED_LIST_NAME),
         },
         {
           name: SAVED_LIST_NAME,
-          slug: `/contracts/${formatSlugName(SAVED_LIST_NAME)}`,
+          slug: `/contract-list/${formatSlugName(SAVED_LIST_NAME)}`,
           icon: getListIcon(SAVED_LIST_NAME),
         },
         ...getContractLists()
@@ -67,11 +67,11 @@ const Navbar = observer(() => {
           .map((list) => {
             return {
               name: list.name,
-              slug: `/contracts/${list.slug}`,
+              slug: `/contract-list/${list.slug}`,
               icon: getListIcon(list.name),
             };
           }),
-        { name: "View All", slug: "/contracts", icon: MdMoreHoriz },
+        { name: "View All", slug: "/contract-list", icon: MdMoreHoriz },
       ],
     },
     // {

src/lib/pages/codes/index.tsx

@@ -3,10 +3,10 @@ import { observer } from "mobx-react-lite";
 import type { ChangeEvent } from "react";
 import { useState } from "react";
 
+import { CustomTab } from "lib/components/CustomTab";
 import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
 import CodesTable from "lib/pages/codes/components/CodesTable";
-import CustomTab from "lib/pages/codes/components/CustomTab";
 
 import SaveCodeButton from "./components/SaveCodeButton";
 import UploadButton from "./components/UploadButton";
@@ -36,9 +36,9 @@ const Codes = observer(() => {
 
       <Tabs>
         <TabList border="none" mb="32px">
-          <CustomTab codeCount={allCodesCount}>All Codes</CustomTab>
-          <CustomTab codeCount={storedCodesCount}>My Stored Codes</CustomTab>
-          <CustomTab codeCount={savedCodesCount}>My Saved Codes </CustomTab>
+          <CustomTab count={allCodesCount}>All Codes</CustomTab>
+          <CustomTab count={storedCodesCount}>My Stored Codes</CustomTab>
+          <CustomTab count={savedCodesCount}>My Saved Codes </CustomTab>
         </TabList>
         <InputWithIcon
           placeholder="Search with code ID or code description"

src/lib/pages/contract-details/components/CommandSection.tsx

@@ -0,0 +1,37 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+export const CommandSection = () => {
+  /**
+   * @todos
+   * - Make an interface
+   * - Wireup with real query/execute commands data
+   */
+  return (
+    <Flex gap={6}>
+      <Flex
+        direction="column"
+        bg="gray.900"
+        p={4}
+        borderRadius="8px"
+        flex={0.5}
+      >
+        <Text color="text.dark" variant="body2" fontWeight={500} mb={2}>
+          Query Shortcuts
+        </Text>
+        {/* Query Contract Commands */}
+      </Flex>
+      <Flex
+        direction="column"
+        bg="gray.900"
+        p={4}
+        borderRadius="8px"
+        flex={0.5}
+      >
+        <Text color="text.dark" variant="body2" fontWeight={500} mb={2}>
+          Execute Shortcuts
+        </Text>
+        {/* Execute Contract Commands */}
+      </Flex>
+    </Flex>
+  );
+};

src/lib/pages/contract-details/components/InstantiateInfo.tsx

@@ -0,0 +1,31 @@
+import { Flex, Heading } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+
+import { LabelText } from "./LabelText";
+
+export const InstantiateInfo = () => {
+  /**
+   * @todos
+   * - Make an interface
+   * - All these are mockups, Wireup with real data and map render LabelText
+   */
+  return (
+    <Flex direction="column" gap={6} w="160px">
+      <Heading as="h6" variant="h6">
+        Instantiate Info
+      </Heading>
+      <LabelText label="Network">phoenix-1</LabelText>
+      <LabelText label="Instantiated by" helperText="(Wallet Address)">
+        <ExplorerLink
+          type="user_address"
+          value="osmo1wke7j8f5kgnnacs3avchcj6fvvdtvrsalzmddx"
+          canCopyWithHover
+        />
+      </LabelText>
+      <LabelText label="IBC Port ID">
+        wasm.terra1te47jv6pg272n8unq490nvhh5m43v5n5kxfgrztly2tmkmqxzw8qphrjx2
+      </LabelText>
+    </Flex>
+  );
+};

src/lib/pages/contract-details/components/JsonInfo.tsx

@@ -0,0 +1,24 @@
+import { Flex, Heading, Icon } from "@chakra-ui/react";
+import { FiChevronDown } from "react-icons/fi";
+
+interface JsonInfoProps {
+  header: string;
+}
+
+export const JsonInfo = ({ header }: JsonInfoProps) => {
+  /**
+   * @todos
+   * - Configure interface
+   * - Make this component collapsible
+   * - Wireup with real data
+   * - Render the data in JSON Readonly Editor
+   */
+  return (
+    <Flex justify="space-between" align="center" p="8px 16px">
+      <Heading as="h6" variant="h6">
+        {header}
+      </Heading>
+      <Icon as={FiChevronDown} color="text.dark" boxSize={5} />
+    </Flex>
+  );
+};

src/lib/pages/contract-details/components/LabelText.tsx

@@ -0,0 +1,27 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+interface LabelTextProps {
+  label: string;
+  children: string | JSX.Element;
+  helperText?: string;
+}
+
+export const LabelText = ({ label, children, helperText }: LabelTextProps) => {
+  return (
+    <Flex direction="column" gap={1}>
+      <Text variant="body2" color="text.dark" fontWeight={500}>
+        {label}
+      </Text>
+      {typeof children === "string" ? (
+        <Text variant="body2">{children}</Text>
+      ) : (
+        children
+      )}
+      {helperText && (
+        <Text variant="body3" color="text.dark">
+          {helperText}
+        </Text>
+      )}
+    </Flex>
+  );
+};

src/lib/pages/contract-details/components/TokenSection.tsx

@@ -0,0 +1,33 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+/**
+ * @todos
+ * - Make an interface for TokenSection and TokenCard
+ * - Wireup with real data
+ * - Token icon
+ */
+const TokenCard = () => {
+  return (
+    <Flex gap={1} p={2} background="gray.900" borderRadius="8px" flex={0.25}>
+      <Text color="text.main">
+        <span style={{ fontWeight: 700 }}>1.00</span> LUNA
+      </Text>
+    </Flex>
+  );
+};
+
+export const TokenSection = () => {
+  return (
+    <Flex direction="column">
+      <Text variant="body2" color="text.dark" mb={1} fontWeight={500}>
+        Tokens
+      </Text>
+      <Flex gap={4}>
+        <TokenCard />
+        <TokenCard />
+        <TokenCard />
+        <TokenCard />
+      </Flex>
+    </Flex>
+  );
+};