feat(pages): contract details page skeleton

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/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/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,32 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+export const CommandSection = () => {
+  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,26 @@
+import { Flex, Heading } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+
+import { LabelText } from "./LabelText";
+
+export const InstantiateInfo = () => {
+  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,17 @@
+import { Flex, Heading, Icon } from "@chakra-ui/react";
+import { FiChevronDown } from "react-icons/fi";
+
+interface JsonInfoProps {
+  header: string;
+}
+
+export const JsonInfo = ({ header }: JsonInfoProps) => {
+  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,27 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+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>
+  );
+};

src/lib/pages/contract-details/index.tsx

@@ -0,0 +1,140 @@
+import { ArrowBackIcon, SearchIcon } from "@chakra-ui/icons";
+import {
+  Button,
+  Flex,
+  Heading,
+  Icon,
+  Text,
+  TabList,
+  Tabs,
+  TabPanels,
+  TabPanel,
+} from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { MdBookmark, MdInput } from "react-icons/md";
+
+import { CustomTab } from "lib/components/CustomTab";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import PageContainer from "lib/components/PageContainer";
+
+import { CommandSection } from "./components/CommandSection";
+import { InstantiateInfo } from "./components/InstantiateInfo";
+import { JsonInfo } from "./components/JsonInfo";
+import { TokenSection } from "./components/TokenSection";
+
+const ContractDetails = () => {
+  const router = useRouter();
+  return (
+    <PageContainer>
+      <Button
+        variant="ghost-primary"
+        onClick={() => router.back()}
+        leftIcon={<ArrowBackIcon boxSize={4} />}
+      >
+        BACK
+      </Button>
+      <Flex justify="space-between" my={6}>
+        <Flex direction="column" gap={1}>
+          <Heading as="h5" variant="h5" color="text.main">
+            Contract Name Section Goes Hereeeee
+          </Heading>
+          <Flex gap={2}>
+            <Text color="text.dark" variant="body2" fontWeight={500}>
+              Contract Address:
+            </Text>
+            <ExplorerLink
+              type="contract_address"
+              value="osmo1xzq6l8jl2c3pcmpyswg7l8wckpc5xntnjn04w4y99ngha4h5mzlstnn3f2"
+              textFormat="normal"
+              maxWidth="none"
+            />
+          </Flex>
+          <Flex gap={2}>
+            <Text color="text.dark" variant="body2" fontWeight={500}>
+              Label:
+            </Text>
+            <Text variant="body2">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit ...
+            </Text>
+          </Flex>
+        </Flex>
+        <Flex gap={4}>
+          <Button
+            variant="outline-gray"
+            leftIcon={<Icon as={MdBookmark} boxSize="18px" />}
+          >
+            Add to list
+          </Button>
+          <Button variant="outline-primary" leftIcon={<SearchIcon />}>
+            Query
+          </Button>
+          <Button
+            variant="outline-primary"
+            leftIcon={<Icon as={MdInput} boxSize="18px" />}
+          >
+            Execute
+          </Button>
+        </Flex>
+      </Flex>
+      <TokenSection />
+      <Flex
+        direction="column"
+        bg="gray.900"
+        borderRadius="8px"
+        p={4}
+        gap={2}
+        my={6}
+      >
+        <Text variant="body2" fontWeight={500} color="text.dark">
+          Your Contract Description
+        </Text>
+        <Text variant="body2" color="text.dark">
+          Save contract to lists to add your own contract description ...
+        </Text>
+      </Flex>
+      <CommandSection />
+      <Flex my={12} justify="space-between">
+        <InstantiateInfo />
+        <Flex direction="column" flex={0.8} gap={6}>
+          <JsonInfo header="Contract Info" />
+          <JsonInfo header="Instantiate Messages" />
+        </Flex>
+      </Flex>
+      <Heading as="h6" variant="h6" mb={6}>
+        History
+      </Heading>
+      <Tabs>
+        <TabList border="none" mb="32px">
+          <CustomTab count={100}>All</CustomTab>
+          <CustomTab count={50}>Executes</CustomTab>
+          <CustomTab count={20}>Migration</CustomTab>
+          <CustomTab count={12}>Related Proposals</CustomTab>
+        </TabList>
+        <TabPanels>
+          <TabPanel p={0}>
+            <Heading as="h6" variant="h6" color="error.main">
+              All Table
+            </Heading>
+          </TabPanel>
+          <TabPanel p={0}>
+            <Heading as="h6" variant="h6" color="error.main">
+              Executes Table
+            </Heading>
+          </TabPanel>
+          <TabPanel p={0}>
+            <Heading as="h6" variant="h6" color="error.main">
+              Migration Table
+            </Heading>
+          </TabPanel>
+          <TabPanel p={0}>
+            <Heading as="h6" variant="h6" color="error.main">
+              Related Proposals Table
+            </Heading>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </PageContainer>
+  );
+};
+
+export default ContractDetails;

src/lib/pages/execute/components/ExecuteArea.tsx

@@ -11,7 +11,7 @@ import { useExecuteContractTx } from "lib/app-provider/tx/execute";
 import ContractCmdButton from "lib/components/ContractCmdButton";
 import CopyButton from "lib/components/CopyButton";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
-import JsonInput from "lib/components/Json/JsonInput";
+import JsonInput from "lib/components/json/JsonInput";
 import { useContractStore } from "lib/hooks";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import type { Activity } from "lib/stores/contract";

src/lib/pages/instantiate/instantiate.tsx

@@ -16,7 +16,7 @@ import { useFieldArray, useForm } from "react-hook-form";
 import { useFabricateFee, useSimulateFee } from "lib/app-provider";
 import { useInstantiateTx } from "lib/app-provider/tx/instantiate";
 import { ControllerInput, TextInput } from "lib/components/forms";
-import JsonInput from "lib/components/Json/JsonInput";
+import JsonInput from "lib/components/json/JsonInput";
 import { Stepper } from "lib/components/stepper";
 import WasmPageContainer from "lib/components/WasmPageContainer";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";

src/lib/pages/query/components/JsonReadOnly.tsx

@@ -5,7 +5,7 @@ import { useMemo } from "react";
 
 import { jsonValidate } from "lib/utils";
 
-const JsonEditor = dynamic(() => import("lib/components/Json/JsonEditor"), {
+const JsonEditor = dynamic(() => import("lib/components/json/JsonEditor"), {
   ssr: false,
 });