taken account information popup

ui/app/fonts.ts

@@ -1,4 +1,5 @@
 import { Inter } from "next/font/google";
+import { Roboto_Mono } from "next/font/google";
 
 export const inter = Inter({
   weight: "400",
@@ -23,3 +24,21 @@ export const interBold = Inter({
   subsets: ["latin"],
   display: "swap",
 });
+
+export const roboto = Roboto_Mono({
+  weight: "400",
+  subsets: ["latin"],
+  display: "swap",
+});
+
+export const robotoMedium = Roboto_Mono({
+  weight: "500",
+  subsets: ["latin"],
+  display: "swap",
+});
+
+export const robotoSemiBold = Roboto_Mono({
+  weight: "700",
+  subsets: ["latin"],
+  display: "swap",
+});

ui/components/atoms/resultItem/index.module.css

@@ -9,6 +9,10 @@
   font-size: 28px;
 }
 
+.wrapper > div {
+  display: flex;
+}
+
 .wrapper span {
   color: #9c9ea6;
 }
@@ -23,6 +27,6 @@
 }
 
 .wrapper .unavailable {
-  color: var(--col--button9);
-  background-color: rgba(234, 57, 67, .3);
+  color: #CD4B83;
+  background-color: #FFDAEA;
 }

ui/components/atoms/resultItem/response.mock.ts

@@ -0,0 +1,15 @@
+export const mockData = {
+  id: "39c828aa-be66-4e15-b779-2a8e6ed109b1",
+  ownerAddress: "B62qp6gZq79pG59hRyYA62oiSFHXfY1wncAfSLgWrYEhACAnt93bq1X",
+  transaction: "CkpZj5f4Y3sQqaTgha57sLXSxkq6fWXm5ejv9EmxiBDtyv9QbxFVc",
+  domainName: "HelloWorld",
+  domainImg:
+    "https://api-mainnet.suifrens.sui.io/suifrens/0x55706dcf91bffd49373f93362d00999732fd0edf4920f92e37f19a8ff4daa25c/svg",
+  amount: 74,
+  reservationTimestamp: 1710000000000,
+  expirationTime: 3,
+  startTimestamp: 1710000000000,
+  domainStatus: "ACTIVE",
+  isSendToCloudWorker: false,
+  isDefault: false,
+};

ui/components/atoms/resultItem/resultItem.tsx

@@ -3,6 +3,9 @@ import { Button } from "../button";
 import { Variant } from "../button/types";
 import style from "./index.module.css";
 import { interMedium } from "@/app/fonts";
+import ModalInfo from "@/components/molecules/modals/modalInfo/modalInfo";
+import { useState } from "react";
+import { mockData } from "./response.mock";
 
 const ResultItem = ({
   statusName,
@@ -14,20 +17,34 @@ const ResultItem = ({
   };
   className: string;
 }) => {
-  console.log(statusName);
+  const [open, setOpen] = useState<boolean>(false);
+  const { isReserved, name } = statusName;
+
+  const handleInfo = () => {
+    setOpen(true);
+  };
 
   return (
     <div
       className={classNames(style.wrapper, className, interMedium.className)}
     >
       <div>
-        {statusName.name}
+        {name}
         <span>.mina</span>
-        <span className={classNames(style.status, interMedium.className, {
-          [style.unavailable]: statusName.isReserved
-        })}>{statusName.isReserved ? "Not available" : "available"}</span>
+        <span
+          className={classNames(style.status, interMedium.className, {
+            [style.unavailable]: isReserved,
+          })}
+        >
+          {isReserved ? "Taken" : "available"}
+        </span>
       </div>
-      <Button text="Purchase" variant={Variant.blue} />
+      <Button
+        text={isReserved ? "Info" : "Purchase"}
+        variant={Variant.blue}
+        onClick={handleInfo}
+      />
+      <ModalInfo open={open} onClose={() => setOpen(false)} data={mockData} />
     </div>
   );
 };

ui/components/molecules/modals/modalInfo/index.module.css

@@ -0,0 +1,58 @@
+.content {
+  padding: 48px 45px 24px 45px;
+  background-color: var(--col--light);
+  border-radius: 12px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.content .closeIcon {
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.closeIcon:hover {
+  opacity: 0.5;
+}
+
+.content img {
+  width: 234px;
+  height: 234px;
+}
+
+.content button {
+  margin-top: 25px;
+}
+
+.infoWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.header {
+  text-align: center;
+  font-size: 16px;
+}
+
+.infoItem > span {
+  color: rgba(0, 0, 0, 0.3);
+  font-size: 13px;
+}
+
+.infoItem div {
+  color: var(--col--dark);
+}
+
+.infoItem div span {
+  background-color: var(--col--dark);
+}

ui/components/molecules/modals/modalInfo/modalInfo.tsx

@@ -0,0 +1,90 @@
+import Image from "next/image";
+import PopupOverlay from "../../popupOverlay";
+import icon from "../../../../assets/logo.svg";
+import closeIcon from "../../../../assets/close.svg";
+import { Button } from "@/components/atoms/button";
+import { Variant } from "@/components/atoms/button/types";
+import classNames from "classnames";
+import { interMedium, interSemiBold } from "@/app/fonts";
+import { StaticEllipse } from "../../staticEllipse";
+import { monthDayYearTimeFormat } from "@/helpers/timeHelper";
+
+import style from "./index.module.css";
+
+type ModalInfoProps = {
+  open: boolean;
+  onClose: () => void;
+  data: {
+    id: string;
+    ownerAddress: string;
+    transaction: string;
+    domainName: string;
+    domainImg: string;
+    amount: number;
+    reservationTimestamp: number;
+    expirationTime: number;
+    startTimestamp: number;
+    domainStatus: string;
+    isSendToCloudWorker: boolean;
+    isDefault: boolean;
+  };
+};
+
+const ModalInfo = ({ open, onClose, data }: ModalInfoProps): JSX.Element => {
+  const {
+    ownerAddress,
+    domainName,
+    reservationTimestamp,
+    domainImg,
+    transaction,
+  } = data;
+
+  return (
+    <PopupOverlay
+      position="center"
+      animation="appear"
+      onClose={onClose}
+      show={open}
+    >
+      <div className={classNames(style.content, interSemiBold.className)}>
+        <Image
+          src={closeIcon}
+          alt=""
+          className={style.closeIcon}
+          onClick={onClose}
+          width={240}
+          height={240}
+        />
+        <Image src={icon} alt="" />
+        <div className={style.header}>{domainName}</div>
+        <div className={style.infoWrapper}>
+          <div className={classNames(style.infoItem, interMedium.className)}>
+            <span>Domain Owner</span>
+            <StaticEllipse
+              className={interSemiBold.className}
+              text={ownerAddress}
+              view={{ sm: 10, md: 14, lg: 18 }}
+            />
+          </div>
+          <div className={classNames(style.infoItem, interMedium.className)}>
+            <span>Creation Time</span>
+            <div className={interSemiBold.className}>
+              {monthDayYearTimeFormat(reservationTimestamp)}
+            </div>
+          </div>
+          <div className={classNames(style.infoItem, interMedium.className)}>
+            <span>Creation Transaction</span>
+            <StaticEllipse
+              className={interSemiBold.className}
+              text={transaction}
+              view={{ sm: 10, md: 14, lg: 18 }}
+            />
+          </div>
+        </div>
+        <Button text="View Details" variant={Variant.blue} />
+      </div>
+    </PopupOverlay>
+  );
+};
+
+export default ModalInfo;

ui/components/molecules/staticEllipse/staticEllipse.tsx

@@ -4,15 +4,18 @@ import style from "./index.module.css";
 import classNames from "classnames";
 import { useMedia } from "../../../hooks/useMedia";
 import { View } from "@/comman/types";
+import { robotoMedium } from "@/app/fonts";
 
 const StaticEllipse = ({
   text,
   view,
   isActive,
+  className,
 }: {
   text: string;
   view: View;
   isActive?: boolean;
+  className?: string;
 }): JSX.Element | null => {
   const [firstString, setFirstString] = useState<string | null>(null);
   const [secondString, setSecondString] = useState<string | null>(null);
@@ -55,7 +58,7 @@ const StaticEllipse = ({
 
   return (
     <div
-      className={classNames(style.wrapper, "t-robot-medium", {
+      className={classNames(style.wrapper, robotoMedium.className, className, {
         [style.active]: isActive,
       })}
     >

ui/components/sections/homeSection/homeSection.tsx

@@ -8,7 +8,7 @@ import { interMedium, interSemiBold } from "@/app/fonts";
 import { Input } from "@/components/atoms/input";
 import { ResultItem } from "@/components/atoms/resultItem";
 import { InputVariant } from "@/components/atoms/input/input";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { useKeyPress } from "@/hooks/useKeyPress";
 import { checkReservedName } from "@/app/actions/clientActions";
 
@@ -18,18 +18,8 @@ const HomeSection = () => {
     name: string;
   }>(null);
   const [value, setValue] = useState("");
-  const [resultContent, setResultContent] = useState({
-    isShow: false,
-    text: "",
-  });
-  const ref = useRef();
 
   const handleInput = async () => {
-    const isShow = !!value;
-    setResultContent({
-      text: value,
-      isShow: isShow,
-    });
     const response = await checkReservedName(value);
     setStatusName({
       isReserved: response,

ui/helpers/timeHelper.ts

@@ -93,4 +93,9 @@ export const getTimeFromMilliseconds = (millis) => {
 export const dateTimeFromTimestamp = (timestamp) => {
 	const date = dayjs(new Date(timestamp)).format('DD.MM.YYYY HH:mm')
 	return date
+}
+
+export const monthDayYearTimeFormat = (timestamp) => {
+	const date = dayjs(new Date(timestamp)).format('MMMM D, YYYY h:mm A UTC')
+	return date
 }