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 && ( + {publicDetail.name} + )} - 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, + } + ); +};