Add typing and show 404 if deployment is not found

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();

deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx

@@ -148,12 +148,12 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ 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<Props> = ({ 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) {

deploy-web/src/pages/404.tsx

@@ -20,7 +20,7 @@ const FourOhFour: React.FunctionComponent<Props> = ({}) => {
       <NextSeo title="Page not found" />
 
       <PageContainer>
-        <Box sx={{ textAlign: "center" }}>
+        <Box sx={{ textAlign: "center", marginTop: 10 }}>
           <Typography variant="h1">404</Typography>
 
           <Title value="Page not found." />

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&nbsp;
+                  <ArrowForwardIcon fontSize="small" />
+                </Button>
+              </Link>
+            </Box>
+          </Box>
+        )}
+
         {deployment && (
           <>
             <DeploymentSubHeader deployment={deployment} leases={leases} />

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 };
 };

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;