Staketab · VitalikKarpuk · Mar 12, 2024 · Mar 11, 2024 · Mar 12, 2024
diff --git a/ui/app/account_details/index.module.css b/ui/app/account_details/index.module.css
@@ -0,0 +1,6 @@
+.wrapper {
+    display: flex;
+    min-height: 100%;
+    padding-right: 20px;
+  }
+
diff --git a/ui/app/account_details/page.tsx b/ui/app/account_details/page.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { AccountDetails } from "@/components/organisms/accountDetails";
+import { Navigation } from "@/components/organisms/navigation";
+
+import style from "./index.module.css";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+export default function AccountDetailsPage() {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.push("/");
+  }, []);
+
+  return (
+    <div className={style.wrapper}>
+      <Navigation />
+      <AccountDetails />
+    </div>
+  );
+}
diff --git a/ui/app/actions/actions.ts b/ui/app/actions/actions.ts
@@ -1,6 +1,7 @@
 "use server";
 
 import { ORDER_BY, SORT_BY } from "@/comman/types";
+import { AccountDomainDetailsResponse } from "./types";
 
 export async function saveName({
   name,
@@ -91,3 +92,15 @@ export async function getDomainsMetadata(id: string) {
   );
   return await res.json();
 }
+
+export async function getAccountDomainDetails(
+  id: string
+): Promise<AccountDomainDetailsResponse> {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/domains/${id}`, {
+    headers: {
+      "Content-Type": "application/json",
+      "x-api-key": process.env.NEXT_PUBLIC_X_API_KEY,
+    },
+  });
+  return await res.json();
+}
diff --git a/ui/app/actions/types.ts b/ui/app/actions/types.ts
@@ -0,0 +1,16 @@
+import { DOMAINS_STATUS } from "@/comman/types"
+
+export type AccountDomainDetailsResponse = {
+    id: string,
+    ownerAddress: string,
+    transaction: string,
+    domainName: string,
+    domainImg: string,
+    amount: number,
+    reservationTimestamp: number,
+    expirationTime: number,
+    startTimestamp: number,
+    domainStatus: DOMAINS_STATUS,
+    isSendToCloudWorker: boolean,
+    isDefault: boolean
+  }
diff --git a/ui/app/globals.css b/ui/app/globals.css
@@ -7,6 +7,7 @@ body {
   font-size: 14px;
   line-height: 133%;
   color: var(--col--dark);
+  min-height: 100vh;
 }
 
 * {

diff --git a/ui/app/names/[id]/page.tsx b/ui/app/names/[id]/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { getAccountDomainDetails } from "@/app/actions/actions";
+import { useEffect, useState } from "react";
+
+import DetailsNameHeader from "@/components/organisms/detailsNameHeader/detailsNameHeader";
+
+export default function Page({ params }: { params: { id: string } }) {
+  const [accountDomainDetails, setAccountDomainDetails] = useState(null);
+  const getAccountDomainDetailsById = async () => {
+    const response = await getAccountDomainDetails(params.id);
+    setAccountDomainDetails(response);
+  };
+  useEffect(() => {
+    if (params.id) {
+      getAccountDomainDetailsById();
+    }
+  }, [params]);
+
+  if (!accountDomainDetails) return null;
+
+  return (
+    <div>
+      <DetailsNameHeader accountDomainDetails={accountDomainDetails} />
+    </div>
+  );
+}
diff --git a/ui/app/names/index.module.css b/ui/app/names/index.module.css
@@ -3,3 +3,11 @@
   min-height: 100%;
   padding-right: 20px;
 }
+
+.content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0 40px;
+  margin-left: 265px;
+}
diff --git a/ui/app/names/layout.tsx b/ui/app/names/layout.tsx
@@ -0,0 +1,32 @@
+import { Navigation } from "@/components/organisms/navigation";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import style from "./index.module.css";
+
+const inter = Inter({
+  weight: ["400"],
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Mina Names",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <body className={inter.className}>
+        <div className={style.wrapper}>
+          <Navigation />
+          <div className={style.content}>{children}</div>
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/ui/app/names/page.tsx b/ui/app/names/page.tsx
@@ -41,7 +41,6 @@ export default function Page() {
 
   return (
     <div className={classNames(style.wrapper)}>
-      <Navigation />
       <AccountContent />
     </div>
   );

diff --git a/ui/comman/constants.ts b/ui/comman/constants.ts
@@ -6,3 +6,5 @@ export const fees = {
 
 export const accountAddress =
   "B62qk1sJumHSS1hPKS2fSAbxkkwGcCiieb1PcM4PB182pa1MKE9H9AV";
+
+export const defaultDomainNameId = "39c828aa-be66-4e15-b779-3a2e6ed109b1";
diff --git a/ui/comman/types.ts b/ui/comman/types.ts
@@ -54,3 +54,8 @@ export enum DATA_STATUS {
   SUCCESS = "success",
   ERROR = "error",
 }
+
+export enum DOMAINS_STATUS {
+  PENDING = "PENDING",
+  ACTIVE = "ACTIVE",
+}
diff --git a/ui/components/atoms/name/index.module.css b/ui/components/atoms/name/index.module.css
@@ -0,0 +1,8 @@
+.name {
+  font-size: 32px;
+  line-height: 32px
+}
+
+.name span {
+  color: #c4c4c4;
+}
diff --git a/ui/components/atoms/name/index.ts b/ui/components/atoms/name/index.ts
@@ -0,0 +1 @@
+export { default as Name } from "./name";
diff --git a/ui/components/atoms/name/name.tsx b/ui/components/atoms/name/name.tsx
@@ -0,0 +1,15 @@
+import { interMedium } from "@/app/fonts";
+import classNames from "classnames";
+
+import style from "./index.module.css";
+
+const Name = ({ name, className }: {name: string; className?: string}): JSX.Element => {
+  return (
+    <div className={classNames(interMedium.className, style.name, className)}>
+      {name}
+      <span>.mina</span>
+    </div>
+  );
+};
+
+export default Name;
diff --git a/ui/components/atoms/switcher/index.module.css b/ui/components/atoms/switcher/index.module.css
@@ -0,0 +1,33 @@
+.switcherComponent {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.leftText {
+  margin-right: 8px;
+}
+
+.switcherComponent__plate {
+  position: relative;
+  background-color: rgba(221, 224, 235, 1);
+  width: 26px;
+  height: 16px;
+  border-radius: 8px;
+  padding: 2px;
+  transition: all ease 250ms;
+}
+
+.switcherComponent__btn {
+  display: inline-block;
+  position: absolute;
+  background-color: #fff;
+  box-shadow: 0px 1px 1px #ced1db;
+  border-radius: 50%;
+  transition: all ease 250ms;
+}
+
+.switcherComponent__rightText {
+  margin: 0 0 0 8px;
+}
diff --git a/ui/components/atoms/switcher/index.ts b/ui/components/atoms/switcher/index.ts
@@ -0,0 +1 @@
+export { default as Switcher } from "./switcher";
diff --git a/ui/components/atoms/switcher/switcher.tsx b/ui/components/atoms/switcher/switcher.tsx
@@ -0,0 +1,127 @@
+import classNames from "classnames";
+import React, { useEffect, useState } from "react";
+import style from "./index.module.css";
+import { interSemiBold } from "@/app/fonts";
+
+const Switcher = ({
+  text,
+  onClick,
+  initialState,
+  disabled,
+  size = 20,
+  padding = 2,
+  className,
+}: {
+  text?: string;
+  onClick?: (value: boolean) => void;
+  initialState?: boolean;
+  disabled?: boolean;
+  size?: number;
+  padding?: number;
+  className?: string;
+}): JSX.Element => {
+  const [state, setState] = useState(initialState);
+
+  const clickHandler = () => {
+    if (disabled) return;
+    const newState = !state;
+    setState(newState);
+    onClick?.(newState);
+  };
+
+  const getPlateStyles = () => ({
+    set: {
+      width: size * 2 + padding * 2 + "px",
+      height: size + padding * 2 + "px",
+      borderRadius: (size + padding * 2) / 2 + "px",
+      backgroundColor: "rgba(123, 152, 252, 1)",
+    },
+    disabled: {
+      width: size * 2 + padding * 2 + "px",
+      height: size + padding * 2 + "px",
+      borderRadius: (size + padding * 2) / 2 + "px",
+      backgroundColor: "rgba(238, 239, 245, 1)",
+    },
+    setDisabled: {
+      width: size * 2 + padding * 2 + "px",
+      height: size + padding * 2 + "px",
+      borderRadius: (size + padding * 2) / 2 + "px",
+      backgroundColor: "rgba(178, 199, 247, 1)",
+    },
+    unset: {
+      width: size * 2 + padding * 2 + "px",
+      height: size + padding * 2 + "px",
+      borderRadius: (size + padding * 2) / 2 + "px",
+    },
+  });
+
+  const getBtnStyles = () => ({
+    set: {
+      width: size + "px",
+      height: size + "px",
+      left: `calc(100% - ${size}px - ${padding}px)`,
+      top: padding,
+      boxShadow: "0px 1px 1px rgba(87, 123, 204, 1)",
+    },
+    disabled: {
+      width: size + "px",
+      height: size + "px",
+      top: padding,
+      left: padding,
+      boxShadow: "0px 1px 1px rgba(204, 204, 204, 0.3)",
+      backgroundColor: "rgba(247, 247, 250, 1)",
+    },
+    setDisabled: {
+      width: size + "px",
+      height: size + "px",
+      left: `calc(100% - ${size}px - ${padding}px)`,
+      top: padding,
+      boxShadow: "0px 1px 1px rgba(87, 123, 204, 0.3)",
+      backgroundColor: "rgba(216, 227, 251, 1)",
+    },
+    unset: {
+      top: padding,
+      left: padding,
+      width: size + "px",
+      height: size + "px",
+    },
+  });
+
+  return (
+    <div
+      className={classNames(style.switcherComponent, className, interSemiBold.className)}
+      onClick={clickHandler}
+    >
+      {text && <p className={style.leftText}>{text}</p>}
+      <div
+        className={style.switcherComponent__plate}
+        style={
+          state
+            ? disabled
+              ? getPlateStyles().setDisabled
+              : getPlateStyles().set
+            : disabled
+            ? getPlateStyles().disabled
+            : getPlateStyles().unset
+        }
+      >
+        <div
+          className={classNames(style.switcherComponent__btn, {
+            [style.switcherComponent__btn_active]: state,
+          })}
+          style={
+            state
+              ? disabled
+                ? getBtnStyles().setDisabled
+                : getBtnStyles().set
+              : disabled
+              ? getBtnStyles().disabled
+              : getBtnStyles().unset
+          }
+        ></div>
+      </div>
+    </div>
+  );
+};
+
+export default Switcher;
diff --git a/ui/components/molecules/modals/modalInfo/modalInfo.tsx b/ui/components/molecules/modals/modalInfo/modalInfo.tsx
@@ -10,6 +10,8 @@ import { StaticEllipse } from "../../staticEllipse";
 import { monthDayYearTimeFormat } from "@/helpers/timeHelper";
 
 import style from "./index.module.css";
+import Link from "next/link";
+import { defaultDomainNameId } from "@/comman/constants";
 
 type ModalInfoProps = {
   open: boolean;
@@ -81,7 +83,9 @@ const ModalInfo = ({ open, onClose, data }: ModalInfoProps): JSX.Element => {
             />
           </div>
         </div>
-        <Button text="View Details" variant={Variant.blue} />
+        <Link href={`/names/${defaultDomainNameId}`}>
+          <Button text="View Details" variant={Variant.blue} />
+        </Link>
       </div>
     </PopupOverlay>
   );

diff --git a/ui/components/molecules/staticEllipse/index.module.css b/ui/components/molecules/staticEllipse/index.module.css
@@ -6,6 +6,7 @@
 
 .active {
     color: var(--link-active-color);
+    cursor: pointer;
 }
 
 .active:hover {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,3 +6,5 @@ export const fees = {

		export const accountAddress =
		"B62qk1sJumHSS1hPKS2fSAbxkkwGcCiieb1PcM4PB182pa1MKE9H9AV";

		export const defaultDomainNameId = "39c828aa-be66-4e15-b779-3a2e6ed109b1";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as Switcher } from "./switcher";