diff --git a/ui/app/actions/actions.ts b/ui/app/actions/actions.ts index 2b1b708..44cb462 100644 --- a/ui/app/actions/actions.ts +++ b/ui/app/actions/actions.ts @@ -375,3 +375,30 @@ export async function getActivities({ ); return await res.json(); } + +export async function getDomainActivities({ + domainName, + page, + size, + orderBy, + sortBy, +}: { + domainName: string; + page: number; + size: number; + orderBy: ORDER_BY; + sortBy: SORT_BY; +}) { + if (!domainName) return; + + const res = await fetch( + `${process.env.Non_NEXT_PUBLIC_API_URL}/activities/domain/${domainName}?page=${page}&size=${size}&orderBy=${orderBy}&sortBy=${sortBy}`, + { + headers: { + "Content-Type": "application/json", + "x-api-key": process.env.Non_NEXT_PUBLIC_API_KEY, + }, + } + ); + return await res.json(); +} diff --git a/ui/comman/types.ts b/ui/comman/types.ts index 2b6eb94..1b412e7 100644 --- a/ui/comman/types.ts +++ b/ui/comman/types.ts @@ -56,6 +56,8 @@ export type TableConfig = { icon?: string | React.ReactElement; onClick?: string; hash?: string; + redirectLink?: string; + link?: string; }; view?: View; sortBy?: SORT_BY; @@ -100,4 +102,4 @@ export enum NetworkID { mainnet = "mina:mainnet", devnet = "mina:testnet", berkeley = "mina:berkeley", -} \ No newline at end of file +} diff --git a/ui/components/molecules/modals/modalInfo/index.module.css b/ui/components/molecules/modals/modalInfo/index.module.css index 3406195..75c2d4f 100644 --- a/ui/components/molecules/modals/modalInfo/index.module.css +++ b/ui/components/molecules/modals/modalInfo/index.module.css @@ -87,3 +87,7 @@ .leftSideHeader { font-size: 16px; } + +.bottomContent a { + color: var(--link-active-color); +} diff --git a/ui/components/molecules/modals/modalInfo/modalInfo.tsx b/ui/components/molecules/modals/modalInfo/modalInfo.tsx index a0c88ce..a4f9d5d 100644 --- a/ui/components/molecules/modals/modalInfo/modalInfo.tsx +++ b/ui/components/molecules/modals/modalInfo/modalInfo.tsx @@ -15,6 +15,7 @@ import TruncateText from "../../truncateText/truncateText"; import { addMinaText } from "@/helpers/name.helper"; import { useRouter } from "next/navigation"; import { ModalInfoProps } from "../modals.types"; +import { chain } from "@/comman/constants"; const ModalInfo = ({ data }: ModalInfoProps): JSX.Element => { const router = useRouter(); @@ -88,12 +89,13 @@ const ModalInfo = ({ data }: ModalInfoProps): JSX.Element => {
{renderContentItem({ header: "Domain Owner", - action: () => router.push(`${Routs.NAMES}/${ownerAddress}`), + url: `https://minascan.io/${chain}/account/${ownerAddress}/txs`, content: ( ), })} diff --git a/ui/components/molecules/staticEllipse/index.module.css b/ui/components/molecules/staticEllipse/index.module.css index 566b19a..59dcc4c 100644 --- a/ui/components/molecules/staticEllipse/index.module.css +++ b/ui/components/molecules/staticEllipse/index.module.css @@ -7,6 +7,11 @@ .wrapper a { display: flex; + color: var(--link-active-color); +} + +.wrapper a .dot { + background-color: var(--link-active-color); } .wrapper a:hover { diff --git a/ui/components/molecules/staticEllipse/staticEllipse.tsx b/ui/components/molecules/staticEllipse/staticEllipse.tsx index 3d8062e..3bcbb70 100644 --- a/ui/components/molecules/staticEllipse/staticEllipse.tsx +++ b/ui/components/molecules/staticEllipse/staticEllipse.tsx @@ -5,6 +5,7 @@ import classNames from "classnames"; import { View } from "@/comman/types"; import { robotoMedium } from "@/app/fonts"; import { useMedia } from "@/hooks"; +import Link from "next/link"; const StaticEllipse = ({ text, @@ -63,6 +64,8 @@ const StaticEllipse = ({ if ((!firstString || !secondString || !text) && !string) return null; if (link) { + const isExternal = link.includes("http"); + return (
- + {string ? (
{string}
) : ( @@ -88,7 +91,7 @@ const StaticEllipse = ({
{secondString}
)} -
+
{children}
diff --git a/ui/components/organisms/accountConent/accountContent.tsx b/ui/components/organisms/accountConent/accountContent.tsx index 8eaee5f..82a2f8d 100644 --- a/ui/components/organisms/accountConent/accountContent.tsx +++ b/ui/components/organisms/accountConent/accountContent.tsx @@ -9,6 +9,7 @@ import Image from "next/image"; import classNames from "classnames"; import { useParams } from "next/navigation"; import { useStoreContext } from "@/store"; +import TruncateText from "@/components/molecules/truncateText"; const AccountContent = () => { const params = useParams(); @@ -21,8 +22,8 @@ const AccountContent = () => { return (
- - {params?.id || accountId} + + {params?.id || accountId}
{ useEffect(() => { (async () => { - try { + try { setLoading(true); const response: DataTable = await getActivities({ accountAddress: (params?.id as string) || accountId, @@ -35,13 +36,16 @@ const ActivityContent = (): JSX.Element => { orderBy: ORDER_BY.DESC, }); - setActivities({...response, + setActivities({ + ...response, content: response?.content?.map((item) => { return { ...item, - domainName: addMinaText(item?.domainName) - } - }) + domainNameRedirect: `${Routs.NAME}/${item.id}`, + redirectLink: `https://minascan.io/${chain}/tx/${item.transaction}`, + domainName: addMinaText(item?.domainName), + }; + }), }); } catch (error) {} setLoading(false); @@ -57,7 +61,6 @@ const ActivityContent = (): JSX.Element => { setPage(page); }; - return ( { + const [loading, setLoading] = useState(true); + const [size, setSize] = useState(initSize); + const [page, setPage] = useState(initPage); + const [activities, setActivities] = useState(null); + + useEffect(() => { + (async () => { + try { + setLoading(true); + const response: DataTable = await getDomainActivities({ + domainName: domainName, + page, + size, + sortBy: SORT_BY.TIMESTAMP, + orderBy: ORDER_BY.DESC, + }); + + setActivities({ + ...response, + content: response?.content?.map((item) => { + return { + ...item, + domainNameRedirect: `${Routs.NAME}/${item.id}`, + redirectLink: `https://minascan.io/${chain}/tx/${item.transaction}`, + domainName: addMinaText(item?.domainName), + }; + }), + }); + } catch (error) {} + setLoading(false); + })(); + }, [domainName, size, page]); + + const onSize = (size) => { + setPage(initPage); + setSize(size); + }; + + const onPage = (page) => { + setPage(page); + }; + console.log(activities); + + return ( +
{ + console.log(data); + }} + onChangeOrder={(data) => { + console.log(data); + }} + /> + ); +}; + +export { ActivityContent }; diff --git a/ui/components/organisms/detailsNameInfo/components/index.ts b/ui/components/organisms/detailsNameInfo/components/index.ts index e08dfe7..b97f765 100644 --- a/ui/components/organisms/detailsNameInfo/components/index.ts +++ b/ui/components/organisms/detailsNameInfo/components/index.ts @@ -1,2 +1,2 @@ -export { OwnershipContent } from "./ownership"; +export { ActivityContent } from "./activity"; export { ProfileContent } from "./profile"; diff --git a/ui/components/organisms/detailsNameInfo/components/ownership/index.tsx b/ui/components/organisms/detailsNameInfo/components/ownership/index.tsx deleted file mode 100644 index e9d5c17..0000000 --- a/ui/components/organisms/detailsNameInfo/components/ownership/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -const OwnershipContent = (): JSX.Element => { - return
dfhg
; -}; - -export { OwnershipContent }; diff --git a/ui/components/organisms/detailsNameInfo/components/profile/index.module.css b/ui/components/organisms/detailsNameInfo/components/profile/index.module.css index ad44de3..1341e95 100644 --- a/ui/components/organisms/detailsNameInfo/components/profile/index.module.css +++ b/ui/components/organisms/detailsNameInfo/components/profile/index.module.css @@ -29,6 +29,16 @@ color: rgb(113, 145, 252); } +.icon { + margin-left: 12px; + cursor: pointer; + transition: all .2s; +} + +.icon:hover { + opacity: .6; +} + .staticEllipse { color: #1a1a1b; } diff --git a/ui/components/organisms/detailsNameInfo/components/profile/index.tsx b/ui/components/organisms/detailsNameInfo/components/profile/index.tsx index ea9632f..68b2f15 100644 --- a/ui/components/organisms/detailsNameInfo/components/profile/index.tsx +++ b/ui/components/organisms/detailsNameInfo/components/profile/index.tsx @@ -6,6 +6,11 @@ import { dayMonthYearTimeFormat } from "@/helpers/timeHelper"; import { StaticEllipse } from "@/components/molecules/staticEllipse"; import { CopyIcon } from "@/components/atoms/copyIcon"; import React, { ReactNode } from "react"; +import defaultIcon from "../../../../../assets/default.svg"; +import { Routs } from "@/comman/types"; +import Image from "next/image"; +import Link from "next/link"; +import { chain } from "@/comman/constants"; const ProfileContent = ({ accountDomainDetails, @@ -16,10 +21,14 @@ const ProfileContent = ({ title, value, isEllipse, + link, + icon, }: { title: string; value?: any; isEllipse?: boolean; + link?: string; + icon?: string; }): JSX.Element => { return (
@@ -33,21 +42,33 @@ const ProfileContent = ({ )} text={value} view={{ sm: 10, md: 14, lg: 18 }} + link={link} /> ) : (
{value}
)} + {icon && ( + + + + )}
); }; + return (
{itemRender({ title: "Owner", value: accountDomainDetails.ownerAddress, + link: `${Routs.NAMES}/${accountDomainDetails.ownerAddress}`, isEllipse: true, + icon: defaultIcon, })} {itemRender({ title: "IPFS", @@ -72,6 +93,7 @@ const ProfileContent = ({ {itemRender({ title: "Creation Transaction", value: accountDomainDetails.transaction, + link: `https://minascan.io/${chain}/tx/${accountDomainDetails.transaction}`, isEllipse: true, })} {itemRender({ diff --git a/ui/components/organisms/detailsNameInfo/detailsNameInfo.tsx b/ui/components/organisms/detailsNameInfo/detailsNameInfo.tsx index c050444..8e5f60d 100644 --- a/ui/components/organisms/detailsNameInfo/detailsNameInfo.tsx +++ b/ui/components/organisms/detailsNameInfo/detailsNameInfo.tsx @@ -19,6 +19,7 @@ import { Star } from "@/components/atoms/star"; import { TABS_VARIANT, Tabs } from "@/components/molecules/tabs"; import { ProfileContent } from "./components"; import { addMinaText } from "@/helpers/name.helper"; +import { ActivityContent } from "./components/activity"; const DetailsNameInfo = ({ accountDomainDetails, @@ -114,15 +115,17 @@ const DetailsNameInfo = ({ )}
-
- -
+ {isOwner && ( +
+ +
+ )} + ), + title: "Activity", + value: 2, + }, ]} initValue={1} /> diff --git a/ui/components/organisms/table/templates/index.tsx b/ui/components/organisms/table/templates/index.tsx index 6fd9839..05b3d2b 100644 --- a/ui/components/organisms/table/templates/index.tsx +++ b/ui/components/organisms/table/templates/index.tsx @@ -6,6 +6,7 @@ import ButtonTemplate from "./buttonTemplate/buttonTemplate"; import TimeTemplate from "./timeTemplate/timeTemplate"; import { CounterTemplate } from "./counterTemplate"; import { IconTemplate } from "./iconTemplate"; +import { LinkTemplate } from "./linkTemplate"; export enum TableTemplates { STRING = "string", @@ -16,6 +17,7 @@ export enum TableTemplates { TIME = "time", COUNTER = "counter", ICON = "icon", + LINK = "link", } const getCell = ({ data, config }): JSX.Element => { @@ -34,6 +36,8 @@ const getCell = ({ data, config }): JSX.Element => { return ; case TableTemplates.ICON: return ; + case TableTemplates.LINK: + return ; } }; diff --git a/ui/components/organisms/table/templates/linkTemplate/index.module.css b/ui/components/organisms/table/templates/linkTemplate/index.module.css new file mode 100644 index 0000000..0e837cd --- /dev/null +++ b/ui/components/organisms/table/templates/linkTemplate/index.module.css @@ -0,0 +1,8 @@ +.link { + color: var(--link-active-color); + transition: all .2s; +} + +.link:hover { + color: var(--col--link); +} \ No newline at end of file diff --git a/ui/components/organisms/table/templates/linkTemplate/index.ts b/ui/components/organisms/table/templates/linkTemplate/index.ts new file mode 100644 index 0000000..48a720c --- /dev/null +++ b/ui/components/organisms/table/templates/linkTemplate/index.ts @@ -0,0 +1 @@ +export { default as LinkTemplate } from "./linkTemplate"; diff --git a/ui/components/organisms/table/templates/linkTemplate/linkTemplate.tsx b/ui/components/organisms/table/templates/linkTemplate/linkTemplate.tsx new file mode 100644 index 0000000..a5fd30a --- /dev/null +++ b/ui/components/organisms/table/templates/linkTemplate/linkTemplate.tsx @@ -0,0 +1,33 @@ +import Link from "next/link"; +import { FC } from "react"; + +import style from "./index.module.css"; +import TruncateText from "@/components/molecules/truncateText"; + +type LinkTemplateProps = { + data: any; + config: { + fields: { + link: string; + value: string; + }; + }; +}; +const LinkTemplate: FC = ({ data, config }) => { + const link = data[config.fields.link]; + const value = data[config.fields.value]; + + return ( + <> + {link && value ? ( + + {value} + + ) : ( + "-" + )} + + ); +}; + +export default LinkTemplate; diff --git a/ui/components/organisms/table/templates/namesTemplate/namesTemplate.tsx b/ui/components/organisms/table/templates/namesTemplate/namesTemplate.tsx index 69f8799..7cc69c2 100644 --- a/ui/components/organisms/table/templates/namesTemplate/namesTemplate.tsx +++ b/ui/components/organisms/table/templates/namesTemplate/namesTemplate.tsx @@ -18,8 +18,10 @@ const NamesTemplate = ({ data, config }: NamesTemplateProps) => { const hash = data[config.fields.hash]; const name = data[config.fields.value]; const imgUrl = data[config.fields.url]; + const link = data[config.fields.redirectLink]; const view = config.view; const hiddenImg = config.hiddenImg; + return (
{!hiddenImg && ( @@ -33,6 +35,7 @@ const NamesTemplate = ({ data, config }: NamesTemplateProps) => { className={manropeSemiBold.className} text={hash} view={view || { sm: 8, md: 12, lg: 14 }} + link={link} >