diff --git a/deploy-web/src/components/deploymentDetail/DeploymentDepositModal.tsx b/deploy-web/src/components/deploymentDetail/DeploymentDepositModal.tsx index 204ae5f19..2dcc02e96 100644 --- a/deploy-web/src/components/deploymentDetail/DeploymentDepositModal.tsx +++ b/deploy-web/src/components/deploymentDetail/DeploymentDepositModal.tsx @@ -47,7 +47,14 @@ const useStyles = makeStyles()(theme => ({ } })); -export function DeploymentDepositModal({ handleCancel, onDeploymentDeposit, min = 0, infoText = null }) { +type Props = { + handleCancel: () => void; + onDeploymentDeposit: (deposit: number, depositorAddress: string) => void; + min?: number; + infoText?: string | JSX.Element; +}; + +export function DeploymentDepositModal({ handleCancel, onDeploymentDeposit, min = 0, infoText = null }: Props) { const { classes } = useStyles(); const formRef = useRef(null); const { settings } = useSettings(); diff --git a/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx b/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx index 113dfdea6..bb921a8ae 100644 --- a/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx +++ b/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx @@ -148,12 +148,12 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s setIsDepositingDeployment(true); }; - const onDeploymentDeposit = async (deposit, depositorAddress) => { + const onDeploymentDeposit = async (deposit: number, depositorAddress: string) => { setIsDepositingDeployment(false); await handleCreateClick(deposit, depositorAddress); }; - async function handleCreateClick(deposit, depositorAddress) { + async function handleCreateClick(deposit: number, depositorAddress: string) { setIsCreatingDeployment(true); const dd = await createAndValidateDeploymentData(editedManifest, null, deposit, depositorAddress); @@ -167,7 +167,8 @@ export const ManifestEdit: React.FunctionComponent = ({ editedManifest, s try { const messages = []; const hasValidCert = isCertificateValidated && isLocalCertificateValidated; - let _crtpem, _encryptedKey; + let _crtpem: string; + let _encryptedKey: string; // Create a cert if the user doesn't have one if (!hasValidCert) { diff --git a/deploy-web/src/pages/404.tsx b/deploy-web/src/pages/404.tsx index 8b4713d42..85050e116 100644 --- a/deploy-web/src/pages/404.tsx +++ b/deploy-web/src/pages/404.tsx @@ -20,7 +20,7 @@ const FourOhFour: React.FunctionComponent = ({}) => { - + 404 diff --git a/deploy-web/src/pages/deployments/[dseq].tsx b/deploy-web/src/pages/deployments/[dseq].tsx index 0d9067e4e..68989d27c 100644 --- a/deploy-web/src/pages/deployments/[dseq].tsx +++ b/deploy-web/src/pages/deployments/[dseq].tsx @@ -4,7 +4,7 @@ import Layout from "@src/components/layout/Layout"; import { NextSeo } from "next-seo"; import { DeploymentDetailTopBar } from "@src/components/deploymentDetail/DeploymentDetailTopBar"; import { DeploymentSubHeader } from "@src/components/deploymentDetail/DeploymentSubHeader"; -import { Alert, Box, Button, CircularProgress, Tab, Tabs } from "@mui/material"; +import { Alert, Box, Button, CircularProgress, Tab, Tabs, Typography } from "@mui/material"; import { LeaseRow } from "@src/components/deploymentDetail/LeaseRow"; import { useRouter } from "next/router"; import { createRef, useEffect, useState } from "react"; @@ -23,6 +23,8 @@ import { AnalyticsEvents } from "@src/utils/analytics"; import { RouteStepKeys } from "@src/utils/constants"; import { useSettings } from "@src/context/SettingsProvider"; import PageContainer from "@src/components/shared/PageContainer"; +import Link from "next/link"; +import ArrowForwardIcon from "@mui/icons-material/ArrowForward"; type Props = { dseq: string; @@ -54,7 +56,8 @@ const DeploymentDetailPage: React.FunctionComponent<Props> = ({ dseq }) => { const { data: deployment, isFetching: isLoadingDeployment, - refetch: getDeploymentDetail + refetch: getDeploymentDetail, + error: deploymentError } = useDeploymentDetail(address, dseq, { enabled: false, onSuccess: _deploymentDetail => { @@ -94,6 +97,7 @@ const DeploymentDetailPage: React.FunctionComponent<Props> = ({ dseq }) => { } } }); + const isDeploymentNotFound = deploymentError && (deploymentError as any).response?.data?.message?.includes("Deployment not found"); const hasLeases = leases && leases.length > 0; const { isLocalCertMatching, localCert, isCreatingCert, createCertificate } = useCertificate(); const [deploymentManifest, setDeploymentManifest] = useState(null); @@ -161,6 +165,21 @@ const DeploymentDetailPage: React.FunctionComponent<Props> = ({ dseq }) => { deployment={deployment} /> + {isDeploymentNotFound && ( + <Box sx={{ textAlign: "center", marginTop: 10 }}> + <Typography variant="h1">404</Typography> + <Typography variant="subtitle1">This deployment does not exist or it was created using another wallet.</Typography> + <Box sx={{ paddingTop: "1rem" }}> + <Link href={UrlService.home()} passHref> + <Button variant="contained" color="secondary" sx={{ display: "inline-flex", alignItems: "center", textTransform: "initial" }}> + Go to homepage  + <ArrowForwardIcon fontSize="small" /> + </Button> + </Link> + </Box> + </Box> + )} + {deployment && ( <> <DeploymentSubHeader deployment={deployment} leases={leases} /> diff --git a/deploy-web/src/utils/certificateUtils.ts b/deploy-web/src/utils/certificateUtils.ts index 3a586a050..5b4b45db7 100644 --- a/deploy-web/src/utils/certificateUtils.ts +++ b/deploy-web/src/utils/certificateUtils.ts @@ -44,9 +44,9 @@ export const generateCertificate = (address: string) => { const prv = kp.prvKeyObj; const pub = kp.pubKeyObj; - const encryptedKey = rs.KEYUTIL.getPEM(prv, "PKCS8PRV"); + const encryptedKey = rs.KEYUTIL.getPEM(prv, "PKCS8PRV") as string; - const pubpem = rs.KEYUTIL.getPEM(pub, "PKCS8PUB").replaceAll("PUBLIC KEY", "EC PUBLIC KEY"); + const pubpem = rs.KEYUTIL.getPEM(pub, "PKCS8PUB").replaceAll("PUBLIC KEY", "EC PUBLIC KEY") as string; // STEP2. specify certificate parameters const cert = new rs.KJUR.asn1.x509.Certificate({ @@ -70,7 +70,7 @@ export const generateCertificate = (address: string) => { cakey: prv // can specify private key object or PEM string }); - const crtpem = cert.getPEM(); + const crtpem = cert.getPEM() as string; return { cert, crtpem, pubpem, encryptedKey }; }; diff --git a/deploy-web/src/utils/deploymentLocalDataUtils.ts b/deploy-web/src/utils/deploymentLocalDataUtils.ts index e974ab250..95fe525b4 100644 --- a/deploy-web/src/utils/deploymentLocalDataUtils.ts +++ b/deploy-web/src/utils/deploymentLocalDataUtils.ts @@ -10,6 +10,9 @@ export type LocalDeploymentData = { export function getDeploymentLocalData(dseq: string | number) { const selectedNetworkId = localStorage.getItem("selectedNetworkId"); const selectedWallet = getSelectedStorageWallet(); + + if (!selectedWallet) return null; + const dataStr = localStorage.getItem(`${selectedNetworkId}/${selectedWallet.address}/deployments/${dseq}.data`); if (!dataStr) return null;