Update headers

components/Navigation.tsx

@@ -30,12 +30,6 @@ import PanelBox from "./PanelBox";
 import { templateFileIds } from "../state/constants";
 import { styled } from "../stitches.config";
 
-import Starter from "../components/icons/Starter";
-import Firewall from "../components/icons/Firewall";
-import Notary from "../components/icons/Notary";
-import Carbon from "../components/icons/Carbon";
-import Peggy from "../components/icons/Peggy";
-
 const ImageWrapper = styled(Flex, {
   position: "relative",
   mt: "$2",
@@ -301,66 +295,18 @@ const Navigation = () => {
                         },
                       }}
                     >
-                      <PanelBox
+                      {Object.values(templateFileIds).map((template) => (
-                        as="a"
+                        <PanelBox
-                        href={`/develop/${templateFileIds.starter}`}
+                          key={template.id}
-                      >
+                          as="a"
-                        <ImageWrapper>
+                          href={`/develop/${template.id}`}
-                          <Starter />
+                        >
-                        </ImageWrapper>
+                          <ImageWrapper>{template.icon()}</ImageWrapper>
-                        <Heading>Starter</Heading>
+                          <Heading>{template.name}</Heading>
 
-                        <Text>
+                          <Text>{template.description}</Text>
-                          Just a basic starter with essential imports, just
+                        </PanelBox>
-                          accepts any transaction coming through
+                      ))}
-                        </Text>
-                      </PanelBox>
-
-                      <PanelBox
-                        as="a"
-                        href={`/develop/${templateFileIds.firewall}`}
-                        css={{ alignItems: "flex-start" }}
-                      >
-                        <ImageWrapper>
-                          <Firewall />
-                        </ImageWrapper>
-                        <Heading>Firewall</Heading>
-                        <Text>
-                          This Hook essentially checks a blacklist of accounts
-                        </Text>
-                      </PanelBox>
-                      <PanelBox
-                        as="a"
-                        href={`/develop/${templateFileIds.notary}`}
-                      >
-                        <ImageWrapper>
-                          <Notary />
-                        </ImageWrapper>
-                        <Heading>Notary</Heading>
-                        <Text>
-                          Collecting signatures for multi-sign transactions
-                        </Text>
-                      </PanelBox>
-                      <PanelBox
-                        as="a"
-                        href={`/develop/${templateFileIds.carbon}`}
-                      >
-                        <ImageWrapper>
-                          <Carbon />
-                        </ImageWrapper>
-                        <Heading>Carbon</Heading>
-                        <Text>Send a percentage of sum to an address</Text>
-                      </PanelBox>
-                      <PanelBox
-                        as="a"
-                        href={`/develop/${templateFileIds.peggy}`}
-                      >
-                        <ImageWrapper>
-                          <Peggy />
-                        </ImageWrapper>
-                        <Heading>Peggy</Heading>
-                        <Text>An oracle based stable coin hook</Text>
-                      </PanelBox>
                     </Flex>
                   </Flex>
                   <DialogClose asChild>

state/actions/fetchFiles.ts

@@ -19,7 +19,7 @@ export const fetchFiles = (gistId: string) => {
     octokit
       .request("GET /gists/{gist_id}", { gist_id: gistId })
       .then(async res => {
-        if (!Object.values(templateFileIds).includes(gistId)) {
+        if (!Object.values(templateFileIds).map(v => v.id).includes(gistId)) {
           return res
         }
         // in case of templates, fetch header file(s) and append to res

state/constants/templates.ts

@@ -1,20 +1,41 @@
-// export const templateFileIds = {
+import Carbon from "../../components/icons/Carbon";
-//     'starter': '1d14e51e2e02dc0a508cb0733767a914', // TODO currently same as accept
+import Firewall from "../../components/icons/Firewall";
-//     'firewall': 'bcd6d0c0fcbe52545ddb802481ff9d26',
+import Notary from "../../components/icons/Notary";
-//     'notary': 'a789c75f591eeab7932fd702ed8cf9ea',
+import Peggy from "../../components/icons/Peggy";
-//     'carbon': '43925143fa19735d8c6505c34d3a6a47',
+import Starter from "../../components/icons/Starter";
-//     'peggy': 'ceaf352e2a65741341033ab7ef05c448',
-//     'headers': '9b448e8a55fab11ef5d1274cb59f9cf3'
-// }
 
 export const templateFileIds = {
-    'starter': '1f7d2963d9e342ea092286115274f3e3',
+    'starter': {
-    'firewall': '70edec690f0de4dd315fad1f4f996d8c',
+        id: '9106f1fe60482d90475bfe8f1315affe',
-    'notary': '3d5677768fe8a54c4f6317e185d9ba66',
+        name: 'Starter',
-    'carbon': 'a9fbcaf1b816b198c7fc0f62962bebf2',
+        description: 'Just a basic starter with essential imports, just accepts any transaction coming through',
-    'doubler': '56b86174aeb70b2b48eee962bad3e355',
+        icon: Starter
-    'peggy': 'd21298a37e1550b781682014762a567b',
+
-    'headers': '55f639bce59a49c58c45e663776b5138'
+    },
+    'firewall': {
+        id: '741816f53eddac862ef1ba400e1b9b84',
+        name: 'Firewall',
+        description: 'This Hook essentially checks a blacklist of accounts',
+        icon: Firewall
+    },
+    'notary': {
+        id: '0dfe12adb0aa75cff24c3c19497fb95a',
+        name: 'Notary',
+        description: 'Collecting signatures for multi-sign transactions',
+        icon: Notary
+    },
+    'carbon': {
+        id: '5941c19dce3e147948f564e224553c02',
+        name: 'Carbon',
+        description: 'Send a percentage of sum to an address',
+        icon: Carbon
+    },
+    'peggy': {
+        id: '52e61c02e777c44c913808981a4ca61f',
+        name: 'Peggy',
+        description: 'An oracle based stable coin hook',
+        icon: Peggy
+    },
 }
 
-export const apiHeaderFiles = ['hookapi.h', 'sfcodes.h', 'hookmacro.h']
+export const apiHeaderFiles = ['hookapi.h', 'sfcodes.h', 'macro.h', 'extern.h', 'error.h'];