Clean up unused packages

.nvmrc

@@ -1 +1 @@
-v18.18.0
+v20.17.0

components/APIEndpoint/APIEndpoint.tsx

@@ -1,6 +1,6 @@
 import { Code, Flex, Paper, Title, Accordion, Breadcrumbs, Anchor, Text } from '@mantine/core';
+import { CodeHighlight } from '@mantine/code-highlight';
 import { EndpointResponseProperty, EndpointParameter, Endpoint } from './types';
-import { StyledSyntaxHighlighter } from '../StyledSyntaxHighlighter';
 
 const renderProperties = (properties: EndpointResponseProperty) => {
 	return Object.entries(properties).map(([key, value]) => (
@@ -123,6 +123,15 @@ export const APIEndpoint = ({ endpoint }: { endpoint: Endpoint }) => {
 			.reduce((acc, curr) => ({ ...acc, [curr]: '' }), {})
 	);
 
+	const exampleCode = `
+import { getQueryClient } from '@sei-js/cosmjs';
+
+const queryClient = await getQueryClient("YOUR_RPC_URL");
+const { ${routeNames.functionName} } = queryClient.${orgName}.${moduleName}.${version};
+
+const params: ${requestType} = ${paramsString};
+const response: ${responseType} = await ${routeNames.functionName}(params);`;
+
 	return (
 		<Flex direction='column' gap='xl'>
 			<Breadcrumbs mt='md'>
@@ -164,15 +173,7 @@ export const APIEndpoint = ({ endpoint }: { endpoint: Endpoint }) => {
 			</Flex>
 			<Flex gap='sm' direction='column'>
 				<Title order={4}>Example Usage</Title>
-				<StyledSyntaxHighlighter language='javascript'>
-					{`import { getQueryClient } from '@sei-js/cosmjs';
-
-const queryClient = await getQueryClient("YOUR_RPC_URL");
-const { ${routeNames.functionName} } = queryClient.${orgName}.${moduleName}.${version};
-
-const params: ${requestType} = ${paramsString};
-const response: ${responseType} = await ${routeNames.functionName}(params);`}
-				</StyledSyntaxHighlighter>
+				<CodeHighlight language='js' code={exampleCode} />
 			</Flex>
 		</Flex>
 	);

components/APIEndpointRoute/APIEndpointRoute.tsx

@@ -1,22 +1,30 @@
-import { Flex, Title } from '@mantine/core';
+import { Box, Flex, Loader, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { Button } from 'nextra/components';
 import Link from 'next/link';
 import { NextSeo } from 'next-seo';
 import { useData } from 'nextra/data';
+import { isEqual } from 'underscore';
 import { filterModuleRoutes } from './utils';
 import { APIEndpoint, APIModule } from '../index';
 import openapi from '../../data/cosmos-openapi.json';
+import { useRouter } from 'next/router';
 
 export const PageTitle = () => {
-	const { title } = useData();
+	const router = useRouter();
+	// Check if the page is still loading
+	if (router.isFallback) {
+		return null;
+	}
+	const data = useData();
+	const title = data?.title || 'API Route Not Found';
 	return <NextSeo title={title} />;
 };
 
-export const getStaticPaths = () => {
-	// Generate static paths for both the full routes and parent routes
-	// i.e. for /cosmos/bank/v1beta1/supply, we want the routes:
-	// 1. cosmos/bank/v1beta1/supply
-	// 2. cosmos/bank
+// Generate static paths for both the full routes and parent routes
+// i.e. for /cosmos/bank/v1beta1/supply, we want the routes:
+// 1. cosmos/bank/v1beta1/supply
+// 2. cosmos/bank
+const getPaths = () => {
 	const routes = Object.keys(openapi.paths).map((p) => {
 		const route = p.split('/').filter((s) => s);
 		return route;
@@ -27,29 +35,57 @@ export const getStaticPaths = () => {
 		return [fullRoute, parentRoute];
 	});
 	const uniquePaths = Array.from(new Set(paths.map((path) => JSON.stringify(path)))).map((path) => JSON.parse(path));
+	return uniquePaths;
+};
+
+export const getStaticPaths = () => {
+	// Return empty path array here and just get static props on demand
 	return {
-		paths: uniquePaths,
-		fallback: false
+		paths: [],
+		fallback: true
 	};
 };
 
 export const getStaticProps = async ({ params }) => {
 	const { route } = params;
-	const title = `Cosmos API - ${route.join('/')}`;
-	return {
-		props: {
-			ssg: {
-				route,
-				title
+	const paths = getPaths();
+	if (paths.some((p) => isEqual(p.params.route, route))) {
+		const title = `Cosmos API - ${route.join('/')}`;
+		return {
+			props: {
+				ssg: {
+					route,
+					title
+				}
 			}
-		}
+		};
+	}
+	return {
+		notFound: true
 	};
 };
 
 const APIEndpointRoute = () => {
+	const router = useRouter();
+	// Check if the page is still loading
+	if (router.isFallback) {
+		return (
+			<Box>
+				<Skeleton h={16} w={200} mb='xl' />
+				<Skeleton h={32} w={128} mb='xl' />
+				<Skeleton h={24} />
+			</Box>
+		);
+	}
+
 	const data = useData();
 	if (!data?.route?.length) {
-		return null;
+		return (
+			<Box>
+				<Title mb='md'>API Route Not Found</Title>
+				<Text>The API route you were looking for could not be found.</Text>
+			</Box>
+		);
 	}
 
 	const { route } = data;

components/PropertyInfo/index.tsx → components/PropertyInfo/PropertyInfo.tsx

@@ -6,7 +6,7 @@ type PropertyInfoProps = {
 	properties?: { name: string; description: string }[];
 };
 
-export const PropertyInfo = ({ name, description, properties }: PropertyInfoProps) => {
+const PropertyInfo = ({ name, description, properties }: PropertyInfoProps) => {
 	return (
 		<Flex direction='column' mt='md'>
 			<Text style={{ fontSize: '14pt', fontWeight: 600 }}>{name}</Text>
@@ -28,3 +28,5 @@ export const PropertyInfo = ({ name, description, properties }: PropertyInfoProp
 		</Flex>
 	);
 };
+
+export default PropertyInfo;

components/PropertyInfo/index.ts

@@ -0,0 +1 @@
+export { default as PropertyInfo } from './PropertyInfo';

components/index.ts

@@ -13,4 +13,5 @@ export * from './Logo';
 export * from './MantineWrapper';
 export * from './Nfts';
 export * from './VersionFetcher';
+export * from './PropertyInfo';
 export * from './EcosystemMap';

package.json

@@ -11,28 +11,18 @@
 	},
 	"license": "MIT",
 	"dependencies": {
+		"@mantine/code-highlight": "^7.12.2",
 		"@mantine/core": "^7.10.1",
 		"@mantine/hooks": "^7.10.1",
-		"@mdx-js/loader": "^3.0.1",
-		"@next/mdx": "^14.2.3",
 		"@rainbow-me/rainbowkit": "^1.3.3",
-		"@sei-js/cosmjs": "^1.0.7",
-		"@sei-js/evm": "^1.1.1",
 		"@sei-js/registry": "^1.0.1",
-		"@tabler/icons-react": "^3.5.0",
-		"@types/react-syntax-highlighter": "^15.5.13",
-		"@types/styled-components": "^5.1.34",
 		"lucide-react": "^0.314.0",
 		"next": "13.0.6",
-		"next-compose-plugins": "^2.2.1",
 		"next-seo": "^6.5.0",
 		"nextra": "^2.13.4",
 		"nextra-theme-docs": "^2.13.4",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-icons": "^5.2.1",
-		"react-syntax-highlighter": "^15.5.0",
-		"sharp": "^0.33.5",
 		"styled-components": "^6.1.11",
 		"tailwind-merge": "^2.2.1",
 		"underscore": "^1.13.6",
@@ -41,6 +31,10 @@
 	},
 	"devDependencies": {
 		"@types/node": "18.11.10",
+		"@types/react": "^18.2.0",
+		"@types/react-dom": "^18.2.0",
+		"@types/styled-components": "^5.1.34",
+		"@types/underscore": "^1.11.15",
 		"autoprefixer": "^10.4.17",
 		"postcss": "^8.4.38",
 		"postcss-preset-mantine": "^1.15.0",

pages/_app.mdx

@@ -1,9 +1,10 @@
+import '@rainbow-me/rainbowkit/styles.css';
+import '@mantine/core/styles.css';
+import '@mantine/code-highlight/styles.css';
 import '../styles/globals.css';
 import '../styles/custom.css';
-import '@rainbow-me/rainbowkit/styles.css';
 import { ThemeProvider } from 'next-themes';
-import '@mantine/core/styles.css';
-import { MantineWrapper } from '../components/MantineWrapper';
+import { MantineWrapper } from '../components';
 
 export default function Nextra({ Component, pageProps }) {
 	return (

pages/dev-smart-contracts.mdx

@@ -1,6 +1,5 @@
 import { Blockquote, List, Paper, Text, Title } from '@mantine/core';
-import { IconInfoCircle } from '@tabler/icons-react';
-import { Callout } from 'nextra/components'
+import { Callout } from 'nextra/components';
 
 # Smart Contracts
 
@@ -43,7 +42,6 @@ The EVM is a decentralized computation engine that allows the execution of smart
 - Developers with a background in Ethereum development.
 - Applications benefiting from Ethereum’s mature tooling and ecosystem.
 
-
 The EVM is a decentralized computation engine that allows the execution of smart contracts on Ethereum and EVM-compatible blockchains. EVM contracts are typically written in Solidity, a language designed for Ethereum.
 
 - **MetaMask**: Popular Ethereum wallet.
@@ -58,6 +56,7 @@ The EVM is a decentralized computation engine that allows the execution of smart
   - [Wagmi Documentation](https://wagmi.sh/)
 - **Viem**: A lightweight and flexible library for Ethereum development.
   - [Viem Documentation](https://viem.sh/)
+
 </Paper>
 
 ### CosmWasm
@@ -96,6 +95,7 @@ CosmWasm is a smart contract platform built for the Cosmos ecosystem, enabling c
 - **[CosmosKit](https://github.com/cosmology-tech/cosmos-kit)**: Library for connecting to Cosmos wallets.
 - **[@sei-js](https://github.com/sei-protocol/sei-js)**: Typescript library for interacting with Sei.
 - **[CosmJS](https://cosmos.github.io/cosmjs/)**: JavaScript library for interacting with Cosmos blockchains.
+
 </Paper>
 
 <Callout type="info" emoji="ℹ️">
@@ -104,6 +104,7 @@ CosmWasm is a smart contract platform built for the Cosmos ecosystem, enabling c
 
 - **EVM Precompile Contracts**: Precompiles are smart contracts pre-bundled into the chain. Sei has many precompiles to enable EVM dApps and contracts to access native Cosmos functions, such as staking and executing CosmWasm contracts.
 - **Pointer Contracts**: These contracts act as intermediaries, enabling calls between EVM and CosmWasm contracts. This allows developers to leverage the strengths of both environments and create more versatile dApps.
+
 </Callout>
 
 ## Best Practices

pages/dev-transactions.mdx

@@ -1,9 +1,7 @@
 import { Flex, Paper } from '@mantine/core';
 import { Tabs } from 'nextra/components';
-import { PropertyInfo } from '../components/PropertyInfo';
-import { atomOneDark, atomOneLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { StyledSyntaxHighlighter } from '../components/StyledSyntaxHighlighter';
+import { CodeHighlight } from '@mantine/code-highlight';
+import { PropertyInfo } from '../components';
 
 # Transactions
 
@@ -19,8 +17,9 @@ Cosmos transactions are used for interacting with Cosmos based RPC's and tooling
 
 <Tabs items={['JSON Example', 'Properties']}>
 	<Tabs.Tab>
-		<StyledSyntaxHighlighter language='json'>
-			{`
+		<CodeHighlight
+			language='json'
+			code={`
 {
       "body": {
         "messages": [
@@ -64,9 +63,8 @@ Cosmos transactions are used for interacting with Cosmos based RPC's and tooling
         }
       },
       "signatures": ["SIGNER_SIGNATURE_VALUE"]
-    }
-				`}
-		</StyledSyntaxHighlighter>
+}`}
+		/>
 	</Tabs.Tab>
 	<Tabs.Tab>
 		<Flex direction='column' gap='md'>
@@ -111,27 +109,27 @@ The Sei blockchain supports Ethereum Virtual Machine (EVM) transactions, allowin
 
 <Tabs items={['JSON Example', 'Properties']}>
 	<Tabs.Tab>
-		<StyledSyntaxHighlighter language='json'>
-			{`
-					{
+		<CodeHighlight
+			language='json'
+			code={`
+{
 	id: 2,
 	jsonrpc: '2.0',
 	method: 'account_signTransaction',
 	params: [
-{
-	from: '0x1923f626bb8dc025849e00f99c25fe2b2f7fb0db',
-	gas: '0x55555',
-	maxFeePerGas: '0x1234',
-	maxPriorityFeePerGas: '0x1234',
-	input: '0xabcd',
-	nonce: '0x0',
-	to: '0x07a565b7ed7d7a678680a4c162885bedbb695fe0',
-	value: '0x1234'
-}
+		{
+			from: '0x1923f626bb8dc025849e00f99c25fe2b2f7fb0db',
+			gas: '0x55555',
+			maxFeePerGas: '0x1234',
+			maxPriorityFeePerGas: '0x1234',
+			input: '0xabcd',
+			nonce: '0x0',
+			to: '0x07a565b7ed7d7a678680a4c162885bedbb695fe0',
+			value: '0x1234'
+		}
 	]
-}
-					`}
-		</StyledSyntaxHighlighter>
+}`}
+		/>
 	</Tabs.Tab>
 	<Tabs.Tab>
 		<Paper withBorder p='md' mt='lg'>