feat: add blueprint code to the blueprint detail screen

package.json

@@ -14,6 +14,7 @@
     "d3-selection": "3.0.0",
     "d3-zoom": "3.0.0",
     "font-awesome": "4.7.0",
+    "highlight.js": "11.10.0",
     "jquery": "3.7.1",
     "lodash": "4.17.21",
     "npm-run-all": "4.1.5",

src/api/nanoApi.js

@@ -67,6 +67,25 @@ const nanoApi = {
       }
     );
   },
+
+  /**
+   * Get the blueprint source code
+   *
+   * @param {string} blueprintId ID of the blueprint
+   *
+   * For more details, see full node api docs
+   */
+  getBlueprintSourceCode(blueprintId) {
+    const data = { blueprint_id: blueprintId };
+    return requestExplorerServiceV1.get(`node_api/nc_blueprint_source_code`, { params: data }).then(
+      res => {
+        return res.data;
+      },
+      res => {
+        throw new Error(res.data.message);
+      }
+    );
+  },
 };
 
 export default nanoApi;

src/index.js

@@ -13,6 +13,7 @@ import App from './App';
 import 'bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'font-awesome/css/font-awesome.min.css';
+import 'highlight.js/styles/github.css';
 import './index.css';
 
 import store from './store/index';

src/index.scss

@@ -629,4 +629,25 @@ th.sortable {
 
 .table-method-arguments tbody tr {
   background-color: transparent !important;
+}
+
+.source-code code {
+  background-color: #f2f2f2;
+}
+
+.source-code pre {
+  height: 100%;
+}
+
+.source-code {
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  transition: all 1s ease;
+  height: 0;
+  opacity: 0;
+}
+
+.source-code.show {
+  height: auto !important;
+  opacity: 1 !important;
 }

src/screens/nano/BlueprintDetail.js

@@ -5,12 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import hljs from 'highlight.js/lib/core';
+import python from 'highlight.js/lib/languages/python';
 import Loading from '../../components/Loading';
 import nanoApi from '../../api/nanoApi';
 
+hljs.registerLanguage('python', python);
+
 /**
- * Details of a Nano Contract
+ * Details of a Blueprint
  *
  * @memberof Screens
  */
@@ -19,10 +23,16 @@ function BlueprintDetail(props) {
 
   // blueprintInformation {Object | null} Blueprint information
   const [blueprintInformation, setBlueprintInformation] = useState(null);
+  // blueprintSourceCode {string | null} Blueprint source code
+  const [blueprintSourceCode, setBlueprintSourceCode] = useState(null);
   // loading {boolean} Bool to show/hide loading when getting blueprint information
   const [loading, setLoading] = useState(true);
   // errorMessage {string | null} Error message in case a request to get nano contract data fails
   const [errorMessage, setErrorMessage] = useState(null);
+  // showCode {boolean} If should show the blueprint source code
+  const [showCode, setShowCode] = useState(false);
+
+  const codeRef = useRef();
 
   useEffect(() => {
     let ignore = false;
@@ -31,19 +41,21 @@ function BlueprintDetail(props) {
       setLoading(true);
       setBlueprintInformation(null);
       try {
-        const blueprintInformation = await nanoApi.getBlueprintInformation(blueprintId);
+        const blueprintInformationData = await nanoApi.getBlueprintInformation(blueprintId);
+        const blueprintSourceCodeData = await nanoApi.getBlueprintSourceCode(blueprintId);
         if (ignore) {
           // This is to prevent setting a state after the component has been already cleaned
           return;
         }
-        setBlueprintInformation(blueprintInformation);
-        setLoading(false);
+        setBlueprintInformation(blueprintInformationData);
+        setBlueprintSourceCode(blueprintSourceCodeData.source_code);
       } catch (e) {
         if (ignore) {
           // This is to prevent setting a state after the component has been already cleaned
           return;
         }
         setErrorMessage('Error getting blueprint information.');
+      } finally {
         setLoading(false);
       }
     }
@@ -54,6 +66,12 @@ function BlueprintDetail(props) {
     };
   }, [blueprintId]);
 
+  useEffect(() => {
+    if (codeRef && codeRef.current) {
+      hljs.highlightBlock(codeRef.current);
+    }
+  }, [blueprintSourceCode]);
+
   if (errorMessage) {
     return <p className="text-danger mb-4">{errorMessage}</p>;
   }
@@ -119,6 +137,16 @@ function BlueprintDetail(props) {
     return `${name}(${parameters.join(', ')}): ${returnType === 'null' ? 'None' : returnType}`;
   };
 
+  /**
+   * Handle toggle click to hide or show the blueprint source code
+   *
+   * @param {Event} e Click event
+   */
+  const onToggleShowCode = e => {
+    e.preventDefault();
+    setShowCode(!showCode);
+  };
+
   return (
     <div className="content-wrapper">
       <h3 className="mt-4">Blueprint Information</h3>
@@ -135,7 +163,19 @@ function BlueprintDetail(props) {
         {renderBlueprintAttributes()}
         {renderBlueprintMethods('public_methods', 'Public Methods')}
         {renderBlueprintMethods('private_methods', 'Private Methods')}
-        <hr />
+        <div className="d-flex flex-row align-items-center mb-4 mt-4">
+          <h4 className="mb-0 mr-3">Source Code</h4>
+          <a href="true" onClick={e => onToggleShowCode(e)}>
+            {showCode ? 'Hide' : 'Show'}
+          </a>
+        </div>
+        <div className={`source-code ${showCode ? 'show' : ''}`}>
+          <pre>
+            <code ref={codeRef} className="language-python">
+              {blueprintSourceCode}
+            </code>
+          </pre>
+        </div>
       </div>
     </div>
   );