feat(ref): act-1567 - added wss tab to code example section (#1728)

Author: TrofimovAnton85

src/components/ParserOpenRPC/RequestBox/index.tsx

@@ -1,11 +1,12 @@
-import React, { useContext, useMemo } from "react";
+import React, { useContext, useMemo, useState } from "react";
 import clsx from "clsx";
 import CodeBlock from "@theme/CodeBlock";
 import { MethodParam } from "@site/src/components/ParserOpenRPC/interfaces";
 import styles from "./styles.module.css";
 import global from "../global.module.css";
 import { Tooltip } from "@site/src/components/Tooltip";
 import { MetamaskProviderContext } from "@site/src/theme/Root";
+import Select from "react-dropdown-select";
 
 interface RequestBoxProps {
   isMetamaskInstalled: boolean;
@@ -22,6 +23,17 @@ interface RequestBoxProps {
   isLoading: boolean;
 }
 
+const langOptions = [
+  {
+    value: "curl",
+    label: "CURL"
+  },
+  {
+    value: "wss",
+    label: "WSS"
+  }
+]
+
 export default function RequestBox({
   isMetamaskInstalled,
   method,
@@ -37,15 +49,19 @@ export default function RequestBox({
   isLoading,
 }: RequestBoxProps) {
   const { userAPIKey } = useContext(MetamaskProviderContext);
+  const [currentLang, setCurrentLang] = useState(langOptions[0]);
   const exampleRequest = useMemo(() => {
     const preparedParams = JSON.stringify(paramsData, null, 2);
     const preparedShellParams = JSON.stringify(paramsData);
     const API_KEY = userAPIKey ? userAPIKey : "<YOUR-API-KEY>";
     if (isMetamaskNetwork) {
       return `await window.ethereum.request({\n "method": "${method}",\n "params": ${preparedParams.replace(/"([^"]+)":/g, '$1:')},\n});`;
     }
+    if (currentLang.value === "wss") {
+      return `wscat -c ${requestURL.replace("https", "wss")}${API_KEY} -x '{"jsonrpc":"2.0","method":"${method}","params": ${preparedShellParams},"id":1}'`
+    }
     return `curl ${requestURL}${API_KEY} \\\n  -X POST \\\n  -H "Content-Type: application/json" \\\n  -d '{\n    "jsonrpc": "2.0",\n    "method": "${method}",\n    "params": ${preparedShellParams},\n    "id": 1\n  }'`;
-  }, [userAPIKey, method, paramsData]);
+  }, [userAPIKey, method, paramsData, currentLang]);
 
   const exampleResponse = useMemo(() => {
     if (defExampleResponse && response === undefined) {
@@ -80,8 +96,20 @@ export default function RequestBox({
   return (
     <>
       <div className={styles.cardWrapper}>
-        <div className={styles.cardHeader}>
+        <div className={clsx(styles.cardHeader, !isMetamaskNetwork && styles.addIndent)}>
           <strong className={styles.cardHeading}>Request</strong>
+          {!isMetamaskNetwork && (
+            <Select
+              className={"select-lang"}
+              options={langOptions}
+              values={[currentLang]}
+              multi={false}
+              searchable={false}
+              onChange={(value) => {
+                setCurrentLang(value[0]);
+              }}
+            />
+          )}
         </div>
         <div className={styles.codeWrapper}>
           <CodeBlock

src/components/ParserOpenRPC/RequestBox/styles.module.css

@@ -14,6 +14,10 @@
   justify-content: space-between;
 }
 
+.addIndent {
+  padding: 10px 95px 10px 16px;
+}
+
 .cardHeading {
   color: #fff;
 }

src/css/custom.css

@@ -369,3 +369,30 @@ button:hover {
     font-size: 14px;
   }
 }
+
+.react-dropdown-select.select-lang {
+  min-width: 100px;
+  background: #292a36;
+  border: 1px solid #848C96;
+  padding-left: 10px;
+  border-radius: 6px;
+  color: #fff;
+}
+
+.react-dropdown-select.select-lang .react-dropdown-select-item {
+  background: #292a36;
+  color: #fff;
+  border: 0;
+}
+
+.react-dropdown-select.select-lang .react-dropdown-select-item:hover {
+  background: #141618;
+}
+
+.react-dropdown-select.select-lang .react-dropdown-select-item:not(:first-child) {
+  border-top: 1px solid #848c96;
+}
+
+.react-dropdown-select.select-lang .react-dropdown-select-dropdown-handle{
+  color: #fff;
+}