Merge pull request #22 from merokudao/verification-feature

add verification changes
merokudao · Oct 20, 2023 · 4f1787b · 4f1787b
2 parents 8884fef + b977758
commit 4f1787b
Show file tree

Hide file tree

Showing 10 changed files with 1,171 additions and 1,122 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "classnames": "^2.3.2",
     "eth-sig-util": "^3.0.1",
     "ethers": "5.7.2",
+    "moment": "^2.29.4",
     "next": "^13.4.4",
     "next-auth": "4.20.1",
     "next-seo": "^6.0.0",

diff --git a/public/check-icon.png b/public/check-icon.png
diff --git a/src/components/VerificationDetails.tsx b/src/components/VerificationDetails.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import Image from "next/image";
+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">
+      <h1 className="text-2xl leading-2xl font-[500] mb-4">Verification</h1>
+      {verification?.verified &&
+        verification?.verified.map((item, index) => (
+          <>
+          <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>
+              <label>Verifier</label> <p>{item.vendorName}</p>
+            </div>
+            <div>
+              <label>Verifier Icon</label>
+              <Image alt="icon" height={30} width={30} src={item?.icon} />
+            </div>
+            <div>
+              <label>Verified On</label>{" "}
+              <p>{moment(item?.verifiedOn).format("DD/MM/YYYY")}</p>
+            </div>
+            <div>
+              <label>Verification Expires On</label>{" "}
+              <p>{moment(item?.verificationExpires).format("DD/MM/YYYY")}</p>
+            </div>
+            <div>
+              <label>Description</label> <p>{item?.description}</p>
+            </div>
+            <div>
+              <label>Report</label>{" "}
+              <p>
+                <a
+                  className="text-blue-500"
+                  target="_blank"
+                  href={item?.resultURL}
+                >
+                  View Report
+                </a>
+              </p>
+            </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
@@ -10,78 +10,83 @@ import { convertUrl } from "../utils";
 
 //tags on top of app card
 export function Tag(props: { children: ReactNode }) {
-	const _classNames = classNames({
-		"text-[10px] leading-[10px] uppercase": true,
-		"px-[6px] py-[4px]": true,
-		"bg-border-color": true,
-		"rounded-[10px]": true,
-		[spaceMono.className]: true,
-	});
-	return <span className={_classNames}>{props.children}</span>;
+  const _classNames = classNames({
+    "text-[10px] leading-[10px] uppercase": true,
+    "px-[6px] py-[4px]": true,
+    "bg-border-color": true,
+    "rounded-[10px]": true,
+    [spaceMono.className]: true,
+  });
+  return <span className={_classNames}>{props.children}</span>;
 }
 // List of apps
 export function AppList(props) {
-	console.log("applist", props.data);
-	const router = useRouter();
+  const router = useRouter();
 
-	return (
-		<div>
-			{props.data.length ? (
-				<div className="grid gap-8 grid-cols-1 md:grid-cols-2 3xl:grid-cols-3">
-					{props.data.map((app: Dapp) => (
-						<Link href={`/dapp?id=${app.dappId}`}>
-							{" "}
-							<Card key={app.dappId}>
-								{/* <Link href={}> */}
-								<Row className="justify-between">
-									<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>
-								<Text
-									classNames="text-[16px] leading-[21px] text-[#87868C] font-[400] line-clamp-3"
-									maxLines={3}
-								>
-									{app.description.substring(0, 200)}
-								</Text>
-								{/* </Link> */}
-							</Card>
-						</Link>
-					))}
-				</div>
-			) : (
-				<Column className="flex items-center w-full gap-y-4">
-					<p className="text-xl text-center">
-						No app found with the search!
-					</p>
-					<p className="text-xl text-center">
-						But you can claim it on the Meroku protocol rightaway.
-					</p>
-					<Button
-						onClick={() => {
-							window.gtag("event", "claim-app", {
-								location: "no-app-found",
-							});
-						}}
-					>
-						<a target={"_blank"} href={"https://app.meroku.org"}>
-							Claim App Now
-						</a>
-					</Button>
-				</Column>
-			)}
-		</div>
-	);
+  return (
+    <div>
+      {props.data.length ? (
+        <div className="grid gap-8 grid-cols-1 md:grid-cols-2 3xl:grid-cols-3">
+          {props.data.map((app: Dapp) => (
+            <Link href={`/dapp?id=${app.dappId}`}>
+              {" "}
+              <Card key={app.dappId}>
+                {/* <Link href={}> */}
+                <Row className="justify-between">
+                  <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 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"
+                  maxLines={3}
+                >
+                  {app.description.substring(0, 200)}
+                </Text>
+                {/* </Link> */}
+              </Card>
+            </Link>
+          ))}
+        </div>
+      ) : (
+        <Column className="flex items-center w-full gap-y-4">
+          <p className="text-xl text-center">No app found with the search!</p>
+          <p className="text-xl text-center">
+            But you can claim it on the Meroku protocol rightaway.
+          </p>
+          <Button
+            onClick={() => {
+              window.gtag("event", "claim-app", {
+                location: "no-app-found",
+              });
+            }}
+          >
+            <a target={"_blank"} href={"https://app.meroku.org"}>
+              Claim App Now
+            </a>
+          </Button>
+        </Column>
+      )}
+    </div>
+  );
 }
diff --git a/src/components/card/index.tsx b/src/components/card/index.tsx
@@ -38,8 +38,14 @@ export function FeaturedCard(props) {
 				<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] text-light-color">
+				<p className="text-[16px] leading-[18px] lg:text-[24px] lg:leading-[28px] font-[500] line-clamp-1 mb-[8px] text-light-color 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/models/dapp.tsx b/src/features/dapp/models/dapp.tsx
@@ -1,3 +1,5 @@
+import { verifiedType } from "../../../components/VerificationDetails";
+
 export interface Dapp {
     name:string,
     description: string,
@@ -32,5 +34,6 @@ export interface Dapp {
         "rating": number
     },
     users: [],
+    verification: { icon: string, verified: verifiedType[] }
     minted?:boolean
 }