From 60cdf3e2f0c0418530ae8eca5cb5f0a89613dcc6 Mon Sep 17 00:00:00 2001 From: matthew Date: Wed, 19 Oct 2022 16:58:31 +0400 Subject: [PATCH] add domain card to search page --- .../core/components/DomainCard/DomainCard.tsx | 64 +++++++ .../app/core/components/DomainCard/index.tsx | 1 + .../components/DomainCard/styles.module.css | 156 +++++++++++++++++ .../core/components/Link/styles.module.css | 2 +- searching-front/app/core/helpers/metrika.ts | 1 + .../app/core/pages/Search/Search.tsx | 4 +- .../app/core/pages/State/State.tsx | 46 +---- .../app/core/pages/State/styles.module.css | 160 +----------------- .../queries/getSearchResult.ts | 3 + 9 files changed, 232 insertions(+), 205 deletions(-) create mode 100644 searching-front/app/core/components/DomainCard/DomainCard.tsx create mode 100644 searching-front/app/core/components/DomainCard/index.tsx create mode 100644 searching-front/app/core/components/DomainCard/styles.module.css diff --git a/searching-front/app/core/components/DomainCard/DomainCard.tsx b/searching-front/app/core/components/DomainCard/DomainCard.tsx new file mode 100644 index 0000000..ed01b27 --- /dev/null +++ b/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 ( +
+ count("from_state_page_to_site")} + wide + title="Open tonsite" + > +
+ {getDomainFromUrl(props.address)} + +
+ +
+ {props.firstAvailableDate && format(new Date(props.firstAvailableDate), "d MMMM").toLowerCase()} +
+ + + {props.walletAddress && props.tonBalance && ( + 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(",", " ")} +
+ +
+ + )} +
+ ) +} + +export default DomainCard diff --git a/searching-front/app/core/components/DomainCard/index.tsx b/searching-front/app/core/components/DomainCard/index.tsx new file mode 100644 index 0000000..7f40275 --- /dev/null +++ b/searching-front/app/core/components/DomainCard/index.tsx @@ -0,0 +1 @@ +export {default} from './DomainCard' \ No newline at end of file diff --git a/searching-front/app/core/components/DomainCard/styles.module.css b/searching-front/app/core/components/DomainCard/styles.module.css new file mode 100644 index 0000000..92355ce --- /dev/null +++ b/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; + } +} diff --git a/searching-front/app/core/components/Link/styles.module.css b/searching-front/app/core/components/Link/styles.module.css index 85513cd..0981596 100644 --- a/searching-front/app/core/components/Link/styles.module.css +++ b/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 { diff --git a/searching-front/app/core/helpers/metrika.ts b/searching-front/app/core/helpers/metrika.ts index cf6321e..c774f98 100644 --- a/searching-front/app/core/helpers/metrika.ts +++ b/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 } diff --git a/searching-front/app/core/pages/Search/Search.tsx b/searching-front/app/core/pages/Search/Search.tsx index df6e132..9bf999e 100644 --- a/searching-front/app/core/pages/Search/Search.tsx +++ b/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 (
+ {res?.domain && } {Object.values(res.hits).map((i) => ( ))} diff --git a/searching-front/app/core/pages/State/State.tsx b/searching-front/app/core/pages/State/State.tsx index dfb3276..477ce12 100644 --- a/searching-front/app/core/pages/State/State.tsx +++ b/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 = ({
{lastWeekNewSites.map((i) => ( -
- count("from_state_page_to_site")} - wide - title="Open tonsite" - > -
- {getDomainFromUrl(i.address)} - -
- -
- {i.firstAvailableDate && - format(new Date(i.firstAvailableDate), "d MMMM").toLowerCase()} -
- - - {i.walletAddress && i.tonBalance && ( - 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(",", " ")} -
- -
- - )} -
+ ))}
diff --git a/searching-front/app/core/pages/State/styles.module.css b/searching-front/app/core/pages/State/styles.module.css index 46bee5e..bb1623c 100644 --- a/searching-front/app/core/pages/State/styles.module.css +++ b/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; - } -} +} \ No newline at end of file diff --git a/searching-front/app/search-requests/queries/getSearchResult.ts b/searching-front/app/search-requests/queries/getSearchResult.ts index e98726e..5220b6f 100644 --- a/searching-front/app/search-requests/queries/getSearchResult.ts +++ b/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 } })