refactor canonical urls with UrlService

akash-network · Sep 5, 2023 · 8ff664b · 8ff664b
1 parent 89cf850
commit 8ff664b
Show file tree

Hide file tree

Showing 19 changed files with 48 additions and 19 deletions.
diff --git a/deploy-web/src/components/newDeploymentWizard/CreateLease.tsx b/deploy-web/src/components/newDeploymentWizard/CreateLease.tsx
@@ -42,6 +42,7 @@ import { CustomTooltip } from "../shared/CustomTooltip";
 import { BidDto } from "@src/types/deployment";
 import { BidCountdownTimer } from "./BidCountdownTimer";
 import { CustomNextSeo } from "../shared/CustomNextSeo";
+import { RouteStepKeys } from "@src/utils/constants";
 
 const yaml = require("js-yaml");
 
@@ -269,7 +270,10 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
 
   return (
     <>
-      <CustomNextSeo title="Create Deployment - Create Lease" url="https://deploy.cloudmos.io/new-deployment?step=create-leases" />
+      <CustomNextSeo
+        title="Create Deployment - Create Lease"
+        url={`https://deploy.cloudmos.io${UrlService.newDeployment({ step: RouteStepKeys.createLeases })}`}
+      />
 
       <Box>
         {!isLoadingBids && bids.length > 0 && !allClosed && (

diff --git a/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx b/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx
@@ -221,7 +221,10 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
 
   return (
     <>
-      <CustomNextSeo title="Create Deployment - Manifest Edit" url="https://deploy.cloudmos.io/new-deployment?step=edit-deployment" />
+      <CustomNextSeo
+        title="Create Deployment - Manifest Edit"
+        url={`https://deploy.cloudmos.io${UrlService.newDeployment({ step: RouteStepKeys.editDeployment })}`}
+      />
 
       <Box
         sx={{

diff --git a/deploy-web/src/components/newDeploymentWizard/TemplateList.tsx b/deploy-web/src/components/newDeploymentWizard/TemplateList.tsx
@@ -83,7 +83,10 @@ export const TemplateList: React.FunctionComponent<Props> = ({ setSelectedTempla
 
   return (
     <>
-      <CustomNextSeo title="Create Deployment - Template List" url="https://deploy.cloudmos.io/new-deployment?step=choose-template" />
+      <CustomNextSeo
+        title="Create Deployment - Template List"
+        url={`https://deploy.cloudmos.io${UrlService.newDeployment({ step: RouteStepKeys.chooseTemplate })}`}
+      />
 
       <Typography variant="h1" sx={{ marginBottom: "2rem", fontSize: "2rem", marginTop: "2rem" }}>
         <strong>What do you want to deploy?</strong>

diff --git a/deploy-web/src/pages/addresses/[address]/deployments.tsx b/deploy-web/src/pages/addresses/[address]/deployments.tsx
@@ -23,6 +23,7 @@ import SearchOffIcon from "@mui/icons-material/SearchOff";
 import AddressLayout from "@src/components/address/AddressLayout";
 import { DeploymentRow } from "@src/components/deployment/DeploymentRow";
 import { CustomNextSeo } from "@src/components/shared/CustomNextSeo";
+import { UrlService } from "@src/utils/urlUtils";
 
 type Props = {
   address: string;
@@ -58,7 +59,7 @@ const AddressDeploymentsPage: React.FunctionComponent<Props> = ({ address }) =>
 
   return (
     <Layout>
-      <CustomNextSeo title={`Account ${address} deployments`} url={`https://deploy.cloudmos.io/addresses/${address}/deployments`} />
+      <CustomNextSeo title={`Account ${address} deployments`} url={`https://deploy.cloudmos.io${UrlService.addressDeployments(address)}`} />
 
       <AddressLayout page="deployments" address={address}>
         <Box sx={{ mt: "1rem" }}>

diff --git a/deploy-web/src/pages/addresses/[address]/index.tsx b/deploy-web/src/pages/addresses/[address]/index.tsx
@@ -42,6 +42,7 @@ import AddressLayout from "@src/components/address/AddressLayout";
 import { TransactionRow } from "@src/components/blockchain/TransactionRow";
 import { useCustomUser } from "@src/hooks/useCustomUser";
 import { CustomNextSeo } from "@src/components/shared/CustomNextSeo";
+import { UrlService } from "@src/utils/urlUtils";
 
 type Props = {
   address: string;
@@ -101,7 +102,7 @@ const AddressDetailPage: React.FunctionComponent<Props> = ({ address, addressDet
 
   return (
     <Layout>
-      <CustomNextSeo title={`Account ${address}`} url={`https://deploy.cloudmos.io/addresses/${address}`} />
+      <CustomNextSeo title={`Account ${address}`} url={`https://deploy.cloudmos.io${UrlService.address(address)}`} />
       <SendAktModal onClose={() => setIsShowingSendModal(false)} open={isShowingSendModal} toAddress={address} />
       {showMustConnectModal && <MustConnectModal message={showMustConnectModal} onClose={() => setShowMustConnectModal(null)} />}
 

diff --git a/deploy-web/src/pages/analytics/index.tsx b/deploy-web/src/pages/analytics/index.tsx
@@ -11,6 +11,7 @@ import Layout from "@src/components/layout/Layout";
 import { useSelectedNetwork } from "@src/utils/networks";
 import { GradientText } from "@src/components/shared/GradientText";
 import { CustomNextSeo } from "@src/components/shared/CustomNextSeo";
+import { UrlService } from "@src/utils/urlUtils";
 
 type Props = {
   children?: ReactNode;
@@ -25,7 +26,7 @@ const DashboardPage: React.FunctionComponent<Props> = ({}) => {
     <Layout isUsingSettings={false} isUsingWallet={false}>
       <CustomNextSeo
         title="Analytics"
-        url={`https://deploy.cloudmos.io/analytics`}
+        url={`https://deploy.cloudmos.io${UrlService.analytics()}`}
         description="Akash Network's #1 analytics hub. Explore the number of $AKT spent, the network capacity (CPU, GPU, RAM, DISK), historical data and much more!"
       />
 

diff --git a/deploy-web/src/pages/contact.tsx b/deploy-web/src/pages/contact.tsx
@@ -9,6 +9,7 @@ import { DiscordIcon } from "@src/components/shared/icons";
 import YouTubeIcon from "@mui/icons-material/YouTube";
 import TwitterIcon from "@mui/icons-material/Twitter";
 import GitHubIcon from "@mui/icons-material/GitHub";
+import { UrlService } from "@src/utils/urlUtils";
 
 type Props = {
   children?: ReactNode;
@@ -49,7 +50,7 @@ const ContactPage: React.FunctionComponent<Props> = ({}) => {
 
   return (
     <Layout>
-      <CustomNextSeo title="Contact" url="https://deploy.cloudmos.io/contact" />
+      <CustomNextSeo title="Contact" url={`https://deploy.cloudmos.io${UrlService.contact()}`} />
 
       <PageContainer>
         <Box sx={{ textAlign: "center", padding: "3rem 0" }}>

diff --git a/deploy-web/src/pages/get-started/index.tsx b/deploy-web/src/pages/get-started/index.tsx
@@ -5,6 +5,7 @@ import PageContainer from "@src/components/shared/PageContainer";
 import { Card, CardContent, CardHeader, useTheme } from "@mui/material";
 import { GetStartedStepper } from "@src/components/get-started/GetStartedStepper";
 import { CustomNextSeo } from "@src/components/shared/CustomNextSeo";
+import { UrlService } from "@src/utils/urlUtils";
 
 const useStyles = makeStyles()(theme => ({}));
 
@@ -18,7 +19,7 @@ const GetStarted: React.FunctionComponent<Props> = ({}) => {
     <Layout>
       <CustomNextSeo
         title="Get started with Cloudmos"
-        url={`https://deploy.cloudmos.io/get-started`}
+        url={`https://deploy.cloudmos.io${UrlService.getStarted()}`}
         description="Follow the steps to get started with Cloudmos!"
       />
 

diff --git a/deploy-web/src/pages/get-started/wallet.tsx b/deploy-web/src/pages/get-started/wallet.tsx
@@ -67,7 +67,7 @@ const GetStartedWallet: React.FunctionComponent<Props> = ({}) => {
     <Layout>
       <CustomNextSeo
         title="Setup wallet"
-        url={`https://deploy.cloudmos.io/get-started/wallet`}
+        url={`https://deploy.cloudmos.io${UrlService.getStartedWallet()}`}
         description="Follow the steps to install Keplr and get tokens!"
       />
 

diff --git a/deploy-web/src/pages/price-compare/index.tsx b/deploy-web/src/pages/price-compare/index.tsx
@@ -196,7 +196,7 @@ export const PriceCompare: React.FunctionComponent<IPriceCompareProps> = ({}) =>
     <Layout isLoading={isLoadingPricing}>
       <CustomNextSeo
         title="Price comparision"
-        url={`https://deploy.cloudmos.io/price-compare`}
+        url={`https://deploy.cloudmos.io${UrlService.priceCompare()}`}
         description="Compare Akash cost savings against the cloud giants like Amazon Web Services (aws), Google Cloud Platform (gcp) and Microsoft Azure."
       />
 

diff --git a/deploy-web/src/pages/providers/[owner]/index.tsx b/deploy-web/src/pages/providers/[owner]/index.tsx
@@ -19,6 +19,7 @@ import { ActiveLeasesGraph } from "@src/components/providers/ActiveLeasesGraph";
 import { makeStyles } from "tss-react/mui";
 import CheckIcon from "@mui/icons-material/Check";
 import { CustomNextSeo } from "@src/components/shared/CustomNextSeo";
+import { UrlService } from "@src/utils/urlUtils";
 
 const NetworkCapacity = dynamic(() => import("../../../components/providers/NetworkCapacity"), {
   ssr: false
@@ -96,7 +97,7 @@ const ProviderDetailPage: React.FunctionComponent<Props> = ({ owner }) => {
   return (
     <Layout isLoading={isLoading}>
       {/** TODO Add endpoint to retrieve and render server side with provider info + add description */}
-      <CustomNextSeo title={`Provider detail ${owner}`} url={`https://deploy.cloudmos.io/providers/${owner}`} />
+      <CustomNextSeo title={`Provider detail ${owner}`} url={`https://deploy.cloudmos.io${UrlService.providerDetail(owner)}`} />
 
       <ProviderDetailLayout address={owner} page={ProviderDetailTabs.DETAIL} refresh={refresh} provider={provider}>
         {!provider && isLoading && (

diff --git a/deploy-web/src/pages/providers/[owner]/leases.tsx b/deploy-web/src/pages/providers/[owner]/leases.tsx
@@ -10,6 +10,7 @@ import { ProviderDetail } from "@src/types/provider";
 import { useProviderStatus } from "@src/queries/useProvidersQuery";
 import ProviderDetailLayout, { ProviderDetailTabs } from "@src/components/providers/ProviderDetailLayout";
 import { CustomNextSeo } from "@src/components/shared/CustomNextSeo";
+import { UrlService } from "@src/utils/urlUtils";
 
 type Props = {
   owner: string;
@@ -77,7 +78,7 @@ const ProviderLeasesPage: React.FunctionComponent<Props> = ({ owner }) => {
 
   return (
     <Layout isLoading={isLoadingLeases || isLoadingProviders || isLoadingStatus}>
-      <CustomNextSeo title={`Provider leases for ${owner}`} url={`https://deploy.cloudmos.io/providers/${owner}/leases`} />
+      <CustomNextSeo title={`Provider leases for ${owner}`} url={`https://deploy.cloudmos.io${UrlService.providerDetailLeases(owner)}`} />
 
       <ProviderDetailLayout address={owner} page={ProviderDetailTabs.LEASES} refresh={refresh} provider={provider}>
         <div className={classes.root}>

diff --git a/deploy-web/src/pages/providers/[owner]/raw.tsx b/deploy-web/src/pages/providers/[owner]/raw.tsx
@@ -10,6 +10,7 @@ import { useProviderStatus } from "@src/queries/useProvidersQuery";
 import ProviderDetailLayout, { ProviderDetailTabs } from "@src/components/providers/ProviderDetailLayout";
 import { DynamicReactJson } from "@src/components/shared/DynamicJsonView";
 import { CustomNextSeo } from "@src/components/shared/CustomNextSeo";
+import { UrlService } from "@src/utils/urlUtils";
 
 type Props = {
   owner: string;
@@ -64,7 +65,7 @@ const ProviderRawPage: React.FunctionComponent<Props> = ({ owner }) => {
 
   return (
     <Layout isLoading={isLoadingLeases || isLoadingProviders || isLoadingStatus}>
-      <CustomNextSeo title={`Provider raw data for ${owner}`} url={`https://deploy.cloudmos.io/providers/${owner}/raw`} />
+      <CustomNextSeo title={`Provider raw data for ${owner}`} url={`https://deploy.cloudmos.io${UrlService.providerDetailRaw(owner)}`} />
 
       <ProviderDetailLayout address={owner} page={ProviderDetailTabs.RAW} refresh={refresh} provider={provider}>
         {provider && <DynamicReactJson src={JSON.parse(JSON.stringify(provider))} collapsed={1} />}

diff --git a/deploy-web/src/pages/providers/index.tsx b/deploy-web/src/pages/providers/index.tsx
@@ -32,6 +32,7 @@ import { useSelectedNetwork } from "@src/utils/networks";
 import dynamic from "next/dynamic";
 import LaunchIcon from "@mui/icons-material/Launch";
 import { CustomNextSeo } from "@src/components/shared/CustomNextSeo";
+import { UrlService } from "@src/utils/urlUtils";
 
 const NetworkCapacity = dynamic(() => import("../../components/providers/NetworkCapacity"), {
   ssr: false
@@ -184,7 +185,11 @@ const ProvidersPage: React.FunctionComponent<Props> = ({}) => {
 
   return (
     <Layout isLoading={isLoadingProviders || isLoadingLeases || isLoadingNetworkCapacity}>
-      <CustomNextSeo title="Providers" url={`https://deploy.cloudmos.io/providers`} description="Explore all the providers available on the Akash Network." />
+      <CustomNextSeo
+        title="Providers"
+        url={`https://deploy.cloudmos.io${UrlService.providers()}`}
+        description="Explore all the providers available on the Akash Network."
+      />
 
       <PageContainer>
         <Typography variant="h1" className={classes.title} sx={{ marginBottom: ".2rem" }}>

diff --git a/deploy-web/src/pages/sdl-builder/index.tsx b/deploy-web/src/pages/sdl-builder/index.tsx
@@ -5,6 +5,7 @@ import PageContainer from "@src/components/shared/PageContainer";
 import { Chip } from "@mui/material";
 import { SimpleSDLBuilderForm } from "@src/components/sdl/SimpleSdlBuilderForm";
 import { CustomNextSeo } from "@src/components/shared/CustomNextSeo";
+import { UrlService } from "@src/utils/urlUtils";
 
 type Props = {};
 
@@ -15,7 +16,7 @@ const SDLBuilderPage: React.FunctionComponent<Props> = ({}) => {
     <Layout>
       <CustomNextSeo
         title="SDL Builder"
-        url="https://deploy.cloudmos.io/sdl-builder"
+        url={`https://deploy.cloudmos.io${UrlService.sdlBuilder()}`}
         description="Build your own SDL configuration to deploy a docker container on the Akash Network, the #1 decentralized supercloud."
       />
 

diff --git a/deploy-web/src/pages/template/[id].tsx b/deploy-web/src/pages/template/[id].tsx
@@ -81,7 +81,7 @@ const TemplatePage: React.FunctionComponent<Props> = ({ id, template }) => {
     <Layout>
       <CustomNextSeo
         title={`${template.title}`}
-        url={`https://deploy.cloudmos.io/template/${id}`}
+        url={`https://deploy.cloudmos.io${UrlService.template(id)}`}
         description={getShortText(template.description || "", 140)}
       />
 

diff --git a/deploy-web/src/pages/templates/[templateId].tsx b/deploy-web/src/pages/templates/[templateId].tsx
@@ -71,7 +71,7 @@ const TemplateDetailPage: React.FunctionComponent<Props> = ({ templateId, templa
     <Layout>
       <CustomNextSeo
         title={`Template detail${_template ? " " + _template?.name : ""}`}
-        url={`https://deploy.cloudmos.io/templates/${templateId}`}
+        url={`https://deploy.cloudmos.io${UrlService.templateDetails(templateId)}`}
         description={getShortText(_template.summary || "", 140)}
       />
 

diff --git a/deploy-web/src/pages/templates/index.tsx b/deploy-web/src/pages/templates/index.tsx
@@ -140,7 +140,7 @@ const TemplateGalleryPage: React.FunctionComponent<Props> = ({}) => {
     <Layout isLoading={isLoadingTemplates}>
       <CustomNextSeo
         title="Template Gallery"
-        url={`https://deploy.cloudmos.io/templates`}
+        url={`https://deploy.cloudmos.io${UrlService.templates()}`}
         description="Explore all the templates made by the community to easily deploy any docker container on the Akash Network."
       />
 

diff --git a/deploy-web/src/pages/terms-of-service/index.tsx b/deploy-web/src/pages/terms-of-service/index.tsx
@@ -4,11 +4,16 @@ import { Box } from "@mui/material";
 import PageContainer from "@src/components/shared/PageContainer";
 import { Title } from "@src/components/shared/Title";
 import { CustomNextSeo } from "@src/components/shared/CustomNextSeo";
+import { UrlService } from "@src/utils/urlUtils";
 
 export function TermsOfService() {
   return (
     <Layout>
-      <CustomNextSeo title="Terms of service" url={`https://deploy.cloudmos.io/terms-of-service`} description="Cloudmos webiste terms of service." />
+      <CustomNextSeo
+        title="Terms of service"
+        url={`https://deploy.cloudmos.io${UrlService.termsOfService()}`}
+        description="Cloudmos webiste terms of service."
+      />
 
       <PageContainer>
         <Box sx={{ marginBottom: "2rem" }}>