diff --git a/packages/web/src/constants/constants.ts b/packages/web/src/constants/constants.ts index 43363dcf6..9f30b7192 100644 --- a/packages/web/src/constants/constants.ts +++ b/packages/web/src/constants/constants.ts @@ -122,4 +122,34 @@ export const HAT_TOKEN_ADDRESS_V1 = "0x436cA314A2e6FfDE52ba789b257b51DaCE778F1a" export const HAT_TOKEN_DECIMALS_V1 = "18"; export const HAT_TOKEN_SYMBOL_V1 = "HAT"; -export const disallowedElementsMarkdown = ["script", "iframe", "img", "audio", "video", "object", "embed"]; +export const allowedElementsMarkdown = [ + "h1", + "h2", + "h3", + "h4", + "h5", + "h6", + "p", + "a", + "ul", + "ol", + "li", + "strong", + "em", + "s", + "code", + "blockquote", + "pre", + "img", + "hr", + "br", + "table", + "thead", + "tbody", + "tr", + "th", + "td", + "caption", + "div", + "span", +]; diff --git a/packages/web/src/languages/en.json b/packages/web/src/languages/en.json index 268eef84f..73cd76b96 100644 --- a/packages/web/src/languages/en.json +++ b/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?", "submissionChanged": "Submission changed", "submissionChangedExplanationAuditWizard": "The submission you are trying to edit has changed. \n\n If you want to edit the submission, please go back to Audit Wizard.", "submissionNotValid": "Submission not valid", diff --git a/packages/web/src/pages/CommitteeTools/SubmissionsTool/SubmissionDetailsPage/SubmissionDetailsPage.tsx b/packages/web/src/pages/CommitteeTools/SubmissionsTool/SubmissionDetailsPage/SubmissionDetailsPage.tsx index b72c9f97f..460123b01 100644 --- a/packages/web/src/pages/CommitteeTools/SubmissionsTool/SubmissionDetailsPage/SubmissionDetailsPage.tsx +++ b/packages/web/src/pages/CommitteeTools/SubmissionsTool/SubmissionDetailsPage/SubmissionDetailsPage.tsx @@ -3,7 +3,7 @@ import LinkIcon from "@mui/icons-material/InsertLinkOutlined"; import MDEditor from "@uiw/react-md-editor"; import { Alert, Button, HatSpinner, WalletButton } from "components"; import { useKeystore } from "components/Keystore"; -import { IPFS_PREFIX, disallowedElementsMarkdown } from "constants/constants"; +import { IPFS_PREFIX, allowedElementsMarkdown } from "constants/constants"; import { RoutePaths } from "navigation"; import { useEffect } from "react"; import { useTranslation } from "react-i18next"; @@ -84,7 +84,7 @@ export const SubmissionDetailsPage = () => { diff --git a/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/EnvSetupSection/EnvSetupSection.tsx b/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/EnvSetupSection/EnvSetupSection.tsx index 02b84db18..5a7034cf2 100644 --- a/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/EnvSetupSection/EnvSetupSection.tsx +++ b/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/EnvSetupSection/EnvSetupSection.tsx @@ -1,7 +1,7 @@ import { IVault } from "@hats-finance/shared"; import MDEditor from "@uiw/react-md-editor"; import { Pill } from "components"; -import { disallowedElementsMarkdown } from "constants/constants"; +import { allowedElementsMarkdown } from "constants/constants"; import { useTranslation } from "react-i18next"; type EnvSetupSectionProps = { @@ -20,7 +20,7 @@ export const EnvSetupSection = ({ vault }: EnvSetupSectionProps) => { diff --git a/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/InScopeSection/InScopeSection.tsx b/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/InScopeSection/InScopeSection.tsx index 12ea062e1..ea0f25bd6 100644 --- a/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/InScopeSection/InScopeSection.tsx +++ b/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/InScopeSection/InScopeSection.tsx @@ -13,8 +13,8 @@ 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 { disallowedElementsMarkdown } from "constants/constants"; +import { Alert, Button, CopyToClipboard, Loading, Pill, WithTooltip } from "components"; +import { allowedElementsMarkdown } from "constants/constants"; import { defaultAnchorProps } from "constants/defaultAnchorProps"; import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; @@ -50,7 +50,7 @@ export const InScopeSection = ({ vault }: InScopeSectionProps) => { getRepoContractsList(); }, [vault.description?.scope?.reposInformation]); - if (!vault.description) return null; + if (!vault.description) return ; const contractsCovered = severitiesToContractsCoveredForm(vault.description?.severities); const docsLink = vault.description.scope?.docsLink; @@ -161,7 +161,7 @@ export const InScopeSection = ({ vault }: InScopeSectionProps) => {
@@ -219,7 +219,9 @@ export const InScopeSection = ({ vault }: InScopeSectionProps) => { ) ) : ( - {t("loadingContractsOnRepo")} + + {t("loadingContractsOnRepo")} + )} {/* Contracts covered */} diff --git a/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/OutOfScopeSection/OutOfScopeSection.tsx b/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/OutOfScopeSection/OutOfScopeSection.tsx index 4e8df8f40..cf0b3116c 100644 --- a/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/OutOfScopeSection/OutOfScopeSection.tsx +++ b/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/OutOfScopeSection/OutOfScopeSection.tsx @@ -1,6 +1,6 @@ import { IVault } from "@hats-finance/shared"; import MDEditor from "@uiw/react-md-editor"; -import { disallowedElementsMarkdown } from "constants/constants"; +import { allowedElementsMarkdown } from "constants/constants"; type OutOfScopeSectionProps = { vault: IVault; @@ -12,7 +12,7 @@ export const OutOfScopeSection = ({ vault }: OutOfScopeSectionProps) => { return (
diff --git a/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/SeverityLevelsSection/SeverityLevelsSection.tsx b/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/SeverityLevelsSection/SeverityLevelsSection.tsx index 15b7391b1..a1b1b6994 100644 --- a/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/SeverityLevelsSection/SeverityLevelsSection.tsx +++ b/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultScopeSection/SeverityLevelsSection/SeverityLevelsSection.tsx @@ -1,7 +1,7 @@ import { IVault, IVulnerabilitySeverity } from "@hats-finance/shared"; import MDEditor from "@uiw/react-md-editor"; import { Pill } from "components"; -import { disallowedElementsMarkdown } from "constants/constants"; +import { allowedElementsMarkdown } from "constants/constants"; import { getSeveritiesColorsArray } from "hooks/severities/useSeverityRewardInfo"; import { StyledSeverityLevelsSection } from "./styles"; @@ -20,7 +20,7 @@ export const SeverityLevelsSection = ({ vault }: SeverityLevelsSectionProps) =>
+ sev.name.toLowerCase().includes(submission.severity ?? "") + ); + + return ( + +
setIsOpen((prev) => !prev)}> +
+ +
+

{moment(submission.createdAt).format("Do MMM YYYY - hh:mma")}

+

{submission.issueData.issueTitle}

+
+ +
+ +
+ + ); +} + +export default PublicSubmissionCard; diff --git a/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultSubmissionsSection/PublicSubmissionCard/styles.ts b/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultSubmissionsSection/PublicSubmissionCard/styles.ts new file mode 100644 index 000000000..965585cfe --- /dev/null +++ b/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; + } + } + ` +); diff --git a/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultSubmissionsSection/VaultSubmissionsSection.tsx b/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultSubmissionsSection/VaultSubmissionsSection.tsx new file mode 100644 index 000000000..da21e5ec6 --- /dev/null +++ b/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: , + description: t("doYouWantToSeeSubmissionsOnGithub"), + cancelText: t("no"), + confirmText: t("yesGo"), + }); + + if (!wantToGo) return; + window.open(githubLink, "_blank"); + }; + + return ( + +

+ {t("submissions")} + + {repoName && ( + + )} +

+ + {savedSubmissions?.length === 0 && ( + + {t("thereIsNoPublicSubmission")} + + )} + + {isLoading && } + + {savedSubmissions && savedSubmissions?.length > 0 && ( +
+ {savedSubmissions.map((submission) => ( + + ))} +
+ )} + + ); +}; diff --git a/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultSubmissionsSection/styles.ts b/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/VaultSubmissionsSection/styles.ts new file mode 100644 index 000000000..08171b6ac --- /dev/null +++ b/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)}; + } +`; diff --git a/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/index.ts b/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/index.ts index b319b3e43..1d3c85d41 100644 --- a/packages/web/src/pages/Honeypots/VaultDetailsPage/Sections/index.ts +++ b/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"; diff --git a/packages/web/src/pages/Honeypots/VaultDetailsPage/VaultDetailsPage.tsx b/packages/web/src/pages/Honeypots/VaultDetailsPage/VaultDetailsPage.tsx index 6473a1ec6..4173f6ff4 100644 --- a/packages/web/src/pages/Honeypots/VaultDetailsPage/VaultDetailsPage.tsx +++ b/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 ; if (!vault || !vault.description) { - redirect("/"); - return null; + return ; } 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 ( <> - + {!noActions && (
@@ -91,7 +107,7 @@ export const VaultDetailsPage = ({ vaultToUse, noActions = false, noDeployed = f
- {DETAILS_SECTIONS.filter((section) => (noActions ? section.title !== "deposits" : true)).map((section) => ( + {DETAILS_SECTIONS_TO_SHOW.map((section) => ( changeDetailsSection(section.title)} active={openSectionId === section.title} diff --git a/packages/web/src/pages/Honeypots/VaultDetailsPage/hooks.ts b/packages/web/src/pages/Honeypots/VaultDetailsPage/hooks.ts new file mode 100644 index 000000000..a411cc190 --- /dev/null +++ b/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 => { + 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 => { + return useQuery({ + queryKey: ["github-repo-name", vault?.id], + queryFn: () => savedSubmissionsService.getVaultRepoName(vault?.id), + refetchOnWindowFocus: false, + enabled: !!vault, + }); +}; diff --git a/packages/web/src/pages/Honeypots/VaultDetailsPage/savedSubmissionsService.ts b/packages/web/src/pages/Honeypots/VaultDetailsPage/savedSubmissionsService.ts new file mode 100644 index 000000000..7ef3c42f7 --- /dev/null +++ b/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 { + 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 { + 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; + } +} diff --git a/packages/web/src/pages/Honeypots/VaultDetailsPage/styles.ts b/packages/web/src/pages/Honeypots/VaultDetailsPage/styles.ts index a6da604ff..e8243f6e2 100644 --- a/packages/web/src/pages/Honeypots/VaultDetailsPage/styles.ts +++ b/packages/web/src/pages/Honeypots/VaultDetailsPage/styles.ts @@ -2,8 +2,8 @@ import styled, { css } from "styled-components"; import { getSpacing } from "styles"; import { breakpointsDefinition } from "styles/breakpoints.styles"; -export const StyledVaultDetailsPage = styled.div<{ isAudit: boolean }>( - ({ isAudit }) => css` +export const StyledVaultDetailsPage = styled.div<{ isAudit: boolean; tabsNumber: number }>( + ({ isAudit, tabsNumber }) => css` .breadcrumb { span.type { color: var(--grey-500); @@ -26,7 +26,7 @@ export const StyledVaultDetailsPage = styled.div<{ isAudit: boolean }>( padding-top: ${getSpacing(6)}; margin-top: ${getSpacing(4)}; display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(${tabsNumber}, 1fr); gap: ${getSpacing(2)}; overflow-x: auto; overflow-y: hidden; diff --git a/packages/web/src/pages/Honeypots/VaultDetailsPage/types.ts b/packages/web/src/pages/Honeypots/VaultDetailsPage/types.ts new file mode 100644 index 000000000..a79395179 --- /dev/null +++ b/packages/web/src/pages/Honeypots/VaultDetailsPage/types.ts @@ -0,0 +1,10 @@ +import { ISubmitSubmissionRequest } from "pages/Submissions/SubmissionFormPage/types"; + +export interface IGithubIssue { + _id: string; + createdAt: Date; + vaultId: string; + repoName: string; + issueData: ISubmitSubmissionRequest["createIssueRequests"][0]; + severity?: string; +} diff --git a/packages/web/src/pages/Submissions/SubmissionFormPage/FormSteps/SubmissionSubmit/components/SubmissionReview/SubmissionReview.tsx b/packages/web/src/pages/Submissions/SubmissionFormPage/FormSteps/SubmissionSubmit/components/SubmissionReview/SubmissionReview.tsx index 05a6ac446..9f2b6fc21 100644 --- a/packages/web/src/pages/Submissions/SubmissionFormPage/FormSteps/SubmissionSubmit/components/SubmissionReview/SubmissionReview.tsx +++ b/packages/web/src/pages/Submissions/SubmissionFormPage/FormSteps/SubmissionSubmit/components/SubmissionReview/SubmissionReview.tsx @@ -1,6 +1,6 @@ import MDEditor from "@uiw/react-md-editor"; import { Alert, Button, FormInput, Loading } from "components"; -import { disallowedElementsMarkdown } from "constants/constants"; +import { allowedElementsMarkdown } from "constants/constants"; import { SubmissionFormContext } from "pages/Submissions/SubmissionFormPage/store"; import { useContext } from "react"; import { useTranslation } from "react-i18next"; @@ -39,7 +39,7 @@ export function SubmissionReview() {
diff --git a/packages/web/src/utils/contractsCovered.utils.ts b/packages/web/src/utils/contractsCovered.utils.ts index 8b9088d94..424853ad1 100644 --- a/packages/web/src/utils/contractsCovered.utils.ts +++ b/packages/web/src/utils/contractsCovered.utils.ts @@ -20,7 +20,6 @@ export async function getContractsInfoFromRepos(repos: IVaultRepoInformation[]): sessionStorage.getItem(`repoContracts-${repos.map((repo) => repo.commitHash).join("-")}`) ?? "null" ); - console.log(dataInStorage); if (dataInStorage) return dataInStorage; for (const repo of repos) {