feat: migrate rpc-tool to redocly

Differences between original:
- react18-json-view used for responses
- cleaned up markup for expand and collapse

Original work on this was done by @khancode

Co-authored-by: Omar Khan <khancodegt@gmail.com>

Fix RPC sidebar and width

content/resources/dev-tools/components/rpc-tool/rpc-response-group.tsx

@@ -0,0 +1,48 @@
+import { useTranslate } from '@portal/hooks'
+import { ReactElement, useState } from 'react';
+import JsonView from 'react18-json-view'
+
+interface RPCResponseGroupProps {
+  response: any
+  anchor: ReactElement
+  customExpanded?: number,
+  customExpandedText?: string
+}
+
+export const RPCResponseGroup = ({ response, anchor, customExpanded, customExpandedText }: RPCResponseGroupProps) => {
+  const [expanded, setExpanded] = useState<number | false>(1)
+
+  return <div className="group group-tx">
+    <h3>{anchor}</h3>
+    <RPCResponseGroupExpanders customExpanded={customExpanded} customExpandedText={customExpandedText} setExpanded={setExpanded} />
+    <JsonView
+      src={response}
+      collapsed={expanded}
+      collapseStringsAfterLength={100}
+      enableClipboard={false}
+    />
+    <RPCResponseGroupExpanders customExpanded={customExpanded} customExpandedText={customExpandedText} setExpanded={setExpanded} />
+  </div>
+}
+
+const RPCResponseGroupExpanders = ({ customExpanded, customExpandedText, setExpanded }) => {
+  const { translate } = useTranslate();
+
+  return <ul className="nav nav-pills">
+    {customExpanded && customExpandedText && (
+      <li className="nav-item">
+        <a className="nav-link" onClick={() => setExpanded(customExpanded)}>
+          {customExpandedText}
+        </a>
+      </li>
+    )}
+    <li className="nav-item">
+      <a className="nav-link" onClick={() => setExpanded(false)}>{translate("expand all")}</a>
+    </li>
+    <li className="nav-item">
+      <a className="nav-link" onClick={() => setExpanded(1)}>
+        {translate("collapse all")}
+      </a>
+    </li>
+  </ul>
+}