Staketab · VitalikKarpuk · Jul 8, 2024 · Jul 8, 2024
diff --git 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
@@ -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",
-}
+}
diff --git 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
@@ -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 => {
       <div className={style.bottomContent}>
         {renderContentItem({
           header: "Domain Owner",
-          action: () => router.push(`${Routs.NAMES}/${ownerAddress}`),
+          url: `https://minascan.io/${chain}/account/${ownerAddress}/txs`,
           content: (
             <StaticEllipse
               className={manropeSemiBold.className}
               text={ownerAddress || ""}
               view={{ sm: 10, md: 14, lg: 18 }}
+              link={`${Routs.NAMES}/${ownerAddress}`}
             />
           ),
         })}

diff --git 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
@@ -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 (
       <div
         className={classNames(
@@ -72,7 +75,7 @@ const StaticEllipse = ({
         )}
         style={{ ...style }}
       >
-        <a href={link} target="_blank">
+        <Link href={link} target={isExternal ? "_blank" : "_self"}>
           {string ? (
             <div className={styles.string}>{string}</div>
           ) : (
@@ -88,7 +91,7 @@ const StaticEllipse = ({
               <div className={styles.string}>{secondString}</div>
             </>
           )}
-        </a>
+        </Link>
 
         <div className={styles.copyIcon}>{children}</div>
       </div>

diff --git 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 (
     <div className={style.wrapper}>
       <div className={classNames(manropeBold.className, style.header)}>
-        <Image src={avatarIcon} alt="" width={40} height={40}/>
-        {params?.id || accountId}
+        <Image src={avatarIcon} alt="" width={40} height={40} />
+        <TruncateText>{params?.id || accountId}</TruncateText>
       </div>
       <Tabs
         className={style.contentTabs}

diff --git a/ui/components/organisms/accountConent/components/activity/constants.ts b/ui/components/organisms/accountConent/components/activity/constants.ts
@@ -1,3 +1,4 @@
+import { chain } from "@/comman/constants";
 import { SORT_BY, TableConfig } from "@/comman/types";
 import { TableTemplates } from "@/components/organisms/table/templates";
 
@@ -8,11 +9,12 @@ export const activitiesConfig: TableConfig[] = [
     columnTemplate: TableTemplates.STRING,
     fields: {
       value: "domainName",
+      link:  'domainNameRedirect'
     },
     style: {
-      fontSize: '16px',
-      maxWidth: '200px',
-    }
+      fontSize: "16px",
+      maxWidth: "200px",
+    },
   },
   {
     colName: "Activity",
@@ -22,8 +24,8 @@ export const activitiesConfig: TableConfig[] = [
       value: "activity",
     },
     style: {
-      maxWidth: '200px'
-    }
+      maxWidth: "200px",
+    },
   },
   {
     colName: "names",
@@ -33,8 +35,8 @@ export const activitiesConfig: TableConfig[] = [
       value: "details",
     },
     style: {
-      maxWidth: '200px'
-    }
+      maxWidth: "200px",
+    },
   },
   {
     colName: "Time",
@@ -51,10 +53,11 @@ export const activitiesConfig: TableConfig[] = [
     headerText: "Tx Hash",
     fields: {
       hash: "transaction",
+      redirectLink: "redirectLink",
     },
     hiddenImg: true,
     style: {
-      color: '#1A1A1B'
-    }
+      color: "#1A1A1B",
+    },
   },
 ];
diff --git a/ui/components/organisms/accountConent/components/activity/index.tsx b/ui/components/organisms/accountConent/components/activity/index.tsx
@@ -1,4 +1,4 @@
-import { DataTable, ORDER_BY, SORT_BY } from "@/comman/types";
+import { DataTable, ORDER_BY, Routs, SORT_BY } from "@/comman/types";
 import { TypeView } from "@/components/atoms/switchView/switchView";
 import { Table } from "@/components/organisms/table";
 import { useEffect, useState } from "react";
@@ -7,6 +7,7 @@ import { activitiesConfig } from "./constants";
 import { useParams } from "next/navigation";
 import { useStoreContext } from "@/store";
 import { addMinaText } from "@/helpers/name.helper";
+import { chain } from "@/comman/constants";
 
 const initPage = 0;
 const initSize = 50;
@@ -25,7 +26,7 @@ const ActivityContent = (): JSX.Element => {
 
   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 (
     <Table
       data={activities}

diff --git a/ui/components/organisms/detailsNameInfo/components/activity/index.tsx b/ui/components/organisms/detailsNameInfo/components/activity/index.tsx
@@ -0,0 +1,91 @@
+import { getDomainActivities } from "@/app/actions/actions";
+import { chain } from "@/comman/constants";
+import { DataTable, ORDER_BY, Routs, SORT_BY } from "@/comman/types";
+import { TypeView } from "@/components/atoms/switchView/switchView";
+import { activitiesConfig } from "@/components/organisms/accountConent/components/activity/constants";
+import { Table } from "@/components/organisms/table";
+import { addMinaText } from "@/helpers/name.helper";
+import { useEffect, useState } from "react";
+
+const initPage = 0;
+const initSize = 50;
+
+const ActivityContent = ({
+  domainName,
+}: {
+  domainName: string;
+}): JSX.Element => {
+  const [loading, setLoading] = useState<boolean>(true);
+  const [size, setSize] = useState<number>(initSize);
+  const [page, setPage] = useState<number>(initPage);
+  const [activities, setActivities] = useState<DataTable>(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 (
+    <Table
+      data={activities}
+      config={activitiesConfig}
+      isLoading={loading}
+      currentPage={0}
+      pageLimit={50}
+      totalElements={activities?.totalElements}
+      pagesCount={activities?.totalPages}
+      typeView={TypeView.LIST}
+      isHiddenTopPagination
+      limitOptions={[
+        { text: "10", value: 10 },
+        { text: "50", value: 50 },
+        { text: "100", value: 100 },
+      ]}
+      sortBy={SORT_BY.RESERVATION_TIMESTAMP}
+      orderBy={ORDER_BY.DESC}
+      onChangePage={onPage}
+      onChangeLimit={onSize}
+      onChangeSort={(data) => {
+        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
@@ -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
diff --git 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;
 }