Browse Source

add domain card to search page

main
matthew 2 years ago
parent
commit
60cdf3e2f0
  1. 64
      searching-front/app/core/components/DomainCard/DomainCard.tsx
  2. 1
      searching-front/app/core/components/DomainCard/index.tsx
  3. 156
      searching-front/app/core/components/DomainCard/styles.module.css
  4. 2
      searching-front/app/core/components/Link/styles.module.css
  5. 1
      searching-front/app/core/helpers/metrika.ts
  6. 4
      searching-front/app/core/pages/Search/Search.tsx
  7. 46
      searching-front/app/core/pages/State/State.tsx
  8. 160
      searching-front/app/core/pages/State/styles.module.css
  9. 3
      searching-front/app/search-requests/queries/getSearchResult.ts

64
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

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

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

156
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;
}
}

2
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 {

1
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
}

4
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} />
))}

46
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}>
<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>
<DomainCard {...i} />
))}
</div>

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

@ -62,162 +62,4 @@
.newestListWrapper {
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;
}
}
}

3
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
}
})

Loading…
Cancel
Save