diff --git a/src/components/VerificationDetails.tsx b/src/components/VerificationDetails.tsx new file mode 100644 index 0000000..c68795c --- /dev/null +++ b/src/components/VerificationDetails.tsx @@ -0,0 +1,62 @@ +import React from "react"; +import moment from "moment"; + +export type verifiedType = { + resultURL: string; + icon: string; + description: string; + type: string; + vendorName: string; + verifiedOn: string; + verificationExpires: string; +}; + +export type VerificationDetailsProps = { + verification: { + icon: string; + verified: verifiedType[]; + }; +}; + +const VerificationDetails = ({ verification }: VerificationDetailsProps) => { + return ( +
+ {verification?.verified && + verification?.verified.map((item, index) => ( + <> +
+ {" "} +

{item?.description}

+ + View Report + +
+
+
+ {" "} +
+
+ {" "} +
+
+ {index !== verification?.verified.length - 1 && ( +
+ )} + + ))} +
+ ); +}; + +export default VerificationDetails; diff --git a/src/components/app_list.tsx b/src/components/app_list.tsx index 50512df..de36b62 100644 --- a/src/components/app_list.tsx +++ b/src/components/app_list.tsx @@ -6,6 +6,7 @@ import { Dapp } from "../features/dapp/models/dapp"; import { spaceMono } from "../theme"; import { Card, RImage as Image, Text } from "./index"; import { Row } from "./layout/flex"; +import { convertUrl } from "../utils"; //tags on top of app card export function Tag(props: { children: ReactNode }) { @@ -27,12 +28,19 @@ export function AppList(props) { {(props.data?.length ?? false) ? props.data.map((app: Dapp) => {/* */} - + {app.tags?.slice(0, 3).map((e) => {e})} -

{app.name}

+

{app.name} {app?.verification && app?.verification?.icon && ( + icon + )}

{app.description.substring(0, app.description.length > 220 ? 220 : app.description.length)} {/* */} ) :

Oh No! We didnt find any dApps

} diff --git a/src/components/card/index.tsx b/src/components/card/index.tsx index 19e9d19..f3a029c 100644 --- a/src/components/card/index.tsx +++ b/src/components/card/index.tsx @@ -2,6 +2,7 @@ import Image from "next/image"; import { StarRating } from "../../pages/dapp"; import { Tag } from "../app_list"; import { Row } from "../layout/flex"; +import { convertUrl } from '../../utils' export const Card = (props) => { return ( @@ -29,11 +30,19 @@ export function FeaturedCard(props) {
- +
-

+

{app.name} + {app?.verification && app?.verification?.icon && ( + icon + )}

{app.tags?.length ? ( diff --git a/src/features/dapp/dapp_api.ts b/src/features/dapp/dapp_api.ts index 14c29ee..bbf4eeb 100644 --- a/src/features/dapp/dapp_api.ts +++ b/src/features/dapp/dapp_api.ts @@ -104,7 +104,8 @@ export class DappDataSource implements IDappDataSource { if (currentCache.response === undefined) { currentCache.response = newItems.response; } else { - currentCache.response?.push(...newItems.response); + currentCache.response = newItems.response; + // currentCache.response?.push(...newItems.response); } currentCache.page = newItems.page; console.log("currentCache", currentCache); diff --git a/src/features/dapp/models/dapp.tsx b/src/features/dapp/models/dapp.tsx index cfc2967..c5cf23c 100644 --- a/src/features/dapp/models/dapp.tsx +++ b/src/features/dapp/models/dapp.tsx @@ -1,3 +1,4 @@ +import { verifiedType } from '../../../components/VerificationDetails' export interface Dapp { name: string; description: string; @@ -33,5 +34,6 @@ export interface Dapp { rating: number; }; users: []; + verification: { icon: string, verified: verifiedType[] } minted?: boolean; } diff --git a/src/pages/constants.tsx b/src/pages/constants.tsx index 51b7498..206d961 100644 --- a/src/pages/constants.tsx +++ b/src/pages/constants.tsx @@ -21,7 +21,7 @@ const AppStrings = { ratings: "Ratings", allChains: "All Chains", anonymousAnalyticsTag: 'anonymous_odde', - + verification: "Verification", } const allChains: { diff --git a/src/pages/dapp/index.tsx b/src/pages/dapp/index.tsx index 6274ba2..3ce5475 100644 --- a/src/pages/dapp/index.tsx +++ b/src/pages/dapp/index.tsx @@ -8,758 +8,794 @@ import { useSelector } from "react-redux"; import { useAccount } from "wagmi"; import { BASE_URL, HOST_URL } from "../../api/constants"; import { - Button, - ClaimButton, - ExpandAbleText, - RImage as Image, - PageLayout, + Button, + ClaimButton, + ExpandAbleText, + RImage as Image, + PageLayout, } from "../../components"; import { ReviewCard } from "../../components/card"; import { Column, Row } from "../../components/layout/flex"; import { getApp } from "../../features/app/app_slice"; import { merokuToCustomCategory } from "../../features/categories"; import { - useGetAppRatingQuery, - useGetBuildDownloadUrlQuery, - useGetDappByOwnerAddressQuery, - usePostReviewMutation, + useGetAppRatingQuery, + useGetBuildDownloadUrlQuery, + useGetDappByOwnerAddressQuery, + usePostReviewMutation, } from "../../features/dapp/dapp_api"; import { Dapp } from "../../features/dapp/models/dapp"; import { Review } from "../../features/dapp/models/review"; import { useSearchByIdQuery } from "../../features/search"; import { AppStrings } from "../constants"; +import { convertUrl } from "../../utils"; +import VerificationDetails from "../../components/VerificationDetails"; Modal.setAppElement("#__next"); // dapp page, shows complete dapp info const modalStyles = { - overlay: { - background: "rgba(0,0,0,0.80)", - }, - content: { - padding: 0, - top: "80px", - border: 0, - background: "transparent", - }, + overlay: { + background: "rgba(0,0,0,0.80)", + }, + content: { + padding: 0, + top: "80px", + border: 0, + background: "transparent", + }, }; const reviewModalStyle = { - overlay: { - background: "rgba(0,0,0,0.7)", - }, - content: { - padding: "24px", - top: "calc(50% - (30vw / 2))", - border: 0, - width: "512px", - height: "512px", - margin: "0 auto", - background: "#141318", - borderRadius: "16px", - }, + overlay: { + background: "rgba(0,0,0,0.7)", + }, + content: { + padding: "24px", + top: "calc(50% - (30vw / 2))", + border: 0, + width: "512px", + height: "512px", + margin: "0 auto", + background: "#141318", + borderRadius: "16px", + }, }; function Divider(props) { - return
; + return
; } function SocialButton(props) { - return ( -
- - - - - - - - - -
- ); + return ( +
+ + + + + + + + + +
+ ); } function DappDetailSection(props) { - return ( -
- {props.title && ( -

- {props.title} -

- )} - {props.children} -
- ); + return ( +
+ {props.title && ( +

+ {props.title} +

+ )} + {props.children} +
+ ); } //this button redirects to analytics url which redirects to download url if wallet is connected otherwise it calls getBuildUrl and then redirects to build url. function DownloadButton(props) { - const { href, dApp } = props; - const { data, isLoading, isFetching } = useGetBuildDownloadUrlQuery(dApp.dappId) - if (isLoading || isFetching) return null; - console.log(dApp.dappId) - console.log(href) - console.log(data, isLoading, isFetching); - const downloadAvailable = dApp.availableOnPlatform.includes('android') || dApp.availableOnPlatform.includes('ios'); - const classnames = classNames({ - 'text-[#ddd]': !downloadAvailable, - 'text-[#fff]': downloadAvailable, - 'p-3 font-[600] text-[14px]': true, - }); - const currentColor = downloadAvailable && (href != undefined || data != undefined) ? "#fff" : "#525059"; - return - - - - ; + const { href, dApp } = props; + const { data, isLoading, isFetching } = useGetBuildDownloadUrlQuery( + dApp.dappId + ); + if (isLoading || isFetching) return null; + console.log(dApp.dappId); + console.log(href); + console.log(data, isLoading, isFetching); + const downloadAvailable = + dApp.availableOnPlatform.includes("android") || + dApp.availableOnPlatform.includes("ios"); + const classnames = classNames({ + "text-[#ddd]": !downloadAvailable, + "text-[#fff]": downloadAvailable, + "p-3 font-[600] text-[14px]": true, + }); + const currentColor = + downloadAvailable && (href != undefined || data != undefined) + ? "#fff" + : "#525059"; + return ( + + + + + + ); } //Claiming a dapp on meroku . function ClaimDappSection(props) { - const { onClick, address, onOpenConnectModal, minted } = props; - return ( - -
-

- Claim this dApp -

-

- This dApp has not been claimed by its developers. Click here - to open the Meroku platform and claim your .app domain -

- {/* {!address && onOpenConnectModal &&

Do you own this dApp? Connect wallet to update

} */} -
- Claim - - ); + const { onClick, address, onOpenConnectModal, minted } = props; + return ( + +
+

+ Claim this dApp +

+

+ This dApp has not been claimed by its developers. Click here to open + the Meroku platform and claim your .app domain +

+ {/* {!address && onOpenConnectModal &&

Do you own this dApp? Connect wallet to update

} */} +
+ Claim + + ); } // if the user is owner of the dapp, it shows update dapp button. function UpdateDappSection(props) { - const { onClick } = props; - return ( - -
-

- Update dApp -

-

- Click here to update the dApp metadata on the Meroku - platform. You are seeing this because you have claimed this - dApp's .app namespace -

-
- Update - - ); + const { onClick } = props; + return ( + +
+

Update dApp

+

+ Click here to update the dApp metadata on the Meroku platform. You are + seeing this because you have claimed this dApp's .app namespace +

+
+ Update + + ); } function Input(props) { - return ( -