[Feature] New submissions section on VaultDetailsPage

packages/web/src/languages/en.json

@@ -590,6 +590,11 @@
     "projectNotAvailable": "Project not available",
     "projectNotAvailableExplanation": "The project on which you are attempting to submit a vulnerability is no longer available. \n\n If you think this is an error, please contact Hats support.",
     "understand": "Understand",
+    "thereIsNoPublicSubmission": "There are no public submission for this vault yet.",
+    "gettingSubmissions": "Getting submissions",
+    "seeSubmissionsOnGithub": "See submissions on GitHub",
+    "openGithub": "Open GitHub",
+    "doYouWantToSeeSubmissionsOnGithub": "Do you want to see the submissions on GitHub?",
     "PGPTool": {
       "title": "PGP tool",
       "unlockPgpTool": "Unlock the PGP tool",

packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/InScopeSection/InScopeSection.tsx

@@ -13,7 +13,7 @@ import TerminalIcon from "@mui/icons-material/Terminal";
 import ContractsIcon from "@mui/icons-material/ViewInAr";
 import ContractsTwoIcon from "@mui/icons-material/ViewWeekOutlined";
 import MDEditor from "@uiw/react-md-editor";
-import { Alert, Button, CopyToClipboard, Pill, WithTooltip } from "components";
+import { Alert, Button, CopyToClipboard, Loading, Pill, WithTooltip } from "components";
 import { disallowedElementsMarkdown } from "constants/constants";
 import { defaultAnchorProps } from "constants/defaultAnchorProps";
 import { useEffect, useState } from "react";
@@ -50,7 +50,7 @@ export const InScopeSection = ({ vault }: InScopeSectionProps) => {
     getRepoContractsList();
   }, [vault.description?.scope?.reposInformation]);
 
-  if (!vault.description) return null;
+  if (!vault.description) return <Loading fixed extraText={`${t("loading")}...`} />;
 
   const contractsCovered = severitiesToContractsCoveredForm(vault.description?.severities);
   const docsLink = vault.description.scope?.docsLink;
@@ -219,7 +219,9 @@ export const InScopeSection = ({ vault }: InScopeSectionProps) => {
           </>
         )
       ) : (
-        <Alert type="info">{t("loadingContractsOnRepo")}</Alert>
+        <Alert type="info" className="mb-4">
+          {t("loadingContractsOnRepo")}
+        </Alert>
       )}
 
       {/* Contracts covered */}

packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultSubmissionsSection/PublicSubmissionCard/PublicSubmissionCard.tsx

@@ -0,0 +1,52 @@
+import { IVault, IVulnerabilitySeverity } from "@hats-finance/shared";
+import MDEditor from "@uiw/react-md-editor";
+import { Pill } from "components";
+import { disallowedElementsMarkdown } from "constants/constants";
+import { getSeveritiesColorsArray } from "hooks/severities/useSeverityRewardInfo";
+import moment from "moment";
+import { IGithubIssue } from "pages/Honeypots/VaultDetailsPage/types";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { StyledPublicSubmissionCard } from "./styles";
+
+type PublicSubmissionCardProps = {
+  vault: IVault;
+  submission: IGithubIssue;
+};
+
+function PublicSubmissionCard({ vault, submission }: PublicSubmissionCardProps) {
+  const { t } = useTranslation();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const severityColors = getSeveritiesColorsArray(vault);
+  const severityIndex =
+    submission.severity &&
+    vault?.description?.severities.findIndex((sev: IVulnerabilitySeverity) =>
+      sev.name.toLowerCase().includes(submission.severity ?? "")
+    );
+
+  return (
+    <StyledPublicSubmissionCard isOpen={isOpen}>
+      <div className="card-header" onClick={() => setIsOpen((prev) => !prev)}>
+        <div className="severity">
+          <Pill textColor={severityColors[severityIndex ?? 0]} isSeverity text={submission.severity ?? t("noSeverity")} />
+        </div>
+        <p className="date">{moment(submission.createdAt).format("Do MMM YYYY - hh:mma")}</p>
+        <p className="submission-title">{submission.issueData.issueTitle}</p>
+      </div>
+
+      <div className="card-content">
+        <MDEditor.Markdown
+          disallowedElements={disallowedElementsMarkdown}
+          className="submission-content"
+          source={submission.issueData.issueDescription
+            .replace("\n**Submission hash", "\\\n**Submission hash")
+            .replace("\n**Severity:**", "\\\n**Severity:**")}
+        />
+      </div>
+    </StyledPublicSubmissionCard>
+  );
+}
+
+export default PublicSubmissionCard;

packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultSubmissionsSection/PublicSubmissionCard/styles.ts

@@ -0,0 +1,56 @@
+import styled, { css } from "styled-components";
+import { getSpacing } from "styles";
+
+export const StyledPublicSubmissionCard = styled.div<{ isOpen: boolean }>(
+  ({ isOpen }) => css`
+    position: relative;
+
+    .card-header {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: ${getSpacing(1.5)};
+      border: 1px solid var(--primary-light);
+      padding: ${getSpacing(3)} ${getSpacing(4)};
+      background: var(--background-2);
+      cursor: pointer;
+      transition: 0.2s;
+
+      &:hover {
+        border-color: var(--primary);
+      }
+
+      .date {
+        position: absolute;
+        top: ${getSpacing(3)};
+        right: ${getSpacing(4)};
+      }
+
+      .submission-title {
+        font-size: var(--small);
+        padding-left: ${getSpacing(1)};
+        font-weight: 700;
+      }
+    }
+
+    .card-content {
+      overflow: hidden;
+      height: 0;
+
+      ${isOpen &&
+      css`
+        height: auto;
+      `}
+
+      .submission-content {
+        white-space: normal;
+        font-size: var(--xsmall);
+        background: var(--background-3);
+        padding: ${getSpacing(3)} ${getSpacing(4)};
+        color: var(--white);
+        border: 1px solid var(--primary-light);
+        border-top: none;
+      }
+    }
+  `
+);

packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultSubmissionsSection/VaultSubmissionsSection.tsx

@@ -0,0 +1,68 @@
+import { IVault } from "@hats-finance/shared";
+import OpenIcon from "@mui/icons-material/OpenInNewOutlined";
+import { Alert, Button, HatSpinner } from "components";
+import useConfirm from "hooks/useConfirm";
+import { useTranslation } from "react-i18next";
+import { useSavedSubmissions, useVaultRepoName } from "../../hooks";
+import PublicSubmissionCard from "./PublicSubmissionCard/PublicSubmissionCard";
+import { StyledSubmissionsSection } from "./styles";
+
+type VaultSubmissionsSectionProps = {
+  vault: IVault;
+  noDeployed?: boolean;
+};
+
+export const VaultSubmissionsSection = ({ vault }: VaultSubmissionsSectionProps) => {
+  const { t } = useTranslation();
+  const confirm = useConfirm();
+
+  const { data: savedSubmissions, isLoading } = useSavedSubmissions(vault);
+  const { data: repoName } = useVaultRepoName(vault);
+
+  const goToGithubIssues = async () => {
+    if (!repoName) return;
+
+    const githubLink = `https://github.com/hats-finance/${repoName}/issues`;
+
+    const wantToGo = await confirm({
+      title: t("openGithub"),
+      titleIcon: <OpenIcon className="mr-2" fontSize="large" />,
+      description: t("doYouWantToSeeSubmissionsOnGithub"),
+      cancelText: t("no"),
+      confirmText: t("yesGo"),
+    });
+
+    if (!wantToGo) return;
+    window.open(githubLink, "_blank");
+  };
+
+  return (
+    <StyledSubmissionsSection>
+      <h2>
+        {t("submissions")}
+
+        {repoName && (
+          <Button className="ml-3" styleType="text" textColor="secondary" onClick={goToGithubIssues}>
+            {t("seeSubmissionsOnGithub")}
+          </Button>
+        )}
+      </h2>
+
+      {savedSubmissions?.length === 0 && (
+        <Alert className="mt-5 mb-5" type="info">
+          {t("thereIsNoPublicSubmission")}
+        </Alert>
+      )}
+
+      {isLoading && <HatSpinner text={`${t("gettingSubmissions")}...`} />}
+
+      {savedSubmissions && savedSubmissions?.length > 0 && (
+        <div className="public-submissions">
+          {savedSubmissions.map((submission) => (
+            <PublicSubmissionCard key={submission._id} vault={vault} submission={submission} />
+          ))}
+        </div>
+      )}
+    </StyledSubmissionsSection>
+  );
+};

packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultSubmissionsSection/styles.ts

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import { getSpacing } from "styles";
+
+export const StyledSubmissionsSection = styled.div`
+  padding-bottom: ${getSpacing(10)};
+
+  .public-submissions {
+    margin-top: ${getSpacing(3)};
+    display: flex;
+    flex-direction: column;
+    gap: ${getSpacing(3)};
+  }
+`;

packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/index.ts

@@ -1,3 +1,4 @@
 export { VaultRewardsSection } from "./VaultRewardsSection/VaultRewardsSection";
 export { VaultScopeSection } from "./VaultScopeSection/VaultScopeSection";
 export { VaultDepositsSection } from "./VaultDepositsSection/VaultDepositsSection";
+export { VaultSubmissionsSection } from "./VaultSubmissionsSection/VaultSubmissionsSection";

packages/web/src/pages/Honeypots/VaultDetailsPage/VaultDetailsPage.tsx

@@ -1,11 +1,12 @@
 import { IVault } from "@hats-finance/shared";
 import { Alert, Loading, Seo, VaultCard } from "components";
 import { useVaults } from "hooks/subgraph/vaults/useVaults";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { redirect, useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { HoneypotsRoutePaths } from "../router";
-import { VaultDepositsSection, VaultRewardsSection, VaultScopeSection } from "./Sections";
+import { VaultDepositsSection, VaultRewardsSection, VaultScopeSection, VaultSubmissionsSection } from "./Sections";
+import { useSavedSubmissions } from "./hooks";
 import { StyledSectionTab, StyledVaultDetailsPage } from "./styles";
 
 const DETAILS_SECTIONS = [
@@ -21,6 +22,10 @@ const DETAILS_SECTIONS = [
     title: "deposits",
     component: VaultDepositsSection,
   },
+  {
+    title: "submissions",
+    component: VaultSubmissionsSection,
+  },
 ];
 
 type VaultDetailsPageProps = {
@@ -37,17 +42,28 @@ export const VaultDetailsPage = ({ vaultToUse, noActions = false, noDeployed = f
   const { vaultSlug, sectionId } = useParams();
   const vaultId = vaultSlug?.split("-").pop();
   const vault = vaultToUse ?? allVaults?.find((vault) => vault.id === vaultId);
+  const isAudit = vault?.description?.["project-metadata"].type === "audit";
+
+  const { data: savedSubmissions } = useSavedSubmissions(vault);
 
   const [openSectionId, setOpenSectionId] = useState(sectionId ?? DETAILS_SECTIONS[0].title);
 
+  const DETAILS_SECTIONS_TO_SHOW = useMemo(
+    () =>
+      DETAILS_SECTIONS.filter((section) => {
+        if (section.title === "deposits" && noActions) return false;
+        if (section.title === "submissions" && (!isAudit || savedSubmissions?.length === 0)) return false;
+        return true;
+      }),
+    [noActions, isAudit, savedSubmissions]
+  );
+
   if (allVaults?.length === 0) return <Loading extraText={`${t("loadingVaultDetails")}...`} />;
   if (!vault || !vault.description) {
-    redirect("/");
-    return null;
+    return <Loading extraText={`${t("loadingVaultDetails")}...`} />;
   }
 
   const activeClaim = vault.activeClaim;
-  const isAudit = vault.description["project-metadata"].type === "audit";
   const vaultName = vault.description["project-metadata"].name;
 
   const navigateToType = () => {
@@ -70,7 +86,7 @@ export const VaultDetailsPage = ({ vaultToUse, noActions = false, noDeployed = f
   return (
     <>
       <Seo title={`${vaultName} ${isAudit ? t("auditCompetition") : t("bugBounty")}`} />
-      <StyledVaultDetailsPage className="content-wrapper" isAudit={isAudit}>
+      <StyledVaultDetailsPage className="content-wrapper" isAudit={isAudit} tabsNumber={DETAILS_SECTIONS_TO_SHOW.length}>
         {!noActions && (
           <div className="breadcrumb">
             <span className="type" onClick={navigateToType}>
@@ -91,7 +107,7 @@ export const VaultDetailsPage = ({ vaultToUse, noActions = false, noDeployed = f
         </div>
 
         <div className="sections-tabs">
-          {DETAILS_SECTIONS.filter((section) => (noActions ? section.title !== "deposits" : true)).map((section) => (
+          {DETAILS_SECTIONS_TO_SHOW.map((section) => (
             <StyledSectionTab
               onClick={() => changeDetailsSection(section.title)}
               active={openSectionId === section.title}

packages/web/src/pages/Honeypots/VaultDetailsPage/hooks.ts

@@ -0,0 +1,28 @@
+import { IVault } from "@hats-finance/shared";
+import { UseQueryResult, useQuery } from "@tanstack/react-query";
+import * as savedSubmissionsService from "./savedSubmissionsService";
+import { IGithubIssue } from "./types";
+
+/**
+ * Returns all saved submissions for a vault
+ */
+export const useSavedSubmissions = (vault: IVault | undefined): UseQueryResult<IGithubIssue[]> => {
+  return useQuery({
+    queryKey: ["github-issues", vault?.id],
+    queryFn: () => savedSubmissionsService.getSavedSubmissions(vault?.id),
+    refetchOnWindowFocus: false,
+    enabled: !!vault,
+  });
+};
+
+/**
+ * Returns the repo name created for a vault
+ */
+export const useVaultRepoName = (vault: IVault | undefined): UseQueryResult<string> => {
+  return useQuery({
+    queryKey: ["github-repo-name", vault?.id],
+    queryFn: () => savedSubmissionsService.getVaultRepoName(vault?.id),
+    refetchOnWindowFocus: false,
+    enabled: !!vault,
+  });
+};

packages/web/src/pages/Honeypots/VaultDetailsPage/savedSubmissionsService.ts

@@ -0,0 +1,43 @@
+import { axiosClient } from "config/axiosClient";
+import { BASE_SERVICE_URL } from "settings";
+import { IGithubIssue } from "./types";
+
+/**
+ * Get all saved github issues for a vault
+ */
+export async function getSavedSubmissions(vaultId: string | undefined): Promise<IGithubIssue[]> {
+  if (!vaultId) return [];
+
+  try {
+    const response = await axiosClient.get(`${BASE_SERVICE_URL}/github-repos/issues/${vaultId}`);
+    const githubIssues = response.data.githubIssues as IGithubIssue[];
+    const githubIssuesWithSeverity = githubIssues.map((issue) => {
+      const severity = issue.issueData.issueDescription.match(/(\*\*Severity:\*\* (.*)\n)/)?.[2];
+      return {
+        ...issue,
+        severity,
+      };
+    });
+
+    return githubIssuesWithSeverity;
+  } catch (error) {
+    return [];
+  }
+}
+
+/**
+ * Get the repo name created for a vault
+ */
+export async function getVaultRepoName(vaultId: string | undefined): Promise<string | undefined> {
+  if (!vaultId) return undefined;
+
+  try {
+    const response = await axiosClient.get(`${BASE_SERVICE_URL}/github-repos/repo/${vaultId}`);
+    const repoName = response.data.repoName as string | undefined;
+    console.log(response);
+
+    return repoName;
+  } catch (error) {
+    return undefined;
+  }
+}