Merge pull request #309 from alleslabs/feat/public-account-detail

feat(components): add public account name and description in account …

CHANGELOG.md

@@ -65,6 +65,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#309](https://github.com/alleslabs/celatone-frontend/pull/309) Add public account name and description in account detail page
 - [#289](https://github.com/alleslabs/celatone-frontend/pull/289) Add public accounts to public projects
 - [#308](https://github.com/alleslabs/celatone-frontend/pull/308) Adjust view more button to full width and fix empty state layout in contract history
 - [#304](https://github.com/alleslabs/celatone-frontend/pull/304) Remove suffix for token card

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

@@ -7,6 +7,7 @@ import {
   TabPanels,
   Tabs,
   Text,
+  Image,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -15,11 +16,16 @@ import { useValidateAddress } from "lib/app-provider";
 import { BackButton } from "lib/components/button";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomTab } from "lib/components/CustomTab";
+import { CustomIcon } from "lib/components/icon";
 import PageContainer from "lib/components/PageContainer";
 import { InvalidState } from "lib/components/state";
 import { useAccountDetailsTableCounts } from "lib/model/account";
 import { useAccountId } from "lib/services/accountService";
 import { AmpEvent, AmpTrack, AmpTrackUseTab } from "lib/services/amplitude";
+import {
+  usePublicProjectByAccountAddress,
+  usePublicProjectBySlug,
+} from "lib/services/publicProjectService";
 import type { HumanAddr } from "lib/types";
 import { formatPrice, getFirstQueryParam, scrollToTop } from "lib/utils";
 
@@ -54,7 +60,12 @@ const InvalidAccount = () => <InvalidState title="Account does not exist" />;
 const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
   const [tabIndex, setTabIndex] = useState(TabIndex.Overview);
   const tableHeaderId = "accountDetailsTab";
+  const { data: publicInfo } = usePublicProjectByAccountAddress(accountAddress);
+  const { data: publicInfoBySlug } = usePublicProjectBySlug(publicInfo?.slug);
   const { data: accountId } = useAccountId(accountAddress);
+
+  const publicDetail = publicInfoBySlug?.details;
+
   const {
     tableCounts,
     refetchCodesCount,
@@ -71,12 +82,23 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
     scrollToTop();
   };
 
+  const displayName = publicInfo?.name ?? "Account Details";
+
   return (
     <>
       <Flex direction="column" gap={1} mt={6} mb={6}>
         <Flex gap={1}>
+          {publicDetail?.logo && (
+            <Image
+              src={publicDetail.logo}
+              borderRadius="full"
+              alt={publicDetail.name}
+              width={7}
+              height={7}
+            />
+          )}
           <Heading as="h5" variant="h5">
-            Account Details
+            {displayName}
           </Heading>
         </Flex>
         <Flex gap={2}>
@@ -90,6 +112,29 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
           />
         </Flex>
       </Flex>
+      {publicInfo?.description && (
+        <Flex
+          direction="column"
+          bg="pebble.900"
+          maxW="100%"
+          borderRadius="8px"
+          py={4}
+          px={5}
+          my={6}
+          flex="1"
+        >
+          <Flex align="center" gap={1} h="32px">
+            <CustomIcon name="website" ml="0" my="0" />
+            <Text variant="body2" fontWeight={500} color="text.dark">
+              Public Account Description
+            </Text>
+          </Flex>
+          <Text variant="body2" color="text.main" mb="1">
+            {publicInfo?.description}
+          </Text>
+        </Flex>
+      )}
+
       <Tabs index={tabIndex}>
         <TabList
           borderBottom="1px solid"

src/lib/services/publicProjectService.ts

@@ -153,3 +153,34 @@ export const usePublicProjectByCodeId = (
     }
   );
 };
+
+export const usePublicProjectByAccountAddress = (
+  accountAddress: Option<string>
+): UseQueryResult<PublicInfo> => {
+  const { currentChainRecord } = useWallet();
+  const queryFn = useCallback(async () => {
+    if (!accountAddress)
+      throw new Error(
+        "Wallet address not found (usePublicProjectByAccountAddress)"
+      );
+    if (!currentChainRecord)
+      throw new Error("No chain selected (usePublicProjectByAccountAddress)");
+    return axios
+      .get<PublicInfo>(
+        `${CELATONE_API_ENDPOINT}/accounts/${getChainApiPath(
+          currentChainRecord.chain.chain_name
+        )}/${currentChainRecord.chain.chain_id}/${accountAddress}`
+      )
+      .then(({ data: projectInfo }) => projectInfo);
+  }, [accountAddress, currentChainRecord]);
+  return useQuery(
+    ["public_project_by_account_address", accountAddress, currentChainRecord],
+    queryFn,
+    {
+      keepPreviousData: true,
+      enabled: !!accountAddress,
+      retry: false,
+      refetchOnWindowFocus: false,
+    }
+  );
+};