diff --git a/packages/website/src/features/Docs/DocsCannonfilesPage.tsx b/packages/website/src/features/Docs/DocsCannonfilesPage.tsx
index 35924fc0c..173924c36 100644
--- a/packages/website/src/features/Docs/DocsCannonfilesPage.tsx
+++ b/packages/website/src/features/Docs/DocsCannonfilesPage.tsx
@@ -214,19 +214,23 @@ const CustomTable: React.FC<{
);
-export const DocsCannonfilesPage: FC = () => {
+const DocsCannonfilesPage: FC = () => {
const isSmall = useBreakpointValue({
base: true,
sm: true,
md: false,
});
- const cannonfileSpecs = useCannonfileSpecs();
+ const { isLoading, data: cannonfileSpecs, error } = useCannonfileSpecs();
- if (!cannonfileSpecs) {
+ if (isLoading) {
return ;
}
+ if (!cannonfileSpecs) {
+ return Error: {error?.message};
+ }
+
return (
@@ -789,3 +793,5 @@ export const DocsCannonfilesPage: FC = () => {
);
};
+
+export default DocsCannonfilesPage;
diff --git a/packages/website/src/features/Docs/DocsCliPage.tsx b/packages/website/src/features/Docs/DocsCliPage.tsx
index 68591f029..614311450 100644
--- a/packages/website/src/features/Docs/DocsCliPage.tsx
+++ b/packages/website/src/features/Docs/DocsCliPage.tsx
@@ -29,29 +29,15 @@ import {
Tr,
useBreakpointValue,
} from '@chakra-ui/react';
-import commandsConfig from '@usecannon/cli/dist/src/commands/config';
import React, { FC } from 'react';
import { FaYarn } from 'react-icons/fa';
import { ImNpm } from 'react-icons/im';
import { SiPnpm } from 'react-icons/si';
+import { useCommandsConfig } from '@/hooks/useCommandsConfig';
+import { CustomSpinner } from '@/components/CustomSpinner';
const basicCommands = ['run', 'build', 'verify', 'publish'];
-const commandsData: any[] = [];
-
-const collectCommandsData = (config: any, parentName?: string) => {
- Object.entries(config).forEach(([k, v]) => {
- const name = parentName ? `${parentName} ${k}` : k;
- if ((v as any).commands) {
- collectCommandsData((v as any).commands, name);
- } else {
- commandsData.push({ ...(v as any), name });
- }
- });
-};
-
-collectCommandsData(commandsConfig);
-
interface CustomLinkProps {
href: string;
children: React.ReactNode;
@@ -319,13 +305,23 @@ const renderCommandConfig = (commandConfig: any) => {
);
};
-export const DocsCliPage: FC = () => {
+const DocsCliPage: FC = () => {
+ const { commandsData, isLoading, error } = useCommandsConfig();
+
const isSmall = useBreakpointValue({
base: true,
sm: true,
md: false,
});
+ if (isLoading) {
+ return ;
+ }
+
+ if (error) {
+ return Error: {error.message};
+ }
+
return (
@@ -504,3 +500,5 @@ export const DocsCliPage: FC = () => {
);
};
+
+export default DocsCliPage;
diff --git a/packages/website/src/features/Docs/DocsLandingPage.tsx b/packages/website/src/features/Docs/DocsLandingPage.tsx
index 0ebbdf853..254156f7d 100644
--- a/packages/website/src/features/Docs/DocsLandingPage.tsx
+++ b/packages/website/src/features/Docs/DocsLandingPage.tsx
@@ -43,7 +43,7 @@ const linkStyle = {
_hover: { borderBottomColor: 'gray.400' },
};
-export const DocsLandingPage = () => {
+const DocsLandingPage = () => {
const isLargeScreen = useBreakpointValue({ base: false, md: true });
return (
@@ -304,3 +304,5 @@ export const DocsLandingPage = () => {
);
};
+
+export default DocsLandingPage;
diff --git a/packages/website/src/hooks/cannonfileSpecs.ts b/packages/website/src/hooks/cannonfileSpecs.ts
index 0c5163fd6..978405ffc 100644
--- a/packages/website/src/hooks/cannonfileSpecs.ts
+++ b/packages/website/src/hooks/cannonfileSpecs.ts
@@ -1,7 +1,7 @@
import { chainDefinitionSchema } from '@usecannon/builder/dist/src/schemas';
import { runSchema } from '@usecannon/cli/dist/src/schemas';
import { compile } from 'json-schema-to-typescript';
-import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
import { zodToJsonSchema } from 'zod-to-json-schema';
interface CannonfileSpec {
@@ -59,74 +59,71 @@ const getJsonSchemaPropType = async (prop: any) => {
return result.replace('export interface Type ', '').replace('export type Type = ', '');
};
-export function useCannonfileSpecs() {
- const [cannonfileSpecs, setCannonfileSpecs] = useState