konnosDashboard
RpcContent.tsx106 lines · main
1import { useParams } from 'common'
2
3import { DocSection } from './DocSection'
4import CodeSnippet from '@/components/interfaces/Docs/CodeSnippet'
5import Description from '@/components/interfaces/Docs/Description'
6import Param from '@/components/interfaces/Docs/Param'
7import Snippets from '@/components/interfaces/Docs/Snippets'
8import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
9import { ProjectJsonSchemaPaths } from '@/data/docs/project-json-schema-query'
10
11/**
12 * TODO: need to support rpc with the same name and different params type
13 */
14
15interface RpcContentProps {
16 rpcId: string
17 rpcs: { [key: string]: any }
18 paths?: ProjectJsonSchemaPaths
19 selectedLang: 'bash' | 'js'
20 showApiKey: string
21 refreshDocs: () => void
22}
23
24export const RpcContent = ({
25 rpcId,
26 rpcs,
27 paths,
28 selectedLang,
29 showApiKey,
30 refreshDocs,
31}: RpcContentProps) => {
32 const { ref: projectRef } = useParams()
33 const { data: settings } = useProjectSettingsV2Query({ projectRef })
34 const protocol = settings?.app_config?.protocol ?? 'https'
35 const hostEndpoint = settings?.app_config?.endpoint ?? ''
36 const endpoint = `${protocol}://${hostEndpoint ?? ''}`
37
38 const meta = rpcs[rpcId]
39 const pathKey = `/rpc/${rpcId}`
40 const path = paths && pathKey in paths ? paths[pathKey] : undefined
41 const keyToShow = !!showApiKey ? showApiKey : 'BRIVEN_KEY'
42
43 const { parameters, summary } = path?.post || {}
44 const rpcParamsObject =
45 parameters && parameters[0] && parameters[0].schema && (parameters[0].schema as any).properties
46 ? (parameters[0].schema as any).properties
47 : {}
48 const rpcParams = Object.entries(rpcParamsObject)
49 .map(([k, v]: any) => ({ name: k, ...v }))
50 .filter((x) => !!x.name)
51
52 if (!path) return null
53
54 return (
55 <div className="flex flex-col flex-1">
56 <DocSection
57 title={meta.id}
58 content={
59 <>
60 <label className="font-mono text-xs uppercase text-foreground-lighter inline-block mb-2">
61 Description
62 </label>
63 <Description content={summary ?? ''} metadata={{ rpc: rpcId }} onChange={refreshDocs} />
64 </>
65 }
66 snippets={
67 <CodeSnippet
68 selectedLang={selectedLang}
69 snippet={Snippets.rpcSingle({
70 rpcName: rpcId,
71 // @ts-ignore
72 rpcCamelCase: meta.camelCase,
73 rpcParams: rpcParams,
74 apiKey: keyToShow,
75 endpoint: endpoint,
76 })}
77 />
78 }
79 />
80
81 {rpcParams.length > 0 && (
82 <div className="flex flex-col flex-1">
83 <DocSection title="Function Arguments" content={null} />
84 {rpcParams.map((x, i) => {
85 return (
86 <DocSection
87 key={i}
88 title={null}
89 content={
90 <Param
91 key={x.name}
92 name={x.name}
93 type={x.type}
94 format={x.format}
95 required={true}
96 description={false}
97 />
98 }
99 />
100 )
101 })}
102 </div>
103 )}
104 </div>
105 )
106}