diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4d3399862..74db05ccd 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 8be7153f0..21c0747bd 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/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 = () => ;
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 (
<>
+ {publicDetail?.logo && (
+
+ )}
- Account Details
+ {displayName}
@@ -90,6 +112,29 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
/>
+ {publicInfo?.description && (
+
+
+
+
+ Public Account Description
+
+
+
+ {publicInfo?.description}
+
+
+ )}
+
+): UseQueryResult => {
+ 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(
+ `${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,
+ }
+ );
+};