add domain card to search page

searching-front/app/core/components/DomainCard/DomainCard.tsx

@@ -0,0 +1,64 @@
+
+import { format } from "date-fns"
+
+
+
+import { cn, getDomainFromUrl, getObserverUrlByAddress } from "app/core/helpers/common"
+
+import s from "./styles.module.css"
+import { NftDomain } from "@prisma/client"
+import Button from "app/auth/components/Button"
+import Link from "app/core/components/Link"
+import { count } from "app/core/helpers/metrika"
+import TonLogoWithoutBg from "app/core/icons/TonLogoWithoutBg"
+
+
+const DomainCard = (props: NftDomain) => {
+  return (
+    <div className={s.newestListItem}>
+      <Link
+        className={s.newestListItemLeft}
+        target="_blank"
+        theme="clear"
+        href={props.address + "?from=Searching.ton"}
+        onClick={() => count("from_state_page_to_site")}
+        wide
+        title="Open tonsite"
+      >
+        <div className={s.newestListItemLeftContent}>
+          {getDomainFromUrl(props.address)}
+          <Button className={s.siteButton} theme="primary">
+            .ton
+          </Button>
+        </div>
+
+        <div className={s.newestListItemLeftDate}>
+          {props.firstAvailableDate && format(new Date(props.firstAvailableDate), "d MMMM").toLowerCase()}
+        </div>
+      </Link>
+
+      {props.walletAddress && props.tonBalance && (
+        <Link
+          className={s.newestListItemRight}
+          target="_blank"
+          theme="clear"
+          href={getObserverUrlByAddress(props.walletAddress)}
+          onClick={() => count("from_state_page_to_tonscan")}
+          title="Open wallet in tonscan"
+          wide
+        >
+          ~
+          {new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
+            .format(+props.tonBalance)
+            .replace("$", "")
+            .replaceAll(",", " ")}
+          <div className={s.tonScanIcon}>
+            <TonLogoWithoutBg />
+          </div>
+        </Link>
+      )}
+    </div>
+  )
+}
+
+export default DomainCard

searching-front/app/core/components/DomainCard/index.tsx

@@ -0,0 +1 @@
+export {default} from './DomainCard'

searching-front/app/core/components/DomainCard/styles.module.css

@@ -0,0 +1,156 @@
+.newestListItem {
+  border-radius: var(--border_radius_base);
+  border: 1px solid var(--border_color_main);
+  text-transform: capitalize;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+}
+
+.siteButton.siteButton {
+  width: 52px;
+  height: 41px;
+  font-size: 20px;
+  line-height: 25px;
+  border-radius: 16px;
+  padding: 0;
+  background-color: var(--background_secondary);
+  margin-left: 8px;
+}
+
+.button {
+  position: absolute;
+  top: 2px;
+  right: 22px;
+  background-color: var(--background_secondary);
+}
+
+.newestListItem:not(:last-child) {
+  margin-bottom: 20px;
+}
+.doughnutAvailable {
+  width: 200px;
+  margin: auto;
+}
+
+.title {
+  font-size: 40px;
+  text-align: center;
+  margin: auto;
+  margin-bottom: 20px;
+  /* font-weight: 500; */
+}
+
+.historyStateWrapper {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  max-width: 1000px;
+  margin: auto;
+}
+.historyStateItem {
+  width: 400px;
+}
+
+.historyStatePeriodsWrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+
+.historyStatePeriodsItem {
+  border-radius: 5px;
+  margin: 5px;
+  border: none;
+  background: rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+}
+
+.historyStatePeriodsItem.active {
+  background: var(--button_primary);
+  color: white;
+}
+
+.newestListItemLeft {
+  position: relative;
+  padding: 24px 0 16px 34px;
+  flex: 1 1 70%;
+}
+
+.newestListItemLeft.newestListItemLeft a {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.newestListItemLeftContent {
+}
+.newestListItemLeftDate {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  opacity: 32%;
+}
+
+.newestListItemRight {
+  padding: 24px 34px 24px 0px;
+  flex: 1 1 30%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-left: 1px solid var(--border_color_main);
+  justify-content: flex-end;
+  white-space: nowrap;
+  font-size: 12px !important;
+  background: inherit;
+}
+
+.newestListItemLeft:hover .siteButton.siteButton {
+  background-color: var(--button_primary);
+}
+
+.newestListItemRight:hover .tonScanIcon {
+  color: white;
+  background: var(--button_primary);
+  transition: all 0.3s ease-in-out;
+}
+
+.tonScanIcon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--button_primary);
+  margin-left: 4px;
+}
+
+.siteButton,
+.tonScanIcon {
+  transition: background-color 0.2s ease-in-out;
+}
+
+@media only screen and (max-width: 500px) {
+  .newestListItem {
+    flex-direction: column;
+  }
+  .newestListItemRight,
+  .newestListItemLeft {
+    padding: 24px 34px;
+    justify-content: center;
+  }
+  .newestListItemLeft {
+    padding-bottom: 16px;
+  }
+  .newestListItemRight {
+    text-align: left;
+    padding-top: 16px;
+    border-top: 1px solid var(--border_color_main);
+    border-left: none;
+  }
+}

searching-front/app/core/components/Link/styles.module.css

@@ -10,7 +10,7 @@
   text-decoration: none;
   display: inline-flex;
   justify-content: center;
-  align-items: center;
+  /* align-items: center; */
 }
 
 .root a.wide::before {

searching-front/app/core/helpers/metrika.ts

@@ -2,6 +2,7 @@ import cookies from "js-cookie"
 
 export const count = (event: string) => {
   const isDev = cookies.get("dev")
+  console.log(event)
   if (isDev) {
     return
   }

searching-front/app/core/pages/Search/Search.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from "@blitzjs/rpc"
+import DomainCard from "app/core/components/DomainCard"
 import Pagination from "app/core/components/Pagination"
 import SearchForm from "app/core/components/SearchForm"
 import WebsiteCard from "app/core/components/WebsiteCard"
@@ -24,10 +25,11 @@ const Search = () => {
   }
 
   const getContent = () => {
-    if (res?.hits.length) {
+    if (res?.hits.length || res?.domain) {
       return (
         <div className={s.content}>
           <div className={s.content}>
+            {res?.domain && <DomainCard {...res.domain}/>}
             {Object.values(res.hits).map((i) => (
               <WebsiteCard {...i} />
             ))}

searching-front/app/core/pages/State/State.tsx

@@ -17,6 +17,7 @@ import Button from "app/auth/components/Button"
 import Link from "app/core/components/Link"
 import { count } from "app/core/helpers/metrika"
 import TonLogoWithoutBg from "app/core/icons/TonLogoWithoutBg"
+import DomainCard from "app/core/components/DomainCard"
 
 interface HistoryOfStateItem {
   value: number
@@ -116,50 +117,7 @@ const State = ({
       </div>
       <div className={s.newestListWrapper}>
         {lastWeekNewSites.map((i) => (
-          <div className={s.newestListItem}>
+          <DomainCard {...i} />
-            <Link
-              className={s.newestListItemLeft}
-              target="_blank"
-              theme="clear"
-              href={i.address + "?from=Searching.ton"}
-              onClick={() => count("from_state_page_to_site")}
-              wide
-              title="Open tonsite"
-            >
-              <div className={s.newestListItemLeftContent}>
-                {getDomainFromUrl(i.address)}
-                <Button className={s.siteButton} theme="primary">
-                  .ton
-                </Button>
-              </div>
-
-              <div className={s.newestListItemLeftDate}>
-                {i.firstAvailableDate &&
-                  format(new Date(i.firstAvailableDate), "d MMMM").toLowerCase()}
-              </div>
-            </Link>
-
-            {i.walletAddress && i.tonBalance && (
-              <Link
-                className={s.newestListItemRight}
-                target="_blank"
-                theme="clear"
-                href={getObserverUrlByAddress(i.walletAddress)}
-                onClick={() => count("from_state_page_to_tonscan")}
-                title="Open wallet in tonscan"
-                wide
-              >
-                ~
-                {new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
-                  .format(+i.tonBalance)
-                  .replace("$", "")
-                  .replaceAll(",", " ")}
-                <div className={s.tonScanIcon}>
-                  <TonLogoWithoutBg />
-                </div>
-              </Link>
-            )}
-          </div>
         ))}
       </div>
 

searching-front/app/core/pages/State/styles.module.css

@@ -63,161 +63,3 @@
   display: flex;
   flex-direction: column;
 }
-.newestListItem {
-  border-radius: var(--border_radius_base);
-  border: 1px solid var(--border_color_main);
-  text-transform: capitalize;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 20px;
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-}
-
-.siteButton.siteButton {
-  width: 52px;
-  height: 41px;
-  font-size: 20px;
-  line-height: 25px;
-  border-radius: 16px;
-  padding: 0;
-  background-color: var(--background_secondary);
-  margin-left: 8px;
-}
-
-.button {
-  position: absolute;
-  top: 2px;
-  right: 22px;
-  background-color: var(--background_secondary);
-}
-
-.newestListItem:not(:last-child) {
-  margin-bottom: 20px;
-}
-.doughnutAvailable {
-  width: 200px;
-  margin: auto;
-}
-
-.title {
-  font-size: 40px;
-  text-align: center;
-  margin: auto;
-  margin-bottom: 20px;
-  /* font-weight: 500; */
-}
-
-.historyStateWrapper {
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
-  max-width: 1000px;
-  margin: auto;
-}
-.historyStateItem {
-  width: 400px;
-}
-
-.historyStatePeriodsWrapper {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 10px;
-}
-
-.historyStatePeriodsItem {
-  border-radius: 5px;
-  margin: 5px;
-  border: none;
-  background: rgba(0, 0, 0, 0.04);
-  cursor: pointer;
-}
-
-.historyStatePeriodsItem.active {
-  background: var(--button_primary);
-  color: white;
-}
-
-.newestListItemLeft {
-  position: relative;
-  padding: 24px 0 16px 34px;
-  flex: 1 1 70%;
-
-}
-
-.newestListItemLeft a {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.newestListItemLeftContent {
-  
-}
-.newestListItemLeftDate {
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 15px;
-  opacity: 32%;
-}
-
-.newestListItemRight {
-  padding: 24px 34px 24px 0px;
-  flex: 1 1 30%;
-  position: relative;
-  display: flex;
-  align-items: center;
-  border-left: 1px solid var(--border_color_main);
-  justify-content: flex-end;
-  white-space: nowrap;
-  font-size: 12px !important;
-  background: inherit;
-}
-
-.newestListItemLeft:hover .siteButton.siteButton {
-  background-color: var(--button_primary);
-}
-
-.newestListItemRight:hover .tonScanIcon {
-  color: white;
-  background: var(--button_primary);
-  transition: all 0.3s ease-in-out;
-}
-
-.tonScanIcon {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--button_primary);
-  margin-left: 4px;
-}
-
-.siteButton,
-.tonScanIcon {
-  transition: background-color 0.2s ease-in-out;
-}
-
-@media only screen and (max-width: 500px) {
-  .newestListItem {
-    flex-direction: column;
-  }
-  .newestListItemRight,
-  .newestListItemLeft {
-    padding: 24px 34px;
-    justify-content: center;
-  }
-  .newestListItemLeft{
-    padding-bottom: 16px;
-  }
-  .newestListItemRight {
-    text-align: left;
-    padding-top: 16px;
-    border-top: 1px solid var(--border_color_main);
-    border-left: none;
-  }
-}

searching-front/app/search-requests/queries/getSearchResult.ts

@@ -29,10 +29,13 @@ const processResult = ({ bodyText, ...res }: Object, search: string) => {
 export default resolver.pipe(resolver.zod(GetSearchRequest), async ({ text, page }, c) => {
   upsertSearchRequest({ text }, c).catch(console.log)
 
+  const domainName = (text.replaceAll('.ton','')+'.ton').toLowerCase();
   const result = await Elastic.search({ text, page })
+  const domain = await db.nftDomain.findFirst({ where:{domainName} })
 
   return {
     hits: result.hits.map((i) => processResult(i._source, text)),
     pagesCount: Math.ceil(result.total / SEARCH_PER_PAGE),
+    domain
   }
 })