Merge pull request #24 from merokudao/verification-changes

verification changes
merokudao · Nov 2, 2023 · 454e443 · 454e443
2 parents 9abae14 + 8793e53
commit 454e443
Show file tree

Hide file tree

Showing 8 changed files with 830 additions and 700 deletions.
diff --git a/src/components/VerificationDetails.tsx 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 (
+    <div id="verification-section">
+      {verification?.verified &&
+        verification?.verified.map((item, index) => (
+          <>
+            <div>
+              <label>
+                Verified By <strong>{item.vendorName}</strong>
+              </label>{" "}
+              <p>{item?.description}</p>
+              <a
+                className="text-blue-500"
+                target="_blank"
+                href={item?.resultURL}
+              >
+                View Report
+              </a>
+            </div>
+            <div className="grid md:grid-cols-2 xl:grid-cols-2 gap-y-4 gap-x-5 mt-6 md:mt-0 w-full justify-between">
+              <div className="mt-5">
+                <label>
+                  Verified On {moment(item?.verifiedOn).format("DD/MM/YYYY")}
+                </label>{" "}
+              </div>
+              <div className="mt-5">
+                <label>
+                  Expires On{" "}
+                  {moment(item?.verificationExpires).format("DD/MM/YYYY")}
+                </label>{" "}
+              </div>
+            </div>
+            {index !== verification?.verified.length - 1 && (
+              <hr className="m-2 my-5" />
+            )}
+          </>
+        ))}
+    </div>
+  );
+};
+
+export default VerificationDetails;
diff --git 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) => <Link href={`/dapp?id=${app.dappId}`}> <Card key={app.dappId}>
 				{/* <Link href={}> */}
 				<Row className="justify-between">
-					<Image src={app.images.logo} width={64} height={64} className="rounded-lg" alt="" />
+					<Image src={convertUrl(app.images.logo)} width={64} height={64} className="rounded-lg" alt="" />
 					<Row className="items-start gap-[6px]">
 						{app.tags?.slice(0, 3).map((e) => <Tag>{e}</Tag>)}
 					</Row>
 				</Row>
-				<p className="text-[24px] leading-[32px] font-[500] my-4">{app.name}</p>
+				<p className="text-[24px] leading-[32px] font-[500] my-4 inline-flex gap-1.5 items-center">{app.name} {app?.verification && app?.verification?.icon && (
+                    <Image
+                      height={30}
+                      width={30}
+                      src={app?.verification?.icon}
+					  alt="icon"
+                    />
+                  )}</p>
 				<Text classNames='text-[16px] leading-[21px] text-[#87868C] font-[400] line-clamp-3' ellipsizeMode="tail" numberOfLines={3} maxLines={3}>{app.description.substring(0, app.description.length > 220 ? 220 : app.description.length)}</Text>
 				{/* </Link> */}
 			</Card></Link>) : <p className="text-xl">Oh No! We didnt find any dApps</p>}

diff --git 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) {
 			<div className="absolute inset-0 bg-gradient-to-b from-[#0000003D] to-[#000000CC]" />
 			<div className="absolute backdrop-blur-lg w-[80px] h-[80px] rounded-[8px] top-[16px] left-[16px]" />
 			<div className="absolute top-[24px] left-[24px] w-[64px] h-[64px] rounded-[8px] overflow-hidden">
-				<Image fill src={app.images.logo} alt="" />
+				<Image fill src={convertUrl(app.images.logo)} alt="" />
 			</div>
 			<div className="absolute bottom-[24px] left-[24px]">
-				<p className="text-[16px] leading-[18px] lg:text-[24px] lg:leading-[28px] font-[500] line-clamp-1 mb-[8px]">
+				<p className="text-[16px] leading-[18px] lg:text-[24px] lg:leading-[28px] font-[500] line-clamp-1 mb-[8px] inline-flex gap-1.5 items-center">
 					{app.name}
+					{app?.verification && app?.verification?.icon && (
+                    <Image
+                      height={30}
+                      width={30}
+                      src={app?.verification?.icon}
+					  alt="icon"
+                    />
+                  )}
 				</p>
 				<Row className="gap-x-[4px]">
 					{app.tags?.length ? (

diff --git 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
@@ -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
@@ -21,7 +21,7 @@ const AppStrings = {
 	ratings: "Ratings",
 	allChains: "All Chains",
 	anonymousAnalyticsTag: 'anonymous_odde',
-
+	verification: "Verification",
 }
 
 const allChains: {