From c74a38c9f902cbd68c83b9567ed32148726597ff Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <pedro@hathor.network>
Date: Mon, 19 Aug 2024 20:39:37 -0300
Subject: [PATCH] feat: add animation to show/hide source code

---
 src/index.scss                      | 19 ++++++++++++++++++-
 src/screens/nano/BlueprintDetail.js | 23 +++++++++++++++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 7c6eee8b..384d7d6b 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -631,6 +631,23 @@ th.sortable {
   background-color: transparent !important;
 }
 
-.source-code {
+.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;
 }
\ No newline at end of file
diff --git a/src/screens/nano/BlueprintDetail.js b/src/screens/nano/BlueprintDetail.js
index 40103a72..31a8fdd6 100644
--- a/src/screens/nano/BlueprintDetail.js
+++ b/src/screens/nano/BlueprintDetail.js
@@ -30,6 +30,8 @@ function BlueprintDetail(props) {
   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();
 
@@ -143,6 +145,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>
@@ -153,8 +165,15 @@ function BlueprintDetail(props) {
         { renderBlueprintAttributes() }
         { renderBlueprintMethods('public_methods', 'Public Methods') }
         { renderBlueprintMethods('private_methods', 'Private Methods') }
-        <h4 className="mt-5 mb-4">Source Code</h4>
-        <pre><code ref={codeRef} className='source-code language-python'>{blueprintSourceCode}</code></pre>
+        <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>
   );