Implemented a status verification icon

Created a verification badge by instantianting it in a React
component and its story, which is called in the AppHeader component.
Declared a corresponding function in the fetchers file, which fetches the
URL of the verification status from the env file.

Signed-off-by: Mihai State <mihai.state@codethink.co.uk>

Co-authored-by: Kolja Lampe <razzeee@gmail.com>

Author: razzeee

frontend/package.json

@@ -31,7 +31,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-country-flag": "^3.0.2",
     "react-dom": "^17.0.2",
-    "react-icons": "^4.4.0",
+    "react-icons": "^4.6.0",
     "react-image-lightbox": "^5.1.4",
     "react-responsive-carousel": "^3.2.23",
     "react-svg-worldmap": "^2.0.0-alpha.0",

frontend/pages/apps/details/[appDetails].tsx

@@ -8,6 +8,7 @@ import {
   fetchSummary,
   fetchDeveloperApps,
   fetchProjectgroupApps,
+  fetchVerificationStatus,
 } from "../../../src/fetchers"
 import { NextSeo } from "next-seo"
 import {
@@ -17,19 +18,22 @@ import {
 } from "../../../src/types/Appstream"
 import { Summary } from "../../../src/types/Summary"
 import { AppStats } from "../../../src/types/AppStats"
+import { VerificationStatus } from "src/types/VerificationStatus"
 
 export default function Details({
   app,
   summary,
   stats,
   developerApps,
   projectgroupApps,
+  verificationStatus,
 }: {
   app: Appstream
   summary?: Summary
   stats: AppStats
   developerApps: Appstream[]
   projectgroupApps: Appstream[]
+  verificationStatus: VerificationStatus
 }) {
   const screenshots = app.screenshots
     ? app.screenshots.filter(pickScreenshot).map((screenshot: Screenshot) => ({
@@ -59,6 +63,7 @@ export default function Details({
         projectgroupApps={projectgroupApps.filter(
           (devApp) => devApp.id !== app.id,
         )}
+        verificationStatus={verificationStatus}
       />
     </>
   )
@@ -74,6 +79,7 @@ export const getStaticProps: GetStaticProps = async ({
   const stats = await fetchAppStats(appId as string)
   const developerApps = await fetchDeveloperApps(app?.developer_name)
   const projectgroupApps = await fetchProjectgroupApps(app?.project_group)
+  const verificationStatus = await fetchVerificationStatus(appId as string)
 
   return {
     props: {
@@ -83,6 +89,7 @@ export const getStaticProps: GetStaticProps = async ({
       stats,
       developerApps: developerApps ?? [],
       projectgroupApps: projectgroupApps ?? [],
+      verificationStatus,
     },
     revalidate: 3600,
   }

frontend/public/locales/en/common.json

@@ -251,5 +251,7 @@
   "your-profile": "Your Profile",
   "show-more": "Show More",
   "show-less": "Show Less",
-  "more-type": "More {{type}}"
+  "more-type": "More {{type}}",
+  "verified": "Verified",
+  "app-is-verified": "This app is verified."
 }

frontend/src/components/application/AppHeader.stories.tsx

@@ -2,8 +2,8 @@ import React from "react"
 import { ComponentMeta } from "@storybook/react"
 import { faker } from "@faker-js/faker"
 import { AppHeader } from "./AppHeader"
-import { Appstream } from "src/types/Appstream"
-import { VendingSetup } from "src/types/Vending"
+import { Appstream } from "../../../src/types/Appstream"
+import { VendingSetup } from "../../../src/types/Vending"
 
 export default {
   title: "Components/Application/AppHeader",
@@ -32,6 +32,34 @@ export const Install = () => {
       installClicked={() => {}}
       donateClicked={() => {}}
       vendingSetup={undefined}
+      verificationStatus={{ verified: true }}
+    />
+  )
+}
+
+export const InstallNotVerified = () => {
+  const app = {
+    id: faker.datatype.uuid(),
+    icon: faker.image.image(),
+    name: faker.commerce.product(),
+    developer_name: faker.internet.userName(),
+  }
+
+  const user = {
+    loading: false,
+    info: {
+      "dev-flatpaks": [],
+    },
+  }
+
+  return (
+    <AppHeader
+      app={app}
+      user={user}
+      installClicked={() => {}}
+      donateClicked={() => {}}
+      vendingSetup={undefined}
+      verificationStatus={{ verified: false }}
     />
   )
 }
@@ -59,6 +87,7 @@ export const InstallWithDonate = () => {
       installClicked={() => {}}
       donateClicked={() => {}}
       vendingSetup={undefined}
+      verificationStatus={{ verified: true }}
     />
   )
 }
@@ -87,6 +116,7 @@ export const UserOwnsApp = () => {
       installClicked={() => {}}
       donateClicked={() => {}}
       vendingSetup={undefined}
+      verificationStatus={{ verified: true }}
     />
   )
 }
@@ -119,6 +149,7 @@ export const WithVending = () => {
       installClicked={() => {}}
       donateClicked={() => {}}
       vendingSetup={vending}
+      verificationStatus={{ verified: true }}
     />
   )
 }

frontend/src/components/application/AppHeader.tsx

@@ -1,25 +1,28 @@
 import { useTranslation } from "next-i18next"
-import Link from "next/link"
 import React from "react"
 import { Appstream } from "src/types/Appstream"
 import { UserState } from "src/types/Login"
 import { VendingSetup } from "src/types/Vending"
+import { VerificationStatus } from "src/types/VerificationStatus"
 import Button from "../Button"
 import ButtonLink from "../ButtonLink"
 import LogoImage from "../LogoImage"
+import Verification from "./Verification"
 
 export function AppHeader({
   app,
   user,
   installClicked,
   donateClicked,
   vendingSetup,
+  verificationStatus,
 }: {
   app: Appstream
   user: UserState
   installClicked: (e: any) => void
   donateClicked: (e: any) => void
   vendingSetup: VendingSetup
+  verificationStatus: VerificationStatus
 }) {
   const { t } = useTranslation()
 
@@ -32,7 +35,10 @@ export function AppHeader({
       )}
 
       <div className="mx-3 my-auto">
-        <h2 className="mt-0 mb-3">{app.name}</h2>
+        <div className="mb-3 flex space-x-4">
+          <h2 className="my-0">{app.name}</h2>
+          <Verification verificationStatus={verificationStatus}></Verification>
+        </div>
         {app.developer_name?.trim().length > 0 && (
           <div className="text-sm font-light">
             {t("by", {

frontend/src/components/application/Details.stories.tsx

@@ -2,9 +2,9 @@ import React from "react"
 import { ComponentMeta } from "@storybook/react"
 import Details from "./Details"
 import { faker } from "@faker-js/faker"
-import { AppStats } from "src/types/AppStats"
-import { Appstream } from "src/types/Appstream"
-import { Summary } from "src/types/Summary"
+import { AppStats } from "../../types/AppStats"
+import { Appstream } from "../../types/Appstream"
+import { Summary } from "../../types/Summary"
 
 export default {
   title: "Components/Application/Details",
@@ -42,7 +42,7 @@ export const Generated = () => {
   }
 
   const app: Appstream = {
-    id: faker.datatype.number(),
+    id: faker.datatype.number().toString(),
     releases: [
       {
         version: faker.datatype.number().toString(),
@@ -62,6 +62,7 @@ export const Generated = () => {
       stats={stats}
       developerApps={developerApps}
       projectgroupApps={projectgroupApps}
+      verificationStatus={{ verified: true }}
     />
   )
 }

frontend/src/components/application/Details.tsx

@@ -34,13 +34,15 @@ import { useAsync } from "../../hooks/useAsync"
 import { getAppVendingSetup } from "../../asyncs/vending"
 
 import useCollapse from "react-collapsed"
+import { VerificationStatus } from "src/types/VerificationStatus"
 
 interface Props {
   app?: Appstream
   summary?: Summary
   stats: AppStats
   developerApps: Appstream[]
   projectgroupApps: Appstream[]
+  verificationStatus: VerificationStatus
 }
 
 function categoryToSeoCategories(categories: string[]) {
@@ -82,6 +84,7 @@ const Details: FunctionComponent<Props> = ({
   stats,
   developerApps,
   projectgroupApps,
+  verificationStatus,
 }) => {
   const { t } = useTranslation()
   const user = useUserContext()
@@ -152,6 +155,7 @@ const Details: FunctionComponent<Props> = ({
           installClicked={installClicked}
           donateClicked={donateClicked}
           vendingSetup={vendingSetup}
+          verificationStatus={verificationStatus}
         />
         <div className="col-start-1 col-end-4 bg-bgColorSecondary">
           {showLightbox && (

frontend/src/components/application/Verification.stories.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+import { ComponentMeta } from "@storybook/react"
+import Verification from "./Verification"
+import { VerificationStatus } from "../../types/VerificationStatus"
+export default {
+  title: "Components/Application/Verification",
+  component: Verification,
+} as ComponentMeta<typeof Verification>
+
+export const Generated = () => {
+  const verificationStatus: VerificationStatus = { verified: true }
+  return <Verification verificationStatus={verificationStatus} />
+}

frontend/src/components/application/Verification.tsx

@@ -0,0 +1,27 @@
+import { FunctionComponent } from "react"
+import React from "react"
+
+import { HiCheckBadge } from "react-icons/hi2"
+import { useTranslation } from "next-i18next"
+import { VerificationStatus } from "src/types/VerificationStatus"
+
+interface Props {
+  verificationStatus: VerificationStatus
+}
+
+const Verification: FunctionComponent<Props> = ({ verificationStatus }) => {
+  const { t } = useTranslation()
+
+  if (verificationStatus?.verified == true) {
+    return (
+      <HiCheckBadge
+        className="h-10 w-10 text-colorPrimary"
+        title={t("verified")}
+        aria-label={t("app-is-verified")}
+      />
+    )
+  } else {
+    return null
+  }
+}
+export default Verification

frontend/src/env.ts

@@ -104,3 +104,6 @@ export const IS_PRODUCTION: boolean =
 export const STRIPE_MAX_PAYMENT = 999999.99
 // Flathub enforces a minimum payment amount of $1 to cover fees
 export const FLATHUB_MIN_PAYMENT = 1
+
+export const APP_VERIFICATION_STATUS = (id: string): string =>
+  `${BASE_URI}/verification/${id}/status`