Public project page

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#76](https://github.com/alleslabs/celatone-frontend/pull/76) Add Public projects page
 - [#116](https://github.com/alleslabs/celatone-frontend/pull/116) Support Terra2.0 mainnet and testnet
 - [#94](https://github.com/alleslabs/celatone-frontend/pull/94) Add unsupported assets in contract details page
 - [#72](https://github.com/alleslabs/celatone-frontend/pull/72) Fix general wording and grammar

src/env.ts

@@ -79,3 +79,13 @@ export const getChainApiPath = (chainName: string) => {
       return undefined;
   }
 };
+// TODO to handle testnet separately later
+export const getMainnetApiPath = (chainId: string) => {
+  switch (chainId) {
+    case "osmo-test-4":
+    case "osmosis":
+      return "osmosis-1";
+    default:
+      return undefined;
+  }
+};

src/lib/app-provider/contexts/app.tsx

@@ -14,7 +14,11 @@ import {
 } from "lib/app-fns/explorer";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
 import { DEFAULT_ADDRESS, getChainNameByNetwork } from "lib/data";
-import { useCodeStore, useContractStore } from "lib/hooks";
+import {
+  useCodeStore,
+  useContractStore,
+  usePublicProjectStore,
+} from "lib/hooks";
 import type { ChainGasPrice, Token, U } from "lib/types";
 import { formatUserKey } from "lib/utils";
 
@@ -64,6 +68,7 @@ export const AppProvider = <ContractAddress, Constants extends AppConstants>({
   const { currentChainName, currentChainRecord, setCurrentChain } = useWallet();
   const { setCodeUserKey, isCodeUserKeyExist } = useCodeStore();
   const { setContractUserKey, isContractUserKeyExist } = useContractStore();
+  const { setProjectUserKey, isProjectUserKeyExist } = usePublicProjectStore();
 
   const chainGasPrice = useMemo(() => {
     if (
@@ -111,8 +116,9 @@ export const AppProvider = <ContractAddress, Constants extends AppConstants>({
       const userKey = formatUserKey(currentChainName, DEFAULT_ADDRESS);
       setCodeUserKey(userKey);
       setContractUserKey(userKey);
+      setProjectUserKey(userKey);
     }
-  }, [currentChainName, setCodeUserKey, setContractUserKey]);
+  }, [currentChainName, setCodeUserKey, setContractUserKey, setProjectUserKey]);
 
   useEffect(() => {
     /**
@@ -128,7 +134,11 @@ export const AppProvider = <ContractAddress, Constants extends AppConstants>({
   }, [router.query.network, setCurrentChain]);
 
   const AppContent = observer(() => {
-    if (isCodeUserKeyExist() && isContractUserKeyExist())
+    if (
+      isCodeUserKeyExist() &&
+      isContractUserKeyExist() &&
+      isProjectUserKeyExist()
+    )
       return (
         <AppContext.Provider value={states}>{children}</AppContext.Provider>
       );

src/lib/components/AppLink.tsx

@@ -18,7 +18,9 @@ export const AppLink = ({
       }
     >
       {typeof children === "string" ? (
-        <Text color={linkProps.color}>{children}</Text>
+        <Text variant="body2" color={linkProps.color}>
+          {children}
+        </Text>
       ) : (
         children
       )}

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

@@ -201,7 +201,7 @@ export function SaveNewContract({ list, buttonProps }: SaveNewContractProps) {
         <ControllerInput
           name="instantiator"
           control={control}
-          label="Instantiator"
+          label="Instantiated by"
           variant="floating"
           isDisabled
           labelBgColor="gray.800"

src/lib/components/modal/select-contract/AllContractLists.tsx

@@ -1,5 +1,6 @@
 import { Box, SimpleGrid } from "@chakra-ui/react";
 import { useMemo, useState } from "react";
+import { MdSearchOff } from "react-icons/md";
 
 import { TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state/EmptyState";
@@ -42,7 +43,10 @@ export const AllContractLists = ({
         mb={isReadOnly ? 4 : 12}
       />
       {filteredContractLists.length === 0 ? (
-        <EmptyState message="None of your lists matches this search." />
+        <EmptyState
+          message="None of your lists matches this search."
+          icon={MdSearchOff}
+        />
       ) : (
         <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} w="full">
           {filteredContractLists.map((item) => (

src/lib/components/modal/select-contract/ContractListDetail.tsx

@@ -1,6 +1,7 @@
 import { Box, Flex } from "@chakra-ui/react";
 import { matchSorter } from "match-sorter";
 import { useMemo, useState } from "react";
+import { MdSearchOff } from "react-icons/md";
 
 import { TagSelection, TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state/EmptyState";
@@ -26,6 +27,7 @@ const FilteredListDetail = ({
   if (contracts.length === 0)
     return (
       <EmptyState
+        icon={MdSearchOff}
         message="No contracts match found. 
         Make sure you are searching with contract address, name, or description."
       />

src/lib/components/state/EmptyState.tsx

@@ -1,20 +1,16 @@
 import { Flex, Icon, Text } from "@chakra-ui/react";
 import type { IconType } from "react-icons/lib";
-import { MdSearchOff } from "react-icons/md";
 
 interface EmptyStateProps {
   icon?: IconType;
   message: string;
 }
 
-export const EmptyState = ({
-  icon = MdSearchOff,
-  message,
-}: EmptyStateProps) => {
+export const EmptyState = ({ icon, message }: EmptyStateProps) => {
   return (
-    <Flex alignItems="center" flexDir="column" gap="4">
-      <Icon as={icon} color="gray.600" boxSize="16" />
-      <Text color="gray.500" w="500px" textAlign="center">
+    <Flex alignItems="center" flexDir="column" gap="4" width="full">
+      {icon && <Icon as={icon} color="gray.600" boxSize="16" />}
+      <Text color="gray.500" w="540px" textAlign="center">
         {message}
       </Text>
     </Flex>

src/lib/hooks/store.ts

@@ -9,3 +9,8 @@ export function useContractStore() {
   const { contractStore } = useStore();
   return contractStore;
 }
+
+export function usePublicProjectStore() {
+  const { publicProjectStore } = useStore();
+  return publicProjectStore;
+}

src/lib/layout/Navbar.tsx

@@ -1,6 +1,7 @@
-import { Flex, Box, Text, Icon, Button, Spacer } from "@chakra-ui/react";
+import { Flex, Box, Text, Icon, Button, Spacer, Image } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import { observer } from "mobx-react-lite";
+import type { IconType } from "react-icons";
 import {
   MdHome,
   MdCode,
@@ -17,23 +18,38 @@ import {
 import { AppLink } from "lib/components/AppLink";
 import { CreateNewList } from "lib/components/modal";
 import { INSTANTIATED_LIST_NAME, getListIcon, SAVED_LIST_NAME } from "lib/data";
-import { useContractStore } from "lib/hooks";
+import { useContractStore, usePublicProjectStore } from "lib/hooks";
 import { cmpContractListInfo } from "lib/stores/contract";
 import { formatSlugName } from "lib/utils";
 
+interface SubmenuInfo {
+  name: string;
+  slug: string;
+  icon?: IconType;
+  logo?: string;
+}
+
+interface MenuInfo {
+  category: string;
+  submenu: SubmenuInfo[];
+}
+
 // TODO: move to proper place
 const PERMISSIONED_CHAINS = ["osmosis", "osmosistestnet"];
 
 const Navbar = observer(() => {
   const { getContractLists } = useContractStore();
+
+  const { getSavedPublicProjects } = usePublicProjectStore();
+
   const { currentChainName } = useWallet();
 
   const getAllCodesShortCut = () =>
     PERMISSIONED_CHAINS.includes(currentChainName)
-      ? [{ name: "All Codes", slug: "/all-codes", icon: MdPublic }]
+      ? [{ name: "All Stored Codes", slug: "/all-codes", icon: MdPublic }]
       : [];
 
-  const navMenu = [
+  const navMenu: MenuInfo[] = [
     {
       category: "Overview",
       submenu: [
@@ -89,27 +105,33 @@ const Navbar = observer(() => {
           .filter((list) => list.slug !== formatSlugName(SAVED_LIST_NAME))
           .sort(cmpContractListInfo)
           .slice(0, 3)
-          .map((list) => {
-            return {
-              name: list.name,
-              slug: `/contract-list/${list.slug}`,
-              icon: getListIcon(list.name),
-            };
-          }),
-        { name: "View All", slug: "/contract-list", icon: MdMoreHoriz },
+          .map((list) => ({
+            name: list.name,
+            slug: `/contract-list/${list.slug}`,
+            icon: getListIcon(list.name),
+          })),
+        {
+          name: "View All",
+          slug: "/contract-list",
+          icon: MdMoreHoriz,
+        },
+      ],
+    },
+    {
+      category: "Public Projects",
+      submenu: [
+        ...getSavedPublicProjects().map((list) => ({
+          name: list.name,
+          slug: `/public-project/${list.slug}`,
+          logo: list.logo,
+        })),
+        {
+          name: "View All",
+          slug: "/public-project",
+          icon: MdMoreHoriz,
+        },
       ],
     },
-    // {
-    //   category: "Public Contracts",
-    //   submenu: [
-    //     {
-    //       name: "Astropost",
-    //       slug: "/public-contracts/astroport",
-    //       icon: MdLibraryBooks,
-    //     },
-    //     { name: "View All", slug: "/public-contracts", icon: MdMoreHoriz },
-    //   ],
-    // },
   ];
 
   return (
@@ -153,7 +175,17 @@ const Navbar = observer(() => {
                   transition="all .25s ease-in-out"
                   alignItems="center"
                 >
-                  <Icon as={submenu.icon} color="gray.600" boxSize="4" />
+                  {submenu.icon && (
+                    <Icon as={submenu.icon} color="gray.600" boxSize="4" />
+                  )}
+                  {submenu.logo && (
+                    <Image
+                      src={submenu.logo}
+                      borderRadius="full"
+                      alt={submenu.slug}
+                      boxSize={4}
+                    />
+                  )}
                   <Text variant="body2" className="ellipsis">
                     {submenu.name}
                   </Text>

src/lib/pages/contract-list/components/ContractListReadOnlyTable.tsx

@@ -32,7 +32,7 @@ export const ContractListReadOnlyTable = ({
             <Th width="10%">Contract Address</Th>
             <Th width="50%">Contract Name</Th>
             <Th width="30%">Tags</Th>
-            <Th width="10%">Instantiator</Th>
+            <Th width="10%">Instantiated by</Th>
           </Tr>
         </Thead>
         <Tbody>

src/lib/pages/contract-list/components/ContractListTable.tsx

@@ -68,7 +68,7 @@ export const ContractListTable = ({
             <Th width="15%">Contract Address</Th>
             <Th width="25%">Contract Name</Th>
             <Th width="25%">Tags</Th>
-            <Th width="25%">Instantiator</Th>
+            <Th width="25%">Instantiated by</Th>
             <Th width="10%" />
           </Tr>
         </Thead>
@@ -107,7 +107,7 @@ export const ContractListTable = ({
               <Td>
                 <TagsCell contractLocalInfo={item} />
               </Td>
-              {/* Instantiator */}
+              {/* Instantiated by */}
               <Td>
                 <ExplorerLink
                   value={item.instantiator}

src/lib/pages/contract-list/slug.tsx

@@ -80,6 +80,7 @@ const ContractsByList = observer(() => {
           </BreadcrumbItem>
           <BreadcrumbItem isCurrentPage>
             <Text
+              variant="body2"
               className="ellipsis"
               width="250px"
               fontWeight="600"

src/lib/pages/public-project/components/AllProject.tsx

@@ -0,0 +1,84 @@
+import { Box, SimpleGrid, Flex, Button, Icon } from "@chakra-ui/react";
+import { matchSorter } from "match-sorter";
+import { useMemo, useState } from "react";
+import { BsGithub } from "react-icons/bs";
+import { MdOutlineManageSearch, MdSearchOff } from "react-icons/md";
+
+import { TextInput } from "lib/components/forms";
+import { EmptyState } from "lib/components/state/EmptyState";
+import { usePublicProjectStore } from "lib/hooks";
+import { usePublicProjectsQuery } from "lib/services/publicProject";
+
+import { PublicProjectCard } from "./PublicProjectCard";
+
+export const AllProject = () => {
+  const { data: publicProjectInfo } = usePublicProjectsQuery();
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const { getSavedPublicProjects } = usePublicProjectStore();
+
+  const filteredPublicProjects = useMemo(() => {
+    if (publicProjectInfo) {
+      const savedProjects = getSavedPublicProjects();
+      // HACKED
+      // TODO Sort saved project
+      const orderedProjects = publicProjectInfo.map((project) => {
+        const foundIndex = savedProjects.findIndex(
+          (each) => each.slug === project.slug
+        );
+
+        return {
+          ...project,
+          order: foundIndex === -1 ? 9999 : foundIndex,
+        };
+      });
+
+      return matchSorter(orderedProjects, searchKeyword, {
+        keys: ["details.name"],
+      });
+    }
+    return [];
+  }, [getSavedPublicProjects, publicProjectInfo, searchKeyword]);
+
+  if (!publicProjectInfo)
+    return (
+      <Flex flexDirection="column" alignItems="center">
+        <EmptyState
+          icon={MdOutlineManageSearch}
+          message="We are currently gathering public projects to feature here. If you would like to share your project with the community, please submit your request."
+        />
+        <Button gap={2} mt={8}>
+          <Icon as={BsGithub} />
+          Submit on Github
+        </Button>
+      </Flex>
+    );
+
+  return (
+    <Box minH="xs" w="100%">
+      <TextInput
+        variant="floating"
+        value={searchKeyword}
+        setInputState={setSearchKeyword}
+        label="Search for existing public projects"
+        size="md"
+        mb={12}
+      />
+      {!filteredPublicProjects.length ? (
+        <EmptyState
+          message="None of your lists matches this search."
+          icon={MdSearchOff}
+        />
+      ) : (
+        <SimpleGrid columns={{ sm: 1, md: 3, xl: 4 }} spacing={4} w="full">
+          {filteredPublicProjects.map((item) => (
+            <PublicProjectCard
+              key={item.slug}
+              item={item.details}
+              slug={item.slug}
+            />
+          ))}
+        </SimpleGrid>
+      )}
+    </Box>
+  );
+};