Refactor GenericMethod params and WalletMethod components

components/GenericMethod/GenericMethod.tsx

@@ -24,8 +24,7 @@ export type GenericMethodProps = {
   network: string;
   cu: number;
   description: string;
-  url?: string;
-  url1?: string;
+  url?: string | string[];
   useCases: string[];
   constraints: string[];
   responseJSON: string;
@@ -67,7 +66,6 @@ export default function GenericMethod({
   cu,
   description,
   url,
-  url1,
   useCases,
   constraints,
   codeSnippets,
@@ -86,7 +84,7 @@ export default function GenericMethod({
   isRESTApi,
 }: GenericMethodProps) {
   const [snippet, setSnippet] = React.useState<CodeSnippetObject["language"]>(
-    codeSnippets?.[0]?.language || null
+    codeSnippets?.[0]?.language || null,
   );
 
   const snippetCode = React.useMemo(() => {
@@ -101,7 +99,7 @@ export default function GenericMethod({
     ) {
       return codeSnippetString.replaceAll(
         replaceCodeSnippetsURLFrom,
-        replaceCodeSnippetsURLTo
+        replaceCodeSnippetsURLTo,
       );
     }
     return codeSnippetString;
@@ -143,16 +141,13 @@ export default function GenericMethod({
               {description}
             </Text>
           </Group>
-          <Group justify="start">
-            <Text size="sm" color="gray">
-              {url}
-            </Text>
-          </Group>
-          <Group justify="start">
-            <Text size="sm" color="gray">
-              {url1}
-            </Text>
-          </Group>
+          {(Array.isArray(url) ? url : [url]).map((item, idx) => (
+            <Group justify="start" key={idx}>
+              <Text size="sm" color="gray">
+                {item}
+              </Text>
+            </Group>
+          ))}
         </Grid.Col>
 
         <Grid.Col span={12}>
@@ -197,24 +192,16 @@ export default function GenericMethod({
         </Grid.Col>
 
         {isRESTApi && (
-  <Grid.Col span={12}>
-    <PathParams
-      pathParams={pathParams}
-      pathParamsType={pathParamsType}
-      isRESTApi={isRESTApi}
-    />
-  </Grid.Col>
-)}
+          <Grid.Col span={12}>
+            <PathParams params={pathParams} paramsType={pathParamsType} />
+          </Grid.Col>
+        )}
 
         {isRESTApi && (
-  <Grid.Col span={12}>
-    <QueryParams
-      queryParams={queryParams}
-      queryParamsType={queryParamsType}
-      isRESTApi={isRESTApi}
-    />
-  </Grid.Col>
-)}
+          <Grid.Col span={12}>
+            <QueryParams params={queryParams} paramsType={queryParamsType} />
+          </Grid.Col>
+        )}
 
         <Grid.Col span={12}>
           <RequestParams

components/GenericMethod/params/Params.tsx

@@ -0,0 +1,56 @@
+import { Grid } from "@mantine/core";
+import classes from "./Params.module.css";
+import { ParamsList } from "./ParamsList";
+import { TParamType } from "../types";
+import { getParamsType } from "../getParamsType";
+import { Text } from "../../Text";
+import { ReqResParam } from "./types";
+
+export type Props = {
+  paramsType: TParamType;
+  params: ReqResParam[] | null;
+  title: string;
+};
+
+export function Params({
+  params,
+  paramsType,
+  title,
+}: Props) {
+  return (
+    <Grid gutter={10}>
+      <Grid.Col span={12}>
+        <Text
+          uppercase
+          color={"grayLike"}
+          size="xs"
+          fontWeight="medium"
+          component="h2"
+        >
+          {title}
+        </Text>
+      </Grid.Col>
+
+      <Grid.Col span={12}>
+        <section className={classes.root}>
+
+          <section className={classes.params}>
+            <Text color="white" size="sm" fontWeight="medium">
+              Parameters
+            </Text>
+            <Text color="gray" size="xs" italic>
+              {getParamsType(paramsType)}
+            </Text>
+          </section>
+
+          {params && params.length > 0 ? (
+            <ParamsList
+              params={params}
+              paramsType={paramsType}
+            />
+          ) : null}
+        </section>
+      </Grid.Col>
+    </Grid>
+  );
+}

components/GenericMethod/params/QueryParamsList.tsx → components/GenericMethod/params/ParamsList.tsx

@@ -1,31 +1,32 @@
 import { Group } from "@mantine/core";
 import { Fira_Mono } from "next/font/google";
 import { RequestParamProp } from "./types";
-import classes from "./QueryParamsList.module.css";
+import classes from "./ParamsList.module.css";
 import { Text } from "../../Text";
 import { TParamType } from "../types";
 import { getParamsType } from "../getParamsType";
 import cx from "clsx";
 
 type Props = {
-  queryParams: RequestParamProp;
-  queryParamsType: TParamType;
+  params: RequestParamProp;
+  paramsType: TParamType;
   isChild?: boolean;
 };
 
 const fira = Fira_Mono({ subsets: ["latin"], weight: ["400"] });
 
-export function QueryParamsList({ queryParams, queryParamsType }: Props) {
+export function ParamsList({ params, paramsType }: Props) {
+  const paramsTypeText = getParamsType(paramsType);
   return (
     <section className={classes.root}>
-      <div className={classes.line}>
+      {paramsTypeText && <div className={classes.line}>
         <Text color="gray" size="xs" fontWeight="medium" italic>
-          {getParamsType(queryParamsType)}
+          {paramsTypeText}
         </Text>
-      </div>
+      </div>}
 
       {/* Iterate through and render each param */}
-      {queryParams?.map((param) => (
+      {params?.map((param) => (
         <div key={param.paramName} className={classes.line}>
           <Group gap={10} align="center">
             <Text color="white" size="sm" fontWeight="medium">
@@ -75,9 +76,9 @@ export function QueryParamsList({ queryParams, queryParamsType }: Props) {
           {/* If param has children params, render them */}
           {param.childrenParams ? (
             <div className={cx(classes.line, classes.children)}>
-              <QueryParamsList
-                queryParams={param.childrenParams}
-                queryParamsType={queryParamsType}
+              <ParamsList
+                params={param.childrenParams}
+                paramsType={paramsType}
                 isChild
               />
             </div>

components/GenericMethod/params/PathParams.tsx

@@ -1,56 +1,7 @@
-import { Grid } from "@mantine/core";
-import classes from "./PathParams.module.css";
-import { PathParamsList } from "./PathParamsList";
-import { TParamType } from "../types";
-import { getParamsType } from "../getParamsType";
-import { Text } from "../../Text";
-import { ReqResParam } from "./types";
+import { Params, type Props as ParamsProps } from "./Params";
 
-type Props = {
-  pathParamsType: TParamType;
-  pathParams: ReqResParam[] | null;
-  isRESTApi?: boolean;
-};
+type Props = Omit<ParamsProps, "title">;
 
-export function PathParams({
-  pathParams,
-  pathParamsType,
-  isRESTApi,
-}: Props) {
-  return (
-    <Grid gutter={10}>
-      <Grid.Col span={12}>
-        <Text
-          uppercase
-          color={"grayLike"}
-          size="xs"
-          fontWeight="medium"
-          component="h2"
-        >
-          Path params
-        </Text>
-      </Grid.Col>
-
-      <Grid.Col span={12}>
-        <section className={classes.root}>
-
-          <section className={classes.params}>
-            <Text color="white" size="sm" fontWeight="medium">
-              Parameters
-            </Text>
-            <Text color="gray" size="xs" italic>
-              {getParamsType(pathParamsType)}
-            </Text>
-          </section>
-
-          {pathParams && pathParams.length > 0 ? (
-            <PathParamsList
-              pathParams={pathParams}
-              pathParamsType={pathParamsType}
-            />
-          ) : null}
-        </section>
-      </Grid.Col>
-    </Grid>
-  );
+export function PathParams(props: Props) {
+  return <Params {...props} title="Path params" />;
 }