feat: make main tiles configurable via deploy-templates

web/src/App.tsx

@@ -24,7 +24,7 @@ const Welcome = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    navigate('/new-deployment');
+    navigate('/landing/node-deployment');
   }, []);
 
   return <></>;
@@ -43,8 +43,8 @@ const AppRouter = () => {
         <SideNav>
           <Routes>
             <Route path="/" element={<Welcome />} />
+            <Route path="landing/node-deployment" element={<DeploymentStepper />}/>
             <Route path="new-deployment">
-              <Route path="" element={<DeploymentStepper />} />
               <Route path=":folderName/" element={<DeploymentStepper />} />
               <Route path=":folderName/:templateId" element={<DeploymentStepper />} />
               <Route path=":folderName/:templateId/:intentId" element={<DeploymentStepper />} />

web/src/pages/FeaturedApps.tsx

@@ -1,13 +1,15 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { Template } from '../components/Template';
 import { Button } from '@mui/material';
 import { css } from '@emotion/react';
-import { templateList } from '../recoil/api/sdl';
+import { fetchTemplateList } from '../recoil/api/sdl';
 import Document from '../assets/images/document.svg';
 import { SdlEditor } from '../components/SdlConfiguration/SdllEditor';
 import { HelpCenterSDL } from '../components/HelpCenter/HelpCenterSDL';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import { useQuery } from 'react-query';
+import { templateIcons } from '../assets/templates';
 
 const DocumentIcon = () => <img src={Document} alt="Document Icon" />;
 
@@ -23,10 +25,16 @@ export default function FeaturedApps(
     callback,
     setFieldValue
   }: FeaturedAppsProps): JSX.Element {
-  const [numberOfTemplates, setNumberOfTemplates] = useState(templateList.length);
+  // initially showing 12 templates on the main page
+  const initialTemplatesToShowPerPage = 12;
+  const [numberOfTemplates, setNumberOfTemplates] = useState(initialTemplatesToShowPerPage);
   const [reviewSdl, showSdlReview] = useState(false);
   const closeReviewModal = useCallback(() => showSdlReview(false), []);
   const [isHelpCenterOpen, setIsHelpCenterOpen] = useState(false);
+  const { data: templateListConfig } = useQuery('templateList', fetchTemplateList, {
+    refetchOnWindowFocus: false,
+    keepPreviousData: true,
+  });
 
   const toggleHelpCenter = useCallback(() => {
     setIsHelpCenterOpen((prevIsOpen) => !prevIsOpen);
@@ -55,23 +63,26 @@ export default function FeaturedApps(
       </FeaturedAppsPageHeader>
       <Divider />
       <FeaturedAppsPageWrapper>
-        {templateList.slice(0, numberOfTemplates).map((template: any) => {
+        {templateListConfig?.tiles?.slice(0, numberOfTemplates).map((template: any) => {
           return <Template
-            key={template.id}
-            id={template.id}
+            key={template.name}
+            id={template.name}
             title={template.title}
             description={template.description}
-            logo={template.logo}
+            // logo={'https://raw.githubusercontent.com/akash-network/deploy-templates/main' + template.logo}
+            logo={templateIcons[template.logoFileNameWithoutExt]}
             onNextButtonClick={() => onDeployNowClick(template.name)}
           />;
         })}
       </FeaturedAppsPageWrapper>
+
+      {/* on clicking view all templates, load all the templates onto the UI */}
       <ViewAllButtonContainer>
-        {templateList.length > numberOfTemplates && (
+        {templateListConfig?.tiles?.length > numberOfTemplates && (
           <ViewAllButton
             fullWidth
             variant="outlined"
-            onClick={() => setNumberOfTemplates(templateList.length)}
+            onClick={() => setNumberOfTemplates(templateListConfig?.tiles?.length)}
           >
             View All Apps
           </ViewAllButton>

web/src/pages/SelectApp.tsx

@@ -10,7 +10,8 @@ import SocialIcon from '../components/Icons/SocialIcon';
 import { isSDLSpec } from '../components/SdlConfiguration/settings';
 import { Template } from '../components/SdlConfiguration/settings';
 import { WalletDeployButtons } from '../components/WalletDeployButton';
-import { fetchSdlList, templateList } from '../recoil/api/sdl';
+import { fetchSdlList, fetchTemplateList } from '../recoil/api/sdl';
+import { templateIcons } from '../assets/templates';
 
 type SocialNetwork = {
   socialNetwork: string,
@@ -36,6 +37,11 @@ export default function SelectApp(props: SelectAppProps): JSX.Element {
     )
   );
 
+  const { data: templateListConfig } = useQuery('templateList', fetchTemplateList, {
+    refetchOnWindowFocus: false,
+    keepPreviousData: true,
+  });
+
   const [social, setSocial] = useState<SocialNetwork[]>([]);
 
   useEffect(() => {
@@ -80,15 +86,15 @@ export default function SelectApp(props: SelectAppProps): JSX.Element {
     }
   };
 
-  const template = templateList.find((template) => template.name === folderName);
+  const template = templateListConfig.tiles.find((template: any) => template.name === folderName);
 
   return (
     <Stack className="items-center">
       <SdlWrapper>
         <SdlIntro>
           {folderName && template && (
             <Avatar
-              src={template.logo}
+              src={templateIcons[template.logoFileNameWithoutExt]}
               alt="Logo"
             />
           )}