Skip to content

Commit

Permalink
Endpoint route fixes (#138)
Browse files Browse the repository at this point in the history
* Fix color scheme for mantine

* Add static paths and props to endpoint routes

* Fix duplicate paths

* Fix duplicate paths
  • Loading branch information
besated authored Sep 19, 2024
1 parent 0cd7584 commit 685780f
Show file tree
Hide file tree
Showing 23 changed files with 2,538 additions and 10,054 deletions.
90 changes: 43 additions & 47 deletions components/APIEndpoint/APIEndpoint.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Code, Flex, Paper, Title, Accordion, Breadcrumbs, Anchor, Text } from '@mantine/core';
import { NextSeo } from 'next-seo';
import { EndpointResponseProperty, EndpointParameter, Endpoint } from './types';
import { StyledSyntaxHighlighter } from '../StyledSyntaxHighlighter';

Expand Down Expand Up @@ -98,7 +97,7 @@ export const APIEndpoint = ({ endpoint }: { endpoint: Endpoint }) => {
const parts = path
.split('/')
.filter((part: string) => !part.startsWith('{') && part !== '')
.map((part: string) => part.replace('-', '').toLowerCase());
.map((part: string) => part.toLowerCase());

const orgName = parts[0];
const moduleName = parts[1];
Expand All @@ -125,59 +124,56 @@ export const APIEndpoint = ({ endpoint }: { endpoint: Endpoint }) => {
);

return (
<>
<NextSeo title={functionName}></NextSeo>
<Flex direction='column' gap='xl'>
<Breadcrumbs mt='md'>
<Anchor href={`/endpoints/cosmos#${orgName}`}>endpoints</Anchor>
<Anchor href={`/endpoints/${orgName}/${moduleName}`}>{moduleName}</Anchor>
</Breadcrumbs>
<Title>{functionName}</Title>
<Flex gap='sm' align='center'>
<Code style={{ minWidth: 'fit-content', height: 'fit-content' }}>{httpMethod.toUpperCase()}</Code>
<Text size='xl' style={{ wordBreak: 'break-all' }}>
{path}
</Text>
</Flex>
<Title order={4}>{details.summary}</Title>
{!!requiredParams && (
<Flex gap='sm' direction='column'>
<Title order={4}>Parameters</Title>
{requiredParams.map(Parameter)}
</Flex>
)}

{optionalParams?.length > 0 && (
<Accordion>
<Accordion.Item value='optional'>
<Accordion.Control>
<Title order={4}>Optional Parameters</Title>
</Accordion.Control>
<Accordion.Panel>
<Flex gap='sm' direction='column' mt='sm'>
{optionalParams.map(Parameter)}
</Flex>
</Accordion.Panel>
</Accordion.Item>
</Accordion>
)}
<Flex direction='column' gap='xl'>
<Breadcrumbs mt='md'>
<Anchor href={`/endpoints/cosmos#${orgName}`}>endpoints</Anchor>
<Anchor href={`/endpoints/cosmos/api/${orgName}/${moduleName}`}>{moduleName}</Anchor>
</Breadcrumbs>
<Title>{functionName}</Title>
<Flex gap='sm' align='center'>
<Code style={{ minWidth: 'fit-content', height: 'fit-content' }}>{httpMethod.toUpperCase()}</Code>
<Text size='xl' style={{ wordBreak: 'break-all' }}>
{path}
</Text>
</Flex>
<Title order={4}>{details.summary}</Title>
{!!requiredParams && (
<Flex gap='sm' direction='column'>
<Title order={4}>Responses</Title>
<Accordion>{Object.entries(details.responses).map(EndpointResponse)}</Accordion>
<Title order={4}>Parameters</Title>
{requiredParams.map(Parameter)}
</Flex>
<Flex gap='sm' direction='column'>
<Title order={4}>Example Usage</Title>
<StyledSyntaxHighlighter language='javascript'>
{`import { getQueryClient } from '@sei-js/cosmjs';
)}

{optionalParams?.length > 0 && (
<Accordion>
<Accordion.Item value='optional'>
<Accordion.Control>
<Title order={4}>Optional Parameters</Title>
</Accordion.Control>
<Accordion.Panel>
<Flex gap='sm' direction='column' mt='sm'>
{optionalParams.map(Parameter)}
</Flex>
</Accordion.Panel>
</Accordion.Item>
</Accordion>
)}
<Flex gap='sm' direction='column'>
<Title order={4}>Responses</Title>
<Accordion>{Object.entries(details.responses).map(EndpointResponse)}</Accordion>
</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>
</Flex>
</StyledSyntaxHighlighter>
</Flex>
</>
</Flex>
);
};
73 changes: 53 additions & 20 deletions components/APIEndpointRoute/APIEndpointRoute.tsx
Original file line number Diff line number Diff line change
@@ -1,44 +1,77 @@
import { APIEndpoint, APIModule } from '../index';
import { useRouter } from 'next/router';
import openapi from '../../data/cosmos-openapi.json';
import { Flex, 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 { filterModuleRoutes } from './utils';
import { APIEndpoint, APIModule } from '../index';
import openapi from '../../data/cosmos-openapi.json';

export const APIEndpointRoute = () => {
const router = useRouter();
const routes = router.query.route as string[];
export const PageTitle = () => {
const { title } = useData();
return <NextSeo title={title} />;
};

if (!routes?.[0]) return null;
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
const routes = Object.keys(openapi.paths).map((p) => {
const route = p.split('/').filter((s) => s);
return route;
});
const paths = routes.flatMap((route) => {
const fullRoute = { params: { route } };
const parentRoute = { params: { route: [route[0], route[1]] } };
return [fullRoute, parentRoute];
});
const uniquePaths = Array.from(new Set(paths.map((path) => JSON.stringify(path)))).map((path) => JSON.parse(path));
return {
paths: uniquePaths,
fallback: false
};
};

const moduleRoutes = filterModuleRoutes(Object.entries(openapi.paths), routes);
export const getStaticProps = async ({ params }) => {
const { route } = params;
const title = `Cosmos API - ${route.join('/')}`;
return {
props: {
ssg: {
route,
title
}
}
};
};

const APIEndpointRoute = () => {
const data = useData();
if (!data?.route?.length) {
return null;
}

const { route } = data;
const moduleRoutes = filterModuleRoutes(Object.entries(openapi.paths), route);
const splitRoutes = moduleRoutes?.[0]?.[0].split('/');
const SEO_TITLE = `Cosmos API - ${splitRoutes?.[2]} - Sei Docs`;

if (routes.length === 2) {
if (route.length === 2) {
return (
<Flex direction={'column'} gap='md'>
<NextSeo title={SEO_TITLE}></NextSeo>

<Link href={`/endpoints/cosmos#${splitRoutes[1]}`}>
<Button>Back</Button>
</Link>

<Title order={1} mb='xl'>
{routes.join('/')}
{route.join('/')}
</Title>
<APIModule prefix={routes.join('/')} basePaths={moduleRoutes.map((route) => route[0])} />
<APIModule prefix={route.join('/')} basePaths={moduleRoutes.map((route) => route[0])} />
</Flex>
);
}

return (
<>
<NextSeo title={SEO_TITLE}></NextSeo>
<APIEndpoint endpoint={moduleRoutes[0]} />
</>
);
return <APIEndpoint endpoint={moduleRoutes[0]} />;
};

export default APIEndpointRoute;
2 changes: 1 addition & 1 deletion components/APIEndpointRoute/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from './APIEndpointRoute';
export { default as APIEndpointRoute } from './APIEndpointRoute';
2 changes: 1 addition & 1 deletion components/APIModule/APIModule.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ import { Card } from 'nextra/components';

export const APIModule = ({ basePaths, prefix }: { basePaths: any[]; prefix: string }) => {
return Object.values(basePaths).map((path) => {
return <Card children={null} icon={null} key={path} title={path.replace(`/${prefix}`, '')} href={`/endpoints${path}`} />;
return <Card children={null} icon={null} key={path} title={path.replace(`/${prefix}`, '')} href={`/endpoints/cosmos/api${path}`} />;
});
};
2 changes: 1 addition & 1 deletion components/APIModulePaths/APIModulePaths.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export const APIModulePaths = ({ basePaths, prefix }: { basePaths: any[]; prefix
return (
<Cards>
{Object.values(basePaths).map((path) => {
return <Card key={path} title={path} href={`/endpoints/${prefix}/${path}`} icon={null} children={null} />;
return <Card key={path} title={path} href={`/endpoints/cosmos/api/${prefix}/${path}`} icon={null} children={null} />;
})}
</Cards>
);
Expand Down
109 changes: 50 additions & 59 deletions components/EvmWalletConnect/EvmWalletConnect.tsx
Original file line number Diff line number Diff line change
@@ -1,68 +1,59 @@
// components/EvmWalletConnect/EvmWalletConnect.tsx
import {
connectorsForWallets,
RainbowKitProvider,
} from "@rainbow-me/rainbowkit";
import { injectedWallet, metaMaskWallet } from "@rainbow-me/rainbowkit/wallets";
import { Chain, configureChains, createConfig, WagmiConfig } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import "@rainbow-me/rainbowkit/styles.css";
import { ChainRpcUrls } from "viem/_types/types/chain";
import { connectorsForWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { injectedWallet, metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
import { Chain, configureChains, createConfig, WagmiConfig } from 'wagmi';
import { publicProvider } from 'wagmi/providers/public';
import '@rainbow-me/rainbowkit/styles.css';
import { ChainRpcUrls } from 'viem/_types/types/chain';
import CustomConnectButton from './CustomConnectButton';

export default function EvmWalletConnect() {
const rpcUrl: ChainRpcUrls = {
http: ["https://evm-rpc.sei-apis.com"],
webSocket: ["wss://evm-ws.sei-apis.com"],
};
const sei: Chain = {
id: 1329,
name: "Sei Network",
network: "Sei",
nativeCurrency: {
decimals: 18,
name: "Sei",
symbol: "SEI",
},
rpcUrls: {
public: rpcUrl,
default: rpcUrl,
},
testnet: true,
blockExplorers: {
default: { name: "Seitrace", url: "https://seitrace.com" },
},
};
const rpcUrl: ChainRpcUrls = {
http: ['https://evm-rpc.sei-apis.com'],
webSocket: ['wss://evm-ws.sei-apis.com']
};
const sei: Chain = {
id: 1329,
name: 'Sei Network',
network: 'Sei',
nativeCurrency: {
decimals: 18,
name: 'Sei',
symbol: 'SEI'
},
rpcUrls: {
public: rpcUrl,
default: rpcUrl
},
testnet: true,
blockExplorers: {
default: { name: 'Seitrace', url: 'https://seitrace.com' }
}
};

const { chains, publicClient } = configureChains(
[sei],
[publicProvider()]
);
const { chains, publicClient } = configureChains([sei], [publicProvider()]);

const projectId = "385413c214cb74213e0679bc30dd4e4c";
const connectors = connectorsForWallets([
{
groupName: "Recommended",
wallets: [
injectedWallet({ chains }),
metaMaskWallet({ projectId, chains }),
],
},
]);
const projectId = '385413c214cb74213e0679bc30dd4e4c';
const connectors = connectorsForWallets([
{
groupName: 'Recommended',
wallets: [injectedWallet({ chains }), metaMaskWallet({ projectId, chains })]
}
]);

const wagmiConfig = createConfig({
autoConnect: false,
connectors,
publicClient,
});
const wagmiConfig = createConfig({
autoConnect: false,
connectors,
publicClient
});

return (
<div className="my-4 flex justify-center">
<WagmiConfig config={wagmiConfig}>
<RainbowKitProvider chains={chains}>
<CustomConnectButton />
</RainbowKitProvider>
</WagmiConfig>
</div>
);
return (
<div className='my-4 flex justify-center'>
<WagmiConfig config={wagmiConfig}>
<RainbowKitProvider chains={chains}>
<CustomConnectButton />
</RainbowKitProvider>
</WagmiConfig>
</div>
);
}
28 changes: 0 additions & 28 deletions components/MantineWrapper.tsx

This file was deleted.

Loading

0 comments on commit 685780f

Please sign in to comment.